@azure/communication-react 1.3.3-alpha-202209170015.0 → 1.3.3-alpha-202209210019.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-202209210019.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -1332,46 +1332,19 @@ const formatInlineElements = (str, vars) => {
 
 // Copyright (c) Microsoft Corporation.
 /**
- * A component to show error messages on the UI.
- * All strings that can be shown are accepted as the {@link ErrorBarProps.strings} so that they can be localized.
- * Active errors are selected by {@link ErrorBarProps.activeErrorMessages}.
- *
- * This component internally tracks dismissed by the user.
- *   * Errors that have an associated timestamp: The error is shown on the UI again if it occurs after being dismissed.
- *   * Errors that do not have a timestamp: The error is dismissed until it disappears from the props.
- *         If the error recurs, it is shown in the UI.
- *
- * Uses {@link @fluentui/react#MessageBar} UI element.
+ * @private
  *
- * @public
+ * @param fileName
+ * @returns string
+ */
+const extension = (fileName) => fileName.split('.').pop() || '';
+/**
+ * @private
+ * @param dismissedErrors
+ * @param toDismiss
+ * @returns DismissedError[]
+ * Always returns a new Array so that the state variable is updated, trigerring a render.
  */
-const ErrorBar = (props) => {
-    var _a;
-    const localeStrings = useLocale$1().strings.errorBar;
-    const strings = (_a = props.strings) !== null && _a !== void 0 ? _a : localeStrings;
-    const [dismissedErrors, setDismissedErrors] = React.useState([]);
-    // dropDismissalsForInactiveErrors only returns a new object if `dismissedErrors` actually changes.
-    // Without this behaviour, this `useEffect` block would cause a render loop.
-    React.useEffect(() => setDismissedErrors(dropDismissalsForInactiveErrors(props.activeErrorMessages, dismissedErrors)), [props.activeErrorMessages, dismissedErrors]);
-    const toShow = errorsToShow(props.activeErrorMessages, dismissedErrors);
-    return (React__default['default'].createElement(react.Stack, { "data-ui-id": "error-bar-stack" }, toShow.map((error) => (React__default['default'].createElement(react.MessageBar, Object.assign({}, props, { styles: {
-            innerText: {
-                paddingTop: messageBarType(error.type) === 5 ? '0.15rem' : '0.1rem',
-                lineHeight: 'none'
-            },
-            icon: {
-                height: 0
-            },
-            content: {
-                lineHeight: 'inherit'
-            },
-            dismissal: {
-                height: 0,
-                paddingTop: '0.8rem'
-            }
-        }, key: error.type, messageBarType: messageBarType(error.type), messageBarIconProps: messageBarIconProps(error.type), onDismiss: () => setDismissedErrors(dismissError(dismissedErrors, error)), dismissButtonAriaLabel: strings.dismissButtonAriaLabel, dismissIconProps: { iconName: 'ErrorBarClear' } }), strings[error.type])))));
-};
-// Always returns a new Array so that the state variable is updated, trigerring a render.
 const dismissError = (dismissedErrors, toDismiss) => {
     const now = new Date(Date.now());
     for (const error of dismissedErrors) {
@@ -1392,7 +1365,13 @@ const dismissError = (dismissedErrors, toDismiss) => {
         }
     ];
 };
-// Returns a new Array if and only if contents change, to avoid re-rendering when nothing was dropped.
+/**
+ * @private
+ * @param activeErrorMessages
+ * @param dismissedErrors
+ * @returns DismissedError[]
+ *  Returns a new Array if and only if contents change, to avoid re-rendering when nothing was dropped.
+ */
 const dropDismissalsForInactiveErrors = (activeErrorMessages, dismissedErrors) => {
     const active = new Map();
     for (const message of activeErrorMessages) {
@@ -1410,6 +1389,12 @@ const dropDismissalsForInactiveErrors = (activeErrorMessages, dismissedErrors) =
     }
     return dismissedErrors;
 };
+/**
+ * @private
+ * @param activeErrorMessages
+ * @param dismissedErrors
+ * @returns ActiveErrorMessage[]
+ */
 const errorsToShow = (activeErrorMessages, dismissedErrors) => {
     const dismissed = new Map();
     for (const error of dismissedErrors) {
@@ -1429,6 +1414,11 @@ const errorsToShow = (activeErrorMessages, dismissedErrors) => {
         return error.timestamp > dismissal.dismissedAt;
     });
 };
+/**
+ * @private
+ * @param errorType
+ * @returns MessageBarType
+ */
 const messageBarType = (errorType) => {
     switch (errorType) {
         case 'callNetworkQualityLow':
@@ -1450,10 +1440,18 @@ const messageBarType = (errorType) => {
             return react.MessageBarType.error;
     }
 };
+/**
+ * @private
+ * @param errorType
+ * @returns IIconProps | undefined
+ */
 const messageBarIconProps = (errorType) => {
     const iconName = customIconName[errorType];
     return iconName ? { iconName } : undefined;
 };
+/**
+ * @private
+ */
 const customIconName = {
     callNetworkQualityLow: 'ErrorBarCallNetworkQualityLow',
     callNoSpeakerFound: 'ErrorBarCallNoSpeakerFound',
@@ -1470,6 +1468,48 @@ const customIconName = {
     callMacOsCameraAccessDenied: 'ErrorBarCallMacOsCameraAccessDenied'
 };
 
+// Copyright (c) Microsoft Corporation.
+/**
+ * A component to show error messages on the UI.
+ * All strings that can be shown are accepted as the {@link ErrorBarProps.strings} so that they can be localized.
+ * Active errors are selected by {@link ErrorBarProps.activeErrorMessages}.
+ *
+ * This component internally tracks dismissed by the user.
+ *   * Errors that have an associated timestamp: The error is shown on the UI again if it occurs after being dismissed.
+ *   * Errors that do not have a timestamp: The error is dismissed until it disappears from the props.
+ *         If the error recurs, it is shown in the UI.
+ *
+ * Uses {@link @fluentui/react#MessageBar} UI element.
+ *
+ * @public
+ */
+const ErrorBar = (props) => {
+    var _a;
+    const localeStrings = useLocale$1().strings.errorBar;
+    const strings = (_a = props.strings) !== null && _a !== void 0 ? _a : localeStrings;
+    const [dismissedErrors, setDismissedErrors] = React.useState([]);
+    // dropDismissalsForInactiveErrors only returns a new object if `dismissedErrors` actually changes.
+    // Without this behaviour, this `useEffect` block would cause a render loop.
+    React.useEffect(() => setDismissedErrors(dropDismissalsForInactiveErrors(props.activeErrorMessages, dismissedErrors)), [props.activeErrorMessages, dismissedErrors]);
+    const toShow = errorsToShow(props.activeErrorMessages, dismissedErrors);
+    return (React__default['default'].createElement(react.Stack, { "data-ui-id": "error-bar-stack" }, toShow.map((error) => (React__default['default'].createElement(react.MessageBar, Object.assign({}, props, { styles: {
+            innerText: {
+                paddingTop: messageBarType(error.type) === 5 ? '0.15rem' : '0.1rem',
+                lineHeight: 'none'
+            },
+            icon: {
+                height: 0
+            },
+            content: {
+                lineHeight: 'inherit'
+            },
+            dismissal: {
+                height: 0,
+                paddingTop: '0.8rem'
+            }
+        }, key: error.type, messageBarType: messageBarType(error.type), messageBarIconProps: messageBarIconProps(error.type), onDismiss: () => setDismissedErrors(dismissError(dismissedErrors, error)), dismissButtonAriaLabel: strings.dismissButtonAriaLabel, dismissIconProps: { iconName: 'ErrorBarClear' } }), strings[error.type])))));
+};
+
 // Copyright (c) Microsoft Corporation.
 /**
  * @private
@@ -1972,7 +2012,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) */
@@ -2440,15 +2480,6 @@ const _FileCardGroup = (props) => {
     return (React__default['default'].createElement(react.Stack, { horizontal: true, className: fileCardGroupClassName }, children));
 };
 
-// Copyright (c) Microsoft Corporation.
-/**
- * @private
- *
- * @param fileName
- * @returns string
- */
-const extension = (fileName) => fileName.split('.').pop() || '';
-
 // Copyright (c) Microsoft Corporation.
 /**
  * @private
@@ -4450,6 +4481,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 +4503,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);