@azure/communication-react 1.5.1-alpha-202304060012 → 1.5.1-alpha-202304110013

package/dist/communication-react.d.ts

@@ -2994,6 +2994,14 @@ export declare interface CameraSitePermissionsProps extends CommonSitePermission
  */
 export declare type CameraSitePermissionsStrings = SitePermissionsStrings;
 
+/**
+ * @public
+ * Callback function run when a message edit is cancelled.
+ */
+export declare type CancelEditCallback = (messageId: string, metadata?: Record<string, string>, options?: {
+    attachedFilesMetadata?: FileMetadata[];
+}) => void;
+
 /**
  * {@link ChatComposite} Adapter interface.
  *
@@ -3421,6 +3429,7 @@ export declare interface ChatMessage extends MessageCommon {
     senderId?: string;
     senderDisplayName?: string;
     status?: MessageStatus;
+    failureReason?: string;
     attached?: MessageAttachedStatus;
     mine?: boolean;
     clientMessageId?: string;
@@ -6101,6 +6110,12 @@ export declare type MessageProps = {
      * @param content - new content of the message
      */
     onUpdateMessage?: UpdateMessageCallback;
+    /**
+     * Optional callback for when a message edit is cancelled.
+     *
+     * @param messageId - message id from chatClient
+     */
+    onCancelMessageEdit?: CancelEditCallback;
     /**
      * Optional callback to delete a message.
      *
@@ -6341,6 +6356,12 @@ export declare type MessageThreadProps = {
      *
      */
     onUpdateMessage?: UpdateMessageCallback;
+    /**
+     * Optional callback for when a message edit is cancelled.
+     *
+     * @param messageId - message id from chatClient
+     */
+    onCancelMessageEdit?: CancelEditCallback;
     /**
      * Optional callback to delete a message.
      *

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

@@ -162,7 +162,7 @@ const _toCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.5.1-alpha-202304060012';
+var telemetryVersion = '1.5.1-alpha-202304110013';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -6348,84 +6348,6 @@ const editBoxStyleSet = {
     }
 };
 
-// Copyright (c) Microsoft Corporation.
-const MAXIMUM_LENGTH_OF_MESSAGE = 8000;
-const onRenderCancelIcon = (color) => {
-    const className = react.mergeStyles(inputBoxIcon, { color });
-    return React__default['default'].createElement(react.Icon, { iconName: 'EditBoxCancel', className: className });
-};
-const onRenderSubmitIcon = (color) => {
-    const className = react.mergeStyles(inputBoxIcon, { color });
-    return React__default['default'].createElement(react.Icon, { iconName: 'EditBoxSubmit', className: className });
-};
-/**
- * @private
- */
-const ChatMessageComponentAsEditBox = (props) => {
-    const { onCancel, onSubmit, strings, message } = props;
-    const [textValue, setTextValue] = React.useState(message.content || '');
-    const [attachedFilesMetadata, setAttachedFilesMetadata] = React__default['default'].useState(getMessageAttachedFilesMetadata(message));
-    const editTextFieldRef = React__default['default'].useRef(null);
-    const theme = useTheme();
-    const messageState = getMessageState(textValue, attachedFilesMetadata !== null && attachedFilesMetadata !== void 0 ? attachedFilesMetadata : []);
-    const submitEnabled = messageState === 'OK';
-    React.useEffect(() => {
-        var _a;
-        (_a = editTextFieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, []);
-    const setText = (event, newValue) => {
-        setTextValue(newValue !== null && newValue !== void 0 ? newValue : '');
-    };
-    const textTooLongMessage = messageState === 'too long'
-        ? _formatString(strings.editBoxTextLimit, { limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}` })
-        : undefined;
-    const onRenderThemedCancelIcon = React.useCallback(() => onRenderCancelIcon(theme.palette.neutralSecondary), [theme.palette.neutralSecondary]);
-    const onRenderThemedSubmitIcon = React.useCallback(() => onRenderSubmitIcon(theme.palette.neutralSecondary), [theme.palette.neutralSecondary]);
-    const editBoxStyles = React.useMemo(() => {
-        return react.concatStyleSets(editBoxStyleSet, { textField: { borderColor: theme.palette.themePrimary } });
-    }, [theme.palette.themePrimary]);
-    const onRenderFileUploads = React.useCallback(() => {
-        return ((attachedFilesMetadata === null || attachedFilesMetadata === void 0 ? void 0 : attachedFilesMetadata.length) && (React__default['default'].createElement("div", { style: { margin: '0.25rem' } },
-            React__default['default'].createElement(_FileUploadCards, { activeFileUploads: attachedFilesMetadata === null || attachedFilesMetadata === void 0 ? void 0 : attachedFilesMetadata.map((file) => ({
-                    id: file.name,
-                    filename: file.name,
-                    progress: 1
-                })), onCancelFileUpload: (fileId) => {
-                    setAttachedFilesMetadata(attachedFilesMetadata === null || attachedFilesMetadata === void 0 ? void 0 : attachedFilesMetadata.filter((file) => file.name !== fileId));
-                } }))));
-    }, [attachedFilesMetadata]);
-    return (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(borderAndBoxShadowStyle({
-            theme,
-            hasErrorMessage: false,
-            disabled: false
-        })) },
-        React__default['default'].createElement(InputBoxComponent, { inlineChildren: props.inlineEditButtons, id: 'editbox', textFieldRef: editTextFieldRef, inputClassName: editBoxStyle(props.inlineEditButtons), placeholderText: strings.editBoxPlaceholderText, textValue: textValue, onChange: setText, onEnterKeyDown: () => {
-                submitEnabled &&
-                    onSubmit(textValue, message.metadata, {
-                        attachedFilesMetadata
-                    });
-            }, supportNewline: false, maxLength: MAXIMUM_LENGTH_OF_MESSAGE, errorMessage: textTooLongMessage, styles: editBoxStyles },
-            React__default['default'].createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxCancelButton, tooltipContent: strings.editBoxCancelButton, onRenderIcon: onRenderThemedCancelIcon, onClick: () => {
-                    onCancel && onCancel();
-                }, id: 'dismissIconWrapper' }),
-            React__default['default'].createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxSubmitButton, tooltipContent: strings.editBoxSubmitButton, onRenderIcon: onRenderThemedSubmitIcon, onClick: (e) => {
-                    submitEnabled &&
-                        onSubmit(textValue, message.metadata, {
-                            attachedFilesMetadata
-                        });
-                    e.stopPropagation();
-                }, id: 'submitIconWrapper' })),
-        onRenderFileUploads()));
-};
-const isMessageTooLong = (messageText) => messageText.length > MAXIMUM_LENGTH_OF_MESSAGE;
-const isMessageEmpty = (messageText, attachedFilesMetadata) => messageText.trim().length === 0 && attachedFilesMetadata.length === 0;
-const getMessageState = (messageText, attachedFilesMetadata) => isMessageEmpty(messageText, attachedFilesMetadata) ? 'too short' : isMessageTooLong(messageText) ? 'too long' : 'OK';
-// @TODO: Remove when file-sharing feature becomes stable.
-const getMessageAttachedFilesMetadata = (message) => {
-    /* @conditional-compile-remove(file-sharing) */
-    return message.attachedFilesMetadata;
-};
-
 // Copyright (c) Microsoft Corporation.
 const MINIMUM_TOUCH_TARGET_HEIGHT_REM$1 = 3;
 /**
@@ -6522,6 +6444,85 @@ const menuSubIconStyleSet = {
     }
 };
 
+// Copyright (c) Microsoft Corporation.
+const MAXIMUM_LENGTH_OF_MESSAGE = 8000;
+const onRenderCancelIcon = (color) => {
+    const className = react.mergeStyles(inputBoxIcon, { color });
+    return React__default['default'].createElement(react.Icon, { iconName: 'EditBoxCancel', className: className });
+};
+const onRenderSubmitIcon = (color) => {
+    const className = react.mergeStyles(inputBoxIcon, { color });
+    return React__default['default'].createElement(react.Icon, { iconName: 'EditBoxSubmit', className: className });
+};
+/**
+ * @private
+ */
+const ChatMessageComponentAsEditBox = (props) => {
+    const { onCancel, onSubmit, strings, message } = props;
+    const [textValue, setTextValue] = React.useState(message.content || '');
+    const [attachedFilesMetadata, setAttachedFilesMetadata] = React__default['default'].useState(getMessageAttachedFilesMetadata(message));
+    const editTextFieldRef = React__default['default'].useRef(null);
+    const theme = useTheme();
+    const messageState = getMessageState(textValue, attachedFilesMetadata !== null && attachedFilesMetadata !== void 0 ? attachedFilesMetadata : []);
+    const submitEnabled = messageState === 'OK';
+    React.useEffect(() => {
+        var _a;
+        (_a = editTextFieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    const setText = (event, newValue) => {
+        setTextValue(newValue !== null && newValue !== void 0 ? newValue : '');
+    };
+    const textTooLongMessage = messageState === 'too long'
+        ? _formatString(strings.editBoxTextLimit, { limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}` })
+        : undefined;
+    const onRenderThemedCancelIcon = React.useCallback(() => onRenderCancelIcon(theme.palette.neutralSecondary), [theme.palette.neutralSecondary]);
+    const onRenderThemedSubmitIcon = React.useCallback(() => onRenderSubmitIcon(theme.palette.neutralSecondary), [theme.palette.neutralSecondary]);
+    const editBoxStyles = React.useMemo(() => {
+        return react.concatStyleSets(editBoxStyleSet, { textField: { borderColor: theme.palette.themePrimary } });
+    }, [theme.palette.themePrimary]);
+    const onRenderFileUploads = React.useCallback(() => {
+        return ((attachedFilesMetadata === null || attachedFilesMetadata === void 0 ? void 0 : attachedFilesMetadata.length) && (React__default['default'].createElement("div", { style: { margin: '0.25rem' } },
+            React__default['default'].createElement(_FileUploadCards, { activeFileUploads: attachedFilesMetadata === null || attachedFilesMetadata === void 0 ? void 0 : attachedFilesMetadata.map((file) => ({
+                    id: file.name,
+                    filename: file.name,
+                    progress: 1
+                })), onCancelFileUpload: (fileId) => {
+                    setAttachedFilesMetadata(attachedFilesMetadata === null || attachedFilesMetadata === void 0 ? void 0 : attachedFilesMetadata.filter((file) => file.name !== fileId));
+                } }))));
+    }, [attachedFilesMetadata]);
+    return (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(borderAndBoxShadowStyle({
+            theme,
+            hasErrorMessage: message.failureReason !== undefined,
+            disabled: false
+        })) },
+        React__default['default'].createElement(InputBoxComponent, { inlineChildren: props.inlineEditButtons, id: 'editbox', textFieldRef: editTextFieldRef, inputClassName: editBoxStyle(props.inlineEditButtons), placeholderText: strings.editBoxPlaceholderText, textValue: textValue, onChange: setText, onEnterKeyDown: () => {
+                submitEnabled &&
+                    onSubmit(textValue, message.metadata, {
+                        attachedFilesMetadata
+                    });
+            }, supportNewline: false, maxLength: MAXIMUM_LENGTH_OF_MESSAGE, errorMessage: textTooLongMessage, styles: editBoxStyles },
+            React__default['default'].createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxCancelButton, tooltipContent: strings.editBoxCancelButton, onRenderIcon: onRenderThemedCancelIcon, onClick: () => {
+                    onCancel && onCancel(message.messageId, message.metadata, { attachedFilesMetadata });
+                }, id: 'dismissIconWrapper' }),
+            React__default['default'].createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxSubmitButton, tooltipContent: strings.editBoxSubmitButton, onRenderIcon: onRenderThemedSubmitIcon, onClick: (e) => {
+                    submitEnabled &&
+                        onSubmit(textValue, message.metadata, {
+                            attachedFilesMetadata
+                        });
+                    e.stopPropagation();
+                }, id: 'submitIconWrapper' })),
+        message.failureReason && (React__default['default'].createElement("div", { className: react.mergeStyles(chatMessageFailedTagStyle(theme), { padding: '0.5rem' }) }, message.failureReason)),
+        onRenderFileUploads()));
+};
+const isMessageTooLong = (messageText) => messageText.length > MAXIMUM_LENGTH_OF_MESSAGE;
+const isMessageEmpty = (messageText, attachedFilesMetadata) => messageText.trim().length === 0 && attachedFilesMetadata.length === 0;
+const getMessageState = (messageText, attachedFilesMetadata) => isMessageEmpty(messageText, attachedFilesMetadata) ? 'too short' : isMessageTooLong(messageText) ? 'too long' : 'OK';
+// @TODO: Remove when file-sharing feature becomes stable.
+const getMessageAttachedFilesMetadata = (message) => {
+    /* @conditional-compile-remove(file-sharing) */
+    return message.attachedFilesMetadata;
+};
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 /**
@@ -7101,7 +7102,7 @@ const ChatMessageComponent = (props) => {
         if (onDeleteMessage && message.messageId) {
             onDeleteMessage(message.messageId);
         }
-        // when fail to send, message does not have message id, delete message using clientmessageid
+        // when fail to send, message does not have message id, delete message using clientMessageId
         else if (onDeleteMessage && message.messageType === 'chat' && clientMessageId) {
             onDeleteMessage(clientMessageId);
         }
@@ -7116,7 +7117,8 @@ const ChatMessageComponent = (props) => {
                     message.messageId &&
                     (yield props.onUpdateMessage(message.messageId, text, metadata, options));
                 setIsEditing(false);
-            }), onCancel: () => {
+            }), onCancel: (messageId, metadata, options) => {
+                props.onCancelMessageEdit && props.onCancelMessageEdit(messageId, metadata, options);
                 setIsEditing(false);
             } }));
     }
@@ -7312,13 +7314,14 @@ const DefaultSystemMessage = (props) => {
     }
     return React__default['default'].createElement(React__default['default'].Fragment, null);
 };
-const memoizeAllMessages = memoizeFnAll((_messageKey, message, showMessageDate, showMessageStatus, onRenderAvatar, shouldOverlapAvatarAndMessage, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, theme, _attached, statusToRender, participantCount, readCount, onRenderMessage, onUpdateMessage, onDeleteMessage, onSendMessage, disableEditing) => {
+const memoizeAllMessages = memoizeFnAll((_messageKey, message, showMessageDate, showMessageStatus, onRenderAvatar, shouldOverlapAvatarAndMessage, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, theme, _attached, statusToRender, participantCount, readCount, onRenderMessage, onUpdateMessage, onCancelMessageEdit, onDeleteMessage, onSendMessage, disableEditing) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const messageProps = {
         message,
         strings,
         showDate: showMessageDate,
         onUpdateMessage,
+        onCancelMessageEdit,
         onDeleteMessage,
         onSendMessage,
         disableEditing
@@ -7412,7 +7415,7 @@ const getLastChatMessageIdWithStatus = (messages, status) => {
  */
 const MessageThread = (props) => {
     var _a;
-    const { messages: newMessages, userId, participantCount, readReceiptsBySenderId, styles, disableJumpToNewMessageButton = false, showMessageDate = false, showMessageStatus = false, numberOfChatMessagesToReload = 5, onMessageSeen, onRenderMessageStatus, onRenderAvatar, onLoadPreviousChatMessages, onRenderJumpToNewMessageButton, onRenderMessage, onUpdateMessage, onDeleteMessage, onSendMessage, 
+    const { messages: newMessages, userId, participantCount, readReceiptsBySenderId, styles, disableJumpToNewMessageButton = false, showMessageDate = false, showMessageStatus = false, numberOfChatMessagesToReload = 5, onMessageSeen, onRenderMessageStatus, onRenderAvatar, onLoadPreviousChatMessages, onRenderJumpToNewMessageButton, onRenderMessage, onUpdateMessage, onCancelMessageEdit, onDeleteMessage, onSendMessage, 
     /* @conditional-compile-remove(date-time-customization) */
     onDisplayDateTimeString } = props;
     const onRenderFileDownloads = onRenderFileDownloadsTrampoline(props);
@@ -7608,7 +7611,7 @@ const MessageThread = (props) => {
         setLastSendingChatMessage(getLastChatMessageIdWithStatus(newMessages, 'sending'));
     }, [newMessages]);
     /**
-     * This needs to run after messages are rendererd so we can manipulate the scroll bar.
+     * This needs to run after messages are rendered so we can manipulate the scroll bar.
      */
     React.useEffect(() => {
         // If user just sent the latest message then we assume we can move user to bottom of scroll.
@@ -7706,7 +7709,7 @@ const MessageThread = (props) => {
             message.messageType === 'chat' ||
                 /* @conditional-compile-remove(data-loss-prevention) */ message.messageType === 'blocked'
                 ? message.attached
-                : undefined, statusToRender, participantCount, readCountForHoveredIndicator, onRenderMessage, onUpdateMessage, onDeleteMessage, onSendMessage, props.disableEditing);
+                : undefined, statusToRender, participantCount, readCountForHoveredIndicator, onRenderMessage, onUpdateMessage, onCancelMessageEdit, onDeleteMessage, onSendMessage, props.disableEditing);
         });
     }), [
         messages,
@@ -7724,6 +7727,7 @@ const MessageThread = (props) => {
         readCountForHoveredIndicator,
         onRenderMessage,
         onUpdateMessage,
+        onCancelMessageEdit,
         onDeleteMessage,
         onSendMessage,
         lastSeenChatMessage,
@@ -8734,6 +8738,7 @@ const moreButtonStyles = {
         // To ensure that the button is clickable when there is a floating video tile
         zIndex: 1,
         color: 'inherit',
+        top: '-0.125rem',
         height: '100%'
     },
     rootHovered: {
@@ -22699,9 +22704,8 @@ const MainScreen = (props) => {
                 modalLayerHostId: props.modalLayerHostId, options: props.options }));
             break;
         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-        case holdPageTrampoline():
-            pageElement = (React__default['default'].createElement(React__default['default'].Fragment, null, 
-            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ React__default['default'].createElement(HoldPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options })));
+        case 'hold':
+            pageElement = (React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(HoldPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options })));
             break;
     }
     /* @conditional-compile-remove(unsupported-browser) */
@@ -22772,11 +22776,6 @@ const CallComposite = (props) => {
                 /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) @conditional-compile-remove(call-readiness) */
                 React__default['default'].createElement(react.LayerHost, { id: modalLayerHostId, className: react.mergeStyles(modalLayerHostStyle) })))));
 };
-const holdPageTrampoline = () => {
-    /* @conditional-compile-remove(one-to-n-calling) */
-    /* @conditional-compile-remove(PSTN-calls) */
-    return 'hold';
-};
 const getQueryOptions = (options) => {
     /* @conditional-compile-remove(rooms) */
     if (options.role === 'Consumer') {