@azure/communication-react 1.20.0-beta.1 → 1.21.0-alpha-202410180016

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

@@ -24,21 +24,17 @@ export const Notification = (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.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.dismissButtonAriaLabel, "aria-live": 'polite', onClick: props.onDismiss })),
-            React.createElement(Text, { className: messageTextStyle(theme) }, strings === null || strings === void 0 ? void 0 : strings.message),
+            React.createElement(Text, { className: messageTextStyle(theme), style: { marginTop: '0.25rem' } }, 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=Notification.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Notification.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/Notification.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAc,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACpH,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,yBAAyB,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AA0EvJ;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAe,EAAE;;IACpE,MAAM,OAAO,GAAG,KAAK,CAAC,mBAAmB,CAAC;IAC1C,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACvC,IAAI,KAAK,CAAC,WAAW,EAAE,CAAC;QACtB,UAAU,CAAC,GAAG,EAAE;YACd,8CAA8C;YAC9C,OAAO,CAAC,KAAK,CAAC,CAAC;QACjB,CAAC,EAAE,IAAI,CAAC,CAAC;QACT,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,SAAS,EAAE,CAAC;YACrC,OAAO,yCAAK,CAAC;QACf,CAAC;IACH,CAAC;IACD,OAAO,oBAAC,KAAK,IAAC,eAAe,EAAC,QAAQ;QAClC,oBAAC,KAAK,kBAAY,kBAAkB,EAAC,SAAS,EAAE,eAAe,CAAC,KAAK,CAAC;YACpE,oBAAC,KAAK,IAAC,UAAU,QAAC,eAAe,EAAC,eAAe;gBAC/C,oBAAC,KAAK,IAAC,UAAU;oBACf,oBAAC,IAAI,kBAAC,SAAS,EAAE,yBAAyB,EAAE,QAAQ,EAAE,MAAA,MAAA,KAAK,CAAC,qBAAqB,0CAAE,QAAQ,mCAAI,YAAY,IAAM,KAAK,CAAC,qBAAqB,EAAI;oBAChJ,oBAAC,IAAI,IAAC,SAAS,EAAE,kBAAkB,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,CAAQ,CACtD;gBAER,oBAAC,UAAU,IAAC,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,sBAAsB,eAAa,QAAQ,EAAE,OAAO,EAAE,KAAK,CAAC,SAAS,GAAI,CAC1H;YACR,oBAAC,IAAI,IAAC,SAAS,EAAE,gBAAgB,CAAC,KAAK,CAAC,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,CAAQ;YACnE,oBAAC,KAAK,IAAC,UAAU,QAAC,eAAe,EAAC,cAAc;gBAC7C,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,oBAAoB,KAAI,oBAAC,aAAa,IAAC,OAAO,EAAE,KAAK,CAAC,sBAAsB,EAAE,KAAK,EAAE;wBAC/F,SAAS,EAAE,MAAM;qBAClB,IACM,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,oBAAoB,CAChB;gBACjB,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,kBAAkB,KAAI,oBAAC,aAAa,IAAC,OAAO,EAAE,KAAK,CAAC,oBAAoB,EAAE,KAAK,EAAE;wBAC3F,SAAS,EAAE,MAAM;qBAClB,IACM,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,kBAAkB,CACd,CACZ,CACF;QACP,KAAK,CAAC,iBAAiB,IAAI,oBAAC,KAAK,IAAC,SAAS,EAAE,qBAAqB,CAAC,KAAK,CAAC,GAAU,CAC9E,CAAC;AACb,CAAC,CAAC","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 { containerStyles, hiddenContainerStyles, messageTextStyle, notificationIconClassName, titleTextClassName } 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  if (props.autoDismiss) {\n    setTimeout(() => {\n      // After 5 seconds set the show value to false\n      setShow(false);\n    }, 5000);\n    if (!show) {\n      props.onDismiss && props.onDismiss();\n      return <></>;\n    }\n  }\n  return <Stack horizontalAlign=\"center\">\n      <Stack data-ui-id=\"notification-bar\" className={containerStyles(theme)}>\n        <Stack horizontal horizontalAlign=\"space-between\">\n          <Stack horizontal>\n            <Icon className={notificationIconClassName} iconName={props.notificationIconProps?.iconName ?? 'ErrorBadge'} {...props.notificationIconProps} />\n            <Text className={titleTextClassName}>{strings?.title}</Text>\n          </Stack>\n\n          <IconButton iconProps={cancelIcon} ariaLabel={strings?.dismissButtonAriaLabel} aria-live={'polite'} onClick={props.onDismiss} />\n        </Stack>\n        <Text className={messageTextStyle(theme)}>{strings?.message}</Text>\n        <Stack horizontal horizontalAlign=\"space-evenly\">\n          {strings?.secondaryButtonLabel && <DefaultButton onClick={props.onClickSecondaryButton} style={{\n          marginTop: '1rem'\n        }}>\n              {strings?.secondaryButtonLabel}\n            </DefaultButton>}\n          {strings?.primaryButtonLabel && <PrimaryButton onClick={props.onClickPrimaryButton} style={{\n          marginTop: '1rem'\n        }}>\n              {strings?.primaryButtonLabel}\n            </PrimaryButton>}\n        </Stack>\n      </Stack>\n      {props.showStackedEffect && <Stack className={hiddenContainerStyles(theme)}></Stack>}\n    </Stack>;\n};"]}
+{"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)} style={{ marginTop: '0.25rem' }}>\n          {strings?.message}\n        </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/NotificationStack.js

@@ -31,31 +31,35 @@ export const NotificationStack = (props) => {
     // 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));
+        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: {
+    return (React.createElement(Stack, { "data-ui-id": "notifications-stack", style: {
             width: 'fit-content'
         } }, activeNotifications.map((notification, index) => {
         if (index < maxNotificationsToShow) {
             const onDismiss = () => {
                 var _a;
-                trackDismissedNotificationsInternally ? setDismissedNotifications(dismissNotification(dismissedNotifications, notification)) : (_a = props.onDismissNotification) === null || _a === void 0 ? void 0 : _a.call(props, notification);
+                trackDismissedNotificationsInternally
+                    ? setDismissedNotifications(dismissNotification(dismissedNotifications, notification))
+                    : (_a = props.onDismissNotification) === null || _a === void 0 ? void 0 : _a.call(props, notification);
                 notification.onDismiss && notification.onDismiss();
             };
+            /* @conditional-compile-remove(breakout-rooms) */
             if (notification.type === 'assignedBreakoutRoomOpenedPromptJoin') {
                 // If notification is of type assignedBreakoutRoomOpenedPromptJoin then set onClickSecondaryButton to
                 // onDismiss if it is not defined
-                notification.onClickSecondaryButton = notification.onClickSecondaryButton ? notification.onClickSecondaryButton : () => onDismiss();
+                notification.onClickSecondaryButton = notification.onClickSecondaryButton
+                    ? notification.onClickSecondaryButton
+                    : () => onDismiss();
             }
-            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: onDismiss, showStackedEffect: index === maxNotificationsToShow - 1 && activeNotifications.length > maxNotificationsToShow, autoDismiss: notification.autoDismiss }));
+            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: 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

@@ -1 +1 @@
-{"version":3,"file":"NotificationStack.js","sourceRoot":"","sources":["../../../../../preprocess-dist/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';\nimport { useLocale } from '../localization';\nimport { DismissedNotification, NotificationIconProps, dismissNotification, dropDismissalsForInactiveNotifications, notificationsToShow } 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  /**\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  /**\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   * Message shown in notification when the user will be automatically to their assigned breakout room that is opened\n   */\n  assignedBreakoutRoomOpened?: NotificationStrings;\n  /**\n   * Message shown in notification when the user is prompted to join their assigned breakout room that is opened\n   */\n  assignedBreakoutRoomOpenedPromptJoin?: NotificationStrings;\n  /**\n   * Message shown in notification when the user is assigned breakout room is changed\n   */\n  assignedBreakoutRoomChanged?: NotificationStrings;\n  /**\n   * Message shown in notification when breakout room is joined\n   */\n  breakoutRoomJoined?: NotificationStrings;\n  /**\n   * Message shown in notification when breakout room is closing soon\n   */\n  breakoutRoomClosingSoon?: 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  const localeStrings = useLocale().strings.notificationStack;\n  const strings = props.strings ?? localeStrings;\n  const maxNotificationsToShow = props.maxNotificationsToShow ?? 2;\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  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 && setDismissedNotifications(dropDismissalsForInactiveNotifications(props.activeNotifications, dismissedNotifications));\n  }, [props.activeNotifications, dismissedNotifications, trackDismissedNotificationsInternally]);\n  const activeNotifications = notificationsToShow(props.activeNotifications, dismissedNotifications, props.ignorePremountNotifications ? mountTimestamp.current : undefined);\n  return <Stack data-ui-id=\"notifications-stack\" style={{\n    width: 'fit-content'\n  }}>\n      {activeNotifications.map((notification, index) => {\n      if (index < maxNotificationsToShow) {\n        const onDismiss = (): void => {\n          trackDismissedNotificationsInternally ? setDismissedNotifications(dismissNotification(dismissedNotifications, notification)) : props.onDismissNotification?.(notification);\n          notification.onDismiss && notification.onDismiss();\n        };\n        if (notification.type === 'assignedBreakoutRoomOpenedPromptJoin') {\n          // If notification is of type assignedBreakoutRoomOpenedPromptJoin then set onClickSecondaryButton to\n          // onDismiss if it is not defined\n          notification.onClickSecondaryButton = notification.onClickSecondaryButton ? notification.onClickSecondaryButton : () => onDismiss();\n        }\n        return <div key={index} style={{\n          marginBottom: `${index === maxNotificationsToShow - 1 ? 0 : '0.25rem'}`\n        }}>\n              <Notification notificationStrings={strings ? strings[notification.type] : undefined} notificationIconProps={NotificationIconProps(notification.type)} onClickPrimaryButton={() => notification.onClickPrimaryButton?.()} onClickSecondaryButton={() => notification.onClickSecondaryButton?.()} onDismiss={onDismiss} showStackedEffect={index === maxNotificationsToShow - 1 && activeNotifications.length > maxNotificationsToShow} autoDismiss={notification.autoDismiss} />\n            </div>;\n      } else {\n        return <></>;\n      }\n    })}\n    </Stack>;\n};"]}
+{"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\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  /**\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  /* @conditional-compile-remove(breakout-rooms) */\n  /**\n   * Message shown in notification when the user will be automatically to their assigned breakout room that is opened\n   */\n  assignedBreakoutRoomOpened?: NotificationStrings;\n  /* @conditional-compile-remove(breakout-rooms) */\n  /**\n   * Message shown in notification when the user is prompted to join their assigned breakout room that is opened\n   */\n  assignedBreakoutRoomOpenedPromptJoin?: NotificationStrings;\n  /* @conditional-compile-remove(breakout-rooms) */\n  /**\n   * Message shown in notification when the user is assigned breakout room is changed\n   */\n  assignedBreakoutRoomChanged?: NotificationStrings;\n  /* @conditional-compile-remove(breakout-rooms) */\n  /**\n   * Message shown in notification when breakout room is joined\n   */\n  breakoutRoomJoined?: NotificationStrings;\n  /* @conditional-compile-remove(breakout-rooms) */\n  /**\n   * Message shown in notification when breakout room is closing soon\n   */\n  breakoutRoomClosingSoon?: 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  const localeStrings = useLocale().strings.notificationStack;\n  const strings = props.strings ?? 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          const onDismiss = (): void => {\n            trackDismissedNotificationsInternally\n              ? setDismissedNotifications(dismissNotification(dismissedNotifications, notification))\n              : props.onDismissNotification?.(notification);\n            notification.onDismiss && notification.onDismiss();\n          };\n          /* @conditional-compile-remove(breakout-rooms) */\n          if (notification.type === 'assignedBreakoutRoomOpenedPromptJoin') {\n            // If notification is of type assignedBreakoutRoomOpenedPromptJoin then set onClickSecondaryButton to\n            // onDismiss if it is not defined\n            notification.onClickSecondaryButton = notification.onClickSecondaryButton\n              ? notification.onClickSecondaryButton\n              : () => onDismiss();\n          }\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={onDismiss}\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
-        }, theme), 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-expanded": !me ? !menuHidden : undefined, "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 }, theme), styles === null || styles === void 0 ? void 0 : styles.root), onMouseEnter: () => setItemHovered(true), onMouseLeave: () => setItemHovered(false), onClick: () => {
             if (!participantStateString) {
                 setItemHovered(true);
                 setMenuHidden(false);
@@ -80,14 +69,18 @@ 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) => {
-    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

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

@@ -1 +1 @@
-{"version":3,"file":"ParticipantItem.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ParticipantItem.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ContextualMenu, DirectionalHint, Icon, IContextualMenuItem, IStyle, mergeStyles, Persona, PersonaPresence, PersonaSize, Stack, Text } from '@fluentui/react';\nimport React, { useMemo, useRef, useState } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles, OnRenderAvatarCallback } from '../types';\nimport { displayNoneStyle, iconContainerStyle, iconStyles, meContainerStyle, menuButtonContainerStyle, participantItemContainerStyle, participantStateStringStyles } from './styles/ParticipantItem.styles';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\nimport { ParticipantState } from '../types';\nimport { useId } from '@fluentui/react-hooks';\n\n/**\n * Fluent styles for {@link ParticipantItem}.\n *\n * @public\n */\nexport interface ParticipantItemStyles extends BaseCustomStyles {\n  /** Styles for the avatar. */\n  avatar?: IStyle;\n  /** Styles for the (You) string. */\n  me?: IStyle;\n  /** Styles for the container of the icon. */\n  iconContainer?: IStyle;\n  /** Styles for the menu. */\n  menu?: IStyle;\n}\n\n/**\n * Strings of {@link ParticipantItem} that can be overridden.\n *\n * @public\n */\nexport interface ParticipantItemStrings {\n  /** String shown when participant is me */\n  isMeText: string;\n  /** String shown when hovering over menu button */\n  menuTitle: string;\n  /** Label for the remove button in participant menu  */\n  removeButtonLabel: string;\n  /** Label for the sharing icon in participant state stack  */\n  sharingIconLabel: string;\n  /** Label for the muted icon in participant state stack  */\n  mutedIconLabel: string;\n  /** placeholder text for participants who does not have a display name*/\n  displayNamePlaceholder?: string;\n  /** String shown when `participantState` is `Ringing` */\n  participantStateRinging?: string;\n  /** String shown when `participantState` is `Hold` */\n  participantStateHold?: string;\n  /** String for the attendee role */\n  attendeeRole: string;\n}\n\n/**\n * Props for {@link ParticipantItem}.\n *\n * @public\n */\nexport interface ParticipantItemProps {\n  /** Unique User ID of the participant. This `userId` is available in the `onRenderAvatar` callback function */\n  userId?: string;\n  /** Name of participant. */\n  displayName?: string;\n  /** Optional indicator to show participant is the user. */\n  me?: boolean;\n  /** Optional callback returning a JSX element to override avatar. */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /** Optional array of IContextualMenuItem for contextual menu. */\n  menuItems?: IContextualMenuItem[];\n  /** Optional callback returning a JSX element rendered on the right portion of the ParticipantItem. Intended for adding icons. */\n  onRenderIcon?: (props?: ParticipantItemProps) => JSX.Element | null;\n  /** Optional PersonaPresence to show participant presence. This will not have an effect if property avatar is assigned. */\n  presence?: PersonaPresence;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <ParticipantItem styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: ParticipantItemStyles;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<ParticipantItemStrings>;\n  /**\n   * Optional callback when component is clicked\n   */\n  onClick?: (props?: ParticipantItemProps) => void;\n  /** Optional value to determine if the tooltip should be shown for participants or not */\n  showParticipantOverflowTooltip?: boolean;\n  /**\n   * Optional value to determine and display a participants connection status.\n   * For example, `Connecting`, `Ringing` etc.\n   * The actual text that is displayed is determined by the localized string\n   * corresponding to the provided participant state.\n   * For example, `strings.participantStateConnecting` will be used if `participantState` is `Connecting`.\n   */\n  participantState?: ParticipantState;\n  /**\n   * Optional aria property that prefixes the ParticipantItems aria content\n   * Takes in a unique id value of the element you would like to be read before the ParticipantItem.\n   */\n  ariaLabelledBy?: string;\n}\n\n/**\n * Component to render a calling or chat participant.\n *\n * Displays the participant's avatar, displayName and status as well as optional icons and context menu.\n *\n * @public\n */\nexport const ParticipantItem = (props: ParticipantItemProps): JSX.Element => {\n  const {\n    userId,\n    displayName,\n    onRenderAvatar,\n    menuItems,\n    onRenderIcon,\n    presence,\n    styles,\n    me,\n    onClick,\n    showParticipantOverflowTooltip\n  } = props;\n  const [itemHovered, setItemHovered] = useState<boolean>(false);\n  const [menuHidden, setMenuHidden] = useState<boolean>(true);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const theme = useTheme();\n  const localeStrings = useLocale().strings.participantItem;\n  const ids = useIdentifiers();\n  const uniqueId = useId();\n  const strings = {\n    ...localeStrings,\n    ...props.strings\n  };\n  const participantStateString = participantStateStringTrampoline(props, strings);\n  const showMenuIcon = !participantStateString && (itemHovered || !menuHidden) && menuItems && menuItems?.length > 0;\n\n  // For 'me' show empty name so avatar will get 'Person' icon, when there is no name\n  const meAvatarText = displayName?.trim() || '';\n  const avatarOptions = {\n    text: me ? meAvatarText : displayName?.trim() || strings.displayNamePlaceholder,\n    size: PersonaSize.size32,\n    presence: presence,\n    initialsTextColor: 'white',\n    showOverflowTooltip: showParticipantOverflowTooltip,\n    showUnknownPersonaCoin: !me && (!displayName?.trim() || displayName === strings.displayNamePlaceholder)\n  };\n  const avatar = onRenderAvatar ? onRenderAvatar(userId ?? '', avatarOptions) : <Persona className={mergeStyles({\n    // Prevents persona text from being vertically truncated if a global line height is less than 1.15.\n    lineHeight: '1.15rem'\n  }, styles?.avatar)} {...avatarOptions} />;\n  const meTextStyle = useMemo(() => mergeStyles(meContainerStyle, {\n    color: theme.palette.neutralSecondary\n  }, styles?.me), [theme.palette.neutralSecondary, styles?.me]);\n  const contextualMenuStyle = useMemo(() => mergeStyles({\n    background: theme.palette.neutralLighterAlt\n  }, styles?.menu), [theme.palette.neutralLighterAlt, styles?.menu]);\n  const infoContainerStyle = useMemo(() => mergeStyles(iconContainerStyle, {\n    color: theme.palette.neutralSecondary,\n    marginLeft: 'auto'\n  }, styles?.iconContainer), [theme.palette.neutralSecondary, styles?.iconContainer]);\n  const onDismissMenu = (): void => {\n    setItemHovered(false);\n    setMenuHidden(true);\n  };\n  const menuButton = useMemo(() => <Stack horizontal={true} horizontalAlign=\"end\" className={mergeStyles(menuButtonContainerStyle, {\n    color: theme.palette.neutralPrimary\n  })} title={strings.menuTitle} data-ui-id={ids.participantItemMenuButton}>\n        <Icon iconName=\"ParticipantItemOptionsHovered\" className={mergeStyles(iconStyles, !showMenuIcon ? displayNoneStyle : {})} />\n      </Stack>, [theme.palette.neutralPrimary, strings.menuTitle, ids.participantItemMenuButton, showMenuIcon]);\n  return <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({\n    clickable: !!menuItems && menuItems.length > 0\n  }, theme), styles?.root)} onMouseEnter={() => setItemHovered(true)} onMouseLeave={() => setItemHovered(false)} onClick={() => {\n    if (!participantStateString) {\n      setItemHovered(true);\n      setMenuHidden(false);\n      onClick?.(props);\n    }\n    if (!menuHidden) {\n      onDismissMenu();\n    }\n  }} tabIndex={0}>\n      <Stack horizontal className={mergeStyles({\n      flexGrow: 1,\n      maxWidth: '100%',\n      alignItems: 'center'\n    })} id={uniqueId} aria-labelledby={`${props.ariaLabelledBy} ${uniqueId}`}>\n        {avatar}\n        {me && <Text className={meTextStyle}>{strings.isMeText}</Text>}\n        <Stack horizontal className={mergeStyles(infoContainerStyle)}>\n          {!showMenuIcon && onRenderIcon && onRenderIcon(props)}\n          {/* When the participantStateString has a value, we don't show the menu  */}\n          {!me && participantStateString ? <Text data-ui-id=\"participant-item-state-string\" className={mergeStyles(participantStateStringStyles)}>\n              {participantStateString}\n            </Text> : <>\n              {menuItems && menuItems.length > 0 && <>\n                  {menuButton}\n                  <ContextualMenu items={menuItems} hidden={menuHidden} target={containerRef} onItemClick={onDismissMenu} onDismiss={onDismissMenu} directionalHint={DirectionalHint.bottomRightEdge} className={contextualMenuStyle} calloutProps={{\n              preventDismissOnEvent\n            }} />\n                </>}\n            </>}\n        </Stack>\n      </Stack>\n    </div>;\n};\nconst participantStateStringTrampoline = (props: ParticipantItemProps, strings: ParticipantItemStrings): string | undefined => {\n  return props.participantState === 'EarlyMedia' || props.participantState === 'Ringing' ? strings?.participantStateRinging : props.participantState === 'Hold' ? strings?.participantStateHold : undefined;\n  return undefined;\n};"]}
+{"version":3,"file":"ParticipantItem.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ParticipantItem.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  ContextualMenu,\n  DirectionalHint,\n  Icon,\n  IContextualMenuItem,\n  IStyle,\n  mergeStyles,\n  Persona,\n  PersonaPresence,\n  PersonaSize,\n  Stack,\n  Text\n} from '@fluentui/react';\nimport React, { useMemo, useRef, useState } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles, OnRenderAvatarCallback } from '../types';\nimport {\n  displayNoneStyle,\n  iconContainerStyle,\n  iconStyles,\n  meContainerStyle,\n  menuButtonContainerStyle,\n  participantItemContainerStyle,\n  participantStateStringStyles\n} from './styles/ParticipantItem.styles';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\nimport { ParticipantState } from '../types';\nimport { useId } from '@fluentui/react-hooks';\n\n/**\n * Fluent styles for {@link ParticipantItem}.\n *\n * @public\n */\nexport interface ParticipantItemStyles extends BaseCustomStyles {\n  /** Styles for the avatar. */\n  avatar?: IStyle;\n  /** Styles for the (You) string. */\n  me?: IStyle;\n  /** Styles for the container of the icon. */\n  iconContainer?: IStyle;\n  /** Styles for the menu. */\n  menu?: IStyle;\n}\n\n/**\n * Strings of {@link ParticipantItem} that can be overridden.\n *\n * @public\n */\nexport interface ParticipantItemStrings {\n  /** String shown when participant is me */\n  isMeText: string;\n  /** String shown when hovering over menu button */\n  menuTitle: string;\n  /** Label for the remove button in participant menu  */\n  removeButtonLabel: string;\n  /** Label for the sharing icon in participant state stack  */\n  sharingIconLabel: string;\n  /** Label for the muted icon in participant state stack  */\n  mutedIconLabel: string;\n  /** placeholder text for participants who does not have a display name*/\n  displayNamePlaceholder?: string;\n  /** String shown when `participantState` is `Ringing` */\n  participantStateRinging?: string;\n  /** String shown when `participantState` is `Hold` */\n  participantStateHold?: string;\n  /** String for the attendee role */\n  attendeeRole: string;\n}\n\n/**\n * Props for {@link ParticipantItem}.\n *\n * @public\n */\nexport interface ParticipantItemProps {\n  /** Unique User ID of the participant. This `userId` is available in the `onRenderAvatar` callback function */\n  userId?: string;\n  /** Name of participant. */\n  displayName?: string;\n  /** Optional indicator to show participant is the user. */\n  me?: boolean;\n  /** Optional callback returning a JSX element to override avatar. */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /** Optional array of IContextualMenuItem for contextual menu. */\n  menuItems?: IContextualMenuItem[];\n  /** Optional callback returning a JSX element rendered on the right portion of the ParticipantItem. Intended for adding icons. */\n  onRenderIcon?: (props?: ParticipantItemProps) => JSX.Element | null;\n  /** Optional PersonaPresence to show participant presence. This will not have an effect if property avatar is assigned. */\n  presence?: PersonaPresence;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <ParticipantItem styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: ParticipantItemStyles;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<ParticipantItemStrings>;\n  /**\n   * Optional callback when component is clicked\n   */\n  onClick?: (props?: ParticipantItemProps) => void;\n  /** Optional value to determine if the tooltip should be shown for participants or not */\n  showParticipantOverflowTooltip?: boolean;\n  /**\n   * Optional value to determine and display a participants connection status.\n   * For example, `Connecting`, `Ringing` etc.\n   * The actual text that is displayed is determined by the localized string\n   * corresponding to the provided participant state.\n   * For example, `strings.participantStateConnecting` will be used if `participantState` is `Connecting`.\n   */\n  participantState?: ParticipantState;\n  /**\n   * Optional aria property that prefixes the ParticipantItems aria content\n   * Takes in a unique id value of the element you would like to be read before the ParticipantItem.\n   */\n  ariaLabelledBy?: string;\n}\n\n/**\n * Component to render a calling or chat participant.\n *\n * Displays the participant's avatar, displayName and status as well as optional icons and context menu.\n *\n * @public\n */\nexport const ParticipantItem = (props: ParticipantItemProps): JSX.Element => {\n  const {\n    userId,\n    displayName,\n    onRenderAvatar,\n    menuItems,\n    onRenderIcon,\n    presence,\n    styles,\n    me,\n    onClick,\n    showParticipantOverflowTooltip\n  } = props;\n  const [itemHovered, setItemHovered] = useState<boolean>(false);\n  const [menuHidden, setMenuHidden] = useState<boolean>(true);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const theme = useTheme();\n  const localeStrings = useLocale().strings.participantItem;\n  const ids = useIdentifiers();\n  const uniqueId = useId();\n\n  const strings = { ...localeStrings, ...props.strings };\n  const participantStateString = participantStateStringTrampoline(props, strings);\n  const showMenuIcon = !participantStateString && (itemHovered || !menuHidden) && menuItems && menuItems?.length > 0;\n\n  // For 'me' show empty name so avatar will get 'Person' icon, when there is no name\n  const meAvatarText = displayName?.trim() || '';\n\n  const avatarOptions = {\n    text: me ? meAvatarText : displayName?.trim() || strings.displayNamePlaceholder,\n    size: PersonaSize.size32,\n    presence: presence,\n    initialsTextColor: 'white',\n    showOverflowTooltip: showParticipantOverflowTooltip,\n    showUnknownPersonaCoin: !me && (!displayName?.trim() || displayName === strings.displayNamePlaceholder)\n  };\n\n  const avatar = onRenderAvatar ? (\n    onRenderAvatar(userId ?? '', avatarOptions)\n  ) : (\n    <Persona\n      className={mergeStyles(\n        {\n          // Prevents persona text from being vertically truncated if a global line height is less than 1.15.\n          lineHeight: '1.15rem'\n        },\n        styles?.avatar\n      )}\n      {...avatarOptions}\n    />\n  );\n\n  const meTextStyle = useMemo(\n    () => mergeStyles(meContainerStyle, { color: theme.palette.neutralSecondary }, styles?.me),\n    [theme.palette.neutralSecondary, styles?.me]\n  );\n  const contextualMenuStyle = useMemo(\n    () => mergeStyles({ background: theme.palette.neutralLighterAlt }, styles?.menu),\n    [theme.palette.neutralLighterAlt, styles?.menu]\n  );\n  const infoContainerStyle = useMemo(\n    () =>\n      mergeStyles(\n        iconContainerStyle,\n        { color: theme.palette.neutralSecondary, marginLeft: 'auto' },\n        styles?.iconContainer\n      ),\n    [theme.palette.neutralSecondary, styles?.iconContainer]\n  );\n\n  const onDismissMenu = (): void => {\n    setItemHovered(false);\n    setMenuHidden(true);\n  };\n\n  const menuButton = useMemo(\n    () => (\n      <Stack\n        horizontal={true}\n        horizontalAlign=\"end\"\n        className={mergeStyles(menuButtonContainerStyle, { color: theme.palette.neutralPrimary })}\n        title={strings.menuTitle}\n        data-ui-id={ids.participantItemMenuButton}\n      >\n        <Icon\n          iconName=\"ParticipantItemOptionsHovered\"\n          className={mergeStyles(iconStyles, !showMenuIcon ? displayNoneStyle : {})}\n        />\n      </Stack>\n    ),\n    [theme.palette.neutralPrimary, strings.menuTitle, ids.participantItemMenuButton, showMenuIcon]\n  );\n\n  return (\n    <div\n      ref={containerRef}\n      role={'menuitem'}\n      aria-expanded={!me ? !menuHidden : undefined}\n      aria-disabled={(menuItems && menuItems.length > 0) || props.onClick ? false : true}\n      data-is-focusable={true}\n      data-ui-id=\"participant-item\"\n      className={mergeStyles(\n        participantItemContainerStyle({ clickable: !!menuItems && menuItems.length > 0 }, theme),\n        styles?.root\n      )}\n      onMouseEnter={() => setItemHovered(true)}\n      onMouseLeave={() => setItemHovered(false)}\n      onClick={() => {\n        if (!participantStateString) {\n          setItemHovered(true);\n          setMenuHidden(false);\n          onClick?.(props);\n        }\n        if (!menuHidden) {\n          onDismissMenu();\n        }\n      }}\n      tabIndex={0}\n    >\n      <Stack\n        horizontal\n        className={mergeStyles({\n          flexGrow: 1,\n          maxWidth: '100%',\n          alignItems: 'center'\n        })}\n        id={uniqueId}\n        aria-labelledby={`${props.ariaLabelledBy} ${uniqueId}`}\n      >\n        {avatar}\n        {me && <Text className={meTextStyle}>{strings.isMeText}</Text>}\n        <Stack horizontal className={mergeStyles(infoContainerStyle)}>\n          {!showMenuIcon && onRenderIcon && onRenderIcon(props)}\n          {/* When the participantStateString has a value, we don't show the menu  */}\n          {!me && participantStateString ? (\n            <Text data-ui-id=\"participant-item-state-string\" className={mergeStyles(participantStateStringStyles)}>\n              {participantStateString}\n            </Text>\n          ) : (\n            <>\n              {menuItems && menuItems.length > 0 && (\n                <>\n                  {menuButton}\n                  <ContextualMenu\n                    items={menuItems}\n                    hidden={menuHidden}\n                    target={containerRef}\n                    onItemClick={onDismissMenu}\n                    onDismiss={onDismissMenu}\n                    directionalHint={DirectionalHint.bottomRightEdge}\n                    className={contextualMenuStyle}\n                    calloutProps={{\n                      preventDismissOnEvent\n                    }}\n                  />\n                </>\n              )}\n            </>\n          )}\n        </Stack>\n      </Stack>\n    </div>\n  );\n};\n\nconst participantStateStringTrampoline = (\n  props: ParticipantItemProps,\n  strings: ParticipantItemStrings\n): string | undefined => {\n  return props.participantState === 'EarlyMedia' || props.participantState === 'Ringing'\n    ? strings?.participantStateRinging\n    : props.participantState === 'Hold'\n      ? strings?.participantStateHold\n      : undefined;\n\n  return undefined;\n};\n"]}

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

@@ -19,43 +19,37 @@ const onRenderParticipantDefault = (participant, strings, myUserId, onRenderAvat
     const menuItems = createParticipantMenuItems && createParticipantMenuItems(participant);
     const formatDisplayName = (displayName) => {
         if (displayName && strings.attendeeRole) {
-            return _formatString(displayName, {
-                AttendeeRole: strings.attendeeRole
-            });
+            return _formatString(displayName, { AttendeeRole: strings.attendeeRole });
         }
         return displayName;
     };
     const displayName = formatDisplayName(participant.displayName);
     const callingPalette = theme.callingPalette;
     const isPinned = pinnedParticipants && (pinnedParticipants === null || pinnedParticipants === void 0 ? void 0 : pinnedParticipants.includes(participant.userId));
-    const onRenderIcon = (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.isScreenSharing) || (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.isMuted) || (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.raisedHand) || isPinned ? () => {
-        var _a;
-        return React.createElement(Stack, { horizontal: true, tokens: {
-                childrenGap: '0.5rem'
-            } },
-            callingParticipant.raisedHand && React.createElement(Stack, { horizontal: true, tokens: {
-                    childrenGap: '0.2rem'
-                }, style: {
-                    alignItems: 'center',
-                    padding: '0.1rem 0.2rem',
-                    backgroundColor: theme === null || theme === void 0 ? void 0 : theme.palette.neutralLighter,
-                    borderRadius: '0.3rem'
-                } },
-                callingParticipant.raisedHand.raisedHandOrderPosition && React.createElement(Stack.Item, null,
-                    React.createElement(Text, null, (_a = callingParticipant.raisedHand) === null || _a === void 0 ? void 0 : _a.raisedHandOrderPosition)),
-                React.createElement(Stack.Item, null,
-                    React.createElement(RaisedHandIcon, null))),
-            callingParticipant.isScreenSharing && React.createElement(Icon, { iconName: "ParticipantItemScreenShareStart", className: iconStyles, ariaLabel: strings.sharingIconLabel }),
-            callingParticipant.isMuted && React.createElement(Icon, { iconName: "ParticipantItemMicOff", className: iconStyles, ariaLabel: strings.mutedIconLabel }),
-            callingParticipant.spotlight && React.createElement(Icon, { iconName: "ParticipantItemSpotlighted", className: iconStyles }),
-            isPinned && React.createElement(Icon, { iconName: "ParticipantItemPinned", className: iconStyles }));
-    } : () => null;
-    const onRenderAvatarWithRaiseHand = (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.raisedHand) && onRenderAvatar ? (userId, options, defaultOnRender) => onRenderAvatar(userId, Object.assign(Object.assign({}, options), { styles: {
-            root: {
-                border: callingPalette.raiseHandGold
-            }
-        } }), defaultOnRender) : onRenderAvatar;
-    return React.createElement(ParticipantItem, { styles: styles, key: participant.userId, userId: participant.userId, displayName: displayName, me: myUserId ? participant.userId === myUserId : false, menuItems: menuItems, presence: presence, onRenderIcon: onRenderIcon, onRenderAvatar: onRenderAvatarWithRaiseHand, onClick: onParticipantClick ? () => onParticipantClick === null || onParticipantClick === void 0 ? void 0 : onParticipantClick(participant) : undefined, showParticipantOverflowTooltip: showParticipantOverflowTooltip, participantState: callingParticipant.state, ariaLabelledBy: participantAriaLabelledBy });
+    const onRenderIcon = (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.isScreenSharing) || (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.isMuted) || (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.raisedHand) || isPinned
+        ? () => {
+            var _a;
+            return (React.createElement(Stack, { horizontal: true, tokens: { childrenGap: '0.5rem' } },
+                callingParticipant.raisedHand && (React.createElement(Stack, { horizontal: true, tokens: { childrenGap: '0.2rem' }, style: {
+                        alignItems: 'center',
+                        padding: '0.1rem 0.2rem',
+                        backgroundColor: theme === null || theme === void 0 ? void 0 : theme.palette.neutralLighter,
+                        borderRadius: '0.3rem'
+                    } },
+                    callingParticipant.raisedHand.raisedHandOrderPosition && (React.createElement(Stack.Item, null,
+                        React.createElement(Text, null, (_a = callingParticipant.raisedHand) === null || _a === void 0 ? void 0 : _a.raisedHandOrderPosition))),
+                    React.createElement(Stack.Item, null,
+                        React.createElement(RaisedHandIcon, null)))),
+                callingParticipant.isScreenSharing && (React.createElement(Icon, { iconName: "ParticipantItemScreenShareStart", className: iconStyles, ariaLabel: strings.sharingIconLabel })),
+                callingParticipant.isMuted && (React.createElement(Icon, { iconName: "ParticipantItemMicOff", className: iconStyles, ariaLabel: strings.mutedIconLabel })),
+                callingParticipant.spotlight && React.createElement(Icon, { iconName: "ParticipantItemSpotlighted", className: iconStyles }),
+                isPinned && React.createElement(Icon, { iconName: "ParticipantItemPinned", className: iconStyles })));
+        }
+        : () => null;
+    const onRenderAvatarWithRaiseHand = (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.raisedHand) && onRenderAvatar
+        ? (userId, options, defaultOnRender) => onRenderAvatar(userId, Object.assign(Object.assign({}, options), { styles: { root: { border: callingPalette.raiseHandGold } } }), defaultOnRender)
+        : onRenderAvatar;
+    return (React.createElement(ParticipantItem, { styles: styles, key: participant.userId, userId: participant.userId, displayName: displayName, me: myUserId ? participant.userId === myUserId : false, menuItems: menuItems, presence: presence, onRenderIcon: onRenderIcon, onRenderAvatar: onRenderAvatarWithRaiseHand, onClick: onParticipantClick ? () => onParticipantClick === null || onParticipantClick === void 0 ? void 0 : onParticipantClick(participant) : undefined, showParticipantOverflowTooltip: showParticipantOverflowTooltip, participantState: callingParticipant.state, ariaLabelledBy: participantAriaLabelledBy }));
 };
 /**
  * Sort participants by raised hand order position
@@ -87,7 +81,7 @@ const getParticipantsForDefaultRender = (participants, excludeMe, myUserId) => {
     if (!excludeMe || !myUserId) {
         return [...participants];
     }
-    const userIndex = participants.map(p => p.userId).indexOf(myUserId);
+    const userIndex = participants.map((p) => p.userId).indexOf(myUserId);
     if (userIndex === -1) {
         return [...participants];
     }
@@ -104,10 +98,15 @@ const getParticipantsForDefaultRender = (participants, excludeMe, myUserId) => {
  */
 export const ParticipantList = (props) => {
     var _a, _b, _c, _d, _e;
-    const { excludeMe = false, myUserId, participants, onRemoveParticipant, onRenderAvatar, onRenderParticipant, onFetchParticipantMenuItems, showParticipantOverflowTooltip, totalParticipantCount, strings, participantAriaLabelledBy, pinnedParticipants } = props;
+    const { excludeMe = false, myUserId, participants, onRemoveParticipant, onRenderAvatar, onRenderParticipant, onFetchParticipantMenuItems, showParticipantOverflowTooltip, 
+    /* @conditional-compile-remove(total-participant-count) */
+    totalParticipantCount, 
+    /* @conditional-compile-remove(total-participant-count) */
+    strings, participantAriaLabelledBy, pinnedParticipants } = props;
     const theme = useTheme();
     const ids = useIdentifiers();
     const participantItemStrings = useLocale().strings.participantItem;
+    /* @conditional-compile-remove(total-participant-count) */
     const participantListStrings = useLocale().strings.ParticipantList;
     const displayedParticipants = useMemo(() => {
         return onRenderParticipant ? participants : getParticipantsForDefaultRender(participants, excludeMe, myUserId);
@@ -127,11 +126,7 @@ export const ParticipantList = (props) => {
                 },
                 iconProps: {
                     iconName: 'ContextMenuRemoveParticipant',
-                    styles: {
-                        root: {
-                            lineHeight: 0
-                        }
-                    }
+                    styles: { root: { lineHeight: 0 } }
                 },
                 'data-ui-id': ids.participantListRemoveParticipantButton
             });
@@ -140,16 +135,25 @@ export const ParticipantList = (props) => {
             menuItems = onFetchParticipantMenuItems(participant.userId, myUserId, menuItems);
         }
         return menuItems;
-    }, [ids.participantListRemoveParticipantButton, myUserId, onFetchParticipantMenuItems, onRemoveParticipant, (_b = (_a = props.styles) === null || _a === void 0 ? void 0 : _a.participantItemStyles) === null || _b === void 0 ? void 0 : _b.participantSubMenuItemsStyles, participantItemStrings.removeButtonLabel]);
+    }, [
+        ids.participantListRemoveParticipantButton,
+        myUserId,
+        onFetchParticipantMenuItems,
+        onRemoveParticipant,
+        (_b = (_a = props.styles) === null || _a === void 0 ? void 0 : _a.participantItemStyles) === null || _b === void 0 ? void 0 : _b.participantSubMenuItemsStyles,
+        participantItemStrings.removeButtonLabel
+    ]);
     const participantItemStyles = useMemo(() => { var _a; return merge(participantListItemStyle, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.participantItemStyles); }, [(_c = props.styles) === null || _c === void 0 ? void 0 : _c.participantItemStyles]);
+    /* @conditional-compile-remove(total-participant-count) */
     const overflowParticipantCountString = (_d = strings === null || strings === void 0 ? void 0 : strings.overflowParticipantCount) !== null && _d !== void 0 ? _d : participantListStrings === null || participantListStrings === void 0 ? void 0 : participantListStrings.overflowParticipantCount;
-    return React.createElement(Stack, { "data-ui-id": ids.participantList, className: mergeStyles(participantListStyle, (_e = props.styles) === null || _e === void 0 ? void 0 : _e.root), role: 'menu' },
-        displayedParticipants.map((participant) => onRenderParticipant ? onRenderParticipant(participant) : onRenderParticipantDefault(participant, participantItemStrings, myUserId, onRenderAvatar, createParticipantMenuItems, participantItemStyles, props.onParticipantClick, showParticipantOverflowTooltip, participantAriaLabelledBy, theme, pinnedParticipants)),
-        overflowParticipantCountString && totalParticipantCount && totalParticipantCount > displayedParticipants.length && React.createElement(Text, { style: {
-                fontWeight: 400,
-                margin: '0.5rem'
-            } }, _formatString(overflowParticipantCountString, {
+    return (React.createElement(Stack, { "data-ui-id": ids.participantList, className: mergeStyles(participantListStyle, (_e = props.styles) === null || _e === void 0 ? void 0 : _e.root), role: 'menu' },
+        displayedParticipants.map((participant) => onRenderParticipant
+            ? onRenderParticipant(participant)
+            : onRenderParticipantDefault(participant, participantItemStrings, myUserId, onRenderAvatar, createParticipantMenuItems, participantItemStyles, props.onParticipantClick, showParticipantOverflowTooltip, participantAriaLabelledBy, theme, pinnedParticipants)),
+        /* @conditional-compile-remove(total-participant-count) */ overflowParticipantCountString &&
+            totalParticipantCount &&
+            totalParticipantCount > displayedParticipants.length && (React.createElement(Text, { style: { fontWeight: 400, margin: '0.5rem' } }, _formatString(overflowParticipantCountString, {
             overflowCount: `${totalParticipantCount - displayedParticipants.length}`
-        })));
+        })))));
 };
 //# sourceMappingURL=ParticipantList.js.map