@azure/communication-react 1.21.0-beta.1 → 1.21.0

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

@@ -201,26 +201,6 @@ 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;
 }
 /**
  * All notifications that can be shown in the {@link NotificationStack}.

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

@@ -43,11 +43,6 @@ export const NotificationStack = (props) => {
                 trackDismissedNotificationsInternally ? setDismissedNotifications(dismissNotification(dismissedNotifications, notification)) : (_a = props.onDismissNotification) === null || _a === void 0 ? void 0 : _a.call(props, notification);
                 notification.onDismiss && notification.onDismiss();
             };
-            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'}`
                 } },

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":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAyB,qBAAqB,EAAE,mBAAmB,EAAE,sCAAsC,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AACzJ,OAAO,EAAE,YAAY,EAAuB,MAAM,gBAAgB,CAAC;AA2SnE;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;;IAC9E,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,iBAAiB,CAAC;IAC5D,MAAM,OAAO,GAAG,MAAA,KAAK,CAAC,OAAO,mCAAI,aAAa,CAAC;IAC/C,MAAM,sBAAsB,GAAG,MAAA,KAAK,CAAC,sBAAsB,mCAAI,CAAC,CAAC;IACjE,MAAM,qCAAqC,GAAG,CAAC,KAAK,CAAC,qBAAqB,CAAC;IAE3E,sDAAsD;IACtD,yDAAyD;IACzD,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;IACpD,MAAM,CAAC,sBAAsB,EAAE,yBAAyB,CAAC,GAAG,QAAQ,CAA0B,EAAE,CAAC,CAAC;IAElG,0GAA0G;IAC1G,4EAA4E;IAC5E,SAAS,CAAC,GAAG,EAAE;QACb,qCAAqC,IAAI,yBAAyB,CAAC,sCAAsC,CAAC,KAAK,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,CAAC,CAAC;IAChK,CAAC,EAAE,CAAC,KAAK,CAAC,mBAAmB,EAAE,sBAAsB,EAAE,qCAAqC,CAAC,CAAC,CAAC;IAC/F,MAAM,mBAAmB,GAAG,mBAAmB,CAAC,KAAK,CAAC,mBAAmB,EAAE,sBAAsB,EAAE,KAAK,CAAC,2BAA2B,CAAC,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAC3K,OAAO,oBAAC,KAAK,kBAAY,qBAAqB,EAAC,KAAK,EAAE;YACpD,KAAK,EAAE,aAAa;SACrB,IACI,mBAAmB,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,KAAK,EAAE,EAAE;QACjD,IAAI,KAAK,GAAG,sBAAsB,EAAE,CAAC;YACnC,MAAM,SAAS,GAAG,GAAS,EAAE;;gBAC3B,qCAAqC,CAAC,CAAC,CAAC,yBAAyB,CAAC,mBAAmB,CAAC,sBAAsB,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,MAAA,KAAK,CAAC,qBAAqB,sDAAG,YAAY,CAAC,CAAC;gBAC3K,YAAY,CAAC,SAAS,IAAI,YAAY,CAAC,SAAS,EAAE,CAAC;YACrD,CAAC,CAAC;YACF,IAAI,YAAY,CAAC,IAAI,KAAK,sCAAsC,EAAE,CAAC;gBACjE,qGAAqG;gBACrG,iCAAiC;gBACjC,YAAY,CAAC,sBAAsB,GAAG,YAAY,CAAC,sBAAsB,CAAC,CAAC,CAAC,YAAY,CAAC,sBAAsB,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,SAAS,EAAE,CAAC;YACtI,CAAC;YACD,OAAO,6BAAK,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE;oBAC7B,YAAY,EAAE,GAAG,KAAK,KAAK,sBAAsB,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE;iBACxE;gBACK,oBAAC,YAAY,IAAC,mBAAmB,EAAE,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,qBAAqB,EAAE,qBAAqB,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,oBAAoB,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,YAAY,CAAC,oBAAoB,4DAAI,CAAA,EAAA,EAAE,sBAAsB,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,YAAY,CAAC,sBAAsB,4DAAI,CAAA,EAAA,EAAE,SAAS,EAAE,SAAS,EAAE,iBAAiB,EAAE,KAAK,KAAK,sBAAsB,GAAG,CAAC,IAAI,mBAAmB,CAAC,MAAM,GAAG,sBAAsB,EAAE,WAAW,EAAE,YAAY,CAAC,WAAW,GAAI,CAC3c,CAAC;QACb,CAAC;aAAM,CAAC;YACN,OAAO,yCAAK,CAAC;QACf,CAAC;IACH,CAAC,CAAC,CACM,CAAC;AACb,CAAC,CAAC","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   * 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":["../../../../../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/**\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} />\n            </div>;\n      } else {\n        return <></>;\n      }\n    })}\n    </Stack>;\n};"]}

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

@@ -20,17 +20,6 @@ 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}.
  *
@@ -68,10 +57,6 @@ 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 */

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

@@ -103,12 +103,11 @@ const getParticipantsForDefaultRender = (participants, excludeMe, myUserId) => {
  * @public
  */
 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;
+    var _a, _b, _c, _d;
+    const { excludeMe = false, myUserId, participants, onRemoveParticipant, onRenderAvatar, onRenderParticipant, onFetchParticipantMenuItems, showParticipantOverflowTooltip, participantAriaLabelledBy, pinnedParticipants } = props;
     const theme = useTheme();
     const ids = useIdentifiers();
     const participantItemStrings = useLocale().strings.participantItem;
-    const participantListStrings = useLocale().strings.ParticipantList;
     const displayedParticipants = useMemo(() => {
         return onRenderParticipant ? participants : getParticipantsForDefaultRender(participants, excludeMe, myUserId);
     }, [participants, excludeMe, myUserId, onRenderParticipant]);
@@ -142,14 +141,6 @@ export const ParticipantList = (props) => {
         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]);
     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]);
-    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, {
-            overflowCount: `${totalParticipantCount - displayedParticipants.length}`
-        })));
+    return React.createElement(Stack, { "data-ui-id": ids.participantList, className: mergeStyles(participantListStyle, (_d = props.styles) === null || _d === void 0 ? void 0 : _d.root), role: 'menu' }, displayedParticipants.map((participant) => onRenderParticipant ? onRenderParticipant(participant) : onRenderParticipantDefault(participant, participantItemStrings, myUserId, onRenderAvatar, createParticipantMenuItems, participantItemStyles, props.onParticipantClick, showParticipantOverflowTooltip, participantAriaLabelledBy, theme, pinnedParticipants)));
 };
 //# sourceMappingURL=ParticipantList.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ParticipantList.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ParticipantList.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon, IContextualMenuItem, IContextualMenuItemStyles, merge, mergeStyles, PersonaPresence, Stack, Theme } from '@fluentui/react';\nimport { Text } from '@fluentui/react';\nimport { useTheme, CallingTheme } from '../theming';\nimport { RaisedHandIcon } from './assets/RaisedHandIcon';\nimport React, { useCallback, useMemo } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { useLocale } from '../localization';\nimport { BaseCustomStyles, CallParticipantListParticipant, OnRenderAvatarCallback, ParticipantListParticipant } from '../types';\nimport { CustomAvatarOptions } from '../types';\nimport { ParticipantItem, ParticipantItemStrings, ParticipantItemStyles } from './ParticipantItem';\nimport { iconStyles, participantListItemStyle, participantListStyle } from './styles/ParticipantList.styles';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/**\n * Styles for the {@link ParticipantList} {@link ParticipantItem}.\n *\n * @public\n */\nexport interface ParticipantListItemStyles extends ParticipantItemStyles {\n  /** Styles applied to the sub-menu of the {@link ParticipantList} {@link ParticipantItem}. */\n  participantSubMenuItemsStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Styles for the {@link ParticipantList}.\n *\n * @public\n */\nexport interface ParticipantListStyles extends BaseCustomStyles {\n  /** Styles for the {@link ParticipantList} {@link ParticipantItem}. */\n  participantItemStyles?: ParticipantListItemStyles;\n}\n/**\n * Strings for the {@link ParticipantList}.\n *\n * @beta\n */\nexport interface ParticipantListStrings {\n  /**\n   * String for rendering the count of participants not contained in the displayed participant list\n   */\n  overflowParticipantCount?: string;\n}\n\n/**\n * A callback for providing custom menu items for each participant in {@link ParticipantList}.\n *\n * @public\n */\nexport type ParticipantMenuItemsCallback = (participantUserId: string, userId?: string, defaultMenuItems?: IContextualMenuItem[]) => IContextualMenuItem[];\n\n/**\n * Props for {@link ParticipantList}.\n *\n * @public\n */\nexport type ParticipantListProps = {\n  /** Participants in user call or chat */\n  participants: ParticipantListParticipant[];\n  /** User ID of user */\n  myUserId?: string;\n  /**\n   * If set to `true`, excludes the local participant from the participant list with use of `myUserId` props (required in this case).\n   *\n   * @defaultValue `false`\n   */\n  excludeMe?: boolean;\n  /** Optional callback to render each participant. If no callback is provided, each participant will be rendered with `ParticipantItem`  */\n  onRenderParticipant?: (participant: ParticipantListParticipant) => JSX.Element | null;\n  /** Optional callback to render the avatar for each participant. This property will have no effect if `onRenderParticipant` is assigned.  */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /** Optional callback to render the context menu for each participant  */\n  onRemoveParticipant?: (userId: string) => void;\n  /** Optional callback to render custom menu items for each participant. */\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  /** Optional callback when rendered ParticipantItem is clicked */\n  onParticipantClick?: (participant?: ParticipantListParticipant) => void;\n  /** Optional callback to render a context menu to mute a participant */\n  onMuteParticipant?: (userId: string) => Promise<void>;\n  styles?: ParticipantListStyles;\n  /** Optional value to determine if the tooltip should be shown for participants or not */\n  showParticipantOverflowTooltip?: boolean;\n  /** Total number of people in the call. This number can be larger than the remote participant count. */\n  totalParticipantCount?: number;\n  /** Strings for the participant list */\n  strings?: ParticipantListStrings;\n  /** Optional aria-labelledby prop that prefixes each ParticipantItem aria-label */\n  participantAriaLabelledBy?: string;\n  /** List of pinned participants */\n  pinnedParticipants?: string[];\n};\nconst onRenderParticipantDefault = (participant: ParticipantListParticipant, strings: ParticipantItemStrings, myUserId?: string, onRenderAvatar?: OnRenderAvatarCallback, createParticipantMenuItems?: (participant: ParticipantListParticipant) => IContextualMenuItem[], styles?: ParticipantListItemStyles, onParticipantClick?: (participant?: ParticipantListParticipant) => void, showParticipantOverflowTooltip?: boolean, participantAriaLabelledBy?: string, theme?: Theme, pinnedParticipants?: string[]): JSX.Element | null => {\n  const callingParticipant = participant as CallParticipantListParticipant;\n  let presence: PersonaPresence | undefined = undefined;\n  if (callingParticipant) {\n    presence = PersonaPresence.none;\n  }\n  const menuItems = createParticipantMenuItems && createParticipantMenuItems(participant);\n  const formatDisplayName = (displayName?: string): string | undefined => {\n    if (displayName && strings.attendeeRole) {\n      return _formatString(displayName, {\n        AttendeeRole: strings.attendeeRole\n      });\n    }\n    return displayName;\n  };\n  const displayName = formatDisplayName(participant.displayName);\n  const callingPalette = (theme as unknown as CallingTheme).callingPalette;\n  const isPinned = pinnedParticipants && pinnedParticipants?.includes(participant.userId);\n  const onRenderIcon = callingParticipant?.isScreenSharing || callingParticipant?.isMuted || callingParticipant?.raisedHand || isPinned ? () => <Stack horizontal={true} tokens={{\n    childrenGap: '0.5rem'\n  }}>\n            {callingParticipant.raisedHand && <Stack horizontal={true} tokens={{\n      childrenGap: '0.2rem'\n    }} style={{\n      alignItems: 'center',\n      padding: '0.1rem 0.2rem',\n      backgroundColor: theme?.palette.neutralLighter,\n      borderRadius: '0.3rem'\n    }}>\n                {callingParticipant.raisedHand.raisedHandOrderPosition && <Stack.Item>\n                    <Text>{callingParticipant.raisedHand?.raisedHandOrderPosition}</Text>\n                  </Stack.Item>}\n                <Stack.Item>\n                  <RaisedHandIcon />\n                </Stack.Item>\n              </Stack>}\n            {callingParticipant.isScreenSharing && <Icon iconName=\"ParticipantItemScreenShareStart\" className={iconStyles} ariaLabel={strings.sharingIconLabel} />}\n            {callingParticipant.isMuted && <Icon iconName=\"ParticipantItemMicOff\" className={iconStyles} ariaLabel={strings.mutedIconLabel} />}\n            {callingParticipant.spotlight && <Icon iconName=\"ParticipantItemSpotlighted\" className={iconStyles} />}\n\n            {isPinned && <Icon iconName=\"ParticipantItemPinned\" className={iconStyles} />}\n          </Stack> : () => null;\n  const onRenderAvatarWithRaiseHand = callingParticipant?.raisedHand && onRenderAvatar ? (userId?: string, options?: CustomAvatarOptions, defaultOnRender?: (props: CustomAvatarOptions) => JSX.Element) => onRenderAvatar(userId, {\n    ...options,\n    styles: {\n      root: {\n        border: callingPalette.raiseHandGold\n      }\n    }\n  }, defaultOnRender) : onRenderAvatar;\n  return <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?.(participant) : undefined} showParticipantOverflowTooltip={showParticipantOverflowTooltip} participantState={callingParticipant.state} ariaLabelledBy={participantAriaLabelledBy} />;\n};\n\n/**\n * Sort participants by raised hand order position\n */\nconst sortParticipants = (participants: ParticipantListParticipant[]): ParticipantListParticipant[] => {\n  const isParticipantListCallParticipant = function (participant: ParticipantListParticipant): boolean {\n    return 'raisedHand' in participant;\n  };\n  participants.sort((a, b) => {\n    if (!isParticipantListCallParticipant(a) || !isParticipantListCallParticipant(b)) {\n      return 0;\n    }\n    const callA = a as CallParticipantListParticipant;\n    const callB = b as CallParticipantListParticipant;\n    if (callA.raisedHand && callB.raisedHand) {\n      return callA.raisedHand.raisedHandOrderPosition - callB.raisedHand.raisedHandOrderPosition;\n    } else if (callA.raisedHand) {\n      return -1;\n    } else if (callB.raisedHand) {\n      return 1;\n    }\n    return 0;\n  });\n  return participants;\n};\nconst getParticipantsForDefaultRender = (participants: ParticipantListParticipant[], excludeMe: boolean, myUserId: string | undefined): ParticipantListParticipant[] => {\n  if (!excludeMe || !myUserId) {\n    return [...participants];\n  }\n  const userIndex = participants.map(p => p.userId).indexOf(myUserId);\n  if (userIndex === -1) {\n    return [...participants];\n  }\n  const remoteParticipants = [...participants];\n  remoteParticipants.splice(userIndex, 1);\n  return remoteParticipants;\n};\n\n/**\n * Component to render all calling or chat participants.\n *\n * By default, each participant is rendered with {@link ParticipantItem}. See {@link ParticipantListProps.onRenderParticipant} to override.\n *\n * @public\n */\nexport const ParticipantList = (props: ParticipantListProps): JSX.Element => {\n  const {\n    excludeMe = false,\n    myUserId,\n    participants,\n    onRemoveParticipant,\n    onRenderAvatar,\n    onRenderParticipant,\n    onFetchParticipantMenuItems,\n    showParticipantOverflowTooltip,\n    totalParticipantCount,\n    strings,\n    participantAriaLabelledBy,\n    pinnedParticipants\n  } = props;\n  const theme = useTheme();\n  const ids = useIdentifiers();\n  const participantItemStrings = useLocale().strings.participantItem;\n  const participantListStrings = useLocale().strings.ParticipantList;\n  const displayedParticipants: ParticipantListParticipant[] = useMemo(() => {\n    return onRenderParticipant ? participants : getParticipantsForDefaultRender(participants, excludeMe, myUserId);\n  }, [participants, excludeMe, myUserId, onRenderParticipant]);\n  sortParticipants(displayedParticipants);\n  const createParticipantMenuItems = useCallback((participant: ParticipantListParticipant): IContextualMenuItem[] => {\n    let menuItems: IContextualMenuItem[] = [];\n    const participantIsRemovable = participant.isRemovable;\n    if (participant.userId !== myUserId && onRemoveParticipant && participantIsRemovable) {\n      menuItems.push({\n        key: 'remove',\n        text: participantItemStrings.removeButtonLabel,\n        onClick: () => onRemoveParticipant(participant.userId),\n        itemProps: {\n          styles: props.styles?.participantItemStyles?.participantSubMenuItemsStyles\n        },\n        iconProps: {\n          iconName: 'ContextMenuRemoveParticipant',\n          styles: {\n            root: {\n              lineHeight: 0\n            }\n          }\n        },\n        'data-ui-id': ids.participantListRemoveParticipantButton\n      });\n    }\n    if (onFetchParticipantMenuItems) {\n      menuItems = onFetchParticipantMenuItems(participant.userId, myUserId, menuItems);\n    }\n    return menuItems;\n  }, [ids.participantListRemoveParticipantButton, myUserId, onFetchParticipantMenuItems, onRemoveParticipant, props.styles?.participantItemStyles?.participantSubMenuItemsStyles, participantItemStrings.removeButtonLabel]);\n  const participantItemStyles = useMemo(() => merge(participantListItemStyle, props.styles?.participantItemStyles), [props.styles?.participantItemStyles]);\n  const overflowParticipantCountString = strings?.overflowParticipantCount ?? participantListStrings?.overflowParticipantCount;\n  return <Stack data-ui-id={ids.participantList} className={mergeStyles(participantListStyle, props.styles?.root)} role={'menu'}>\n      {displayedParticipants.map((participant: ParticipantListParticipant) => onRenderParticipant ? onRenderParticipant(participant) : onRenderParticipantDefault(participant, participantItemStrings, myUserId, onRenderAvatar, createParticipantMenuItems, participantItemStyles, props.onParticipantClick, showParticipantOverflowTooltip, participantAriaLabelledBy, theme, pinnedParticipants))}\n      {overflowParticipantCountString && totalParticipantCount && totalParticipantCount > displayedParticipants.length && <Text style={{\n      fontWeight: 400,\n      margin: '0.5rem'\n    }}>\n              {_formatString(overflowParticipantCountString, {\n        overflowCount: `${totalParticipantCount - displayedParticipants.length}`\n      })}\n            </Text>}\n    </Stack>;\n};"]}
+{"version":3,"file":"ParticipantList.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ParticipantList.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon, IContextualMenuItem, IContextualMenuItemStyles, merge, mergeStyles, PersonaPresence, Stack, Theme } from '@fluentui/react';\nimport { Text } from '@fluentui/react';\nimport { useTheme, CallingTheme } from '../theming';\nimport { RaisedHandIcon } from './assets/RaisedHandIcon';\nimport React, { useCallback, useMemo } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { useLocale } from '../localization';\nimport { BaseCustomStyles, CallParticipantListParticipant, OnRenderAvatarCallback, ParticipantListParticipant } from '../types';\nimport { CustomAvatarOptions } from '../types';\nimport { ParticipantItem, ParticipantItemStrings, ParticipantItemStyles } from './ParticipantItem';\nimport { iconStyles, participantListItemStyle, participantListStyle } from './styles/ParticipantList.styles';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/**\n * Styles for the {@link ParticipantList} {@link ParticipantItem}.\n *\n * @public\n */\nexport interface ParticipantListItemStyles extends ParticipantItemStyles {\n  /** Styles applied to the sub-menu of the {@link ParticipantList} {@link ParticipantItem}. */\n  participantSubMenuItemsStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Styles for the {@link ParticipantList}.\n *\n * @public\n */\nexport interface ParticipantListStyles extends BaseCustomStyles {\n  /** Styles for the {@link ParticipantList} {@link ParticipantItem}. */\n  participantItemStyles?: ParticipantListItemStyles;\n}\n/**\n * A callback for providing custom menu items for each participant in {@link ParticipantList}.\n *\n * @public\n */\nexport type ParticipantMenuItemsCallback = (participantUserId: string, userId?: string, defaultMenuItems?: IContextualMenuItem[]) => IContextualMenuItem[];\n\n/**\n * Props for {@link ParticipantList}.\n *\n * @public\n */\nexport type ParticipantListProps = {\n  /** Participants in user call or chat */\n  participants: ParticipantListParticipant[];\n  /** User ID of user */\n  myUserId?: string;\n  /**\n   * If set to `true`, excludes the local participant from the participant list with use of `myUserId` props (required in this case).\n   *\n   * @defaultValue `false`\n   */\n  excludeMe?: boolean;\n  /** Optional callback to render each participant. If no callback is provided, each participant will be rendered with `ParticipantItem`  */\n  onRenderParticipant?: (participant: ParticipantListParticipant) => JSX.Element | null;\n  /** Optional callback to render the avatar for each participant. This property will have no effect if `onRenderParticipant` is assigned.  */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /** Optional callback to render the context menu for each participant  */\n  onRemoveParticipant?: (userId: string) => void;\n  /** Optional callback to render custom menu items for each participant. */\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  /** Optional callback when rendered ParticipantItem is clicked */\n  onParticipantClick?: (participant?: ParticipantListParticipant) => void;\n  /** Optional callback to render a context menu to mute a participant */\n  onMuteParticipant?: (userId: string) => Promise<void>;\n  styles?: ParticipantListStyles;\n  /** Optional value to determine if the tooltip should be shown for participants or not */\n  showParticipantOverflowTooltip?: boolean;\n  /** Optional aria-labelledby prop that prefixes each ParticipantItem aria-label */\n  participantAriaLabelledBy?: string;\n  /** List of pinned participants */\n  pinnedParticipants?: string[];\n};\nconst onRenderParticipantDefault = (participant: ParticipantListParticipant, strings: ParticipantItemStrings, myUserId?: string, onRenderAvatar?: OnRenderAvatarCallback, createParticipantMenuItems?: (participant: ParticipantListParticipant) => IContextualMenuItem[], styles?: ParticipantListItemStyles, onParticipantClick?: (participant?: ParticipantListParticipant) => void, showParticipantOverflowTooltip?: boolean, participantAriaLabelledBy?: string, theme?: Theme, pinnedParticipants?: string[]): JSX.Element | null => {\n  const callingParticipant = participant as CallParticipantListParticipant;\n  let presence: PersonaPresence | undefined = undefined;\n  if (callingParticipant) {\n    presence = PersonaPresence.none;\n  }\n  const menuItems = createParticipantMenuItems && createParticipantMenuItems(participant);\n  const formatDisplayName = (displayName?: string): string | undefined => {\n    if (displayName && strings.attendeeRole) {\n      return _formatString(displayName, {\n        AttendeeRole: strings.attendeeRole\n      });\n    }\n    return displayName;\n  };\n  const displayName = formatDisplayName(participant.displayName);\n  const callingPalette = (theme as unknown as CallingTheme).callingPalette;\n  const isPinned = pinnedParticipants && pinnedParticipants?.includes(participant.userId);\n  const onRenderIcon = callingParticipant?.isScreenSharing || callingParticipant?.isMuted || callingParticipant?.raisedHand || isPinned ? () => <Stack horizontal={true} tokens={{\n    childrenGap: '0.5rem'\n  }}>\n            {callingParticipant.raisedHand && <Stack horizontal={true} tokens={{\n      childrenGap: '0.2rem'\n    }} style={{\n      alignItems: 'center',\n      padding: '0.1rem 0.2rem',\n      backgroundColor: theme?.palette.neutralLighter,\n      borderRadius: '0.3rem'\n    }}>\n                {callingParticipant.raisedHand.raisedHandOrderPosition && <Stack.Item>\n                    <Text>{callingParticipant.raisedHand?.raisedHandOrderPosition}</Text>\n                  </Stack.Item>}\n                <Stack.Item>\n                  <RaisedHandIcon />\n                </Stack.Item>\n              </Stack>}\n            {callingParticipant.isScreenSharing && <Icon iconName=\"ParticipantItemScreenShareStart\" className={iconStyles} ariaLabel={strings.sharingIconLabel} />}\n            {callingParticipant.isMuted && <Icon iconName=\"ParticipantItemMicOff\" className={iconStyles} ariaLabel={strings.mutedIconLabel} />}\n            {callingParticipant.spotlight && <Icon iconName=\"ParticipantItemSpotlighted\" className={iconStyles} />}\n\n            {isPinned && <Icon iconName=\"ParticipantItemPinned\" className={iconStyles} />}\n          </Stack> : () => null;\n  const onRenderAvatarWithRaiseHand = callingParticipant?.raisedHand && onRenderAvatar ? (userId?: string, options?: CustomAvatarOptions, defaultOnRender?: (props: CustomAvatarOptions) => JSX.Element) => onRenderAvatar(userId, {\n    ...options,\n    styles: {\n      root: {\n        border: callingPalette.raiseHandGold\n      }\n    }\n  }, defaultOnRender) : onRenderAvatar;\n  return <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?.(participant) : undefined} showParticipantOverflowTooltip={showParticipantOverflowTooltip} participantState={callingParticipant.state} ariaLabelledBy={participantAriaLabelledBy} />;\n};\n\n/**\n * Sort participants by raised hand order position\n */\nconst sortParticipants = (participants: ParticipantListParticipant[]): ParticipantListParticipant[] => {\n  const isParticipantListCallParticipant = function (participant: ParticipantListParticipant): boolean {\n    return 'raisedHand' in participant;\n  };\n  participants.sort((a, b) => {\n    if (!isParticipantListCallParticipant(a) || !isParticipantListCallParticipant(b)) {\n      return 0;\n    }\n    const callA = a as CallParticipantListParticipant;\n    const callB = b as CallParticipantListParticipant;\n    if (callA.raisedHand && callB.raisedHand) {\n      return callA.raisedHand.raisedHandOrderPosition - callB.raisedHand.raisedHandOrderPosition;\n    } else if (callA.raisedHand) {\n      return -1;\n    } else if (callB.raisedHand) {\n      return 1;\n    }\n    return 0;\n  });\n  return participants;\n};\nconst getParticipantsForDefaultRender = (participants: ParticipantListParticipant[], excludeMe: boolean, myUserId: string | undefined): ParticipantListParticipant[] => {\n  if (!excludeMe || !myUserId) {\n    return [...participants];\n  }\n  const userIndex = participants.map(p => p.userId).indexOf(myUserId);\n  if (userIndex === -1) {\n    return [...participants];\n  }\n  const remoteParticipants = [...participants];\n  remoteParticipants.splice(userIndex, 1);\n  return remoteParticipants;\n};\n\n/**\n * Component to render all calling or chat participants.\n *\n * By default, each participant is rendered with {@link ParticipantItem}. See {@link ParticipantListProps.onRenderParticipant} to override.\n *\n * @public\n */\nexport const ParticipantList = (props: ParticipantListProps): JSX.Element => {\n  const {\n    excludeMe = false,\n    myUserId,\n    participants,\n    onRemoveParticipant,\n    onRenderAvatar,\n    onRenderParticipant,\n    onFetchParticipantMenuItems,\n    showParticipantOverflowTooltip,\n    participantAriaLabelledBy,\n    pinnedParticipants\n  } = props;\n  const theme = useTheme();\n  const ids = useIdentifiers();\n  const participantItemStrings = useLocale().strings.participantItem;\n  const displayedParticipants: ParticipantListParticipant[] = useMemo(() => {\n    return onRenderParticipant ? participants : getParticipantsForDefaultRender(participants, excludeMe, myUserId);\n  }, [participants, excludeMe, myUserId, onRenderParticipant]);\n  sortParticipants(displayedParticipants);\n  const createParticipantMenuItems = useCallback((participant: ParticipantListParticipant): IContextualMenuItem[] => {\n    let menuItems: IContextualMenuItem[] = [];\n    const participantIsRemovable = participant.isRemovable;\n    if (participant.userId !== myUserId && onRemoveParticipant && participantIsRemovable) {\n      menuItems.push({\n        key: 'remove',\n        text: participantItemStrings.removeButtonLabel,\n        onClick: () => onRemoveParticipant(participant.userId),\n        itemProps: {\n          styles: props.styles?.participantItemStyles?.participantSubMenuItemsStyles\n        },\n        iconProps: {\n          iconName: 'ContextMenuRemoveParticipant',\n          styles: {\n            root: {\n              lineHeight: 0\n            }\n          }\n        },\n        'data-ui-id': ids.participantListRemoveParticipantButton\n      });\n    }\n    if (onFetchParticipantMenuItems) {\n      menuItems = onFetchParticipantMenuItems(participant.userId, myUserId, menuItems);\n    }\n    return menuItems;\n  }, [ids.participantListRemoveParticipantButton, myUserId, onFetchParticipantMenuItems, onRemoveParticipant, props.styles?.participantItemStyles?.participantSubMenuItemsStyles, participantItemStrings.removeButtonLabel]);\n  const participantItemStyles = useMemo(() => merge(participantListItemStyle, props.styles?.participantItemStyles), [props.styles?.participantItemStyles]);\n  return <Stack data-ui-id={ids.participantList} className={mergeStyles(participantListStyle, props.styles?.root)} role={'menu'}>\n      {displayedParticipants.map((participant: ParticipantListParticipant) => onRenderParticipant ? onRenderParticipant(participant) : onRenderParticipantDefault(participant, participantItemStrings, myUserId, onRenderAvatar, createParticipantMenuItems, participantItemStyles, props.onParticipantClick, showParticipantOverflowTooltip, participantAriaLabelledBy, theme, pinnedParticipants))}\n      {}\n    </Stack>;\n};"]}

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

@@ -1,6 +1,11 @@
 /// <reference types="react" />
 import { ControlBarButtonProps } from './ControlBarButton';
 import { ReactionResources } from '..';
+/**
+ * Reactions types for the Reaction button
+ * @public
+ */
+export type ReactionButtonReaction = 'like' | 'heart' | 'applause' | 'laugh' | 'surprised';
 /**
  * Props for {@link ReactionButton}.
  *
@@ -14,7 +19,7 @@ export interface ReactionButtonProps extends ControlBarButtonProps {
     /**
      * Click event to send reaction to meeting
      */
-    onReactionClick: (reaction: string) => Promise<void>;
+    onReactionClick: (reaction: ReactionButtonReaction) => Promise<void>;
     /**
      * Reaction resource locator and parameters
      */

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

@@ -1 +1 @@
-{"version":3,"file":"ReactionButton.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ReactionButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Callout, DefaultButton, FocusZone, IButton, ICalloutContentStyles, mergeStyles, Stack, TooltipHost, useTheme } from '@fluentui/react';\nimport React, { useRef, useState } from 'react';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { useLocale } from '../localization';\nimport { emojiStyles, reactionButtonCalloutStyles, reactionButtonStyles, reactionItemButtonStyles, reactionToolTipHostStyle } from './styles/ReactionButton.styles';\nimport { isDarkThemed } from '../theming/themeUtils';\nimport { ReactionResources } from '..';\nimport { getEmojiFrameCount } from './VideoGallery/utils/videoGalleryLayoutUtils';\nimport { _preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/**\n * Props for {@link ReactionButton}.\n *\n * @public\n */\nexport interface ReactionButtonProps extends ControlBarButtonProps {\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<ReactionButtonStrings>;\n  /**\n   * Click event to send reaction to meeting\n   */\n  onReactionClick: (reaction: string) => Promise<void>;\n  /**\n   * Reaction resource locator and parameters\n   */\n  reactionResources: ReactionResources;\n}\n\n/**\n * Strings of {@link ReactionButton} that can be overridden.\n *\n * @public\n */\nexport interface ReactionButtonStrings {\n  /** Label of the button. */\n  label: string;\n  /** Aria label for reaction button accessibility announcement */\n  ariaLabel: string;\n  /** Tooltip content when the button is disabled. */\n  tooltipDisabledContent?: string;\n  /** Tooltip content when the button is enabled. */\n  tooltipContent?: string;\n  /** Tooltip content of like reaction button. */\n  likeReactionTooltipContent?: string;\n  /** Tooltip content of heart reaction button. */\n  heartReactionTooltipContent?: string;\n  /** Tooltip content of clap reaction button. */\n  applauseReactionTooltipContent?: string;\n  /** Tooltip content of laugh reaction button. */\n  laughReactionTooltipContent?: string;\n  /** Tooltip content of surprised reaction button. */\n  surprisedReactionTooltipContent?: string;\n}\n\n/**\n * A button to send reactions.\n *\n * Can be used with {@link ControlBar}.\n *\n * @public\n */\nexport const ReactionButton = (props: ReactionButtonProps): JSX.Element => {\n  const localeStrings = useLocale().strings.reactionButton;\n  const strings = {\n    ...localeStrings,\n    ...props.strings\n  };\n  const theme = useTheme();\n  const styles = reactionButtonStyles(theme);\n  const onRenderIcon = (): JSX.Element => <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ReactionButtonIcon\" />;\n  const emojis = ['like', 'heart', 'applause', 'laugh', 'surprised'];\n  const emojiButtonTooltip: Map<string, string | undefined> = new Map([['like', strings.likeReactionTooltipContent], ['heart', strings.heartReactionTooltipContent], ['applause', strings.applauseReactionTooltipContent], ['laugh', strings.laughReactionTooltipContent], ['surprised', strings.surprisedReactionTooltipContent]]);\n  const emojiResource: Map<string, string | undefined> = new Map([['like', props.reactionResources.likeReaction?.url], ['heart', props.reactionResources.heartReaction?.url], ['applause', props.reactionResources.applauseReaction?.url], ['laugh', props.reactionResources.laughReaction?.url], ['surprised', props.reactionResources.surprisedReaction?.url]]);\n  const calloutStyle: Partial<ICalloutContentStyles> = {\n    root: {\n      padding: 0\n    },\n    calloutMain: {\n      padding: '0.5rem'\n    }\n  };\n  const calloutProps = {\n    styles: calloutStyle,\n    backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n  };\n  const reactionButtonCalloutRef = useRef<HTMLDivElement>(null);\n  const reactionButtonRef = useRef<IButton>(null);\n  const [calloutIsVisible, setCalloutIsVisible] = useState(false);\n  return <Stack>\n      {calloutIsVisible && <Callout data-ui-id=\"reaction-sub-menu\" isBeakVisible={false} styles={reactionButtonCalloutStyles} target={reactionButtonCalloutRef.current} onDismiss={() => {\n      reactionButtonRef.current?.focus();\n      setCalloutIsVisible(false);\n    }}>\n          <FocusZone shouldFocusOnMount style={{\n        height: '100%'\n      }}>\n            <Stack horizontal style={{\n          height: 'inherit'\n        }}>\n              {emojis.map((emoji, index) => {\n            const resourceUrl = emojiResource.get(emoji);\n            const frameCount: number = props.reactionResources !== undefined ? getEmojiFrameCount(emoji, props.reactionResources) : 0;\n            const classname = mergeStyles(emojiStyles(resourceUrl ? resourceUrl : '', frameCount));\n            return <TooltipHost key={index} data-ui-id={index} hidden={props.disableTooltip} content={emojiButtonTooltip.get(emoji)} styles={reactionToolTipHostStyle()} calloutProps={{\n              ...calloutProps\n            }}>\n                    <DefaultButton role=\"menuitem\" key={index} onClick={() => {\n                props.onReactionClick(emoji);\n                reactionButtonRef.current?.focus();\n                setCalloutIsVisible(false);\n              }} className={classname} styles={reactionItemButtonStyles} aria-label={emojiButtonTooltip.get(emoji)}></DefaultButton>\n                  </TooltipHost>;\n          })}\n            </Stack>\n          </FocusZone>\n        </Callout>}\n      <div ref={reactionButtonCalloutRef}>\n        <ControlBarButton {...props} componentRef={reactionButtonRef} className={mergeStyles(styles, props.styles)} onClick={() => setCalloutIsVisible(!calloutIsVisible)} onRenderIcon={props.onRenderIcon ?? onRenderIcon} strings={strings} split={true} labelKey={props.labelKey ?? 'reactionButtonLabel'} onRenderMenuIcon={() => <div />} disabled={props.disabled} ariaLabel={strings.ariaLabel} />\n      </div>\n    </Stack>;\n};"]}
+{"version":3,"file":"ReactionButton.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ReactionButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Callout, DefaultButton, FocusZone, IButton, ICalloutContentStyles, mergeStyles, Stack, TooltipHost, useTheme } from '@fluentui/react';\nimport React, { useRef, useState } from 'react';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { useLocale } from '../localization';\nimport { emojiStyles, reactionButtonCalloutStyles, reactionButtonStyles, reactionItemButtonStyles, reactionToolTipHostStyle } from './styles/ReactionButton.styles';\nimport { isDarkThemed } from '../theming/themeUtils';\nimport { ReactionResources } from '..';\nimport { getEmojiFrameCount } from './VideoGallery/utils/videoGalleryLayoutUtils';\nimport { _preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/**\n * Reactions types for the Reaction button\n * @public\n */\nexport type ReactionButtonReaction = 'like' | 'heart' | 'applause' | 'laugh' | 'surprised';\n\n/**\n * Props for {@link ReactionButton}.\n *\n * @public\n */\nexport interface ReactionButtonProps extends ControlBarButtonProps {\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<ReactionButtonStrings>;\n  /**\n   * Click event to send reaction to meeting\n   */\n  onReactionClick: (reaction: ReactionButtonReaction) => Promise<void>;\n  /**\n   * Reaction resource locator and parameters\n   */\n  reactionResources: ReactionResources;\n}\n\n/**\n * Strings of {@link ReactionButton} that can be overridden.\n *\n * @public\n */\nexport interface ReactionButtonStrings {\n  /** Label of the button. */\n  label: string;\n  /** Aria label for reaction button accessibility announcement */\n  ariaLabel: string;\n  /** Tooltip content when the button is disabled. */\n  tooltipDisabledContent?: string;\n  /** Tooltip content when the button is enabled. */\n  tooltipContent?: string;\n  /** Tooltip content of like reaction button. */\n  likeReactionTooltipContent?: string;\n  /** Tooltip content of heart reaction button. */\n  heartReactionTooltipContent?: string;\n  /** Tooltip content of clap reaction button. */\n  applauseReactionTooltipContent?: string;\n  /** Tooltip content of laugh reaction button. */\n  laughReactionTooltipContent?: string;\n  /** Tooltip content of surprised reaction button. */\n  surprisedReactionTooltipContent?: string;\n}\n\n/**\n * A button to send reactions.\n *\n * Can be used with {@link ControlBar}.\n *\n * @public\n */\nexport const ReactionButton = (props: ReactionButtonProps): JSX.Element => {\n  const localeStrings = useLocale().strings.reactionButton;\n  const strings = {\n    ...localeStrings,\n    ...props.strings\n  };\n  const theme = useTheme();\n  const styles = reactionButtonStyles(theme);\n  const onRenderIcon = (): JSX.Element => <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ReactionButtonIcon\" />;\n  const emojis: ReactionButtonReaction[] = ['like', 'heart', 'applause', 'laugh', 'surprised'];\n  const emojiButtonTooltip: Map<string, string | undefined> = new Map([['like', strings.likeReactionTooltipContent], ['heart', strings.heartReactionTooltipContent], ['applause', strings.applauseReactionTooltipContent], ['laugh', strings.laughReactionTooltipContent], ['surprised', strings.surprisedReactionTooltipContent]]);\n  const emojiResource: Map<string, string | undefined> = new Map([['like', props.reactionResources.likeReaction?.url], ['heart', props.reactionResources.heartReaction?.url], ['applause', props.reactionResources.applauseReaction?.url], ['laugh', props.reactionResources.laughReaction?.url], ['surprised', props.reactionResources.surprisedReaction?.url]]);\n  const calloutStyle: Partial<ICalloutContentStyles> = {\n    root: {\n      padding: 0\n    },\n    calloutMain: {\n      padding: '0.5rem'\n    }\n  };\n  const calloutProps = {\n    styles: calloutStyle,\n    backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n  };\n  const reactionButtonCalloutRef = useRef<HTMLDivElement>(null);\n  const reactionButtonRef = useRef<IButton>(null);\n  const [calloutIsVisible, setCalloutIsVisible] = useState(false);\n  return <Stack>\n      {calloutIsVisible && <Callout data-ui-id=\"reaction-sub-menu\" isBeakVisible={false} styles={reactionButtonCalloutStyles} target={reactionButtonCalloutRef.current} onDismiss={() => {\n      reactionButtonRef.current?.focus();\n      setCalloutIsVisible(false);\n    }}>\n          <FocusZone shouldFocusOnMount style={{\n        height: '100%'\n      }}>\n            <Stack horizontal style={{\n          height: 'inherit'\n        }}>\n              {emojis.map((emoji, index) => {\n            const resourceUrl = emojiResource.get(emoji);\n            const frameCount: number = props.reactionResources !== undefined ? getEmojiFrameCount(emoji, props.reactionResources) : 0;\n            const classname = mergeStyles(emojiStyles(resourceUrl ? resourceUrl : '', frameCount));\n            return <TooltipHost key={index} data-ui-id={index} hidden={props.disableTooltip} content={emojiButtonTooltip.get(emoji)} styles={reactionToolTipHostStyle()} calloutProps={{\n              ...calloutProps\n            }}>\n                    <DefaultButton role=\"menuitem\" key={index} onClick={() => {\n                props.onReactionClick(emoji);\n                reactionButtonRef.current?.focus();\n                setCalloutIsVisible(false);\n              }} className={classname} styles={reactionItemButtonStyles} aria-label={emojiButtonTooltip.get(emoji)}></DefaultButton>\n                  </TooltipHost>;\n          })}\n            </Stack>\n          </FocusZone>\n        </Callout>}\n      <div ref={reactionButtonCalloutRef}>\n        <ControlBarButton {...props} componentRef={reactionButtonRef} className={mergeStyles(styles, props.styles)} onClick={() => setCalloutIsVisible(!calloutIsVisible)} onRenderIcon={props.onRenderIcon ?? onRenderIcon} strings={strings} split={true} labelKey={props.labelKey ?? 'reactionButtonLabel'} onRenderMenuIcon={() => <div />} disabled={props.disabled} ariaLabel={strings.ariaLabel} />\n      </div>\n    </Stack>;\n};"]}

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

@@ -1,8 +1,6 @@
 import React from 'react';
 import { IStyle } from '@fluentui/react';
 import { BaseCustomStyles } from '../types';
-import { AttachmentMetadataInProgress, MessageOptions } from "../../../acs-ui-common/src";
-import { MentionLookupOptions } from './MentionPopover';
 /**
  * Fluent styles for {@link Sendbox}.
  *
@@ -38,26 +36,6 @@ export interface SendBoxStrings {
      * Aria label for send message button
      */
     sendButtonAriaLabel: string;
-    /**
-     * Error message indicating that all attachment uploads are not complete.
-     */
-    attachmentUploadsPendingError: string;
-    /**
-     * Aria label to notify user when focus is on cancel attachment upload button.
-     */
-    removeAttachment: string;
-    /**
-     * Aria label to notify user attachment uploading starts.
-     */
-    uploading: string;
-    /**
-     * Aria label to notify user attachment is uploaded.
-     */
-    uploadCompleted: string;
-    /**
-     * Aria label to notify user more attachment action menu.
-     */
-    attachmentMoreMenu: string;
 }
 /**
  * Props for {@link SendBox}.
@@ -77,12 +55,7 @@ export interface SendBoxProps {
     /**
      * Optional override behavior on send button click
      */
-    onSendMessage?: (content: string, options?: MessageOptions) => Promise<void>;
-    /**
-     * Optional props needed to lookup suggestions in the mention scenario.
-     * @beta
-     */
-    mentionLookupOptions?: MentionLookupOptions;
+    onSendMessage?: (content: string) => Promise<void>;
     /**
      * Optional callback called when user is typing
      */
@@ -119,25 +92,6 @@ export interface SendBoxProps {
      * When undefined nothing has focus on render
      */
     autoFocus?: 'sendBoxTextField';
-    /**
-     * Optional callback to render uploaded attachments in the SendBox. The sendBox will expand
-     * vertically to accommodate the uploaded attachments. Attachment uploads will
-     * be rendered below the text area in sendBox.
-     * @beta
-     */
-    onRenderAttachmentUploads?: () => JSX.Element;
-    /**
-     * Optional array of type {@link AttachmentMetadataInProgress}
-     * to render attachments being uploaded in the SendBox.
-     * @beta
-     */
-    attachments?: AttachmentMetadataInProgress[];
-    /**
-     * Optional callback to remove the attachment upload before sending by clicking on
-     * cancel icon.
-     * @beta
-     */
-    onCancelAttachmentUpload?: (attachmentId: string) => void;
 }
 /**
  * Component for typing and sending messages.

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

@@ -3,18 +3,12 @@
 import React, { useState, useMemo, useCallback } from 'react';
 import { mergeStyles, concatStyleSets, Icon, Stack } from '@fluentui/react';
 import { sendButtonStyle, sendIconStyle, sendBoxWrapperStyles, borderAndBoxShadowStyle } from './styles/SendBox.styles';
-import { useV9CustomStyles } from './styles/SendBox.styles';
 import { useTheme } from '../theming';
 import { useLocale } from '../localization';
 import { useIdentifiers } from '../identifiers';
 import { InputBoxComponent } from './InputBoxComponent';
 import { InputBoxButton } from './InputBoxButton';
-import { SendBoxErrors } from './SendBoxErrors';
-import { _AttachmentUploadCards } from './Attachment/AttachmentUploadCards';
-import { attachmentUploadCardsStyles } from './styles/SendBox.styles';
-import { isAttachmentUploadCompleted, hasIncompleteAttachmentUploads, toAttachmentMetadata } from './utils/SendBoxUtils';
 import { MAXIMUM_LENGTH_OF_MESSAGE, isMessageTooLong, sanitizeText, isSendBoxButtonDisabled } from './utils/SendBoxUtils';
-import { FluentV9ThemeProvider } from '../theming/FluentV9ThemeProvider';
 /**
  * Component for typing and sending messages.
  *
@@ -24,7 +18,7 @@ import { FluentV9ThemeProvider } from '../theming/FluentV9ThemeProvider';
  * @public
  */
 export const SendBox = (props) => {
-    const { disabled, systemMessage, supportNewline, onSendMessage, onTyping, onRenderIcon, onRenderSystemMessage, styles, autoFocus, mentionLookupOptions, attachments } = props;
+    const { disabled, systemMessage, supportNewline, onSendMessage, onTyping, onRenderIcon, onRenderSystemMessage, styles, autoFocus } = props;
     const theme = useTheme();
     const localeStrings = useLocale().strings.sendBox;
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
@@ -32,8 +26,6 @@ export const SendBox = (props) => {
     const [textValue, setTextValue] = useState('');
     const [textValueOverflow, setTextValueOverflow] = useState(false);
     const sendTextFieldRef = React.useRef(null);
-    const customV9Styles = useV9CustomStyles();
-    const [attachmentUploadsPendingError, setAttachmentUploadsPendingError] = useState(undefined);
     const sendMessageOnClick = () => {
         var _a;
         // don't send a message when disabled
@@ -41,22 +33,11 @@ export const SendBox = (props) => {
             return;
         }
         // Don't send message until all attachments have been uploaded successfully
-        setAttachmentUploadsPendingError(undefined);
-        if (hasIncompleteAttachmentUploads(attachments)) {
-            setAttachmentUploadsPendingError({
-                message: strings.attachmentUploadsPendingError,
-                timestamp: Date.now()
-            });
-            return;
-        }
         const message = textValue;
         // we don't want to send empty messages including spaces, newlines, tabs
         // Message can be empty if there is a valid attachment upload
-        if (sanitizeText(message).length > 0 || isAttachmentUploadCompleted(attachments)) {
-            onSendMessage && onSendMessage(message, {
-                attachments: toAttachmentMetadata(attachments),
-                type: 'text'
-            });
+        if (sanitizeText(message).length > 0) {
+            onSendMessage && onSendMessage(message);
             setTextValue('');
             (_a = sendTextFieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
@@ -73,11 +54,10 @@ export const SendBox = (props) => {
     const isSendBoxButtonDisabledValue = useMemo(() => {
         return isSendBoxButtonDisabled({
             hasContent: sanitizeText(textValue).length > 0,
-            hasCompletedAttachmentUploads: isAttachmentUploadCompleted(attachments),
             hasError: !!errorMessage,
             disabled: !!disabled
         });
-    }, [attachments, disabled, errorMessage, textValue]);
+    }, [disabled, errorMessage, textValue]);
     const mergedSendButtonStyle = useMemo(() => mergeStyles(sendButtonStyle, styles === null || styles === void 0 ? void 0 : styles.sendMessageIconContainer), [styles === null || styles === void 0 ? void 0 : styles.sendMessageIconContainer]);
     const mergedStyles = useMemo(() => concatStyleSets(styles), [styles]);
     const mergedSendIconStyle = useMemo(() => sendIconStyle({
@@ -87,40 +67,10 @@ export const SendBox = (props) => {
     }), [theme, isSendBoxButtonDisabledValue, styles === null || styles === void 0 ? void 0 : styles.sendMessageIcon]);
     const onRenderSendIcon = useCallback((isHover) => onRenderIcon ? onRenderIcon(isHover) : React.createElement(Icon, { iconName: isHover && textValue ? 'SendBoxSendHovered' : 'SendBoxSend', className: mergedSendIconStyle }), [mergedSendIconStyle, onRenderIcon, textValue]);
     // Ensure that errors are cleared when there are no attachments in sendBox
-    React.useEffect(() => {
-        if (!(attachments === null || attachments === void 0 ? void 0 : attachments.filter(upload => !upload.error).length)) {
-            setAttachmentUploadsPendingError(undefined);
-        }
-    }, [attachments]);
-    const sendBoxErrorsProps = useMemo(() => {
-        var _a;
-        return {
-            attachmentUploadsPendingError: attachmentUploadsPendingError,
-            attachmentProgressError: (_a = attachments === null || attachments === void 0 ? void 0 : attachments.filter(attachmentUpload => attachmentUpload.error).pop()) === null || _a === void 0 ? void 0 : _a.error
-        };
-    }, [attachments, attachmentUploadsPendingError]);
-    const onRenderAttachmentUploads = useCallback(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        if (!(attachments === null || attachments === void 0 ? void 0 : attachments.filter(upload => !upload.error).length)) {
-            return null;
-        }
-        return props.onRenderAttachmentUploads ? props.onRenderAttachmentUploads() : React.createElement(Stack, { className: attachmentUploadCardsStyles },
-            React.createElement(FluentV9ThemeProvider, { v8Theme: theme, className: customV9Styles.clearBackground },
-                React.createElement(_AttachmentUploadCards, { attachments: attachments, onCancelAttachmentUpload: props.onCancelAttachmentUpload, strings: {
-                        removeAttachment: (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.removeAttachment) !== null && _b !== void 0 ? _b : localeStrings.removeAttachment,
-                        uploading: (_d = (_c = props.strings) === null || _c === void 0 ? void 0 : _c.uploading) !== null && _d !== void 0 ? _d : localeStrings.uploading,
-                        uploadCompleted: (_f = (_e = props.strings) === null || _e === void 0 ? void 0 : _e.uploadCompleted) !== null && _f !== void 0 ? _f : localeStrings.uploadCompleted,
-                        attachmentMoreMenu: (_h = (_g = props.strings) === null || _g === void 0 ? void 0 : _g.attachmentMoreMenu) !== null && _h !== void 0 ? _h : localeStrings.attachmentMoreMenu
-                    }, disabled: disabled })));
-    }, [attachments, props, theme, customV9Styles.clearBackground, localeStrings.removeAttachment, localeStrings.uploading, localeStrings.uploadCompleted, localeStrings.attachmentMoreMenu, disabled]);
     return React.createElement(Stack, { className: mergeStyles(sendBoxWrapperStyles, {
             overflow: 'visible'
         } // This is needed for the mention popup to be visible
         ) },
-        React.createElement(SendBoxErrors, { attachmentProgressError: sendBoxErrorsProps.attachmentProgressError ? {
-                message: sendBoxErrorsProps.attachmentProgressError.message,
-                timestamp: Date.now()
-            } : undefined, attachmentUploadsPendingError: sendBoxErrorsProps.attachmentUploadsPendingError }),
         React.createElement(Stack, { className: borderAndBoxShadowStyle({
                 theme,
                 hasErrorMessage: !!errorMessage,
@@ -133,13 +83,12 @@ export const SendBox = (props) => {
                     }
                 }, onEnterKeyDown: () => {
                     sendMessageOnClick();
-                }, styles: mergedStyles, supportNewline: supportNewline, maxLength: MAXIMUM_LENGTH_OF_MESSAGE, mentionLookupOptions: mentionLookupOptions },
+                }, styles: mergedStyles, supportNewline: supportNewline, maxLength: MAXIMUM_LENGTH_OF_MESSAGE },
                 React.createElement(InputBoxButton, { onRenderIcon: onRenderSendIcon, onClick: e => {
                         if (!textValueOverflow) {
                             sendMessageOnClick();
                         }
                         e.stopPropagation();
-                    }, id: 'sendIconWrapper', className: mergedSendButtonStyle, ariaLabel: localeStrings.sendButtonAriaLabel, tooltipContent: localeStrings.sendButtonAriaLabel, disabled: isSendBoxButtonDisabledValue })),
-            onRenderAttachmentUploads()));
+                    }, id: 'sendIconWrapper', className: mergedSendButtonStyle, ariaLabel: localeStrings.sendButtonAriaLabel, tooltipContent: localeStrings.sendButtonAriaLabel, disabled: isSendBoxButtonDisabledValue }))));
 };
 //# sourceMappingURL=SendBox.js.map