npm - @azure/communication-react - Versions diffs - 1.22.0-beta.1 → 1.23.0-alpha-202412190017 - Mend

@azure/communication-react 1.22.0-beta.1 → 1.23.0-alpha-202412190017

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1219) hide show

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

@@ -3,17 +3,23 @@
 import React, { useState, useMemo, useCallback } from 'react';
 import { mergeStyles, concatStyleSets, Icon, Stack } from '@fluentui/react';
 import { sendButtonStyle, sendIconStyle, sendBoxWrapperStyles, borderAndBoxShadowStyle } from './styles/SendBox.styles';
+/* @conditional-compile-remove(file-sharing-acs) */
 import { useV9CustomStyles } from './styles/SendBox.styles';
 import { useTheme } from '../theming';
 import { useLocale } from '../localization';
 import { useIdentifiers } from '../identifiers';
 import { InputBoxComponent } from './InputBoxComponent';
 import { InputBoxButton } from './InputBoxButton';
+/* @conditional-compile-remove(file-sharing-acs) */
 import { SendBoxErrors } from './SendBoxErrors';
+/* @conditional-compile-remove(file-sharing-acs) */
 import { _AttachmentUploadCards } from './Attachment/AttachmentUploadCards';
+/* @conditional-compile-remove(file-sharing-acs) */
 import { attachmentUploadCardsStyles } from './styles/SendBox.styles';
+/* @conditional-compile-remove(file-sharing-acs) */
 import { isAttachmentUploadCompleted, hasIncompleteAttachmentUploads, toAttachmentMetadata } from './utils/SendBoxUtils';
 import { MAXIMUM_LENGTH_OF_MESSAGE, isMessageTooLong, sanitizeText, isSendBoxButtonDisabled } from './utils/SendBoxUtils';
+/* @conditional-compile-remove(file-sharing-acs) */
 import { FluentV9ThemeProvider } from '../theming/FluentV9ThemeProvider';
 /**
  * Component for typing and sending messages.
@@ -24,7 +30,11 @@ import { FluentV9ThemeProvider } from '../theming/FluentV9ThemeProvider';
  * @public
  */
 export const SendBox = (props) => {
-    const { disabled, systemMessage, supportNewline, onSendMessage, onTyping, onRenderIcon, onRenderSystemMessage, styles, autoFocus, mentionLookupOptions, attachments } = props;
+    const { disabled, systemMessage, supportNewline, onSendMessage, onTyping, onRenderIcon, onRenderSystemMessage, styles, autoFocus,
+    /* @conditional-compile-remove(mention) */
+    mentionLookupOptions,
+    /* @conditional-compile-remove(file-sharing-acs) */
+    attachments } = props;
     const theme = useTheme();
     const localeStrings = useLocale().strings.sendBox;
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
@@ -32,7 +42,9 @@ export const SendBox = (props) => {
     const [textValue, setTextValue] = useState('');
     const [textValueOverflow, setTextValueOverflow] = useState(false);
     const sendTextFieldRef = React.useRef(null);
+    /* @conditional-compile-remove(file-sharing-acs) */
     const customV9Styles = useV9CustomStyles();
+    /* @conditional-compile-remove(file-sharing-acs) */
     const [attachmentUploadsPendingError, setAttachmentUploadsPendingError] = useState(undefined);
     const sendMessageOnClick = () => {
         var _a;
@@ -41,22 +53,27 @@ export const SendBox = (props) => {
             return;
         }
         // Don't send message until all attachments have been uploaded successfully
+        /* @conditional-compile-remove(file-sharing-acs) */
         setAttachmentUploadsPendingError(undefined);
+        /* @conditional-compile-remove(file-sharing-acs) */
         if (hasIncompleteAttachmentUploads(attachments)) {
-            setAttachmentUploadsPendingError({
-                message: strings.attachmentUploadsPendingError,
-                timestamp: Date.now()
-            });
+            setAttachmentUploadsPendingError({ message: strings.attachmentUploadsPendingError, timestamp: Date.now() });
             return;
         }
         const message = textValue;
         // we don't want to send empty messages including spaces, newlines, tabs
         // Message can be empty if there is a valid attachment upload
-        if (sanitizeText(message).length > 0 || isAttachmentUploadCompleted(attachments)) {
-            onSendMessage && onSendMessage(message, {
-                attachments: toAttachmentMetadata(attachments),
-                type: 'text'
-            });
+        if (sanitizeText(message).length > 0 ||
+            /* @conditional-compile-remove(file-sharing-acs) */ isAttachmentUploadCompleted(attachments)) {
+            onSendMessage &&
+                onSendMessage(message,
+                /* @conditional-compile-remove(file-sharing-acs) */ /* @conditional-compile-remove(rich-text-editor-composite-support) */
+                {
+                    /* @conditional-compile-remove(file-sharing-acs) */
+                    attachments: toAttachmentMetadata(attachments),
+                    /* @conditional-compile-remove(rich-text-editor-composite-support) */
+                    type: 'text'
+                });
             setTextValue('');
             (_a = sendTextFieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
@@ -73,11 +90,17 @@ export const SendBox = (props) => {
     const isSendBoxButtonDisabledValue = useMemo(() => {
         return isSendBoxButtonDisabled({
             hasContent: sanitizeText(textValue).length > 0,
-            hasCompletedAttachmentUploads: isAttachmentUploadCompleted(attachments),
+            /* @conditional-compile-remove(file-sharing-acs) */ hasCompletedAttachmentUploads: isAttachmentUploadCompleted(attachments),
             hasError: !!errorMessage,
             disabled: !!disabled
         });
-    }, [attachments, disabled, errorMessage, textValue]);
+    }, [
+        /* @conditional-compile-remove(file-sharing-acs) */
+        attachments,
+        disabled,
+        errorMessage,
+        textValue
+    ]);
     const mergedSendButtonStyle = useMemo(() => mergeStyles(sendButtonStyle, styles === null || styles === void 0 ? void 0 : styles.sendMessageIconContainer), [styles === null || styles === void 0 ? void 0 : styles.sendMessageIconContainer]);
     const mergedStyles = useMemo(() => concatStyleSets(styles), [styles]);
     const mergedSendIconStyle = useMemo(() => sendIconStyle({
@@ -85,61 +108,78 @@ export const SendBox = (props) => {
         isSendBoxButtonDisabled: isSendBoxButtonDisabledValue,
         customSendIconStyle: styles === null || styles === void 0 ? void 0 : styles.sendMessageIcon
     }), [theme, isSendBoxButtonDisabledValue, styles === null || styles === void 0 ? void 0 : styles.sendMessageIcon]);
-    const onRenderSendIcon = useCallback((isHover) => onRenderIcon ? onRenderIcon(isHover) : React.createElement(Icon, { iconName: isHover && textValue ? 'SendBoxSendHovered' : 'SendBoxSend', className: mergedSendIconStyle }), [mergedSendIconStyle, onRenderIcon, textValue]);
+    const onRenderSendIcon = useCallback((isHover) => onRenderIcon ? (onRenderIcon(isHover)) : (React.createElement(Icon, { iconName: isHover && textValue ? 'SendBoxSendHovered' : 'SendBoxSend', className: mergedSendIconStyle })), [mergedSendIconStyle, onRenderIcon, textValue]);
     // Ensure that errors are cleared when there are no attachments in sendBox
+    /* @conditional-compile-remove(file-sharing-acs) */
     React.useEffect(() => {
-        if (!(attachments === null || attachments === void 0 ? void 0 : attachments.filter(upload => !upload.error).length)) {
+        if (!(attachments === null || attachments === void 0 ? void 0 : attachments.filter((upload) => !upload.error).length)) {
             setAttachmentUploadsPendingError(undefined);
         }
     }, [attachments]);
+    /* @conditional-compile-remove(file-sharing-acs) */
     const sendBoxErrorsProps = useMemo(() => {
         var _a;
         return {
             attachmentUploadsPendingError: attachmentUploadsPendingError,
-            attachmentProgressError: (_a = attachments === null || attachments === void 0 ? void 0 : attachments.filter(attachmentUpload => attachmentUpload.error).pop()) === null || _a === void 0 ? void 0 : _a.error
+            attachmentProgressError: (_a = attachments === null || attachments === void 0 ? void 0 : attachments.filter((attachmentUpload) => attachmentUpload.error).pop()) === null || _a === void 0 ? void 0 : _a.error
         };
     }, [attachments, attachmentUploadsPendingError]);
+    /* @conditional-compile-remove(file-sharing-acs) */
     const onRenderAttachmentUploads = useCallback(() => {
         var _a, _b, _c, _d, _e, _f, _g, _h;
-        if (!(attachments === null || attachments === void 0 ? void 0 : attachments.filter(upload => !upload.error).length)) {
+        if (!(attachments === null || attachments === void 0 ? void 0 : attachments.filter((upload) => !upload.error).length)) {
             return null;
         }
-        return props.onRenderAttachmentUploads ? props.onRenderAttachmentUploads() : React.createElement(Stack, { className: attachmentUploadCardsStyles },
+        return props.onRenderAttachmentUploads ? (props.onRenderAttachmentUploads()) : (React.createElement(Stack, { className: attachmentUploadCardsStyles },
             React.createElement(FluentV9ThemeProvider, { v8Theme: theme, className: customV9Styles.clearBackground },
                 React.createElement(_AttachmentUploadCards, { attachments: attachments, onCancelAttachmentUpload: props.onCancelAttachmentUpload, strings: {
                         removeAttachment: (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.removeAttachment) !== null && _b !== void 0 ? _b : localeStrings.removeAttachment,
                         uploading: (_d = (_c = props.strings) === null || _c === void 0 ? void 0 : _c.uploading) !== null && _d !== void 0 ? _d : localeStrings.uploading,
                         uploadCompleted: (_f = (_e = props.strings) === null || _e === void 0 ? void 0 : _e.uploadCompleted) !== null && _f !== void 0 ? _f : localeStrings.uploadCompleted,
                         attachmentMoreMenu: (_h = (_g = props.strings) === null || _g === void 0 ? void 0 : _g.attachmentMoreMenu) !== null && _h !== void 0 ? _h : localeStrings.attachmentMoreMenu
-                    }, disabled: disabled })));
-    }, [attachments, props, theme, customV9Styles.clearBackground, localeStrings.removeAttachment, localeStrings.uploading, localeStrings.uploadCompleted, localeStrings.attachmentMoreMenu, disabled]);
-    return React.createElement(Stack, { className: mergeStyles(sendBoxWrapperStyles, {
-            overflow: 'visible'
-        } // This is needed for the mention popup to be visible
+                    }, disabled: disabled }))));
+    }, [
+        attachments,
+        props,
+        theme,
+        customV9Styles.clearBackground,
+        localeStrings.removeAttachment,
+        localeStrings.uploading,
+        localeStrings.uploadCompleted,
+        localeStrings.attachmentMoreMenu,
+        disabled
+    ]);
+    return (React.createElement(Stack, { className: mergeStyles(sendBoxWrapperStyles, { overflow: 'visible' } // This is needed for the mention popup to be visible
         ) },
-        React.createElement(SendBoxErrors, { attachmentProgressError: sendBoxErrorsProps.attachmentProgressError ? {
-                message: sendBoxErrorsProps.attachmentProgressError.message,
-                timestamp: Date.now()
-            } : undefined, attachmentUploadsPendingError: sendBoxErrorsProps.attachmentUploadsPendingError }),
+        /* @conditional-compile-remove(file-sharing-acs) */
+        React.createElement(SendBoxErrors, { attachmentProgressError: sendBoxErrorsProps.attachmentProgressError
+                ? {
+                    message: sendBoxErrorsProps.attachmentProgressError.message,
+                    timestamp: Date.now()
+                }
+                : undefined, attachmentUploadsPendingError: sendBoxErrorsProps.attachmentUploadsPendingError }),
         React.createElement(Stack, { className: borderAndBoxShadowStyle({
                 theme,
                 hasErrorMessage: !!errorMessage,
                 disabled: !!disabled
             }) },
-            React.createElement(InputBoxComponent, { autoFocus: autoFocus, "data-ui-id": ids.sendboxTextField, disabled: disabled, errorMessage: onRenderSystemMessage ? onRenderSystemMessage(errorMessage) : errorMessage, textFieldRef: sendTextFieldRef, id: "sendbox", placeholderText: strings.placeholderText, textValue: textValue, onChange: (_, newValue) => setText(newValue), onKeyDown: ev => {
+            React.createElement(InputBoxComponent, { autoFocus: autoFocus, "data-ui-id": ids.sendboxTextField, disabled: disabled, errorMessage: onRenderSystemMessage ? onRenderSystemMessage(errorMessage) : errorMessage, textFieldRef: sendTextFieldRef, id: "sendbox", placeholderText: strings.placeholderText, textValue: textValue, onChange: (_, newValue) => setText(newValue), onKeyDown: (ev) => {
                     const keyWasSendingMessage = ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline);
                     if (!keyWasSendingMessage) {
                         onTyping === null || onTyping === void 0 ? void 0 : onTyping();
                     }
                 }, onEnterKeyDown: () => {
                     sendMessageOnClick();
-                }, styles: mergedStyles, supportNewline: supportNewline, maxLength: MAXIMUM_LENGTH_OF_MESSAGE, mentionLookupOptions: mentionLookupOptions },
-                React.createElement(InputBoxButton, { onRenderIcon: onRenderSendIcon, onClick: e => {
+                }, styles: mergedStyles, supportNewline: supportNewline, maxLength: MAXIMUM_LENGTH_OF_MESSAGE,
+                /* @conditional-compile-remove(mention) */
+                mentionLookupOptions: mentionLookupOptions },
+                React.createElement(InputBoxButton, { onRenderIcon: onRenderSendIcon, onClick: (e) => {
                         if (!textValueOverflow) {
                             sendMessageOnClick();
                         }
                         e.stopPropagation();
                     }, id: 'sendIconWrapper', className: mergedSendButtonStyle, ariaLabel: localeStrings.sendButtonAriaLabel, tooltipContent: localeStrings.sendButtonAriaLabel, disabled: isSendBoxButtonDisabledValue })),
-            onRenderAttachmentUploads()));
+            /* @conditional-compile-remove(file-sharing-acs) */
+            onRenderAttachmentUploads())));
 };
 //# sourceMappingURL=SendBox.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SendBox.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/SendBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useState, useMemo, useCallback } from 'react';\nimport { IStyle, ITextField, mergeStyles, concatStyleSets, Icon, Stack } from '@fluentui/react';\nimport { sendButtonStyle, sendIconStyle, sendBoxWrapperStyles, borderAndBoxShadowStyle } from './styles/SendBox.styles';\nimport { useV9CustomStyles } from './styles/SendBox.styles';\nimport { BaseCustomStyles } from '../types';\nimport { useTheme } from '../theming';\nimport { useLocale } from '../localization';\nimport { useIdentifiers } from '../identifiers';\nimport { InputBoxComponent } from './InputBoxComponent';\nimport { InputBoxButton } from './InputBoxButton';\nimport { SendBoxErrors } from './SendBoxErrors';\nimport { _AttachmentUploadCards } from './Attachment/AttachmentUploadCards';\nimport { AttachmentMetadataInProgress, MessageOptions } from '@internal/acs-ui-common';\nimport { attachmentUploadCardsStyles } from './styles/SendBox.styles';\nimport { SendBoxErrorBarError } from './SendBoxErrorBar';\nimport { isAttachmentUploadCompleted, hasIncompleteAttachmentUploads, toAttachmentMetadata } from './utils/SendBoxUtils';\nimport { MAXIMUM_LENGTH_OF_MESSAGE, isMessageTooLong, sanitizeText, isSendBoxButtonDisabled } from './utils/SendBoxUtils';\nimport { MentionLookupOptions } from './MentionPopover';\nimport { FluentV9ThemeProvider } from '../theming/FluentV9ThemeProvider';\n\n/*\n Fluent styles for {@link Sendbox}.\n \n @public\n /\nexport interface SendBoxStylesProps extends BaseCustomStyles {\n /* Styles for the text field. /\n textField?: IStyle;\n /* styles for the text field container /\n textFieldContainer?: IStyle;\n /* Styles for the container of the send message icon. /\n sendMessageIconContainer?: IStyle;\n /* Styles for the send message icon; These styles will be ignored when a custom send message icon is provided. /\n sendMessageIcon?: IStyle;\n /* Styles for the system message; These styles will be ignored when a custom system message component is provided. /\n systemMessage?: IStyle;\n}\n\n/\n Strings of {@link SendBox} that can be overridden.\n \n @public\n /\nexport interface SendBoxStrings {\n /\n Placeholder text in SendBox when there is no user input\n /\n placeholderText: string;\n /\n The warning message when send box text length is more than max limit\n /\n textTooLong: string;\n /\n Aria label for send message button\n /\n sendButtonAriaLabel: string;\n /\n Error message indicating that all attachment uploads are not complete.\n /\n attachmentUploadsPendingError: string;\n /\n Aria label to notify user when focus is on cancel attachment upload button.\n /\n removeAttachment: string;\n /\n Aria label to notify user attachment uploading starts.\n /\n uploading: string;\n /\n Aria label to notify user attachment is uploaded.\n /\n uploadCompleted: string;\n /\n Aria label to notify user more attachment action menu.\n /\n attachmentMoreMenu: string;\n}\n\n/\n Props for {@link SendBox}.\n \n @public\n /\nexport interface SendBoxProps {\n /\n Optional boolean to disable text box\n * @defaultValue false\n /\n disabled?: boolean;\n /\n Optional text for system message below text box\n /\n systemMessage?: string;\n /\n Optional override behavior on send button click\n /\n onSendMessage?: (content: string, options?: MessageOptions) => Promise<void>;\n /\n Optional props needed to lookup suggestions in the mention scenario.\n * @beta\n /\n mentionLookupOptions?: MentionLookupOptions;\n\n /\n Optional callback called when user is typing\n /\n onTyping?: () => Promise<void>;\n /\n Optional callback to render system message below the SendBox.\n * @defaultValue MessageBar\n /\n onRenderSystemMessage?: (systemMessage: string \| undefined) => React.ReactElement;\n /\n Optional boolean to support new line in SendBox.\n * @defaultValue false\n /\n supportNewline?: boolean;\n /\n Optional callback to render send button icon to the right of the SendBox.\n * @defaultValue SendBoxSendHovered icon when mouse over icon and SendBoxSend icon otherwise\n /\n onRenderIcon?: (isHover: boolean) => JSX.Element;\n /\n Allows users to pass in an object contains custom CSS styles.\n * @Example\n * ```\n * <SendBox styles={{ root: { background: 'blue' } }} />\n * ```\n /\n styles?: SendBoxStylesProps;\n /\n Optional strings to override in component\n /\n strings?: Partial<SendBoxStrings>;\n /\n enumerable to determine if the input box has focus on render or not.\n * When undefined nothing has focus on render\n /\n autoFocus?: 'sendBoxTextField';\n /\n Optional callback to render uploaded attachments in the SendBox. The sendBox will expand\n * vertically to accommodate the uploaded attachments. Attachment uploads will\n * be rendered below the text area in sendBox.\n * @beta\n /\n onRenderAttachmentUploads?: () => JSX.Element;\n /\n Optional array of type {@link AttachmentMetadataInProgress}\n * to render attachments being uploaded in the SendBox.\n * @beta\n /\n attachments?: AttachmentMetadataInProgress[];\n /\n Optional callback to remove the attachment upload before sending by clicking on\n * cancel icon.\n * @beta\n /\n onCancelAttachmentUpload?: (attachmentId: string) => void;\n}\n\n/\n Component for typing and sending messages.\n \n Supports sending typing notification when user starts entering text.\n * Supports an optional message below the text input field.\n \n @public\n */\nexport const SendBox = (props: SendBoxProps): JSX.Element => {\n const {\n disabled,\n systemMessage,\n supportNewline,\n onSendMessage,\n onTyping,\n onRenderIcon,\n onRenderSystemMessage,\n styles,\n autoFocus,\n mentionLookupOptions,\n attachments\n } = props;\n const theme = useTheme();\n const localeStrings = useLocale().strings.sendBox;\n const strings = {\n ...localeStrings,\n ...props.strings\n };\n const ids = useIdentifiers();\n const [textValue, setTextValue] = useState('');\n const [textValueOverflow, setTextValueOverflow] = useState(false);\n const sendTextFieldRef = React.useRef<ITextField>(null);\n const customV9Styles = useV9CustomStyles();\n const [attachmentUploadsPendingError, setAttachmentUploadsPendingError] = useState<SendBoxErrorBarError \| undefined>(undefined);\n const sendMessageOnClick = (): void => {\n // don't send a message when disabled\n if (disabled \|\| textValueOverflow) {\n return;\n }\n\n // Don't send message until all attachments have been uploaded successfully\n setAttachmentUploadsPendingError(undefined);\n if (hasIncompleteAttachmentUploads(attachments)) {\n setAttachmentUploadsPendingError({\n message: strings.attachmentUploadsPendingError,\n timestamp: Date.now()\n });\n return;\n }\n const message = textValue;\n // we don't want to send empty messages including spaces, newlines, tabs\n // Message can be empty if there is a valid attachment upload\n if (sanitizeText(message).length > 0 \|\| isAttachmentUploadCompleted(attachments)) {\n onSendMessage && onSendMessage(message, {\n attachments: toAttachmentMetadata(attachments),\n type: 'text'\n });\n setTextValue('');\n sendTextFieldRef.current?.focus();\n }\n };\n const setText = (newValue?: string \| undefined): void => {\n if (newValue === undefined) {\n return;\n }\n setTextValueOverflow(isMessageTooLong(newValue.length));\n setTextValue(newValue);\n };\n const textTooLongMessage = textValueOverflow ? strings.textTooLong : undefined;\n const errorMessage = systemMessage ?? textTooLongMessage;\n const isSendBoxButtonDisabledValue = useMemo(() => {\n return isSendBoxButtonDisabled({\n hasContent: sanitizeText(textValue).length > 0,\n hasCompletedAttachmentUploads: isAttachmentUploadCompleted(attachments),\n hasError: !!errorMessage,\n disabled: !!disabled\n });\n }, [attachments, disabled, errorMessage, textValue]);\n const mergedSendButtonStyle = useMemo(() => mergeStyles(sendButtonStyle, styles?.sendMessageIconContainer), [styles?.sendMessageIconContainer]);\n const mergedStyles = useMemo(() => concatStyleSets(styles), [styles]);\n const mergedSendIconStyle = useMemo(() => sendIconStyle({\n theme,\n isSendBoxButtonDisabled: isSendBoxButtonDisabledValue,\n customSendIconStyle: styles?.sendMessageIcon\n }), [theme, isSendBoxButtonDisabledValue, styles?.sendMessageIcon]);\n const onRenderSendIcon = useCallback((isHover: boolean) => onRenderIcon ? onRenderIcon(isHover) : <Icon iconName={isHover && textValue ? 'SendBoxSendHovered' : 'SendBoxSend'} className={mergedSendIconStyle} />, [mergedSendIconStyle, onRenderIcon, textValue]);\n\n // Ensure that errors are cleared when there are no attachments in sendBox\n React.useEffect(() => {\n if (!attachments?.filter(upload => !upload.error).length) {\n setAttachmentUploadsPendingError(undefined);\n }\n }, [attachments]);\n const sendBoxErrorsProps = useMemo(() => {\n return {\n attachmentUploadsPendingError: attachmentUploadsPendingError,\n attachmentProgressError: attachments?.filter(attachmentUpload => attachmentUpload.error).pop()?.error\n };\n }, [attachments, attachmentUploadsPendingError]);\n const onRenderAttachmentUploads = useCallback(() => {\n if (!attachments?.filter(upload => !upload.error).length) {\n return null;\n }\n return props.onRenderAttachmentUploads ? props.onRenderAttachmentUploads() : <Stack className={attachmentUploadCardsStyles}>\n <FluentV9ThemeProvider v8Theme={theme} className={customV9Styles.clearBackground}>\n <_AttachmentUploadCards attachments={attachments} onCancelAttachmentUpload={props.onCancelAttachmentUpload} strings={{\n removeAttachment: props.strings?.removeAttachment ?? localeStrings.removeAttachment,\n uploading: props.strings?.uploading ?? localeStrings.uploading,\n uploadCompleted: props.strings?.uploadCompleted ?? localeStrings.uploadCompleted,\n attachmentMoreMenu: props.strings?.attachmentMoreMenu ?? localeStrings.attachmentMoreMenu\n }} disabled={disabled} />\n </FluentV9ThemeProvider>\n </Stack>;\n }, [attachments, props, theme, customV9Styles.clearBackground, localeStrings.removeAttachment, localeStrings.uploading, localeStrings.uploadCompleted, localeStrings.attachmentMoreMenu, disabled]);\n return <Stack className={mergeStyles(sendBoxWrapperStyles, {\n overflow: 'visible'\n } // This is needed for the mention popup to be visible\n )}>\n {<SendBoxErrors attachmentProgressError={sendBoxErrorsProps.attachmentProgressError ? {\n message: sendBoxErrorsProps.attachmentProgressError.message,\n timestamp: Date.now()\n } : undefined} attachmentUploadsPendingError={sendBoxErrorsProps.attachmentUploadsPendingError} />}\n <Stack className={borderAndBoxShadowStyle({\n theme,\n hasErrorMessage: !!errorMessage,\n disabled: !!disabled\n })}>\n <InputBoxComponent autoFocus={autoFocus} data-ui-id={ids.sendboxTextField} disabled={disabled} errorMessage={onRenderSystemMessage ? onRenderSystemMessage(errorMessage) : errorMessage} textFieldRef={sendTextFieldRef} id=\"sendbox\" placeholderText={strings.placeholderText} textValue={textValue} onChange={(_, newValue) => setText(newValue)} onKeyDown={ev => {\n const keyWasSendingMessage = ev.key === 'Enter' && (ev.shiftKey === false \|\| !supportNewline);\n if (!keyWasSendingMessage) {\n onTyping?.();\n }\n }} onEnterKeyDown={() => {\n sendMessageOnClick();\n }} styles={mergedStyles} supportNewline={supportNewline} maxLength={MAXIMUM_LENGTH_OF_MESSAGE} mentionLookupOptions={mentionLookupOptions}>\n <InputBoxButton onRenderIcon={onRenderSendIcon} onClick={e => {\n if (!textValueOverflow) {\n sendMessageOnClick();\n }\n e.stopPropagation();\n }} id={'sendIconWrapper'} className={mergedSendButtonStyle} ariaLabel={localeStrings.sendButtonAriaLabel} tooltipContent={localeStrings.sendButtonAriaLabel} disabled={isSendBoxButtonDisabledValue} />\n </InputBoxComponent>\n {onRenderAttachmentUploads()}\n </Stack>\n </Stack>;\n};"]}
1	+ {"version":3,"file":"SendBox.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/SendBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useState, useMemo, useCallback } from 'react';\nimport { IStyle, ITextField, mergeStyles, concatStyleSets, Icon, Stack } from '@fluentui/react';\nimport { sendButtonStyle, sendIconStyle, sendBoxWrapperStyles, borderAndBoxShadowStyle } from './styles/SendBox.styles';\n/* @conditional-compile-remove(file-sharing-acs) /\nimport { useV9CustomStyles } from './styles/SendBox.styles';\nimport { BaseCustomStyles } from '../types';\nimport { useTheme } from '../theming';\nimport { useLocale } from '../localization';\nimport { useIdentifiers } from '../identifiers';\nimport { InputBoxComponent } from './InputBoxComponent';\nimport { InputBoxButton } from './InputBoxButton';\n/ @conditional-compile-remove(file-sharing-acs) /\nimport { SendBoxErrors } from './SendBoxErrors';\n/ @conditional-compile-remove(file-sharing-acs) /\nimport { _AttachmentUploadCards } from './Attachment/AttachmentUploadCards';\n/ @conditional-compile-remove(file-sharing-acs) /\nimport { AttachmentMetadataInProgress, MessageOptions } from '@internal/acs-ui-common';\n/ @conditional-compile-remove(file-sharing-acs) /\nimport { attachmentUploadCardsStyles } from './styles/SendBox.styles';\n/ @conditional-compile-remove(file-sharing-acs) /\nimport { SendBoxErrorBarError } from './SendBoxErrorBar';\n/ @conditional-compile-remove(file-sharing-acs) /\nimport {\n isAttachmentUploadCompleted,\n hasIncompleteAttachmentUploads,\n toAttachmentMetadata\n} from './utils/SendBoxUtils';\nimport {\n MAXIMUM_LENGTH_OF_MESSAGE,\n isMessageTooLong,\n sanitizeText,\n isSendBoxButtonDisabled\n} from './utils/SendBoxUtils';\n/ @conditional-compile-remove(mention) /\nimport { MentionLookupOptions } from './MentionPopover';\n/ @conditional-compile-remove(file-sharing-acs) /\nimport { FluentV9ThemeProvider } from '../theming/FluentV9ThemeProvider';\n\n/\n Fluent styles for {@link Sendbox}.\n \n @public\n /\nexport interface SendBoxStylesProps extends BaseCustomStyles {\n /* Styles for the text field. /\n textField?: IStyle;\n /* styles for the text field container /\n textFieldContainer?: IStyle;\n /* Styles for the container of the send message icon. /\n sendMessageIconContainer?: IStyle;\n /* Styles for the send message icon; These styles will be ignored when a custom send message icon is provided. /\n sendMessageIcon?: IStyle;\n /* Styles for the system message; These styles will be ignored when a custom system message component is provided. /\n systemMessage?: IStyle;\n}\n\n/\n Strings of {@link SendBox} that can be overridden.\n \n @public\n /\nexport interface SendBoxStrings {\n /\n Placeholder text in SendBox when there is no user input\n /\n placeholderText: string;\n /\n The warning message when send box text length is more than max limit\n /\n textTooLong: string;\n /\n Aria label for send message button\n /\n sendButtonAriaLabel: string;\n / @conditional-compile-remove(file-sharing-acs) /\n /\n Error message indicating that all attachment uploads are not complete.\n /\n attachmentUploadsPendingError: string;\n / @conditional-compile-remove(file-sharing-acs) /\n /\n Aria label to notify user when focus is on cancel attachment upload button.\n /\n removeAttachment: string;\n / @conditional-compile-remove(file-sharing-acs) /\n /\n Aria label to notify user attachment uploading starts.\n /\n uploading: string;\n / @conditional-compile-remove(file-sharing-acs) /\n /\n Aria label to notify user attachment is uploaded.\n /\n uploadCompleted: string;\n / @conditional-compile-remove(file-sharing-acs) /\n /\n Aria label to notify user more attachment action menu.\n /\n attachmentMoreMenu: string;\n}\n\n/\n Props for {@link SendBox}.\n \n @public\n /\nexport interface SendBoxProps {\n /\n Optional boolean to disable text box\n * @defaultValue false\n /\n disabled?: boolean;\n /\n Optional text for system message below text box\n /\n systemMessage?: string;\n /\n Optional override behavior on send button click\n /\n onSendMessage?: (\n content: string,\n / @conditional-compile-remove(file-sharing-acs) /\n options?: MessageOptions\n ) => Promise<void>;\n / @conditional-compile-remove(mention) /\n /\n Optional props needed to lookup suggestions in the mention scenario.\n * @beta\n /\n mentionLookupOptions?: MentionLookupOptions;\n\n /\n Optional callback called when user is typing\n /\n onTyping?: () => Promise<void>;\n /\n Optional callback to render system message below the SendBox.\n * @defaultValue MessageBar\n /\n onRenderSystemMessage?: (systemMessage: string \| undefined) => React.ReactElement;\n /\n Optional boolean to support new line in SendBox.\n * @defaultValue false\n /\n supportNewline?: boolean;\n /\n Optional callback to render send button icon to the right of the SendBox.\n * @defaultValue SendBoxSendHovered icon when mouse over icon and SendBoxSend icon otherwise\n /\n onRenderIcon?: (isHover: boolean) => JSX.Element;\n /\n Allows users to pass in an object contains custom CSS styles.\n * @Example\n * ```\n * <SendBox styles={{ root: { background: 'blue' } }} />\n * ```\n /\n styles?: SendBoxStylesProps;\n /\n Optional strings to override in component\n /\n strings?: Partial<SendBoxStrings>;\n /\n enumerable to determine if the input box has focus on render or not.\n * When undefined nothing has focus on render\n /\n autoFocus?: 'sendBoxTextField';\n / @conditional-compile-remove(file-sharing-acs) /\n /\n Optional callback to render uploaded attachments in the SendBox. The sendBox will expand\n * vertically to accommodate the uploaded attachments. Attachment uploads will\n * be rendered below the text area in sendBox.\n * @beta\n /\n onRenderAttachmentUploads?: () => JSX.Element;\n / @conditional-compile-remove(file-sharing-acs) /\n /\n Optional array of type {@link AttachmentMetadataInProgress}\n * to render attachments being uploaded in the SendBox.\n * @beta\n /\n attachments?: AttachmentMetadataInProgress[];\n / @conditional-compile-remove(file-sharing-acs) /\n /\n Optional callback to remove the attachment upload before sending by clicking on\n * cancel icon.\n * @beta\n /\n onCancelAttachmentUpload?: (attachmentId: string) => void;\n}\n\n/\n Component for typing and sending messages.\n \n Supports sending typing notification when user starts entering text.\n * Supports an optional message below the text input field.\n \n @public\n /\nexport const SendBox = (props: SendBoxProps): JSX.Element => {\n const {\n disabled,\n systemMessage,\n supportNewline,\n onSendMessage,\n onTyping,\n onRenderIcon,\n onRenderSystemMessage,\n styles,\n autoFocus,\n / @conditional-compile-remove(mention) /\n mentionLookupOptions,\n / @conditional-compile-remove(file-sharing-acs) /\n attachments\n } = props;\n const theme = useTheme();\n const localeStrings = useLocale().strings.sendBox;\n const strings = { ...localeStrings, ...props.strings };\n const ids = useIdentifiers();\n\n const [textValue, setTextValue] = useState('');\n const [textValueOverflow, setTextValueOverflow] = useState(false);\n\n const sendTextFieldRef = React.useRef<ITextField>(null);\n\n / @conditional-compile-remove(file-sharing-acs) /\n const customV9Styles = useV9CustomStyles();\n\n / @conditional-compile-remove(file-sharing-acs) /\n const [attachmentUploadsPendingError, setAttachmentUploadsPendingError] = useState<SendBoxErrorBarError \| undefined>(\n undefined\n );\n\n const sendMessageOnClick = (): void => {\n // don't send a message when disabled\n if (disabled \|\| textValueOverflow) {\n return;\n }\n\n // Don't send message until all attachments have been uploaded successfully\n / @conditional-compile-remove(file-sharing-acs) /\n setAttachmentUploadsPendingError(undefined);\n\n / @conditional-compile-remove(file-sharing-acs) /\n if (hasIncompleteAttachmentUploads(attachments)) {\n setAttachmentUploadsPendingError({ message: strings.attachmentUploadsPendingError, timestamp: Date.now() });\n return;\n }\n\n const message = textValue;\n // we don't want to send empty messages including spaces, newlines, tabs\n // Message can be empty if there is a valid attachment upload\n if (\n sanitizeText(message).length > 0 \|\|\n / @conditional-compile-remove(file-sharing-acs) / isAttachmentUploadCompleted(attachments)\n ) {\n onSendMessage &&\n onSendMessage(\n message,\n / @conditional-compile-remove(file-sharing-acs) / / @conditional-compile-remove(rich-text-editor-composite-support) /\n {\n / @conditional-compile-remove(file-sharing-acs) /\n attachments: toAttachmentMetadata(attachments),\n / @conditional-compile-remove(rich-text-editor-composite-support) /\n type: 'text'\n }\n );\n setTextValue('');\n sendTextFieldRef.current?.focus();\n }\n };\n\n const setText = (newValue?: string \| undefined): void => {\n if (newValue === undefined) {\n return;\n }\n\n setTextValueOverflow(isMessageTooLong(newValue.length));\n setTextValue(newValue);\n };\n\n const textTooLongMessage = textValueOverflow ? strings.textTooLong : undefined;\n const errorMessage = systemMessage ?? textTooLongMessage;\n\n const isSendBoxButtonDisabledValue = useMemo(() => {\n return isSendBoxButtonDisabled({\n hasContent: sanitizeText(textValue).length > 0,\n / @conditional-compile-remove(file-sharing-acs) / hasCompletedAttachmentUploads:\n isAttachmentUploadCompleted(attachments),\n hasError: !!errorMessage,\n disabled: !!disabled\n });\n }, [\n / @conditional-compile-remove(file-sharing-acs) /\n attachments,\n disabled,\n errorMessage,\n textValue\n ]);\n\n const mergedSendButtonStyle = useMemo(\n () => mergeStyles(sendButtonStyle, styles?.sendMessageIconContainer),\n [styles?.sendMessageIconContainer]\n );\n\n const mergedStyles = useMemo(() => concatStyleSets(styles), [styles]);\n\n const mergedSendIconStyle = useMemo(\n () =>\n sendIconStyle({\n theme,\n isSendBoxButtonDisabled: isSendBoxButtonDisabledValue,\n customSendIconStyle: styles?.sendMessageIcon\n }),\n [theme, isSendBoxButtonDisabledValue, styles?.sendMessageIcon]\n );\n\n const onRenderSendIcon = useCallback(\n (isHover: boolean) =>\n onRenderIcon ? (\n onRenderIcon(isHover)\n ) : (\n <Icon iconName={isHover && textValue ? 'SendBoxSendHovered' : 'SendBoxSend'} className={mergedSendIconStyle} />\n ),\n [mergedSendIconStyle, onRenderIcon, textValue]\n );\n\n // Ensure that errors are cleared when there are no attachments in sendBox\n / @conditional-compile-remove(file-sharing-acs) /\n React.useEffect(() => {\n if (!attachments?.filter((upload) => !upload.error).length) {\n setAttachmentUploadsPendingError(undefined);\n }\n }, [attachments]);\n\n / @conditional-compile-remove(file-sharing-acs) /\n const sendBoxErrorsProps = useMemo(() => {\n return {\n attachmentUploadsPendingError: attachmentUploadsPendingError,\n attachmentProgressError: attachments?.filter((attachmentUpload) => attachmentUpload.error).pop()?.error\n };\n }, [attachments, attachmentUploadsPendingError]);\n\n / @conditional-compile-remove(file-sharing-acs) /\n const onRenderAttachmentUploads = useCallback(() => {\n if (!attachments?.filter((upload) => !upload.error).length) {\n return null;\n }\n return props.onRenderAttachmentUploads ? (\n props.onRenderAttachmentUploads()\n ) : (\n <Stack className={attachmentUploadCardsStyles}>\n <FluentV9ThemeProvider v8Theme={theme} className={customV9Styles.clearBackground}>\n <_AttachmentUploadCards\n attachments={attachments}\n onCancelAttachmentUpload={props.onCancelAttachmentUpload}\n strings={{\n removeAttachment: props.strings?.removeAttachment ?? localeStrings.removeAttachment,\n uploading: props.strings?.uploading ?? localeStrings.uploading,\n uploadCompleted: props.strings?.uploadCompleted ?? localeStrings.uploadCompleted,\n attachmentMoreMenu: props.strings?.attachmentMoreMenu ?? localeStrings.attachmentMoreMenu\n }}\n disabled={disabled}\n />\n </FluentV9ThemeProvider>\n </Stack>\n );\n }, [\n attachments,\n props,\n theme,\n customV9Styles.clearBackground,\n localeStrings.removeAttachment,\n localeStrings.uploading,\n localeStrings.uploadCompleted,\n localeStrings.attachmentMoreMenu,\n disabled\n ]);\n\n return (\n <Stack\n className={mergeStyles(\n sendBoxWrapperStyles,\n { overflow: 'visible' } // This is needed for the mention popup to be visible\n )}\n >\n {\n / @conditional-compile-remove(file-sharing-acs) /\n <SendBoxErrors\n attachmentProgressError={\n sendBoxErrorsProps.attachmentProgressError\n ? {\n message: sendBoxErrorsProps.attachmentProgressError.message,\n timestamp: Date.now()\n }\n : undefined\n }\n attachmentUploadsPendingError={sendBoxErrorsProps.attachmentUploadsPendingError}\n />\n }\n <Stack\n className={borderAndBoxShadowStyle({\n theme,\n hasErrorMessage: !!errorMessage,\n disabled: !!disabled\n })}\n >\n <InputBoxComponent\n autoFocus={autoFocus}\n data-ui-id={ids.sendboxTextField}\n disabled={disabled}\n errorMessage={onRenderSystemMessage ? onRenderSystemMessage(errorMessage) : errorMessage}\n textFieldRef={sendTextFieldRef}\n id=\"sendbox\"\n placeholderText={strings.placeholderText}\n textValue={textValue}\n onChange={(_, newValue) => setText(newValue)}\n onKeyDown={(ev) => {\n const keyWasSendingMessage = ev.key === 'Enter' && (ev.shiftKey === false \|\| !supportNewline);\n if (!keyWasSendingMessage) {\n onTyping?.();\n }\n }}\n onEnterKeyDown={() => {\n sendMessageOnClick();\n }}\n styles={mergedStyles}\n supportNewline={supportNewline}\n maxLength={MAXIMUM_LENGTH_OF_MESSAGE}\n / @conditional-compile-remove(mention) /\n mentionLookupOptions={mentionLookupOptions}\n >\n <InputBoxButton\n onRenderIcon={onRenderSendIcon}\n onClick={(e) => {\n if (!textValueOverflow) {\n sendMessageOnClick();\n }\n e.stopPropagation();\n }}\n id={'sendIconWrapper'}\n className={mergedSendButtonStyle}\n ariaLabel={localeStrings.sendButtonAriaLabel}\n tooltipContent={localeStrings.sendButtonAriaLabel}\n disabled={isSendBoxButtonDisabledValue}\n />\n </InputBoxComponent>\n {\n / @conditional-compile-remove(file-sharing-acs) */\n onRenderAttachmentUploads()\n }\n </Stack>\n </Stack>\n );\n};\n"]}

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

@@ -1,10 +1,14 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 import { MessageBar } from '@fluentui/react';
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
 import { MessageBarType } from '@fluentui/react';
 import React, { useEffect } from 'react';
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
 import { useMemo } from 'react';
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
 import { useLocale } from '../localization';
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
 /**
  * @beta
  * Error bar type for {@link SendBoxErrorBarError}
@@ -29,6 +33,7 @@ export var SendBoxErrorBarType;
  */
 export const SendBoxErrorBar = (props) => {
     const { error, dismissAfterMs, onDismiss } = props;
+    /* @conditional-compile-remove(rich-text-editor-image-upload) */
     const strings = useLocale().strings.errorBar;
     const [errorMessage, setErrorMessage] = React.useState(error === null || error === void 0 ? void 0 : error.message);
     // Using `any` because `NodeJS.Timeout` here will cause `declaration error` with jest.
@@ -48,6 +53,7 @@ export const SendBoxErrorBar = (props) => {
             timeoutRef.current && clearTimeout(timeoutRef.current);
         };
     }, [dismissAfterMs, onDismiss, error]);
+    /* @conditional-compile-remove(rich-text-editor-image-upload) */
     const messageBarType = useMemo(() => {
         switch (error === null || error === void 0 ? void 0 : error.errorBarType) {
             case SendBoxErrorBarType.info:
@@ -66,7 +72,17 @@ export const SendBoxErrorBar = (props) => {
         }
     }, [error]);
     if (errorMessage) {
-        return React.createElement(MessageBar, { role: "alert", "aria-label": errorMessage, "data-testid": 'send-box-message-bar', messageBarType: messageBarType, isMultiline: true, key: (error === null || error === void 0 ? void 0 : error.errorBarType) || SendBoxErrorBarType.warning, onDismiss: onDismiss, dismissButtonAriaLabel: strings.dismissButtonAriaLabel }, errorMessage);
+        return (React.createElement(MessageBar, { role: "alert", "aria-label": errorMessage, "data-testid": 'send-box-message-bar',
+            /* @conditional-compile-remove(rich-text-editor-image-upload) */
+            messageBarType: messageBarType,
+            /* @conditional-compile-remove(rich-text-editor-image-upload) */
+            isMultiline: true,
+            /* @conditional-compile-remove(rich-text-editor-image-upload) */
+            key: (error === null || error === void 0 ? void 0 : error.errorBarType) || SendBoxErrorBarType.warning,
+            /* @conditional-compile-remove(rich-text-editor-image-upload) */
+            onDismiss: onDismiss,
+            /* @conditional-compile-remove(rich-text-editor-image-upload) */
+            dismissButtonAriaLabel: strings.dismissButtonAriaLabel }, errorMessage));
     }
     else {
         return React.createElement(React.Fragment, null);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SendBoxErrorBar.js","sourceRoot":"","sources":["~~../../../../../preprocess-dist/~~react-components/src/components/SendBoxErrorBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;~~AAC5C~~;;;GAGG;AACH,MAAM,CAAN,IAAY,mBAaX;AAbD,WAAY,mBAAmB;IAC7B,6BAA6B;IAC7B,6DAAQ,CAAA;IACR,8BAA8B;IAC9B,+DAAS,CAAA;IACT,gCAAgC;IAChC,mEAAW,CAAA;IACX,sCAAsC;IACtC,+EAAiB,CAAA;IACjB,gCAAgC;IAChC,mEAAW,CAAA;IACX,gCAAgC;IAChC,mEAAW,CAAA;AACb,CAAC,EAbW,mBAAmB,KAAnB,mBAAmB,QAa9B;~~AAoCD~~;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;IAC1E,MAAM,~~EACJ~~,KAAK,~~EACL~~,cAAc,~~EACd~~,SAAS,~~EACV~~,GAAG,KAAK,CAAC;~~IACV~~,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC;~~IAC7C~~,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC,CAAC;IACvE,sFAAsF;IACtF,8DAA8D;IAC9D,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,EAAO,CAAC;~~IACvC~~,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,eAAe,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC,CAAC;IAClC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;~~IACZ~~,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,IAAI,cAAc,KAAK,SAAS,EAAE,CAAC;YAC1C,UAAU,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBACnC,eAAe,CAAC,SAAS,CAAC,CAAC;gBAC3B,SAAS,IAAI,SAAS,EAAE,CAAC;YAC3B,CAAC,EAAE,cAAc,CAAC,CAAC;QACrB,CAAC;QACD,OAAO,GAAG,EAAE;YACV,UAAU,CAAC,OAAO,IAAI,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QACzD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,cAAc,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;~~IACvC~~,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,QAAQ,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,YAAY,EAAE,CAAC;YAC5B,KAAK,mBAAmB,CAAC,IAAI;gBAC3B,OAAO,cAAc,CAAC,IAAI,CAAC;YAC7B,KAAK,mBAAmB,CAAC,KAAK;gBAC5B,OAAO,cAAc,CAAC,KAAK,CAAC;YAC9B,KAAK,mBAAmB,CAAC,OAAO;gBAC9B,OAAO,cAAc,CAAC,OAAO,CAAC;YAChC,KAAK,mBAAmB,CAAC,aAAa;gBACpC,OAAO,cAAc,CAAC,aAAa,CAAC;YACtC,KAAK,mBAAmB,CAAC,OAAO;gBAC9B,OAAO,cAAc,CAAC,OAAO,CAAC;YAChC,KAAK,mBAAmB,CAAC,OAAO,CAAC;YACjC;gBACE,OAAO,cAAc,CAAC,OAAO,CAAC;QAClC,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;~~IACZ~~,IAAI,YAAY,EAAE,CAAC;QACjB,OAAO,oBAAC,UAAU,~~IAAC~~,IAAI,EAAC,OAAO,~~gBAAa~~,YAAY,~~iBAAe~~,sBAAsB,~~EAAE~~,cAAc,EAAE,cAAc,~~EAAE~~,WAAW,EAAE,IAAI,~~EAAE~~,GAAG,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,YAAY,KAAI,mBAAmB,CAAC,OAAO,~~EAAE~~,SAAS,EAAE,SAAS,~~EAAE~~,sBAAsB,EAAE,OAAO,CAAC,sBAAsB,~~IAClR~~,YAAY,CACF,CAAC;~~IAClB~~,CAAC;SAAM,CAAC;QACN,OAAO,yCAAK,CAAC;IACf,CAAC;AACH,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageBar } from '@fluentui/react';\nimport { MessageBarType } from '@fluentui/react';\nimport React, { useEffect } from 'react';\nimport { useMemo } from 'react';\nimport { useLocale } from '../localization';\n/*\n @beta\n * Error bar type for {@link SendBoxErrorBarError}\n /\nexport enum SendBoxErrorBarType {\n /* Info styled MessageBar /\n info = 0,\n /* Error styled MessageBar /\n error = 1,\n /* Blocked styled MessageBar /\n blocked = 2,\n /* SevereWarning styled MessageBar /\n severeWarning = 3,\n /* Success styled MessageBar /\n success = 4,\n /* Warning styled MessageBar /\n warning = 5,\n}\n\n/\n @beta\n * Error to be displayed to the user in an error bar above sendbox.\n /\nexport interface SendBoxErrorBarError {\n /* Error Message to be displayed /\n message: string;\n /\n Unix Timestamp. Preferred generation using `Date.now()`\n /\n timestamp: number;\n /\n ErrorBar type. Defaults to `warning`.\n /\n errorBarType?: SendBoxErrorBarType;\n}\n\n/\n @private\n /\nexport interface SendBoxErrorBarProps {\n /* Error to render /\n error?: SendBoxErrorBarError;\n /\n Automatically dismisses the error bar after the specified delay in ms.\n * Example: `10 * 1000` would be 10 seconds\n /\n dismissAfterMs?: number;\n /\n Callback to invoke when the error bar is dismissed\n /\n onDismiss?: () => void;\n}\n\n/\n @private\n */\nexport const SendBoxErrorBar = (props: SendBoxErrorBarProps): JSX.Element => {\n const {\n error~~,\n~~ dismissAfterMs~~,\n~~ onDismiss\n } = props;\n const strings = useLocale().strings.errorBar;\n const [errorMessage, setErrorMessage] = React.useState(error?.message);\n // Using `any` because `NodeJS.Timeout` here will cause `declaration error` with jest.\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const timeoutRef = React.useRef<any>();\n React.useEffect(() => {\n setErrorMessage(error?.message);\n }, [error]);\n useEffect(() => {\n if (error && dismissAfterMs !== undefined) {\n timeoutRef.current = setTimeout(() => {\n setErrorMessage(undefined);\n onDismiss && onDismiss();\n }, dismissAfterMs);\n }\n return () => {\n timeoutRef.current && clearTimeout(timeoutRef.current);\n };\n }, [dismissAfterMs, onDismiss, error]);\n const messageBarType = useMemo(() => {\n switch (error?.errorBarType) {\n case SendBoxErrorBarType.info:\n return MessageBarType.info;\n case SendBoxErrorBarType.error:\n return MessageBarType.error;\n case SendBoxErrorBarType.blocked:\n return MessageBarType.blocked;\n case SendBoxErrorBarType.severeWarning:\n return MessageBarType.severeWarning;\n case SendBoxErrorBarType.success:\n return MessageBarType.success;\n case SendBoxErrorBarType.warning:\n default:\n return MessageBarType.warning;\n }\n }, [error]);\n if (errorMessage) {\n return <MessageBar role=\"alert\" aria-label={errorMessage} data-testid={'send-box-message-bar'} messageBarType={messageBarType} isMultiline={true} key={error?.errorBarType \|\| SendBoxErrorBarType.warning} onDismiss={onDismiss} dismissButtonAriaLabel={strings.dismissButtonAriaLabel}>\n {errorMessage}\n </MessageBar~~>;\~~n } else {\n return <></>;\n }\n};"]}
1	+ {"version":3,"file":"SendBoxErrorBar.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/SendBoxErrorBar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageBar } from '@fluentui/react';\n/* @conditional-compile-remove(rich-text-editor-image-upload) /\nimport { MessageBarType } from '@fluentui/react';\nimport React, { useEffect } from 'react';\n/ @conditional-compile-remove(rich-text-editor-image-upload) /\nimport { useMemo } from 'react';\n/ @conditional-compile-remove(rich-text-editor-image-upload) /\nimport { useLocale } from '../localization';\n\n/ @conditional-compile-remove(rich-text-editor-image-upload) /\n/\n @beta\n * Error bar type for {@link SendBoxErrorBarError}\n /\nexport enum SendBoxErrorBarType {\n /* Info styled MessageBar /\n info = 0,\n /* Error styled MessageBar /\n error = 1,\n /* Blocked styled MessageBar /\n blocked = 2,\n /* SevereWarning styled MessageBar /\n severeWarning = 3,\n /* Success styled MessageBar /\n success = 4,\n /* Warning styled MessageBar /\n warning = 5\n}\n\n/\n @beta\n * Error to be displayed to the user in an error bar above sendbox.\n /\nexport interface SendBoxErrorBarError {\n /* Error Message to be displayed /\n message: string;\n /\n Unix Timestamp. Preferred generation using `Date.now()`\n /\n timestamp: number;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n /\n ErrorBar type. Defaults to `warning`.\n /\n errorBarType?: SendBoxErrorBarType;\n}\n\n/\n @private\n /\nexport interface SendBoxErrorBarProps {\n /* Error to render /\n error?: SendBoxErrorBarError;\n /\n Automatically dismisses the error bar after the specified delay in ms.\n * Example: `10 * 1000` would be 10 seconds\n /\n dismissAfterMs?: number;\n /\n Callback to invoke when the error bar is dismissed\n /\n onDismiss?: () => void;\n}\n\n/\n @private\n /\nexport const SendBoxErrorBar = (props: SendBoxErrorBarProps): JSX.Element => {\n const { error, dismissAfterMs, onDismiss } = props;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n const strings = useLocale().strings.errorBar;\n\n const [errorMessage, setErrorMessage] = React.useState(error?.message);\n // Using `any` because `NodeJS.Timeout` here will cause `declaration error` with jest.\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const timeoutRef = React.useRef<any>();\n\n React.useEffect(() => {\n setErrorMessage(error?.message);\n }, [error]);\n\n useEffect(() => {\n if (error && dismissAfterMs !== undefined) {\n timeoutRef.current = setTimeout(() => {\n setErrorMessage(undefined);\n onDismiss && onDismiss();\n }, dismissAfterMs);\n }\n return () => {\n timeoutRef.current && clearTimeout(timeoutRef.current);\n };\n }, [dismissAfterMs, onDismiss, error]);\n\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n const messageBarType = useMemo(() => {\n switch (error?.errorBarType) {\n case SendBoxErrorBarType.info:\n return MessageBarType.info;\n case SendBoxErrorBarType.error:\n return MessageBarType.error;\n case SendBoxErrorBarType.blocked:\n return MessageBarType.blocked;\n case SendBoxErrorBarType.severeWarning:\n return MessageBarType.severeWarning;\n case SendBoxErrorBarType.success:\n return MessageBarType.success;\n case SendBoxErrorBarType.warning:\n default:\n return MessageBarType.warning;\n }\n }, [error]);\n\n if (errorMessage) {\n return (\n <MessageBar\n role=\"alert\"\n aria-label={errorMessage}\n data-testid={'send-box-message-bar'}\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n messageBarType={messageBarType}\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n isMultiline={true}\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n key={error?.errorBarType \|\| SendBoxErrorBarType.warning}\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onDismiss={onDismiss}\n / @conditional-compile-remove(rich-text-editor-image-upload) */\n dismissButtonAriaLabel={strings.dismissButtonAriaLabel}\n >\n {errorMessage}\n </MessageBar>\n );\n } else {\n return <></>;\n }\n};\n"]}

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

@@ -9,7 +9,9 @@ export const SendBoxErrors = (props) => {
     const { attachmentProgressError, attachmentUploadsPendingError } = props;
     const errorToDisplay = React.useMemo(() => {
         if (attachmentProgressError && attachmentUploadsPendingError) {
-            return attachmentProgressError.timestamp > attachmentUploadsPendingError.timestamp ? attachmentProgressError : attachmentUploadsPendingError;
+            return attachmentProgressError.timestamp > attachmentUploadsPendingError.timestamp
+                ? attachmentProgressError
+                : attachmentUploadsPendingError;
         }
         return attachmentProgressError || attachmentUploadsPendingError;
     }, [attachmentProgressError, attachmentUploadsPendingError]);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SendBoxErrors.js","sourceRoot":"","sources":["~~../../../../../preprocess-dist/~~react-components/src/components/SendBoxErrors.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAwB,MAAM,mBAAmB,CAAC;AAU1E;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAe,EAAE;IACtE,MAAM,~~EACJ~~,uBAAuB,~~EACvB~~,6BAA6B,~~EAC9B~~,GAAG,KAAK,CAAC;~~IACV~~,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACxC,IAAI,uBAAuB,IAAI,6BAA6B,EAAE,CAAC;YAC7D,OAAO,uBAAuB,CAAC,SAAS,GAAG,6BAA6B,CAAC,SAAS,CAAC,CAAC,~~CAAC,~~uBAAuB,CAAC,CAAC,~~CAAC,~~6BAA6B,CAAC;~~QAC/I~~,CAAC;QACD,OAAO,uBAAuB,IAAI,6BAA6B,CAAC;IAClE,CAAC,EAAE,CAAC,uBAAuB,EAAE,6BAA6B,CAAC,CAAC,CAAC;~~IAC7D~~,OAAO,oBAAC,eAAe,IAAC,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,EAAE,GAAG,IAAI,GAAI,CAAC;AAC/E,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { SendBoxErrorBar, SendBoxErrorBarError } from './SendBoxErrorBar';\n\n/*\n @private\n /\nexport interface SendBoxErrorsProps {\n attachmentUploadsPendingError?: SendBoxErrorBarError;\n attachmentProgressError?: SendBoxErrorBarError;\n}\n\n/\n @private\n /\nexport const SendBoxErrors = (props: SendBoxErrorsProps): JSX.Element => {\n const {\n attachmentProgressError~~,\n~~ attachmentUploadsPendingError\n } = props;\n const errorToDisplay = React.useMemo(() => {\n if (attachmentProgressError && attachmentUploadsPendingError) {\n return attachmentProgressError.timestamp > attachmentUploadsPendingError.timestamp ? attachmentProgressError : attachmentUploadsPendingError;\n }\n return attachmentProgressError \|\| attachmentUploadsPendingError;\n }, [attachmentProgressError, attachmentUploadsPendingError]);\n return <SendBoxErrorBar error={errorToDisplay} dismissAfterMs={10 1000} />;\n};"]}
1	+ {"version":3,"file":"SendBoxErrors.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/SendBoxErrors.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAwB,MAAM,mBAAmB,CAAC;AAU1E;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAe,EAAE;IACtE,MAAM,EAAE,uBAAuB,EAAE,6BAA6B,EAAE,GAAG,KAAK,CAAC;IAEzE,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACxC,IAAI,uBAAuB,IAAI,6BAA6B,EAAE,CAAC;YAC7D,OAAO,uBAAuB,CAAC,SAAS,GAAG,6BAA6B,CAAC,SAAS;gBAChF,CAAC,CAAC,uBAAuB;gBACzB,CAAC,CAAC,6BAA6B,CAAC;QACpC,CAAC;QACD,OAAO,uBAAuB,IAAI,6BAA6B,CAAC;IAClE,CAAC,EAAE,CAAC,uBAAuB,EAAE,6BAA6B,CAAC,CAAC,CAAC;IAE7D,OAAO,oBAAC,eAAe,IAAC,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,EAAE,GAAG,IAAI,GAAI,CAAC;AAC/E,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { SendBoxErrorBar, SendBoxErrorBarError } from './SendBoxErrorBar';\n\n/*\n @private\n /\nexport interface SendBoxErrorsProps {\n attachmentUploadsPendingError?: SendBoxErrorBarError;\n attachmentProgressError?: SendBoxErrorBarError;\n}\n\n/\n @private\n /\nexport const SendBoxErrors = (props: SendBoxErrorsProps): JSX.Element => {\n const { attachmentProgressError, attachmentUploadsPendingError } = props;\n\n const errorToDisplay = React.useMemo(() => {\n if (attachmentProgressError && attachmentUploadsPendingError) {\n return attachmentProgressError.timestamp > attachmentUploadsPendingError.timestamp\n ? attachmentProgressError\n : attachmentUploadsPendingError;\n }\n return attachmentProgressError \|\| attachmentUploadsPendingError;\n }, [attachmentProgressError, attachmentUploadsPendingError]);\n\n return <SendBoxErrorBar error={errorToDisplay} dismissAfterMs={10 1000} />;\n};\n"]}

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

@@ -3,20 +3,20 @@ import { ControlBarButtonProps } from './ControlBarButton';
 /**
  * options bag to start captions
  *
- * @internal
+ * @public
  */
-export type _captionsOptions = {
+export type CaptionsOptions = {
     spokenLanguage: string;
 };
 /**
- *@internal
+ * @public
  */
-export interface _StartCaptionsButtonProps extends ControlBarButtonProps {
+export interface StartCaptionsButtonProps extends ControlBarButtonProps {
     /**
      * Utility property for using this component with communication react handlers
      * Start captions based on captions state
      */
-    onStartCaptions: (options?: _captionsOptions) => Promise<void>;
+    onStartCaptions: (options?: CaptionsOptions) => Promise<void>;
     /**
      * Utility property for using this component with communication react handlers
      * Stop captions based on captions state
@@ -34,13 +34,13 @@ export interface _StartCaptionsButtonProps extends ControlBarButtonProps {
     /**
      * Optional strings to override in component
      */
-    strings?: _StartCaptionsButtonStrings;
+    strings?: StartCaptionsButtonStrings;
 }
 /**
  * Strings for the hold button labels
- * @internal
+ * @public
  */
-export interface _StartCaptionsButtonStrings {
+export interface StartCaptionsButtonStrings {
     /**
      * Label for when action is to start Captions
      */
@@ -64,7 +64,7 @@ export interface _StartCaptionsButtonStrings {
  * Can be used with {@link ControlBar}
  *
  * @param props - properties for the start captions button.
- * @internal
+ * @public
  */
-export declare const _StartCaptionsButton: (props: _StartCaptionsButtonProps) => JSX.Element;
+export declare const StartCaptionsButton: (props: StartCaptionsButtonProps) => JSX.Element;
 //# sourceMappingURL=StartCaptionsButton.d.ts.map

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

@@ -13,16 +13,19 @@ import { ControlBarButton } from './ControlBarButton';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { _HighContrastAwareIcon } from './HighContrastAwareIcon';
 import { defaultSpokenLanguage } from './utils';
+import { useLocale } from '../localization';
 /**
  * a button to start or stop captions
  *
  * Can be used with {@link ControlBar}
  *
  * @param props - properties for the start captions button.
- * @internal
+ * @public
  */
-export const _StartCaptionsButton = (props) => {
-    const { onStartCaptions, onStopCaptions, onSetSpokenLanguage, currentSpokenLanguage, strings } = props;
+export const StartCaptionsButton = (props) => {
+    const { onStartCaptions, onStopCaptions, onSetSpokenLanguage, currentSpokenLanguage } = props;
+    const localeStrings = useLocale().strings.startCaptionsButton;
+    const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
     const onRenderStartIcon = () => {
         return React.createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "CaptionsIcon" });
     };
@@ -30,9 +33,7 @@ export const _StartCaptionsButton = (props) => {
         return React.createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "CaptionsOffIcon" });
     };
     const options = useMemo(() => {
-        return {
-            spokenLanguage: currentSpokenLanguage === '' ? defaultSpokenLanguage : currentSpokenLanguage
-        };
+        return { spokenLanguage: currentSpokenLanguage === '' ? defaultSpokenLanguage : currentSpokenLanguage };
     }, [currentSpokenLanguage]);
     const [hasSetSpokenLanguage, setHasSetSpokenLanguage] = useState(false);
     const onToggleStartCaptions = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
@@ -52,6 +53,6 @@ export const _StartCaptionsButton = (props) => {
             setHasSetSpokenLanguage(true);
         }
     }, [props.checked, onSetSpokenLanguage, options.spokenLanguage, hasSetSpokenLanguage]);
-    return React.createElement(ControlBarButton, Object.assign({}, props, { strings: strings, onClick: onToggleStartCaptions !== null && onToggleStartCaptions !== void 0 ? onToggleStartCaptions : props.onClick, onRenderOnIcon: onRenderStartIcon, onRenderOffIcon: onRenderOffIcon }));
+    return (React.createElement(ControlBarButton, Object.assign({}, props, { strings: strings, onClick: onToggleStartCaptions !== null && onToggleStartCaptions !== void 0 ? onToggleStartCaptions : props.onClick, onRenderOnIcon: onRenderStartIcon, onRenderOffIcon: onRenderOffIcon })));
 };
 //# sourceMappingURL=StartCaptionsButton.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"StartCaptionsButton.js","sourceRoot":"","sources":["~~../../../../../preprocess-dist/~~react-components/src/components/StartCaptionsButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAC7E,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AA+~~DhD~~;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,~~oBAAoB~~,GAAG,CAAC,~~KAAgC~~,EAAe,EAAE;~~IACpF~~,MAAM,~~EACJ~~,eAAe,~~EACf~~,cAAc,~~EACd~~,mBAAmB,~~EACnB~~,qBAAqB,~~EACrB~~,~~OAAO~~,~~EACR~~,GAAG,KAAK,CAAC;~~IACV~~,MAAM,iBAAiB,GAAG,GAAgB,EAAE;QAC1C,OAAO,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,cAAc,GAAG,CAAC;IACtF,CAAC,CAAC;IACF,MAAM,eAAe,GAAG,GAAgB,EAAE;QACxC,OAAO,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,iBAAiB,GAAG,CAAC;IACzF,CAAC,CAAC;~~IACF~~,MAAM,OAAO,~~GAAqB~~,OAAO,CAAC,GAAG,EAAE;~~QAC7C~~,OAAO~~;YACL~~,cAAc,EAAE,qBAAqB,KAAK,EAAE,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB~~;SAC7F~~,CAAC;~~IACJ~~,CAAC,EAAE,CAAC,qBAAqB,CAAC,CAAC,CAAC;~~IAC5B~~,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;~~IACxE~~,MAAM,qBAAqB,GAAG,WAAW,CAAC,GAAwB,EAAE;QAClE,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;YAClB,cAAc,EAAE,CAAC;QACnB,CAAC;aAAM,CAAC;YACN,MAAM,eAAe,CAAC,OAAO,CAAC,CAAC;QACjC,CAAC;IACH,CAAC,CAAA,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,OAAO,CAAC,CAAC,CAAC;~~IAC9D~~,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,OAAO,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC3C,4EAA4E;YAC5E,iIAAiI;YACjI,mBAAmB,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;YAC5C,6EAA6E;YAC7E,uBAAuB,CAAC,IAAI,CAAC,CAAC;QAChC,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,mBAAmB,EAAE,OAAO,CAAC,cAAc,EAAE,oBAAoB,CAAC,CAAC,CAAC;~~IACvF~~,OAAO,oBAAC,gBAAgB,~~oBAAK~~,KAAK,~~IAAE~~,OAAO,EAAE,OAAO,~~EAAE~~,OAAO,EAAE,qBAAqB,aAArB,qBAAqB,cAArB,qBAAqB,GAAI,KAAK,CAAC,OAAO,~~EAAE~~,cAAc,EAAE,iBAAiB,~~EAAE~~,eAAe,EAAE,eAAe,~~IAAI~~,CAAC;~~AACjL~~,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { defaultSpokenLanguage } from './utils';\n\n/*\n options bag to start captions\n \n @~~internal~~\n /\nexport type ~~_captionsOptions~~ = {\n spokenLanguage: string;\n};\n\n/\n @internal\n /\nexport interface ~~_StartCaptionsButtonProps~~ extends ControlBarButtonProps {\n /\n Utility property for using this component with communication react handlers\n * Start captions based on captions state\n /\n onStartCaptions: (options?: ~~_captionsOptions~~) => Promise<void>;\n /\n Utility property for using this component with communication react handlers\n * Stop captions based on captions state\n /\n onStopCaptions: () => Promise<void>;\n /\n Utility property for using this component with communication react handlers\n * set captions spoken language\n /\n onSetSpokenLanguage: (language: string) => Promise<void>;\n /\n Spoken language set for starting captions\n /\n currentSpokenLanguage: string;\n /\n Optional strings to override in component\n /\n strings?: ~~_StartCaptionsButtonStrings~~;\n}\n\n/\n Strings for the hold button labels\n * @~~internal~~\n /\nexport interface ~~_StartCaptionsButtonStrings~~ {\n /\n Label for when action is to start Captions\n /\n onLabel: string;\n /\n Label for when action is to stop Captions\n /\n offLabel: string;\n /\n Content for when button is checked, captions is on\n /\n tooltipOnContent: string;\n /\n Content for when button is unchecked, captions is off\n /\n tooltipOffContent: string;\n}\n\n/\n a button to start or stop captions\n \n Can be used with {@link ControlBar}\n \n @param props - properties for the start captions button.\n * @~~internal~~\n */\nexport const ~~_StartCaptionsButton~~ = (props: ~~_StartCaptionsButtonProps~~): JSX.Element => {\n const {\n onStartCaptions~~,\n~~ onStopCaptions~~,\n~~ onSetSpokenLanguage~~,\n~~ currentSpokenLanguage,\n strings\n } = props;\n const onRenderStartIcon = (): JSX.Element => {\n return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"CaptionsIcon\" />;\n };\n const onRenderOffIcon = (): JSX.Element => {\n return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"CaptionsOffIcon\" />;\n };\n const options: ~~_captionsOptions~~ = useMemo(() => {\n return {\n spokenLanguage: currentSpokenLanguage === '' ? defaultSpokenLanguage : currentSpokenLanguage\n };\n }, [currentSpokenLanguage]);\n const [hasSetSpokenLanguage, setHasSetSpokenLanguage] = useState(false);\n const onToggleStartCaptions = useCallback(async (): Promise<void> => {\n if (props.checked) {\n onStopCaptions();\n } else {\n await onStartCaptions(options);\n }\n }, [props.checked, onStartCaptions, onStopCaptions, options]);\n useEffect(() => {\n if (props.checked && !hasSetSpokenLanguage) {\n // set spoken language when start captions with a spoken language specified.\n // this is to fix the bug when a second user starts captions with a new spoken language, captions bot ignore that spoken language\n onSetSpokenLanguage(options.spokenLanguage);\n // we only need to call set spoken language once when first starting captions\n setHasSetSpokenLanguage(true);\n }\n }, [props.checked, onSetSpokenLanguage, options.spokenLanguage, hasSetSpokenLanguage]);\n return <ControlBarButton {...props} strings={strings} onClick={onToggleStartCaptions ?? props.onClick} onRenderOnIcon={onRenderStartIcon} onRenderOffIcon={onRenderOffIcon} ~~/>;\~~n};"]}
1	+ {"version":3,"file":"StartCaptionsButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/StartCaptionsButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAC7E,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AA+D5C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAA+B,EAAe,EAAE;IAClF,MAAM,EAAE,eAAe,EAAE,cAAc,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,GAAG,KAAK,CAAC;IAC9F,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,mBAAmB,CAAC;IAC9D,MAAM,OAAO,mCAAQ,aAAa,GAAK,KAAK,CAAC,OAAO,CAAE,CAAC;IACvD,MAAM,iBAAiB,GAAG,GAAgB,EAAE;QAC1C,OAAO,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,cAAc,GAAG,CAAC;IACtF,CAAC,CAAC;IACF,MAAM,eAAe,GAAG,GAAgB,EAAE;QACxC,OAAO,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,iBAAiB,GAAG,CAAC;IACzF,CAAC,CAAC;IAEF,MAAM,OAAO,GAAoB,OAAO,CAAC,GAAG,EAAE;QAC5C,OAAO,EAAE,cAAc,EAAE,qBAAqB,KAAK,EAAE,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,EAAE,CAAC;IAC1G,CAAC,EAAE,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAE5B,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExE,MAAM,qBAAqB,GAAG,WAAW,CAAC,GAAwB,EAAE;QAClE,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;YAClB,cAAc,EAAE,CAAC;QACnB,CAAC;aAAM,CAAC;YACN,MAAM,eAAe,CAAC,OAAO,CAAC,CAAC;QACjC,CAAC;IACH,CAAC,CAAA,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,OAAO,CAAC,CAAC,CAAC;IAE9D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,OAAO,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC3C,4EAA4E;YAC5E,iIAAiI;YACjI,mBAAmB,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;YAC5C,6EAA6E;YAC7E,uBAAuB,CAAC,IAAI,CAAC,CAAC;QAChC,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,mBAAmB,EAAE,OAAO,CAAC,cAAc,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAEvF,OAAO,CACL,oBAAC,gBAAgB,oBACX,KAAK,IACT,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,qBAAqB,aAArB,qBAAqB,cAArB,qBAAqB,GAAI,KAAK,CAAC,OAAO,EAC/C,cAAc,EAAE,iBAAiB,EACjC,eAAe,EAAE,eAAe,IAChC,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { defaultSpokenLanguage } from './utils';\nimport { useLocale } from '../localization';\n\n/*\n options bag to start captions\n \n @public\n /\nexport type CaptionsOptions = {\n spokenLanguage: string;\n};\n\n/\n @public\n /\nexport interface StartCaptionsButtonProps extends ControlBarButtonProps {\n /\n Utility property for using this component with communication react handlers\n * Start captions based on captions state\n /\n onStartCaptions: (options?: CaptionsOptions) => Promise<void>;\n /\n Utility property for using this component with communication react handlers\n * Stop captions based on captions state\n /\n onStopCaptions: () => Promise<void>;\n /\n Utility property for using this component with communication react handlers\n * set captions spoken language\n /\n onSetSpokenLanguage: (language: string) => Promise<void>;\n /\n Spoken language set for starting captions\n /\n currentSpokenLanguage: string;\n /\n Optional strings to override in component\n /\n strings?: StartCaptionsButtonStrings;\n}\n\n/\n Strings for the hold button labels\n * @public\n /\nexport interface StartCaptionsButtonStrings {\n /\n Label for when action is to start Captions\n /\n onLabel: string;\n /\n Label for when action is to stop Captions\n /\n offLabel: string;\n /\n Content for when button is checked, captions is on\n /\n tooltipOnContent: string;\n /\n Content for when button is unchecked, captions is off\n /\n tooltipOffContent: string;\n}\n\n/\n a button to start or stop captions\n \n Can be used with {@link ControlBar}\n \n @param props - properties for the start captions button.\n * @public\n */\nexport const StartCaptionsButton = (props: StartCaptionsButtonProps): JSX.Element => {\n const { onStartCaptions, onStopCaptions, onSetSpokenLanguage, currentSpokenLanguage } = props;\n const localeStrings = useLocale().strings.startCaptionsButton;\n const strings = { ...localeStrings, ...props.strings };\n const onRenderStartIcon = (): JSX.Element => {\n return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"CaptionsIcon\" />;\n };\n const onRenderOffIcon = (): JSX.Element => {\n return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"CaptionsOffIcon\" />;\n };\n\n const options: CaptionsOptions = useMemo(() => {\n return { spokenLanguage: currentSpokenLanguage === '' ? defaultSpokenLanguage : currentSpokenLanguage };\n }, [currentSpokenLanguage]);\n\n const [hasSetSpokenLanguage, setHasSetSpokenLanguage] = useState(false);\n\n const onToggleStartCaptions = useCallback(async (): Promise<void> => {\n if (props.checked) {\n onStopCaptions();\n } else {\n await onStartCaptions(options);\n }\n }, [props.checked, onStartCaptions, onStopCaptions, options]);\n\n useEffect(() => {\n if (props.checked && !hasSetSpokenLanguage) {\n // set spoken language when start captions with a spoken language specified.\n // this is to fix the bug when a second user starts captions with a new spoken language, captions bot ignore that spoken language\n onSetSpokenLanguage(options.spokenLanguage);\n // we only need to call set spoken language once when first starting captions\n setHasSetSpokenLanguage(true);\n }\n }, [props.checked, onSetSpokenLanguage, options.spokenLanguage, hasSetSpokenLanguage]);\n\n return (\n <ControlBarButton\n {...props}\n strings={strings}\n onClick={onToggleStartCaptions ?? props.onClick}\n onRenderOnIcon={onRenderStartIcon}\n onRenderOffIcon={onRenderOffIcon}\n />\n );\n};\n"]}

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

@@ -1,8 +1,14 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 import { mergeStyles, Spinner } from '@fluentui/react';
+/* @conditional-compile-remove(remote-ufd) */
+import { Stack } from '@fluentui/react';
 import React, { useEffect, useRef, useState } from 'react';
 import { invertedVideoInPipStyle, mediaContainer, container, loadingSpinnerContainer, loadSpinnerStyles } from './styles/StreamMedia.styles';
+/* @conditional-compile-remove(remote-ufd) */
+import { reconnectingContainer, reconnectSpinnerStyles } from './styles/StreamMedia.styles';
+/* @conditional-compile-remove(remote-ufd) */
+import { useLocale } from '../localization';
 import { useTheme } from '../theming';
 /**
  * Utility component to convert an HTMLElement with a video stream into a JSX element.
@@ -14,6 +20,8 @@ import { useTheme } from '../theming';
 export const StreamMedia = (props) => {
     const containerEl = useRef(null);
     const theme = useTheme();
+    /* @conditional-compile-remove(remote-ufd) */
+    const reconnectingText = useLocale().strings.videoTile.participantReconnecting || 'Reconnecting...';
     const { isMirrored, videoStreamElement, styles, loadingState = 'none' } = props;
     const [pipEnabled, setPipEnabled] = useState(false);
     useEffect(() => {
@@ -40,9 +48,12 @@ export const StreamMedia = (props) => {
             setPipEnabled(false);
         };
     }, [videoStreamElement]);
-    return React.createElement("div", { className: container() },
+    return (React.createElement("div", { className: container() },
         React.createElement("div", { "data-ui-id": "stream-media-container", className: mergeStyles(isMirrored && pipEnabled ? invertedVideoInPipStyle(theme) : mediaContainer(theme), styles === null || styles === void 0 ? void 0 : styles.root), ref: containerEl }),
-        loadingState === 'loading' && React.createElement("div", { className: loadingSpinnerContainer() },
-            React.createElement(Spinner, { "data-ui-id": "stream-media-loading-spinner", styles: loadSpinnerStyles })));
+        loadingState === 'loading' && (React.createElement("div", { className: loadingSpinnerContainer() },
+            React.createElement(Spinner, { "data-ui-id": "stream-media-loading-spinner", styles: loadSpinnerStyles }))),
+        /* @conditional-compile-remove(remote-ufd) */
+        loadingState === 'reconnecting' && (React.createElement(Stack, { className: reconnectingContainer() },
+            React.createElement(Spinner, { "data-ui-id": "stream-media-loading-spinner", styles: reconnectSpinnerStyles(), label: reconnectingText })))));
 };
 //# sourceMappingURL=StreamMedia.js.map