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

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-202310170013';
 
 // 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);
@@ -17607,19 +17608,17 @@ const videoEffectsItemContainerStyles = (args) => {
             color: args.theme.palette.neutralPrimary,
             cursor: args.disabled ? 'default' : 'pointer',
             height: VideoEffectsItemContainerHeight,
-            position: 'relative',
             width: VideoEffectsItemContainerWidth,
+            border: args.isSelected
+                ? `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`
+                : `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}`,
             // Use :after to display a border element. This is used to prevent the background image
             // resizing when the border thichkness is changed. We also want the border to be inside
             // the frame of the container, i.e. we want it to expand inwards and not outwards when
             // border thickness changes from hover/selection.
             ':after': {
                 content: '""',
-                position: 'absolute',
                 boxSizing: 'border-box',
-                border: args.isSelected
-                    ? `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`
-                    : `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}`,
                 height: '100%',
                 width: '100%',
                 borderRadius: '0.25rem'
@@ -17631,6 +17630,11 @@ const videoEffectsItemContainerStyles = (args) => {
                         : `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`
                 }
             }
+        },
+        rootFocused: {
+            ':after': {
+                outline: `2px solid ${args.theme.palette.neutralQuaternaryAlt}`
+            }
         }
     };
 };
@@ -17653,19 +17657,27 @@ const _VideoEffectsItem = (props) => {
         disabled,
         backgroundImage
     }), [backgroundImage, disabled, isSelected, theme]);
+    const componentRef = React__default["default"].createRef();
+    React.useEffect(() => {
+        if (props.focusOnMount && componentRef.current) {
+            componentRef.current.focus();
+        }
+    }, [componentRef, props.focusOnMount]);
     return (React__default["default"].createElement(react.TooltipHost, Object.assign({}, props.tooltipProps),
-        React__default["default"].createElement(react.Stack, { key: props.itemKey, className: react.mergeStyles((_d = props.styles) === null || _d === void 0 ? void 0 : _d.root), verticalAlign: "center", horizontalAlign: "center", styles: containerStyles, "data-ui-id": `video-effects-item`, onClick: disabled ? undefined : () => { var _a; return (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, props.itemKey); }, onKeyDown: disabled
-                ? undefined
-                : (e) => {
-                    var _a;
-                    if (e.key === 'Enter' || e.key === ' ') {
-                        (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, props.itemKey);
-                    }
-                }, tabIndex: props.disabled ? -1 : 0, "aria-label": (_e = props.ariaLabel) !== null && _e !== void 0 ? _e : props.itemKey, "aria-disabled": props.disabled, role: "button" },
-            props.iconProps && (React__default["default"].createElement(react.Stack.Item, { styles: { root: (_f = props.styles) === null || _f === void 0 ? void 0 : _f.iconContainer } },
-                React__default["default"].createElement(react.Icon, Object.assign({}, props.iconProps)))),
-            props.title && (React__default["default"].createElement(react.Stack.Item, { styles: { root: (_g = props.styles) === null || _g === void 0 ? void 0 : _g.textContainer } },
-                React__default["default"].createElement(react.Text, { variant: "small" }, props.title))))));
+        React__default["default"].createElement(react.Stack, { key: props.itemKey, className: react.mergeStyles((_d = props.styles) === null || _d === void 0 ? void 0 : _d.root), verticalAlign: "center", horizontalAlign: "center", "data-ui-id": `video-effects-item`, "aria-label": (_e = props.ariaLabel) !== null && _e !== void 0 ? _e : props.itemKey, "aria-disabled": props.disabled },
+            React__default["default"].createElement(react.DefaultButton, { styles: containerStyles(), onClick: disabled ? undefined : () => { var _a; return (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, props.itemKey); }, componentRef: componentRef, autoFocus: props.focusOnMount, onKeyDown: disabled
+                    ? undefined
+                    : (e) => {
+                        var _a;
+                        if (e.key === 'Enter' || e.key === ' ') {
+                            (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, props.itemKey);
+                        }
+                    } },
+                React__default["default"].createElement(react.Stack, { horizontalAlign: 'center', tokens: { childrenGap: '0.15rem' } },
+                    props.iconProps && (React__default["default"].createElement(react.Stack.Item, { styles: { root: (_f = props.styles) === null || _f === void 0 ? void 0 : _f.iconContainer } },
+                        React__default["default"].createElement(react.Icon, Object.assign({}, props.iconProps)))),
+                    props.title && (React__default["default"].createElement(react.Stack.Item, { styles: { root: (_g = props.styles) === null || _g === void 0 ? void 0 : _g.textContainer } },
+                        React__default["default"].createElement(react.Text, { variant: "small" }, props.title))))))));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -17706,8 +17718,12 @@ const _VideoBackgroundEffectsPicker = (props) => {
         optionsByRow.map((options, rowIndex) => {
             var _a;
             return (React__default["default"].createElement(react.Stack, { className: react.mergeStyles((_a = props.styles) === null || _a === void 0 ? void 0 : _a.rowRoot), wrap: props.itemsPerRow === 'wrap', horizontal: true, key: rowIndex, tokens: { childrenGap: '0.5rem' }, "data-ui-id": "video-effects-picker-row" },
-                options.map((option) => (React__default["default"].createElement(react.FocusZone, { key: option.itemKey, shouldFocusOnMount: option.itemKey.includes('none') },
-                    React__default["default"].createElement(_VideoEffectsItem, Object.assign({}, option, { itemKey: option.itemKey }))))),
+                options.map((option, i) => {
+                    if (i === 0 && rowIndex === 0) {
+                        return (React__default["default"].createElement(_VideoEffectsItem, Object.assign({}, option, { itemKey: option.itemKey, key: option.itemKey, focusOnMount: true })));
+                    }
+                    return React__default["default"].createElement(_VideoEffectsItem, Object.assign({}, option, { itemKey: option.itemKey, key: option.itemKey }));
+                }),
                 fillCount > 0 &&
                     rowIndex === optionsByRow.length - 1 &&
                     Array.from({ length: fillCount }).map((_, index) => (React__default["default"].createElement(react.Stack, { key: index, styles: hiddenVideoEffectsItemContainerStyles, "data-ui-id": "video-effects-hidden-item" })))));