@azure/communication-react 1.5.0 → 1.5.2-alpha-202301190014.0

package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CallWithChatComposite.js.map

@@ -1 +1 @@
-{"version":3,"file":"CallWithChatComposite.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/CallWithChatComposite/CallWithChatComposite.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useCallback, useState, useMemo, useEffect, useRef } from 'react';\nimport { LayerHost, mergeStyles, PartialTheme, Stack, Theme } from '@fluentui/react';\nimport { CallComposite, CallCompositePage, CallControlDisplayType } from '../CallComposite';\nimport { CallAdapterProvider } from '../CallComposite/adapter/CallAdapterProvider';\nimport { CallWithChatControlBar } from './CallWithChatControlBar';\nimport { CallState } from '@azure/communication-calling';\nimport { callCompositeContainerStyles, compositeOuterContainerStyles, controlBarContainerStyles } from './styles/CallWithChatCompositeStyles';\nimport { CallWithChatAdapter } from './adapter/CallWithChatAdapter';\nimport { CallWithChatBackedCallAdapter } from './adapter/CallWithChatBackedCallAdapter';\nimport { CallWithChatBackedChatAdapter } from './adapter/CallWithChatBackedChatAdapter';\nimport { CallAdapter } from '../CallComposite';\nimport { ChatCompositeProps } from '../ChatComposite';\nimport { BaseProvider, BaseCompositeProps } from '../common/BaseComposite';\nimport { CallWithChatCompositeIcons } from '../common/icons';\nimport { AvatarPersonaDataCallback } from '../common/AvatarPersona';\nimport { ChatAdapterProvider } from '../ChatComposite/adapter/ChatAdapterProvider';\nimport { CallWithChatAdapterState } from './state/CallWithChatAdapterState';\nimport { PreparedMoreDrawer } from './PreparedMoreDrawer';\nimport { ParticipantMenuItemsCallback, _useContainerHeight, _useContainerWidth } from '@internal/react-components';\nimport { useId } from '@fluentui/react-hooks';\nimport { CallWithChatPane, CallWithChatPaneOption } from './CallWithChatPane';\nimport { containerDivStyles } from '../common/ContainerRectProps';\nimport { modalLayerHostStyle } from '../common/styles/ModalLocalAndRemotePIP.styles';\nimport { CallCompositeOptions } from '../CallComposite/CallComposite';\nimport { drawerContainerStyles } from '../CallComposite/styles/CallComposite.styles';\n\n/**\n * Props required for the {@link CallWithChatComposite}\n *\n * @public\n */\nexport interface CallWithChatCompositeProps extends BaseCompositeProps<CallWithChatCompositeIcons> {\n  adapter: CallWithChatAdapter;\n  /**\n   * Fluent theme for the composite.\n   *\n   * Defaults to a light theme if undefined.\n   */\n  fluentTheme?: PartialTheme | Theme;\n  /**\n   * Optimizes the composite form factor for either desktop or mobile.\n   * @remarks `mobile` is currently only optimized for Portrait mode on mobile devices and does not support landscape.\n   * @defaultValue 'desktop'\n   */\n  formFactor?: 'desktop' | 'mobile';\n  /**\n   * URL that can be used to copy a call-with-chat invite to the Users clipboard.\n   */\n  joinInvitationURL?: string;\n  /**\n   * Flags to enable/disable or customize UI elements of the {@link CallWithChatComposite}\n   */\n  options?: CallWithChatCompositeOptions;\n}\n\n/**\n * Optional features of the {@link CallWithChatComposite}.\n *\n * @public\n */\nexport type CallWithChatCompositeOptions = {\n  /**\n   * Call control options to change what buttons show on the call-with-chat composite control bar.\n   * If using the boolean values, true will cause default behavior across the whole control bar. False hides the whole control bar.\n   */\n  callControls?: boolean | CallWithChatControlOptions;\n};\n\n/**\n * {@link CallWithChatComposite} Call controls to show or hide buttons on the calling control bar.\n *\n * @public\n */\nexport interface CallWithChatControlOptions {\n  /**\n   * {@link CallControlDisplayType} to change how the call controls are displayed.\n   * `'compact'` display type will decreases the size of buttons and hide the labels.\n   *\n   * @remarks\n   * If the composite `formFactor` is set to `'mobile'`, the control bar will always use compact view.\n   *\n   * @defaultValue 'default'\n   */\n  displayType?: CallControlDisplayType;\n  /**\n   * Show or Hide Microphone button during a call.\n   * @defaultValue true\n   */\n  microphoneButton?: boolean;\n  /**\n   * Show or Hide Camera Button during a call\n   * @defaultValue true\n   */\n  cameraButton?: boolean;\n  /**\n   * Show, Hide or Disable the screen share button during a call.\n   * @defaultValue true\n   */\n  screenShareButton?: boolean | {\n    disabled: boolean;\n  };\n  /**\n   * Show or Hide EndCall button during a call.\n   * @defaultValue true\n   */\n  endCallButton?: boolean;\n  /**\n   * Show or hide the chat button in the call-with-chat composite control bar.\n   * @defaultValue true\n   */\n  chatButton?: boolean;\n  /**\n   * Show or hide the people button in the call-with-chat composite control bar.\n   * @defaultValue true\n   */\n  peopleButton?: boolean;\n}\ntype CallWithChatScreenProps = {\n  callWithChatAdapter: CallWithChatAdapter;\n  fluentTheme?: PartialTheme | Theme;\n  formFactor?: 'desktop' | 'mobile';\n  joinInvitationURL?: string;\n  callControls?: boolean | CallWithChatControlOptions;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  rtl?: boolean;\n};\nconst CallWithChatScreen = (props: CallWithChatScreenProps): JSX.Element => {\n  const {\n    callWithChatAdapter,\n    fluentTheme,\n    formFactor = 'desktop'\n  } = props;\n  const mobileView = formFactor === 'mobile';\n  if (!callWithChatAdapter) {\n    throw new Error('CallWithChatAdapter is undefined');\n  }\n  const callAdapter: CallAdapter = useMemo(() => new CallWithChatBackedCallAdapter(callWithChatAdapter), [callWithChatAdapter]);\n  const [currentCallState, setCurrentCallState] = useState<CallState>();\n  const [currentPage, setCurrentPage] = useState<CallCompositePage>();\n  const [activePane, setActivePane] = useState<CallWithChatPaneOption>('none');\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerWidth = _useContainerWidth(containerRef);\n  const containerHeight = _useContainerHeight(containerRef);\n  useEffect(() => {\n    const updateCallWithChatPage = (newState: CallWithChatAdapterState): void => {\n      setCurrentPage(newState.page);\n      setCurrentCallState(newState.call?.state);\n    };\n    updateCallWithChatPage(callWithChatAdapter.getState());\n    callWithChatAdapter.onStateChange(updateCallWithChatPage);\n    return () => {\n      callWithChatAdapter.offStateChange(updateCallWithChatPage);\n    };\n  }, [callWithChatAdapter]);\n  const closePane = useCallback(() => {\n    setActivePane('none');\n  }, [setActivePane]);\n  const chatProps: ChatCompositeProps = useMemo(() => {\n    return {\n      adapter: new CallWithChatBackedChatAdapter(callWithChatAdapter)\n    };\n  }, [callWithChatAdapter]);\n  const modalLayerHostId = useId('modalLayerhost');\n  const isInLobbyOrConnecting = currentPage === 'lobby';\n  const hasJoinedCall = !!(currentPage && hasJoinedCallFn(currentPage, currentCallState ?? 'None'));\n  const showControlBar = isInLobbyOrConnecting || hasJoinedCall;\n  const isMobileWithActivePane = mobileView && hasJoinedCall && activePane !== 'none';\n\n  /** Constant setting of id for the parent stack of the composite */\n  const compositeParentDivId = useId('callWithChatCompositeParentDiv-internal');\n  const toggleChat = useCallback(() => {\n    if (activePane === 'chat' || !hasJoinedCall) {\n      setActivePane('none');\n    } else {\n      setActivePane('chat');\n      // timeout is required to give the window time to render the sendbox so we have something to send focus to.\n      // TODO: Selecting elements in the DOM via attributes is not stable. We should expose an API from ChatComposite to be able to focus on the sendbox.\n      const chatFocusTimeout = setInterval(() => {\n        const callWithChatCompositeRootDiv = document.querySelector(`[id=\"${compositeParentDivId}\"]`);\n        const sendbox = (callWithChatCompositeRootDiv?.querySelector(`[id=\"sendbox\"]`) as HTMLTextAreaElement);\n        if (sendbox !== null) {\n          sendbox.focus();\n          clearInterval(chatFocusTimeout);\n        }\n      }, 3);\n      setTimeout(() => {\n        clearInterval(chatFocusTimeout);\n      }, 300);\n    }\n  }, [activePane, setActivePane, compositeParentDivId, hasJoinedCall]);\n  const togglePeople = useCallback(() => {\n    if (activePane === 'people' || !hasJoinedCall) {\n      setActivePane('none');\n    } else {\n      setActivePane('people');\n    }\n  }, [activePane, setActivePane, hasJoinedCall]);\n  const selectChat = useCallback(() => {\n    if (hasJoinedCall) {\n      setActivePane('chat');\n    }\n  }, [setActivePane, hasJoinedCall]);\n  const selectPeople = useCallback(() => {\n    if (hasJoinedCall) {\n      setActivePane('people');\n    }\n  }, [setActivePane, hasJoinedCall]);\n  const [showDrawer, setShowDrawer] = useState(false);\n  const onMoreButtonClicked = useCallback(() => {\n    closePane();\n    setShowDrawer(true);\n  }, [closePane]);\n  const closeDrawer = useCallback(() => {\n    setShowDrawer(false);\n  }, []);\n  const onMoreDrawerPeopleClicked = useCallback(() => {\n    setShowDrawer(false);\n    togglePeople();\n  }, [togglePeople]);\n\n  // On mobile, when there is an active call and some side pane is active,\n  // we hide the call composite via CSS to show only the pane.\n  // We only set `display` to `none` instead of unmounting the call composite component tree\n  // to avoid the performance cost of rerendering video streams when we later show the composite again.\n  const callCompositeContainerCSS = useMemo(() => {\n    return {\n      display: isMobileWithActivePane ? 'none' : 'flex'\n    };\n  }, [isMobileWithActivePane]);\n  const callCompositeOptions: CallCompositeOptions = useMemo(() => ({\n    callControls: false\n  }), []);\n  return <div ref={containerRef} className={mergeStyles(containerDivStyles)}>\n      <Stack verticalFill grow styles={compositeOuterContainerStyles} id={compositeParentDivId}>\n        <Stack horizontal grow>\n          <Stack.Item grow styles={callCompositeContainerStyles}\n        // Perf: Instead of removing the video gallery from DOM, we hide it to prevent re-renders.\n        style={callCompositeContainerCSS}>\n            <CallComposite {...props} formFactor={formFactor} options={callCompositeOptions} adapter={callAdapter} fluentTheme={fluentTheme} />\n          </Stack.Item>\n\n          {chatProps.adapter && callAdapter && hasJoinedCall && <CallWithChatPane chatCompositeProps={chatProps} inviteLink={props.joinInvitationURL} onClose={closePane} chatAdapter={chatProps.adapter} callAdapter={callAdapter} onFetchAvatarPersonaData={props.onFetchAvatarPersonaData} onFetchParticipantMenuItems={props.onFetchParticipantMenuItems} onChatButtonClicked={showShowChatTabHeaderButton(props.callControls) ? selectChat : undefined} onPeopleButtonClicked={showShowPeopleTabHeaderButton(props.callControls) ? selectPeople : undefined} modalLayerHostId={modalLayerHostId} mobileView={mobileView} activePane={activePane} rtl={props.rtl} callControls={typeof props.callControls !== 'boolean' ? props.callControls : undefined} />}\n        </Stack>\n        {showControlBar && !isMobileWithActivePane && <ChatAdapterProvider adapter={chatProps.adapter}>\n            <Stack.Item styles={controlBarContainerStyles}>\n              <CallWithChatControlBar callAdapter={callAdapter} chatAdapter={chatProps.adapter} chatButtonChecked={activePane === 'chat'} onChatButtonClicked={toggleChat} peopleButtonChecked={activePane === 'people'} onPeopleButtonClicked={togglePeople} onMoreButtonClicked={onMoreButtonClicked} mobileView={mobileView} disableButtonsForLobbyPage={isInLobbyOrConnecting} callControls={props.callControls} containerHeight={containerHeight} containerWidth={containerWidth} />\n            </Stack.Item>\n          </ChatAdapterProvider>}\n        {showControlBar && showDrawer && <ChatAdapterProvider adapter={chatProps.adapter}>\n            <CallAdapterProvider adapter={callAdapter}>\n              <Stack styles={drawerContainerStyles()}>\n                <PreparedMoreDrawer callControls={props.callControls} onLightDismiss={closeDrawer} onPeopleButtonClicked={onMoreDrawerPeopleClicked} />\n              </Stack>\n            </CallAdapterProvider>\n          </ChatAdapterProvider>}\n\n        {}\n        {\n      // This layer host is for ModalLocalAndRemotePIP in CallWithChatPane. This LayerHost cannot be inside the CallWithChatPane\n      // because when the CallWithChatPane is hidden, ie. style property display is 'none', it takes up no space. This causes problems when dragging\n      // the Modal because the draggable bounds thinks it has no space and will always return to its initial position after dragging.\n      mobileView && <LayerHost id={modalLayerHostId} className={mergeStyles(modalLayerHostStyle)} />}\n      </Stack>\n    </div>;\n};\n\n/**\n * CallWithChatComposite brings together key components to provide a full call with chat experience out of the box.\n *\n * @public\n */\nexport const CallWithChatComposite = (props: CallWithChatCompositeProps): JSX.Element => {\n  const {\n    adapter,\n    fluentTheme,\n    rtl,\n    formFactor,\n    joinInvitationURL,\n    options\n  } = props;\n  return <BaseProvider fluentTheme={fluentTheme} rtl={rtl} locale={props.locale} icons={props.icons}>\n      <CallWithChatScreen {...props} callWithChatAdapter={adapter} formFactor={formFactor} callControls={options?.callControls} joinInvitationURL={joinInvitationURL} fluentTheme={fluentTheme} />\n    </BaseProvider>;\n};\nconst hasJoinedCallFn = (page: CallCompositePage, callStatus: CallState): boolean => {\n  return page === 'call' && (callStatus === 'Connected' || callStatus === 'Disconnecting');\n};\nconst showShowChatTabHeaderButton = (callControls?: boolean | CallWithChatControlOptions): boolean => {\n  if (callControls === undefined || callControls === true) {\n    return true;\n  }\n  if (callControls === false) {\n    return false;\n  }\n  return callControls.chatButton !== false;\n};\nconst showShowPeopleTabHeaderButton = (callControls?: boolean | CallWithChatControlOptions): boolean => {\n  if (callControls === undefined || callControls === true) {\n    return true;\n  }\n  if (callControls === false) {\n    return false;\n  }\n  return callControls.peopleButton !== false;\n};\"../../../../react-components/src\""]}
+{"version":3,"file":"CallWithChatComposite.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/CallWithChatComposite/CallWithChatComposite.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useCallback, useState, useMemo, useEffect, useRef } from 'react';\nimport { LayerHost, mergeStyles, PartialTheme, Stack, Theme } from '@fluentui/react';\nimport { CallComposite, CallCompositePage, CallControlDisplayType } from '../CallComposite';\nimport { CallAdapterProvider } from '../CallComposite/adapter/CallAdapterProvider';\nimport { CallWithChatControlBar } from './CallWithChatControlBar';\nimport { CallState } from '@azure/communication-calling';\nimport {\n  callCompositeContainerStyles,\n  compositeOuterContainerStyles,\n  controlBarContainerStyles\n} from './styles/CallWithChatCompositeStyles';\nimport { CallWithChatAdapter } from './adapter/CallWithChatAdapter';\nimport { CallWithChatBackedCallAdapter } from './adapter/CallWithChatBackedCallAdapter';\nimport { CallWithChatBackedChatAdapter } from './adapter/CallWithChatBackedChatAdapter';\nimport { CallAdapter } from '../CallComposite';\nimport { ChatCompositeProps } from '../ChatComposite';\nimport { BaseProvider, BaseCompositeProps } from '../common/BaseComposite';\nimport { CallWithChatCompositeIcons } from '../common/icons';\nimport { AvatarPersonaDataCallback } from '../common/AvatarPersona';\nimport { ChatAdapterProvider } from '../ChatComposite/adapter/ChatAdapterProvider';\nimport { CallWithChatAdapterState } from './state/CallWithChatAdapterState';\nimport { PreparedMoreDrawer } from './PreparedMoreDrawer';\nimport { ParticipantMenuItemsCallback, _useContainerHeight, _useContainerWidth } from '@internal/react-components';\nimport { useId } from '@fluentui/react-hooks';\nimport { CallWithChatPane, CallWithChatPaneOption } from './CallWithChatPane';\n/* @conditional-compile-remove(file-sharing) */\nimport { FileSharingOptions } from '../ChatComposite';\nimport { containerDivStyles } from '../common/ContainerRectProps';\n/* @conditional-compile-remove(control-bar-button-injection) */\nimport { CustomCallWithChatControlButtonCallback } from './CustomButton';\nimport { modalLayerHostStyle } from '../common/styles/ModalLocalAndRemotePIP.styles';\n/* @conditional-compile-remove(PSTN-calls) */\nimport { SendDtmfDialpad } from '../common/SendDtmfDialpad';\n/* @conditional-compile-remove(PSTN-calls) */\nimport { useCallWithChatCompositeStrings } from './hooks/useCallWithChatCompositeStrings';\nimport { CallCompositeOptions } from '../CallComposite/CallComposite';\n/* @conditional-compile-remove(call-readiness) */\nimport { DeviceCheckOptions } from '../CallComposite/CallComposite';\nimport { drawerContainerStyles } from '../CallComposite/styles/CallComposite.styles';\n\n/**\n * Props required for the {@link CallWithChatComposite}\n *\n * @public\n */\nexport interface CallWithChatCompositeProps extends BaseCompositeProps<CallWithChatCompositeIcons> {\n  adapter: CallWithChatAdapter;\n  /**\n   * Fluent theme for the composite.\n   *\n   * Defaults to a light theme if undefined.\n   */\n  fluentTheme?: PartialTheme | Theme;\n  /**\n   * Optimizes the composite form factor for either desktop or mobile.\n   * @remarks `mobile` is currently only optimized for Portrait mode on mobile devices and does not support landscape.\n   * @defaultValue 'desktop'\n   */\n  formFactor?: 'desktop' | 'mobile';\n  /**\n   * URL that can be used to copy a call-with-chat invite to the Users clipboard.\n   */\n  joinInvitationURL?: string;\n  /**\n   * Flags to enable/disable or customize UI elements of the {@link CallWithChatComposite}\n   */\n  options?: CallWithChatCompositeOptions;\n}\n\n/**\n * Optional features of the {@link CallWithChatComposite}.\n *\n * @public\n */\nexport type CallWithChatCompositeOptions = {\n  /**\n   * Call control options to change what buttons show on the call-with-chat composite control bar.\n   * If using the boolean values, true will cause default behavior across the whole control bar. False hides the whole control bar.\n   */\n  callControls?: boolean | CallWithChatControlOptions;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Properties for configuring the File Sharing feature.\n   * If undefined, file sharing feature will be disabled.\n   * @beta\n   */\n  fileSharing?: FileSharingOptions;\n  /* @conditional-compile-remove(call-readiness) */\n  /**\n   * Device permissions check options for your call.\n   * Here you can choose what device permissions you prompt the user for,\n   * as well as what device permissions must be accepted before starting a call.\n   */\n  deviceChecks?: DeviceCheckOptions;\n  /* @conditional-compile-remove(call-readiness) */\n  /**\n   * Callback you may provide to supply users with further steps to troubleshoot why they have been\n   * unable to grant your site the required permissions for the call.\n   *\n   * @example\n   * ```ts\n   * onPermissionsTroubleshootingClick: () =>\n   *  window.open('https://contoso.com/permissions-troubleshooting', '_blank');\n   * ```\n   *\n   * @remarks\n   * if this is not supplied, the composite will not show a 'further troubleshooting' link.\n   */\n  onPermissionsTroubleshootingClick?: (permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  }) => void;\n  /* @conditional-compile-remove(call-readiness) */\n  /**\n   * Optional callback to supply users with further troubleshooting steps for network issues\n   * experienced when connecting to a call.\n   *\n   * @example\n   * ```ts\n   * onNetworkingTroubleShootingClick?: () =>\n   *  window.open('https://contoso.com/network-troubleshooting', '_blank');\n   * ```\n   *\n   * @remarks\n   * if this is not supplied, the composite will not show a 'network troubleshooting' link.\n   */\n  onNetworkingTroubleShootingClick?: () => void;\n  /* @conditional-compile-remove(unsupported-browser) */\n  /**\n   * Callback you may provide to supply users with a provided page to showcase supported browsers by ACS.\n   *\n   * @example\n   * ```ts\n   * onBrowserTroubleShootingClick?: () =>\n   *  window.open('https://contoso.com/browser-troubleshooting', '_blank');\n   * ```\n   *\n   * @remarks\n   * if this is not supplied, the composite will not show a unsupported browser page.\n   */\n  onEnvironmentInfoTroubleshootingClick?: () => void;\n};\n\n/**\n * {@link CallWithChatComposite} Call controls to show or hide buttons on the calling control bar.\n *\n * @public\n */\nexport interface CallWithChatControlOptions {\n  /**\n   * {@link CallControlDisplayType} to change how the call controls are displayed.\n   * `'compact'` display type will decreases the size of buttons and hide the labels.\n   *\n   * @remarks\n   * If the composite `formFactor` is set to `'mobile'`, the control bar will always use compact view.\n   *\n   * @defaultValue 'default'\n   */\n  displayType?: CallControlDisplayType;\n  /**\n   * Show or Hide Microphone button during a call.\n   * @defaultValue true\n   */\n  microphoneButton?: boolean | /* @conditional-compile-remove(PSTN-calls) */ { disabled: boolean };\n  /**\n   * Show or Hide Camera Button during a call\n   * @defaultValue true\n   */\n  cameraButton?: boolean | /* @conditional-compile-remove(PSTN-calls) */ { disabled: boolean };\n  /**\n   * Show, Hide or Disable the screen share button during a call.\n   * @defaultValue true\n   */\n  screenShareButton?: boolean | { disabled: boolean };\n  /**\n   * Show or Hide EndCall button during a call.\n   * @defaultValue true\n   */\n  endCallButton?: boolean;\n  /**\n   * Show or hide the chat button in the call-with-chat composite control bar.\n   * @defaultValue true\n   */\n  chatButton?: boolean | /* @conditional-compile-remove(PSTN-calls) */ { disabled: boolean };\n  /**\n   * Show or hide the people button in the call-with-chat composite control bar.\n   * @defaultValue true\n   */\n  peopleButton?: boolean | /* @conditional-compile-remove(PSTN-calls) */ { disabled: boolean };\n  /* @conditional-compile-remove(control-bar-button-injection) */\n  /**\n   * Inject custom buttons in the call controls.\n   *\n   * @beta\n   */\n  onFetchCustomButtonProps?: CustomCallWithChatControlButtonCallback[];\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  /**\n   * Show or hide the more button in the call-with-chat control bar.\n   */\n  moreButton?: boolean;\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  /**\n   * Show or hide the hold button in the bottom sheet drawer\n   */\n  holdButton?: boolean | { disabled: boolean };\n}\n\ntype CallWithChatScreenProps = {\n  callWithChatAdapter: CallWithChatAdapter;\n  fluentTheme?: PartialTheme | Theme;\n  formFactor?: 'desktop' | 'mobile';\n  joinInvitationURL?: string;\n  callControls?: boolean | CallWithChatControlOptions;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  /* @conditional-compile-remove(file-sharing) */\n  fileSharing?: FileSharingOptions;\n  rtl?: boolean;\n  /* @conditional-compile-remove(call-readiness) */\n  deviceChecks?: DeviceCheckOptions;\n  /* @conditional-compile-remove(call-readiness) */\n  onPermissionsTroubleshootingClick?: (permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  }) => void;\n  /* @conditional-compile-remove(call-readiness) */\n  onNetworkingTroubleShootingClick?: () => void;\n  /* @conditional-compile-remove(unsupported-browser) */\n  onEnvironmentInfoTroubleshootingClick?: () => void;\n};\n\nconst CallWithChatScreen = (props: CallWithChatScreenProps): JSX.Element => {\n  const { callWithChatAdapter, fluentTheme, formFactor = 'desktop' } = props;\n  const mobileView = formFactor === 'mobile';\n\n  if (!callWithChatAdapter) {\n    throw new Error('CallWithChatAdapter is undefined');\n  }\n\n  const callAdapter: CallAdapter = useMemo(\n    () => new CallWithChatBackedCallAdapter(callWithChatAdapter),\n    [callWithChatAdapter]\n  );\n\n  const [currentCallState, setCurrentCallState] = useState<CallState>();\n  const [currentPage, setCurrentPage] = useState<CallCompositePage>();\n  const [activePane, setActivePane] = useState<CallWithChatPaneOption>('none');\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerWidth = _useContainerWidth(containerRef);\n  const containerHeight = _useContainerHeight(containerRef);\n\n  useEffect(() => {\n    const updateCallWithChatPage = (newState: CallWithChatAdapterState): void => {\n      setCurrentPage(newState.page);\n      setCurrentCallState(newState.call?.state);\n    };\n    updateCallWithChatPage(callWithChatAdapter.getState());\n    callWithChatAdapter.onStateChange(updateCallWithChatPage);\n    return () => {\n      callWithChatAdapter.offStateChange(updateCallWithChatPage);\n    };\n  }, [callWithChatAdapter]);\n\n  const closePane = useCallback(() => {\n    setActivePane('none');\n  }, [setActivePane]);\n\n  const chatProps: ChatCompositeProps = useMemo(() => {\n    return {\n      adapter: new CallWithChatBackedChatAdapter(callWithChatAdapter)\n    };\n  }, [callWithChatAdapter]);\n\n  const modalLayerHostId = useId('modalLayerhost');\n\n  const isInLobbyOrConnecting = currentPage === 'lobby';\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  const isInLocalHold = currentPage === 'hold';\n  const hasJoinedCall = !!(currentPage && hasJoinedCallFn(currentPage, currentCallState ?? 'None'));\n  const showControlBar = isInLobbyOrConnecting || hasJoinedCall;\n  const isMobileWithActivePane = mobileView && hasJoinedCall && activePane !== 'none';\n\n  /** Constant setting of id for the parent stack of the composite */\n  const compositeParentDivId = useId('callWithChatCompositeParentDiv-internal');\n\n  const toggleChat = useCallback(() => {\n    if (activePane === 'chat' || !hasJoinedCall) {\n      setActivePane('none');\n    } else {\n      setActivePane('chat');\n      // timeout is required to give the window time to render the sendbox so we have something to send focus to.\n      // TODO: Selecting elements in the DOM via attributes is not stable. We should expose an API from ChatComposite to be able to focus on the sendbox.\n      const chatFocusTimeout = setInterval(() => {\n        const callWithChatCompositeRootDiv = document.querySelector(`[id=\"${compositeParentDivId}\"]`);\n        const sendbox = callWithChatCompositeRootDiv?.querySelector(`[id=\"sendbox\"]`) as HTMLTextAreaElement;\n        if (sendbox !== null) {\n          sendbox.focus();\n          clearInterval(chatFocusTimeout);\n        }\n      }, 3);\n      setTimeout(() => {\n        clearInterval(chatFocusTimeout);\n      }, 300);\n    }\n  }, [activePane, setActivePane, compositeParentDivId, hasJoinedCall]);\n\n  const togglePeople = useCallback(() => {\n    if (activePane === 'people' || !hasJoinedCall) {\n      setActivePane('none');\n    } else {\n      setActivePane('people');\n    }\n  }, [activePane, setActivePane, hasJoinedCall]);\n\n  const selectChat = useCallback(() => {\n    if (hasJoinedCall) {\n      setActivePane('chat');\n    }\n  }, [setActivePane, hasJoinedCall]);\n\n  const selectPeople = useCallback(() => {\n    if (hasJoinedCall) {\n      setActivePane('people');\n    }\n  }, [setActivePane, hasJoinedCall]);\n\n  const [showDrawer, setShowDrawer] = useState(false);\n  const onMoreButtonClicked = useCallback(() => {\n    closePane();\n    setShowDrawer(true);\n  }, [closePane]);\n  const closeDrawer = useCallback(() => {\n    setShowDrawer(false);\n  }, []);\n  const onMoreDrawerPeopleClicked = useCallback(() => {\n    setShowDrawer(false);\n    togglePeople();\n  }, [togglePeople]);\n\n  // On mobile, when there is an active call and some side pane is active,\n  // we hide the call composite via CSS to show only the pane.\n  // We only set `display` to `none` instead of unmounting the call composite component tree\n  // to avoid the performance cost of rerendering video streams when we later show the composite again.\n  const callCompositeContainerCSS = useMemo(() => {\n    return { display: isMobileWithActivePane ? 'none' : 'flex' };\n  }, [isMobileWithActivePane]);\n\n  /* @conditional-compile-remove(PSTN-calls) */\n  const [showDtmfDialpad, setShowDtmfDialpad] = useState(false);\n\n  /* @conditional-compile-remove(PSTN-calls) */\n  const onDismissDtmfDialpad = (): void => {\n    setShowDtmfDialpad(false);\n  };\n\n  /* @conditional-compile-remove(PSTN-calls) */\n  const onClickShowDialpad = (): void => {\n    setShowDtmfDialpad(true);\n  };\n\n  /* @conditional-compile-remove(PSTN-calls) */\n  const callWithChatStrings = useCallWithChatCompositeStrings();\n\n  /* @conditional-compile-remove(PSTN-calls) */\n  const dialpadStrings = useMemo(\n    () => ({\n      dialpadModalAriaLabel: callWithChatStrings.dialpadModalAriaLabel,\n      dialpadCloseModalButtonAriaLabel: callWithChatStrings.dialpadCloseModalButtonAriaLabel,\n      placeholderText: callWithChatStrings.dtmfDialpadPlaceholderText\n    }),\n    [callWithChatStrings]\n  );\n\n  /* @conditional-compile-remove(PSTN-calls) */\n  const alternateCallerId = callAdapter.getState().alternateCallerId;\n\n  const callCompositeOptions: CallCompositeOptions = useMemo(\n    () => ({\n      callControls: false,\n      /* @conditional-compile-remove(call-readiness) */\n      deviceChecks: props.deviceChecks,\n      /* @conditional-compile-remove(call-readiness) */\n      onNetworkingTroubleShootingClick: props.onNetworkingTroubleShootingClick,\n      /* @conditional-compile-remove(call-readiness) */\n      onPermissionsTroubleshootingClick: props.onPermissionsTroubleshootingClick,\n      /* @conditional-compile-remove(unsupported-browser) */\n      onEnvironmentInfoTroubleshootingClick: props.onEnvironmentInfoTroubleshootingClick\n    }),\n    [\n      /* @conditional-compile-remove(call-readiness) */\n      props.deviceChecks,\n      /* @conditional-compile-remove(unsupported-browser) */\n      props.onEnvironmentInfoTroubleshootingClick,\n      /* @conditional-compile-remove(call-readiness) */\n      props.onNetworkingTroubleShootingClick,\n      /* @conditional-compile-remove(call-readiness) */\n      props.onPermissionsTroubleshootingClick\n    ]\n  );\n\n  return (\n    <div ref={containerRef} className={mergeStyles(containerDivStyles)}>\n      <Stack verticalFill grow styles={compositeOuterContainerStyles} id={compositeParentDivId}>\n        <Stack horizontal grow>\n          <Stack.Item\n            grow\n            styles={callCompositeContainerStyles}\n            // Perf: Instead of removing the video gallery from DOM, we hide it to prevent re-renders.\n            style={callCompositeContainerCSS}\n          >\n            <CallComposite\n              {...props}\n              formFactor={formFactor}\n              options={callCompositeOptions}\n              adapter={callAdapter}\n              fluentTheme={fluentTheme}\n            />\n          </Stack.Item>\n\n          {chatProps.adapter && callAdapter && hasJoinedCall && (\n            <CallWithChatPane\n              chatCompositeProps={chatProps}\n              inviteLink={props.joinInvitationURL}\n              onClose={closePane}\n              chatAdapter={chatProps.adapter}\n              callAdapter={callAdapter}\n              onFetchAvatarPersonaData={props.onFetchAvatarPersonaData}\n              onFetchParticipantMenuItems={props.onFetchParticipantMenuItems}\n              onChatButtonClicked={showShowChatTabHeaderButton(props.callControls) ? selectChat : undefined}\n              onPeopleButtonClicked={showShowPeopleTabHeaderButton(props.callControls) ? selectPeople : undefined}\n              modalLayerHostId={modalLayerHostId}\n              mobileView={mobileView}\n              activePane={activePane}\n              /* @conditional-compile-remove(file-sharing) */\n              fileSharing={props.fileSharing}\n              rtl={props.rtl}\n              callControls={typeof props.callControls !== 'boolean' ? props.callControls : undefined}\n            />\n          )}\n        </Stack>\n        {showControlBar && !isMobileWithActivePane && (\n          <ChatAdapterProvider adapter={chatProps.adapter}>\n            <Stack.Item styles={controlBarContainerStyles}>\n              <CallWithChatControlBar\n                callAdapter={callAdapter}\n                chatAdapter={chatProps.adapter}\n                chatButtonChecked={activePane === 'chat'}\n                onChatButtonClicked={toggleChat}\n                peopleButtonChecked={activePane === 'people'}\n                onPeopleButtonClicked={togglePeople}\n                onMoreButtonClicked={onMoreButtonClicked}\n                mobileView={mobileView}\n                disableButtonsForLobbyPage={isInLobbyOrConnecting}\n                /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n                disableButtonsForHoldScreen={isInLocalHold}\n                callControls={props.callControls}\n                containerHeight={containerHeight}\n                containerWidth={containerWidth}\n                /* @conditional-compile-remove(PSTN-calls) */\n                onClickShowDialpad={alternateCallerId ? onClickShowDialpad : undefined}\n              />\n            </Stack.Item>\n          </ChatAdapterProvider>\n        )}\n        {showControlBar && showDrawer && (\n          <ChatAdapterProvider adapter={chatProps.adapter}>\n            <CallAdapterProvider adapter={callAdapter}>\n              <Stack styles={drawerContainerStyles()}>\n                <PreparedMoreDrawer\n                  callControls={props.callControls}\n                  onLightDismiss={closeDrawer}\n                  onPeopleButtonClicked={onMoreDrawerPeopleClicked}\n                  /* @conditional-compile-remove(PSTN-calls) */\n                  onClickShowDialpad={alternateCallerId ? onClickShowDialpad : undefined}\n                  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n                  disableButtonsForHoldScreen={isInLocalHold}\n                />\n              </Stack>\n            </CallAdapterProvider>\n          </ChatAdapterProvider>\n        )}\n\n        {\n          /* @conditional-compile-remove(PSTN-calls) */\n          showControlBar && showDtmfDialpad && (\n            <ChatAdapterProvider adapter={chatProps.adapter}>\n              <CallAdapterProvider adapter={callAdapter}>\n                <Stack styles={drawerContainerStyles()}>\n                  <SendDtmfDialpad\n                    isMobile={mobileView}\n                    strings={dialpadStrings}\n                    showDialpad={showDtmfDialpad}\n                    onDismissDialpad={onDismissDtmfDialpad}\n                  />\n                </Stack>\n              </CallAdapterProvider>\n            </ChatAdapterProvider>\n          )\n        }\n        {\n          // This layer host is for ModalLocalAndRemotePIP in CallWithChatPane. This LayerHost cannot be inside the CallWithChatPane\n          // because when the CallWithChatPane is hidden, ie. style property display is 'none', it takes up no space. This causes problems when dragging\n          // the Modal because the draggable bounds thinks it has no space and will always return to its initial position after dragging.\n          mobileView && <LayerHost id={modalLayerHostId} className={mergeStyles(modalLayerHostStyle)} />\n        }\n      </Stack>\n    </div>\n  );\n};\n\n/**\n * CallWithChatComposite brings together key components to provide a full call with chat experience out of the box.\n *\n * @public\n */\nexport const CallWithChatComposite = (props: CallWithChatCompositeProps): JSX.Element => {\n  const { adapter, fluentTheme, rtl, formFactor, joinInvitationURL, options } = props;\n  return (\n    <BaseProvider fluentTheme={fluentTheme} rtl={rtl} locale={props.locale} icons={props.icons}>\n      <CallWithChatScreen\n        {...props}\n        /* @conditional-compile-remove(call-readiness) */\n        deviceChecks={options?.deviceChecks}\n        callWithChatAdapter={adapter}\n        formFactor={formFactor}\n        callControls={options?.callControls}\n        joinInvitationURL={joinInvitationURL}\n        fluentTheme={fluentTheme}\n        /* @conditional-compile-remove(file-sharing) */\n        fileSharing={options?.fileSharing}\n      />\n    </BaseProvider>\n  );\n};\n\nconst hasJoinedCallFn = (page: CallCompositePage, callStatus: CallState): boolean => {\n  /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(one-to-n-calling) */\n  return (\n    (page === 'call' &&\n      (callStatus === 'Connected' || callStatus === 'RemoteHold' || callStatus === 'Disconnecting')) ||\n    (page === 'hold' && (callStatus === 'LocalHold' || callStatus === 'Disconnecting'))\n  );\n  return page === 'call' && (callStatus === 'Connected' || callStatus === 'Disconnecting');\n};\n\nconst showShowChatTabHeaderButton = (callControls?: boolean | CallWithChatControlOptions): boolean => {\n  if (callControls === undefined || callControls === true) {\n    return true;\n  }\n  if (callControls === false) {\n    return false;\n  }\n  return callControls.chatButton !== false;\n};\n\nconst showShowPeopleTabHeaderButton = (callControls?: boolean | CallWithChatControlOptions): boolean => {\n  if (callControls === undefined || callControls === true) {\n    return true;\n  }\n  if (callControls === false) {\n    return false;\n  }\n  return callControls.peopleButton !== false;\n};\n\"../../../../react-components/src\""]}

package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CallWithChatControlBar.d.ts

@@ -18,6 +18,7 @@ export interface CallWithChatControlBarProps {
     callControls?: boolean | CallWithChatControlOptions;
     chatAdapter: ChatAdapter;
     disableButtonsForHoldScreen?: boolean;
+    onClickShowDialpad?: () => void;
 }
 /**
  * @private

package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CallWithChatControlBar.js

@@ -14,6 +14,10 @@ import { Camera } from '../CallComposite/components/buttons/Camera';
 import { ScreenShare } from '../CallComposite/components/buttons/ScreenShare';
 import { EndCall } from '../CallComposite/components/buttons/EndCall';
 import { MoreButton } from '../common/MoreButton';
+/* @conditional-compile-remove(control-bar-button-injection) */
+import { CUSTOM_BUTTON_OPTIONS, generateCustomCallWithChatControlBarButton, onFetchCustomButtonPropsTrampoline } from './CustomButton';
+/*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+import { DesktopMoreButton } from './components/DesktopMoreButton';
 import { isDisabled } from '../CallComposite/utils';
 import { HiddenFocusStartPoint } from '../common/HiddenFocusStartPoint';
 const inferCallWithChatControlOptions = (mobileView, callWithChatControls) => {
@@ -36,6 +40,7 @@ const inferCallWithChatControlOptions = (mobileView, callWithChatControls) => {
  * @private
  */
 export const CallWithChatControlBar = (props) => {
+    var _a, _b;
     const theme = useTheme();
     const callWithChatStrings = useCallWithChatCompositeStrings();
     const options = inferCallWithChatControlOptions(props.mobileView, props.callControls);
@@ -62,30 +67,53 @@ export const CallWithChatControlBar = (props) => {
             }
         });
     }, [props.mobileView, theme.semanticColors.bodyBackground]);
-    const screenShareButtonStyles = useMemo(() => !props.mobileView ? getDesktopScreenShareButtonStyles(theme) : undefined, [props.mobileView, theme]);
-    const commonButtonStyles = useMemo(() => !props.mobileView ? getDesktopCommonButtonStyles(theme) : undefined, [props.mobileView, theme]);
-    const endCallButtonStyles = useMemo(() => !props.mobileView ? getDesktopEndCallButtonStyles(theme) : undefined, [props.mobileView, theme]);
+    const screenShareButtonStyles = useMemo(() => (!props.mobileView ? getDesktopScreenShareButtonStyles(theme) : undefined), [props.mobileView, theme]);
+    const commonButtonStyles = useMemo(() => (!props.mobileView ? getDesktopCommonButtonStyles(theme) : undefined), [props.mobileView, theme]);
+    const endCallButtonStyles = useMemo(() => (!props.mobileView ? getDesktopEndCallButtonStyles(theme) : undefined), [props.mobileView, theme]);
+    /* @conditional-compile-remove(control-bar-button-injection) */
+    const customButtons = useMemo(() => generateCustomCallWithChatControlBarButton(onFetchCustomButtonPropsTrampoline(options !== false ? options : undefined), options !== false ? options === null || options === void 0 ? void 0 : options.displayType : undefined), [options]);
     // when options is false then we want to hide the whole control bar.
     if (options === false) {
         return React.createElement(React.Fragment, null);
     }
-    const chatButton = React.createElement(ChatButtonWithUnreadMessagesBadge, { chatAdapter: props.chatAdapter, checked: props.chatButtonChecked, showLabel: options.displayType !== 'compact', isChatPaneVisible: props.chatButtonChecked, onClick: props.onChatButtonClicked, disabled: props.disableButtonsForLobbyPage || isDisabled(options.chatButton), strings: chatButtonStrings, styles: commonButtonStyles, newMessageLabel: callWithChatStrings.chatButtonNewMessageNotificationLabel });
-    return React.createElement(Stack, { horizontal: true, className: mergeStyles(callControlsContainerStyles, controlBarContainerStyles) },
+    const chatButton = (React.createElement(ChatButtonWithUnreadMessagesBadge, { chatAdapter: props.chatAdapter, checked: props.chatButtonChecked, showLabel: options.displayType !== 'compact', isChatPaneVisible: props.chatButtonChecked, onClick: props.onChatButtonClicked, disabled: props.disableButtonsForLobbyPage || isDisabled(options.chatButton), strings: chatButtonStrings, styles: commonButtonStyles, newMessageLabel: callWithChatStrings.chatButtonNewMessageNotificationLabel }));
+    return (React.createElement(Stack, { horizontal: true, className: mergeStyles(callControlsContainerStyles, controlBarContainerStyles) },
         React.createElement(Stack.Item, { grow: true },
             React.createElement(CallAdapterProvider, { adapter: props.callAdapter },
                 React.createElement(Stack, { horizontalAlign: "center" },
                     React.createElement(HiddenFocusStartPoint, null),
                     React.createElement(Stack.Item, null,
                         React.createElement(ControlBar, { layout: "horizontal", styles: centerContainerStyles },
-                            isEnabled(options.microphoneButton) && React.createElement(Microphone, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView }),
-                            isEnabled(options.cameraButton) && React.createElement(Camera, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView }),
+                            isEnabled(options.microphoneButton) && (React.createElement(Microphone, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView, 
+                                /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+                                disabled: props.disableButtonsForHoldScreen || isDisabled(options.microphoneButton) })),
+                            isEnabled(options.cameraButton) && (React.createElement(Camera, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView, 
+                                /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+                                disabled: props.disableButtonsForHoldScreen || isDisabled(options.cameraButton) })),
                             props.mobileView && isEnabled(options === null || options === void 0 ? void 0 : options.chatButton) && chatButton,
-                            isEnabled(options.screenShareButton) && React.createElement(ScreenShare, { option: options.screenShareButton, displayType: options.displayType, styles: screenShareButtonStyles }),
-                            props.mobileView && React.createElement(MoreButton, { "data-ui-id": "call-with-chat-composite-more-button", strings: moreButtonStrings, onClick: props.onMoreButtonClicked, disabled: props.disableButtonsForLobbyPage }),
+                            isEnabled(options.screenShareButton) && (React.createElement(ScreenShare, { option: options.screenShareButton, displayType: options.displayType, styles: screenShareButtonStyles, 
+                                /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+                                disabled: props.disableButtonsForHoldScreen || isDisabled(options.screenShareButton) })), 
+                        /* @conditional-compile-remove(control-bar-button-injection) */
+                        (_a = customButtons['primary']) === null || _a === void 0 ? void 0 :
+                            _a.props.children.slice(0, props.mobileView
+                                ? CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_MOBILE_CUSTOM_BUTTONS
+                                : CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_DESKTOP_CUSTOM_BUTTONS).map((element) => {
+                                return (React.createElement(element.type, Object.assign({}, element.props, { key: element.props.strings.label, styles: commonButtonStyles, displayType: options.displayType, showLabel: options.displayType !== 'compact' })));
+                            }),
+                            props.mobileView && (React.createElement(MoreButton, { "data-ui-id": "call-with-chat-composite-more-button", strings: moreButtonStrings, onClick: props.onMoreButtonClicked, disabled: props.disableButtonsForLobbyPage })),
+                            /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ isEnabled(options === null || options === void 0 ? void 0 : options.moreButton) &&
+                                /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ isEnabled(options === null || options === void 0 ? void 0 : options.holdButton) &&
+                                !props.mobileView && (React.createElement(DesktopMoreButton, { disableButtonsForHoldScreen: props.disableButtonsForHoldScreen, styles: commonButtonStyles, onClickShowDialpad: props.onClickShowDialpad })),
                             React.createElement(EndCall, { displayType: "compact", styles: endCallButtonStyles })))))),
-        !props.mobileView && React.createElement(Stack, { horizontal: true, className: !props.mobileView ? mergeStyles(desktopButtonContainerStyle) : undefined },
-            isEnabled(options === null || options === void 0 ? void 0 : options.peopleButton) && React.createElement(PeopleButton, { checked: props.peopleButtonChecked, showLabel: options.displayType !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "call-with-chat-composite-people-button", disabled: props.disableButtonsForLobbyPage || isDisabled(options.peopleButton), strings: peopleButtonStrings, styles: commonButtonStyles }),
-            isEnabled(options === null || options === void 0 ? void 0 : options.chatButton) && chatButton));
+        !props.mobileView && (React.createElement(Stack, { horizontal: true, className: !props.mobileView ? mergeStyles(desktopButtonContainerStyle) : undefined }, 
+        /* @conditional-compile-remove(control-bar-button-injection) */
+        (_b = customButtons['secondary']) === null || _b === void 0 ? void 0 :
+            _b.props.children.slice(0, CUSTOM_BUTTON_OPTIONS.MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS).map((element) => {
+                return (React.createElement(element.type, Object.assign({}, element.props, { key: element.props.key, styles: commonButtonStyles, displayType: options.displayType, showLabel: options.displayType !== 'compact' })));
+            }),
+            isEnabled(options === null || options === void 0 ? void 0 : options.peopleButton) && (React.createElement(PeopleButton, { checked: props.peopleButtonChecked, showLabel: options.displayType !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "call-with-chat-composite-people-button", disabled: props.disableButtonsForLobbyPage || isDisabled(options.peopleButton), strings: peopleButtonStrings, styles: commonButtonStyles })),
+            isEnabled(options === null || options === void 0 ? void 0 : options.chatButton) && chatButton))));
 };
 const desktopButtonContainerStyle = {
     padding: '0.75rem',
@@ -141,9 +169,7 @@ const getDesktopScreenShareButtonStyles = (theme) => {
         border: 'none',
         background: theme.palette.themePrimary,
         color: theme.palette.white,
-        '* > svg': {
-            fill: theme.palette.white
-        }
+        '* > svg': { fill: theme.palette.white }
     };
     const overrides = {
         rootChecked: overrideStyles,

package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CallWithChatControlBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"CallWithChatControlBar.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/CallWithChatComposite/CallWithChatControlBar.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 { CallAdapterProvider } from '../CallComposite/adapter/CallAdapterProvider';\nimport { CallAdapter } from '../CallComposite';\nimport { PeopleButton } from './PeopleButton';\nimport { concatStyleSets, IStyle, ITheme, mergeStyles, mergeStyleSets, Stack, useTheme } from '@fluentui/react';\nimport { controlBarContainerStyles } from '../CallComposite/styles/CallControls.styles';\nimport { callControlsContainerStyles } from '../CallComposite/styles/CallPage.styles';\nimport { useCallWithChatCompositeStrings } from './hooks/useCallWithChatCompositeStrings';\nimport { ChatAdapter } from '../ChatComposite';\nimport { ChatButtonWithUnreadMessagesBadge } from './ChatButtonWithUnreadMessagesBadge';\nimport { BaseCustomStyles, ControlBarButtonStyles } 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 '../common/MoreButton';\nimport { CallWithChatControlOptions } from './CallWithChatComposite';\nimport { ContainerRectProps } from '../common/ContainerRectProps';\nimport { isDisabled } from '../CallComposite/utils';\nimport { HiddenFocusStartPoint } from '../common/HiddenFocusStartPoint';\n\n/**\n * @private\n */\nexport interface CallWithChatControlBarProps {\n  callAdapter: CallAdapter;\n  chatButtonChecked: boolean;\n  peopleButtonChecked: boolean;\n  onChatButtonClicked: () => void;\n  onPeopleButtonClicked: () => void;\n  onMoreButtonClicked: () => void;\n  mobileView: boolean;\n  disableButtonsForLobbyPage: boolean;\n  callControls?: boolean | CallWithChatControlOptions;\n  chatAdapter: ChatAdapter;\n  disableButtonsForHoldScreen?: boolean;\n}\nconst inferCallWithChatControlOptions = (mobileView: boolean, callWithChatControls?: boolean | CallWithChatControlOptions): CallWithChatControlOptions | false => {\n  if (callWithChatControls === false) {\n    return false;\n  }\n  const options = callWithChatControls === true || callWithChatControls === undefined ? {} : callWithChatControls;\n  if (mobileView) {\n    // Set to compressed mode when composite is optimized for mobile\n    options.displayType = 'compact';\n    // Do not show screen share button when composite is optimized for mobile unless the developer\n    // has explicitly opted in.\n    if (options.screenShareButton !== true) {\n      options.screenShareButton = false;\n    }\n  }\n  return options;\n};\n\n/**\n * @private\n */\nexport const CallWithChatControlBar = (props: CallWithChatControlBarProps & ContainerRectProps): JSX.Element => {\n  const theme = useTheme();\n  const callWithChatStrings = useCallWithChatCompositeStrings();\n  const options = inferCallWithChatControlOptions(props.mobileView, props.callControls);\n  const chatButtonStrings = useMemo(() => ({\n    label: callWithChatStrings.chatButtonLabel,\n    tooltipOffContent: callWithChatStrings.chatButtonTooltipOpen,\n    tooltipOnContent: callWithChatStrings.chatButtonTooltipClose\n  }), [callWithChatStrings]);\n  const peopleButtonStrings = useMemo(() => ({\n    label: callWithChatStrings.peopleButtonLabel,\n    tooltipOffContent: callWithChatStrings.peopleButtonTooltipOpen,\n    tooltipOnContent: callWithChatStrings.peopleButtonTooltipClose\n  }), [callWithChatStrings]);\n  const moreButtonStrings = useMemo(() => ({\n    label: callWithChatStrings.moreDrawerButtonLabel,\n    tooltipContent: callWithChatStrings.moreDrawerButtonTooltip\n  }), [callWithChatStrings]);\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(() => !props.mobileView ? getDesktopScreenShareButtonStyles(theme) : undefined, [props.mobileView, theme]);\n  const commonButtonStyles = useMemo(() => !props.mobileView ? getDesktopCommonButtonStyles(theme) : undefined, [props.mobileView, theme]);\n  const endCallButtonStyles = useMemo(() => !props.mobileView ? getDesktopEndCallButtonStyles(theme) : undefined, [props.mobileView, theme]);\n  // when options is false then we want to hide the whole control bar.\n  if (options === false) {\n    return <></>;\n  }\n  const chatButton = <ChatButtonWithUnreadMessagesBadge chatAdapter={props.chatAdapter} checked={props.chatButtonChecked} showLabel={options.displayType !== 'compact'} isChatPaneVisible={props.chatButtonChecked} onClick={props.onChatButtonClicked} disabled={props.disableButtonsForLobbyPage || isDisabled(options.chatButton)} strings={chatButtonStrings} styles={commonButtonStyles} newMessageLabel={callWithChatStrings.chatButtonNewMessageNotificationLabel} />;\n  return <Stack horizontal className={mergeStyles(callControlsContainerStyles, controlBarContainerStyles)}>\n      <Stack.Item grow>\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 />\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              <ControlBar layout=\"horizontal\" styles={centerContainerStyles}>\n                {isEnabled(options.microphoneButton) && <Microphone displayType={options.displayType} styles={commonButtonStyles} splitButtonsForDeviceSelection={!props.mobileView} />}\n                {isEnabled(options.cameraButton) && <Camera displayType={options.displayType} styles={commonButtonStyles} splitButtonsForDeviceSelection={!props.mobileView} />}\n                {props.mobileView && isEnabled(options?.chatButton) && chatButton}\n                {isEnabled(options.screenShareButton) && <ScreenShare option={options.screenShareButton} displayType={options.displayType} styles={screenShareButtonStyles} />}\n                {}\n                {props.mobileView && <MoreButton data-ui-id=\"call-with-chat-composite-more-button\" strings={moreButtonStrings} onClick={props.onMoreButtonClicked} disabled={props.disableButtonsForLobbyPage} />}\n                {}\n                <EndCall displayType=\"compact\" styles={endCallButtonStyles} />\n              </ControlBar>\n            </Stack.Item>\n          </Stack>\n        </CallAdapterProvider>\n      </Stack.Item>\n      {!props.mobileView && <Stack horizontal className={!props.mobileView ? mergeStyles(desktopButtonContainerStyle) : undefined}>\n          {}\n          {isEnabled(options?.peopleButton) && <PeopleButton checked={props.peopleButtonChecked} showLabel={options.displayType !== 'compact'} onClick={props.onPeopleButtonClicked} data-ui-id=\"call-with-chat-composite-people-button\" disabled={props.disableButtonsForLobbyPage || isDisabled(options.peopleButton)} strings={peopleButtonStrings} styles={commonButtonStyles} />}\n          {isEnabled(options?.chatButton) && chatButton}\n        </Stack>}\n    </Stack>;\n};\nconst desktopButtonContainerStyle: IStyle = {\n  padding: '0.75rem',\n  columnGap: '0.5rem'\n};\nconst desktopControlBarStyles: BaseCustomStyles = {\n  root: desktopButtonContainerStyle\n};\nconst 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\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    // 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    // 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    // Ensure letters that go above and below the standard text line like 'g', 'y', 'j' are not clipped\n    lineHeight: '1.5rem',\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});\nconst getDesktopScreenShareButtonStyles = (theme: ITheme): ControlBarButtonStyles => {\n  const overrideStyles = {\n    border: 'none',\n    background: theme.palette.themePrimary,\n    color: theme.palette.white,\n    '* > svg': {\n      fill: theme.palette.white\n    }\n  };\n  const overrides: ControlBarButtonStyles = {\n    rootChecked: overrideStyles,\n    rootCheckedHovered: overrideStyles\n  };\n  return concatStyleSets(getDesktopCommonButtonStyles(theme), overrides);\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  };\n  return concatStyleSets(getDesktopCommonButtonStyles(theme), overrides);\n};\nconst isEnabled = (option: unknown): boolean => option !== false;\"../../../../react-components/src\""]}
+{"version":3,"file":"CallWithChatControlBar.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/CallWithChatComposite/CallWithChatControlBar.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 { CallAdapterProvider } from '../CallComposite/adapter/CallAdapterProvider';\nimport { CallAdapter } from '../CallComposite';\nimport { PeopleButton } from './PeopleButton';\nimport { concatStyleSets, IStyle, ITheme, mergeStyles, mergeStyleSets, Stack, useTheme } from '@fluentui/react';\nimport { controlBarContainerStyles } from '../CallComposite/styles/CallControls.styles';\nimport { callControlsContainerStyles } from '../CallComposite/styles/CallPage.styles';\nimport { useCallWithChatCompositeStrings } from './hooks/useCallWithChatCompositeStrings';\nimport { ChatAdapter } from '../ChatComposite';\nimport { ChatButtonWithUnreadMessagesBadge } from './ChatButtonWithUnreadMessagesBadge';\nimport { BaseCustomStyles, ControlBarButtonStyles } 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 '../common/MoreButton';\nimport { CallWithChatControlOptions } from './CallWithChatComposite';\nimport { ContainerRectProps } from '../common/ContainerRectProps';\n/* @conditional-compile-remove(control-bar-button-injection) */\nimport {\n  CUSTOM_BUTTON_OPTIONS,\n  generateCustomCallWithChatControlBarButton,\n  onFetchCustomButtonPropsTrampoline\n} from './CustomButton';\n/*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\nimport { DesktopMoreButton } from './components/DesktopMoreButton';\nimport { isDisabled } from '../CallComposite/utils';\nimport { HiddenFocusStartPoint } from '../common/HiddenFocusStartPoint';\n\n/**\n * @private\n */\nexport interface CallWithChatControlBarProps {\n  callAdapter: CallAdapter;\n  chatButtonChecked: boolean;\n  peopleButtonChecked: boolean;\n  onChatButtonClicked: () => void;\n  onPeopleButtonClicked: () => void;\n  onMoreButtonClicked: () => void;\n  mobileView: boolean;\n  disableButtonsForLobbyPage: boolean;\n  callControls?: boolean | CallWithChatControlOptions;\n  chatAdapter: ChatAdapter;\n  disableButtonsForHoldScreen?: boolean;\n  /* @conditional-compile-remove(PSTN-calls) */\n  onClickShowDialpad?: () => void;\n}\n\nconst inferCallWithChatControlOptions = (\n  mobileView: boolean,\n  callWithChatControls?: boolean | CallWithChatControlOptions\n): CallWithChatControlOptions | false => {\n  if (callWithChatControls === false) {\n    return false;\n  }\n\n  const options = callWithChatControls === true || callWithChatControls === undefined ? {} : callWithChatControls;\n  if (mobileView) {\n    // Set to compressed mode when composite is optimized for mobile\n    options.displayType = 'compact';\n    // Do not show screen share button when composite is optimized for mobile unless the developer\n    // has explicitly opted in.\n    if (options.screenShareButton !== true) {\n      options.screenShareButton = false;\n    }\n  }\n  return options;\n};\n\n/**\n * @private\n */\nexport const CallWithChatControlBar = (props: CallWithChatControlBarProps & ContainerRectProps): JSX.Element => {\n  const theme = useTheme();\n  const callWithChatStrings = useCallWithChatCompositeStrings();\n  const options = inferCallWithChatControlOptions(props.mobileView, props.callControls);\n  const chatButtonStrings = useMemo(\n    () => ({\n      label: callWithChatStrings.chatButtonLabel,\n      tooltipOffContent: callWithChatStrings.chatButtonTooltipOpen,\n      tooltipOnContent: callWithChatStrings.chatButtonTooltipClose\n    }),\n    [callWithChatStrings]\n  );\n  const peopleButtonStrings = useMemo(\n    () => ({\n      label: callWithChatStrings.peopleButtonLabel,\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\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  /* @conditional-compile-remove(control-bar-button-injection) */\n  const customButtons = useMemo(\n    () =>\n      generateCustomCallWithChatControlBarButton(\n        onFetchCustomButtonPropsTrampoline(options !== false ? options : undefined),\n        options !== false ? options?.displayType : undefined\n      ),\n    [options]\n  );\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 chatButton = (\n    <ChatButtonWithUnreadMessagesBadge\n      chatAdapter={props.chatAdapter}\n      checked={props.chatButtonChecked}\n      showLabel={options.displayType !== 'compact'}\n      isChatPaneVisible={props.chatButtonChecked}\n      onClick={props.onChatButtonClicked}\n      disabled={props.disableButtonsForLobbyPage || isDisabled(options.chatButton)}\n      strings={chatButtonStrings}\n      styles={commonButtonStyles}\n      newMessageLabel={callWithChatStrings.chatButtonNewMessageNotificationLabel}\n    />\n  );\n\n  return (\n    <Stack horizontal className={mergeStyles(callControlsContainerStyles, controlBarContainerStyles)}>\n      <Stack.Item grow>\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 />\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              <ControlBar layout=\"horizontal\" styles={centerContainerStyles}>\n                {isEnabled(options.microphoneButton) && (\n                  <Microphone\n                    displayType={options.displayType}\n                    styles={commonButtonStyles}\n                    splitButtonsForDeviceSelection={!props.mobileView}\n                    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n                    disabled={props.disableButtonsForHoldScreen || isDisabled(options.microphoneButton)}\n                  />\n                )}\n                {isEnabled(options.cameraButton) && (\n                  <Camera\n                    displayType={options.displayType}\n                    styles={commonButtonStyles}\n                    splitButtonsForDeviceSelection={!props.mobileView}\n                    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n                    disabled={props.disableButtonsForHoldScreen || isDisabled(options.cameraButton)}\n                  />\n                )}\n                {props.mobileView && isEnabled(options?.chatButton) && chatButton}\n                {isEnabled(options.screenShareButton) && (\n                  <ScreenShare\n                    option={options.screenShareButton}\n                    displayType={options.displayType}\n                    styles={screenShareButtonStyles}\n                    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n                    disabled={props.disableButtonsForHoldScreen || isDisabled(options.screenShareButton)}\n                  />\n                )}\n                {\n                  /* @conditional-compile-remove(control-bar-button-injection) */\n                  customButtons['primary']?.props.children\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((element) => {\n                      return (\n                        <element.type\n                          {...element.props}\n                          key={element.props.strings.label}\n                          styles={commonButtonStyles}\n                          displayType={options.displayType}\n                          showLabel={options.displayType !== 'compact'}\n                        />\n                      );\n                    })\n                }\n                {props.mobileView && (\n                  <MoreButton\n                    data-ui-id=\"call-with-chat-composite-more-button\"\n                    strings={moreButtonStrings}\n                    onClick={props.onMoreButtonClicked}\n                    disabled={props.disableButtonsForLobbyPage}\n                  />\n                )}\n                {\n                  /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ isEnabled(\n                    options?.moreButton\n                  ) &&\n                    /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ isEnabled(\n                      options?.holdButton\n                    ) &&\n                    !props.mobileView && (\n                      <DesktopMoreButton\n                        disableButtonsForHoldScreen={props.disableButtonsForHoldScreen}\n                        styles={commonButtonStyles}\n                        onClickShowDialpad={props.onClickShowDialpad}\n                      />\n                    )\n                }\n                <EndCall displayType=\"compact\" styles={endCallButtonStyles} />\n              </ControlBar>\n            </Stack.Item>\n          </Stack>\n        </CallAdapterProvider>\n      </Stack.Item>\n      {!props.mobileView && (\n        <Stack horizontal className={!props.mobileView ? mergeStyles(desktopButtonContainerStyle) : undefined}>\n          {\n            /* @conditional-compile-remove(control-bar-button-injection) */\n            customButtons['secondary']?.props.children\n              .slice(0, CUSTOM_BUTTON_OPTIONS.MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS)\n              .map((element) => {\n                return (\n                  <element.type\n                    {...element.props}\n                    key={element.props.key}\n                    styles={commonButtonStyles}\n                    displayType={options.displayType}\n                    showLabel={options.displayType !== 'compact'}\n                  />\n                );\n              })\n          }\n          {isEnabled(options?.peopleButton) && (\n            <PeopleButton\n              checked={props.peopleButtonChecked}\n              showLabel={options.displayType !== 'compact'}\n              onClick={props.onPeopleButtonClicked}\n              data-ui-id=\"call-with-chat-composite-people-button\"\n              disabled={props.disableButtonsForLobbyPage || isDisabled(options.peopleButton)}\n              strings={peopleButtonStrings}\n              styles={commonButtonStyles}\n            />\n          )}\n          {isEnabled(options?.chatButton) && chatButton}\n        </Stack>\n      )}\n    </Stack>\n  );\n};\n\nconst desktopButtonContainerStyle: IStyle = {\n  padding: '0.75rem',\n  columnGap: '0.5rem'\n};\n\nconst desktopControlBarStyles: BaseCustomStyles = {\n  root: desktopButtonContainerStyle\n};\n\nconst 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  };\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  };\n  return concatStyleSets(getDesktopCommonButtonStyles(theme), overrides);\n};\n\nconst isEnabled = (option: unknown): boolean => option !== false;\n\"../../../../react-components/src\""]}

package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CallWithChatPane.d.ts

@@ -3,6 +3,7 @@ import { ParticipantMenuItemsCallback } from "../../../../react-components/src";
 import { CallAdapter } from '../CallComposite';
 import { ChatAdapter, ChatCompositeProps } from '../ChatComposite';
 import { AvatarPersonaDataCallback } from '../common/AvatarPersona';
+import { FileSharingOptions } from '../ChatComposite';
 import { CallWithChatControlOptions } from './CallWithChatComposite';
 /**
  * Pane that is used to store chat and people for CallWithChat composite
@@ -21,6 +22,7 @@ export declare const CallWithChatPane: (props: {
     activePane: CallWithChatPaneOption;
     mobileView?: boolean;
     inviteLink?: string;
+    fileSharing?: FileSharingOptions;
     rtl?: boolean;
     callControls?: CallWithChatControlOptions;
 }) => JSX.Element;

package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CallWithChatPane.js

@@ -36,10 +36,20 @@ export const CallWithChatPane = (props) => {
     const paneStyles = hidden ? hiddenStyles : props.mobileView ? availableSpaceStyles : sidePaneStyles;
     const callWithChatStrings = useCallWithChatCompositeStrings();
     const theme = useTheme();
-    const header = props.activePane === 'none' ? null : props.mobileView ? React.createElement(TabHeader, Object.assign({}, props, { strings: callWithChatStrings, activeTab: props.activePane, disableChatButton: isDisabled((_a = props.callControls) === null || _a === void 0 ? void 0 : _a.chatButton), disablePeopleButton: isDisabled((_b = props.callControls) === null || _b === void 0 ? void 0 : _b.peopleButton) })) : React.createElement(SidePaneHeader, Object.assign({}, props, { strings: callWithChatStrings, headingText: props.activePane === 'chat' ? callWithChatStrings.chatPaneTitle : props.activePane === 'people' ? callWithChatStrings.peoplePaneTitle : '' }));
-    const chatContent = React.createElement(ChatComposite, Object.assign({}, props.chatCompositeProps, { adapter: props.chatAdapter, fluentTheme: theme, options: {
-            topic: false
-        }, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData }));
+    /* @conditional-compile-remove(PSTN-calls) */
+    const alternateCallerId = props.callAdapter.getState().alternateCallerId;
+    const header = props.activePane === 'none' ? null : props.mobileView ? (React.createElement(TabHeader, Object.assign({}, props, { strings: callWithChatStrings, activeTab: props.activePane, disableChatButton: isDisabled((_a = props.callControls) === null || _a === void 0 ? void 0 : _a.chatButton), disablePeopleButton: isDisabled((_b = props.callControls) === null || _b === void 0 ? void 0 : _b.peopleButton) }))) : (React.createElement(SidePaneHeader, Object.assign({}, props, { strings: callWithChatStrings, headingText: props.activePane === 'chat'
+            ? callWithChatStrings.chatPaneTitle
+            : props.activePane === 'people'
+                ? callWithChatStrings.peoplePaneTitle
+                : '' })));
+    const chatContent = (React.createElement(ChatComposite, Object.assign({}, props.chatCompositeProps, { adapter: props.chatAdapter, fluentTheme: theme, options: {
+            topic: false,
+            /* @conditional-compile-remove(chat-composite-participant-pane) */
+            participantPane: false,
+            /* @conditional-compile-remove(file-sharing) */
+            fileSharing: props.fileSharing
+        }, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData })));
     /**
      * In a CallWithChat when a participant is removed, we must remove them from both
      * the call and the chat thread.
@@ -48,21 +58,33 @@ export const CallWithChatPane = (props) => {
         yield props.callAdapter.removeParticipant(participantId);
         yield props.chatAdapter.removeParticipant(participantId);
     });
-    const peopleContent = React.createElement(CallAdapterProvider, { adapter: props.callAdapter },
-        React.createElement(PeoplePaneContent, Object.assign({ active: props.activePane === 'people' }, props, { onRemoveParticipant: removeParticipantFromCallWithChat, setDrawerMenuItems: setDrawerMenuItems, strings: callWithChatStrings })));
+    /* @conditional-compile-remove(PSTN-calls) */
+    const addParticipantToCall = (participant, options) => __awaiter(void 0, void 0, void 0, function* () {
+        yield props.callAdapter.addParticipant(participant, options);
+    });
+    const peopleContent = (React.createElement(CallAdapterProvider, { adapter: props.callAdapter },
+        React.createElement(PeoplePaneContent, Object.assign({ active: props.activePane === 'people' }, props, { onRemoveParticipant: removeParticipantFromCallWithChat, setDrawerMenuItems: setDrawerMenuItems, strings: callWithChatStrings, 
+            /* @conditional-compile-remove(PSTN-calls) */
+            onAddParticipant: addParticipantToCall, 
+            /* @conditional-compile-remove(PSTN-calls) */
+            alternateCallerId: alternateCallerId }))));
     const minMaxDragPosition = useMinMaxDragPosition(props.modalLayerHostId, props.rtl);
     const pipStyles = useMemo(() => getPipStyles(theme), [theme]);
-    const dataUiId = props.activePane === 'chat' ? 'call-with-chat-composite-chat-pane' : props.activePane === 'people' ? 'call-with-chat-composite-people-pane' : '';
-    return React.createElement(Stack, { verticalFill: true, grow: true, styles: paneStyles, "data-ui-id": dataUiId, tokens: props.mobileView ? {} : sidePaneTokens },
+    const dataUiId = props.activePane === 'chat'
+        ? 'call-with-chat-composite-chat-pane'
+        : props.activePane === 'people'
+            ? 'call-with-chat-composite-people-pane'
+            : '';
+    return (React.createElement(Stack, { verticalFill: true, grow: true, styles: paneStyles, "data-ui-id": dataUiId, tokens: props.mobileView ? {} : sidePaneTokens },
         header,
         React.createElement(Stack.Item, { verticalFill: true, grow: true, styles: paneBodyContainer },
             React.createElement(Stack, { horizontal: true, styles: scrollableContainer },
                 React.createElement(Stack.Item, { verticalFill: true, styles: scrollableContainerContents },
                     React.createElement(Stack, { styles: props.activePane === 'chat' ? availableSpaceStyles : hiddenStyles }, chatContent),
                     props.activePane === 'people' && peopleContent))),
-        props.mobileView && React.createElement(CallAdapterProvider, { adapter: props.callAdapter },
-            React.createElement(ModalLocalAndRemotePIP, { modalLayerHostId: props.modalLayerHostId, hidden: hidden, styles: pipStyles, minDragPosition: minMaxDragPosition.minDragPosition, maxDragPosition: minMaxDragPosition.maxDragPosition })),
-        drawerMenuItems.length > 0 && React.createElement(Stack, { styles: drawerContainerStyles() },
-            React.createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItems([]), items: drawerMenuItems })));
+        props.mobileView && (React.createElement(CallAdapterProvider, { adapter: props.callAdapter },
+            React.createElement(ModalLocalAndRemotePIP, { modalLayerHostId: props.modalLayerHostId, hidden: hidden, styles: pipStyles, minDragPosition: minMaxDragPosition.minDragPosition, maxDragPosition: minMaxDragPosition.maxDragPosition }))),
+        drawerMenuItems.length > 0 && (React.createElement(Stack, { styles: drawerContainerStyles() },
+            React.createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItems([]), items: drawerMenuItems })))));
 };
 //# sourceMappingURL=CallWithChatPane.js.map

package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CallWithChatPane.js.map

@@ -1 +1 @@
-{"version":3,"file":"CallWithChatPane.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/CallWithChatComposite/CallWithChatPane.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { Stack } from '@fluentui/react';\nimport { _DrawerMenu, _DrawerMenuItemProps, _useContainerHeight, _useContainerWidth, ParticipantMenuItemsCallback, useTheme } from '@internal/react-components';\nimport React, { useMemo, useState } from 'react';\nimport { CallAdapter } from '../CallComposite';\nimport { CallAdapterProvider } from '../CallComposite/adapter/CallAdapterProvider';\nimport { ChatAdapter, ChatComposite, ChatCompositeProps } from '../ChatComposite';\nimport { AvatarPersonaDataCallback } from '../common/AvatarPersona';\nimport { paneBodyContainer, scrollableContainer, scrollableContainerContents } from '../common/styles/ParticipantContainer.styles';\nimport { SidePaneHeader } from '../common/SidePaneHeader';\nimport { useCallWithChatCompositeStrings } from './hooks/useCallWithChatCompositeStrings';\nimport { ModalLocalAndRemotePIP } from '../common/ModalLocalAndRemotePIP';\nimport { PeoplePaneContent } from '../common/PeoplePaneContent';\nimport { TabHeader } from '../common/TabHeader';\nimport { _ICoordinates } from '@internal/react-components';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { getPipStyles } from '../common/styles/ModalLocalAndRemotePIP.styles';\nimport { useMinMaxDragPosition } from '../common/utils';\nimport { availableSpaceStyles, hiddenStyles, sidePaneStyles, sidePaneTokens } from '../common/styles/Pane.styles';\nimport { CallWithChatControlOptions } from './CallWithChatComposite';\nimport { isDisabled } from '../CallComposite/utils';\nimport { drawerContainerStyles } from '../CallComposite/styles/CallComposite.styles';\n\n/**\n * Pane that is used to store chat and people for CallWithChat composite\n * @private\n */\nexport const CallWithChatPane = (props: {\n  chatCompositeProps: Partial<ChatCompositeProps>;\n  callAdapter: CallAdapter;\n  chatAdapter: ChatAdapter;\n  onClose: () => void;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  onChatButtonClicked?: () => void;\n  onPeopleButtonClicked?: () => void;\n  modalLayerHostId: string;\n  activePane: CallWithChatPaneOption;\n  mobileView?: boolean;\n  inviteLink?: string;\n  rtl?: boolean;\n  callControls?: CallWithChatControlOptions;\n}): JSX.Element => {\n  const [drawerMenuItems, setDrawerMenuItems] = useState<_DrawerMenuItemProps[]>([]);\n  const hidden = props.activePane === 'none';\n  const paneStyles = hidden ? hiddenStyles : props.mobileView ? availableSpaceStyles : sidePaneStyles;\n  const callWithChatStrings = useCallWithChatCompositeStrings();\n  const theme = useTheme();\n  const header = props.activePane === 'none' ? null : props.mobileView ? <TabHeader {...props} strings={callWithChatStrings} activeTab={props.activePane} disableChatButton={isDisabled(props.callControls?.chatButton)} disablePeopleButton={isDisabled(props.callControls?.peopleButton)} /> : <SidePaneHeader {...props} strings={callWithChatStrings} headingText={props.activePane === 'chat' ? callWithChatStrings.chatPaneTitle : props.activePane === 'people' ? callWithChatStrings.peoplePaneTitle : ''} />;\n  const chatContent = <ChatComposite {...props.chatCompositeProps} adapter={props.chatAdapter} fluentTheme={theme} options={{\n    topic: false\n  }} onFetchAvatarPersonaData={props.onFetchAvatarPersonaData} />;\n\n  /**\n   * In a CallWithChat when a participant is removed, we must remove them from both\n   * the call and the chat thread.\n   */\n  const removeParticipantFromCallWithChat = async (participantId: string): Promise<void> => {\n    await props.callAdapter.removeParticipant(participantId);\n    await props.chatAdapter.removeParticipant(participantId);\n  };\n  const peopleContent = <CallAdapterProvider adapter={props.callAdapter}>\n      <PeoplePaneContent active={props.activePane === 'people'} {...props} onRemoveParticipant={removeParticipantFromCallWithChat} setDrawerMenuItems={setDrawerMenuItems} strings={callWithChatStrings} />\n    </CallAdapterProvider>;\n  const minMaxDragPosition = useMinMaxDragPosition(props.modalLayerHostId, props.rtl);\n  const pipStyles = useMemo(() => getPipStyles(theme), [theme]);\n  const dataUiId = props.activePane === 'chat' ? 'call-with-chat-composite-chat-pane' : props.activePane === 'people' ? 'call-with-chat-composite-people-pane' : '';\n  return <Stack verticalFill grow styles={paneStyles} data-ui-id={dataUiId} tokens={props.mobileView ? {} : sidePaneTokens}>\n      {header}\n      <Stack.Item verticalFill grow styles={paneBodyContainer}>\n        <Stack horizontal styles={scrollableContainer}>\n          <Stack.Item verticalFill styles={scrollableContainerContents}>\n            <Stack styles={props.activePane === 'chat' ? availableSpaceStyles : hiddenStyles}>{chatContent}</Stack>\n            {props.activePane === 'people' && peopleContent}\n          </Stack.Item>\n        </Stack>\n      </Stack.Item>\n      {props.mobileView && <CallAdapterProvider adapter={props.callAdapter}>\n          <ModalLocalAndRemotePIP modalLayerHostId={props.modalLayerHostId} hidden={hidden} styles={pipStyles} minDragPosition={minMaxDragPosition.minDragPosition} maxDragPosition={minMaxDragPosition.maxDragPosition} />\n        </CallAdapterProvider>}\n      {drawerMenuItems.length > 0 && <Stack styles={drawerContainerStyles()}>\n          <_DrawerMenu onLightDismiss={() => setDrawerMenuItems([])} items={drawerMenuItems} />\n        </Stack>}\n    </Stack>;\n};\n\n/**\n * Active tab option type for {@link CallWithChatPane} component\n * @private\n */\nexport type CallWithChatPaneOption = 'none' | 'chat' | 'people';\"../../../../react-components/src\"\"../../../../acs-ui-common/src\""]}
+{"version":3,"file":"CallWithChatPane.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/CallWithChatComposite/CallWithChatPane.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { Stack } from '@fluentui/react';\nimport {\n  _DrawerMenu,\n  _DrawerMenuItemProps,\n  _useContainerHeight,\n  _useContainerWidth,\n  ParticipantMenuItemsCallback,\n  useTheme\n} from '@internal/react-components';\nimport React, { useMemo, useState } from 'react';\nimport { CallAdapter } from '../CallComposite';\nimport { CallAdapterProvider } from '../CallComposite/adapter/CallAdapterProvider';\nimport { ChatAdapter, ChatComposite, ChatCompositeProps } from '../ChatComposite';\nimport { AvatarPersonaDataCallback } from '../common/AvatarPersona';\nimport {\n  paneBodyContainer,\n  scrollableContainer,\n  scrollableContainerContents\n} from '../common/styles/ParticipantContainer.styles';\nimport { SidePaneHeader } from '../common/SidePaneHeader';\nimport { useCallWithChatCompositeStrings } from './hooks/useCallWithChatCompositeStrings';\nimport { ModalLocalAndRemotePIP } from '../common/ModalLocalAndRemotePIP';\nimport { PeoplePaneContent } from '../common/PeoplePaneContent';\n\nimport { TabHeader } from '../common/TabHeader';\n/* @conditional-compile-remove(file-sharing) */\nimport { FileSharingOptions } from '../ChatComposite';\nimport { _ICoordinates } from '@internal/react-components';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { getPipStyles } from '../common/styles/ModalLocalAndRemotePIP.styles';\nimport { useMinMaxDragPosition } from '../common/utils';\nimport { availableSpaceStyles, hiddenStyles, sidePaneStyles, sidePaneTokens } from '../common/styles/Pane.styles';\n/* @conditional-compile-remove(PSTN-calls) */\nimport { PhoneNumberIdentifier } from '@azure/communication-common';\n/* @conditional-compile-remove(PSTN-calls) */\nimport { AddPhoneNumberOptions } from '@azure/communication-calling';\nimport { CallWithChatControlOptions } from './CallWithChatComposite';\nimport { isDisabled } from '../CallComposite/utils';\nimport { drawerContainerStyles } from '../CallComposite/styles/CallComposite.styles';\n\n/**\n * Pane that is used to store chat and people for CallWithChat composite\n * @private\n */\nexport const CallWithChatPane = (props: {\n  chatCompositeProps: Partial<ChatCompositeProps>;\n  callAdapter: CallAdapter;\n  chatAdapter: ChatAdapter;\n  onClose: () => void;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  onChatButtonClicked?: () => void;\n  onPeopleButtonClicked?: () => void;\n  modalLayerHostId: string;\n  activePane: CallWithChatPaneOption;\n  mobileView?: boolean;\n  inviteLink?: string;\n  /* @conditional-compile-remove(file-sharing) */\n  fileSharing?: FileSharingOptions;\n  rtl?: boolean;\n  callControls?: CallWithChatControlOptions;\n}): JSX.Element => {\n  const [drawerMenuItems, setDrawerMenuItems] = useState<_DrawerMenuItemProps[]>([]);\n\n  const hidden = props.activePane === 'none';\n  const paneStyles = hidden ? hiddenStyles : props.mobileView ? availableSpaceStyles : sidePaneStyles;\n\n  const callWithChatStrings = useCallWithChatCompositeStrings();\n  const theme = useTheme();\n\n  /* @conditional-compile-remove(PSTN-calls) */\n  const alternateCallerId = props.callAdapter.getState().alternateCallerId;\n\n  const header =\n    props.activePane === 'none' ? null : props.mobileView ? (\n      <TabHeader\n        {...props}\n        strings={callWithChatStrings}\n        activeTab={props.activePane}\n        disableChatButton={isDisabled(props.callControls?.chatButton)}\n        disablePeopleButton={isDisabled(props.callControls?.peopleButton)}\n      />\n    ) : (\n      <SidePaneHeader\n        {...props}\n        strings={callWithChatStrings}\n        headingText={\n          props.activePane === 'chat'\n            ? callWithChatStrings.chatPaneTitle\n            : props.activePane === 'people'\n            ? callWithChatStrings.peoplePaneTitle\n            : ''\n        }\n      />\n    );\n\n  const chatContent = (\n    <ChatComposite\n      {...props.chatCompositeProps}\n      adapter={props.chatAdapter}\n      fluentTheme={theme}\n      options={{\n        topic: false,\n        /* @conditional-compile-remove(chat-composite-participant-pane) */\n        participantPane: false,\n        /* @conditional-compile-remove(file-sharing) */\n        fileSharing: props.fileSharing\n      }}\n      onFetchAvatarPersonaData={props.onFetchAvatarPersonaData}\n    />\n  );\n\n  /**\n   * In a CallWithChat when a participant is removed, we must remove them from both\n   * the call and the chat thread.\n   */\n  const removeParticipantFromCallWithChat = async (participantId: string): Promise<void> => {\n    await props.callAdapter.removeParticipant(participantId);\n    await props.chatAdapter.removeParticipant(participantId);\n  };\n\n  /* @conditional-compile-remove(PSTN-calls) */\n  const addParticipantToCall = async (\n    participant: PhoneNumberIdentifier,\n    options?: AddPhoneNumberOptions\n  ): Promise<void> => {\n    await props.callAdapter.addParticipant(participant, options);\n  };\n\n  const peopleContent = (\n    <CallAdapterProvider adapter={props.callAdapter}>\n      <PeoplePaneContent\n        active={props.activePane === 'people'}\n        {...props}\n        onRemoveParticipant={removeParticipantFromCallWithChat}\n        setDrawerMenuItems={setDrawerMenuItems}\n        strings={callWithChatStrings}\n        /* @conditional-compile-remove(PSTN-calls) */\n        onAddParticipant={addParticipantToCall}\n        /* @conditional-compile-remove(PSTN-calls) */\n        alternateCallerId={alternateCallerId}\n      />\n    </CallAdapterProvider>\n  );\n\n  const minMaxDragPosition = useMinMaxDragPosition(props.modalLayerHostId, props.rtl);\n\n  const pipStyles = useMemo(() => getPipStyles(theme), [theme]);\n\n  const dataUiId =\n    props.activePane === 'chat'\n      ? 'call-with-chat-composite-chat-pane'\n      : props.activePane === 'people'\n      ? 'call-with-chat-composite-people-pane'\n      : '';\n\n  return (\n    <Stack verticalFill grow styles={paneStyles} data-ui-id={dataUiId} tokens={props.mobileView ? {} : sidePaneTokens}>\n      {header}\n      <Stack.Item verticalFill grow styles={paneBodyContainer}>\n        <Stack horizontal styles={scrollableContainer}>\n          <Stack.Item verticalFill styles={scrollableContainerContents}>\n            <Stack styles={props.activePane === 'chat' ? availableSpaceStyles : hiddenStyles}>{chatContent}</Stack>\n            {props.activePane === 'people' && peopleContent}\n          </Stack.Item>\n        </Stack>\n      </Stack.Item>\n      {props.mobileView && (\n        <CallAdapterProvider adapter={props.callAdapter}>\n          <ModalLocalAndRemotePIP\n            modalLayerHostId={props.modalLayerHostId}\n            hidden={hidden}\n            styles={pipStyles}\n            minDragPosition={minMaxDragPosition.minDragPosition}\n            maxDragPosition={minMaxDragPosition.maxDragPosition}\n          />\n        </CallAdapterProvider>\n      )}\n      {drawerMenuItems.length > 0 && (\n        <Stack styles={drawerContainerStyles()}>\n          <_DrawerMenu onLightDismiss={() => setDrawerMenuItems([])} items={drawerMenuItems} />\n        </Stack>\n      )}\n    </Stack>\n  );\n};\n\n/**\n * Active tab option type for {@link CallWithChatPane} component\n * @private\n */\nexport type CallWithChatPaneOption = 'none' | 'chat' | 'people';\n\"../../../../react-components/src\"\"../../../../acs-ui-common/src\""]}

package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/ChatButton.js

@@ -17,6 +17,6 @@ export const ChatButton = (props) => {
             }
         }, (_a = props.styles) !== null && _a !== void 0 ? _a : {});
     }, [props.styles, theme.palette.neutralLight]);
-    return React.createElement(ControlBarButton, Object.assign({}, props, { labelKey: 'chatButtonLabelKey', strings: strings, onClick: props.onClick, styles: styles }));
+    return (React.createElement(ControlBarButton, Object.assign({}, props, { labelKey: 'chatButtonLabelKey', strings: strings, onClick: props.onClick, styles: styles })));
 };
 //# sourceMappingURL=ChatButton.js.map

package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/ChatButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatButton.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/CallWithChatComposite/ChatButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,gBAAgB,EAAiD,QAAQ,EAAE,yCAAmC;AACvH,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAA4B,EAAe,EAAE;IACtE,MAAM,OAAO,mBACX,KAAK,EAAE,KAAK,CAAC,KAAK,IACf,KAAK,CAAC,OAAO,CACjB,CAAC;IACF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,MAAM,GAA2B,OAAO,CAAC,GAAG,EAAE;;QAAC,OAAA,eAAe,CAAC;YACnE,WAAW,EAAE;gBACX,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;aACvC;SACF,EAAE,MAAA,KAAK,CAAC,MAAM,mCAAI,EAAE,CAAC,CAAA;KAAA,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC;IACpE,OAAO,oBAAC,gBAAgB,oBAAK,KAAK,IAAE,QAAQ,EAAE,oBAAoB,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC;AACnI,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';\n\n/**\n * @private\n */\nexport const ChatButton = (props: ControlBarButtonProps): JSX.Element => {\n  const strings = {\n    label: props.label,\n    ...props.strings\n  };\n  const theme = useTheme();\n  const styles: ControlBarButtonStyles = useMemo(() => concatStyleSets({\n    rootChecked: {\n      background: theme.palette.neutralLight\n    }\n  }, props.styles ?? {}), [props.styles, theme.palette.neutralLight]);\n  return <ControlBarButton {...props} labelKey={'chatButtonLabelKey'} strings={strings} onClick={props.onClick} styles={styles} />;\n};\"../../../../react-components/src\""]}
+{"version":3,"file":"ChatButton.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/CallWithChatComposite/ChatButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,gBAAgB,EAAiD,QAAQ,EAAE,yCAAmC;AACvH,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAA4B,EAAe,EAAE;IACtE,MAAM,OAAO,mBAAK,KAAK,EAAE,KAAK,CAAC,KAAK,IAAK,KAAK,CAAC,OAAO,CAAE,CAAC;IACzD,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;IACF,OAAO,CACL,oBAAC,gBAAgB,oBACX,KAAK,IACT,QAAQ,EAAE,oBAAoB,EAC9B,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,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';\n\n/**\n * @private\n */\nexport const ChatButton = (props: ControlBarButtonProps): JSX.Element => {\n  const strings = { label: props.label, ...props.strings };\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  return (\n    <ControlBarButton\n      {...props}\n      labelKey={'chatButtonLabelKey'}\n      strings={strings}\n      onClick={props.onClick}\n      styles={styles}\n    />\n  );\n};\n\"../../../../react-components/src\""]}

package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/ChatButtonWithUnreadMessagesBadge.js

@@ -24,9 +24,11 @@ export const ChatButtonWithUnreadMessagesBadge = (props) => {
     const [unreadChatMessagesCount, setUnreadChatMessagesCount] = useState(0);
     const baseIcon = props.showLabel ? regularIcon : filledIcon;
     const callWithChatStrings = useCallWithChatCompositeStrings();
-    const numberOfMsgToolTip = ((_a = props.strings) === null || _a === void 0 ? void 0 : _a.tooltipOffContent) && unreadChatMessagesCount > 0 ? _formatString(callWithChatStrings.chatButtonTooltipClosedWithMessageCount, {
-        unreadMessagesCount: `${unreadChatMessagesCount}`
-    }) : undefined;
+    const numberOfMsgToolTip = ((_a = props.strings) === null || _a === void 0 ? void 0 : _a.tooltipOffContent) && unreadChatMessagesCount > 0
+        ? _formatString(callWithChatStrings.chatButtonTooltipClosedWithMessageCount, {
+            unreadMessagesCount: `${unreadChatMessagesCount}`
+        })
+        : undefined;
     const chatStrings = useMemo(() => {
         var _a, _b, _c;
         return ({
@@ -37,9 +39,9 @@ export const ChatButtonWithUnreadMessagesBadge = (props) => {
     }, [numberOfMsgToolTip, (_b = props.strings) === null || _b === void 0 ? void 0 : _b.label, (_c = props.strings) === null || _c === void 0 ? void 0 : _c.tooltipOffContent, (_d = props.strings) === null || _d === void 0 ? void 0 : _d.tooltipOnContent]);
     const onRenderOnIcon = useCallback(() => baseIcon, [baseIcon]);
     const notificationOnIcon = useCallback(() => {
-        return React.createElement(Stack, { styles: chatNotificationContainerStyles },
-            unreadChatMessagesCount > 0 && React.createElement(NotificationIcon, { chatMessagesCount: unreadChatMessagesCount, label: newMessageLabel }),
-            baseIcon);
+        return (React.createElement(Stack, { styles: chatNotificationContainerStyles },
+            unreadChatMessagesCount > 0 && (React.createElement(NotificationIcon, { chatMessagesCount: unreadChatMessagesCount, label: newMessageLabel })),
+            baseIcon));
     }, [unreadChatMessagesCount, newMessageLabel, baseIcon]);
     useEffect(() => {
         if (isChatPaneVisible) {
@@ -56,7 +58,7 @@ export const ChatButtonWithUnreadMessagesBadge = (props) => {
             chatAdapter.off('messageReceived', incrementUnreadChatMessagesCount);
         };
     }, [chatAdapter, setUnreadChatMessagesCount, isChatPaneVisible, unreadChatMessagesCount]);
-    return React.createElement(ChatButton, Object.assign({}, props, { "data-ui-id": "call-with-chat-composite-chat-button", onRenderOffIcon: notificationOnIcon, onRenderOnIcon: onRenderOnIcon, strings: chatStrings }));
+    return (React.createElement(ChatButton, Object.assign({}, props, { "data-ui-id": "call-with-chat-composite-chat-button", onRenderOffIcon: notificationOnIcon, onRenderOnIcon: onRenderOnIcon, strings: chatStrings })));
 };
 const chatNotificationContainerStyles = {
     root: {