@azure/communication-react 1.22.0 → 1.23.0-alpha-202412190017

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

@@ -25,29 +25,21 @@ export const Notification = (props) => {
             return React.createElement(React.Fragment, null);
         }
     }
-    return React.createElement(Stack, { horizontalAlign: "center", "aria-live": ariaLive, role: role },
+    return (React.createElement(Stack, { horizontalAlign: "center", "aria-live": ariaLive, role: role },
         React.createElement(Stack, { "data-ui-id": "notification-bar", styles: (_b = (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root) !== null && _b !== void 0 ? _b : containerStyles(theme) },
             React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between" },
                 React.createElement(Stack, { horizontal: true },
                     React.createElement(Icon, Object.assign({ styles: (_d = (_c = props.styles) === null || _c === void 0 ? void 0 : _c.icon) !== null && _d !== void 0 ? _d : notificationIconStyles(), iconName: (_f = (_e = props.notificationIconProps) === null || _e === void 0 ? void 0 : _e.iconName) !== null && _f !== void 0 ? _f : 'ErrorBadge' }, props.notificationIconProps)),
                     React.createElement(Text, { styles: (_h = (_g = props.styles) === null || _g === void 0 ? void 0 : _g.title) !== null && _h !== void 0 ? _h : titleTextStyles() }, strings === null || strings === void 0 ? void 0 : strings.title)),
-                props.onDismiss && React.createElement(IconButton, { iconProps: cancelIcon, ariaLabel: strings === null || strings === void 0 ? void 0 : strings.dismissButtonAriaLabel, "aria-live": 'polite', onClick: props.onDismiss })),
+                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("span", null,
                 React.createElement(Text, { styles: (_k = (_j = props.styles) === null || _j === void 0 ? void 0 : _j.content) !== null && _k !== void 0 ? _k : messageTextStyles(theme) },
                     " ", strings === null || strings === void 0 ? void 0 :
                     strings.message),
-                props.onClickLink && (strings === null || strings === void 0 ? void 0 : strings.linkLabel) && React.createElement(Link, { styles: (_m = (_l = props.styles) === null || _l === void 0 ? void 0 : _l.link) !== null && _m !== void 0 ? _m : notificationLinkStyles(theme), onClick: props.onClickLink }, strings === null || strings === void 0 ? void 0 : strings.linkLabel)),
+                props.onClickLink && (strings === null || strings === void 0 ? void 0 : strings.linkLabel) && (React.createElement(Link, { styles: (_m = (_l = props.styles) === null || _l === void 0 ? void 0 : _l.link) !== null && _m !== void 0 ? _m : notificationLinkStyles(theme), onClick: props.onClickLink }, strings === null || strings === void 0 ? void 0 : strings.linkLabel))),
             React.createElement(Stack, { horizontal: true, horizontalAlign: "space-evenly" },
-                (strings === null || strings === void 0 ? void 0 : strings.secondaryButtonLabel) && React.createElement(DefaultButton, { onClick: props.onClickSecondaryButton, styles: (_p = (_o = props.styles) === null || _o === void 0 ? void 0 : _o.secondaryButton) !== null && _p !== void 0 ? _p : {
-                        root: {
-                            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, styles: (_r = (_q = props.styles) === null || _q === void 0 ? void 0 : _q.primaryButton) !== null && _r !== void 0 ? _r : {
-                        root: {
-                            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, styles: (_p = (_o = props.styles) === null || _o === void 0 ? void 0 : _o.secondaryButton) !== null && _p !== void 0 ? _p : { root: { 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, styles: (_r = (_q = props.styles) === null || _q === void 0 ? void 0 : _q.primaryButton) !== null && _r !== void 0 ? _r : { root: { 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,IAAI,EAA4C,MAAM,iBAAiB,CAAC;AACpK,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAwI1K;;;;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,MAAM,EACJ,QAAQ,GAAG,WAAW,EACtB,IAAI,GAAG,OAAO,EACf,GAAG,KAAK,CAAC;IACV,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,eAAY,QAAQ,EAAE,IAAI,EAAE,IAAI;QAClE,oBAAC,KAAK,kBAAY,kBAAkB,EAAC,MAAM,EAAE,MAAA,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,mCAAI,eAAe,CAAC,KAAK,CAAC;YACvF,oBAAC,KAAK,IAAC,UAAU,QAAC,eAAe,EAAC,eAAe;gBAC/C,oBAAC,KAAK,IAAC,UAAU;oBACf,oBAAC,IAAI,kBAAC,MAAM,EAAE,MAAA,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,mCAAI,sBAAsB,EAAE,EAAE,QAAQ,EAAE,MAAA,MAAA,KAAK,CAAC,qBAAqB,0CAAE,QAAQ,mCAAI,YAAY,IAAM,KAAK,CAAC,qBAAqB,EAAI;oBAClK,oBAAC,IAAI,IAAC,MAAM,EAAE,MAAA,MAAA,KAAK,CAAC,MAAM,0CAAE,KAAK,mCAAI,eAAe,EAAE,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,CAAQ,CACzE;gBACP,KAAK,CAAC,SAAS,IAAI,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,CAC9I;YACR;gBACE,oBAAC,IAAI,IAAC,MAAM,EAAE,MAAA,MAAA,KAAK,CAAC,MAAM,0CAAE,OAAO,mCAAI,iBAAiB,CAAC,KAAK,CAAC;yBAAI,OAAO,aAAP,OAAO;oBAAP,OAAO,CAAE,OAAO,CAAQ;gBAC1F,KAAK,CAAC,WAAW,KAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,CAAA,IAAI,oBAAC,IAAI,IAAC,MAAM,EAAE,MAAA,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,mCAAI,sBAAsB,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,WAAW,IACpI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,CACd,CACJ;YACP,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,MAAM,EAAE,MAAA,MAAA,KAAK,CAAC,MAAM,0CAAE,eAAe,mCAAI;wBACjI,IAAI,EAAE;4BACJ,SAAS,EAAE,MAAM;yBAClB;qBACF,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,MAAM,EAAE,MAAA,MAAA,KAAK,CAAC,MAAM,0CAAE,aAAa,mCAAI;wBAC3H,IAAI,EAAE;4BACJ,SAAS,EAAE,MAAM;yBAClB;qBACF,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, Link, IStackStyles, IButtonStyles, IIconStyles } from '@fluentui/react';\nimport { cancelIcon } from './styles/ImageOverlay.style';\nimport { containerStyles, hiddenContainerStyles, messageTextStyles, notificationIconStyles, notificationLinkStyles, titleTextStyles } 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   * Role html property for the notification bar.\n   * @defaultValue alert\n   */\n  role?: 'alert' | 'status' | 'presentation' | 'none';\n\n  /**\n   * Aria-live property for the notification bar.\n   * @defaultValue assertive\n   */\n  ariaLive?: 'assertive' | 'off' | 'polite';\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   * Optional callback to supply users with further troubleshooting steps or more information for the notification.\n   */\n  onClickLink?: () => void;\n\n  /**\n   * Styles for the incoming call notifications.\n   */\n  styles?: NotificationStyles;\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   * Notification bar link label\n   */\n  linkLabel?: string;\n}\n\n/**\n * Styles for the notification component.\n *\n * @public\n */\nexport interface NotificationStyles {\n  /**\n   * Styles for the primary button.\n   */\n  primaryButton?: IButtonStyles;\n  /**\n   * Styles for the secondary button.\n   */\n  secondaryButton?: IButtonStyles;\n  /**\n   * Styles for the root container.\n   */\n  root?: IStackStyles;\n  /**\n   * Styles for the notification title.\n   */\n  title?: IStackStyles;\n  /**\n   * Styles for the notification icon.\n   */\n  icon?: IIconStyles;\n  /**\n   * Styles for the notification content.\n   */\n  content?: IStackStyles;\n  /**\n   * Styles for the notification hyperlink.\n   */\n  link?: IStackStyles;\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  const {\n    ariaLive = 'assertive',\n    role = 'alert'\n  } = props;\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\" aria-live={ariaLive} role={role}>\n      <Stack data-ui-id=\"notification-bar\" styles={props.styles?.root ?? containerStyles(theme)}>\n        <Stack horizontal horizontalAlign=\"space-between\">\n          <Stack horizontal>\n            <Icon styles={props.styles?.icon ?? notificationIconStyles()} iconName={props.notificationIconProps?.iconName ?? 'ErrorBadge'} {...props.notificationIconProps} />\n            <Text styles={props.styles?.title ?? titleTextStyles()}>{strings?.title}</Text>\n          </Stack>\n          {props.onDismiss && <IconButton iconProps={cancelIcon} ariaLabel={strings?.dismissButtonAriaLabel} aria-live={'polite'} onClick={props.onDismiss} />}\n        </Stack>\n        <span>\n          <Text styles={props.styles?.content ?? messageTextStyles(theme)}> {strings?.message}</Text>\n          {props.onClickLink && strings?.linkLabel && <Link styles={props.styles?.link ?? notificationLinkStyles(theme)} onClick={props.onClickLink}>\n              {strings?.linkLabel}\n            </Link>}\n        </span>\n        <Stack horizontal horizontalAlign=\"space-evenly\">\n          {strings?.secondaryButtonLabel && <DefaultButton onClick={props.onClickSecondaryButton} styles={props.styles?.secondaryButton ?? {\n          root: {\n            marginTop: '1rem'\n          }\n        }}>\n              {strings?.secondaryButtonLabel}\n            </DefaultButton>}\n          {strings?.primaryButtonLabel && <PrimaryButton onClick={props.onClickPrimaryButton} styles={props.styles?.primaryButton ?? {\n          root: {\n            marginTop: '1rem'\n          }\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 {\n  Icon,\n  IconButton,\n  PrimaryButton,\n  Stack,\n  useTheme,\n  Text,\n  IIconProps,\n  DefaultButton,\n  Link,\n  IStackStyles,\n  IButtonStyles,\n  IIconStyles\n} from '@fluentui/react';\nimport { cancelIcon } from './styles/ImageOverlay.style';\nimport {\n  containerStyles,\n  hiddenContainerStyles,\n  messageTextStyles,\n  notificationIconStyles,\n  notificationLinkStyles,\n  titleTextStyles\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   * Role html property for the notification bar.\n   * @defaultValue alert\n   */\n  role?: 'alert' | 'status' | 'presentation' | 'none';\n\n  /**\n   * Aria-live property for the notification bar.\n   * @defaultValue assertive\n   */\n  ariaLive?: 'assertive' | 'off' | 'polite';\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   * Optional callback to supply users with further troubleshooting steps or more information for the notification.\n   */\n  onClickLink?: () => void;\n\n  /**\n   * Styles for the incoming call notifications.\n   */\n  styles?: NotificationStyles;\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   * Notification bar link label\n   */\n  linkLabel?: string;\n}\n\n/**\n * Styles for the notification component.\n *\n * @public\n */\nexport interface NotificationStyles {\n  /**\n   * Styles for the primary button.\n   */\n  primaryButton?: IButtonStyles;\n  /**\n   * Styles for the secondary button.\n   */\n  secondaryButton?: IButtonStyles;\n  /**\n   * Styles for the root container.\n   */\n  root?: IStackStyles;\n  /**\n   * Styles for the notification title.\n   */\n  title?: IStackStyles;\n  /**\n   * Styles for the notification icon.\n   */\n  icon?: IIconStyles;\n  /**\n   * Styles for the notification content.\n   */\n  content?: IStackStyles;\n  /**\n   * Styles for the notification hyperlink.\n   */\n  link?: IStackStyles;\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  const { ariaLive = 'assertive', role = 'alert' } = props;\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\" aria-live={ariaLive} role={role}>\n      <Stack data-ui-id=\"notification-bar\" styles={props.styles?.root ?? containerStyles(theme)}>\n        <Stack horizontal horizontalAlign=\"space-between\">\n          <Stack horizontal>\n            <Icon\n              styles={props.styles?.icon ?? notificationIconStyles()}\n              iconName={props.notificationIconProps?.iconName ?? 'ErrorBadge'}\n              {...props.notificationIconProps}\n            />\n            <Text styles={props.styles?.title ?? titleTextStyles()}>{strings?.title}</Text>\n          </Stack>\n          {props.onDismiss && (\n            <IconButton\n              iconProps={cancelIcon}\n              ariaLabel={strings?.dismissButtonAriaLabel}\n              aria-live={'polite'}\n              onClick={props.onDismiss}\n            />\n          )}\n        </Stack>\n        <span>\n          <Text styles={props.styles?.content ?? messageTextStyles(theme)}> {strings?.message}</Text>\n          {props.onClickLink && strings?.linkLabel && (\n            <Link styles={props.styles?.link ?? notificationLinkStyles(theme)} onClick={props.onClickLink}>\n              {strings?.linkLabel}\n            </Link>\n          )}\n        </span>\n        <Stack horizontal horizontalAlign=\"space-evenly\">\n          {strings?.secondaryButtonLabel && (\n            <DefaultButton\n              onClick={props.onClickSecondaryButton}\n              styles={props.styles?.secondaryButton ?? { root: { marginTop: '1rem' } }}\n            >\n              {strings?.secondaryButtonLabel}\n            </DefaultButton>\n          )}\n          {strings?.primaryButtonLabel && (\n            <PrimaryButton\n              onClick={props.onClickPrimaryButton}\n              styles={props.styles?.primaryButton ?? { root: { marginTop: '1rem' } }}\n            >\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.d.ts

@@ -201,6 +201,32 @@ export interface NotificationStackStrings {
      * Transcription stopped but recording still going on message
      */
     transcriptionStoppedStillRecording?: NotificationStrings;
+    /**
+     * Message shown in notification when the user will be automatically to their assigned breakout room that is opened
+     */
+    assignedBreakoutRoomOpened?: NotificationStrings;
+    /**
+     * Message shown in notification when the user is prompted to join their assigned breakout room that is opened
+     */
+    assignedBreakoutRoomOpenedPromptJoin?: NotificationStrings;
+    /**
+     * Message shown in notification when the user is assigned breakout room is changed
+     */
+    assignedBreakoutRoomChanged?: NotificationStrings;
+    /**
+     * Message shown in notification when breakout room is joined
+     */
+    breakoutRoomJoined?: NotificationStrings;
+    /**
+     * Message shown in notification when breakout room is closing soon
+     */
+    breakoutRoomClosingSoon?: NotificationStrings;
+    capabilityTurnVideoOnPresent?: NotificationStrings;
+    capabilityTurnVideoOnAbsent?: NotificationStrings;
+    capabilityUnmuteMicPresent?: NotificationStrings;
+    capabilityUnmuteMicAbsent?: NotificationStrings;
+    togetherModeStarted?: NotificationStrings;
+    togetherModeEnded?: NotificationStrings;
 }
 /**
  * All notifications that can be shown in the {@link NotificationStack}.

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

@@ -31,26 +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();
             };
-            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, ariaLive: notification.ariaLive }));
+            /* @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();
+            }
+            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, ariaLive: notification.ariaLive })));
         }
         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   * 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\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   * Aria-live property for the notification.\n   * @defaultValue polite\n   */\n  ariaLive?: 'assertive' | 'off' | 'polite';\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        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} ariaLive={notification.ariaLive} />\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   * 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  /* @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  /* @conditional-compile-remove(media-access) */\n  capabilityTurnVideoOnPresent?: NotificationStrings;\n\n  /* @conditional-compile-remove(media-access) */\n  capabilityTurnVideoOnAbsent?: NotificationStrings;\n\n  /* @conditional-compile-remove(media-access) */\n  capabilityUnmuteMicPresent?: NotificationStrings;\n\n  /* @conditional-compile-remove(media-access) */\n  capabilityUnmuteMicAbsent?: NotificationStrings;\n\n  /* @conditional-compile-remove(together-mode) */\n  togetherModeStarted?: NotificationStrings;\n\n  /* @conditional-compile-remove(together-mode) */\n  togetherModeEnded?: 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   * Aria-live property for the notification.\n   * @defaultValue polite\n   */\n  ariaLive?: 'assertive' | 'off' | 'polite';\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                ariaLive={notification.ariaLive}\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

@@ -41,31 +41,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', id: participantItemId, "aria-label": (_b = (hasFlyout ? (_a = props.strings) === null || _a === void 0 ? void 0 : _a.participantItemWithMoreOptionsAriaLabel : undefined)) !== null && _b !== void 0 ? _b : (_c = props.strings) === null || _c === void 0 ? void 0 : _c.participantItemAriaLabel, "aria-labelledby": `${props.ariaLabelledBy} ${participantItemId}`, "aria-expanded": flyoutShowing, "aria-disabled": hasFlyout || props.onClick ? false : true, "aria-haspopup": hasFlyout ? true : undefined, "aria-controls": participantItemFlyoutId, "data-is-focusable": hasFlyout, "data-ui-id": "participant-item", className: mergeStyles(participantItemContainerStyle({
-            clickable: hasFlyout
-        }, 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', id: participantItemId, "aria-label": (_b = (hasFlyout ? (_a = props.strings) === null || _a === void 0 ? void 0 : _a.participantItemWithMoreOptionsAriaLabel : undefined)) !== null && _b !== void 0 ? _b : (_c = props.strings) === null || _c === void 0 ? void 0 : _c.participantItemAriaLabel, "aria-labelledby": `${props.ariaLabelledBy} ${participantItemId}`, "aria-expanded": flyoutShowing, "aria-disabled": hasFlyout || props.onClick ? false : true, "aria-haspopup": hasFlyout ? true : undefined, "aria-controls": participantItemFlyoutId, "data-is-focusable": hasFlyout, "data-ui-id": "participant-item", className: mergeStyles(participantItemContainerStyle({ clickable: hasFlyout }, theme), styles === null || styles === void 0 ? void 0 : styles.root), onMouseEnter: () => setItemHovered(true), onMouseLeave: () => setItemHovered(false), onClick: () => {
             if (!participantStateString) {
                 setItemHovered(true);
                 setMenuHidden(false);
@@ -84,14 +73,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, hasFlyout && 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, hasFlyout && (React.createElement(React.Fragment, null,
                     menuButton,
                     React.createElement(ContextualMenu, { id: participantItemFlyoutId, items: menuItems, hidden: menuHidden, target: containerRef, onItemClick: onDismissMenu, onDismiss: onDismissMenu, directionalHint: DirectionalHint.bottomRightEdge, className: contextualMenuStyle, calloutProps: {
                             preventDismissOnEvent
-                        } }))))));
+                        } })))))))));
 };
 /** @private */
 export const formatParticipantStateString = (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;
 };
 //# 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 { _formatString, _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  /** Label for the raised hand icon in participant state stack  */\n  handRaisedIconLabel?: 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  /** Aria Label applied to the base element of the `participantItem` */\n  participantItemAriaLabel?: string;\n  /** Aria Label applied to the base element of the `participantItem` when there are more options present */\n  participantItemWithMoreOptionsAriaLabel?: 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 participantItemId = useId();\n  const participantItemFlyoutId = useId();\n  const hasFlyout = !!(menuItems && menuItems?.length > 0);\n  const flyoutShowing = hasFlyout && menuHidden;\n  const strings = {\n    ...localeStrings,\n    ...props.strings\n  };\n  const participantStateString = formatParticipantStateString(props, strings);\n  const showMenuIcon = !participantStateString && (itemHovered || !menuHidden) && hasFlyout;\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'} id={participantItemId} aria-label={(hasFlyout ? props.strings?.participantItemWithMoreOptionsAriaLabel : undefined) ?? props.strings?.participantItemAriaLabel} aria-labelledby={`${props.ariaLabelledBy} ${participantItemId}`} aria-expanded={flyoutShowing} aria-disabled={hasFlyout || props.onClick ? false : true} aria-haspopup={hasFlyout ? true : undefined} aria-controls={participantItemFlyoutId} data-is-focusable={hasFlyout} data-ui-id=\"participant-item\" className={mergeStyles(participantItemContainerStyle({\n    clickable: hasFlyout\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={hasFlyout ? 0 : undefined}>\n      <Stack horizontal className={mergeStyles({\n      flexGrow: 1,\n      maxWidth: '100%',\n      alignItems: 'center'\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 ? <Text data-ui-id=\"participant-item-state-string\" className={mergeStyles(participantStateStringStyles)}>\n              {participantStateString}\n            </Text> : <>\n              {hasFlyout && <>\n                  {menuButton}\n                  <ContextualMenu id={participantItemFlyoutId} 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};\n\n/** @private */\nexport const formatParticipantStateString = (props: ParticipantItemProps, strings: ParticipantItemStrings): string | undefined => {\n  return props.participantState === 'EarlyMedia' || props.participantState === 'Ringing' ? strings?.participantStateRinging : props.participantState === 'Hold' ? strings?.participantStateHold : 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 { _formatString, _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  /** Label for the raised hand icon in participant state stack  */\n  handRaisedIconLabel?: 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  /** Aria Label applied to the base element of the `participantItem` */\n  participantItemAriaLabel?: string;\n  /** Aria Label applied to the base element of the `participantItem` when there are more options present */\n  participantItemWithMoreOptionsAriaLabel?: 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 participantItemId = useId();\n  const participantItemFlyoutId = useId();\n  const hasFlyout = !!(menuItems && menuItems?.length > 0);\n  const flyoutShowing = hasFlyout && menuHidden;\n\n  const strings = { ...localeStrings, ...props.strings };\n  const participantStateString = formatParticipantStateString(props, strings);\n\n  const showMenuIcon = !participantStateString && (itemHovered || !menuHidden) && hasFlyout;\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      id={participantItemId}\n      aria-label={\n        (hasFlyout ? props.strings?.participantItemWithMoreOptionsAriaLabel : undefined) ??\n        props.strings?.participantItemAriaLabel\n      }\n      aria-labelledby={`${props.ariaLabelledBy} ${participantItemId}`}\n      aria-expanded={flyoutShowing}\n      aria-disabled={hasFlyout || props.onClick ? false : true}\n      aria-haspopup={hasFlyout ? true : undefined}\n      aria-controls={participantItemFlyoutId}\n      data-is-focusable={hasFlyout}\n      data-ui-id=\"participant-item\"\n      className={mergeStyles(participantItemContainerStyle({ clickable: hasFlyout }, theme), styles?.root)}\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={hasFlyout ? 0 : undefined}\n    >\n      <Stack\n        horizontal\n        className={mergeStyles({\n          flexGrow: 1,\n          maxWidth: '100%',\n          alignItems: 'center'\n        })}\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              {hasFlyout && (\n                <>\n                  {menuButton}\n                  <ContextualMenu\n                    id={participantItemFlyoutId}\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\n/** @private */\nexport const formatParticipantStateString = (\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"]}

package/dist/dist-esm/react-components/src/components/ParticipantList.d.ts

@@ -20,6 +20,17 @@ export interface ParticipantListStyles extends BaseCustomStyles {
     /** Styles for the {@link ParticipantList} {@link ParticipantItem}. */
     participantItemStyles?: ParticipantListItemStyles;
 }
+/**
+ * Strings for the {@link ParticipantList}.
+ *
+ * @beta
+ */
+export interface ParticipantListStrings {
+    /**
+     * String for rendering the count of participants not contained in the displayed participant list
+     */
+    overflowParticipantCount?: string;
+}
 /**
  * A callback for providing custom menu items for each participant in {@link ParticipantList}.
  *
@@ -57,6 +68,10 @@ export type ParticipantListProps = {
     styles?: ParticipantListStyles;
     /** Optional value to determine if the tooltip should be shown for participants or not */
     showParticipantOverflowTooltip?: boolean;
+    /** Total number of people in the call. This number can be larger than the remote participant count. */
+    totalParticipantCount?: number;
+    /** Strings for the participant list */
+    strings?: ParticipantListStrings;
     /** Optional aria-labelledby prop that prefixes each ParticipantItem aria-label */
     participantAriaLabelledBy?: string;
     /** List of pinned participants */