@azure/communication-react 1.18.0-beta.1 → 1.19.0-alpha-202407230014

package/dist/dist-esm/react-components/src/components/{NotificationBar.d.ts → Notification.d.ts}

@@ -1,19 +1,19 @@
 /// <reference types="react" />
 import { IIconProps } from '@fluentui/react';
 /**
- * Props for {@link NotificationBar}.
+ * Props for {@link Notification}.
  *
- * @beta
+ * @public
  */
-export interface NotificationBarProps {
+export interface NotificationProps {
     /**
      * Notification bar strings;
      */
-    notificationBarStrings?: NotificationBarStrings;
+    notificationStrings?: NotificationStrings;
     /**
      * Notification bar icon;
      */
-    notificationBarIconProps?: IIconProps;
+    notificationIconProps?: IIconProps;
     /**
      * If set, notifications will automatically dismiss after 5 seconds
      * @defaultValue false
@@ -38,19 +38,19 @@ export interface NotificationBarProps {
     onDismiss?: () => void;
 }
 /**
- * All strings that may be shown on the UI in the {@link NotificationBar}.
+ * All strings that may be shown on the UI in the {@link Notification}.
  *
- * @beta
+ * @public
  */
-export interface NotificationBarStrings {
+export interface NotificationStrings {
     /**
      * Notification bar title.
      */
     title: string;
     /**
-     * Notification bar close button aria label
+     * Notification bar dismiss button aria label
      */
-    closeButtonAriaLabel: string;
+    dismissButtonAriaLabel: string;
     /**
      * Notification bar message.
      */
@@ -67,7 +67,7 @@ export interface NotificationBarStrings {
 /**
  * A component to show notification messages on the UI.
  *
- * @beta
+ * @public
  */
-export declare const NotificationBar: (props: NotificationBarProps) => JSX.Element;
-//# sourceMappingURL=NotificationBar.d.ts.map
+export declare const Notification: (props: NotificationProps) => JSX.Element;
+//# sourceMappingURL=Notification.d.ts.map

package/dist/dist-esm/react-components/src/components/{NotificationBar.js → Notification.js}

@@ -3,15 +3,15 @@
 import React, { useState } from 'react';
 import { Icon, IconButton, PrimaryButton, Stack, useTheme, Text, DefaultButton } from '@fluentui/react';
 import { cancelIcon } from './styles/ImageOverlay.style';
-import { containerStyles, hiddenContainerStyles, messageTextStyle, notificationIconClassName, titleTextClassName } from './styles/NotificationBar.styles';
+import { containerStyles, hiddenContainerStyles, messageTextStyle, notificationIconClassName, titleTextClassName } from './styles/Notification.styles';
 /**
  * A component to show notification messages on the UI.
  *
- * @beta
+ * @public
  */
-export const NotificationBar = (props) => {
+export const Notification = (props) => {
     var _a, _b;
-    const strings = props.notificationBarStrings;
+    const strings = props.notificationStrings;
     const theme = useTheme();
     const [show, setShow] = useState(true);
     if (props.autoDismiss) {
@@ -24,21 +24,17 @@ export const NotificationBar = (props) => {
             return React.createElement(React.Fragment, null);
         }
     }
-    return React.createElement(Stack, { horizontalAlign: "center" },
+    return (React.createElement(Stack, { horizontalAlign: "center" },
         React.createElement(Stack, { "data-ui-id": "notification-bar", className: containerStyles(theme) },
             React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between" },
                 React.createElement(Stack, { horizontal: true },
-                    React.createElement(Icon, Object.assign({ className: notificationIconClassName, iconName: (_b = (_a = props.notificationBarIconProps) === null || _a === void 0 ? void 0 : _a.iconName) !== null && _b !== void 0 ? _b : 'ErrorBadge' }, props.notificationBarIconProps)),
+                    React.createElement(Icon, Object.assign({ className: notificationIconClassName, iconName: (_b = (_a = props.notificationIconProps) === null || _a === void 0 ? void 0 : _a.iconName) !== null && _b !== void 0 ? _b : 'ErrorBadge' }, props.notificationIconProps)),
                     React.createElement(Text, { className: titleTextClassName }, strings === null || strings === void 0 ? void 0 : strings.title)),
-                React.createElement(IconButton, { iconProps: cancelIcon, ariaLabel: strings === null || strings === void 0 ? void 0 : strings.closeButtonAriaLabel, "aria-live": 'polite', onClick: props.onDismiss })),
+                React.createElement(IconButton, { iconProps: cancelIcon, ariaLabel: strings === null || strings === void 0 ? void 0 : strings.dismissButtonAriaLabel, "aria-live": 'polite', onClick: props.onDismiss })),
             React.createElement(Text, { className: messageTextStyle(theme) }, strings === null || strings === void 0 ? void 0 : strings.message),
             React.createElement(Stack, { horizontal: true, horizontalAlign: "space-evenly" },
-                (strings === null || strings === void 0 ? void 0 : strings.secondaryButtonLabel) && React.createElement(DefaultButton, { onClick: props.onClickSecondaryButton, style: {
-                        marginTop: '1rem'
-                    } }, strings === null || strings === void 0 ? void 0 : strings.secondaryButtonLabel),
-                (strings === null || strings === void 0 ? void 0 : strings.primaryButtonLabel) && React.createElement(PrimaryButton, { onClick: props.onClickPrimaryButton, style: {
-                        marginTop: '1rem'
-                    } }, strings === null || strings === void 0 ? void 0 : strings.primaryButtonLabel))),
-        props.showStackedEffect && React.createElement(Stack, { className: hiddenContainerStyles(theme) }));
+                (strings === null || strings === void 0 ? void 0 : strings.secondaryButtonLabel) && (React.createElement(DefaultButton, { onClick: props.onClickSecondaryButton, style: { marginTop: '1rem' } }, strings === null || strings === void 0 ? void 0 : strings.secondaryButtonLabel)),
+                (strings === null || strings === void 0 ? void 0 : strings.primaryButtonLabel) && (React.createElement(PrimaryButton, { onClick: props.onClickPrimaryButton, style: { marginTop: '1rem' } }, strings === null || strings === void 0 ? void 0 : strings.primaryButtonLabel)))),
+        props.showStackedEffect && React.createElement(Stack, { className: hiddenContainerStyles(theme) })));
 };
-//# sourceMappingURL=NotificationBar.js.map
+//# sourceMappingURL=Notification.js.map

package/dist/dist-esm/react-components/src/components/Notification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notification.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/Notification.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useState } from 'react';\nimport { Icon, IconButton, PrimaryButton, Stack, useTheme, Text, IIconProps, DefaultButton } from '@fluentui/react';\nimport { cancelIcon } from './styles/ImageOverlay.style';\nimport {\n  containerStyles,\n  hiddenContainerStyles,\n  messageTextStyle,\n  notificationIconClassName,\n  titleTextClassName\n} from './styles/Notification.styles';\n\n/**\n * Props for {@link Notification}.\n *\n * @public\n */\nexport interface NotificationProps {\n  /**\n   * Notification bar strings;\n   */\n  notificationStrings?: NotificationStrings;\n\n  /**\n   * Notification bar icon;\n   */\n  notificationIconProps?: IIconProps;\n\n  /**\n   * If set, notifications will automatically dismiss after 5 seconds\n   * @defaultValue false\n   */\n  autoDismiss?: boolean;\n\n  /**\n   * If set, notifications will be shown in a stacked effect\n   * @defaultValue false\n   */\n  showStackedEffect?: boolean;\n\n  /**\n   * Callback called when the primary button inside notification bar is clicked.\n   */\n  onClickPrimaryButton?: () => void;\n\n  /**\n   * Callback called when the secondary button inside notification bar is clicked.\n   */\n  onClickSecondaryButton?: () => void;\n\n  /**\n   * Callback called when the notification is dismissed.\n   */\n  onDismiss?: () => void;\n}\n\n/**\n * All strings that may be shown on the UI in the {@link Notification}.\n *\n * @public\n */\nexport interface NotificationStrings {\n  /**\n   * Notification bar title.\n   */\n  title: string;\n  /**\n   * Notification bar dismiss button aria label\n   */\n  dismissButtonAriaLabel: string;\n  /**\n   * Notification bar message.\n   */\n  message?: string;\n  /**\n   * Notification bar primary button label\n   */\n  primaryButtonLabel?: string;\n  /**\n   * Notification bar secondary button label\n   */\n  secondaryButtonLabel?: string;\n}\n\n/**\n * A component to show notification messages on the UI.\n *\n * @public\n */\nexport const Notification = (props: NotificationProps): JSX.Element => {\n  const strings = props.notificationStrings;\n  const theme = useTheme();\n  const [show, setShow] = useState(true);\n\n  if (props.autoDismiss) {\n    setTimeout(() => {\n      // After 5 seconds set the show value to false\n      setShow(false);\n    }, 5000);\n\n    if (!show) {\n      props.onDismiss && props.onDismiss();\n      return <></>;\n    }\n  }\n\n  return (\n    <Stack horizontalAlign=\"center\">\n      <Stack data-ui-id=\"notification-bar\" className={containerStyles(theme)}>\n        <Stack horizontal horizontalAlign=\"space-between\">\n          <Stack horizontal>\n            <Icon\n              className={notificationIconClassName}\n              iconName={props.notificationIconProps?.iconName ?? 'ErrorBadge'}\n              {...props.notificationIconProps}\n            />\n            <Text className={titleTextClassName}>{strings?.title}</Text>\n          </Stack>\n\n          <IconButton\n            iconProps={cancelIcon}\n            ariaLabel={strings?.dismissButtonAriaLabel}\n            aria-live={'polite'}\n            onClick={props.onDismiss}\n          />\n        </Stack>\n        <Text className={messageTextStyle(theme)}>{strings?.message}</Text>\n        <Stack horizontal horizontalAlign=\"space-evenly\">\n          {strings?.secondaryButtonLabel && (\n            <DefaultButton onClick={props.onClickSecondaryButton} style={{ marginTop: '1rem' }}>\n              {strings?.secondaryButtonLabel}\n            </DefaultButton>\n          )}\n          {strings?.primaryButtonLabel && (\n            <PrimaryButton onClick={props.onClickPrimaryButton} style={{ marginTop: '1rem' }}>\n              {strings?.primaryButtonLabel}\n            </PrimaryButton>\n          )}\n        </Stack>\n      </Stack>\n      {props.showStackedEffect && <Stack className={hiddenContainerStyles(theme)}></Stack>}\n    </Stack>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/{Notifications.d.ts → NotificationStack.d.ts}

@@ -1,14 +1,14 @@
 /// <reference types="react" />
-import { NotificationBarStrings } from './NotificationBar';
+import { NotificationStrings } from './Notification';
 /**
- * Props for {@link Notifications}.
- * @beta
+ * Props for {@link NotificationStack}.
+ * @public
  */
-export interface NotificationsProps {
+export interface NotificationStackProps {
     /**
      * Strings shown on the UI on errors.
      */
-    strings?: NotificationsStrings;
+    strings?: NotificationStackStrings;
     /**
      * Currently active notifications.
      */
@@ -18,167 +18,200 @@ export interface NotificationsProps {
      * @defaultValue 2
      */
     maxNotificationsToShow?: number;
-}
-/**
- * All strings that may be shown on the UI in the {@link Notifications}.
- *
- * @beta
- */
-export interface NotificationsStrings {
     /**
-     * Unable to reach Chat service.
-     *
-     * This can mean:
-     *   - Incorrect Azure Communication Services endpoint was provided.
-     *   - User's network connection is down.
+     * Callback called when the dismiss button is triggered.
+     * Use this to control notifications shown when they dismissed by the user.
+     * Note this onDismiss function will affect all notifications in the same stack
      */
-    unableToReachChatService: NotificationBarStrings;
+    onDismissNotification?: (dismissedNotification: ActiveNotification) => void;
     /**
-     * User does not have access to the Chat service.
-     * This usually means that either the Azure Communication Services endpiont or the token provided are incorrect.
-     */
-    accessDenied: NotificationBarStrings;
-    /**
-     * User is no longer on the thread.
+     * If set, notifications with {@link ActiveNotification.timestamp} older than the time this component is mounted
+     * are not shown.
      *
-     * See also: {@link NotificationsStrings.sendMessageNotInChatThread} for a more specific error.
-     */
-    userNotInChatThread: NotificationBarStrings;
-    /**
-     * Sending message failed because user is no longer on the thread.
-     */
-    sendMessageNotInChatThread: NotificationBarStrings;
-    /**
-     * A generic message when sending message fails.
-     * Prefer more specific error strings when possible.
+     * This is useful when using the {@link NotificationStack} with a stateful client that handles more than one call
+     * or chat thread. Set this prop to ignore notifications from previous call or chat.
+     *
+     * @defaultValue false
      */
-    sendMessageGeneric: NotificationBarStrings;
+    ignorePremountNotifications?: boolean;
+}
+/**
+ * All strings that may be shown on the UI in the {@link NotificationStack}.
+ *
+ * @public
+ */
+export interface NotificationStackStrings {
     /**
      * A generic message when starting video fails.
      */
-    startVideoGeneric: NotificationBarStrings;
+    startVideoGeneric?: NotificationStrings;
     /**
      * A generic message when starting video fails.
      */
-    stopVideoGeneric: NotificationBarStrings;
+    stopVideoGeneric?: NotificationStrings;
     /**
      * A generic message when muting microphone fails.
      */
-    muteGeneric: NotificationBarStrings;
+    muteGeneric?: NotificationStrings;
     /**
      * A generic message when unmuting microphone fails.
      */
-    unmuteGeneric: NotificationBarStrings;
+    unmuteGeneric?: NotificationStrings;
     /**
      * A generic message when starting screenshare fails.
      */
-    startScreenShareGeneric: NotificationBarStrings;
+    startScreenShareGeneric?: NotificationStrings;
     /**
      * A generic message when stopping screenshare fails.
      */
-    stopScreenShareGeneric: NotificationBarStrings;
+    stopScreenShareGeneric?: NotificationStrings;
     /**
      * Message shown when poor network quality is detected during a call.
      */
-    callNetworkQualityLow: NotificationBarStrings;
+    callNetworkQualityLow?: NotificationStrings;
+    /**
+     * Message shown when poor network quality is detected during a teams meetings.
+     * Contains actions to open phone info modal.
+     */
+    teamsMeetingCallNetworkQualityLow?: NotificationStrings;
     /**
      * Message shown on failure to detect audio output devices.
      */
-    callNoSpeakerFound: NotificationBarStrings;
+    callNoSpeakerFound?: NotificationStrings;
     /**
      * Message shown on failure to detect audio input devices.
      */
-    callNoMicrophoneFound: NotificationBarStrings;
+    callNoMicrophoneFound?: NotificationStrings;
     /**
      * Message shown when microphone can be enumerated but access is blocked by the system.
      */
-    callMicrophoneAccessDenied: NotificationBarStrings;
+    callMicrophoneAccessDenied?: NotificationStrings;
     /**
      * Message shown when microphone can be enumerated but access is blocked by the system, for safari browsers
      */
-    callMicrophoneAccessDeniedSafari: NotificationBarStrings;
+    callMicrophoneAccessDeniedSafari?: NotificationStrings;
     /**
      * Message shown when microphone is muted by the system (not by local or remote participants)
      */
-    callMicrophoneMutedBySystem: NotificationBarStrings;
+    callMicrophoneMutedBySystem?: NotificationStrings;
     /**
      * Message shown when microphone is unmuted by the system (not by local or remote participants).
      * This typically occurs if the system recovers from an unexpected mute.
      */
-    callMicrophoneUnmutedBySystem: NotificationBarStrings;
+    callMicrophoneUnmutedBySystem?: NotificationStrings;
     /**
      * Mac OS specific message shown when microphone can be enumerated but access is
      * blocked by the system.
      */
-    callMacOsMicrophoneAccessDenied: NotificationBarStrings;
+    callMacOsMicrophoneAccessDenied?: NotificationStrings;
     /**
      * Message shown when poor network causes local video stream to be frozen.
      */
-    callLocalVideoFreeze: NotificationBarStrings;
+    callLocalVideoFreeze?: NotificationStrings;
     /**
      * Message shown when camera can be enumerated but access is blocked by the system.
      */
-    callCameraAccessDenied: NotificationBarStrings;
+    callCameraAccessDenied?: NotificationStrings;
     /**
      * Message shown when camera can be enumerated but access is blocked by the system, for safari browsers
      */
-    callCameraAccessDeniedSafari: NotificationBarStrings;
+    callCameraAccessDeniedSafari?: NotificationStrings;
     /**
      * Message shown when local video fails to start because camera is already in use by
      * another applciation.
      */
-    callCameraAlreadyInUse: NotificationBarStrings;
+    callCameraAlreadyInUse?: NotificationStrings;
     /**
      * Message shown when local video is stopped by the system (not by local or remote participants)
      */
-    callVideoStoppedBySystem: NotificationBarStrings;
+    callVideoStoppedBySystem?: NotificationStrings;
     /**
      * Message shown when local video was recovered by the system (not by the local participant)
      */
-    callVideoRecoveredBySystem: NotificationBarStrings;
+    callVideoRecoveredBySystem?: NotificationStrings;
     /**
      * Mac OS specific message shown when system denies access to camera.
      */
-    callMacOsCameraAccessDenied: NotificationBarStrings;
+    callMacOsCameraAccessDenied?: NotificationStrings;
     /**
      * Mac OS specific message shown when system denies sharing local screen on a call.
      */
-    callMacOsScreenShareAccessDenied: NotificationBarStrings;
+    callMacOsScreenShareAccessDenied?: NotificationStrings;
     /**
      * Dimiss Notifications button aria label read by screen reader accessibility tools
      */
-    dismissButtonAriaLabel?: NotificationBarStrings;
+    dismissButtonAriaLabel?: NotificationStrings;
     /**
      * An error message when joining a call fails.
      */
-    failedToJoinCallGeneric?: NotificationBarStrings;
+    failedToJoinCallGeneric?: NotificationStrings;
     /**
      * An error message when joining a call fails specifically due to an invalid meeting link.
      */
-    failedToJoinCallInvalidMeetingLink?: NotificationBarStrings;
+    failedToJoinCallInvalidMeetingLink?: NotificationStrings;
     /**
      * Error string letting you know remote participants see a frozen stream for you.
      */
-    cameraFrozenForRemoteParticipants?: NotificationBarStrings;
+    cameraFrozenForRemoteParticipants?: NotificationStrings;
     /**
      * Unable to start effect
      */
-    unableToStartVideoEffect?: NotificationBarStrings;
+    unableToStartVideoEffect?: NotificationStrings;
     /**
      * An error message when starting spotlight while max participants are spotlighted
      */
-    startSpotlightWhileMaxParticipantsAreSpotlighted: NotificationBarStrings;
+    startSpotlightWhileMaxParticipantsAreSpotlighted?: NotificationStrings;
+    /**
+     * Muted by a remote participant message
+     */
+    mutedByRemoteParticipant?: NotificationStrings;
+    /**
+     * Speaking while muted message
+     */
+    speakingWhileMuted?: NotificationStrings;
+    /**
+     * Recording started message
+     */
+    recordingStarted?: NotificationStrings;
+    /**
+     * Transcription started message
+     */
+    transcriptionStarted?: NotificationStrings;
+    /**
+     * Recording stopped message
+     */
+    recordingStopped?: NotificationStrings;
+    /**
+     * Transcription stopped message
+     */
+    transcriptionStopped?: NotificationStrings;
+    /**
+     * Recording and transcription both started message
+     */
+    recordingAndTranscriptionStarted?: NotificationStrings;
+    /**
+     * Recording and transcription both stopped message
+     */
+    recordingAndTranscriptionStopped?: NotificationStrings;
+    /**
+     * Recording stopped but transcription still going on message
+     */
+    recordingStoppedStillTranscribing?: NotificationStrings;
+    /**
+     *  Transcription stopped but recording still going on message
+     */
+    transcriptionStoppedStillRecording?: NotificationStrings;
 }
 /**
- * All notifications that can be shown in the {@link Notifications}.
+ * All notifications that can be shown in the {@link NotificationStack}.
  *
- * @beta
+ * @public
  */
-export type NotificationType = keyof NotificationsStrings;
+export type NotificationType = keyof NotificationStackStrings;
 /**
- * Active notifications to be shown via {@link Notifications}.
+ * Active notifications to be shown via {@link NotificationStack}.
  *
- * @beta
+ * @public
  */
 export interface ActiveNotification {
     /**
@@ -201,11 +234,18 @@ export interface ActiveNotification {
      * If set, notification will automatically dismiss after 5 seconds
      */
     autoDismiss?: boolean;
+    /**
+     * The latest timestamp when this notification was observed.
+     *
+     * When available, this is used to track notifications that have already been seen and dismissed
+     * by the user.
+     */
+    timestamp?: Date;
 }
 /**
  * A component to show notifications on the UI.
- * All strings that can be shown are accepted as the {@link NotificationsProps.strings} so that they can be localized.
- * Active notifications are selected by {@link NotificationsProps.activeNotifications}.
+ * All strings that can be shown are accepted as the {@link NotificationStackProps.strings} so that they can be localized.
+ * Active notifications are selected by {@link NotificationStackProps.activeNotifications}.
  *
  * This component internally tracks dismissed by the user.
  *   * Notifications that have an associated timestamp: The notification is shown on the UI again if it occurs after being dismissed.
@@ -213,7 +253,7 @@ export interface ActiveNotification {
  *         If the notification recurs, it is shown in the UI.
  *
  *
- * @beta
+ * @public
  */
-export declare const Notifications: (props: NotificationsProps) => JSX.Element;
-//# sourceMappingURL=Notifications.d.ts.map
+export declare const NotificationStack: (props: NotificationStackProps) => JSX.Element;
+//# sourceMappingURL=NotificationStack.d.ts.map

package/dist/dist-esm/react-components/src/components/NotificationStack.js

@@ -0,0 +1,58 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React, { useEffect, useRef, useState } from 'react';
+import { Stack } from '@fluentui/react';
+/* @conditional-compile-remove(notifications) */
+import { useLocale } from '../localization';
+import { NotificationIconProps, dismissNotification, dropDismissalsForInactiveNotifications, notificationsToShow } from './utils';
+import { Notification } from './Notification';
+/**
+ * A component to show notifications on the UI.
+ * All strings that can be shown are accepted as the {@link NotificationStackProps.strings} so that they can be localized.
+ * Active notifications are selected by {@link NotificationStackProps.activeNotifications}.
+ *
+ * This component internally tracks dismissed by the user.
+ *   * Notifications that have an associated timestamp: The notification is shown on the UI again if it occurs after being dismissed.
+ *   * Notifications that do not have a timestamp: The notification is dismissed until it disappears from the props.
+ *         If the notification recurs, it is shown in the UI.
+ *
+ *
+ * @public
+ */
+export const NotificationStack = (props) => {
+    var _a, _b;
+    /* @conditional-compile-remove(notifications) */
+    const localeStrings = useLocale().strings.notificationStack;
+    const strings = (_a = props.strings) !== null && _a !== void 0 ? _a : localeStrings;
+    const maxNotificationsToShow = (_b = props.maxNotificationsToShow) !== null && _b !== void 0 ? _b : 2;
+    const trackDismissedNotificationsInternally = !props.onDismissNotification;
+    // Timestamp for when this comopnent is first mounted.
+    // Never updated through the lifecycle of this component.
+    const mountTimestamp = useRef(new Date(Date.now()));
+    const [dismissedNotifications, setDismissedNotifications] = useState([]);
+    // dropDismissalsForInactiveNotifications only returns a new object if `dismissedErrors` actually changes.
+    // Without this behaviour, this `useEffect` block would cause a render loop.
+    useEffect(() => {
+        trackDismissedNotificationsInternally &&
+            setDismissedNotifications(dropDismissalsForInactiveNotifications(props.activeNotifications, dismissedNotifications));
+    }, [props.activeNotifications, dismissedNotifications, trackDismissedNotificationsInternally]);
+    const activeNotifications = notificationsToShow(props.activeNotifications, dismissedNotifications, props.ignorePremountNotifications ? mountTimestamp.current : undefined);
+    return (React.createElement(Stack, { "data-ui-id": "notifications-stack", style: {
+            width: 'fit-content'
+        } }, activeNotifications.map((notification, index) => {
+        if (index < maxNotificationsToShow) {
+            return (React.createElement("div", { key: index, style: { marginBottom: `${index === maxNotificationsToShow - 1 ? 0 : '0.25rem'}` } },
+                React.createElement(Notification, { notificationStrings: strings ? strings[notification.type] : undefined, notificationIconProps: NotificationIconProps(notification.type), onClickPrimaryButton: () => { var _a; return (_a = notification.onClickPrimaryButton) === null || _a === void 0 ? void 0 : _a.call(notification); }, onClickSecondaryButton: () => { var _a; return (_a = notification.onClickSecondaryButton) === null || _a === void 0 ? void 0 : _a.call(notification); }, onDismiss: () => {
+                        var _a;
+                        trackDismissedNotificationsInternally
+                            ? setDismissedNotifications(dismissNotification(dismissedNotifications, notification))
+                            : (_a = props.onDismissNotification) === null || _a === void 0 ? void 0 : _a.call(props, notification);
+                        notification.onDismiss && notification.onDismiss();
+                    }, showStackedEffect: index === maxNotificationsToShow - 1 && activeNotifications.length > maxNotificationsToShow, autoDismiss: notification.autoDismiss })));
+        }
+        else {
+            return React.createElement(React.Fragment, null);
+        }
+    })));
+};
+//# sourceMappingURL=NotificationStack.js.map

package/dist/dist-esm/react-components/src/components/NotificationStack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationStack.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/NotificationStack.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport { Stack } from '@fluentui/react';\n/* @conditional-compile-remove(notifications) */\nimport { useLocale } from '../localization';\nimport {\n  DismissedNotification,\n  NotificationIconProps,\n  dismissNotification,\n  dropDismissalsForInactiveNotifications,\n  notificationsToShow\n} from './utils';\nimport { Notification, NotificationStrings } from './Notification';\n\n/**\n * Props for {@link NotificationStack}.\n * @public\n */\nexport interface NotificationStackProps {\n  /**\n   * Strings shown on the UI on errors.\n   */\n  strings?: NotificationStackStrings;\n\n  /**\n   * Currently active notifications.\n   */\n  activeNotifications: ActiveNotification[];\n\n  /**\n   * Max notifications to show at a time.\n   * @defaultValue 2\n   */\n  maxNotificationsToShow?: number;\n\n  /**\n   * Callback called when the dismiss button is triggered.\n   * Use this to control notifications shown when they dismissed by the user.\n   * Note this onDismiss function will affect all notifications in the same stack\n   */\n  onDismissNotification?: (dismissedNotification: ActiveNotification) => void;\n\n  /**\n   * If set, notifications with {@link ActiveNotification.timestamp} older than the time this component is mounted\n   * are not shown.\n   *\n   * This is useful when using the {@link NotificationStack} with a stateful client that handles more than one call\n   * or chat thread. Set this prop to ignore notifications from previous call or chat.\n   *\n   * @defaultValue false\n   */\n  ignorePremountNotifications?: boolean;\n}\n\n/**\n * All strings that may be shown on the UI in the {@link NotificationStack}.\n *\n * @public\n */\nexport interface NotificationStackStrings {\n  /**\n   * A generic message when starting video fails.\n   */\n  startVideoGeneric?: NotificationStrings;\n\n  /**\n   * A generic message when starting video fails.\n   */\n  stopVideoGeneric?: NotificationStrings;\n\n  /**\n   * A generic message when muting microphone fails.\n   */\n  muteGeneric?: NotificationStrings;\n\n  /**\n   * A generic message when unmuting microphone fails.\n   */\n  unmuteGeneric?: NotificationStrings;\n\n  /**\n   * A generic message when starting screenshare fails.\n   */\n  startScreenShareGeneric?: NotificationStrings;\n\n  /**\n   * A generic message when stopping screenshare fails.\n   */\n  stopScreenShareGeneric?: NotificationStrings;\n\n  /**\n   * Message shown when poor network quality is detected during a call.\n   */\n  callNetworkQualityLow?: NotificationStrings;\n  /* @conditional-compile-remove(teams-meeting-conference) */\n  /**\n   * Message shown when poor network quality is detected during a teams meetings.\n   * Contains actions to open phone info modal.\n   */\n  teamsMeetingCallNetworkQualityLow?: NotificationStrings;\n  /**\n   * Message shown on failure to detect audio output devices.\n   */\n  callNoSpeakerFound?: NotificationStrings;\n\n  /**\n   * Message shown on failure to detect audio input devices.\n   */\n  callNoMicrophoneFound?: NotificationStrings;\n\n  /**\n   * Message shown when microphone can be enumerated but access is blocked by the system.\n   */\n  callMicrophoneAccessDenied?: NotificationStrings;\n\n  /**\n   * Message shown when microphone can be enumerated but access is blocked by the system, for safari browsers\n   */\n  callMicrophoneAccessDeniedSafari?: NotificationStrings;\n\n  /**\n   * Message shown when microphone is muted by the system (not by local or remote participants)\n   */\n  callMicrophoneMutedBySystem?: NotificationStrings;\n\n  /**\n   * Message shown when microphone is unmuted by the system (not by local or remote participants).\n   * This typically occurs if the system recovers from an unexpected mute.\n   */\n  callMicrophoneUnmutedBySystem?: NotificationStrings;\n\n  /**\n   * Mac OS specific message shown when microphone can be enumerated but access is\n   * blocked by the system.\n   */\n  callMacOsMicrophoneAccessDenied?: NotificationStrings;\n\n  /**\n   * Message shown when poor network causes local video stream to be frozen.\n   */\n  callLocalVideoFreeze?: NotificationStrings;\n\n  /**\n   * Message shown when camera can be enumerated but access is blocked by the system.\n   */\n  callCameraAccessDenied?: NotificationStrings;\n\n  /**\n   * Message shown when camera can be enumerated but access is blocked by the system, for safari browsers\n   */\n  callCameraAccessDeniedSafari?: NotificationStrings;\n\n  /**\n   * Message shown when local video fails to start because camera is already in use by\n   * another applciation.\n   */\n  callCameraAlreadyInUse?: NotificationStrings;\n\n  /**\n   * Message shown when local video is stopped by the system (not by local or remote participants)\n   */\n  callVideoStoppedBySystem?: NotificationStrings;\n\n  /**\n   * Message shown when local video was recovered by the system (not by the local participant)\n   */\n  callVideoRecoveredBySystem?: NotificationStrings;\n\n  /**\n   * Mac OS specific message shown when system denies access to camera.\n   */\n  callMacOsCameraAccessDenied?: NotificationStrings;\n\n  /**\n   * Mac OS specific message shown when system denies sharing local screen on a call.\n   */\n  callMacOsScreenShareAccessDenied?: NotificationStrings;\n\n  /**\n   * Dimiss Notifications button aria label read by screen reader accessibility tools\n   */\n  dismissButtonAriaLabel?: NotificationStrings;\n\n  /**\n   * An error message when joining a call fails.\n   */\n  failedToJoinCallGeneric?: NotificationStrings;\n\n  /**\n   * An error message when joining a call fails specifically due to an invalid meeting link.\n   */\n  failedToJoinCallInvalidMeetingLink?: NotificationStrings;\n  /**\n   * Error string letting you know remote participants see a frozen stream for you.\n   */\n  cameraFrozenForRemoteParticipants?: NotificationStrings;\n\n  /**\n   * Unable to start effect\n   */\n  unableToStartVideoEffect?: NotificationStrings;\n  /**\n   * An error message when starting spotlight while max participants are spotlighted\n   */\n  startSpotlightWhileMaxParticipantsAreSpotlighted?: NotificationStrings;\n  /* @conditional-compile-remove(soft-mute) */\n  /**\n   * Muted by a remote participant message\n   */\n  mutedByRemoteParticipant?: NotificationStrings;\n  /**\n   * Speaking while muted message\n   */\n  speakingWhileMuted?: NotificationStrings;\n  /**\n   * Recording started message\n   */\n  recordingStarted?: NotificationStrings;\n  /**\n   * Transcription started message\n   */\n  transcriptionStarted?: NotificationStrings;\n  /**\n   * Recording stopped message\n   */\n  recordingStopped?: NotificationStrings;\n  /**\n   * Transcription stopped message\n   */\n  transcriptionStopped?: NotificationStrings;\n  /**\n   * Recording and transcription both started message\n   */\n  recordingAndTranscriptionStarted?: NotificationStrings;\n  /**\n   * Recording and transcription both stopped message\n   */\n  recordingAndTranscriptionStopped?: NotificationStrings;\n  /**\n   * Recording stopped but transcription still going on message\n   */\n  recordingStoppedStillTranscribing?: NotificationStrings;\n  /**\n   *  Transcription stopped but recording still going on message\n   */\n  transcriptionStoppedStillRecording?: NotificationStrings;\n}\n\n/**\n * All notifications that can be shown in the {@link NotificationStack}.\n *\n * @public\n */\nexport type NotificationType = keyof NotificationStackStrings;\n\n/**\n * Active notifications to be shown via {@link NotificationStack}.\n *\n * @public\n */\nexport interface ActiveNotification {\n  /**\n   * Type of error that is active.\n   */\n  type: NotificationType;\n  /**\n   * Callback called when the primary button inside notification bar is clicked.\n   */\n  onClickPrimaryButton?: () => void;\n\n  /**\n   * Callback called when the primary button inside notification bar is clicked.\n   */\n  onClickSecondaryButton?: () => void;\n\n  /**\n   * Callback called when the notification is dismissed.\n   */\n  onDismiss?: () => void;\n\n  /**\n   * If set, notification will automatically dismiss after 5 seconds\n   */\n  autoDismiss?: boolean;\n\n  /**\n   * The latest timestamp when this notification was observed.\n   *\n   * When available, this is used to track notifications that have already been seen and dismissed\n   * by the user.\n   */\n  timestamp?: Date;\n}\n\n/**\n * A component to show notifications on the UI.\n * All strings that can be shown are accepted as the {@link NotificationStackProps.strings} so that they can be localized.\n * Active notifications are selected by {@link NotificationStackProps.activeNotifications}.\n *\n * This component internally tracks dismissed by the user.\n *   * Notifications that have an associated timestamp: The notification is shown on the UI again if it occurs after being dismissed.\n *   * Notifications that do not have a timestamp: The notification is dismissed until it disappears from the props.\n *         If the notification recurs, it is shown in the UI.\n *\n *\n * @public\n */\nexport const NotificationStack = (props: NotificationStackProps): JSX.Element => {\n  /* @conditional-compile-remove(notifications) */\n  const localeStrings = useLocale().strings.notificationStack;\n  const strings = props.strings ?? /* @conditional-compile-remove(notifications) */ localeStrings;\n  const maxNotificationsToShow = props.maxNotificationsToShow ?? 2;\n\n  const trackDismissedNotificationsInternally = !props.onDismissNotification;\n\n  // Timestamp for when this comopnent is first mounted.\n  // Never updated through the lifecycle of this component.\n  const mountTimestamp = useRef(new Date(Date.now()));\n\n  const [dismissedNotifications, setDismissedNotifications] = useState<DismissedNotification[]>([]);\n\n  // dropDismissalsForInactiveNotifications only returns a new object if `dismissedErrors` actually changes.\n  // Without this behaviour, this `useEffect` block would cause a render loop.\n  useEffect(() => {\n    trackDismissedNotificationsInternally &&\n      setDismissedNotifications(\n        dropDismissalsForInactiveNotifications(props.activeNotifications, dismissedNotifications)\n      );\n  }, [props.activeNotifications, dismissedNotifications, trackDismissedNotificationsInternally]);\n\n  const activeNotifications = notificationsToShow(\n    props.activeNotifications,\n    dismissedNotifications,\n    props.ignorePremountNotifications ? mountTimestamp.current : undefined\n  );\n\n  return (\n    <Stack\n      data-ui-id=\"notifications-stack\"\n      style={{\n        width: 'fit-content'\n      }}\n    >\n      {activeNotifications.map((notification, index) => {\n        if (index < maxNotificationsToShow) {\n          return (\n            <div key={index} style={{ marginBottom: `${index === maxNotificationsToShow - 1 ? 0 : '0.25rem'}` }}>\n              <Notification\n                notificationStrings={strings ? strings[notification.type] : undefined}\n                notificationIconProps={NotificationIconProps(notification.type)}\n                onClickPrimaryButton={() => notification.onClickPrimaryButton?.()}\n                onClickSecondaryButton={() => notification.onClickSecondaryButton?.()}\n                onDismiss={() => {\n                  trackDismissedNotificationsInternally\n                    ? setDismissedNotifications(dismissNotification(dismissedNotifications, notification))\n                    : props.onDismissNotification?.(notification);\n                  notification.onDismiss && notification.onDismiss();\n                }}\n                showStackedEffect={\n                  index === maxNotificationsToShow - 1 && activeNotifications.length > maxNotificationsToShow\n                }\n                autoDismiss={notification.autoDismiss}\n              />\n            </div>\n          );\n        } else {\n          return <></>;\n        }\n      })}\n    </Stack>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/ParticipantItem.js

@@ -37,31 +37,20 @@ export const ParticipantItem = (props) => {
         showOverflowTooltip: showParticipantOverflowTooltip,
         showUnknownPersonaCoin: !me && (!(displayName === null || displayName === void 0 ? void 0 : displayName.trim()) || displayName === strings.displayNamePlaceholder)
     };
-    const avatar = onRenderAvatar ? onRenderAvatar(userId !== null && userId !== void 0 ? userId : '', avatarOptions) : React.createElement(Persona, Object.assign({ className: mergeStyles({
+    const avatar = onRenderAvatar ? (onRenderAvatar(userId !== null && userId !== void 0 ? userId : '', avatarOptions)) : (React.createElement(Persona, Object.assign({ className: mergeStyles({
             // Prevents persona text from being vertically truncated if a global line height is less than 1.15.
             lineHeight: '1.15rem'
-        }, styles === null || styles === void 0 ? void 0 : styles.avatar) }, avatarOptions));
-    const meTextStyle = useMemo(() => mergeStyles(meContainerStyle, {
-        color: theme.palette.neutralSecondary
-    }, styles === null || styles === void 0 ? void 0 : styles.me), [theme.palette.neutralSecondary, styles === null || styles === void 0 ? void 0 : styles.me]);
-    const contextualMenuStyle = useMemo(() => 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 = useMemo(() => mergeStyles(iconContainerStyle, {
-        color: theme.palette.neutralSecondary,
-        marginLeft: 'auto'
-    }, styles === null || styles === void 0 ? void 0 : styles.iconContainer), [theme.palette.neutralSecondary, styles === null || styles === void 0 ? void 0 : styles.iconContainer]);
+        }, styles === null || styles === void 0 ? void 0 : styles.avatar) }, avatarOptions)));
+    const meTextStyle = useMemo(() => mergeStyles(meContainerStyle, { color: theme.palette.neutralSecondary }, styles === null || styles === void 0 ? void 0 : styles.me), [theme.palette.neutralSecondary, styles === null || styles === void 0 ? void 0 : styles.me]);
+    const contextualMenuStyle = useMemo(() => 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 = useMemo(() => mergeStyles(iconContainerStyle, { color: theme.palette.neutralSecondary, marginLeft: 'auto' }, styles === null || styles === void 0 ? void 0 : styles.iconContainer), [theme.palette.neutralSecondary, styles === null || styles === void 0 ? void 0 : styles.iconContainer]);
     const onDismissMenu = () => {
         setItemHovered(false);
         setMenuHidden(true);
     };
-    const menuButton = useMemo(() => React.createElement(Stack, { horizontal: true, horizontalAlign: "end", className: mergeStyles(menuButtonContainerStyle, {
-            color: theme.palette.neutralPrimary
-        }), title: strings.menuTitle, "data-ui-id": ids.participantItemMenuButton },
-        React.createElement(Icon, { iconName: "ParticipantItemOptionsHovered", className: mergeStyles(iconStyles, !showMenuIcon ? displayNoneStyle : {}) })), [theme.palette.neutralPrimary, strings.menuTitle, ids.participantItemMenuButton, showMenuIcon]);
-    return React.createElement("div", { ref: containerRef, role: 'menuitem', "aria-disabled": menuItems && menuItems.length > 0 || props.onClick ? false : true, "data-is-focusable": true, "data-ui-id": "participant-item", className: mergeStyles(participantItemContainerStyle({
-            clickable: !!menuItems && menuItems.length > 0
-        }), styles === null || styles === void 0 ? void 0 : styles.root), onMouseEnter: () => setItemHovered(true), onMouseLeave: () => setItemHovered(false), onClick: () => {
+    const menuButton = useMemo(() => (React.createElement(Stack, { horizontal: true, horizontalAlign: "end", className: mergeStyles(menuButtonContainerStyle, { color: theme.palette.neutralPrimary }), title: strings.menuTitle, "data-ui-id": ids.participantItemMenuButton },
+        React.createElement(Icon, { iconName: "ParticipantItemOptionsHovered", className: mergeStyles(iconStyles, !showMenuIcon ? displayNoneStyle : {}) }))), [theme.palette.neutralPrimary, strings.menuTitle, ids.participantItemMenuButton, showMenuIcon]);
+    return (React.createElement("div", { ref: containerRef, role: 'menuitem', "aria-disabled": (menuItems && menuItems.length > 0) || props.onClick ? false : true, "data-is-focusable": true, "data-ui-id": "participant-item", className: mergeStyles(participantItemContainerStyle({ clickable: !!menuItems && menuItems.length > 0 }), styles === null || styles === void 0 ? void 0 : styles.root), onMouseEnter: () => setItemHovered(true), onMouseLeave: () => setItemHovered(false), onClick: () => {
             if (!participantStateString) {
                 setItemHovered(true);
                 setMenuHidden(false);
@@ -80,16 +69,20 @@ export const ParticipantItem = (props) => {
             me && React.createElement(Text, { className: meTextStyle }, strings.isMeText),
             React.createElement(Stack, { horizontal: true, className: mergeStyles(infoContainerStyle) },
                 !showMenuIcon && onRenderIcon && onRenderIcon(props),
-                !me && participantStateString ? React.createElement(Text, { "data-ui-id": "participant-item-state-string", className: mergeStyles(participantStateStringStyles) }, participantStateString) : React.createElement(React.Fragment, null, menuItems && menuItems.length > 0 && React.createElement(React.Fragment, null,
+                !me && participantStateString ? (React.createElement(Text, { "data-ui-id": "participant-item-state-string", className: mergeStyles(participantStateStringStyles) }, participantStateString)) : (React.createElement(React.Fragment, null, menuItems && menuItems.length > 0 && (React.createElement(React.Fragment, null,
                     menuButton,
                     React.createElement(ContextualMenu, { items: menuItems, hidden: menuHidden, target: containerRef, onItemClick: onDismissMenu, onDismiss: onDismissMenu, directionalHint: DirectionalHint.bottomRightEdge, className: contextualMenuStyle, calloutProps: {
                             preventDismissOnEvent
-                        } }))))));
+                        } })))))))));
 };
 const participantStateStringTrampoline = (props, strings) => {
     /* @conditional-compile-remove(one-to-n-calling) */
     /* @conditional-compile-remove(PSTN-calls) */
-    return props.participantState === 'EarlyMedia' || props.participantState === 'Ringing' ? strings === null || strings === void 0 ? void 0 : strings.participantStateRinging : props.participantState === 'Hold' ? strings === null || strings === void 0 ? void 0 : strings.participantStateHold : undefined;
+    return props.participantState === 'EarlyMedia' || props.participantState === 'Ringing'
+        ? strings === null || strings === void 0 ? void 0 : strings.participantStateRinging
+        : props.participantState === 'Hold'
+            ? strings === null || strings === void 0 ? void 0 : strings.participantStateHold
+            : undefined;
     return undefined;
 };
 //# sourceMappingURL=ParticipantItem.js.map