@azure/communication-react 1.9.0-alpha-202310140012 → 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-202310140012';
+var telemetryVersion = '1.9.0-alpha-202310170013';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -17608,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'
@@ -17632,6 +17630,11 @@ const videoEffectsItemContainerStyles = (args) => {
                         : `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`
                 }
             }
+        },
+        rootFocused: {
+            ':after': {
+                outline: `2px solid ${args.theme.palette.neutralQuaternaryAlt}`
+            }
         }
     };
 };
@@ -17654,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.
@@ -17707,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" })))));