@azure/communication-react 1.9.0-alpha-202310130013 → 1.9.0-alpha-202310140012

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

@@ -177,7 +177,7 @@ const _isValidIdentifier = (identifier) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.9.0-alpha-202310130013';
+var telemetryVersion = '1.9.0-alpha-202310140012';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -6190,12 +6190,6 @@ const inputBoxStyle = react.mergeStyles({
         fontSize: '0.875rem'
     }
 });
-/**
- * @private
- */
-const inputBoxNewLineSpaceAffordance = {
-    marginBottom: '2rem'
-};
 /**
  *
  * @private
@@ -6242,21 +6236,6 @@ const inputButtonStyle = react.mergeStyles({
         backgroundColor: 'transparent'
     }
 });
-/**
- * @private
- */
-const newLineButtonsContainerStyle = {
-    position: 'absolute',
-    right: '0.8rem',
-    bottom: '0.6rem',
-    gap: '0'
-};
-/**
- * @private
- */
-const sameLineButtonsContainerStyle = {
-    alignSelf: 'end'
-};
 /**
  * @private
  */
@@ -7905,7 +7884,7 @@ const TextFieldWithMention = (props) => {
 const InputBoxComponent = (props) => {
     const { styles, id, 'data-ui-id': dataUiId, textValue, onChange, textFieldRef, placeholderText, onKeyDown, onEnterKeyDown, supportNewline, inputClassName, errorMessage, disabled, children } = props;
     const mergedRootStyle = react.mergeStyles(inputBoxWrapperStyle, styles === null || styles === void 0 ? void 0 : styles.root);
-    const mergedInputFieldStyle = react.mergeStyles(inputBoxStyle, inputClassName, props.inlineChildren ? {} : inputBoxNewLineSpaceAffordance);
+    const mergedInputFieldStyle = react.mergeStyles(inputBoxStyle, inputClassName);
     const mergedTextContainerStyle = react.mergeStyles(textContainerStyle, styles === null || styles === void 0 ? void 0 : styles.textFieldContainer);
     const mergedTextFieldStyle = react.concatStyleSets(textFieldStyle, {
         fieldGroup: styles === null || styles === void 0 ? void 0 : styles.textField,
@@ -7915,7 +7894,6 @@ const InputBoxComponent = (props) => {
             padding: '0 0'
         }
     });
-    const mergedChildrenStyle = react.mergeStyles(props.inlineChildren ? sameLineButtonsContainerStyle : newLineButtonsContainerStyle);
     const onTextFieldKeyDown = React.useCallback((ev) => {
         if (isEnterKeyEventFromCompositionSession(ev)) {
             return;
@@ -7927,7 +7905,7 @@ const InputBoxComponent = (props) => {
         onKeyDown && onKeyDown(ev);
     }, [onEnterKeyDown, onKeyDown, supportNewline]);
     const onRenderChildren = () => {
-        return (React__default["default"].createElement(react.Stack, { horizontal: true, className: mergedChildrenStyle }, children));
+        return React__default["default"].createElement(React__default["default"].Fragment, null, children);
     };
     const renderTextField = () => {
         const textFieldProps = {
@@ -7944,7 +7922,7 @@ const InputBoxComponent = (props) => {
             styles: mergedTextFieldStyle,
             disabled,
             errorMessage,
-            onRenderSuffix: onRenderChildren
+            onRenderSuffix: props.children ? onRenderChildren : undefined
         };
         /* @conditional-compile-remove(mention) */
         const textFieldWithMentionProps = {
@@ -8316,7 +8294,7 @@ const SendBox = (props) => {
                 hasErrorMessage: !!errorMessage,
                 disabled: !!disabled
             })) },
-            React__default["default"].createElement(InputBoxComponent, { autoFocus: autoFocus, "data-ui-id": ids.sendboxTextField, inlineChildren: true, disabled: disabled, errorMessage: onRenderSystemMessage ? onRenderSystemMessage(errorMessage) : errorMessage, textFieldRef: sendTextFieldRef, id: "sendbox", placeholderText: strings.placeholderText, textValue: textValue, onChange: (_, newValue) => setText(newValue), onKeyDown: (ev) => {
+            React__default["default"].createElement(InputBoxComponent, { autoFocus: autoFocus, "data-ui-id": ids.sendboxTextField, disabled: disabled, errorMessage: onRenderSystemMessage ? onRenderSystemMessage(errorMessage) : errorMessage, textFieldRef: sendTextFieldRef, id: "sendbox", placeholderText: strings.placeholderText, textValue: textValue, onChange: (_, newValue) => setText(newValue), onKeyDown: (ev) => {
                     const keyWasSendingMessage = ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline);
                     if (!keyWasSendingMessage) {
                         onTyping === null || onTyping === void 0 ? void 0 : onTyping();
@@ -9008,10 +8986,10 @@ const editBoxStyle = react.mergeStyles({
  * @private
  */
 const editingButtonStyle = react.mergeStyles({
-    margin: 'auto 0',
+    margin: '0',
     width: '2.125rem',
     height: '2.125rem',
-    padding: '0.25rem 0 0 0'
+    padding: '0.375rem 0 0 0'
 });
 /**
  * @private
@@ -9073,7 +9051,26 @@ const chatMessageEditedTagStyle = (theme) => react.mergeStyles({ fontWeight: rea
 /**
  * @private
  */
-const chatMessageFailedTagStyle = (theme) => react.mergeStyles({ fontWeight: react.FontWeights.regular, color: theme.semanticColors.errorText });
+const chatMessageFailedTagStyle = (theme) => react.mergeStyles({
+    fontWeight: react.FontWeights.regular,
+    color: theme.semanticColors.errorText,
+    fontSize: theme.fonts.smallPlus.fontSize,
+    lineHeight: '1rem'
+});
+/**
+ * @private
+ */
+const chatMessageFailedTagStackItemStyle = react.mergeStyles({
+    alignSelf: 'end',
+    paddingBottom: '0.25rem'
+});
+/**
+ * @private
+ */
+const editChatMessageButtonsStackStyle = react.mergeStyles({
+    padding: '0 0.5rem 0.5rem 0.5rem',
+    marginTop: '-0.25rem'
+});
 /**
  * @private
  */
@@ -9090,7 +9087,9 @@ const useChatMessageEditContainerStyles = reactComponents.makeStyles({
     root: {
         paddingTop: '1.25rem' //height of the menu button + marginBottom
     },
-    body: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, reactComponents.shorthands.padding(0)), { backgroundColor: 'transparent', width: '100%', boxSizing: 'border-box' }), reactComponents.shorthands.border(`${defaultSendBoxInactiveBorderThicknessREM}rem`, 'solid')), reactComponents.shorthands.borderRadius(reactComponents.tokens.borderRadiusMedium)), reactComponents.shorthands.margin(`${defaultSendBoxActiveBorderThicknessREM - defaultSendBoxInactiveBorderThicknessREM}rem`)), { '&:hover, &:active, &:focus, &:focus-within': Object.assign(Object.assign({}, reactComponents.shorthands.margin('0rem')), reactComponents.shorthands.borderWidth(`${defaultSendBoxActiveBorderThicknessREM}rem`)) }),
+    body: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, reactComponents.shorthands.padding(0)), { backgroundColor: 'transparent', boxSizing: 'border-box' }), reactComponents.shorthands.border(`${defaultSendBoxInactiveBorderThicknessREM}rem`, 'solid')), reactComponents.shorthands.borderRadius(reactComponents.tokens.borderRadiusMedium)), reactComponents.shorthands.margin(`${defaultSendBoxActiveBorderThicknessREM - defaultSendBoxInactiveBorderThicknessREM}rem`)), { 
+        // Width should be updated on hover to include the border width change
+        width: `calc(100% - ${defaultSendBoxActiveBorderThicknessREM}rem)`, '&:hover, &:active, &:focus, &:focus-within': Object.assign(Object.assign(Object.assign({}, reactComponents.shorthands.margin('0rem')), reactComponents.shorthands.borderWidth(`${defaultSendBoxActiveBorderThicknessREM}rem`)), { width: '100%' }) }),
     bodyError: Object.assign({}, reactComponents.shorthands.borderColor(errorTextColor)),
     bodyDefault: Object.assign(Object.assign({}, reactComponents.shorthands.borderColor(reactComponents.tokens.colorNeutralStrokeAccessible)), { '&:hover, &:active, &:focus, &:focus-within': Object.assign({}, reactComponents.shorthands.borderColor(reactComponents.tokens.colorCompoundBrandStroke)) })
 });
@@ -9187,7 +9186,7 @@ const ChatMessageComponentAsEditBox = (props) => {
     }, [attachedFilesMetadata]);
     const getContent = () => {
         return (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement(InputBoxComponent, { inlineChildren: false, id: 'editbox', textFieldRef: editTextFieldRef, inputClassName: editBoxStyle, placeholderText: strings.editBoxPlaceholderText, textValue: textValue, onChange: setText, onKeyDown: (ev) => {
+            React__default["default"].createElement(InputBoxComponent, { id: 'editbox', textFieldRef: editTextFieldRef, inputClassName: editBoxStyle, placeholderText: strings.editBoxPlaceholderText, textValue: textValue, onChange: setText, onKeyDown: (ev) => {
                     if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown') {
                         ev.stopPropagation();
                     }
@@ -9198,7 +9197,10 @@ const ChatMessageComponentAsEditBox = (props) => {
                         });
                 }, supportNewline: false, maxLength: MAXIMUM_LENGTH_OF_MESSAGE, errorMessage: textTooLongMessage, styles: editBoxStyles, 
                 /* @conditional-compile-remove(mention) */
-                mentionLookupOptions: mentionLookupOptions },
+                mentionLookupOptions: mentionLookupOptions }),
+            React__default["default"].createElement(react.Stack, { horizontal: true, horizontalAlign: "end", verticalAlign: "start", className: editChatMessageButtonsStackStyle, tokens: { childrenGap: '0.25rem' } },
+                message.failureReason && (React__default["default"].createElement(react.Stack.Item, { grow: true, className: chatMessageFailedTagStackItemStyle },
+                    React__default["default"].createElement("div", { className: chatMessageFailedTagStyle(theme) }, message.failureReason))),
                 React__default["default"].createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxCancelButton, tooltipContent: strings.editBoxCancelButton, onRenderIcon: onRenderThemedCancelIcon, onClick: () => {
                         onCancel && onCancel(message.messageId);
                     }, id: 'dismissIconWrapper' }),
@@ -9209,7 +9211,6 @@ const ChatMessageComponentAsEditBox = (props) => {
                             });
                         e.stopPropagation();
                     }, id: 'submitIconWrapper' })),
-            message.failureReason && (React__default["default"].createElement("div", { className: react.mergeStyles(chatMessageFailedTagStyle(theme), { padding: '0.5rem' }) }, message.failureReason)),
             onRenderFileUploads()));
     };
     const bodyClassName = reactComponents.mergeClasses(editContainerStyles.body, message.failureReason !== undefined ? editContainerStyles.bodyError : editContainerStyles.bodyDefault);