@azure/communication-react 1.5.1-alpha-202305100015 → 1.5.1-alpha-202305120012

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

@@ -164,7 +164,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-202305100015';
+var telemetryVersion = '1.5.1-alpha-202305120012';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -5268,12 +5268,6 @@ const sendBoxWrapperStyles = react.mergeStyles({
         marginTop: '0.25rem'
     }
 });
-/**
- * @private
- */
-const sendBoxStyle = react.mergeStyles({
-    paddingRight: '2rem'
-});
 /**
  * @private
  */
@@ -5779,21 +5773,11 @@ const inputButtonStyle = react.mergeStyles({
     margin: 'auto',
     width: '1.0625rem',
     height: '1.0625rem',
+    backgroundColor: 'transparent',
     '&:hover': {
         backgroundColor: 'transparent'
     }
 });
-/**
- * @private
- */
-const inlineButtonsContainerStyle = {
-    position: 'absolute',
-    right: '0.3rem',
-    top: '0',
-    bottom: '0',
-    gap: '0.25rem',
-    alignItems: 'center'
-};
 /**
  * @private
  */
@@ -5810,6 +5794,12 @@ const inputButtonTooltipStyle = react.mergeStyles({
     // The toolTip host container show be a flex box, so that alignItems: 'center' works for inside buttons
     display: 'flex'
 });
+/**
+ * @private
+ */
+const iconWrapperStyle$1 = react.mergeStyles({
+    pointerEvents: 'none'
+});
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
@@ -6089,8 +6079,15 @@ const InputBoxComponent = (props) => {
     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,
-        errorMessage: styles === null || styles === void 0 ? void 0 : styles.systemMessage
+        errorMessage: styles === null || styles === void 0 ? void 0 : styles.systemMessage,
+        suffix: {
+            backgroundColor: 'transparent',
+            // Remove empty space in the suffix area when adding newline-style buttons
+            display: props.inlineChildren ? 'flex' : 'contents',
+            padding: '0 0.25rem'
+        }
     });
+    const mergedChildrenStyle = react.mergeStyles(props.inlineChildren ? {} : newLineButtonsContainerStyle);
     /* @conditional-compile-remove(mention) */
     const onSuggestionSelected = React.useCallback((suggestion) => {
         var _a, _b;
@@ -6178,6 +6175,9 @@ const InputBoxComponent = (props) => {
         /* @conditional-compile-remove(mention) */
         onSuggestionSelected
     ]);
+    const onRenderChildren = () => {
+        return (React__default['default'].createElement(react.Stack, { horizontal: true, className: mergedChildrenStyle }, children));
+    };
     /* @conditional-compile-remove(mention) */
     const debouncedQueryUpdate = useDebounce.useDebouncedCallback((query) => __awaiter$w(void 0, void 0, void 0, function* () {
         var _a;
@@ -6391,8 +6391,7 @@ const InputBoxComponent = (props) => {
                     // see onMouseDown for more details
                     /* @conditional-compile-remove(mention) */
                     setShouldHandleOnMouseDownDuringSelect(true);
-                }, autoComplete: "off", onKeyDown: onTextFieldKeyDown, styles: mergedTextFieldStyle, disabled: disabled, errorMessage: errorMessage, elementRef: inputBoxRef }),
-            React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(props.inlineChildren ? inlineButtonsContainerStyle : newLineButtonsContainerStyle) }, children))));
+                }, autoComplete: "off", onKeyDown: onTextFieldKeyDown, styles: mergedTextFieldStyle, disabled: disabled, errorMessage: errorMessage, onRenderSuffix: onRenderChildren, elementRef: inputBoxRef }))));
 };
 /**
  * @private
@@ -6414,7 +6413,9 @@ const InputBoxButton = (props) => {
                 setIsHover(true);
             }, onMouseLeave: () => {
                 setIsHover(false);
-            }, onRenderIcon: () => onRenderIcon(isHover) })));
+            }, 
+            // VoiceOver fix: Avoid icon from stealing focus when IconButton is double-tapped to send message by wrapping with Stack with pointerEvents style to none
+            onRenderIcon: () => React__default['default'].createElement(react.Stack, { className: iconWrapperStyle$1 }, onRenderIcon(isHover)) })));
 };
 /* @conditional-compile-remove(mention) */
 /**
@@ -7093,55 +7094,6 @@ const addTag = (tag, parseStack, tags) => {
     }
 };
 
-// Copyright (c) Microsoft Corporation.
-/**
- * @private
- */
-const buttonStyle$1 = react.mergeStyles({
-    color: 'grey',
-    margin: '0',
-    padding: '0',
-    width: '1.0625rem',
-    height: '1.0625rem',
-    border: 'none',
-    minWidth: '0',
-    '&:hover': {
-        backgroundColor: 'transparent'
-    }
-});
-/**
- * @private
- */
-const iconWrapperStyle$1 = react.mergeStyles({
-    position: 'absolute',
-    pointerEvents: 'none'
-});
-
-// Copyright (c) Microsoft Corporation.
-/**
- * @private
- */
-const VoiceOverButton = (props) => {
-    const { onRenderIcon, onClick, ariaLabel, className, id, tooltipContent } = props;
-    const [isHover, setIsHover] = React.useState(false);
-    const mergedButtonStyle = react.mergeStyles(buttonStyle$1, className);
-    const theme = useTheme();
-    const calloutStyle = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };
-    // Place callout with no gap between it and the button.
-    const calloutProps = {
-        gapSpace: 0,
-        styles: calloutStyle,
-        backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''
-    };
-    return (React__default['default'].createElement(react.TooltipHost, { hostClassName: inputButtonTooltipStyle, content: tooltipContent, calloutProps: Object.assign({}, calloutProps) },
-        React__default['default'].createElement(react.DefaultButton, { className: mergedButtonStyle, ariaLabel: ariaLabel, onClick: onClick, id: id, onMouseEnter: () => {
-                setIsHover(true);
-            }, onMouseLeave: () => {
-                setIsHover(false);
-            } }),
-        React__default['default'].createElement("div", { className: iconWrapperStyle$1 }, onRenderIcon(isHover))));
-};
-
 // Copyright (c) Microsoft Corporation.
 /**
  * @internal
@@ -7486,7 +7438,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", inputClassName: sendBoxStyle, placeholderText: strings.placeholderText, textValue: textValue, onChange: (_, newValue) => setText(newValue), onKeyDown: (ev) => {
+            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) => {
                     const keyWasSendingMessage = ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline);
                     if (!keyWasSendingMessage) {
                         onTyping === null || onTyping === void 0 ? void 0 : onTyping();
@@ -7496,7 +7448,7 @@ const SendBox = (props) => {
                 }, styles: mergedStyles, supportNewline: supportNewline, maxLength: MAXIMUM_LENGTH_OF_MESSAGE$1, 
                 /* @conditional-compile-remove(mention) */
                 mentionLookupOptions: mentionLookupOptions },
-                React__default['default'].createElement(VoiceOverButton, { onRenderIcon: onRenderSendIcon, onClick: (e) => {
+                React__default['default'].createElement(InputBoxButton, { onRenderIcon: onRenderSendIcon, onClick: (e) => {
                         if (!textValueOverflow) {
                             sendMessageOnClick();
                         }
@@ -7869,13 +7821,10 @@ const SystemMessage = (props) => {
 /**
  * @private
  */
-const editBoxStyle = (inlineEditButtons) => react.mergeStyles({
-    marginTop: '0.0875rem',
-    marginBottom: '0.0875rem',
-    // @TODO future refactor: This is being used to give enough space to the accept/reject edits buttons
-    // This space affordance should be handled by the InputBoxComponent not the here (by the parent of the InputBoxComponent)
-    paddingRight: inlineEditButtons ? '3.25rem' : '0.5rem'
-});
+const editBoxStyle = (inlineEditButtons) => {
+    const paddingRight = inlineEditButtons ? {} : { paddingRight: '0.5rem' };
+    return react.mergeStyles(Object.assign({ marginTop: '0.0875rem', marginBottom: '0.0875rem' }, paddingRight));
+};
 /**
  * @private
  */