@azure/communication-react 1.14.1-alpha-202403210013 → 1.14.1-alpha-202403270012

package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextSendBoxErrors.js

@@ -7,10 +7,10 @@ import { SendBoxErrorBar } from '../SendBoxErrorBar';
  */
 export const RichTextSendBoxErrors = (props) => {
     const { 
-    /* @conditional-compile-remove(file-sharing) */
-    fileUploadError, 
-    /* @conditional-compile-remove(file-sharing) */
-    fileUploadsPendingError, systemMessage, textTooLongMessage } = props;
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    attachmentUploadError, 
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    attachmentUploadsPendingError, systemMessage, textTooLongMessage } = props;
     const [sendBoxError, setSendBoxError] = useState(undefined);
     useEffect(() => {
         if (systemMessage && !isMessageEmpty(systemMessage)) {
@@ -34,13 +34,13 @@ export const RichTextSendBoxErrors = (props) => {
             if (prev) {
                 errors.push(prev);
             }
-            /* @conditional-compile-remove(file-sharing) */
-            if (fileUploadsPendingError) {
-                errors.push(fileUploadsPendingError);
+            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+            if (attachmentUploadsPendingError) {
+                errors.push(attachmentUploadsPendingError);
             }
-            /* @conditional-compile-remove(file-sharing) */
-            if (fileUploadError) {
-                errors.push(fileUploadError);
+            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+            if (attachmentUploadError) {
+                errors.push(attachmentUploadError);
             }
             if (errors.length === 0) {
                 return undefined;
@@ -50,8 +50,8 @@ export const RichTextSendBoxErrors = (props) => {
             return sortedErrors[0];
         });
     }, [
-        /* @conditional-compile-remove(file-sharing) */ fileUploadError,
-        /* @conditional-compile-remove(file-sharing) */ fileUploadsPendingError
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ attachmentUploadError,
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ attachmentUploadsPendingError
     ]);
     const onDismiss = useCallback(() => {
         if (systemMessage && !isMessageEmpty(systemMessage)) {

package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextSendBoxErrors.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextSendBoxErrors.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextSendBoxErrors.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { SendBoxErrorBar, SendBoxErrorBarError } from '../SendBoxErrorBar';\n\n/**\n * @private\n */\nexport interface RichTextSendBoxErrorsProps {\n  /* @conditional-compile-remove(file-sharing) */\n  fileUploadsPendingError?: SendBoxErrorBarError;\n  /* @conditional-compile-remove(file-sharing) */\n  fileUploadError?: SendBoxErrorBarError;\n  systemMessage?: string;\n  textTooLongMessage?: string;\n}\n\n/**\n * @private\n */\nexport const RichTextSendBoxErrors = (props: RichTextSendBoxErrorsProps): JSX.Element => {\n  const {\n    /* @conditional-compile-remove(file-sharing) */\n    fileUploadError,\n    /* @conditional-compile-remove(file-sharing) */\n    fileUploadsPendingError,\n    systemMessage,\n    textTooLongMessage\n  } = props;\n  const [sendBoxError, setSendBoxError] = useState<SendBoxErrorBarError | undefined>(undefined);\n\n  useEffect(() => {\n    if (systemMessage && !isMessageEmpty(systemMessage)) {\n      setSendBoxError({ message: systemMessage, timestamp: Date.now() });\n    }\n  }, [systemMessage]);\n\n  useEffect(() => {\n    if (textTooLongMessage && !isMessageEmpty(textTooLongMessage)) {\n      setSendBoxError({ message: textTooLongMessage, timestamp: Date.now() });\n    }\n  }, [textTooLongMessage]);\n\n  useEffect(() => {\n    if (\n      (textTooLongMessage === undefined || isMessageEmpty(textTooLongMessage)) &&\n      (systemMessage === undefined || isMessageEmpty(systemMessage))\n    ) {\n      setSendBoxError(undefined);\n    }\n  }, [systemMessage, textTooLongMessage]);\n\n  useEffect(() => {\n    setSendBoxError((prev) => {\n      const errors: SendBoxErrorBarError[] = [];\n      if (prev) {\n        errors.push(prev);\n      }\n      /* @conditional-compile-remove(file-sharing) */\n      if (fileUploadsPendingError) {\n        errors.push(fileUploadsPendingError);\n      }\n      /* @conditional-compile-remove(file-sharing) */\n      if (fileUploadError) {\n        errors.push(fileUploadError);\n      }\n      if (errors.length === 0) {\n        return undefined;\n      }\n      // sort to get the latest error\n      const sortedErrors = errors.sort((a, b) => b.timestamp - a.timestamp);\n      return sortedErrors[0];\n    });\n  }, [\n    /* @conditional-compile-remove(file-sharing) */ fileUploadError,\n    /* @conditional-compile-remove(file-sharing) */ fileUploadsPendingError\n  ]);\n\n  const onDismiss = useCallback(() => {\n    if (systemMessage && !isMessageEmpty(systemMessage)) {\n      setSendBoxError({ message: systemMessage, timestamp: Date.now() });\n    }\n  }, [systemMessage]);\n\n  return (\n    <SendBoxErrorBar\n      error={sendBoxError}\n      dismissAfterMs={\n        // don't dismiss the system message\n        systemMessage !== undefined && sendBoxError?.message !== systemMessage ? 10 * 1000 : undefined\n      }\n      onDismiss={onDismiss}\n    />\n  );\n};\n\nconst isMessageEmpty = (message: string): boolean => {\n  return message.trim().length === 0;\n};\n"]}
+{"version":3,"file":"RichTextSendBoxErrors.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextSendBoxErrors.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { SendBoxErrorBar, SendBoxErrorBarError } from '../SendBoxErrorBar';\n\n/**\n * @private\n */\nexport interface RichTextSendBoxErrorsProps {\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  attachmentUploadsPendingError?: SendBoxErrorBarError;\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  attachmentUploadError?: SendBoxErrorBarError;\n  systemMessage?: string;\n  textTooLongMessage?: string;\n}\n\n/**\n * @private\n */\nexport const RichTextSendBoxErrors = (props: RichTextSendBoxErrorsProps): JSX.Element => {\n  const {\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    attachmentUploadError,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    attachmentUploadsPendingError,\n    systemMessage,\n    textTooLongMessage\n  } = props;\n  const [sendBoxError, setSendBoxError] = useState<SendBoxErrorBarError | undefined>(undefined);\n\n  useEffect(() => {\n    if (systemMessage && !isMessageEmpty(systemMessage)) {\n      setSendBoxError({ message: systemMessage, timestamp: Date.now() });\n    }\n  }, [systemMessage]);\n\n  useEffect(() => {\n    if (textTooLongMessage && !isMessageEmpty(textTooLongMessage)) {\n      setSendBoxError({ message: textTooLongMessage, timestamp: Date.now() });\n    }\n  }, [textTooLongMessage]);\n\n  useEffect(() => {\n    if (\n      (textTooLongMessage === undefined || isMessageEmpty(textTooLongMessage)) &&\n      (systemMessage === undefined || isMessageEmpty(systemMessage))\n    ) {\n      setSendBoxError(undefined);\n    }\n  }, [systemMessage, textTooLongMessage]);\n\n  useEffect(() => {\n    setSendBoxError((prev) => {\n      const errors: SendBoxErrorBarError[] = [];\n      if (prev) {\n        errors.push(prev);\n      }\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n      if (attachmentUploadsPendingError) {\n        errors.push(attachmentUploadsPendingError);\n      }\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n      if (attachmentUploadError) {\n        errors.push(attachmentUploadError);\n      }\n      if (errors.length === 0) {\n        return undefined;\n      }\n      // sort to get the latest error\n      const sortedErrors = errors.sort((a, b) => b.timestamp - a.timestamp);\n      return sortedErrors[0];\n    });\n  }, [\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ attachmentUploadError,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ attachmentUploadsPendingError\n  ]);\n\n  const onDismiss = useCallback(() => {\n    if (systemMessage && !isMessageEmpty(systemMessage)) {\n      setSendBoxError({ message: systemMessage, timestamp: Date.now() });\n    }\n  }, [systemMessage]);\n\n  return (\n    <SendBoxErrorBar\n      error={sendBoxError}\n      dismissAfterMs={\n        // don't dismiss the system message\n        systemMessage !== undefined && sendBoxError?.message !== systemMessage ? 10 * 1000 : undefined\n      }\n      onDismiss={onDismiss}\n    />\n  );\n};\n\nconst isMessageEmpty = (message: string): boolean => {\n  return message.trim().length === 0;\n};\n"]}

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { IStyle } from '@fluentui/react';
 import { BaseCustomStyles } from '../types';
-import { ActiveFileUpload } from './FileUploadCards';
+import { ActiveFileUpload } from './AttachmentUploadCards';
 import { MentionLookupOptions } from './MentionPopover';
 /**
  * Fluent styles for {@link Sendbox}.
@@ -39,19 +39,19 @@ export interface SendBoxStrings {
      */
     sendButtonAriaLabel: string;
     /**
-     * Error message indicating that all file uploads are not complete.
+     * Error message indicating that all attachment uploads are not complete.
      */
-    fileUploadsPendingError: string;
+    attachmentUploadsPendingError: string;
     /**
-     * Aria label to notify user when focus is on cancel file upload button.
+     * Aria label to notify user when focus is on cancel attachment upload button.
      */
-    removeFile: string;
+    removeAttachment: string;
     /**
-     * Aria label to notify user file uploading starts.
+     * Aria label to notify user attachment uploading starts.
      */
     uploading: string;
     /**
-     * Aria label to notify user file is uploaded.
+     * Aria label to notify user attachment is uploaded.
      */
     uploadCompleted: string;
 }
@@ -123,13 +123,13 @@ export interface SendBoxProps {
      */
     onRenderFileUploads?: () => JSX.Element;
     /**
-     * Optional array of active file uploads where each object has attributes
-     * of a file upload like name, progress, errorMessage etc.
+     * Optional array of active attachment uploads where each object has attributes
+     * of a attachment upload like name, progress, errorMessage etc.
      * @beta
      */
     activeFileUploads?: ActiveFileUpload[];
     /**
-     * Optional callback to remove the file upload before sending by clicking on
+     * Optional callback to remove the attachment upload before sending by clicking on
      * cancel icon.
      * @beta
      */

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

@@ -8,15 +8,17 @@ import { useLocale } from '../localization';
 import { useIdentifiers } from '../identifiers';
 import { InputBoxComponent } from './InputBoxComponent';
 import { InputBoxButton } from './InputBoxButton';
-/* @conditional-compile-remove(file-sharing) */
+/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
 import { SendBoxErrors } from './SendBoxErrors';
-/* @conditional-compile-remove(file-sharing) */
-import { _FileUploadCards } from './FileUploadCards';
-/* @conditional-compile-remove(file-sharing) */
-import { fileUploadCardsStyles } from './styles/SendBox.styles';
-/* @conditional-compile-remove(file-sharing) */
+/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+import { _AttachmentUploadCards } from './AttachmentUploadCards';
+/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+import { attachmentUploadCardsStyles } from './styles/SendBox.styles';
+/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
 import { hasCompletedFileUploads, hasIncompleteFileUploads } from './utils/SendBoxUtils';
 import { MAXIMUM_LENGTH_OF_MESSAGE, isMessageTooLong, sanitizeText } from './utils/SendBoxUtils';
+/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+import { FluentV9ThemeProvider } from '../theming/FluentV9ThemeProvider';
 /**
  * Component for typing and sending messages.
  *
@@ -29,7 +31,7 @@ export const SendBox = (props) => {
     const { disabled, systemMessage, supportNewline, onSendMessage, onTyping, onRenderIcon, onRenderSystemMessage, styles, autoFocus, 
     /* @conditional-compile-remove(mention) */
     mentionLookupOptions, 
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     activeFileUploads } = props;
     const theme = useTheme();
     const localeStrings = useLocale().strings.sendBox;
@@ -38,8 +40,8 @@ export const SendBox = (props) => {
     const [textValue, setTextValue] = useState('');
     const [textValueOverflow, setTextValueOverflow] = useState(false);
     const sendTextFieldRef = React.useRef(null);
-    /* @conditional-compile-remove(file-sharing) */
-    const [fileUploadsPendingError, setFileUploadsPendingError] = useState(undefined);
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    const [attachmentUploadsPendingError, setAttachmentUploadsPendingError] = useState(undefined);
     const sendMessageOnClick = () => {
         var _a;
         // don't send a message when disabled
@@ -47,18 +49,18 @@ export const SendBox = (props) => {
             return;
         }
         // Don't send message until all files have been uploaded successfully
-        /* @conditional-compile-remove(file-sharing) */
-        setFileUploadsPendingError(undefined);
-        /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        setAttachmentUploadsPendingError(undefined);
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
         if (hasIncompleteFileUploads(activeFileUploads)) {
-            setFileUploadsPendingError({ message: strings.fileUploadsPendingError, 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 file upload
+        // Message can be empty if there is a valid attachment upload
         if (sanitizeText(message).length > 0 ||
-            /* @conditional-compile-remove(file-sharing) */ hasCompletedFileUploads(activeFileUploads)) {
+            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ hasCompletedFileUploads(activeFileUploads)) {
             onSendMessage && onSendMessage(message);
             setTextValue('');
         }
@@ -78,48 +80,56 @@ export const SendBox = (props) => {
     const mergedSendIconStyle = useMemo(() => sendIconStyle({
         theme,
         hasText: !!textValue,
-        /* @conditional-compile-remove(file-sharing) */ hasFile: hasCompletedFileUploads(activeFileUploads),
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ hasFile: hasCompletedFileUploads(activeFileUploads),
         hasErrorMessage: !!errorMessage,
         customSendIconStyle: styles === null || styles === void 0 ? void 0 : styles.sendMessageIcon
     }), [
         theme,
         textValue,
-        /* @conditional-compile-remove(file-sharing) */ activeFileUploads,
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ activeFileUploads,
         errorMessage,
         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]);
     // Ensure that errors are cleared when there are no files in sendBox
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     React.useEffect(() => {
         if (!(activeFileUploads === null || activeFileUploads === void 0 ? void 0 : activeFileUploads.filter((upload) => !upload.error).length)) {
-            setFileUploadsPendingError(undefined);
+            setAttachmentUploadsPendingError(undefined);
         }
     }, [activeFileUploads]);
-    /* @conditional-compile-remove(file-sharing) */
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     const sendBoxErrorsProps = useMemo(() => {
         var _a;
         return {
-            fileUploadsPendingError: fileUploadsPendingError,
-            fileUploadError: (_a = activeFileUploads === null || activeFileUploads === void 0 ? void 0 : activeFileUploads.filter((fileUpload) => fileUpload.error).pop()) === null || _a === void 0 ? void 0 : _a.error
+            attachmentUploadsPendingError: attachmentUploadsPendingError,
+            attachmentUploadError: (_a = activeFileUploads === null || activeFileUploads === void 0 ? void 0 : activeFileUploads.filter((attachmentUpload) => attachmentUpload.error).pop()) === null || _a === void 0 ? void 0 : _a.error
         };
-    }, [activeFileUploads, fileUploadsPendingError]);
-    /* @conditional-compile-remove(file-sharing) */
+    }, [activeFileUploads, attachmentUploadsPendingError]);
+    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     const onRenderFileUploads = useCallback(() => {
         var _a, _b, _c, _d, _e, _f;
         if (!(activeFileUploads === null || activeFileUploads === void 0 ? void 0 : activeFileUploads.filter((upload) => !upload.error).length)) {
             return null;
         }
-        return props.onRenderFileUploads ? (props.onRenderFileUploads()) : (React.createElement(Stack, { className: fileUploadCardsStyles },
-            React.createElement(_FileUploadCards, { activeFileUploads: activeFileUploads, onCancelFileUpload: props.onCancelFileUpload, strings: {
-                    removeFile: (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.removeFile) !== null && _b !== void 0 ? _b : localeStrings.removeFile,
-                    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
-                } })));
-    }, [activeFileUploads, props, localeStrings]);
+        return props.onRenderFileUploads ? (props.onRenderFileUploads()) : (React.createElement(Stack, { className: attachmentUploadCardsStyles },
+            React.createElement(FluentV9ThemeProvider, { v8Theme: theme },
+                React.createElement(_AttachmentUploadCards, { activeFileUploads: activeFileUploads, onCancelFileUpload: props.onCancelFileUpload, 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
+                    } }))));
+    }, [
+        activeFileUploads,
+        props,
+        theme,
+        localeStrings.removeAttachment,
+        localeStrings.uploading,
+        localeStrings.uploadCompleted
+    ]);
     return (React.createElement(Stack, { className: mergeStyles(sendBoxWrapperStyles, { overflow: 'visible' } // This is needed for the mention popup to be visible
-        ) }, /* @conditional-compile-remove(file-sharing) */
-        React.createElement(SendBoxErrors, Object.assign({}, sendBoxErrorsProps)),
+        ) },
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ React.createElement(SendBoxErrors, Object.assign({}, sendBoxErrorsProps)),
         React.createElement(Stack, { className: borderAndBoxShadowStyle({
                 theme,
                 hasErrorMessage: !!errorMessage,
@@ -141,7 +151,7 @@ export const SendBox = (props) => {
                         }
                         e.stopPropagation();
                     }, id: 'sendIconWrapper', className: mergedSendButtonStyle, ariaLabel: localeStrings.sendButtonAriaLabel, tooltipContent: localeStrings.sendButtonAriaLabel })),
-            /* @conditional-compile-remove(file-sharing) */
+            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
             onRenderFileUploads())));
 };
 //# sourceMappingURL=SendBox.js.map

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

@@ -1 +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';\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) */\nimport { SendBoxErrors } from './SendBoxErrors';\n/* @conditional-compile-remove(file-sharing) */\nimport { ActiveFileUpload, _FileUploadCards } from './FileUploadCards';\n/* @conditional-compile-remove(file-sharing) */\nimport { fileUploadCardsStyles } from './styles/SendBox.styles';\n/* @conditional-compile-remove(file-sharing) */\nimport { SendBoxErrorBarError } from './SendBoxErrorBar';\n/* @conditional-compile-remove(file-sharing) */\nimport { hasCompletedFileUploads, hasIncompleteFileUploads } from './utils/SendBoxUtils';\nimport { MAXIMUM_LENGTH_OF_MESSAGE, isMessageTooLong, sanitizeText } from './utils/SendBoxUtils';\n/* @conditional-compile-remove(mention) */\nimport { MentionLookupOptions } from './MentionPopover';\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) */\n  /**\n   * Error message indicating that all file uploads are not complete.\n   */\n  fileUploadsPendingError: string;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Aria label to notify user when focus is on cancel file upload button.\n   */\n  removeFile: string;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Aria label to notify user file uploading starts.\n   */\n  uploading: string;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Aria label to notify user file is uploaded.\n   */\n  uploadCompleted: 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) => 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) */\n  /**\n   * Optional callback to render uploaded files in the SendBox. The sendBox will expand\n   * vertically to accommodate the uploaded files. File uploads will\n   * be rendered below the text area in sendBox.\n   * @beta\n   */\n  onRenderFileUploads?: () => JSX.Element;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Optional array of active file uploads where each object has attributes\n   * of a file upload like name, progress, errorMessage etc.\n   * @beta\n   */\n  activeFileUploads?: ActiveFileUpload[];\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Optional callback to remove the file upload before sending by clicking on\n   * cancel icon.\n   * @beta\n   */\n  onCancelFileUpload?: (fileId: 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) */\n    activeFileUploads\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) */\n  const [fileUploadsPendingError, setFileUploadsPendingError] = useState<SendBoxErrorBarError | undefined>(undefined);\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 files have been uploaded successfully\n    /* @conditional-compile-remove(file-sharing) */\n    setFileUploadsPendingError(undefined);\n\n    /* @conditional-compile-remove(file-sharing) */\n    if (hasIncompleteFileUploads(activeFileUploads)) {\n      setFileUploadsPendingError({ message: strings.fileUploadsPendingError, 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 file upload\n    if (\n      sanitizeText(message).length > 0 ||\n      /* @conditional-compile-remove(file-sharing) */ hasCompletedFileUploads(activeFileUploads)\n    ) {\n      onSendMessage && onSendMessage(message);\n      setTextValue('');\n    }\n    sendTextFieldRef.current?.focus();\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 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        hasText: !!textValue,\n        /* @conditional-compile-remove(file-sharing) */ hasFile: hasCompletedFileUploads(activeFileUploads),\n        hasErrorMessage: !!errorMessage,\n        customSendIconStyle: styles?.sendMessageIcon\n      }),\n    [\n      theme,\n      textValue,\n      /* @conditional-compile-remove(file-sharing) */ activeFileUploads,\n      errorMessage,\n      styles?.sendMessageIcon\n    ]\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 files in sendBox\n  /* @conditional-compile-remove(file-sharing) */\n  React.useEffect(() => {\n    if (!activeFileUploads?.filter((upload) => !upload.error).length) {\n      setFileUploadsPendingError(undefined);\n    }\n  }, [activeFileUploads]);\n\n  /* @conditional-compile-remove(file-sharing) */\n  const sendBoxErrorsProps = useMemo(() => {\n    return {\n      fileUploadsPendingError: fileUploadsPendingError,\n      fileUploadError: activeFileUploads?.filter((fileUpload) => fileUpload.error).pop()?.error\n    };\n  }, [activeFileUploads, fileUploadsPendingError]);\n\n  /* @conditional-compile-remove(file-sharing) */\n  const onRenderFileUploads = useCallback(() => {\n    if (!activeFileUploads?.filter((upload) => !upload.error).length) {\n      return null;\n    }\n    return props.onRenderFileUploads ? (\n      props.onRenderFileUploads()\n    ) : (\n      <Stack className={fileUploadCardsStyles}>\n        <_FileUploadCards\n          activeFileUploads={activeFileUploads}\n          onCancelFileUpload={props.onCancelFileUpload}\n          strings={{\n            removeFile: props.strings?.removeFile ?? localeStrings.removeFile,\n            uploading: props.strings?.uploading ?? localeStrings.uploading,\n            uploadCompleted: props.strings?.uploadCompleted ?? localeStrings.uploadCompleted\n          }}\n        />\n      </Stack>\n    );\n  }, [activeFileUploads, props, localeStrings]);\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      {/* @conditional-compile-remove(file-sharing) */ <SendBoxErrors {...sendBoxErrorsProps} />}\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          />\n        </InputBoxComponent>\n        {\n          /* @conditional-compile-remove(file-sharing) */\n          onRenderFileUploads()\n        }\n      </Stack>\n    </Stack>\n  );\n};\n"]}
+{"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';\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(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { SendBoxErrors } from './SendBoxErrors';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { ActiveFileUpload, _AttachmentUploadCards } from './AttachmentUploadCards';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { attachmentUploadCardsStyles } from './styles/SendBox.styles';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { SendBoxErrorBarError } from './SendBoxErrorBar';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { hasCompletedFileUploads, hasIncompleteFileUploads } from './utils/SendBoxUtils';\nimport { MAXIMUM_LENGTH_OF_MESSAGE, isMessageTooLong, sanitizeText } from './utils/SendBoxUtils';\n/* @conditional-compile-remove(mention) */\nimport { MentionLookupOptions } from './MentionPopover';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\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(attachment-download) @conditional-compile-remove(attachment-upload) */\n  /**\n   * Error message indicating that all attachment uploads are not complete.\n   */\n  attachmentUploadsPendingError: string;\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  /**\n   * Aria label to notify user when focus is on cancel attachment upload button.\n   */\n  removeAttachment: string;\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  /**\n   * Aria label to notify user attachment uploading starts.\n   */\n  uploading: string;\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  /**\n   * Aria label to notify user attachment is uploaded.\n   */\n  uploadCompleted: 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) => 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(attachment-download) @conditional-compile-remove(attachment-upload) */\n  /**\n   * Optional callback to render uploaded files in the SendBox. The sendBox will expand\n   * vertically to accommodate the uploaded files. File uploads will\n   * be rendered below the text area in sendBox.\n   * @beta\n   */\n  onRenderFileUploads?: () => JSX.Element;\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  /**\n   * Optional array of active attachment uploads where each object has attributes\n   * of a attachment upload like name, progress, errorMessage etc.\n   * @beta\n   */\n  activeFileUploads?: ActiveFileUpload[];\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  /**\n   * Optional callback to remove the attachment upload before sending by clicking on\n   * cancel icon.\n   * @beta\n   */\n  onCancelFileUpload?: (fileId: 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(attachment-download) @conditional-compile-remove(attachment-upload) */\n    activeFileUploads\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(attachment-download) @conditional-compile-remove(attachment-upload) */\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 files have been uploaded successfully\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    setAttachmentUploadsPendingError(undefined);\n\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    if (hasIncompleteFileUploads(activeFileUploads)) {\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(attachment-download) @conditional-compile-remove(attachment-upload) */ hasCompletedFileUploads(\n        activeFileUploads\n      )\n    ) {\n      onSendMessage && onSendMessage(message);\n      setTextValue('');\n    }\n    sendTextFieldRef.current?.focus();\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 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        hasText: !!textValue,\n        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ hasFile:\n          hasCompletedFileUploads(activeFileUploads),\n        hasErrorMessage: !!errorMessage,\n        customSendIconStyle: styles?.sendMessageIcon\n      }),\n    [\n      theme,\n      textValue,\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ activeFileUploads,\n      errorMessage,\n      styles?.sendMessageIcon\n    ]\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 files in sendBox\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  React.useEffect(() => {\n    if (!activeFileUploads?.filter((upload) => !upload.error).length) {\n      setAttachmentUploadsPendingError(undefined);\n    }\n  }, [activeFileUploads]);\n\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  const sendBoxErrorsProps = useMemo(() => {\n    return {\n      attachmentUploadsPendingError: attachmentUploadsPendingError,\n      attachmentUploadError: activeFileUploads?.filter((attachmentUpload) => attachmentUpload.error).pop()?.error\n    };\n  }, [activeFileUploads, attachmentUploadsPendingError]);\n\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  const onRenderFileUploads = useCallback(() => {\n    if (!activeFileUploads?.filter((upload) => !upload.error).length) {\n      return null;\n    }\n    return props.onRenderFileUploads ? (\n      props.onRenderFileUploads()\n    ) : (\n      <Stack className={attachmentUploadCardsStyles}>\n        <FluentV9ThemeProvider v8Theme={theme}>\n          <_AttachmentUploadCards\n            activeFileUploads={activeFileUploads}\n            onCancelFileUpload={props.onCancelFileUpload}\n            strings={{\n              removeAttachment: props.strings?.removeAttachment ?? localeStrings.removeAttachment,\n              uploading: props.strings?.uploading ?? localeStrings.uploading,\n              uploadCompleted: props.strings?.uploadCompleted ?? localeStrings.uploadCompleted\n            }}\n          />\n        </FluentV9ThemeProvider>\n      </Stack>\n    );\n  }, [\n    activeFileUploads,\n    props,\n    theme,\n    localeStrings.removeAttachment,\n    localeStrings.uploading,\n    localeStrings.uploadCompleted\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(attachment-download) @conditional-compile-remove(attachment-upload) */ <SendBoxErrors\n          {...sendBoxErrorsProps}\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          />\n        </InputBoxComponent>\n        {\n          /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n          onRenderFileUploads()\n        }\n      </Stack>\n    </Stack>\n  );\n};\n"]}

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

@@ -4,8 +4,8 @@ import { SendBoxErrorBarError } from './SendBoxErrorBar';
  * @private
  */
 export interface SendBoxErrorsProps {
-    fileUploadsPendingError?: SendBoxErrorBarError;
-    fileUploadError?: SendBoxErrorBarError;
+    attachmentUploadsPendingError?: SendBoxErrorBarError;
+    attachmentUploadError?: SendBoxErrorBarError;
 }
 /**
  * @private

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

@@ -6,13 +6,15 @@ import { SendBoxErrorBar } from './SendBoxErrorBar';
  * @private
  */
 export const SendBoxErrors = (props) => {
-    const { fileUploadError, fileUploadsPendingError } = props;
+    const { attachmentUploadError, attachmentUploadsPendingError } = props;
     const errorToDisplay = React.useMemo(() => {
-        if (fileUploadError && fileUploadsPendingError) {
-            return fileUploadError.timestamp > fileUploadsPendingError.timestamp ? fileUploadError : fileUploadsPendingError;
+        if (attachmentUploadError && attachmentUploadsPendingError) {
+            return attachmentUploadError.timestamp > attachmentUploadsPendingError.timestamp
+                ? attachmentUploadError
+                : attachmentUploadsPendingError;
         }
-        return fileUploadError || fileUploadsPendingError;
-    }, [fileUploadError, fileUploadsPendingError]);
+        return attachmentUploadError || attachmentUploadsPendingError;
+    }, [attachmentUploadError, attachmentUploadsPendingError]);
     return React.createElement(SendBoxErrorBar, { error: errorToDisplay, dismissAfterMs: 10 * 1000 });
 };
 //# sourceMappingURL=SendBoxErrors.js.map

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

@@ -1 +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,eAAe,EAAE,uBAAuB,EAAE,GAAG,KAAK,CAAC;IAE3D,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACxC,IAAI,eAAe,IAAI,uBAAuB,EAAE,CAAC;YAC/C,OAAO,eAAe,CAAC,SAAS,GAAG,uBAAuB,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,uBAAuB,CAAC;QACnH,CAAC;QACD,OAAO,eAAe,IAAI,uBAAuB,CAAC;IACpD,CAAC,EAAE,CAAC,eAAe,EAAE,uBAAuB,CAAC,CAAC,CAAC;IAE/C,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  fileUploadsPendingError?: SendBoxErrorBarError;\n  fileUploadError?: SendBoxErrorBarError;\n}\n\n/**\n * @private\n */\nexport const SendBoxErrors = (props: SendBoxErrorsProps): JSX.Element => {\n  const { fileUploadError, fileUploadsPendingError } = props;\n\n  const errorToDisplay = React.useMemo(() => {\n    if (fileUploadError && fileUploadsPendingError) {\n      return fileUploadError.timestamp > fileUploadsPendingError.timestamp ? fileUploadError : fileUploadsPendingError;\n    }\n    return fileUploadError || fileUploadsPendingError;\n  }, [fileUploadError, fileUploadsPendingError]);\n\n  return <SendBoxErrorBar error={errorToDisplay} dismissAfterMs={10 * 1000} />;\n};\n"]}
+{"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,qBAAqB,EAAE,6BAA6B,EAAE,GAAG,KAAK,CAAC;IAEvE,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACxC,IAAI,qBAAqB,IAAI,6BAA6B,EAAE,CAAC;YAC3D,OAAO,qBAAqB,CAAC,SAAS,GAAG,6BAA6B,CAAC,SAAS;gBAC9E,CAAC,CAAC,qBAAqB;gBACvB,CAAC,CAAC,6BAA6B,CAAC;QACpC,CAAC;QACD,OAAO,qBAAqB,IAAI,6BAA6B,CAAC;IAChE,CAAC,EAAE,CAAC,qBAAqB,EAAE,6BAA6B,CAAC,CAAC,CAAC;IAE3D,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  attachmentUploadError?: SendBoxErrorBarError;\n}\n\n/**\n * @private\n */\nexport const SendBoxErrors = (props: SendBoxErrorsProps): JSX.Element => {\n  const { attachmentUploadError, attachmentUploadsPendingError } = props;\n\n  const errorToDisplay = React.useMemo(() => {\n    if (attachmentUploadError && attachmentUploadsPendingError) {\n      return attachmentUploadError.timestamp > attachmentUploadsPendingError.timestamp\n        ? attachmentUploadError\n        : attachmentUploadsPendingError;\n    }\n    return attachmentUploadError || attachmentUploadsPendingError;\n  }, [attachmentUploadError, attachmentUploadsPendingError]);\n\n  return <SendBoxErrorBar error={errorToDisplay} dismissAfterMs={10 * 1000} />;\n};\n"]}

package/dist/dist-esm/react-components/src/components/VideoGallery/ParticipantVideoTileOverlay.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Reaction, ReactionResources } from '../../types';
+/**
+ * Reaction overlay component for Grid
+ *
+ * Can be used with {@link MeetingReactionOverlay}.
+ *
+ * @internal
+ */
+export declare const ParticipantVideoTileOverlay: React.MemoExoticComponent<(props: {
+    reaction?: Reaction;
+    reactionResources: ReactionResources;
+    emojiSize?: number;
+}) => React.JSX.Element>;
+//# sourceMappingURL=ParticipantVideoTileOverlay.d.ts.map

package/dist/dist-esm/react-components/src/components/VideoGallery/ParticipantVideoTileOverlay.js

@@ -0,0 +1,58 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* @conditional-compile-remove(reaction) */
+import React, { useCallback, useEffect, useState } from 'react';
+/* @conditional-compile-remove(reaction) */
+import { getEmojiResource } from './utils/videoGalleryLayoutUtils';
+/* @conditional-compile-remove(reaction) */
+import { Stack, mergeStyles } from '@fluentui/react';
+/* @conditional-compile-remove(reaction) */
+import { reactionRenderingStyle, videoContainerStyles } from '../styles/VideoTile.styles';
+/* @conditional-compile-remove(reaction) */
+import { REACTION_SCREEN_SHARE_ANIMATION_TIME_MS, REACTION_START_DISPLAY_SIZE, getReceivedUnixTime } from './utils/reactionUtils';
+/* @conditional-compile-remove(reaction) */
+/**
+ * Reaction overlay component for Grid
+ *
+ * Can be used with {@link MeetingReactionOverlay}.
+ *
+ * @internal
+ */
+export const ParticipantVideoTileOverlay = React.memo((props) => {
+    const { reaction, reactionResources, emojiSize = REACTION_START_DISPLAY_SIZE } = props;
+    const [isValidImageSource, setIsValidImageSource] = useState(false);
+    const backgroundImageUrl = reaction !== undefined && reactionResources !== undefined
+        ? getEmojiResource(reaction === null || reaction === void 0 ? void 0 : reaction.reactionType, reactionResources)
+        : '';
+    const currentUnixTimeStamp = Date.now();
+    const receivedUnixTimestamp = reaction ? getReceivedUnixTime(reaction.receivedOn) : undefined;
+    const canRenderReaction = (receivedUnixTimestamp
+        ? currentUnixTimeStamp - receivedUnixTimestamp < REACTION_SCREEN_SHARE_ANIMATION_TIME_MS
+        : false) && backgroundImageUrl !== undefined;
+    useEffect(() => {
+        if (!backgroundImageUrl || backgroundImageUrl.length === 0) {
+            return;
+        }
+        fetch(`${backgroundImageUrl}`)
+            .then((res) => {
+            setIsValidImageSource(res.ok);
+        })
+            .catch((warning) => console.warn(`Sprite image for animation rendering failed with warning: ${warning}`));
+        return () => setIsValidImageSource(false);
+    }, [backgroundImageUrl]);
+    const spriteImageUrl = backgroundImageUrl !== null && backgroundImageUrl !== void 0 ? backgroundImageUrl : undefined;
+    const reactionContainerStyles = useCallback(() => reactionRenderingStyle({
+        spriteImageUrl,
+        emojiSize: emojiSize
+    }), [spriteImageUrl, emojiSize]);
+    return (React.createElement(Stack, { className: mergeStyles(videoContainerStyles, {
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            backgroundColor: canRenderReaction ? 'rgba(0, 0, 0, 0.5)' : 'transparent'
+        }) },
+        React.createElement("div", { style: { height: '33.33%' } }),
+        canRenderReaction && isValidImageSource && (React.createElement("div", { style: { minHeight: '84px', height: '84px', width: '84px' } },
+            React.createElement("div", { className: reactionContainerStyles() })))));
+});
+//# sourceMappingURL=ParticipantVideoTileOverlay.js.map

package/dist/dist-esm/react-components/src/components/VideoGallery/ParticipantVideoTileOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParticipantVideoTileOverlay.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/ParticipantVideoTileOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(reaction) */\nimport React, { useCallback, useEffect, useState } from 'react';\n/* @conditional-compile-remove(reaction) */\nimport { Reaction, ReactionResources } from '../../types';\n/* @conditional-compile-remove(reaction) */\nimport { getEmojiResource } from './utils/videoGalleryLayoutUtils';\n/* @conditional-compile-remove(reaction) */\nimport { Stack, mergeStyles } from '@fluentui/react';\n/* @conditional-compile-remove(reaction) */\nimport { reactionRenderingStyle, videoContainerStyles } from '../styles/VideoTile.styles';\n/* @conditional-compile-remove(reaction) */\nimport {\n  REACTION_SCREEN_SHARE_ANIMATION_TIME_MS,\n  REACTION_START_DISPLAY_SIZE,\n  getReceivedUnixTime\n} from './utils/reactionUtils';\n\n/* @conditional-compile-remove(reaction) */\n/**\n * Reaction overlay component for Grid\n *\n * Can be used with {@link MeetingReactionOverlay}.\n *\n * @internal\n */\nexport const ParticipantVideoTileOverlay = React.memo(\n  (props: { reaction?: Reaction; reactionResources: ReactionResources; emojiSize?: number }) => {\n    const { reaction, reactionResources, emojiSize = REACTION_START_DISPLAY_SIZE } = props;\n    const [isValidImageSource, setIsValidImageSource] = useState<boolean>(false);\n\n    const backgroundImageUrl =\n      reaction !== undefined && reactionResources !== undefined\n        ? getEmojiResource(reaction?.reactionType, reactionResources)\n        : '';\n\n    const currentUnixTimeStamp = Date.now();\n    const receivedUnixTimestamp = reaction ? getReceivedUnixTime(reaction.receivedOn) : undefined;\n    const canRenderReaction =\n      (receivedUnixTimestamp\n        ? currentUnixTimeStamp - receivedUnixTimestamp < REACTION_SCREEN_SHARE_ANIMATION_TIME_MS\n        : false) && backgroundImageUrl !== undefined;\n\n    useEffect(() => {\n      if (!backgroundImageUrl || backgroundImageUrl.length === 0) {\n        return;\n      }\n\n      fetch(`${backgroundImageUrl}`)\n        .then((res) => {\n          setIsValidImageSource(res.ok);\n        })\n        .catch((warning) => console.warn(`Sprite image for animation rendering failed with warning: ${warning}`));\n\n      return () => setIsValidImageSource(false);\n    }, [backgroundImageUrl]);\n\n    const spriteImageUrl = backgroundImageUrl ?? undefined;\n    const reactionContainerStyles = useCallback(\n      () =>\n        reactionRenderingStyle({\n          spriteImageUrl,\n          emojiSize: emojiSize\n        }),\n      [spriteImageUrl, emojiSize]\n    );\n\n    return (\n      <Stack\n        className={mergeStyles(videoContainerStyles, {\n          display: 'flex',\n          justifyContent: 'center',\n          alignItems: 'center',\n          backgroundColor: canRenderReaction ? 'rgba(0, 0, 0, 0.5)' : 'transparent'\n        })}\n      >\n        <div style={{ height: '33.33%' }}></div>\n        {canRenderReaction && isValidImageSource && (\n          <div style={{ minHeight: '84px', height: '84px', width: '84px' }}>\n            <div className={reactionContainerStyles()} />\n          </div>\n        )}\n      </Stack>\n    );\n  }\n);\n"]}

package/dist/dist-esm/react-components/src/components/VideoGallery/RemoteContentShareReactionOverlay.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ReactionResources, VideoGalleryLocalParticipant, VideoGalleryRemoteParticipant } from '../../types';
+/**
+ * The overlay responsible for rendering multiple reactions all at once in presentation mode
+ * @internal
+ */
+export declare const RemoteContentShareReactionOverlay: React.MemoExoticComponent<(props: {
+    reactionResources: ReactionResources;
+    localParticipant?: VideoGalleryLocalParticipant;
+    remoteParticipants?: VideoGalleryRemoteParticipant[];
+    hostDivHeight?: number;
+    hostDivWidth?: number;
+}) => React.JSX.Element>;
+//# sourceMappingURL=RemoteContentShareReactionOverlay.d.ts.map