@azure/communication-react 1.3.3-alpha-202209170015.0 → 1.3.3-alpha-202209200021.0

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

@@ -192,7 +192,7 @@ const fromFlatCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.3.3-alpha-202209170015.0';
+var telemetryVersion = '1.3.3-alpha-202209200021.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -1972,7 +1972,7 @@ const DEFAULT_COMPONENT_ICONS = {
     OptionsMic: React__default['default'].createElement(reactIcons.MicOn20Regular, null),
     OptionsSpeaker: React__default['default'].createElement(reactIcons.Speaker220Regular, null),
     ParticipantItemMicOff: React__default['default'].createElement(reactIcons.MicOff16Regular, null),
-    ParticipantItemOptions: React__default['default'].createElement(reactIcons.MoreHorizontal20Regular, null),
+    ParticipantItemOptions: React__default['default'].createElement(React__default['default'].Fragment, null),
     ParticipantItemOptionsHovered: React__default['default'].createElement(reactIcons.MoreHorizontal20Filled, null),
     ParticipantItemScreenShareStart: React__default['default'].createElement(reactIcons.ShareScreenStart20Filled, null),
     /* @conditional-compile-remove(PSTN-calls) */
@@ -4450,6 +4450,7 @@ const ParticipantItem = (props) => {
     /* @conditional-compile-remove(PSTN-calls) */
      } = props;
     const [itemHovered, setItemHovered] = React.useState(false);
+    const [itemFocused, setItemFocused] = React.useState(false);
     const [menuHidden, setMenuHidden] = React.useState(true);
     const containerRef = React.useRef(null);
     const theme = useTheme();
@@ -4471,13 +4472,17 @@ const ParticipantItem = (props) => {
     const contextualMenuStyle = React.useMemo(() => react.mergeStyles({ background: theme.palette.neutralLighterAlt }, styles === null || styles === void 0 ? void 0 : styles.menu), [theme.palette.neutralLighterAlt, styles === null || styles === void 0 ? void 0 : styles.menu]);
     const infoContainerStyle = React.useMemo(() => react.mergeStyles(iconContainerStyle$1, { color: theme.palette.neutralTertiary }, styles === null || styles === void 0 ? void 0 : styles.iconContainer), [theme.palette.neutralTertiary, styles === null || styles === void 0 ? void 0 : styles.iconContainer]);
     const menuButton = React.useMemo(() => (React__default['default'].createElement(react.Stack, { horizontal: true, horizontalAlign: "end", className: react.mergeStyles(menuButtonContainerStyle), title: strings.menuTitle, "data-ui-id": ids.participantItemMenuButton },
-        React__default['default'].createElement(react.Icon, { iconName: itemHovered ? 'ParticipantItemOptionsHovered' : 'ParticipantItemOptions', className: iconStyles$4 }))), [itemHovered, strings.menuTitle, ids.participantItemMenuButton]);
+        React__default['default'].createElement(react.Icon, { iconName: itemHovered || itemFocused || !menuHidden ? 'ParticipantItemOptionsHovered' : 'ParticipantItemOptions', className: iconStyles$4 }))), [strings.menuTitle, ids.participantItemMenuButton, itemHovered, itemFocused, menuHidden]);
     const onDismissMenu = () => {
         setItemHovered(false);
+        setItemFocused(false);
         setMenuHidden(true);
     };
     const participantStateString = participantStateStringTrampoline$1(props, strings);
-    return (React__default['default'].createElement("div", { ref: containerRef, role: 'menuitem', "data-is-focusable": true, "data-ui-id": "participant-item", className: react.mergeStyles(participantItemContainerStyle({ localparticipant: me, clickable: !!menuItems }), styles === null || styles === void 0 ? void 0 : styles.root), onMouseEnter: () => setItemHovered(true), onMouseLeave: () => setItemHovered(false), onClick: () => {
+    return (React__default['default'].createElement("div", { ref: containerRef, role: 'menuitem', "data-is-focusable": true, "data-ui-id": "participant-item", className: react.mergeStyles(participantItemContainerStyle({
+            localparticipant: me,
+            clickable: !!menuItems
+        }), styles === null || styles === void 0 ? void 0 : styles.root), onMouseEnter: () => setItemHovered(true), onMouseLeave: () => setItemHovered(false), onFocus: () => setItemFocused(true), onBlur: () => setItemFocused(false), onClick: () => {
             if (!participantStateString) {
                 setItemHovered(true);
                 setMenuHidden(false);