@azure/communication-react 1.23.0-alpha-202412250016 → 1.23.0-alpha-202412280016

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

@@ -1 +1 @@
-{"version":3,"file":"CommonCallControlBar.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/common/ControlBar/CommonCallControlBar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useMemo, useRef, useEffect, useState, useCallback, useImperativeHandle, forwardRef } from 'react';\nimport { CallAdapterProvider } from '../../CallComposite/adapter/CallAdapterProvider';\nimport { CallAdapter } from '../../CallComposite';\nimport { PeopleButton } from './PeopleButton';\nimport {\n  concatStyleSets,\n  IButton,\n  IStyle,\n  ITheme,\n  mergeStyles,\n  mergeStyleSets,\n  Stack,\n  useTheme\n} from '@fluentui/react';\n/* @conditional-compile-remove(breakout-rooms) */\nimport { PrimaryButton } from '@fluentui/react';\nimport { controlBarContainerStyles } from '../../CallComposite/styles/CallControls.styles';\nimport { callControlsContainerStyles } from '../../CallComposite/styles/CallPage.styles';\nimport { useCallWithChatCompositeStrings } from '../../CallWithChatComposite/hooks/useCallWithChatCompositeStrings';\nimport { BaseCustomStyles, ControlBarButtonStyles } from '@internal/react-components';\nimport { VideoGalleryLayout } from '@internal/react-components';\nimport { ControlBar } from '@internal/react-components';\nimport { Microphone } from '../../CallComposite/components/buttons/Microphone';\nimport { Camera } from '../../CallComposite/components/buttons/Camera';\nimport { ScreenShare } from '../../CallComposite/components/buttons/ScreenShare';\nimport { EndCall } from '../../CallComposite/components/buttons/EndCall';\nimport { MoreButton } from '../MoreButton';\nimport { ContainerRectProps } from '../ContainerRectProps';\nimport {\n  CUSTOM_BUTTON_OPTIONS,\n  generateCustomCallControlBarButton,\n  onFetchCustomButtonPropsTrampoline\n} from './CustomButton';\nimport { DesktopMoreButton } from './DesktopMoreButton';\nimport { isDisabled, _isSafari } from '../../CallComposite/utils';\nimport { HiddenFocusStartPoint } from '../HiddenFocusStartPoint';\nimport { CallWithChatControlOptions } from '../../CallWithChatComposite';\nimport { CommonCallControlOptions } from '../types/CommonCallControlOptions';\nimport { CallingCaptionsSettingsModal } from '../CallingCaptionsSettingsModal';\nimport { RaiseHand } from '../../CallComposite/components/buttons/RaiseHand';\nimport { Reaction } from '../../CallComposite/components/buttons/Reaction';\nimport { useSelector } from '../../CallComposite/hooks/useSelector';\nimport { capabilitySelector } from '../../CallComposite/selectors/capabilitySelector';\nimport { DtmfDialpadButton } from './DtmfDialerButton';\nimport { ExitSpotlightButton } from '../ExitSpotlightButton';\nimport { useLocale } from '../../localization';\nimport { isBoolean } from '../utils';\nimport { getEnvironmentInfo } from '../../CallComposite/selectors/baseSelectors';\nimport { getIsTeamsCall } from '../../CallComposite/selectors/baseSelectors';\n/* @conditional-compile-remove(breakout-rooms) */\nimport { getAssignedBreakoutRoom, getBreakoutRoomSettings } from '../../CallComposite/selectors/baseSelectors';\nimport { callStatusSelector } from '../../CallComposite/selectors/callStatusSelector';\nimport { MeetingConferencePhoneInfoModal } from '@internal/react-components';\n/* @conditional-compile-remove(breakout-rooms) */\nimport { Timer } from './Timer';\nimport { FocusableElement } from '../types/FocusableElement';\n\n/**\n * @private\n */\nexport interface CommonCallControlBarProps {\n  callAdapter: CallAdapter;\n  peopleButtonChecked: boolean;\n  onPeopleButtonClicked: () => void;\n  onMoreButtonClicked?: () => void;\n  mobileView: boolean;\n  disableButtonsForLobbyPage: boolean;\n  callControls?: boolean | CommonCallControlOptions | CallWithChatControlOptions;\n  disableButtonsForHoldScreen?: boolean;\n  onClickShowDialpad?: () => void;\n  onClickVideoEffects?: (showVideoEffects: boolean) => void;\n  isCaptionsSupported?: boolean;\n  isCaptionsOn?: boolean;\n  displayVertical?: boolean;\n  onUserSetOverflowGalleryPositionChange?: (position: 'Responsive' | 'horizontalTop') => void;\n  onUserSetGalleryLayout?: (layout: VideoGalleryLayout) => void;\n  userSetGalleryLayout?: VideoGalleryLayout;\n  peopleButtonRef?: React.RefObject<IButton>;\n  cameraButtonRef?: React.RefObject<IButton>;\n  videoBackgroundPickerRef?: React.RefObject<IButton>;\n  onSetDialpadPage?: () => void;\n  dtmfDialerPresent?: boolean;\n  onStopLocalSpotlight?: () => void;\n  useTeamsCaptions?: boolean;\n\n  onToggleTeamsMeetingConferenceModal?: () => void;\n\n  teamsMeetingConferenceModalPresent?: boolean;\n}\n\nconst inferCommonCallControlOptions = (\n  mobileView: boolean,\n  commonCallControlOptions?: boolean | CallWithChatControlOptions\n): CallWithChatControlOptions | false => {\n  if (commonCallControlOptions === false) {\n    return false;\n  }\n\n  const options =\n    commonCallControlOptions === true || commonCallControlOptions === undefined ? {} : commonCallControlOptions;\n  if (mobileView) {\n    // Set to compressed mode when composite is optimized for mobile\n    options.displayType = 'compact';\n    // Set options to always not show screen share button for mobile\n    options.screenShareButton = false;\n  }\n  return options;\n};\n\ntype CommonCallControlBarMergedProps = CommonCallControlBarProps & ContainerRectProps;\n\n/**\n * @private\n */\nexport const CommonCallControlBar = forwardRef<FocusableElement, CommonCallControlBarMergedProps>(\n  (props, commonCallControlBarRef): JSX.Element => {\n    const theme = useTheme();\n    const rtl = theme.rtl;\n\n    // Create an imperatively callable focus function to allow the parent component to focus the control bar any time.\n    const [hiddenFocusStartElementKey, setHiddenFocusStartElementKey] = useState(0);\n    useImperativeHandle<FocusableElement, FocusableElement>(commonCallControlBarRef, () => ({\n      focus: () => {\n        // To move focus to the hidden element, we increment the key to force a re-mount of the HiddenFocusStartPoint component\n        // which relies on focusOnMount to move focus to the next interact-able element.\n        setHiddenFocusStartElementKey((prevKey) => prevKey + 1);\n      }\n    }));\n\n    const controlBarContainerRef = useRef<HTMLHeadingElement>(null);\n    const sidepaneControlsRef = useRef<HTMLHeadingElement>(null);\n    const controlBarSizeRef = useRef<HTMLHeadingElement>(null);\n\n    const [controlBarButtonsWidth, setControlBarButtonsWidth] = useState(0);\n    const [panelsButtonsWidth, setPanelsButtonsWidth] = useState(0);\n    const [controlBarContainerWidth, setControlBarContainerWidth] = useState(0);\n\n    const [totalButtonsWidth, setTotalButtonsWidth] = useState(0);\n    const [isOutOfSpace, setIsOutOfSpace] = useState(false);\n\n    const callWithChatStrings = useCallWithChatCompositeStrings();\n    const options = inferCommonCallControlOptions(props.mobileView, props.callControls);\n\n    const [showCaptionsSettingsModal, setShowCaptionsSettingsModal] = useState(false);\n\n    // If the hangup capability is not present, we default to true\n    const isHangUpForEveryoneAllowed =\n      useSelector((state) => state.call?.capabilitiesFeature?.capabilities.hangUpForEveryOne.isPresent) ?? true;\n    const isTeams = useSelector(getIsTeamsCall);\n\n    /* @conditional-compile-remove(breakout-rooms) */\n    const assignedBreakoutRoom = useSelector(getAssignedBreakoutRoom);\n    /* @conditional-compile-remove(breakout-rooms) */\n    const breakoutRoomSettings = useSelector(getBreakoutRoomSettings);\n\n    const handleResize = useCallback((): void => {\n      setControlBarButtonsWidth(controlBarContainerRef.current ? controlBarContainerRef.current.offsetWidth : 0);\n      setPanelsButtonsWidth(sidepaneControlsRef.current ? sidepaneControlsRef.current.offsetWidth : 0);\n      setControlBarContainerWidth(controlBarSizeRef.current ? controlBarSizeRef.current.offsetWidth : 0);\n    }, []);\n\n    // on load set inital width\n    useEffect(() => {\n      setControlBarButtonsWidth(controlBarContainerRef.current ? controlBarContainerRef.current.offsetWidth : 0);\n      setPanelsButtonsWidth(sidepaneControlsRef.current ? sidepaneControlsRef.current.offsetWidth : 0);\n      setControlBarContainerWidth(controlBarSizeRef.current ? controlBarSizeRef.current.offsetWidth : 0);\n    }, []);\n\n    // get the current width of control bar buttons and panel control buttons when browser size change\n    useEffect(() => {\n      window.addEventListener('resize', handleResize);\n      return () => window.removeEventListener('resize', handleResize);\n    }, [handleResize]);\n\n    /* when size change, reset total buttons width and compare with the control bar container width\n  if the total width of those buttons exceed container width, do not center the control bar buttons based on parent container width\n  Instead let them take up the remaining white space on the left */\n    useEffect(() => {\n      // white space on the left when control bar buttons are centered based on container width + control bar buttons width + panel control buttons width\n      setTotalButtonsWidth(\n        (controlBarContainerWidth - controlBarButtonsWidth) / 2 + controlBarButtonsWidth + panelsButtonsWidth\n      );\n    }, [controlBarButtonsWidth, panelsButtonsWidth, controlBarContainerWidth]);\n\n    useEffect(() => {\n      setIsOutOfSpace(totalButtonsWidth > controlBarContainerWidth);\n    }, [totalButtonsWidth, controlBarContainerWidth]);\n\n    const openCaptionsSettingsModal = useCallback((): void => {\n      setShowCaptionsSettingsModal(true);\n    }, []);\n\n    const onDismissCaptionsSettings = useCallback((): void => {\n      setShowCaptionsSettingsModal(false);\n    }, []);\n\n    const peopleButtonStrings = useMemo(\n      () => ({\n        label: callWithChatStrings.peopleButtonLabel,\n        selectedLabel: callWithChatStrings.selectedPeopleButtonLabel,\n        tooltipOpenAriaLabel: callWithChatStrings.peopleButtonTooltipOpenAriaLabel,\n        tooltipCloseAriaLabel: callWithChatStrings.peopleButtonTooltipCloseAriaLabel,\n        tooltipOffContent: callWithChatStrings.peopleButtonTooltipOpen,\n        tooltipOnContent: callWithChatStrings.peopleButtonTooltipClose\n      }),\n      [callWithChatStrings]\n    );\n    const moreButtonStrings = useMemo(\n      () => ({\n        label: callWithChatStrings.moreDrawerButtonLabel,\n        tooltipContent: callWithChatStrings.moreDrawerButtonTooltip\n      }),\n      [callWithChatStrings]\n    );\n    const callStrings = useLocale().strings.call;\n    const exitSpotlightButtonStrings = useMemo(\n      () => ({\n        label: callStrings.exitSpotlightButtonLabel,\n        tooltipContent: callStrings.exitSpotlightButtonTooltip\n      }),\n      [callStrings]\n    );\n\n    const [isDeepNoiseSuppressionOn, setDeepNoiseSuppressionOn] = useState<boolean>(false);\n\n    const startDeepNoiseSuppression = useCallback(async () => {\n      await props.callAdapter.startNoiseSuppressionEffect();\n    }, [props.callAdapter]);\n\n    const environmentInfo = useSelector(getEnvironmentInfo);\n    const isSafari = _isSafari(environmentInfo);\n\n    useEffect(() => {\n      if (\n        props.callAdapter.getState().onResolveDeepNoiseSuppressionDependency &&\n        props.callAdapter.getState().deepNoiseSuppressionOnByDefault\n      ) {\n        startDeepNoiseSuppression();\n        setDeepNoiseSuppressionOn(true);\n      }\n    }, [props.callAdapter, startDeepNoiseSuppression]);\n\n    const showNoiseSuppressionButton =\n      props.callAdapter.getState().onResolveDeepNoiseSuppressionDependency &&\n      !props.callAdapter.getState().hideDeepNoiseSuppressionButton &&\n      !isSafari\n        ? true\n        : false;\n\n    const onClickNoiseSuppression = useCallback(async () => {\n      if (isDeepNoiseSuppressionOn) {\n        await props.callAdapter.stopNoiseSuppressionEffect();\n        setDeepNoiseSuppressionOn(false);\n      } else {\n        await props.callAdapter.startNoiseSuppressionEffect();\n        setDeepNoiseSuppressionOn(true);\n      }\n    }, [props.callAdapter, isDeepNoiseSuppressionOn]);\n\n    const centerContainerStyles = useMemo(() => {\n      const styles: BaseCustomStyles = !props.mobileView ? desktopControlBarStyles : {};\n      return mergeStyleSets(styles, {\n        root: {\n          // Enforce a background color on control bar to ensure it matches the composite background color.\n          background: theme.semanticColors.bodyBackground\n        }\n      });\n    }, [props.mobileView, theme.semanticColors.bodyBackground]);\n    const screenShareButtonStyles = useMemo(\n      () => (!props.mobileView ? getDesktopScreenShareButtonStyles(theme) : undefined),\n      [props.mobileView, theme]\n    );\n    const commonButtonStyles = useMemo(\n      () => (!props.mobileView ? getDesktopCommonButtonStyles(theme) : undefined),\n      [props.mobileView, theme]\n    );\n    const endCallButtonStyles = useMemo(\n      () => (!props.mobileView ? getDesktopEndCallButtonStyles(theme) : undefined),\n      [props.mobileView, theme]\n    );\n\n    const controlBarWrapperDesktopStyles: IStyle = useMemo(\n      // only center control bar buttons based on parent container if there are enough space on the screen and not mobile\n      () => (!props.mobileView && !isOutOfSpace ? (rtl ? wrapperDesktopRtlStyles : wrapperDesktopStyles) : {}),\n      [props.mobileView, rtl, isOutOfSpace]\n    );\n\n    // only center control bar buttons based on parent container if there are enough space on the screen and not mobile\n    const controlBarDesktopContainerStyles: IStyle = useMemo(\n      () =>\n        !props.mobileView && !isOutOfSpace\n          ? {\n              position: 'relative',\n              minHeight: '4.5rem',\n              width: '100%',\n              display: 'flex',\n              alignItems: 'center',\n              paddingLeft: '1rem'\n            }\n          : {},\n      [props.mobileView, isOutOfSpace]\n    );\n\n    const customButtons = useMemo(\n      () =>\n        generateCustomCallControlBarButton(\n          onFetchCustomButtonPropsTrampoline(options !== false ? options : undefined),\n          options !== false ? options?.displayType : undefined\n        ),\n      [options]\n    );\n\n    const capabilitiesSelector = useSelector(capabilitySelector);\n    const callState = useSelector(callStatusSelector);\n    const isReactionAllowed =\n      callState.callStatus !== 'Connected' ||\n      !capabilitiesSelector?.capabilities ||\n      capabilitiesSelector.capabilities.useReactions.isPresent;\n\n    /* @conditional-compile-remove(breakout-rooms) */\n    const canReturnToMainMeeting = breakoutRoomSettings && breakoutRoomSettings.disableReturnToMainMeeting === false;\n    /* @conditional-compile-remove(breakout-rooms) */\n    const returnFromBreakoutRoom = useCallback(() => props.callAdapter.returnFromBreakoutRoom(), [props.callAdapter]);\n\n    // when options is false then we want to hide the whole control bar.\n    if (options === false) {\n      return <></>;\n    }\n\n    const sideButtonsPresent =\n      isEnabled(options.peopleButton) || isEnabled(options.chatButton) || customButtons['secondary'] !== undefined;\n\n    const screenShareButtonIsEnabled = isEnabled(options?.screenShareButton);\n\n    const microphoneButtonIsEnabled = isEnabled(options?.microphoneButton);\n\n    const cameraButtonIsEnabled = isEnabled(options?.cameraButton);\n\n    const showExitSpotlightButton = options?.exitSpotlightButton !== false;\n\n    const showCaptionsButton = props.isCaptionsSupported && isEnabled(options.captionsButton);\n\n    const showTeamsMeetingPhoneCallButton = isEnabled(options?.teamsMeetingPhoneCallButton);\n\n    const showDesktopMoreButton =\n      isEnabled(options?.moreButton) &&\n      (false || isEnabled(options?.holdButton) || showCaptionsButton || props.onUserSetGalleryLayout);\n\n    const role = props.callAdapter.getState().call?.role;\n    const hideRaiseHandButtonInRoomsCall =\n      props.callAdapter.getState().isRoomsCall && role && ['Consumer', 'Unknown'].includes(role);\n    const reactionResources = props.callAdapter.getState().reactions;\n\n    return (\n      <div ref={controlBarSizeRef}>\n        <CallAdapterProvider adapter={props.callAdapter}>\n          {showCaptionsSettingsModal && (\n            <CallingCaptionsSettingsModal\n              showCaptionsSettingsModal={showCaptionsSettingsModal}\n              onDismissCaptionsSettings={onDismissCaptionsSettings}\n              changeCaptionLanguage={props.isCaptionsOn && props.useTeamsCaptions}\n            />\n          )}\n          {props.teamsMeetingConferenceModalPresent && (\n            <MeetingConferencePhoneInfoModal\n              conferencePhoneInfoList={props.callAdapter.getState().call?.meetingConference?.conferencePhones ?? []}\n              showModal={props.teamsMeetingConferenceModalPresent}\n              onDismissMeetingPhoneInfoSettings={props.onToggleTeamsMeetingConferenceModal}\n            />\n          )}\n        </CallAdapterProvider>\n        <Stack\n          horizontal\n          reversed={!props.mobileView && !isOutOfSpace}\n          horizontalAlign=\"space-between\"\n          className={mergeStyles(\n            callControlsContainerStyles,\n            controlBarContainerStyles,\n            controlBarDesktopContainerStyles\n          )}\n        >\n          <Stack.Item grow className={mergeStyles(controlBarWrapperDesktopStyles)}>\n            <CallAdapterProvider adapter={props.callAdapter}>\n              <Stack horizontalAlign=\"center\">\n                {/*\n              HiddenFocusStartPoint is a util component used when we can't ensure the initial element for first\n              tab focus is at the top of dom tree. It moves the first-tab focus to the next interact-able element\n              immediately after it in the dom tree.\n              */}\n                <HiddenFocusStartPoint key={hiddenFocusStartElementKey} />\n                <Stack.Item>\n                  {/*\n                  Note: We use the layout=\"horizontal\" instead of dockedBottom because of how we position the\n                  control bar. The control bar exists in a Stack below the MediaGallery. The MediaGallery is\n                  set to grow and fill the remaining space not taken up by the ControlBar. If we were to use\n                  dockedBottom it has position absolute and would therefore float on top of the media gallery,\n                  occluding some of its content.\n                */}\n                  <div ref={controlBarContainerRef}>\n                    <ControlBar\n                      layout={props.displayVertical ? 'vertical' : 'horizontal'}\n                      styles={centerContainerStyles}\n                    >\n                      {\n                        /* @conditional-compile-remove(breakout-rooms) */\n                        !props.mobileView &&\n                          assignedBreakoutRoom &&\n                          assignedBreakoutRoom.state === 'open' &&\n                          assignedBreakoutRoom.call && (\n                            <PrimaryButton\n                              text={callStrings.joinBreakoutRoomButtonLabel}\n                              onClick={async (): Promise<void> => {\n                                assignedBreakoutRoom.join();\n                              }}\n                              styles={commonButtonStyles}\n                            />\n                          )\n                      }\n                      {microphoneButtonIsEnabled && (\n                        <Microphone\n                          displayType={options.displayType}\n                          styles={commonButtonStyles}\n                          splitButtonsForDeviceSelection={!props.mobileView}\n                          disabled={props.disableButtonsForHoldScreen || isDisabled(options.microphoneButton)}\n                          disableTooltip={props.mobileView}\n                          onClickNoiseSuppression={onClickNoiseSuppression}\n                          isDeepNoiseSuppressionOn={isDeepNoiseSuppressionOn}\n                          showNoiseSuppressionButton={showNoiseSuppressionButton}\n                        />\n                      )}\n                      {cameraButtonIsEnabled && (\n                        <Camera\n                          displayType={options.displayType}\n                          styles={commonButtonStyles}\n                          splitButtonsForDeviceSelection={!props.mobileView}\n                          disabled={props.disableButtonsForHoldScreen || isDisabled(options.cameraButton)}\n                          onClickVideoEffects={props.onClickVideoEffects}\n                          componentRef={props.cameraButtonRef}\n                          disableTooltip={props.mobileView}\n                        />\n                      )}\n                      {!props.mobileView &&\n                        isReactionAllowed &&\n                        isEnabled(options.reactionButton) &&\n                        reactionResources && (\n                          <Reaction\n                            displayType={options.displayType}\n                            styles={commonButtonStyles}\n                            disabled={props.disableButtonsForHoldScreen}\n                            reactionResource={reactionResources}\n                          />\n                        )}\n                      {!props.mobileView && isEnabled(options.raiseHandButton) && !hideRaiseHandButtonInRoomsCall && (\n                        <RaiseHand\n                          displayType={options.displayType}\n                          styles={commonButtonStyles}\n                          disabled={props.disableButtonsForHoldScreen || isDisabled(options.microphoneButton)}\n                        />\n                      )}\n                      {showDtmfDialerButton(options) && props.onSetDialpadPage !== undefined && (\n                        <DtmfDialpadButton\n                          styles={commonButtonStyles}\n                          displayType={options.displayType}\n                          onClick={() => {\n                            if (props.onSetDialpadPage !== undefined) {\n                              props.onSetDialpadPage();\n                            }\n                          }}\n                        />\n                      )}\n                      {showExitSpotlightButton && props.onStopLocalSpotlight && (\n                        <ExitSpotlightButton\n                          displayType={options.displayType}\n                          onClick={props.onStopLocalSpotlight}\n                          styles={commonButtonStyles}\n                          strings={exitSpotlightButtonStrings}\n                        />\n                      )}\n                      {screenShareButtonIsEnabled && (\n                        <ScreenShare\n                          option={options.screenShareButton}\n                          displayType={options.displayType}\n                          styles={screenShareButtonStyles}\n                          disabled={props.disableButtonsForHoldScreen || isDisabled(options.screenShareButton)}\n                        />\n                      )}\n                      {customButtons['primary']\n                        ?.slice(\n                          0,\n                          props.mobileView\n                            ? CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_MOBILE_CUSTOM_BUTTONS\n                            : CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_DESKTOP_CUSTOM_BUTTONS\n                        )\n                        .map((CustomButton, i) => {\n                          return (\n                            <CustomButton\n                              key={`primary-custom-button-${i}`}\n                              styles={commonButtonStyles}\n                              showLabel={options.displayType !== 'compact'}\n                              disableTooltip={props.mobileView}\n                            />\n                          );\n                        })}\n                      {props.mobileView && (\n                        <MoreButton\n                          data-ui-id=\"common-call-composite-more-button\"\n                          strings={moreButtonStrings}\n                          onClick={props.onMoreButtonClicked}\n                          disabled={props.disableButtonsForLobbyPage}\n                          disableTooltip={props.mobileView}\n                        />\n                      )}\n                      {!props.mobileView && showDesktopMoreButton && (\n                        <DesktopMoreButton\n                          disableButtonsForHoldScreen={props.disableButtonsForHoldScreen}\n                          styles={commonButtonStyles}\n                          onClickShowDialpad={props.onClickShowDialpad}\n                          callControls={props.callControls}\n                          isCaptionsSupported={showCaptionsButton}\n                          onCaptionsSettingsClick={openCaptionsSettingsModal}\n                          onUserSetOverflowGalleryPositionChange={props.onUserSetOverflowGalleryPositionChange}\n                          onUserSetGalleryLayout={props.onUserSetGalleryLayout}\n                          userSetGalleryLayout={props.userSetGalleryLayout}\n                          dtmfDialerPresent={props.dtmfDialerPresent}\n                          onSetDialpadPage={props.onSetDialpadPage}\n                          teamsMeetingPhoneCallEnable={showTeamsMeetingPhoneCallButton}\n                          onMeetingPhoneInfoClick={props.onToggleTeamsMeetingConferenceModal}\n                        />\n                      )}\n                      <EndCall\n                        displayType=\"compact\"\n                        mobileView={props.mobileView}\n                        styles={endCallButtonStyles}\n                        enableEndCallMenu={\n                          !isBoolean(props.callControls) &&\n                          !isBoolean(props.callControls?.endCallButton) &&\n                          !props.mobileView &&\n                          isHangUpForEveryoneAllowed &&\n                          !isTeams && // Temporary disable it for Teams call, since capability does not give the right value\n                          props.callControls?.endCallButton?.hangUpForEveryone === 'endCallOptions' &&\n                          // Only show the end call menu when the call is connected, user should not be able to end the call for everyone\n                          // when they are not actively in the call to communicate they will.\n                          callState.callStatus === 'Connected' &&\n                          /* @conditional-compile-remove(breakout-rooms) */\n                          !canReturnToMainMeeting\n                        }\n                        disableEndCallModal={\n                          !isBoolean(props.callControls) &&\n                          !isBoolean(props.callControls?.endCallButton) &&\n                          props.callControls?.endCallButton?.disableEndCallModal\n                        }\n                        /* @conditional-compile-remove(breakout-rooms) */\n                        returnFromBreakoutRoom={canReturnToMainMeeting ? returnFromBreakoutRoom : undefined}\n                      />\n                    </ControlBar>\n                  </div>\n                </Stack.Item>\n              </Stack>\n            </CallAdapterProvider>\n          </Stack.Item>\n          {!props.mobileView && sideButtonsPresent && (\n            <Stack.Item>\n              <div ref={sidepaneControlsRef}>\n                <Stack horizontal className={!props.mobileView ? mergeStyles(desktopButtonContainerStyle) : undefined}>\n                  {isEnabled(options?.peopleButton) && (\n                    <PeopleButton\n                      checked={props.peopleButtonChecked}\n                      ariaLabel={peopleButtonStrings.label}\n                      showLabel={options.displayType !== 'compact'}\n                      onClick={props.onPeopleButtonClicked}\n                      data-ui-id=\"common-call-composite-people-button\"\n                      disabled={\n                        props.disableButtonsForLobbyPage ||\n                        props.disableButtonsForHoldScreen ||\n                        isDisabled(options.peopleButton)\n                      }\n                      strings={peopleButtonStrings}\n                      styles={commonButtonStyles}\n                      componentRef={props.peopleButtonRef}\n                    />\n                  )}\n                  {customButtons['secondary']\n                    ?.slice(0, CUSTOM_BUTTON_OPTIONS.MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS)\n                    .map((CustomButton, i) => {\n                      return (\n                        <CustomButton\n                          key={`secondary-custom-button-${i}`}\n                          styles={commonButtonStyles}\n                          showLabel={options.displayType !== 'compact'}\n                        />\n                      );\n                    })}\n                </Stack>\n              </div>\n            </Stack.Item>\n          )}\n          {\n            /* @conditional-compile-remove(breakout-rooms) */\n            breakoutRoomSettings?.roomEndTime && !props.mobileView && !isOutOfSpace && (\n              <Stack.Item>\n                <Timer timeStampInfo={breakoutRoomSettings?.roomEndTime.toString()} />\n              </Stack.Item>\n            )\n          }\n        </Stack>\n      </div>\n    );\n  }\n);\n\nconst desktopButtonContainerStyle: IStyle = {\n  padding: '0.75rem',\n  columnGap: '0.5rem'\n};\n\nconst desktopControlBarStyles: BaseCustomStyles = {\n  root: desktopButtonContainerStyle\n};\n\n{\n  /*\n    Styling here to ensure the control bar buttons stay in the center of the parent component (control Container) regardless of its siblings\n    Need to add 'reversed' to parent container because the styling here reverse the position of the two stack items \n  */\n}\nconst wrapperDesktopStyles: IStyle = {\n  position: 'absolute',\n  left: '50%',\n  transform: 'translate(-50%, 0)'\n};\n\nconst wrapperDesktopRtlStyles: IStyle = {\n  position: 'absolute',\n  right: '50%',\n  transform: 'translate(-50%, 0)'\n};\n\n/** @private */\nexport const getDesktopCommonButtonStyles = (theme: ITheme): ControlBarButtonStyles => ({\n  root: {\n    border: `solid 1px ${theme.palette.neutralQuaternaryAlt}`,\n    borderRadius: theme.effects.roundedCorner4,\n    minHeight: '2.5rem',\n    maxWidth: '12rem' // allot extra space than the regular ControlBarButton. This is to give extra room to have the icon beside the text.\n  },\n  flexContainer: {\n    display: 'flex',\n    flexFlow: 'row nowrap'\n  },\n  textContainer: {\n    // Override the default so that label doesn't introduce a new block.\n    display: 'inline',\n\n    // Ensure width is set to permit child to show ellipsis when there is a label that is too long\n    maxWidth: '100%'\n  },\n  label: {\n    fontSize: theme.fonts.medium.fontSize,\n\n    // Ensure there is enough space between the icon and text to allow for the unread messages badge in the chat button\n    marginLeft: '0.625rem',\n\n    // Ensure letters that go above and below the standard text line like 'g', 'y', 'j' are not clipped\n    lineHeight: '1.5rem',\n\n    // Do not allow very long button texts to ruin the control bar experience, instead ensure long text is truncated and shows ellipsis\n    display: 'block',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    overflow: 'hidden'\n  },\n  splitButtonMenuButton: {\n    border: `solid 1px ${theme.palette.neutralQuaternaryAlt}`,\n    borderTopRightRadius: theme.effects.roundedCorner4,\n    borderBottomRightRadius: theme.effects.roundedCorner4,\n    borderTopLeftRadius: '0',\n    borderBottomLeftRadius: '0'\n  },\n  splitButtonMenuButtonChecked: {\n    // Default colors the menu half similarly for :hover and when button is checked.\n    // To align with how the left-half is styled, override the checked style.\n    background: 'none'\n  }\n});\n\nconst getDesktopScreenShareButtonStyles = (theme: ITheme): ControlBarButtonStyles => {\n  const overrideStyles = {\n    border: 'none',\n    background: theme.palette.themePrimary,\n    color: theme.palette.white,\n    '* > svg': { fill: theme.palette.white },\n    '@media (forced-colors: active)': {\n      border: '1px solid',\n      borderColor: theme.palette.black\n    }\n  };\n  const overrides: ControlBarButtonStyles = {\n    rootChecked: overrideStyles,\n    rootCheckedHovered: overrideStyles\n  };\n  return concatStyleSets(getDesktopCommonButtonStyles(theme), overrides);\n};\n\nconst getDesktopEndCallButtonStyles = (theme: ITheme): ControlBarButtonStyles => {\n  const overrides: ControlBarButtonStyles = {\n    root: {\n      // Suppress border around the dark-red button.\n      border: 'none'\n    },\n    rootFocused: {\n      '@media (forced-colors: active)': {\n        background: 'highlight',\n        color: 'highlightText',\n        borderColor: theme.palette.black,\n        borderRadius: 'unset',\n        outline: `3px solid ${theme.palette.black}`\n      }\n    },\n    icon: {\n      '@media (forced-colors: active)': {\n        ':focused': {\n          color: theme.palette.white\n        }\n      }\n    }\n  };\n  return concatStyleSets(getDesktopCommonButtonStyles(theme), overrides);\n};\n\nconst isEnabled = (option: unknown): boolean => option !== false;\n\nconst showDtmfDialerButton = (options: CommonCallControlOptions | CallWithChatControlOptions): boolean => {\n  if (options.moreButton === false && options.dtmfDialerButton !== false) {\n    return true;\n  } else {\n    return false;\n  }\n};\n"]}
+{"version":3,"file":"CommonCallControlBar.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/common/ControlBar/CommonCallControlBar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, {\n  useMemo,\n  useRef,\n  useEffect,\n  useState,\n  useCallback,\n  useImperativeHandle,\n  forwardRef,\n  RefObject\n} from 'react';\nimport { CallAdapterProvider } from '../../CallComposite/adapter/CallAdapterProvider';\nimport { CallAdapter } from '../../CallComposite';\nimport { PeopleButton } from './PeopleButton';\nimport {\n  concatStyleSets,\n  IButton,\n  IStyle,\n  ITheme,\n  mergeStyles,\n  mergeStyleSets,\n  Stack,\n  useTheme\n} from '@fluentui/react';\n/* @conditional-compile-remove(breakout-rooms) */\nimport { PrimaryButton } from '@fluentui/react';\nimport { controlBarContainerStyles } from '../../CallComposite/styles/CallControls.styles';\nimport { callControlsContainerStyles } from '../../CallComposite/styles/CallPage.styles';\nimport { useCallWithChatCompositeStrings } from '../../CallWithChatComposite/hooks/useCallWithChatCompositeStrings';\nimport { BaseCustomStyles, ControlBarButtonStyles } from '@internal/react-components';\nimport { VideoGalleryLayout } from '@internal/react-components';\nimport { ControlBar } from '@internal/react-components';\nimport { Microphone } from '../../CallComposite/components/buttons/Microphone';\nimport { Camera } from '../../CallComposite/components/buttons/Camera';\nimport { ScreenShare } from '../../CallComposite/components/buttons/ScreenShare';\nimport { EndCall } from '../../CallComposite/components/buttons/EndCall';\nimport { MoreButton } from '../MoreButton';\nimport { ContainerRectProps } from '../ContainerRectProps';\nimport {\n  CUSTOM_BUTTON_OPTIONS,\n  generateCustomCallControlBarButton,\n  onFetchCustomButtonPropsTrampoline\n} from './CustomButton';\nimport { DesktopMoreButton } from './DesktopMoreButton';\nimport { isDisabled, _isSafari } from '../../CallComposite/utils';\nimport { HiddenFocusStartPoint } from '../HiddenFocusStartPoint';\nimport { CallWithChatControlOptions } from '../../CallWithChatComposite';\nimport { CommonCallControlOptions } from '../types/CommonCallControlOptions';\nimport { CallingCaptionsSettingsModal } from '../CallingCaptionsSettingsModal';\nimport { RaiseHand } from '../../CallComposite/components/buttons/RaiseHand';\nimport { Reaction } from '../../CallComposite/components/buttons/Reaction';\nimport { useSelector } from '../../CallComposite/hooks/useSelector';\nimport { capabilitySelector } from '../../CallComposite/selectors/capabilitySelector';\nimport { DtmfDialpadButton } from './DtmfDialerButton';\nimport { ExitSpotlightButton } from '../ExitSpotlightButton';\nimport { useLocale } from '../../localization';\nimport { isBoolean } from '../utils';\nimport { getEnvironmentInfo } from '../../CallComposite/selectors/baseSelectors';\nimport { getIsTeamsCall } from '../../CallComposite/selectors/baseSelectors';\n/* @conditional-compile-remove(breakout-rooms) */\nimport { getAssignedBreakoutRoom, getBreakoutRoomSettings } from '../../CallComposite/selectors/baseSelectors';\nimport { callStatusSelector } from '../../CallComposite/selectors/callStatusSelector';\nimport { MeetingConferencePhoneInfoModal } from '@internal/react-components';\n/* @conditional-compile-remove(breakout-rooms) */\nimport { Timer } from './Timer';\nimport { FocusableElement } from '../types/FocusableElement';\n\n/**\n * @private\n */\nexport interface CommonCallControlBarProps {\n  callAdapter: CallAdapter;\n  peopleButtonChecked: boolean;\n  onPeopleButtonClicked: () => void;\n  onMoreButtonClicked?: () => void;\n  mobileView: boolean;\n  disableButtonsForLobbyPage: boolean;\n  callControls?: boolean | CommonCallControlOptions | CallWithChatControlOptions;\n  disableButtonsForHoldScreen?: boolean;\n  onClickShowDialpad?: () => void;\n  onClickVideoEffects?: (showVideoEffects: boolean) => void;\n  isCaptionsSupported?: boolean;\n  isCaptionsOn?: boolean;\n  displayVertical?: boolean;\n  onUserSetOverflowGalleryPositionChange?: (position: 'Responsive' | 'horizontalTop') => void;\n  onUserSetGalleryLayout?: (layout: VideoGalleryLayout) => void;\n  userSetGalleryLayout?: VideoGalleryLayout;\n  peopleButtonRef?: RefObject<IButton>;\n  cameraButtonRef?: RefObject<IButton>;\n  videoBackgroundPickerRef?: RefObject<IButton>;\n  onSetDialpadPage?: () => void;\n  dtmfDialerPresent?: boolean;\n  onStopLocalSpotlight?: () => void;\n  useTeamsCaptions?: boolean;\n  onToggleTeamsMeetingConferenceModal?: () => void;\n  teamsMeetingConferenceModalPresent?: boolean;\n  sidePaneDismissButtonRef?: RefObject<IButton>;\n}\n\nconst inferCommonCallControlOptions = (\n  mobileView: boolean,\n  commonCallControlOptions?: boolean | CallWithChatControlOptions\n): CallWithChatControlOptions | false => {\n  if (commonCallControlOptions === false) {\n    return false;\n  }\n\n  const options =\n    commonCallControlOptions === true || commonCallControlOptions === undefined ? {} : commonCallControlOptions;\n  if (mobileView) {\n    // Set to compressed mode when composite is optimized for mobile\n    options.displayType = 'compact';\n    // Set options to always not show screen share button for mobile\n    options.screenShareButton = false;\n  }\n  return options;\n};\n\ntype CommonCallControlBarMergedProps = CommonCallControlBarProps & ContainerRectProps;\n\n/**\n * @private\n */\nexport const CommonCallControlBar = forwardRef<FocusableElement, CommonCallControlBarMergedProps>(\n  (props, commonCallControlBarRef): JSX.Element => {\n    const theme = useTheme();\n    const rtl = theme.rtl;\n\n    // Create an imperatively callable focus function to allow the parent component to focus the control bar any time.\n    const [hiddenFocusStartElementKey, setHiddenFocusStartElementKey] = useState(0);\n    useImperativeHandle<FocusableElement, FocusableElement>(commonCallControlBarRef, () => ({\n      focus: () => {\n        // To move focus to the hidden element, we increment the key to force a re-mount of the HiddenFocusStartPoint component\n        // which relies on focusOnMount to move focus to the next interact-able element.\n        setHiddenFocusStartElementKey((prevKey) => prevKey + 1);\n      }\n    }));\n\n    const controlBarContainerRef = useRef<HTMLHeadingElement>(null);\n    const sidepaneControlsRef = useRef<HTMLHeadingElement>(null);\n    const controlBarSizeRef = useRef<HTMLHeadingElement>(null);\n\n    const [controlBarButtonsWidth, setControlBarButtonsWidth] = useState(0);\n    const [panelsButtonsWidth, setPanelsButtonsWidth] = useState(0);\n    const [controlBarContainerWidth, setControlBarContainerWidth] = useState(0);\n\n    const [totalButtonsWidth, setTotalButtonsWidth] = useState(0);\n    const [isOutOfSpace, setIsOutOfSpace] = useState(false);\n\n    const callWithChatStrings = useCallWithChatCompositeStrings();\n    const options = inferCommonCallControlOptions(props.mobileView, props.callControls);\n\n    const [showCaptionsSettingsModal, setShowCaptionsSettingsModal] = useState(false);\n\n    // If the hangup capability is not present, we default to true\n    const isHangUpForEveryoneAllowed =\n      useSelector((state) => state.call?.capabilitiesFeature?.capabilities.hangUpForEveryOne.isPresent) ?? true;\n    const isTeams = useSelector(getIsTeamsCall);\n\n    /* @conditional-compile-remove(breakout-rooms) */\n    const assignedBreakoutRoom = useSelector(getAssignedBreakoutRoom);\n    /* @conditional-compile-remove(breakout-rooms) */\n    const breakoutRoomSettings = useSelector(getBreakoutRoomSettings);\n\n    const handleResize = useCallback((): void => {\n      setControlBarButtonsWidth(controlBarContainerRef.current ? controlBarContainerRef.current.offsetWidth : 0);\n      setPanelsButtonsWidth(sidepaneControlsRef.current ? sidepaneControlsRef.current.offsetWidth : 0);\n      setControlBarContainerWidth(controlBarSizeRef.current ? controlBarSizeRef.current.offsetWidth : 0);\n    }, []);\n\n    // on load set inital width\n    useEffect(() => {\n      setControlBarButtonsWidth(controlBarContainerRef.current ? controlBarContainerRef.current.offsetWidth : 0);\n      setPanelsButtonsWidth(sidepaneControlsRef.current ? sidepaneControlsRef.current.offsetWidth : 0);\n      setControlBarContainerWidth(controlBarSizeRef.current ? controlBarSizeRef.current.offsetWidth : 0);\n    }, []);\n\n    // get the current width of control bar buttons and panel control buttons when browser size change\n    useEffect(() => {\n      window.addEventListener('resize', handleResize);\n      return () => window.removeEventListener('resize', handleResize);\n    }, [handleResize]);\n\n    /* when size change, reset total buttons width and compare with the control bar container width\n  if the total width of those buttons exceed container width, do not center the control bar buttons based on parent container width\n  Instead let them take up the remaining white space on the left */\n    useEffect(() => {\n      // white space on the left when control bar buttons are centered based on container width + control bar buttons width + panel control buttons width\n      setTotalButtonsWidth(\n        (controlBarContainerWidth - controlBarButtonsWidth) / 2 + controlBarButtonsWidth + panelsButtonsWidth\n      );\n    }, [controlBarButtonsWidth, panelsButtonsWidth, controlBarContainerWidth]);\n\n    useEffect(() => {\n      setIsOutOfSpace(totalButtonsWidth > controlBarContainerWidth);\n    }, [totalButtonsWidth, controlBarContainerWidth]);\n\n    const openCaptionsSettingsModal = useCallback((): void => {\n      setShowCaptionsSettingsModal(true);\n    }, []);\n\n    const onDismissCaptionsSettings = useCallback((): void => {\n      setShowCaptionsSettingsModal(false);\n    }, []);\n\n    const peopleButtonStrings = useMemo(\n      () => ({\n        label: callWithChatStrings.peopleButtonLabel,\n        selectedLabel: callWithChatStrings.selectedPeopleButtonLabel,\n        tooltipOpenAriaLabel: callWithChatStrings.peopleButtonTooltipOpenAriaLabel,\n        tooltipCloseAriaLabel: callWithChatStrings.peopleButtonTooltipCloseAriaLabel,\n        tooltipOffContent: callWithChatStrings.peopleButtonTooltipOpen,\n        tooltipOnContent: callWithChatStrings.peopleButtonTooltipClose\n      }),\n      [callWithChatStrings]\n    );\n    const moreButtonStrings = useMemo(\n      () => ({\n        label: callWithChatStrings.moreDrawerButtonLabel,\n        tooltipContent: callWithChatStrings.moreDrawerButtonTooltip\n      }),\n      [callWithChatStrings]\n    );\n    const callStrings = useLocale().strings.call;\n    const exitSpotlightButtonStrings = useMemo(\n      () => ({\n        label: callStrings.exitSpotlightButtonLabel,\n        tooltipContent: callStrings.exitSpotlightButtonTooltip\n      }),\n      [callStrings]\n    );\n\n    const [isDeepNoiseSuppressionOn, setDeepNoiseSuppressionOn] = useState<boolean>(false);\n\n    const startDeepNoiseSuppression = useCallback(async () => {\n      await props.callAdapter.startNoiseSuppressionEffect();\n    }, [props.callAdapter]);\n\n    const environmentInfo = useSelector(getEnvironmentInfo);\n    const isSafari = _isSafari(environmentInfo);\n\n    useEffect(() => {\n      if (\n        props.callAdapter.getState().onResolveDeepNoiseSuppressionDependency &&\n        props.callAdapter.getState().deepNoiseSuppressionOnByDefault\n      ) {\n        startDeepNoiseSuppression();\n        setDeepNoiseSuppressionOn(true);\n      }\n    }, [props.callAdapter, startDeepNoiseSuppression]);\n\n    const showNoiseSuppressionButton =\n      props.callAdapter.getState().onResolveDeepNoiseSuppressionDependency &&\n      !props.callAdapter.getState().hideDeepNoiseSuppressionButton &&\n      !isSafari\n        ? true\n        : false;\n\n    const onClickNoiseSuppression = useCallback(async () => {\n      if (isDeepNoiseSuppressionOn) {\n        await props.callAdapter.stopNoiseSuppressionEffect();\n        setDeepNoiseSuppressionOn(false);\n      } else {\n        await props.callAdapter.startNoiseSuppressionEffect();\n        setDeepNoiseSuppressionOn(true);\n      }\n    }, [props.callAdapter, isDeepNoiseSuppressionOn]);\n\n    const centerContainerStyles = useMemo(() => {\n      const styles: BaseCustomStyles = !props.mobileView ? desktopControlBarStyles : {};\n      return mergeStyleSets(styles, {\n        root: {\n          // Enforce a background color on control bar to ensure it matches the composite background color.\n          background: theme.semanticColors.bodyBackground\n        }\n      });\n    }, [props.mobileView, theme.semanticColors.bodyBackground]);\n    const screenShareButtonStyles = useMemo(\n      () => (!props.mobileView ? getDesktopScreenShareButtonStyles(theme) : undefined),\n      [props.mobileView, theme]\n    );\n    const commonButtonStyles = useMemo(\n      () => (!props.mobileView ? getDesktopCommonButtonStyles(theme) : undefined),\n      [props.mobileView, theme]\n    );\n    const endCallButtonStyles = useMemo(\n      () => (!props.mobileView ? getDesktopEndCallButtonStyles(theme) : undefined),\n      [props.mobileView, theme]\n    );\n\n    const controlBarWrapperDesktopStyles: IStyle = useMemo(\n      // only center control bar buttons based on parent container if there are enough space on the screen and not mobile\n      () => (!props.mobileView && !isOutOfSpace ? (rtl ? wrapperDesktopRtlStyles : wrapperDesktopStyles) : {}),\n      [props.mobileView, rtl, isOutOfSpace]\n    );\n\n    // only center control bar buttons based on parent container if there are enough space on the screen and not mobile\n    const controlBarDesktopContainerStyles: IStyle = useMemo(\n      () =>\n        !props.mobileView && !isOutOfSpace\n          ? {\n              position: 'relative',\n              minHeight: '4.5rem',\n              width: '100%',\n              display: 'flex',\n              alignItems: 'center',\n              paddingLeft: '1rem'\n            }\n          : {},\n      [props.mobileView, isOutOfSpace]\n    );\n\n    const customButtons = useMemo(\n      () =>\n        generateCustomCallControlBarButton(\n          onFetchCustomButtonPropsTrampoline(options !== false ? options : undefined),\n          options !== false ? options?.displayType : undefined\n        ),\n      [options]\n    );\n\n    const capabilitiesSelector = useSelector(capabilitySelector);\n    const callState = useSelector(callStatusSelector);\n    const isReactionAllowed =\n      callState.callStatus !== 'Connected' ||\n      !capabilitiesSelector?.capabilities ||\n      capabilitiesSelector.capabilities.useReactions.isPresent;\n\n    /* @conditional-compile-remove(breakout-rooms) */\n    const canReturnToMainMeeting = breakoutRoomSettings && breakoutRoomSettings.disableReturnToMainMeeting === false;\n    /* @conditional-compile-remove(breakout-rooms) */\n    const returnFromBreakoutRoom = useCallback(() => props.callAdapter.returnFromBreakoutRoom(), [props.callAdapter]);\n\n    // when options is false then we want to hide the whole control bar.\n    if (options === false) {\n      return <></>;\n    }\n\n    const sideButtonsPresent =\n      isEnabled(options.peopleButton) || isEnabled(options.chatButton) || customButtons['secondary'] !== undefined;\n\n    const screenShareButtonIsEnabled = isEnabled(options?.screenShareButton);\n\n    const microphoneButtonIsEnabled = isEnabled(options?.microphoneButton);\n\n    const cameraButtonIsEnabled = isEnabled(options?.cameraButton);\n\n    const showExitSpotlightButton = options?.exitSpotlightButton !== false;\n\n    const showCaptionsButton = props.isCaptionsSupported && isEnabled(options.captionsButton);\n\n    const showTeamsMeetingPhoneCallButton = isEnabled(options?.teamsMeetingPhoneCallButton);\n\n    const showDesktopMoreButton =\n      isEnabled(options?.moreButton) &&\n      (false || isEnabled(options?.holdButton) || showCaptionsButton || props.onUserSetGalleryLayout);\n\n    const role = props.callAdapter.getState().call?.role;\n    const hideRaiseHandButtonInRoomsCall =\n      props.callAdapter.getState().isRoomsCall && role && ['Consumer', 'Unknown'].includes(role);\n    const reactionResources = props.callAdapter.getState().reactions;\n\n    return (\n      <div ref={controlBarSizeRef}>\n        <CallAdapterProvider adapter={props.callAdapter}>\n          {showCaptionsSettingsModal && (\n            <CallingCaptionsSettingsModal\n              showCaptionsSettingsModal={showCaptionsSettingsModal}\n              onDismissCaptionsSettings={onDismissCaptionsSettings}\n              changeCaptionLanguage={props.isCaptionsOn && props.useTeamsCaptions}\n            />\n          )}\n          {props.teamsMeetingConferenceModalPresent && (\n            <MeetingConferencePhoneInfoModal\n              conferencePhoneInfoList={props.callAdapter.getState().call?.meetingConference?.conferencePhones ?? []}\n              showModal={props.teamsMeetingConferenceModalPresent}\n              onDismissMeetingPhoneInfoSettings={props.onToggleTeamsMeetingConferenceModal}\n            />\n          )}\n        </CallAdapterProvider>\n        <Stack\n          horizontal\n          reversed={!props.mobileView && !isOutOfSpace}\n          horizontalAlign=\"space-between\"\n          className={mergeStyles(\n            callControlsContainerStyles,\n            controlBarContainerStyles,\n            controlBarDesktopContainerStyles\n          )}\n        >\n          <Stack.Item grow className={mergeStyles(controlBarWrapperDesktopStyles)}>\n            <CallAdapterProvider adapter={props.callAdapter}>\n              <Stack horizontalAlign=\"center\">\n                {/*\n              HiddenFocusStartPoint is a util component used when we can't ensure the initial element for first\n              tab focus is at the top of dom tree. It moves the first-tab focus to the next interact-able element\n              immediately after it in the dom tree.\n              */}\n                <HiddenFocusStartPoint key={hiddenFocusStartElementKey} />\n                <Stack.Item>\n                  {/*\n                  Note: We use the layout=\"horizontal\" instead of dockedBottom because of how we position the\n                  control bar. The control bar exists in a Stack below the MediaGallery. The MediaGallery is\n                  set to grow and fill the remaining space not taken up by the ControlBar. If we were to use\n                  dockedBottom it has position absolute and would therefore float on top of the media gallery,\n                  occluding some of its content.\n                */}\n                  <div ref={controlBarContainerRef}>\n                    <ControlBar\n                      layout={props.displayVertical ? 'vertical' : 'horizontal'}\n                      styles={centerContainerStyles}\n                    >\n                      {\n                        /* @conditional-compile-remove(breakout-rooms) */\n                        !props.mobileView &&\n                          assignedBreakoutRoom &&\n                          assignedBreakoutRoom.state === 'open' &&\n                          assignedBreakoutRoom.call && (\n                            <PrimaryButton\n                              text={callStrings.joinBreakoutRoomButtonLabel}\n                              onClick={async (): Promise<void> => {\n                                assignedBreakoutRoom.join();\n                              }}\n                              styles={commonButtonStyles}\n                            />\n                          )\n                      }\n                      {microphoneButtonIsEnabled && (\n                        <Microphone\n                          displayType={options.displayType}\n                          styles={commonButtonStyles}\n                          splitButtonsForDeviceSelection={!props.mobileView}\n                          disabled={props.disableButtonsForHoldScreen || isDisabled(options.microphoneButton)}\n                          disableTooltip={props.mobileView}\n                          onClickNoiseSuppression={onClickNoiseSuppression}\n                          isDeepNoiseSuppressionOn={isDeepNoiseSuppressionOn}\n                          showNoiseSuppressionButton={showNoiseSuppressionButton}\n                        />\n                      )}\n                      {cameraButtonIsEnabled && (\n                        <Camera\n                          displayType={options.displayType}\n                          styles={commonButtonStyles}\n                          splitButtonsForDeviceSelection={!props.mobileView}\n                          disabled={props.disableButtonsForHoldScreen || isDisabled(options.cameraButton)}\n                          onClickVideoEffects={props.onClickVideoEffects}\n                          componentRef={props.cameraButtonRef}\n                          disableTooltip={props.mobileView}\n                        />\n                      )}\n                      {!props.mobileView &&\n                        isReactionAllowed &&\n                        isEnabled(options.reactionButton) &&\n                        reactionResources && (\n                          <Reaction\n                            displayType={options.displayType}\n                            styles={commonButtonStyles}\n                            disabled={props.disableButtonsForHoldScreen}\n                            reactionResource={reactionResources}\n                          />\n                        )}\n                      {!props.mobileView && isEnabled(options.raiseHandButton) && !hideRaiseHandButtonInRoomsCall && (\n                        <RaiseHand\n                          displayType={options.displayType}\n                          styles={commonButtonStyles}\n                          disabled={props.disableButtonsForHoldScreen || isDisabled(options.microphoneButton)}\n                        />\n                      )}\n                      {showDtmfDialerButton(options) && props.onSetDialpadPage !== undefined && (\n                        <DtmfDialpadButton\n                          styles={commonButtonStyles}\n                          displayType={options.displayType}\n                          onClick={() => {\n                            if (props.onSetDialpadPage !== undefined) {\n                              props.onSetDialpadPage();\n                            }\n                          }}\n                        />\n                      )}\n                      {showExitSpotlightButton && props.onStopLocalSpotlight && (\n                        <ExitSpotlightButton\n                          displayType={options.displayType}\n                          onClick={props.onStopLocalSpotlight}\n                          styles={commonButtonStyles}\n                          strings={exitSpotlightButtonStrings}\n                        />\n                      )}\n                      {screenShareButtonIsEnabled && (\n                        <ScreenShare\n                          option={options.screenShareButton}\n                          displayType={options.displayType}\n                          styles={screenShareButtonStyles}\n                          disabled={props.disableButtonsForHoldScreen || isDisabled(options.screenShareButton)}\n                        />\n                      )}\n                      {customButtons['primary']\n                        ?.slice(\n                          0,\n                          props.mobileView\n                            ? CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_MOBILE_CUSTOM_BUTTONS\n                            : CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_DESKTOP_CUSTOM_BUTTONS\n                        )\n                        .map((CustomButton, i) => {\n                          return (\n                            <CustomButton\n                              key={`primary-custom-button-${i}`}\n                              styles={commonButtonStyles}\n                              showLabel={options.displayType !== 'compact'}\n                              disableTooltip={props.mobileView}\n                            />\n                          );\n                        })}\n                      {props.mobileView && (\n                        <MoreButton\n                          data-ui-id=\"common-call-composite-more-button\"\n                          strings={moreButtonStrings}\n                          onClick={props.onMoreButtonClicked}\n                          disabled={props.disableButtonsForLobbyPage}\n                          disableTooltip={props.mobileView}\n                        />\n                      )}\n                      {!props.mobileView && showDesktopMoreButton && (\n                        <DesktopMoreButton\n                          disableButtonsForHoldScreen={props.disableButtonsForHoldScreen}\n                          styles={commonButtonStyles}\n                          onClickShowDialpad={props.onClickShowDialpad}\n                          callControls={props.callControls}\n                          isCaptionsSupported={showCaptionsButton}\n                          onCaptionsSettingsClick={openCaptionsSettingsModal}\n                          onUserSetOverflowGalleryPositionChange={props.onUserSetOverflowGalleryPositionChange}\n                          onUserSetGalleryLayout={props.onUserSetGalleryLayout}\n                          userSetGalleryLayout={props.userSetGalleryLayout}\n                          dtmfDialerPresent={props.dtmfDialerPresent}\n                          onSetDialpadPage={props.onSetDialpadPage}\n                          teamsMeetingPhoneCallEnable={showTeamsMeetingPhoneCallButton}\n                          onMeetingPhoneInfoClick={props.onToggleTeamsMeetingConferenceModal}\n                        />\n                      )}\n                      <EndCall\n                        displayType=\"compact\"\n                        mobileView={props.mobileView}\n                        styles={endCallButtonStyles}\n                        enableEndCallMenu={\n                          !isBoolean(props.callControls) &&\n                          !isBoolean(props.callControls?.endCallButton) &&\n                          !props.mobileView &&\n                          isHangUpForEveryoneAllowed &&\n                          !isTeams && // Temporary disable it for Teams call, since capability does not give the right value\n                          props.callControls?.endCallButton?.hangUpForEveryone === 'endCallOptions' &&\n                          // Only show the end call menu when the call is connected, user should not be able to end the call for everyone\n                          // when they are not actively in the call to communicate they will.\n                          callState.callStatus === 'Connected' &&\n                          /* @conditional-compile-remove(breakout-rooms) */\n                          !canReturnToMainMeeting\n                        }\n                        disableEndCallModal={\n                          !isBoolean(props.callControls) &&\n                          !isBoolean(props.callControls?.endCallButton) &&\n                          props.callControls?.endCallButton?.disableEndCallModal\n                        }\n                        /* @conditional-compile-remove(breakout-rooms) */\n                        returnFromBreakoutRoom={canReturnToMainMeeting ? returnFromBreakoutRoom : undefined}\n                      />\n                    </ControlBar>\n                  </div>\n                </Stack.Item>\n              </Stack>\n            </CallAdapterProvider>\n          </Stack.Item>\n          {!props.mobileView && sideButtonsPresent && (\n            <Stack.Item>\n              <div ref={sidepaneControlsRef}>\n                <Stack horizontal className={!props.mobileView ? mergeStyles(desktopButtonContainerStyle) : undefined}>\n                  {isEnabled(options?.peopleButton) && (\n                    <PeopleButton\n                      checked={props.peopleButtonChecked}\n                      ariaLabel={peopleButtonStrings.label}\n                      showLabel={options.displayType !== 'compact'}\n                      onClick={props.onPeopleButtonClicked}\n                      data-ui-id=\"common-call-composite-people-button\"\n                      disabled={\n                        props.disableButtonsForLobbyPage ||\n                        props.disableButtonsForHoldScreen ||\n                        isDisabled(options.peopleButton)\n                      }\n                      strings={peopleButtonStrings}\n                      styles={commonButtonStyles}\n                      componentRef={props.peopleButtonRef}\n                      chatButtonPresent={isEnabled(options.chatButton)}\n                      peoplePaneDismissButtonRef={props.sidePaneDismissButtonRef}\n                    />\n                  )}\n                  {customButtons['secondary']\n                    ?.slice(0, CUSTOM_BUTTON_OPTIONS.MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS)\n                    .map((CustomButton, i) => {\n                      return (\n                        <CustomButton\n                          key={`secondary-custom-button-${i}`}\n                          styles={commonButtonStyles}\n                          showLabel={options.displayType !== 'compact'}\n                        />\n                      );\n                    })}\n                </Stack>\n              </div>\n            </Stack.Item>\n          )}\n          {\n            /* @conditional-compile-remove(breakout-rooms) */\n            breakoutRoomSettings?.roomEndTime && !props.mobileView && !isOutOfSpace && (\n              <Stack.Item>\n                <Timer timeStampInfo={breakoutRoomSettings?.roomEndTime.toString()} />\n              </Stack.Item>\n            )\n          }\n        </Stack>\n      </div>\n    );\n  }\n);\n\nconst desktopButtonContainerStyle: IStyle = {\n  padding: '0.75rem',\n  columnGap: '0.5rem'\n};\n\nconst desktopControlBarStyles: BaseCustomStyles = {\n  root: desktopButtonContainerStyle\n};\n\n{\n  /*\n    Styling here to ensure the control bar buttons stay in the center of the parent component (control Container) regardless of its siblings\n    Need to add 'reversed' to parent container because the styling here reverse the position of the two stack items \n  */\n}\nconst wrapperDesktopStyles: IStyle = {\n  position: 'absolute',\n  left: '50%',\n  transform: 'translate(-50%, 0)'\n};\n\nconst wrapperDesktopRtlStyles: IStyle = {\n  position: 'absolute',\n  right: '50%',\n  transform: 'translate(-50%, 0)'\n};\n\n/** @private */\nexport const getDesktopCommonButtonStyles = (theme: ITheme): ControlBarButtonStyles => ({\n  root: {\n    border: `solid 1px ${theme.palette.neutralQuaternaryAlt}`,\n    borderRadius: theme.effects.roundedCorner4,\n    minHeight: '2.5rem',\n    maxWidth: '12rem' // allot extra space than the regular ControlBarButton. This is to give extra room to have the icon beside the text.\n  },\n  flexContainer: {\n    display: 'flex',\n    flexFlow: 'row nowrap'\n  },\n  textContainer: {\n    // Override the default so that label doesn't introduce a new block.\n    display: 'inline',\n\n    // Ensure width is set to permit child to show ellipsis when there is a label that is too long\n    maxWidth: '100%'\n  },\n  label: {\n    fontSize: theme.fonts.medium.fontSize,\n\n    // Ensure there is enough space between the icon and text to allow for the unread messages badge in the chat button\n    marginLeft: '0.625rem',\n\n    // Ensure letters that go above and below the standard text line like 'g', 'y', 'j' are not clipped\n    lineHeight: '1.5rem',\n\n    // Do not allow very long button texts to ruin the control bar experience, instead ensure long text is truncated and shows ellipsis\n    display: 'block',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    overflow: 'hidden'\n  },\n  splitButtonMenuButton: {\n    border: `solid 1px ${theme.palette.neutralQuaternaryAlt}`,\n    borderTopRightRadius: theme.effects.roundedCorner4,\n    borderBottomRightRadius: theme.effects.roundedCorner4,\n    borderTopLeftRadius: '0',\n    borderBottomLeftRadius: '0'\n  },\n  splitButtonMenuButtonChecked: {\n    // Default colors the menu half similarly for :hover and when button is checked.\n    // To align with how the left-half is styled, override the checked style.\n    background: 'none'\n  }\n});\n\nconst getDesktopScreenShareButtonStyles = (theme: ITheme): ControlBarButtonStyles => {\n  const overrideStyles = {\n    border: 'none',\n    background: theme.palette.themePrimary,\n    color: theme.palette.white,\n    '* > svg': { fill: theme.palette.white },\n    '@media (forced-colors: active)': {\n      border: '1px solid',\n      borderColor: theme.palette.black\n    }\n  };\n  const overrides: ControlBarButtonStyles = {\n    rootChecked: overrideStyles,\n    rootCheckedHovered: overrideStyles\n  };\n  return concatStyleSets(getDesktopCommonButtonStyles(theme), overrides);\n};\n\nconst getDesktopEndCallButtonStyles = (theme: ITheme): ControlBarButtonStyles => {\n  const overrides: ControlBarButtonStyles = {\n    root: {\n      // Suppress border around the dark-red button.\n      border: 'none'\n    },\n    rootFocused: {\n      '@media (forced-colors: active)': {\n        background: 'highlight',\n        color: 'highlightText',\n        borderColor: theme.palette.black,\n        borderRadius: 'unset',\n        outline: `3px solid ${theme.palette.black}`\n      }\n    },\n    icon: {\n      '@media (forced-colors: active)': {\n        ':focused': {\n          color: theme.palette.white\n        }\n      }\n    }\n  };\n  return concatStyleSets(getDesktopCommonButtonStyles(theme), overrides);\n};\n\nconst isEnabled = (option: unknown): boolean => option !== false;\n\nconst showDtmfDialerButton = (options: CommonCallControlOptions | CallWithChatControlOptions): boolean => {\n  if (options.moreButton === false && options.dtmfDialerButton !== false) {\n    return true;\n  } else {\n    return false;\n  }\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/common/ControlBar/PeopleButton.d.ts

@@ -1,7 +1,16 @@
-/// <reference types="react" />
+import { RefObject } from 'react';
 import { ControlBarButtonProps } from "../../../../../react-components/src";
+import { IButton } from '@fluentui/react';
 /**
  * @private
+ * props for the PeopleButton component
  */
-export declare const PeopleButton: (props: ControlBarButtonProps) => JSX.Element;
+export interface PeopleButtonProps extends ControlBarButtonProps {
+    peoplePaneDismissButtonRef?: RefObject<IButton>;
+    chatButtonPresent?: boolean;
+}
+/**
+ * @private
+ */
+export declare const PeopleButton: (props: PeopleButtonProps) => JSX.Element;
 //# sourceMappingURL=PeopleButton.d.ts.map

package/dist/dist-esm/react-composites/src/composites/common/ControlBar/PeopleButton.js

@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { ControlBarButton, useTheme } from "../../../../../react-components/src";
 import { concatStyleSets } from '@fluentui/react';
 import { CallCompositeIcon } from '../icons';
@@ -9,7 +9,7 @@ const icon = () => React.createElement(CallCompositeIcon, { iconName: 'ControlBa
  * @private
  */
 export const PeopleButton = (props) => {
-    const { strings, onRenderOnIcon, onRenderOffIcon, onClick } = props;
+    const { strings, onRenderOnIcon, onRenderOffIcon, onClick, peoplePaneDismissButtonRef, chatButtonPresent } = props;
     const theme = useTheme();
     const styles = useMemo(() => {
         var _a;
@@ -19,6 +19,21 @@ export const PeopleButton = (props) => {
             }
         }, (_a = props.styles) !== null && _a !== void 0 ? _a : {});
     }, [props.styles, theme.palette.neutralLight]);
-    return (React.createElement(ControlBarButton, Object.assign({}, props, { strings: strings, labelKey: 'peopleButtonLabelKey', onRenderOnIcon: onRenderOnIcon !== null && onRenderOnIcon !== void 0 ? onRenderOnIcon : icon, onRenderOffIcon: onRenderOffIcon !== null && onRenderOffIcon !== void 0 ? onRenderOffIcon : icon, onClick: onClick, styles: styles })));
+    const handleTab = useCallback((event) => {
+        if (event.key === 'Tab' && !event.shiftKey && (peoplePaneDismissButtonRef === null || peoplePaneDismissButtonRef === void 0 ? void 0 : peoplePaneDismissButtonRef.current) && !chatButtonPresent) {
+            peoplePaneDismissButtonRef.current.focus();
+            event.preventDefault();
+        }
+    }, [peoplePaneDismissButtonRef, chatButtonPresent]);
+    const handleClick = useCallback((event) => {
+        var _a;
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        if (chatButtonPresent) {
+            console.log(peoplePaneDismissButtonRef);
+            (_a = peoplePaneDismissButtonRef === null || peoplePaneDismissButtonRef === void 0 ? void 0 : peoplePaneDismissButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            event.preventDefault();
+        }
+    }, [chatButtonPresent, onClick, peoplePaneDismissButtonRef]);
+    return (React.createElement(ControlBarButton, Object.assign({}, props, { strings: strings, labelKey: 'peopleButtonLabelKey', onRenderOnIcon: onRenderOnIcon !== null && onRenderOnIcon !== void 0 ? onRenderOnIcon : icon, onRenderOffIcon: onRenderOffIcon !== null && onRenderOffIcon !== void 0 ? onRenderOffIcon : icon, onClick: handleClick, onKeyDown: handleTab, styles: styles })));
 };
 //# sourceMappingURL=PeopleButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PeopleButton.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/common/ControlBar/PeopleButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,gBAAgB,EAAiD,QAAQ,EAAE,4CAAmC;AACvH,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C,MAAM,IAAI,GAAG,GAAgB,EAAE,CAAC,oBAAC,iBAAiB,IAAC,QAAQ,EAAE,wBAAwB,GAAI,CAAC;AAE1F;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAA4B,EAAe,EAAE;IACxE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IACpE,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,MAAM,GAA2B,OAAO,CAC5C,GAAG,EAAE;;QACH,OAAA,eAAe,CACb;YACE,WAAW,EAAE;gBACX,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;aACvC;SACF,EACD,MAAA,KAAK,CAAC,MAAM,mCAAI,EAAE,CACnB,CAAA;KAAA,EACH,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,CAC3C,CAAC;IAEF,OAAO,CACL,oBAAC,gBAAgB,oBACX,KAAK,IACT,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,sBAAsB,EAChC,cAAc,EAAE,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,IAAI,EACtC,eAAe,EAAE,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,IAAI,EACxC,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,IACd,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useMemo } from 'react';\nimport { ControlBarButton, ControlBarButtonProps, ControlBarButtonStyles, useTheme } from '@internal/react-components';\nimport { concatStyleSets } from '@fluentui/react';\nimport { CallCompositeIcon } from '../icons';\n\nconst icon = (): JSX.Element => <CallCompositeIcon iconName={'ControlBarPeopleButton'} />;\n\n/**\n * @private\n */\nexport const PeopleButton = (props: ControlBarButtonProps): JSX.Element => {\n  const { strings, onRenderOnIcon, onRenderOffIcon, onClick } = props;\n  const theme = useTheme();\n  const styles: ControlBarButtonStyles = useMemo(\n    () =>\n      concatStyleSets(\n        {\n          rootChecked: {\n            background: theme.palette.neutralLight\n          }\n        },\n        props.styles ?? {}\n      ),\n    [props.styles, theme.palette.neutralLight]\n  );\n\n  return (\n    <ControlBarButton\n      {...props}\n      strings={strings}\n      labelKey={'peopleButtonLabelKey'}\n      onRenderOnIcon={onRenderOnIcon ?? icon}\n      onRenderOffIcon={onRenderOffIcon ?? icon}\n      onClick={onClick}\n      styles={styles}\n    />\n  );\n};\n"]}
+{"version":3,"file":"PeopleButton.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/common/ControlBar/PeopleButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAa,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAiD,QAAQ,EAAE,4CAAmC;AACvH,OAAO,EAAE,eAAe,EAAW,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C,MAAM,IAAI,GAAG,GAAgB,EAAE,CAAC,oBAAC,iBAAiB,IAAC,QAAQ,EAAE,wBAAwB,GAAI,CAAC;AAW1F;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAe,EAAE;IACpE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,OAAO,EAAE,0BAA0B,EAAE,iBAAiB,EAAE,GAAG,KAAK,CAAC;IACnH,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,MAAM,GAA2B,OAAO,CAC5C,GAAG,EAAE;;QACH,OAAA,eAAe,CACb;YACE,WAAW,EAAE;gBACX,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;aACvC;SACF,EACD,MAAA,KAAK,CAAC,MAAM,mCAAI,EAAE,CACnB,CAAA;KAAA,EACH,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,CAC3C,CAAC;IAEF,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,KAAuC,EAAE,EAAE;QAC1C,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,KAAI,0BAA0B,aAA1B,0BAA0B,uBAA1B,0BAA0B,CAAE,OAAO,CAAA,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACxG,0BAA0B,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;YAC3C,KAAK,CAAC,cAAc,EAAE,CAAC;QACzB,CAAC;IACH,CAAC,EACD,CAAC,0BAA0B,EAAE,iBAAiB,CAAC,CAChD,CAAC;IAEF,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,KAAoC,EAAE,EAAE;;QACvC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,KAAK,CAAC,CAAC;QACjB,IAAI,iBAAiB,EAAE,CAAC;YACtB,OAAO,CAAC,GAAG,CAAC,0BAA0B,CAAC,CAAC;YACxC,MAAA,0BAA0B,aAA1B,0BAA0B,uBAA1B,0BAA0B,CAAE,OAAO,0CAAE,KAAK,EAAE,CAAC;YAC7C,KAAK,CAAC,cAAc,EAAE,CAAC;QACzB,CAAC;IACH,CAAC,EACD,CAAC,iBAAiB,EAAE,OAAO,EAAE,0BAA0B,CAAC,CACzD,CAAC;IAEF,OAAO,CACL,oBAAC,gBAAgB,oBACX,KAAK,IACT,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,sBAAsB,EAChC,cAAc,EAAE,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,IAAI,EACtC,eAAe,EAAE,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,IAAI,EACxC,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,IACd,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useMemo, RefObject } from 'react';\nimport { ControlBarButton, ControlBarButtonProps, ControlBarButtonStyles, useTheme } from '@internal/react-components';\nimport { concatStyleSets, IButton } from '@fluentui/react';\nimport { CallCompositeIcon } from '../icons';\n\nconst icon = (): JSX.Element => <CallCompositeIcon iconName={'ControlBarPeopleButton'} />;\n\n/**\n * @private\n * props for the PeopleButton component\n */\nexport interface PeopleButtonProps extends ControlBarButtonProps {\n  peoplePaneDismissButtonRef?: RefObject<IButton>;\n  chatButtonPresent?: boolean;\n}\n\n/**\n * @private\n */\nexport const PeopleButton = (props: PeopleButtonProps): JSX.Element => {\n  const { strings, onRenderOnIcon, onRenderOffIcon, onClick, peoplePaneDismissButtonRef, chatButtonPresent } = props;\n  const theme = useTheme();\n  const styles: ControlBarButtonStyles = useMemo(\n    () =>\n      concatStyleSets(\n        {\n          rootChecked: {\n            background: theme.palette.neutralLight\n          }\n        },\n        props.styles ?? {}\n      ),\n    [props.styles, theme.palette.neutralLight]\n  );\n\n  const handleTab = useCallback(\n    (event: React.KeyboardEvent<HTMLElement>) => {\n      if (event.key === 'Tab' && !event.shiftKey && peoplePaneDismissButtonRef?.current && !chatButtonPresent) {\n        peoplePaneDismissButtonRef.current.focus();\n        event.preventDefault();\n      }\n    },\n    [peoplePaneDismissButtonRef, chatButtonPresent]\n  );\n\n  const handleClick = useCallback(\n    (event: React.MouseEvent<HTMLElement>) => {\n      onClick?.(event);\n      if (chatButtonPresent) {\n        console.log(peoplePaneDismissButtonRef);\n        peoplePaneDismissButtonRef?.current?.focus();\n        event.preventDefault();\n      }\n    },\n    [chatButtonPresent, onClick, peoplePaneDismissButtonRef]\n  );\n\n  return (\n    <ControlBarButton\n      {...props}\n      strings={strings}\n      labelKey={'peopleButtonLabelKey'}\n      onRenderOnIcon={onRenderOnIcon ?? icon}\n      onRenderOffIcon={onRenderOffIcon ?? icon}\n      onClick={handleClick}\n      onKeyDown={handleTab}\n      styles={styles}\n    />\n  );\n};\n"]}

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

@@ -3,7 +3,7 @@
 import React, { useMemo } from 'react';
 import { participantListContainerStyle, participantListMobileStyle, participantListStack, participantListStyle, participantListWrapper, displayNameStyles, headingMoreButtonStyles } from './styles/ParticipantContainer.styles';
 import { ParticipantList } from "../../../../react-components/src";
-import { FocusZone, Stack, Text, TooltipHost, TooltipOverflowMode, getId, useTheme } from '@fluentui/react';
+import { Stack, Text, TooltipHost, TooltipOverflowMode, getId, useTheme } from '@fluentui/react';
 import { DefaultButton } from '@fluentui/react';
 import { AvatarPersona } from './AvatarPersona';
 import { useId } from '@fluentui/react-hooks';
@@ -44,8 +44,8 @@ export const ParticipantListWithHeading = (props) => {
                 /* @conditional-compile-remove(total-participant-count) */ totalParticipantCount))),
             (onClickHeadingMoreButton ||
                 ((headingMoreButtonMenuProps === null || headingMoreButtonMenuProps === void 0 ? void 0 : headingMoreButtonMenuProps.items) && headingMoreButtonMenuProps.items.length > 0)) && (React.createElement(Stack.Item, null,
-                React.createElement(DefaultButton, { autoFocus: true, "data-ui-id": "people-pane-header-more-button", ariaLabel: headingMoreButtonAriaLabel, styles: headingMoreButtonStyles(theme), iconProps: { iconName: 'PeoplePaneMoreButton' }, onClick: onClickHeadingMoreButton ? () => onClickHeadingMoreButton() : undefined, menuProps: props.onClickHeadingMoreButton ? undefined : props.headingMoreButtonMenuProps, onRenderMenuIcon: () => null })))),
-        React.createElement(FocusZone, { className: participantListContainerStyle, shouldFocusOnMount: true },
+                React.createElement(DefaultButton, { "data-ui-id": "people-pane-header-more-button", ariaLabel: headingMoreButtonAriaLabel, styles: headingMoreButtonStyles(theme), iconProps: { iconName: 'PeoplePaneMoreButton' }, onClick: onClickHeadingMoreButton ? () => onClickHeadingMoreButton() : undefined, menuProps: props.onClickHeadingMoreButton ? undefined : props.headingMoreButtonMenuProps, onRenderMenuIcon: () => null })))),
+        React.createElement(Stack, { className: participantListContainerStyle },
             React.createElement(ParticipantList, Object.assign({}, participantListProps, { pinnedParticipants: pinnedParticipants, styles: props.isMobile ? participantListMobileStyle : participantListStyle, onRenderAvatar: (userId, options) => (React.createElement(React.Fragment, null,
                     React.createElement(AvatarPersona, Object.assign({ "data-ui-id": "chat-composite-participant-custom-avatar", userId: userId }, options, { hidePersonaDetails: !!(options === null || options === void 0 ? void 0 : options.text), dataProvider: onFetchAvatarPersonaData, allowActiveBorder: true })),
                     (options === null || options === void 0 ? void 0 : options.text) && (React.createElement("div", { style: displayNameStyles },

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

@@ -1 +1 @@
-{"version":3,"file":"ParticipantContainer.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/ParticipantContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useMemo } from 'react';\nimport {\n  participantListContainerStyle,\n  participantListMobileStyle,\n  participantListStack,\n  participantListStyle,\n  participantListWrapper,\n  displayNameStyles,\n  headingMoreButtonStyles\n} from './styles/ParticipantContainer.styles';\nimport { ParticipantList, ParticipantListProps, ParticipantMenuItemsCallback } from '@internal/react-components';\nimport { FocusZone, Stack, Text, TooltipHost, TooltipOverflowMode, getId, useTheme } from '@fluentui/react';\nimport { DefaultButton, IContextualMenuProps } from '@fluentui/react';\nimport { AvatarPersona, AvatarPersonaDataCallback } from './AvatarPersona';\nimport { useId } from '@fluentui/react-hooks';\nimport { _formatString } from '@internal/acs-ui-common';\n\ntype ParticipantContainerProps = {\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  participantListProps: ParticipantListProps;\n  title?: string;\n  isMobile?: boolean;\n};\n\n/**\n * @private\n */\nexport const ParticipantContainer = (props: ParticipantContainerProps): JSX.Element => {\n  const theme = useTheme();\n  const participantListWrapperClassName = useMemo(() => participantListWrapper(theme), [theme]);\n  return (\n    <Stack className={participantListWrapperClassName}>\n      <ParticipantListWithHeading {...props} />\n    </Stack>\n  );\n};\n\n/**\n * @private\n */\nexport const ParticipantListWithHeading = (props: {\n  participantListProps: ParticipantListProps;\n  title?: string;\n  isMobile?: boolean;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  headingMoreButtonAriaLabel?: string;\n  onClickHeadingMoreButton?: () => void;\n  headingMoreButtonMenuProps?: IContextualMenuProps;\n  pinnedParticipants?: string[];\n}): JSX.Element => {\n  const {\n    onFetchAvatarPersonaData,\n    onFetchParticipantMenuItems,\n    title,\n    participantListProps,\n    headingMoreButtonAriaLabel,\n    onClickHeadingMoreButton,\n    headingMoreButtonMenuProps,\n    pinnedParticipants\n  } = props;\n  const subheadingUniqueId = useId();\n  const theme = useTheme();\n  /* @conditional-compile-remove(total-participant-count) */\n  const totalParticipantCount = participantListProps.totalParticipantCount;\n  const tooltipId: string = getId('text-tooltip');\n  const subheadingStyleThemed = useMemo(\n    () => ({\n      root: {\n        h2: {\n          color: theme.palette.neutralSecondary,\n          margin: props.isMobile ? '0.5rem 1rem' : '0.5rem',\n          fontSize: theme.fonts.smallPlus.fontSize,\n          fontWeight: 'normal'\n        }\n      }\n    }),\n    [theme.palette.neutralSecondary, theme.fonts.smallPlus.fontSize, props.isMobile]\n  );\n\n  return (\n    <Stack className={participantListStack}>\n      <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\">\n        <Stack.Item grow styles={subheadingStyleThemed} aria-label={title} id={subheadingUniqueId}>\n          <h2>\n            {paneTitleTrampoline(\n              title ?? '',\n              /* @conditional-compile-remove(total-participant-count) */ totalParticipantCount\n            )}\n          </h2>\n        </Stack.Item>\n        {(onClickHeadingMoreButton ||\n          (headingMoreButtonMenuProps?.items && headingMoreButtonMenuProps.items.length > 0)) && (\n          <Stack.Item>\n            <DefaultButton\n              autoFocus\n              data-ui-id=\"people-pane-header-more-button\"\n              ariaLabel={headingMoreButtonAriaLabel}\n              styles={headingMoreButtonStyles(theme)}\n              iconProps={{ iconName: 'PeoplePaneMoreButton' }}\n              onClick={onClickHeadingMoreButton ? () => onClickHeadingMoreButton() : undefined}\n              menuProps={props.onClickHeadingMoreButton ? undefined : props.headingMoreButtonMenuProps}\n              onRenderMenuIcon={() => null}\n            />\n          </Stack.Item>\n        )}\n      </Stack>\n      <FocusZone className={participantListContainerStyle} shouldFocusOnMount={true}>\n        <ParticipantList\n          {...participantListProps}\n          pinnedParticipants={pinnedParticipants}\n          styles={props.isMobile ? participantListMobileStyle : participantListStyle}\n          onRenderAvatar={(userId, options) => (\n            <>\n              <AvatarPersona\n                data-ui-id=\"chat-composite-participant-custom-avatar\"\n                userId={userId}\n                {...options}\n                {...{ hidePersonaDetails: !!options?.text }}\n                dataProvider={onFetchAvatarPersonaData}\n                allowActiveBorder={true}\n              />\n              {options?.text && (\n                <div style={displayNameStyles}>\n                  <TooltipHost content={options?.text} id={tooltipId} overflowMode={TooltipOverflowMode.Parent}>\n                    <Text nowrap={false} aria-labelledby={tooltipId}>\n                      {options?.text}\n                    </Text>\n                  </TooltipHost>\n                </div>\n              )}\n            </>\n          )}\n          onFetchParticipantMenuItems={onFetchParticipantMenuItems}\n          showParticipantOverflowTooltip={!props.isMobile}\n          participantAriaLabelledBy={subheadingUniqueId}\n        />\n      </FocusZone>\n    </Stack>\n  );\n};\n\nconst paneTitleTrampoline = (paneTitle: string, totalParticipantCount?: number): string => {\n  const participantCountString = totalParticipantCount\n    ? { numberOfPeople: `(${totalParticipantCount})` }\n    : { numberOfPeople: ' ' };\n  return _formatString(paneTitle, participantCountString);\n};\n"]}
+{"version":3,"file":"ParticipantContainer.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/ParticipantContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useMemo } from 'react';\nimport {\n  participantListContainerStyle,\n  participantListMobileStyle,\n  participantListStack,\n  participantListStyle,\n  participantListWrapper,\n  displayNameStyles,\n  headingMoreButtonStyles\n} from './styles/ParticipantContainer.styles';\nimport { ParticipantList, ParticipantListProps, ParticipantMenuItemsCallback } from '@internal/react-components';\nimport { Stack, Text, TooltipHost, TooltipOverflowMode, getId, useTheme } from '@fluentui/react';\nimport { DefaultButton, IContextualMenuProps } from '@fluentui/react';\nimport { AvatarPersona, AvatarPersonaDataCallback } from './AvatarPersona';\nimport { useId } from '@fluentui/react-hooks';\nimport { _formatString } from '@internal/acs-ui-common';\n\ntype ParticipantContainerProps = {\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  participantListProps: ParticipantListProps;\n  title?: string;\n  isMobile?: boolean;\n};\n\n/**\n * @private\n */\nexport const ParticipantContainer = (props: ParticipantContainerProps): JSX.Element => {\n  const theme = useTheme();\n  const participantListWrapperClassName = useMemo(() => participantListWrapper(theme), [theme]);\n  return (\n    <Stack className={participantListWrapperClassName}>\n      <ParticipantListWithHeading {...props} />\n    </Stack>\n  );\n};\n\n/**\n * @private\n */\nexport const ParticipantListWithHeading = (props: {\n  participantListProps: ParticipantListProps;\n  title?: string;\n  isMobile?: boolean;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  headingMoreButtonAriaLabel?: string;\n  onClickHeadingMoreButton?: () => void;\n  headingMoreButtonMenuProps?: IContextualMenuProps;\n  pinnedParticipants?: string[];\n}): JSX.Element => {\n  const {\n    onFetchAvatarPersonaData,\n    onFetchParticipantMenuItems,\n    title,\n    participantListProps,\n    headingMoreButtonAriaLabel,\n    onClickHeadingMoreButton,\n    headingMoreButtonMenuProps,\n    pinnedParticipants\n  } = props;\n  const subheadingUniqueId = useId();\n  const theme = useTheme();\n  /* @conditional-compile-remove(total-participant-count) */\n  const totalParticipantCount = participantListProps.totalParticipantCount;\n  const tooltipId: string = getId('text-tooltip');\n  const subheadingStyleThemed = useMemo(\n    () => ({\n      root: {\n        h2: {\n          color: theme.palette.neutralSecondary,\n          margin: props.isMobile ? '0.5rem 1rem' : '0.5rem',\n          fontSize: theme.fonts.smallPlus.fontSize,\n          fontWeight: 'normal'\n        }\n      }\n    }),\n    [theme.palette.neutralSecondary, theme.fonts.smallPlus.fontSize, props.isMobile]\n  );\n\n  return (\n    <Stack className={participantListStack}>\n      <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\">\n        <Stack.Item grow styles={subheadingStyleThemed} aria-label={title} id={subheadingUniqueId}>\n          <h2>\n            {paneTitleTrampoline(\n              title ?? '',\n              /* @conditional-compile-remove(total-participant-count) */ totalParticipantCount\n            )}\n          </h2>\n        </Stack.Item>\n        {(onClickHeadingMoreButton ||\n          (headingMoreButtonMenuProps?.items && headingMoreButtonMenuProps.items.length > 0)) && (\n          <Stack.Item>\n            <DefaultButton\n              data-ui-id=\"people-pane-header-more-button\"\n              ariaLabel={headingMoreButtonAriaLabel}\n              styles={headingMoreButtonStyles(theme)}\n              iconProps={{ iconName: 'PeoplePaneMoreButton' }}\n              onClick={onClickHeadingMoreButton ? () => onClickHeadingMoreButton() : undefined}\n              menuProps={props.onClickHeadingMoreButton ? undefined : props.headingMoreButtonMenuProps}\n              onRenderMenuIcon={() => null}\n            />\n          </Stack.Item>\n        )}\n      </Stack>\n      <Stack className={participantListContainerStyle}>\n        <ParticipantList\n          {...participantListProps}\n          pinnedParticipants={pinnedParticipants}\n          styles={props.isMobile ? participantListMobileStyle : participantListStyle}\n          onRenderAvatar={(userId, options) => (\n            <>\n              <AvatarPersona\n                data-ui-id=\"chat-composite-participant-custom-avatar\"\n                userId={userId}\n                {...options}\n                {...{ hidePersonaDetails: !!options?.text }}\n                dataProvider={onFetchAvatarPersonaData}\n                allowActiveBorder={true}\n              />\n              {options?.text && (\n                <div style={displayNameStyles}>\n                  <TooltipHost content={options?.text} id={tooltipId} overflowMode={TooltipOverflowMode.Parent}>\n                    <Text nowrap={false} aria-labelledby={tooltipId}>\n                      {options?.text}\n                    </Text>\n                  </TooltipHost>\n                </div>\n              )}\n            </>\n          )}\n          onFetchParticipantMenuItems={onFetchParticipantMenuItems}\n          showParticipantOverflowTooltip={!props.isMobile}\n          participantAriaLabelledBy={subheadingUniqueId}\n        />\n      </Stack>\n    </Stack>\n  );\n};\n\nconst paneTitleTrampoline = (paneTitle: string, totalParticipantCount?: number): string => {\n  const participantCountString = totalParticipantCount\n    ? { numberOfPeople: `(${totalParticipantCount})` }\n    : { numberOfPeople: ' ' };\n  return _formatString(paneTitle, participantCountString);\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/common/SidePaneHeader.d.ts

@@ -1,4 +1,5 @@
-/// <reference types="react" />
+import { IButton } from '@fluentui/react';
+import { RefObject } from 'react';
 /**
  * @private
  */
@@ -8,5 +9,8 @@ export declare const SidePaneHeader: (props: {
     dismissSidePaneButtonAriaDescription?: string;
     onClose: () => void;
     mobileView: boolean;
+    paneOpenerButton?: RefObject<IButton>;
+    dismissButtonComponentRef?: RefObject<IButton>;
+    chatButtonPresent?: boolean;
 }) => JSX.Element;
 //# sourceMappingURL=SidePaneHeader.d.ts.map

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

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 import { CommandBarButton, DefaultButton, Stack, concatStyleSets } from '@fluentui/react';
 import { useTheme } from "../../../../react-components/src";
-import React, { useMemo } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import { sidePaneHeaderContainerStyles, sidePaneHeaderStyles } from '../common/styles/ParticipantContainer.styles';
 import { mobilePaneBackButtonStyles, mobilePaneButtonStyles, mobilePaneControlBarStyle, mobilePaneHiddenIconStyles } from './styles/Pane.styles';
 import { CallWithChatCompositeIcon } from './icons';
@@ -26,13 +26,24 @@ export const SidePaneHeader = (props) => {
         iconHovered: { color: theme.palette.neutralSecondary },
         iconPressed: { color: theme.palette.neutralSecondary }
     }), [theme.palette.neutralSecondary, theme.semanticColors.bodyBackground, theme.effects.roundedCorner4]);
+    const handleShiftTab = useCallback((event) => {
+        var _a, _b;
+        if (event.key === 'Tab' && event.shiftKey && !props.chatButtonPresent) {
+            (_b = (_a = props.paneOpenerButton) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.focus();
+            event.preventDefault();
+        }
+    }, [props.chatButtonPresent, props.paneOpenerButton]);
     if (props.mobileView) {
         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, "aria-level": 2 }, props.headingText),
         React.createElement(Stack.Item, null,
-            React.createElement(CommandBarButton, { ariaLabel: props.dismissSidePaneButtonAriaLabel, styles: sidePaneCloseButtonStyles, iconProps: { iconName: 'cancel' }, onClick: props.onClose, autoFocus: true }))));
+            React.createElement(CommandBarButton, { ariaLabel: props.dismissSidePaneButtonAriaLabel, styles: sidePaneCloseButtonStyles, iconProps: { iconName: 'cancel' }, onClick: () => {
+                    var _a, _b;
+                    props.onClose();
+                    (_b = (_a = props.paneOpenerButton) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.focus();
+                }, onKeyDown: handleShiftTab, componentRef: props.dismissButtonComponentRef }))));
 };
 const SidePaneMobileHeader = (props) => {
     const { headingText, dismissSidePaneButtonAriaLabel, dismissSidePaneButtonAriaDescription, onClose } = props;

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        '@media (forced-colors: active)': {\n          border: `0.1rem solid ${theme.palette.neutralSecondary}`,\n          borderRadius: theme.effects.roundedCorner4\n        }\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, theme.effects.roundedCorner4]\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          autoFocus\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, IButton, Stack, concatStyleSets } from '@fluentui/react';\nimport { useTheme } from '@internal/react-components';\nimport React, { useMemo, RefObject, useCallback } 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  paneOpenerButton?: RefObject<IButton>;\n  dismissButtonComponentRef?: RefObject<IButton>;\n  chatButtonPresent?: 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        '@media (forced-colors: active)': {\n          border: `0.1rem solid ${theme.palette.neutralSecondary}`,\n          borderRadius: theme.effects.roundedCorner4\n        }\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, theme.effects.roundedCorner4]\n  );\n\n  const handleShiftTab = useCallback(\n    (event: React.KeyboardEvent<HTMLElement>) => {\n      if (event.key === 'Tab' && event.shiftKey && !props.chatButtonPresent) {\n        props.paneOpenerButton?.current?.focus();\n        event.preventDefault();\n      }\n    },\n    [props.chatButtonPresent, props.paneOpenerButton]\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={() => {\n            props.onClose();\n            props.paneOpenerButton?.current?.focus();\n          }}\n          onKeyDown={handleShiftTab}\n          componentRef={props.dismissButtonComponentRef}\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/common/icons.d.ts

@@ -192,8 +192,8 @@ export declare const DEFAULT_COMPOSITE_ICONS: {
     IncomingCallNotificationRejectIcon: React.JSX.Element;
     IncomingCallNotificationAcceptIcon: React.JSX.Element;
     IncomingCallNotificationAcceptWithVideoIcon: React.JSX.Element;
-    RTTIcon: React.JSX.Element;
     NotificationBarTogetherModeIcon: React.JSX.Element;
+    RealTimeTextIcon: React.JSX.Element;
 };
 /** @private */
 export type CompositeIconProps<Icons> = IIconProps & {

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

@@ -125,6 +125,8 @@
         "captionsSettingsCloseModalButtonAriaLabel": "Close Captions Setting",
         "captionsBannerMoreButtonCallingLabel": "More",
         "captionsBannerMoreButtonTooltip": "More options",
+        "realTimeTextLabel": "Real-time text (RTT)",
+        "startRealTimeTextLabel": "Turn on RTT for this call",
         "dismissModalAriaLabel": "Local and remote picture and picture, press enter to return to call",
         "callRejectedTitle": "The call could not be completed",
         "callRejectedMoreDetails": "The person you are trying to reach is unavailable. Please try again later.",
@@ -216,6 +218,7 @@
             "sk": "Slovak"
         },
         "captionsBannerSpinnerText": "Starting captions...",
+        "realTimeTextInputBoxDefaultText": "Type message in real-time",
         "transferPageTransferorText": "Transferring...",
         "transferPageTransferTargetText": "Connecting...",
         "transferPageUnknownTransferorDisplayName": "Unknown",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@azure/communication-react",
-  "version": "1.23.0-alpha-202412250016",
+  "version": "1.23.0-alpha-202412280016",
   "sideEffects": false,
   "description": "React library for building modern communication user experiences utilizing Azure Communication Services",
   "keywords": [