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

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-202310140012';
+var telemetryVersion = '1.9.0-alpha-202310181643';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -9057,18 +9057,23 @@ const chatMessageFailedTagStyle = (theme) => react.mergeStyles({
     fontSize: theme.fonts.smallPlus.fontSize,
     lineHeight: '1rem'
 });
+/**
+ * @private
+ */
+const editChatMessageFailedTagStyle = react.mergeStyles({
+    marginBottom: '0.5rem'
+});
 /**
  * @private
  */
 const chatMessageFailedTagStackItemStyle = react.mergeStyles({
-    alignSelf: 'end',
-    paddingBottom: '0.25rem'
+    alignSelf: 'end'
 });
 /**
  * @private
  */
 const editChatMessageButtonsStackStyle = react.mergeStyles({
-    padding: '0 0.5rem 0.5rem 0.5rem',
+    padding: '0 0.5rem',
     marginTop: '-0.25rem'
 });
 /**
@@ -9198,19 +9203,21 @@ const ChatMessageComponentAsEditBox = (props) => {
                 }, supportNewline: false, maxLength: MAXIMUM_LENGTH_OF_MESSAGE, errorMessage: textTooLongMessage, styles: editBoxStyles, 
                 /* @conditional-compile-remove(mention) */
                 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' }),
-                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' })),
+            React__default["default"].createElement(react.Stack, { horizontal: true, horizontalAlign: "end", className: editChatMessageButtonsStackStyle, tokens: { childrenGap: '0.25rem' } },
+                message.failureReason && (React__default["default"].createElement(react.Stack.Item, { grow: true, align: "stretch", className: chatMessageFailedTagStackItemStyle },
+                    React__default["default"].createElement("div", { className: react.mergeStyles(chatMessageFailedTagStyle(theme), editChatMessageFailedTagStyle) }, message.failureReason))),
+                React__default["default"].createElement(react.Stack.Item, { align: "end" },
+                    React__default["default"].createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxCancelButton, tooltipContent: strings.editBoxCancelButton, onRenderIcon: onRenderThemedCancelIcon, onClick: () => {
+                            onCancel && onCancel(message.messageId);
+                        }, id: 'dismissIconWrapper' })),
+                React__default["default"].createElement(react.Stack.Item, { align: "end" },
+                    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 bodyClassName = reactComponents.mergeClasses(editContainerStyles.body, message.failureReason !== undefined ? editContainerStyles.bodyError : editContainerStyles.bodyDefault);
@@ -17608,19 +17615,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'
@@ -17632,6 +17637,11 @@ const videoEffectsItemContainerStyles = (args) => {
                         : `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`
                 }
             }
+        },
+        rootFocused: {
+            ':after': {
+                outline: `2px solid ${args.theme.palette.neutralQuaternaryAlt}`
+            }
         }
     };
 };
@@ -17654,19 +17664,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.
@@ -17707,8 +17725,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" })))));