@azure/communication-react 1.13.0-alpha-202402020012 → 1.13.0-alpha-202402040013

package/dist/communication-react.d.ts

@@ -3322,7 +3322,10 @@ export declare interface CallWithChatClientState {
     selectedVideoBackgroundEffect?: VideoBackgroundEffect;
     /** Hide attendee names in teams meeting */
     hideAttendeeNames?: boolean;
-    /** Reaction resources to render in meetings */
+    /**
+     * Reaction resources to render in meetings
+     * @beta
+     * */
     reactions?: ReactionResources;
 }
 
@@ -5295,7 +5298,10 @@ export declare interface ComponentStrings {
     screenShareButton: ScreenShareButtonStrings;
     /** Strings for RaiseHandButton */
     raiseHandButton: RaiseHandButtonStrings;
-    /** Strings for ReactionButton */
+    /**
+     * Strings for ReactionButton
+     * @beta
+     * */
     reactionButton: ReactionButtonStrings;
     /** Strings for TypingIndicator */
     typingIndicator: TypingIndicatorStrings;
@@ -10957,6 +10963,7 @@ export declare interface VideoGalleryProps {
     localVideoTileSize?: LocalVideoTileSize;
     /**
      * Reaction resources for like, heart, laugh, applause and surprised.
+     * @beta
      */
     reactionResources?: ReactionResources;
 }
@@ -11230,7 +11237,10 @@ export declare interface VideoTileProps {
     isSpeaking?: boolean;
     /** Whether the participant is raised hand. Show a indicator (border) and icon with order */
     raisedHand?: RaisedHand;
-    /** When the participant has reacted, animate the reaction. */
+    /**
+     * When the participant has reacted, animate the reaction.
+     * @beta
+     * */
     reaction?: Reaction;
     /**
      * The call connection state of the participant.
@@ -11254,6 +11264,7 @@ export declare interface VideoTileProps {
     isSpotlighted?: boolean;
     /**
      * Reactions resources' url and metadata.
+     * @beta
      */
     reactionResources?: ReactionResources;
 }

package/dist/dist-cjs/communication-react/index.js

@@ -14,9 +14,9 @@ var textareaCaretTs = require('textarea-caret-ts');
 var reactComponents = require('@fluentui/react-components');
 var useDebounce = require('use-debounce');
 var reactFileTypeIcons = require('@fluentui/react-file-type-icons');
-require('roosterjs-editor-plugins');
-require('roosterjs-editor-core');
-require('roosterjs-react');
+var roosterjsEditorPlugins = require('roosterjs-editor-plugins');
+var roosterjsEditorCore = require('roosterjs-editor-core');
+var roosterjsReact = require('roosterjs-react');
 var uuid = require('uuid');
 var reactChat = require('@fluentui-contrib/react-chat');
 var react$1 = require('@griffel/react');
@@ -173,7 +173,7 @@ function getDefaultExportFromCjs (x) {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.13.0-alpha-202402020012';
+var telemetryVersion = '1.13.0-alpha-202402040013';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -8378,7 +8378,7 @@ const SendBoxErrorBar = (props) => {
     if (errorMessage) {
         return (React.createElement(React.Fragment, null,
             React.createElement(Announcer$1, { announcementString: errorMessage, ariaLive: 'polite' }),
-            React.createElement(react.MessageBar, { messageBarType: react.MessageBarType.warning, styles: {
+            React.createElement(react.MessageBar, { "data-test-id": 'send-box-message-bar', messageBarType: react.MessageBarType.warning, styles: {
                     iconContainer: {
                         display: 'none'
                     }
@@ -8576,6 +8576,11 @@ const _FileUploadCards = (props) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
+/**
+ * @private
+ */
+const MAXIMUM_LENGTH_OF_MESSAGE$1 = 8000;
+const EMPTY_MESSAGE_REGEX = /^\s*$/;
 /* @conditional-compile-remove(file-sharing) */
 /**
  * @private
@@ -8591,11 +8596,26 @@ const hasIncompleteFileUploads = (activeFileUploads) => {
 const hasCompletedFileUploads = (activeFileUploads) => {
     return !!(activeFileUploads === null || activeFileUploads === void 0 ? void 0 : activeFileUploads.find((file) => !file.error));
 };
+/**
+ * @private
+ */
+const exceedsMaxAllowedLength = (valueLength) => {
+    return valueLength > MAXIMUM_LENGTH_OF_MESSAGE$1;
+};
+/**
+ * @private
+ */
+const sanitizeText = (message) => {
+    if (EMPTY_MESSAGE_REGEX.test(message)) {
+        return '';
+    }
+    else {
+        return message;
+    }
+};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-const MAXIMUM_LENGTH_OF_MESSAGE$1 = 8000;
-const EMPTY_MESSAGE_REGEX = /^\s*$/;
 /**
  * Component for typing and sending messages.
  *
@@ -8636,9 +8656,9 @@ const SendBox = (props) => {
         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
-        if (!EMPTY_MESSAGE_REGEX.test(message) ||
+        if (sanitizeText(message).length > 0 ||
             /* @conditional-compile-remove(file-sharing) */ hasCompletedFileUploads(activeFileUploads)) {
-            onSendMessage && onSendMessage(sanitizeText(message));
+            onSendMessage && onSendMessage(message);
             setTextValue('');
         }
         (_a = sendTextFieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
@@ -8647,12 +8667,7 @@ const SendBox = (props) => {
         if (newValue === undefined) {
             return;
         }
-        if (newValue.length > MAXIMUM_LENGTH_OF_MESSAGE$1) {
-            setTextValueOverflow(true);
-        }
-        else {
-            setTextValueOverflow(false);
-        }
+        setTextValueOverflow(exceedsMaxAllowedLength(newValue.length));
         setTextValue(newValue);
     };
     const textTooLongMessage = textValueOverflow ? strings.textTooLong : undefined;
@@ -8728,17 +8743,6 @@ const SendBox = (props) => {
             /* @conditional-compile-remove(file-sharing) */
             onRenderFileUploads())));
 };
-/**
- * @private
- */
-const sanitizeText = (message) => {
-    if (EMPTY_MESSAGE_REGEX.test(message)) {
-        return '';
-    }
-    else {
-        return message;
-    }
-};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -8991,7 +8995,7 @@ const ImageGallery = (props) => {
 /**
  * @private
  */
-react.mergeStyles({
+const richTextEditorStyle = react.mergeStyles({
     border: 'none',
     overflow: 'auto',
     padding: '10px',
@@ -9001,6 +9005,50 @@ react.mergeStyles({
     maxHeight: '8.25rem'
 });
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/**
+ * A component to wrap RoosterJS Rich Text Editor.
+ *
+ * @beta
+ */
+React.forwardRef((props, ref) => {
+    const { content, onChange, placeholderText } = props;
+    const editor = React.useRef(null);
+    React.useImperativeHandle(ref, () => {
+        return {
+            focus() {
+                if (editor.current) {
+                    editor.current.focus();
+                }
+            }
+        };
+    }, []);
+    React.useEffect(() => {
+        var _a, _b;
+        if (content !== ((_a = editor.current) === null || _a === void 0 ? void 0 : _a.getContent())) {
+            (_b = editor.current) === null || _b === void 0 ? void 0 : _b.setContent(content || '');
+        }
+    }, [content]);
+    const editorCreator = React.useMemo(() => {
+        return (div) => {
+            const contentEdit = new roosterjsEditorPlugins.ContentEdit();
+            const placeholderPlugin = new roosterjsEditorPlugins.Watermark(placeholderText || '');
+            const updateContentPlugin = roosterjsReact.createUpdateContentPlugin(roosterjsReact.UpdateMode.OnContentChangedEvent | roosterjsReact.UpdateMode.OnUserInput, (content) => {
+                onChange && onChange(content);
+            });
+            const options = {
+                plugins: [placeholderPlugin, contentEdit, updateContentPlugin],
+                imageSelectionBorderColor: 'blue'
+            };
+            editor.current = new roosterjsEditorCore.Editor(div, options);
+            return editor.current;
+        };
+    }, [onChange, placeholderText]);
+    return (React.createElement("div", null,
+        React.createElement(roosterjsReact.Rooster, { className: richTextEditorStyle, editorCreator: editorCreator })));
+});
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /** @private */
@@ -19882,12 +19930,12 @@ const convertRemoteParticipantToParticipantListParticipant = (userId, displayNam
             localUserCanRemoveOthers
     };
 };
-/* @conditional-compile-remove(reaction) */
+/* @conditional-compile-remove(spotlight) */
 /**
  * @private
  */
-const memoizedConvertAllremoteParticipantsBeta = memoizeFnAll((userId, displayName, state, isMuted, isScreenSharing, isSpeaking, raisedHand, localUserCanRemoveOthers, reaction, isSpotlighted) => {
-    return convertRemoteParticipantToParticipantListParticipantBeta(userId, displayName, state, isMuted, isScreenSharing, isSpeaking, raisedHand, localUserCanRemoveOthers, reaction, isSpotlighted);
+const memoizedConvertAllremoteParticipantsBetaSpotlight = memoizeFnAll((userId, displayName, state, isMuted, isScreenSharing, isSpeaking, raisedHand, localUserCanRemoveOthers, reaction, isSpotlighted) => {
+    return convertRemoteParticipantToParticipantListParticipantBetaSpotlight(userId, displayName, state, isMuted, isScreenSharing, isSpeaking, raisedHand, localUserCanRemoveOthers, reaction, isSpotlighted);
 });
 /* @conditional-compile-remove(reaction) */
 /**
@@ -19901,7 +19949,7 @@ const memoizedConvertToVideoTileReaction = memoizeOne((reactionState) => {
         }
         : undefined;
 });
-/* @conditional-compile-remove(reaction) */
+/* @conditional-compile-remove(spotlight) */
 /**
  * @private
  */
@@ -19909,8 +19957,8 @@ const memoizedSpotlight = memoizeOne((spotlightedParticipants, userId) => {
     const spotlightOrder = spotlightedParticipants === null || spotlightedParticipants === void 0 ? void 0 : spotlightedParticipants.find((spotlightedParticipant) => toFlatCommunicationIdentifier(spotlightedParticipant.identifier) === userId);
     return spotlightOrder ? { spotlightOrderPosition: spotlightOrder.order } : undefined;
 });
-/* @conditional-compile-remove(reaction) */
-const convertRemoteParticipantToParticipantListParticipantBeta = (userId, displayName, state, isMuted, isScreenSharing, isSpeaking, raisedHand, localUserCanRemoveOthers, reaction, isSpotlighted) => {
+/* @conditional-compile-remove(spotlight) */
+const convertRemoteParticipantToParticipantListParticipantBetaSpotlight = (userId, displayName, state, isMuted, isScreenSharing, isSpeaking, raisedHand, localUserCanRemoveOthers, reaction, isSpotlighted) => {
     return Object.assign(Object.assign({}, convertRemoteParticipantToParticipantListParticipant(userId, displayName, state, isMuted, isScreenSharing, isSpeaking, raisedHand, localUserCanRemoveOthers)), { reaction,
         isSpotlighted });
 };
@@ -20195,8 +20243,8 @@ const convertRemoteParticipantsToParticipantListParticipants = (remoteParticipan
             }
         }));
     };
-    /* @conditional-compile-remove(reaction) */
-    return memoizedConvertAllremoteParticipantsBeta(conversionCallback);
+    /* @conditional-compile-remove(spotlight) */
+    return memoizedConvertAllremoteParticipantsBetaSpotlight(conversionCallback);
 };
 /**
  * Selects data that drives {@link ParticipantList} component.