@azure/communication-react 1.16.0-alpha-202404270012 → 1.16.0-alpha-202405030013

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CapabilitiesChangedNotificationBar.js

@@ -19,7 +19,7 @@ export const CapabilitiesChangedNotificationBar = (props) => {
     })));
 };
 const getCapabilityChangedNotificationString = (notification, strings) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     switch (notification.capabilityName) {
         case 'turnVideoOn':
             if (notification.changedReason === 'MeetingOptionOrOrganizerPolicyChanged') {
@@ -43,6 +43,18 @@ const getCapabilityChangedNotificationString = (notification, strings) => {
                 return (_f = strings === null || strings === void 0 ? void 0 : strings.shareScreen) === null || _f === void 0 ? void 0 : _f.lostDueToRoleChangeToAttendee;
             }
             break;
+        /* @conditional-compile-remove(hide-attendee-name) */
+        case 'viewAttendeeNames':
+            if (!notification.isPresent &&
+                notification.changedReason === 'MeetingOptionOrOrganizerPolicyChanged' &&
+                notification.role === 'Attendee') {
+                return (_g = strings === null || strings === void 0 ? void 0 : strings.hideAttendeeNames) === null || _g === void 0 ? void 0 : _g.hideAttendeeNameAttendee;
+            }
+            if (!notification.isPresent &&
+                notification.changedReason === 'MeetingOptionOrOrganizerPolicyChanged' &&
+                notification.role === 'Presenter') {
+                return (_h = strings === null || strings === void 0 ? void 0 : strings.hideAttendeeNames) === null || _h === void 0 ? void 0 : _h.hideAttendeeNamePresenter;
+            }
     }
     return undefined;
 };

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CapabilitiesChangedNotificationBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"CapabilitiesChangedNotificationBar.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/CapabilitiesChangedNotificationBar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\n\nimport { IIconProps, IMessageBarProps, MessageBar, MessageBarType, Stack } from '@fluentui/react';\n\nimport { CapabilitiesChangedReason, ParticipantCapabilityName, ParticipantRole } from '@azure/communication-calling';\n\nimport { useLocale } from '../../localization';\n\n/**\n * @private\n */\nexport interface CapabilitiesChangeNotificationBarProps extends IMessageBarProps {\n  capabilitiesChangedNotifications: CapabalityChangedNotification[];\n  onDismissNotification: (notification: CapabalityChangedNotification) => void;\n}\n\n/**\n * @private\n */\nexport interface CapabalityChangedNotification {\n  /**\n   * Name of capability\n   */\n  capabilityName: ParticipantCapabilityName;\n  /**\n   * Is capability now available\n   */\n  isPresent: boolean;\n\n  /**\n   * Reason capability was changed\n   */\n  changedReason?: CapabilitiesChangedReason;\n\n  /**\n   * Role of participant when capability changed\n   */\n  role?: ParticipantRole;\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 * Notification bar for capabilities changed\n * @private\n */\nexport const CapabilitiesChangedNotificationBar = (props: CapabilitiesChangeNotificationBarProps): JSX.Element => {\n  const locale = useLocale();\n\n  return (\n    <Stack data-ui-id=\"capabilities-changed-notification-bar-stack\">\n      {props.capabilitiesChangedNotifications.map((notification) => {\n        const message = getCapabilityChangedNotificationString(\n          notification,\n          locale.strings.call.capabilityChangedNotification\n        );\n        if (!message) {\n          return null;\n        }\n        const iconProps = getCustomMessageBarIconProps(notification);\n        return (\n          <MessageBar\n            key={notification.capabilityName}\n            styles={messageBarStyles}\n            messageBarType={MessageBarType.warning}\n            dismissIconProps={{ iconName: 'ErrorBarClear' }}\n            onDismiss={() => props.onDismissNotification(notification)}\n            messageBarIconProps={iconProps}\n          >\n            {message}\n          </MessageBar>\n        );\n      })}\n    </Stack>\n  );\n};\n\nconst getCapabilityChangedNotificationString = (\n  notification: CapabalityChangedNotification,\n  strings?: CapabilityChangedNotificationStrings\n): string | undefined => {\n  switch (notification.capabilityName) {\n    case 'turnVideoOn':\n      if (notification.changedReason === 'MeetingOptionOrOrganizerPolicyChanged') {\n        return notification.isPresent\n          ? strings?.turnVideoOn?.grantedDueToMeetingOption\n          : strings?.turnVideoOn?.lostDueToMeetingOption;\n      }\n      break;\n    case 'unmuteMic':\n      if (notification.changedReason === 'MeetingOptionOrOrganizerPolicyChanged') {\n        return notification.isPresent\n          ? strings?.unmuteMic?.grantedDueToMeetingOption\n          : strings?.unmuteMic?.lostDueToMeetingOption;\n      }\n      break;\n    case 'shareScreen':\n      if (notification.isPresent && notification.changedReason === 'RoleChanged' && notification.role === 'Presenter') {\n        return strings?.shareScreen?.grantedDueToRoleChangeToPresenter;\n      }\n      if (!notification.isPresent && notification.changedReason === 'RoleChanged' && notification.role === 'Attendee') {\n        return strings?.shareScreen?.lostDueToRoleChangeToAttendee;\n      }\n      break;\n  }\n  return undefined;\n};\n\nconst getCustomMessageBarIconProps = (notification: CapabalityChangedNotification): IIconProps | undefined => {\n  let iconName: string | undefined = undefined;\n  switch (notification.capabilityName) {\n    case 'turnVideoOn':\n      if (notification.isPresent) {\n        iconName = 'ControlButtonCameraOn';\n      } else {\n        iconName = 'ControlButtonCameraProhibited';\n      }\n      break;\n    case 'unmuteMic':\n      if (notification.isPresent) {\n        iconName = 'ControlButtonMicOn';\n      } else {\n        iconName = 'ControlButtonMicProhibited';\n      }\n      break;\n    default:\n      return undefined;\n  }\n  return { iconName, styles: { root: { '> *': { height: '1rem', width: '1rem' } } } };\n};\n\nconst messageBarStyles = {\n  innerText: {\n    alignSelf: 'center'\n  },\n  icon: {\n    height: 0\n  },\n  content: {\n    lineHeight: 'inherit'\n  },\n  dismissal: {\n    height: 0,\n    paddingTop: '0.8rem'\n  }\n};\n\n/**\n * Strings for capability changed notification\n * @public\n */\nexport interface CapabilityChangedNotificationStrings {\n  /**\n   * Strings for 'turnVideoOn' capability\n   */\n  turnVideoOn?: {\n    /**\n     * Notification message shown to the user when capability to turn video on is lost due to a meeting option change\n     */\n    lostDueToMeetingOption?: string;\n    /**\n     * Notification message shown to the user when capability to turn video on is granted due to a meeting option change\n     */\n    grantedDueToMeetingOption?: string;\n  };\n  /**\n   * Strings for 'unmuteMic' capability\n   */\n  unmuteMic?: {\n    /**\n     * Notification message shown to the user when capability to unmute mic is lost due to a meeting option change\n     */\n    lostDueToMeetingOption?: string;\n    /**\n     * Notification message shown to the user when capability to unmute mic is granted due to a meeting option change\n     */\n    grantedDueToMeetingOption?: string;\n  };\n  /**\n   * Strings for 'shareScreen' capability\n   */\n  shareScreen?: {\n    /**\n     * Notification message shown to the user when capability to share screen is lost due to a role change to Attendeee\n     */\n    lostDueToRoleChangeToAttendee?: string;\n    /**\n     * Notification message shown to the user when capability to share screen is granted due to a role change to Presenter\n     */\n    grantedDueToRoleChangeToPresenter?: string;\n  };\n}\n"]}
+{"version":3,"file":"CapabilitiesChangedNotificationBar.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/CapabilitiesChangedNotificationBar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\n\nimport { IIconProps, IMessageBarProps, MessageBar, MessageBarType, Stack } from '@fluentui/react';\n\nimport { CapabilitiesChangedReason, ParticipantCapabilityName, ParticipantRole } from '@azure/communication-calling';\n\nimport { useLocale } from '../../localization';\n\n/**\n * @private\n */\nexport interface CapabilitiesChangeNotificationBarProps extends IMessageBarProps {\n  capabilitiesChangedNotifications: CapabalityChangedNotification[];\n  onDismissNotification: (notification: CapabalityChangedNotification) => void;\n}\n\n/**\n * @private\n */\nexport interface CapabalityChangedNotification {\n  /**\n   * Name of capability\n   */\n  capabilityName: ParticipantCapabilityName;\n  /**\n   * Is capability now available\n   */\n  isPresent: boolean;\n\n  /**\n   * Reason capability was changed\n   */\n  changedReason?: CapabilitiesChangedReason;\n\n  /**\n   * Role of participant when capability changed\n   */\n  role?: ParticipantRole;\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 * Notification bar for capabilities changed\n * @private\n */\nexport const CapabilitiesChangedNotificationBar = (props: CapabilitiesChangeNotificationBarProps): JSX.Element => {\n  const locale = useLocale();\n\n  return (\n    <Stack data-ui-id=\"capabilities-changed-notification-bar-stack\">\n      {props.capabilitiesChangedNotifications.map((notification) => {\n        const message = getCapabilityChangedNotificationString(\n          notification,\n          locale.strings.call.capabilityChangedNotification\n        );\n        if (!message) {\n          return null;\n        }\n        const iconProps = getCustomMessageBarIconProps(notification);\n        return (\n          <MessageBar\n            key={notification.capabilityName}\n            styles={messageBarStyles}\n            messageBarType={MessageBarType.warning}\n            dismissIconProps={{ iconName: 'ErrorBarClear' }}\n            onDismiss={() => props.onDismissNotification(notification)}\n            messageBarIconProps={iconProps}\n          >\n            {message}\n          </MessageBar>\n        );\n      })}\n    </Stack>\n  );\n};\n\nconst getCapabilityChangedNotificationString = (\n  notification: CapabalityChangedNotification,\n  strings?: CapabilityChangedNotificationStrings\n): string | undefined => {\n  switch (notification.capabilityName) {\n    case 'turnVideoOn':\n      if (notification.changedReason === 'MeetingOptionOrOrganizerPolicyChanged') {\n        return notification.isPresent\n          ? strings?.turnVideoOn?.grantedDueToMeetingOption\n          : strings?.turnVideoOn?.lostDueToMeetingOption;\n      }\n      break;\n    case 'unmuteMic':\n      if (notification.changedReason === 'MeetingOptionOrOrganizerPolicyChanged') {\n        return notification.isPresent\n          ? strings?.unmuteMic?.grantedDueToMeetingOption\n          : strings?.unmuteMic?.lostDueToMeetingOption;\n      }\n      break;\n    case 'shareScreen':\n      if (notification.isPresent && notification.changedReason === 'RoleChanged' && notification.role === 'Presenter') {\n        return strings?.shareScreen?.grantedDueToRoleChangeToPresenter;\n      }\n      if (!notification.isPresent && notification.changedReason === 'RoleChanged' && notification.role === 'Attendee') {\n        return strings?.shareScreen?.lostDueToRoleChangeToAttendee;\n      }\n      break;\n    /* @conditional-compile-remove(hide-attendee-name) */\n    case 'viewAttendeeNames':\n      if (\n        !notification.isPresent &&\n        notification.changedReason === 'MeetingOptionOrOrganizerPolicyChanged' &&\n        notification.role === 'Attendee'\n      ) {\n        return strings?.hideAttendeeNames?.hideAttendeeNameAttendee;\n      }\n      if (\n        !notification.isPresent &&\n        notification.changedReason === 'MeetingOptionOrOrganizerPolicyChanged' &&\n        notification.role === 'Presenter'\n      ) {\n        return strings?.hideAttendeeNames?.hideAttendeeNamePresenter;\n      }\n  }\n  return undefined;\n};\n\nconst getCustomMessageBarIconProps = (notification: CapabalityChangedNotification): IIconProps | undefined => {\n  let iconName: string | undefined = undefined;\n  switch (notification.capabilityName) {\n    case 'turnVideoOn':\n      if (notification.isPresent) {\n        iconName = 'ControlButtonCameraOn';\n      } else {\n        iconName = 'ControlButtonCameraProhibited';\n      }\n      break;\n    case 'unmuteMic':\n      if (notification.isPresent) {\n        iconName = 'ControlButtonMicOn';\n      } else {\n        iconName = 'ControlButtonMicProhibited';\n      }\n      break;\n    default:\n      return undefined;\n  }\n  return { iconName, styles: { root: { '> *': { height: '1rem', width: '1rem' } } } };\n};\n\nconst messageBarStyles = {\n  innerText: {\n    alignSelf: 'center'\n  },\n  icon: {\n    height: 0\n  },\n  content: {\n    lineHeight: 'inherit'\n  },\n  dismissal: {\n    height: 0,\n    paddingTop: '0.8rem'\n  }\n};\n\n/**\n * Strings for capability changed notification\n * @public\n */\nexport interface CapabilityChangedNotificationStrings {\n  /**\n   * Strings for 'turnVideoOn' capability\n   */\n  turnVideoOn?: {\n    /**\n     * Notification message shown to the user when capability to turn video on is lost due to a meeting option change\n     */\n    lostDueToMeetingOption?: string;\n    /**\n     * Notification message shown to the user when capability to turn video on is granted due to a meeting option change\n     */\n    grantedDueToMeetingOption?: string;\n  };\n  /**\n   * Strings for 'unmuteMic' capability\n   */\n  unmuteMic?: {\n    /**\n     * Notification message shown to the user when capability to unmute mic is lost due to a meeting option change\n     */\n    lostDueToMeetingOption?: string;\n    /**\n     * Notification message shown to the user when capability to unmute mic is granted due to a meeting option change\n     */\n    grantedDueToMeetingOption?: string;\n  };\n  /**\n   * Strings for 'shareScreen' capability\n   */\n  shareScreen?: {\n    /**\n     * Notification message shown to the user when capability to share screen is lost due to a role change to Attendeee\n     */\n    lostDueToRoleChangeToAttendee?: string;\n    /**\n     * Notification message shown to the user when capability to share screen is granted due to a role change to Presenter\n     */\n    grantedDueToRoleChangeToPresenter?: string;\n  };\n  /* @conditional-compile-remove(hide-attendee-name) */\n  /**\n   * Strings for hidden attendee names capability\n   */\n  hideAttendeeNames?: {\n    /**\n     * Notification message shown to the user when capability to view attendee names is lost due to a meeting option change for Attendee\n     */\n    hideAttendeeNameAttendee?: string;\n    /**\n     * Notification message shown to the user when capability to view attendee names is lost due to a meeting option change for Presenter\n     */\n    hideAttendeeNamePresenter?: string;\n  };\n}\n"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/CallPage.d.ts

@@ -30,6 +30,7 @@ export interface CallPageProps {
     pinnedParticipants?: string[];
     setPinnedParticipants?: (pinnedParticipants: string[]) => void;
     compositeAudioContext?: AudioContext;
+    disableAutoShowDtmfDialer?: boolean;
 }
 /**
  * @private

package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/CallPage.js

@@ -30,7 +30,7 @@ import { Prompt } from '../components/Prompt';
  */
 export const CallPage = (props) => {
     var _a;
-    const { callInvitationURL, onFetchAvatarPersonaData, onFetchParticipantMenuItems, options, mobileView, galleryLayout = 'floatingLocalVideo', onUserSetGalleryLayoutChange, userSetOverflowGalleryPosition = 'Responsive', onSetUserSetOverflowGalleryPosition, onCloseChatPane, pinnedParticipants, setPinnedParticipants, compositeAudioContext } = props;
+    const { callInvitationURL, onFetchAvatarPersonaData, onFetchParticipantMenuItems, options, mobileView, galleryLayout = 'floatingLocalVideo', onUserSetGalleryLayoutChange, userSetOverflowGalleryPosition = 'Responsive', onSetUserSetOverflowGalleryPosition, onCloseChatPane, pinnedParticipants, setPinnedParticipants, compositeAudioContext, disableAutoShowDtmfDialer = false } = props;
     // To use useProps to get these states, we need to create another file wrapping Call,
     // It seems unnecessary in this case, so we get the updated states using this approach.
     const { callStatus } = useSelector(callStatusSelector);
@@ -43,7 +43,7 @@ export const CallPage = (props) => {
     const remoteParticipantsConnected = useSelector(getRemoteParticipantsConnectedSelector);
     const callees = useSelector(getTargetCallees);
     const renderDtmfDialerFromStart = showDtmfDialer(callees, remoteParticipantsConnected);
-    const [dtmfDialerPresent, setDtmfDialerPresent] = useState(renderDtmfDialerFromStart);
+    const [dtmfDialerPresent, setDtmfDialerPresent] = useState(renderDtmfDialerFromStart && disableAutoShowDtmfDialer);
     const strings = useLocale().strings.call;
     // Reduce the controls shown when mobile view is enabled.
     const callControlOptions = mobileView ? reduceCallControlsForMobile(options === null || options === void 0 ? void 0 : options.callControls) : options === null || options === void 0 ? void 0 : options.callControls;

package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/CallPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"CallPage.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/pages/CallPage.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DiagnosticQuality } from '@azure/communication-calling';\nimport { useId } from '@fluentui/react-hooks';\nimport { _isInCall } from '@internal/calling-component-bindings';\nimport { ActiveErrorMessage, ErrorBar, ParticipantMenuItemsCallback } from '@internal/react-components';\nimport { VideoGalleryLayout } from '@internal/react-components';\nimport React from 'react';\nimport { useState } from 'react';\nimport { AvatarPersonaDataCallback } from '../../common/AvatarPersona';\nimport { useLocale } from '../../localization';\nimport { CallCompositeOptions } from '../CallComposite';\nimport { CallArrangement } from '../components/CallArrangement';\nimport { MediaGallery } from '../components/MediaGallery';\nimport { NetworkReconnectTile } from '../components/NetworkReconnectTile';\nimport { useHandlers } from '../hooks/useHandlers';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { useSelector } from '../hooks/useSelector';\nimport { callStatusSelector } from '../selectors/callStatusSelector';\nimport { complianceBannerSelector } from '../selectors/complianceBannerSelector';\nimport { mediaGallerySelector } from '../selectors/mediaGallerySelector';\nimport { getRemoteParticipantsConnectedSelector } from '../selectors/mediaGallerySelector';\nimport { mutedNotificationSelector } from '../selectors/mutedNotificationSelector';\nimport { networkReconnectTileSelector } from '../selectors/networkReconnectTileSelector';\nimport { reduceCallControlsForMobile } from '../utils';\nimport { MobileChatSidePaneTabHeaderProps } from '../../common/TabHeader';\nimport { SidePaneRenderer } from '../components/SidePane/SidePaneProvider';\n\nimport { CapabilitiesChangeNotificationBarProps } from '../components/CapabilitiesChangedNotificationBar';\nimport { DtmfDialpadPage } from './DtmfDialpadPage';\nimport { showDtmfDialer } from '../utils/MediaGalleryUtils';\nimport { getTargetCallees } from '../selectors/baseSelectors';\n/* @conditional-compile-remove(spotlight) */\nimport { Prompt, PromptProps } from '../components/Prompt';\n\n/**\n * @private\n */\nexport interface CallPageProps {\n  mobileView: boolean;\n  modalLayerHostId: string;\n  callInvitationURL?: string;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void;\n  mobileChatTabHeader?: MobileChatSidePaneTabHeaderProps;\n  options?: CallCompositeOptions;\n  latestErrors: ActiveErrorMessage[];\n  onDismissError: (error: ActiveErrorMessage) => void;\n  galleryLayout: VideoGalleryLayout;\n  capabilitiesChangedNotificationBarProps?: CapabilitiesChangeNotificationBarProps;\n  onUserSetGalleryLayoutChange?: (layout: VideoGalleryLayout) => void;\n  userSetOverflowGalleryPosition?: 'Responsive' | 'horizontalTop';\n  onSetUserSetOverflowGalleryPosition?: (position: 'Responsive' | 'horizontalTop') => void;\n  onCloseChatPane?: () => void;\n  pinnedParticipants?: string[];\n  setPinnedParticipants?: (pinnedParticipants: string[]) => void;\n  compositeAudioContext?: AudioContext;\n}\n\n/**\n * @private\n */\nexport const CallPage = (props: CallPageProps): JSX.Element => {\n  const {\n    callInvitationURL,\n    onFetchAvatarPersonaData,\n    onFetchParticipantMenuItems,\n    options,\n    mobileView,\n    galleryLayout = 'floatingLocalVideo',\n    onUserSetGalleryLayoutChange,\n    userSetOverflowGalleryPosition = 'Responsive',\n    onSetUserSetOverflowGalleryPosition,\n    onCloseChatPane,\n    pinnedParticipants,\n    setPinnedParticipants,\n    compositeAudioContext\n  } = props;\n\n  // To use useProps to get these states, we need to create another file wrapping Call,\n  // It seems unnecessary in this case, so we get the updated states using this approach.\n  const { callStatus } = useSelector(callStatusSelector);\n  const mediaGalleryProps = useSelector(mediaGallerySelector);\n  const mediaGalleryHandlers = useHandlers(MediaGallery);\n  const complianceBannerProps = useSelector(complianceBannerSelector);\n  const errorBarProps = usePropsFor(ErrorBar);\n  const mutedNotificationProps = useSelector(mutedNotificationSelector);\n  const networkReconnectTileProps = useSelector(networkReconnectTileSelector);\n  const remoteParticipantsConnected = useSelector(getRemoteParticipantsConnectedSelector);\n\n  const callees = useSelector(getTargetCallees);\n  const renderDtmfDialerFromStart = showDtmfDialer(callees, remoteParticipantsConnected);\n  const [dtmfDialerPresent, setDtmfDialerPresent] = useState<boolean>(renderDtmfDialerFromStart);\n\n  const strings = useLocale().strings.call;\n\n  // Reduce the controls shown when mobile view is enabled.\n  const callControlOptions = mobileView ? reduceCallControlsForMobile(options?.callControls) : options?.callControls;\n\n  const drawerMenuHostId = useId('drawerMenuHost');\n  /* @conditional-compile-remove(spotlight) */\n  const [isPromptOpen, setIsPromptOpen] = useState<boolean>(false);\n  /* @conditional-compile-remove(spotlight) */\n  const [promptProps, setPromptProps] = useState<PromptProps>();\n\n  const onRenderGalleryContentTrampoline = (): JSX.Element => {\n    if (dtmfDialerPresent) {\n      return (\n        <DtmfDialpadPage\n          mobileView={props.mobileView}\n          modalLayerHostId={props.modalLayerHostId}\n          options={props.options}\n          updateSidePaneRenderer={props.updateSidePaneRenderer}\n          mobileChatTabHeader={props.mobileChatTabHeader}\n          latestErrors={props.latestErrors}\n          onDismissError={props.onDismissError}\n          capabilitiesChangedNotificationBarProps={props.capabilitiesChangedNotificationBarProps}\n          onSetDialpadPage={() => setDtmfDialerPresent(!dtmfDialerPresent)}\n          dtmfDialerPresent={dtmfDialerPresent}\n          compositeAudioContext={compositeAudioContext}\n        />\n      );\n    } else {\n      return (\n        <MediaGallery\n          isMobile={mobileView}\n          {...mediaGalleryProps}\n          {...mediaGalleryHandlers}\n          onFetchAvatarPersonaData={onFetchAvatarPersonaData}\n          remoteVideoTileMenuOptions={options?.remoteVideoTileMenuOptions}\n          drawerMenuHostId={drawerMenuHostId}\n          localVideoTileOptions={options?.localVideoTile}\n          userSetOverflowGalleryPosition={userSetOverflowGalleryPosition}\n          userSetGalleryLayout={galleryLayout}\n          pinnedParticipants={pinnedParticipants}\n          setPinnedParticipants={setPinnedParticipants}\n          /* @conditional-compile-remove(spotlight) */\n          setIsPromptOpen={setIsPromptOpen}\n          /* @conditional-compile-remove(spotlight) */\n          setPromptProps={setPromptProps}\n          /* @conditional-compile-remove(spotlight) */\n          hideSpotlightButtons={options?.spotlight?.hideSpotlightButtons}\n          videoTilesOptions={options?.videoTilesOptions}\n        />\n      );\n    }\n  };\n\n  return (\n    <>\n      <CallArrangement\n        id={drawerMenuHostId}\n        complianceBannerProps={{ ...complianceBannerProps, strings }}\n        errorBarProps={options?.errorBar !== false && errorBarProps}\n        mutedNotificationProps={mutedNotificationProps}\n        callControlProps={{\n          callInvitationURL: callInvitationURL,\n          onFetchParticipantMenuItems: onFetchParticipantMenuItems,\n          options: callControlOptions,\n          increaseFlyoutItemSize: mobileView\n        }}\n        onFetchAvatarPersonaData={onFetchAvatarPersonaData}\n        mobileView={mobileView}\n        modalLayerHostId={props.modalLayerHostId}\n        onRenderGalleryContent={() =>\n          _isInCall(callStatus) ? (\n            isNetworkHealthy(networkReconnectTileProps.networkReconnectValue) ? (\n              onRenderGalleryContentTrampoline()\n            ) : (\n              <NetworkReconnectTile {...networkReconnectTileProps} />\n            )\n          ) : (\n            <></>\n          )\n        }\n        updateSidePaneRenderer={props.updateSidePaneRenderer}\n        mobileChatTabHeader={props.mobileChatTabHeader}\n        onCloseChatPane={onCloseChatPane}\n        dataUiId={'call-page'}\n        latestErrors={props.latestErrors}\n        onDismissError={props.onDismissError}\n        onUserSetOverflowGalleryPositionChange={onSetUserSetOverflowGalleryPosition}\n        onUserSetGalleryLayoutChange={onUserSetGalleryLayoutChange}\n        userSetGalleryLayout={galleryLayout}\n        capabilitiesChangedNotificationBarProps={props.capabilitiesChangedNotificationBarProps}\n        onSetDialpadPage={() => setDtmfDialerPresent(!dtmfDialerPresent)}\n        dtmfDialerPresent={dtmfDialerPresent}\n        /* @conditional-compile-remove(spotlight) */\n        setIsPromptOpen={setIsPromptOpen}\n        /* @conditional-compile-remove(spotlight) */\n        setPromptProps={setPromptProps}\n        /* @conditional-compile-remove(spotlight) */\n        hideSpotlightButtons={options?.spotlight?.hideSpotlightButtons}\n      />\n      {\n        /* @conditional-compile-remove(spotlight) */\n        <Prompt isOpen={isPromptOpen} onDismiss={() => setIsPromptOpen(false)} {...promptProps} />\n      }\n    </>\n  );\n};\n\n/**\n * @private\n */\nexport const isNetworkHealthy = (value: DiagnosticQuality | boolean | undefined): boolean => {\n  // We know that the value is actually of type DiagnosticQuality for this diagnostic.\n  // We ignore any boolen values, considering the network to still be healthy.\n  // Thus, only DiagnosticQuality.Poor or .Bad indicate network problems.\n  return value === true || value === false || value === undefined || value === DiagnosticQuality.Good;\n};\n"]}
+{"version":3,"file":"CallPage.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/pages/CallPage.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DiagnosticQuality } from '@azure/communication-calling';\nimport { useId } from '@fluentui/react-hooks';\nimport { _isInCall } from '@internal/calling-component-bindings';\nimport { ActiveErrorMessage, ErrorBar, ParticipantMenuItemsCallback } from '@internal/react-components';\nimport { VideoGalleryLayout } from '@internal/react-components';\nimport React from 'react';\nimport { useState } from 'react';\nimport { AvatarPersonaDataCallback } from '../../common/AvatarPersona';\nimport { useLocale } from '../../localization';\nimport { CallCompositeOptions } from '../CallComposite';\nimport { CallArrangement } from '../components/CallArrangement';\nimport { MediaGallery } from '../components/MediaGallery';\nimport { NetworkReconnectTile } from '../components/NetworkReconnectTile';\nimport { useHandlers } from '../hooks/useHandlers';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { useSelector } from '../hooks/useSelector';\nimport { callStatusSelector } from '../selectors/callStatusSelector';\nimport { complianceBannerSelector } from '../selectors/complianceBannerSelector';\nimport { mediaGallerySelector } from '../selectors/mediaGallerySelector';\nimport { getRemoteParticipantsConnectedSelector } from '../selectors/mediaGallerySelector';\nimport { mutedNotificationSelector } from '../selectors/mutedNotificationSelector';\nimport { networkReconnectTileSelector } from '../selectors/networkReconnectTileSelector';\nimport { reduceCallControlsForMobile } from '../utils';\nimport { MobileChatSidePaneTabHeaderProps } from '../../common/TabHeader';\nimport { SidePaneRenderer } from '../components/SidePane/SidePaneProvider';\n\nimport { CapabilitiesChangeNotificationBarProps } from '../components/CapabilitiesChangedNotificationBar';\nimport { DtmfDialpadPage } from './DtmfDialpadPage';\nimport { showDtmfDialer } from '../utils/MediaGalleryUtils';\nimport { getTargetCallees } from '../selectors/baseSelectors';\n/* @conditional-compile-remove(spotlight) */\nimport { Prompt, PromptProps } from '../components/Prompt';\n\n/**\n * @private\n */\nexport interface CallPageProps {\n  mobileView: boolean;\n  modalLayerHostId: string;\n  callInvitationURL?: string;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void;\n  mobileChatTabHeader?: MobileChatSidePaneTabHeaderProps;\n  options?: CallCompositeOptions;\n  latestErrors: ActiveErrorMessage[];\n  onDismissError: (error: ActiveErrorMessage) => void;\n  galleryLayout: VideoGalleryLayout;\n  capabilitiesChangedNotificationBarProps?: CapabilitiesChangeNotificationBarProps;\n  onUserSetGalleryLayoutChange?: (layout: VideoGalleryLayout) => void;\n  userSetOverflowGalleryPosition?: 'Responsive' | 'horizontalTop';\n  onSetUserSetOverflowGalleryPosition?: (position: 'Responsive' | 'horizontalTop') => void;\n  onCloseChatPane?: () => void;\n  pinnedParticipants?: string[];\n  setPinnedParticipants?: (pinnedParticipants: string[]) => void;\n  compositeAudioContext?: AudioContext;\n  disableAutoShowDtmfDialer?: boolean;\n}\n\n/**\n * @private\n */\nexport const CallPage = (props: CallPageProps): JSX.Element => {\n  const {\n    callInvitationURL,\n    onFetchAvatarPersonaData,\n    onFetchParticipantMenuItems,\n    options,\n    mobileView,\n    galleryLayout = 'floatingLocalVideo',\n    onUserSetGalleryLayoutChange,\n    userSetOverflowGalleryPosition = 'Responsive',\n    onSetUserSetOverflowGalleryPosition,\n    onCloseChatPane,\n    pinnedParticipants,\n    setPinnedParticipants,\n    compositeAudioContext,\n    disableAutoShowDtmfDialer = false\n  } = props;\n\n  // To use useProps to get these states, we need to create another file wrapping Call,\n  // It seems unnecessary in this case, so we get the updated states using this approach.\n  const { callStatus } = useSelector(callStatusSelector);\n  const mediaGalleryProps = useSelector(mediaGallerySelector);\n  const mediaGalleryHandlers = useHandlers(MediaGallery);\n  const complianceBannerProps = useSelector(complianceBannerSelector);\n  const errorBarProps = usePropsFor(ErrorBar);\n  const mutedNotificationProps = useSelector(mutedNotificationSelector);\n  const networkReconnectTileProps = useSelector(networkReconnectTileSelector);\n  const remoteParticipantsConnected = useSelector(getRemoteParticipantsConnectedSelector);\n\n  const callees = useSelector(getTargetCallees);\n  const renderDtmfDialerFromStart = showDtmfDialer(callees, remoteParticipantsConnected);\n  const [dtmfDialerPresent, setDtmfDialerPresent] = useState<boolean>(\n    renderDtmfDialerFromStart && disableAutoShowDtmfDialer\n  );\n\n  const strings = useLocale().strings.call;\n\n  // Reduce the controls shown when mobile view is enabled.\n  const callControlOptions = mobileView ? reduceCallControlsForMobile(options?.callControls) : options?.callControls;\n\n  const drawerMenuHostId = useId('drawerMenuHost');\n  /* @conditional-compile-remove(spotlight) */\n  const [isPromptOpen, setIsPromptOpen] = useState<boolean>(false);\n  /* @conditional-compile-remove(spotlight) */\n  const [promptProps, setPromptProps] = useState<PromptProps>();\n\n  const onRenderGalleryContentTrampoline = (): JSX.Element => {\n    if (dtmfDialerPresent) {\n      return (\n        <DtmfDialpadPage\n          mobileView={props.mobileView}\n          modalLayerHostId={props.modalLayerHostId}\n          options={props.options}\n          updateSidePaneRenderer={props.updateSidePaneRenderer}\n          mobileChatTabHeader={props.mobileChatTabHeader}\n          latestErrors={props.latestErrors}\n          onDismissError={props.onDismissError}\n          capabilitiesChangedNotificationBarProps={props.capabilitiesChangedNotificationBarProps}\n          onSetDialpadPage={() => setDtmfDialerPresent(!dtmfDialerPresent)}\n          dtmfDialerPresent={dtmfDialerPresent}\n          compositeAudioContext={compositeAudioContext}\n        />\n      );\n    } else {\n      return (\n        <MediaGallery\n          isMobile={mobileView}\n          {...mediaGalleryProps}\n          {...mediaGalleryHandlers}\n          onFetchAvatarPersonaData={onFetchAvatarPersonaData}\n          remoteVideoTileMenuOptions={options?.remoteVideoTileMenuOptions}\n          drawerMenuHostId={drawerMenuHostId}\n          localVideoTileOptions={options?.localVideoTile}\n          userSetOverflowGalleryPosition={userSetOverflowGalleryPosition}\n          userSetGalleryLayout={galleryLayout}\n          pinnedParticipants={pinnedParticipants}\n          setPinnedParticipants={setPinnedParticipants}\n          /* @conditional-compile-remove(spotlight) */\n          setIsPromptOpen={setIsPromptOpen}\n          /* @conditional-compile-remove(spotlight) */\n          setPromptProps={setPromptProps}\n          /* @conditional-compile-remove(spotlight) */\n          hideSpotlightButtons={options?.spotlight?.hideSpotlightButtons}\n          videoTilesOptions={options?.videoTilesOptions}\n        />\n      );\n    }\n  };\n\n  return (\n    <>\n      <CallArrangement\n        id={drawerMenuHostId}\n        complianceBannerProps={{ ...complianceBannerProps, strings }}\n        errorBarProps={options?.errorBar !== false && errorBarProps}\n        mutedNotificationProps={mutedNotificationProps}\n        callControlProps={{\n          callInvitationURL: callInvitationURL,\n          onFetchParticipantMenuItems: onFetchParticipantMenuItems,\n          options: callControlOptions,\n          increaseFlyoutItemSize: mobileView\n        }}\n        onFetchAvatarPersonaData={onFetchAvatarPersonaData}\n        mobileView={mobileView}\n        modalLayerHostId={props.modalLayerHostId}\n        onRenderGalleryContent={() =>\n          _isInCall(callStatus) ? (\n            isNetworkHealthy(networkReconnectTileProps.networkReconnectValue) ? (\n              onRenderGalleryContentTrampoline()\n            ) : (\n              <NetworkReconnectTile {...networkReconnectTileProps} />\n            )\n          ) : (\n            <></>\n          )\n        }\n        updateSidePaneRenderer={props.updateSidePaneRenderer}\n        mobileChatTabHeader={props.mobileChatTabHeader}\n        onCloseChatPane={onCloseChatPane}\n        dataUiId={'call-page'}\n        latestErrors={props.latestErrors}\n        onDismissError={props.onDismissError}\n        onUserSetOverflowGalleryPositionChange={onSetUserSetOverflowGalleryPosition}\n        onUserSetGalleryLayoutChange={onUserSetGalleryLayoutChange}\n        userSetGalleryLayout={galleryLayout}\n        capabilitiesChangedNotificationBarProps={props.capabilitiesChangedNotificationBarProps}\n        onSetDialpadPage={() => setDtmfDialerPresent(!dtmfDialerPresent)}\n        dtmfDialerPresent={dtmfDialerPresent}\n        /* @conditional-compile-remove(spotlight) */\n        setIsPromptOpen={setIsPromptOpen}\n        /* @conditional-compile-remove(spotlight) */\n        setPromptProps={setPromptProps}\n        /* @conditional-compile-remove(spotlight) */\n        hideSpotlightButtons={options?.spotlight?.hideSpotlightButtons}\n      />\n      {\n        /* @conditional-compile-remove(spotlight) */\n        <Prompt isOpen={isPromptOpen} onDismiss={() => setIsPromptOpen(false)} {...promptProps} />\n      }\n    </>\n  );\n};\n\n/**\n * @private\n */\nexport const isNetworkHealthy = (value: DiagnosticQuality | boolean | undefined): boolean => {\n  // We know that the value is actually of type DiagnosticQuality for this diagnostic.\n  // We ignore any boolen values, considering the network to still be healthy.\n  // Thus, only DiagnosticQuality.Poor or .Bad indicate network problems.\n  return value === true || value === false || value === undefined || value === DiagnosticQuality.Good;\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/common/SidePaneHeader.js

@@ -26,7 +26,7 @@ export const SidePaneHeader = (props) => {
         return React.createElement(SidePaneMobileHeader, Object.assign({}, props));
     }
     return (React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", styles: sidePaneHeaderContainerStyles, verticalAlign: "center" },
-        React.createElement(Stack.Item, { role: "heading", styles: sidePaneHeaderStyles, "aria-label": props.headingText }, props.headingText),
+        React.createElement(Stack.Item, { role: "heading", styles: sidePaneHeaderStyles, "aria-label": props.headingText, "aria-level": 2 }, props.headingText),
         React.createElement(Stack.Item, null,
             React.createElement(CommandBarButton, { ariaLabel: props.dismissSidePaneButtonAriaLabel, styles: sidePaneCloseButtonStyles, iconProps: { iconName: 'cancel' }, onClick: props.onClose }))));
 };

package/dist/dist-esm/react-composites/src/composites/common/SidePaneHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidePaneHeader.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/SidePaneHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { CommandBarButton, DefaultButton, Stack, concatStyleSets } from '@fluentui/react';\nimport { useTheme } from '@internal/react-components';\nimport React, { useMemo } from 'react';\nimport { sidePaneHeaderContainerStyles, sidePaneHeaderStyles } from '../common/styles/ParticipantContainer.styles';\nimport {\n  mobilePaneBackButtonStyles,\n  mobilePaneButtonStyles,\n  mobilePaneControlBarStyle,\n  mobilePaneHiddenIconStyles\n} from './styles/Pane.styles';\nimport { CallWithChatCompositeIcon } from './icons';\n\n/**\n * @private\n */\nexport const SidePaneHeader = (props: {\n  headingText?: string;\n  dismissSidePaneButtonAriaLabel?: string;\n  dismissSidePaneButtonAriaDescription?: string;\n  onClose: () => void;\n  mobileView: boolean;\n}): JSX.Element => {\n  const theme = useTheme();\n  const sidePaneCloseButtonStyles = useMemo(\n    () => ({\n      root: {\n        minWidth: '1.5rem',\n        padding: '0.5rem 0.25rem',\n        marginRight: '0.25rem',\n        backgroundColor: theme.semanticColors.bodyBackground\n      },\n      icon: { color: theme.palette.neutralSecondary },\n      iconHovered: { color: theme.palette.neutralSecondary },\n      iconPressed: { color: theme.palette.neutralSecondary }\n    }),\n    [theme.palette.neutralSecondary, theme.semanticColors.bodyBackground]\n  );\n\n  if (props.mobileView) {\n    return <SidePaneMobileHeader {...props} />;\n  }\n\n  return (\n    <Stack horizontal horizontalAlign=\"space-between\" styles={sidePaneHeaderContainerStyles} verticalAlign=\"center\">\n      <Stack.Item role=\"heading\" styles={sidePaneHeaderStyles} aria-label={props.headingText}>\n        {props.headingText}\n      </Stack.Item>\n      <Stack.Item>\n        <CommandBarButton\n          ariaLabel={props.dismissSidePaneButtonAriaLabel}\n          styles={sidePaneCloseButtonStyles}\n          iconProps={{ iconName: 'cancel' }}\n          onClick={props.onClose}\n        />\n      </Stack.Item>\n    </Stack>\n  );\n};\n\nconst SidePaneMobileHeader = (props: {\n  headingText?: string;\n  dismissSidePaneButtonAriaLabel?: string;\n  dismissSidePaneButtonAriaDescription?: string;\n  onClose: () => void;\n}): JSX.Element => {\n  const { headingText, dismissSidePaneButtonAriaLabel, dismissSidePaneButtonAriaDescription, onClose } = props;\n  const theme = useTheme();\n  const mobilePaneButtonStylesThemed = useMemo(() => {\n    return concatStyleSets(mobilePaneButtonStyles, {\n      root: {\n        width: '100%'\n      },\n      label: {\n        fontSize: theme.fonts.medium.fontSize,\n        fontWeight: theme.fonts.medium.fontWeight\n      }\n    });\n  }, [theme]);\n\n  return (\n    <Stack horizontal grow styles={mobilePaneControlBarStyle}>\n      <DefaultButton\n        ariaLabel={dismissSidePaneButtonAriaLabel}\n        ariaDescription={dismissSidePaneButtonAriaDescription}\n        onClick={onClose}\n        styles={mobilePaneBackButtonStyles}\n        onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"ChevronLeft\" />}\n        autoFocus\n      ></DefaultButton>\n      <Stack.Item grow>\n        <DefaultButton checked={true} styles={mobilePaneButtonStylesThemed}>\n          {headingText}\n        </DefaultButton>\n      </Stack.Item>\n      {/* Hidden icon to take the same space as the actual back button on the left. */}\n      <DefaultButton\n        styles={mobilePaneHiddenIconStyles}\n        ariaHidden={true}\n        onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"ChevronLeft\" />}\n      ></DefaultButton>\n    </Stack>\n  );\n};\n"]}
+{"version":3,"file":"SidePaneHeader.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/SidePaneHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { CommandBarButton, DefaultButton, Stack, concatStyleSets } from '@fluentui/react';\nimport { useTheme } from '@internal/react-components';\nimport React, { useMemo } from 'react';\nimport { sidePaneHeaderContainerStyles, sidePaneHeaderStyles } from '../common/styles/ParticipantContainer.styles';\nimport {\n  mobilePaneBackButtonStyles,\n  mobilePaneButtonStyles,\n  mobilePaneControlBarStyle,\n  mobilePaneHiddenIconStyles\n} from './styles/Pane.styles';\nimport { CallWithChatCompositeIcon } from './icons';\n\n/**\n * @private\n */\nexport const SidePaneHeader = (props: {\n  headingText?: string;\n  dismissSidePaneButtonAriaLabel?: string;\n  dismissSidePaneButtonAriaDescription?: string;\n  onClose: () => void;\n  mobileView: boolean;\n}): JSX.Element => {\n  const theme = useTheme();\n  const sidePaneCloseButtonStyles = useMemo(\n    () => ({\n      root: {\n        minWidth: '1.5rem',\n        padding: '0.5rem 0.25rem',\n        marginRight: '0.25rem',\n        backgroundColor: theme.semanticColors.bodyBackground\n      },\n      icon: { color: theme.palette.neutralSecondary },\n      iconHovered: { color: theme.palette.neutralSecondary },\n      iconPressed: { color: theme.palette.neutralSecondary }\n    }),\n    [theme.palette.neutralSecondary, theme.semanticColors.bodyBackground]\n  );\n\n  if (props.mobileView) {\n    return <SidePaneMobileHeader {...props} />;\n  }\n\n  return (\n    <Stack horizontal horizontalAlign=\"space-between\" styles={sidePaneHeaderContainerStyles} verticalAlign=\"center\">\n      <Stack.Item role=\"heading\" styles={sidePaneHeaderStyles} aria-label={props.headingText} aria-level={2}>\n        {props.headingText}\n      </Stack.Item>\n      <Stack.Item>\n        <CommandBarButton\n          ariaLabel={props.dismissSidePaneButtonAriaLabel}\n          styles={sidePaneCloseButtonStyles}\n          iconProps={{ iconName: 'cancel' }}\n          onClick={props.onClose}\n        />\n      </Stack.Item>\n    </Stack>\n  );\n};\n\nconst SidePaneMobileHeader = (props: {\n  headingText?: string;\n  dismissSidePaneButtonAriaLabel?: string;\n  dismissSidePaneButtonAriaDescription?: string;\n  onClose: () => void;\n}): JSX.Element => {\n  const { headingText, dismissSidePaneButtonAriaLabel, dismissSidePaneButtonAriaDescription, onClose } = props;\n  const theme = useTheme();\n  const mobilePaneButtonStylesThemed = useMemo(() => {\n    return concatStyleSets(mobilePaneButtonStyles, {\n      root: {\n        width: '100%'\n      },\n      label: {\n        fontSize: theme.fonts.medium.fontSize,\n        fontWeight: theme.fonts.medium.fontWeight\n      }\n    });\n  }, [theme]);\n\n  return (\n    <Stack horizontal grow styles={mobilePaneControlBarStyle}>\n      <DefaultButton\n        ariaLabel={dismissSidePaneButtonAriaLabel}\n        ariaDescription={dismissSidePaneButtonAriaDescription}\n        onClick={onClose}\n        styles={mobilePaneBackButtonStyles}\n        onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"ChevronLeft\" />}\n        autoFocus\n      ></DefaultButton>\n      <Stack.Item grow>\n        <DefaultButton checked={true} styles={mobilePaneButtonStylesThemed}>\n          {headingText}\n        </DefaultButton>\n      </Stack.Item>\n      {/* Hidden icon to take the same space as the actual back button on the left. */}\n      <DefaultButton\n        styles={mobilePaneHiddenIconStyles}\n        ariaHidden={true}\n        onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"ChevronLeft\" />}\n      ></DefaultButton>\n    </Stack>\n  );\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/localization/locales/en-US/strings.json

@@ -244,6 +244,10 @@
             "shareScreen": {
                 "lostDueToRoleChangeToAttendee": "Your role has been changed. Some actions, like sharing content, won't be available to you.",
                 "grantedDueToRoleChangeToPresenter": "You're a presenter. You can share content and facilitate the meeting."
+            },
+            "hideAttendeeNames": {
+                "hideAttendeeNameAttendee": "Your name is hidden from other attendees. Organizers and presenters can see your real name.",
+                "hideAttendeeNamePresenter": "Attendee names are hidden. Only organizers and presenters can see names to protect attendee privacy."
             }
         },
         "surveyTitle": "Help us improve",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@azure/communication-react",
-  "version": "1.16.0-alpha-202404270012",
+  "version": "1.16.0-alpha-202405030013",
   "sideEffects": false,
   "description": "React library for building modern communication user experiences utilizing Azure Communication Services",
   "keywords": [
@@ -56,7 +56,7 @@
     "uuid": "^9.0.0"
   },
   "peerDependencies": {
-    "@azure/communication-calling": "1.24.1-beta.2",
+    "@azure/communication-calling": "1.24.2-beta.1",
     "@azure/communication-calling-effects": "1.0.1",
     "@azure/communication-chat": "1.6.0-beta.1",
     "@types/react": ">=16.8.0 <19.0.0",