@azure/communication-react 1.3.3-alpha-202208280018.0 → 1.3.3-alpha-202209010016.0

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

@@ -1 +1 @@
-{"version":3,"file":"MoreDrawer.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallWithChatComposite/components/MoreDrawer.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useCallback } from 'react';\n/* @conditional-compile-remove(control-bar-button-injection) */\nimport { useMemo } from 'react';\nimport {\n  OptionsDevice,\n  _DrawerMenu as DrawerMenu,\n  _DrawerMenuItemProps as DrawerMenuItemProps,\n  _DrawerMenuItemProps\n} from '@internal/react-components';\n/* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\nimport { HoldButton } from '@internal/react-components';\nimport { AudioDeviceInfo } from '@azure/communication-calling';\nimport { CallWithChatControlOptions } from '../CallWithChatComposite';\n/* @conditional-compile-remove(control-bar-button-injection) */\nimport {\n  CUSTOM_BUTTON_OPTIONS,\n  generateCustomCallWithChatDrawerButtons,\n  onFetchCustomButtonPropsTrampoline\n} from '../CustomButton';\n/* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\nimport { usePropsFor } from '../../CallComposite/hooks/usePropsFor';\n/* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\nimport { useLocale } from '../../localization';\n\n/** @private */\nexport interface MoreDrawerStrings {\n  /**\n   * Label for people drawerMenuItem.\n   */\n  peopleButtonLabel: string;\n  /**\n   * Label for audio device drawerMenuItem.\n   *\n   * @remarks This replaces the microphoneMenuTitle speakers can not be enumerated\n   *\n   */\n  audioDeviceMenuTitle?: string;\n  /**\n   * Label for microphone drawerMenuItem.\n   *\n   * @remarks Only displayed when speakers can be enumerated otherwise audioDeviceMenuTitle is used\n   *\n   */\n  microphoneMenuTitle: string;\n  /**\n   * Label for speaker drawerMenuItem.\n   *\n   * @remarks Only displayed when speakers can be enumerated\n   *\n   */\n  speakerMenuTitle: string;\n}\n\n/** @private */\nexport interface MoreDrawerDevicesMenuProps {\n  /**\n   * Available microphones for selection\n   */\n  microphones?: OptionsDevice[];\n  /**\n   * Available speakers for selection\n   */\n  speakers?: OptionsDevice[];\n  /**\n   * Microphone that is shown as currently selected\n   */\n  selectedMicrophone?: OptionsDevice;\n  /**\n   * Speaker that is shown as currently selected\n   */\n  selectedSpeaker?: OptionsDevice;\n  /**\n   * Speaker when a speaker is selected\n   */\n  onSelectSpeaker: (device: AudioDeviceInfo) => Promise<void>;\n  /**\n   * Callback when a microphone is selected\n   */\n  onSelectMicrophone: (device: AudioDeviceInfo) => Promise<void>;\n}\n\n/** @private */\nexport interface MoreDrawerProps extends MoreDrawerDevicesMenuProps {\n  onLightDismiss: () => void;\n  onPeopleButtonClicked: () => void;\n  callControls?: boolean | CallWithChatControlOptions;\n  onClickShowDialpad?: () => void;\n  strings: MoreDrawerStrings;\n  disableButtonsForHoldScreen?: boolean;\n}\n\nconst inferCallWithChatControlOptions = (\n  callWithChatControls?: boolean | CallWithChatControlOptions\n): CallWithChatControlOptions | false => {\n  if (callWithChatControls === false) {\n    return false;\n  }\n  const options = callWithChatControls === true || callWithChatControls === undefined ? {} : callWithChatControls;\n  return options;\n};\n\n/** @private */\nexport const MoreDrawer = (props: MoreDrawerProps): JSX.Element => {\n  const drawerMenuItems: DrawerMenuItemProps[] = [];\n\n  const { speakers, onSelectSpeaker, onLightDismiss } = props;\n\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  const localeStrings = useLocale();\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  const holdButtonProps = usePropsFor(HoldButton);\n\n  const onSpeakerItemClick = useCallback(\n    (_ev, itemKey) => {\n      const selected = speakers?.find((speaker) => speaker.id === itemKey);\n      if (selected) {\n        // This is unsafe - we're only passing in part of the argument to the handler.\n        // But this is a known issue in our state.\n        onSelectSpeaker(selected as AudioDeviceInfo);\n      }\n      onLightDismiss();\n    },\n    [speakers, onSelectSpeaker, onLightDismiss]\n  );\n\n  const drawerSelectionOptions = inferCallWithChatControlOptions(props.callControls);\n\n  if (props.speakers && props.speakers.length > 0) {\n    drawerMenuItems.push({\n      itemKey: 'speakers',\n      disabled: props.disableButtonsForHoldScreen,\n      text: props.strings.speakerMenuTitle,\n      iconProps: { iconName: 'MoreDrawerSpeakers' },\n      subMenuProps: props.speakers.map((speaker) => ({\n        itemKey: speaker.id,\n        iconProps: {\n          iconName: isDeviceSelected(speaker, props.selectedSpeaker)\n            ? 'MoreDrawerSelectedSpeaker'\n            : 'MoreDrawerSpeakers'\n        },\n        text: speaker.name,\n        onItemClick: onSpeakerItemClick,\n        secondaryIconProps: isDeviceSelected(speaker, props.selectedSpeaker) ? { iconName: 'Accept' } : undefined\n      })),\n      secondaryText: props.selectedSpeaker?.name\n    });\n  }\n\n  const { microphones, onSelectMicrophone } = props;\n  const onMicrophoneItemClick = useCallback(\n    (_ev, itemKey) => {\n      const selected = microphones?.find((mic) => mic.id === itemKey);\n      if (selected) {\n        // This is unsafe - we're only passing in part of the argument to the handler.\n        // But this is a known issue in our state.\n        onSelectMicrophone(selected as AudioDeviceInfo);\n      }\n      onLightDismiss();\n    },\n    [microphones, onSelectMicrophone, onLightDismiss]\n  );\n\n  if (props.microphones && props.microphones.length > 0) {\n    // Set props as Microphone if speakers can be enumerated else set as Audio Device\n    const speakersAvailable = props.speakers && props.speakers.length > 0;\n    const itemKey = speakersAvailable ? 'microphones' : 'audioDevices';\n    const text = speakersAvailable ? props.strings.microphoneMenuTitle : props.strings.audioDeviceMenuTitle;\n    const iconName = speakersAvailable ? 'MoreDrawerMicrophones' : 'MoreDrawerSpeakers';\n    const selectedIconName = speakersAvailable ? 'MoreDrawerSelectedMicrophone' : 'MoreDrawerSelectedSpeaker';\n\n    drawerMenuItems.push({\n      itemKey: itemKey,\n      disabled: props.disableButtonsForHoldScreen,\n      text: text,\n      iconProps: { iconName: iconName },\n      subMenuProps: props.microphones.map((mic) => ({\n        itemKey: mic.id,\n        iconProps: {\n          iconName: isDeviceSelected(mic, props.selectedMicrophone) ? selectedIconName : iconName\n        },\n        text: mic.name,\n        onItemClick: onMicrophoneItemClick,\n        secondaryIconProps: isDeviceSelected(mic, props.selectedMicrophone) ? { iconName: 'Accept' } : undefined\n      })),\n      secondaryText: props.selectedMicrophone?.name\n    });\n  }\n  if (drawerSelectionOptions !== false && isEnabled(drawerSelectionOptions?.peopleButton)) {\n    drawerMenuItems.push({\n      itemKey: 'people',\n      text: props.strings.peopleButtonLabel,\n      iconProps: { iconName: 'MoreDrawerPeople' },\n      onItemClick: props.onPeopleButtonClicked\n    });\n  }\n\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  if (drawerSelectionOptions !== false && isEnabled(drawerSelectionOptions?.peopleButton)) {\n    drawerMenuItems.push({\n      itemKey: 'holdButtonKey',\n      disabled: props.disableButtonsForHoldScreen,\n      text: localeStrings.component.strings.holdButton.tooltipOffContent,\n      onItemClick: () => {\n        holdButtonProps.onToggleHold();\n      },\n      iconProps: { iconName: 'HoldCallContextualMenuItem', styles: { root: { lineHeight: 0 } } }\n    });\n  }\n\n  /*@conditional-compile-remove(PSTN-calls) */\n  if (drawerSelectionOptions !== false && isEnabled(drawerSelectionOptions?.peopleButton) && props.onClickShowDialpad) {\n    drawerMenuItems.push({\n      itemKey: 'showDialpadKey',\n      disabled: props.disableButtonsForHoldScreen,\n      text: localeStrings.strings.callWithChat.openDtmfDialpadLabel,\n      onItemClick: () => {\n        props.onClickShowDialpad && props.onClickShowDialpad();\n      },\n      iconProps: { iconName: 'Dialpad', styles: { root: { lineHeight: 0 } } }\n    });\n  }\n\n  /* @conditional-compile-remove(control-bar-button-injection) */\n  const customDrawerButtons = useMemo(\n    () =>\n      generateCustomCallWithChatDrawerButtons(\n        onFetchCustomButtonPropsTrampoline(drawerSelectionOptions !== false ? drawerSelectionOptions : undefined),\n        drawerSelectionOptions !== false ? drawerSelectionOptions?.displayType : undefined\n      ),\n    [drawerSelectionOptions]\n  );\n\n  /* @conditional-compile-remove(control-bar-button-injection) */\n  customDrawerButtons['overflow']?.props.children.forEach((element) => {\n    drawerMenuItems.push(element);\n  });\n  /* @conditional-compile-remove(control-bar-button-injection) */\n  customDrawerButtons['primary']?.props.children\n    .slice(CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_MOBILE_CUSTOM_BUTTONS)\n    .forEach((element) => {\n      drawerMenuItems.push(element);\n    });\n  /* @conditional-compile-remove(control-bar-button-injection) */\n  customDrawerButtons['secondary']?.props.children.forEach((element) => {\n    drawerMenuItems.push(element);\n  });\n\n  return <DrawerMenu items={drawerMenuItems} onLightDismiss={props.onLightDismiss} />;\n};\n\nconst isDeviceSelected = (speaker: OptionsDevice, selectedSpeaker?: OptionsDevice): boolean =>\n  !!selectedSpeaker && speaker.id === selectedSpeaker.id;\n\nconst isEnabled = (option: unknown): boolean => option !== false;\n\"../../../../../react-components/src\""]}
+{"version":3,"file":"MoreDrawer.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallWithChatComposite/components/MoreDrawer.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useCallback } from 'react';\n/* @conditional-compile-remove(control-bar-button-injection) */\nimport { useMemo } from 'react';\nimport {\n  OptionsDevice,\n  _DrawerMenu as DrawerMenu,\n  _DrawerMenuItemProps as DrawerMenuItemProps,\n  _DrawerMenuItemProps\n} from '@internal/react-components';\n/* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\nimport { HoldButton } from '@internal/react-components';\nimport { AudioDeviceInfo } from '@azure/communication-calling';\nimport { CallWithChatControlOptions } from '../CallWithChatComposite';\n/* @conditional-compile-remove(control-bar-button-injection) */\nimport {\n  CUSTOM_BUTTON_OPTIONS,\n  generateCustomCallWithChatDrawerButtons,\n  onFetchCustomButtonPropsTrampoline\n} from '../CustomButton';\n/* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\nimport { usePropsFor } from '../../CallComposite/hooks/usePropsFor';\n/* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\nimport { useLocale } from '../../localization';\nimport { isDisabled } from '../../CallComposite/utils';\n\n/** @private */\nexport interface MoreDrawerStrings {\n  /**\n   * Label for people drawerMenuItem.\n   */\n  peopleButtonLabel: string;\n  /**\n   * Label for audio device drawerMenuItem.\n   *\n   * @remarks This replaces the microphoneMenuTitle speakers can not be enumerated\n   *\n   */\n  audioDeviceMenuTitle?: string;\n  /**\n   * Label for microphone drawerMenuItem.\n   *\n   * @remarks Only displayed when speakers can be enumerated otherwise audioDeviceMenuTitle is used\n   *\n   */\n  microphoneMenuTitle: string;\n  /**\n   * Label for speaker drawerMenuItem.\n   *\n   * @remarks Only displayed when speakers can be enumerated\n   *\n   */\n  speakerMenuTitle: string;\n}\n\n/** @private */\nexport interface MoreDrawerDevicesMenuProps {\n  /**\n   * Available microphones for selection\n   */\n  microphones?: OptionsDevice[];\n  /**\n   * Available speakers for selection\n   */\n  speakers?: OptionsDevice[];\n  /**\n   * Microphone that is shown as currently selected\n   */\n  selectedMicrophone?: OptionsDevice;\n  /**\n   * Speaker that is shown as currently selected\n   */\n  selectedSpeaker?: OptionsDevice;\n  /**\n   * Speaker when a speaker is selected\n   */\n  onSelectSpeaker: (device: AudioDeviceInfo) => Promise<void>;\n  /**\n   * Callback when a microphone is selected\n   */\n  onSelectMicrophone: (device: AudioDeviceInfo) => Promise<void>;\n}\n\n/** @private */\nexport interface MoreDrawerProps extends MoreDrawerDevicesMenuProps {\n  onLightDismiss: () => void;\n  onPeopleButtonClicked: () => void;\n  callControls?: boolean | CallWithChatControlOptions;\n  onClickShowDialpad?: () => void;\n  strings: MoreDrawerStrings;\n  disableButtonsForHoldScreen?: boolean;\n}\n\nconst inferCallWithChatControlOptions = (\n  callWithChatControls?: boolean | CallWithChatControlOptions\n): CallWithChatControlOptions | false => {\n  if (callWithChatControls === false) {\n    return false;\n  }\n  const options = callWithChatControls === true || callWithChatControls === undefined ? {} : callWithChatControls;\n  return options;\n};\n\n/** @private */\nexport const MoreDrawer = (props: MoreDrawerProps): JSX.Element => {\n  const drawerMenuItems: DrawerMenuItemProps[] = [];\n\n  const { speakers, onSelectSpeaker, onLightDismiss } = props;\n\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  const localeStrings = useLocale();\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  const holdButtonProps = usePropsFor(HoldButton);\n\n  const onSpeakerItemClick = useCallback(\n    (_ev, itemKey) => {\n      const selected = speakers?.find((speaker) => speaker.id === itemKey);\n      if (selected) {\n        // This is unsafe - we're only passing in part of the argument to the handler.\n        // But this is a known issue in our state.\n        onSelectSpeaker(selected as AudioDeviceInfo);\n      }\n      onLightDismiss();\n    },\n    [speakers, onSelectSpeaker, onLightDismiss]\n  );\n\n  const drawerSelectionOptions = inferCallWithChatControlOptions(props.callControls);\n\n  if (props.speakers && props.speakers.length > 0) {\n    drawerMenuItems.push({\n      itemKey: 'speakers',\n      disabled: props.disableButtonsForHoldScreen,\n      text: props.strings.speakerMenuTitle,\n      iconProps: { iconName: 'MoreDrawerSpeakers' },\n      subMenuProps: props.speakers.map((speaker) => ({\n        itemKey: speaker.id,\n        iconProps: {\n          iconName: isDeviceSelected(speaker, props.selectedSpeaker)\n            ? 'MoreDrawerSelectedSpeaker'\n            : 'MoreDrawerSpeakers'\n        },\n        text: speaker.name,\n        onItemClick: onSpeakerItemClick,\n        secondaryIconProps: isDeviceSelected(speaker, props.selectedSpeaker) ? { iconName: 'Accept' } : undefined\n      })),\n      secondaryText: props.selectedSpeaker?.name\n    });\n  }\n\n  const { microphones, onSelectMicrophone } = props;\n  const onMicrophoneItemClick = useCallback(\n    (_ev, itemKey) => {\n      const selected = microphones?.find((mic) => mic.id === itemKey);\n      if (selected) {\n        // This is unsafe - we're only passing in part of the argument to the handler.\n        // But this is a known issue in our state.\n        onSelectMicrophone(selected as AudioDeviceInfo);\n      }\n      onLightDismiss();\n    },\n    [microphones, onSelectMicrophone, onLightDismiss]\n  );\n\n  if (props.microphones && props.microphones.length > 0) {\n    // Set props as Microphone if speakers can be enumerated else set as Audio Device\n    const speakersAvailable = props.speakers && props.speakers.length > 0;\n    const itemKey = speakersAvailable ? 'microphones' : 'audioDevices';\n    const text = speakersAvailable ? props.strings.microphoneMenuTitle : props.strings.audioDeviceMenuTitle;\n    const iconName = speakersAvailable ? 'MoreDrawerMicrophones' : 'MoreDrawerSpeakers';\n    const selectedIconName = speakersAvailable ? 'MoreDrawerSelectedMicrophone' : 'MoreDrawerSelectedSpeaker';\n\n    drawerMenuItems.push({\n      itemKey: itemKey,\n      disabled: props.disableButtonsForHoldScreen,\n      text: text,\n      iconProps: { iconName: iconName },\n      subMenuProps: props.microphones.map((mic) => ({\n        itemKey: mic.id,\n        iconProps: {\n          iconName: isDeviceSelected(mic, props.selectedMicrophone) ? selectedIconName : iconName\n        },\n        text: mic.name,\n        onItemClick: onMicrophoneItemClick,\n        secondaryIconProps: isDeviceSelected(mic, props.selectedMicrophone) ? { iconName: 'Accept' } : undefined,\n        disabled: drawerSelectionOptions !== false ? isDisabled(drawerSelectionOptions.microphoneButton) : undefined\n      })),\n      secondaryText: props.selectedMicrophone?.name\n    });\n  }\n  if (drawerSelectionOptions !== false && isEnabled(drawerSelectionOptions?.peopleButton)) {\n    drawerMenuItems.push({\n      itemKey: 'people',\n      text: props.strings.peopleButtonLabel,\n      iconProps: { iconName: 'MoreDrawerPeople' },\n      onItemClick: props.onPeopleButtonClicked,\n      disabled: drawerSelectionOptions !== false ? isDisabled(drawerSelectionOptions.peopleButton) : undefined\n    });\n  }\n\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  if (drawerSelectionOptions !== false && isEnabled(drawerSelectionOptions?.holdButton)) {\n    drawerMenuItems.push({\n      itemKey: 'holdButtonKey',\n      disabled:\n        props.disableButtonsForHoldScreen ||\n        (drawerSelectionOptions !== false ? isDisabled(drawerSelectionOptions.holdButton) : undefined),\n      text: localeStrings.component.strings.holdButton.tooltipOffContent,\n      onItemClick: () => {\n        holdButtonProps.onToggleHold();\n      },\n      iconProps: { iconName: 'HoldCallContextualMenuItem', styles: { root: { lineHeight: 0 } } }\n    });\n  }\n\n  /*@conditional-compile-remove(PSTN-calls) */\n  // dtmf tone sending only works for 1:1 PSTN call\n  if (drawerSelectionOptions !== false && props.onClickShowDialpad) {\n    drawerMenuItems.push({\n      itemKey: 'showDialpadKey',\n      disabled: props.disableButtonsForHoldScreen,\n      text: localeStrings.strings.callWithChat.openDtmfDialpadLabel,\n      onItemClick: () => {\n        props.onClickShowDialpad && props.onClickShowDialpad();\n      },\n      iconProps: { iconName: 'Dialpad', styles: { root: { lineHeight: 0 } } }\n    });\n  }\n\n  /* @conditional-compile-remove(control-bar-button-injection) */\n  const customDrawerButtons = useMemo(\n    () =>\n      generateCustomCallWithChatDrawerButtons(\n        onFetchCustomButtonPropsTrampoline(drawerSelectionOptions !== false ? drawerSelectionOptions : undefined),\n        drawerSelectionOptions !== false ? drawerSelectionOptions?.displayType : undefined\n      ),\n    [drawerSelectionOptions]\n  );\n\n  /* @conditional-compile-remove(control-bar-button-injection) */\n  customDrawerButtons['overflow']?.props.children.forEach((element) => {\n    drawerMenuItems.push(element);\n  });\n  /* @conditional-compile-remove(control-bar-button-injection) */\n  customDrawerButtons['primary']?.props.children\n    .slice(CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_MOBILE_CUSTOM_BUTTONS)\n    .forEach((element) => {\n      drawerMenuItems.push(element);\n    });\n  /* @conditional-compile-remove(control-bar-button-injection) */\n  customDrawerButtons['secondary']?.props.children.forEach((element) => {\n    drawerMenuItems.push(element);\n  });\n\n  return <DrawerMenu items={drawerMenuItems} onLightDismiss={props.onLightDismiss} />;\n};\n\nconst isDeviceSelected = (speaker: OptionsDevice, selectedSpeaker?: OptionsDevice): boolean =>\n  !!selectedSpeaker && speaker.id === selectedSpeaker.id;\n\nconst isEnabled = (option: unknown): boolean => option !== false;\n\"../../../../../react-components/src\""]}

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

@@ -7,6 +7,7 @@ export interface AddPeopleDropdownStrings extends CallingDialpadStrings {
     copyInviteLinkButtonLabel: string;
     openDialpadButtonLabel: string;
     peoplePaneAddPeopleButtonLabel: string;
+    copyInviteLinkActionedAriaLabel: string;
 }
 /** @private */
 export interface AddPeopleDropdownProps {

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

@@ -2,7 +2,7 @@
 // Licensed under the MIT license.
 import React from 'react';
 import { DefaultButton, PrimaryButton, Stack, useTheme } from '@fluentui/react';
-import { _DrawerMenu } from "../../../../react-components/src";
+import { _DrawerMenu, Announcer } from "../../../../react-components/src";
 import copy from 'copy-to-clipboard';
 import { useMemo, useState } from 'react';
 /* @conditional-compile-remove(PSTN-calls) */
@@ -18,6 +18,7 @@ export const AddPeopleDropdown = (props) => {
     const theme = useTheme();
     const { inviteLink, strings, mobileView, onAddParticipant, alternateCallerId } = props;
     const [showDialpad, setShowDialpad] = useState(false);
+    const [announcerStrings, setAnnouncerStrings] = useState();
     const menuStyleThemed = useMemo(() => themedMenuStyle(theme), [theme]);
     const copyLinkButtonStylesThemed = useMemo(() => themedCopyLinkButtonStyles(theme, mobileView), [mobileView, theme]);
     const defaultMenuProps = useMemo(() => {
@@ -27,6 +28,10 @@ export const AddPeopleDropdown = (props) => {
             useTargetWidth: true,
             calloutProps: {
                 preventDismissOnEvent
+            },
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            onMenuOpened(contextualMenu) {
+                setAnnouncerStrings(undefined);
             }
         };
         if (inviteLink) {
@@ -35,7 +40,10 @@ export const AddPeopleDropdown = (props) => {
                 text: strings.copyInviteLinkButtonLabel,
                 itemProps: { styles: copyLinkButtonStylesThemed },
                 iconProps: { iconName: 'Link', style: iconStyles },
-                onClick: () => copy(inviteLink)
+                onClick: () => {
+                    setAnnouncerStrings(strings.copyInviteLinkActionedAriaLabel);
+                    copy(inviteLink);
+                }
             });
         }
         // only show the dialpad option when alternateCallerId is set
@@ -51,12 +59,13 @@ export const AddPeopleDropdown = (props) => {
         }
         return menuProps;
     }, [
+        menuStyleThemed,
+        inviteLink,
+        alternateCallerId,
         strings.copyInviteLinkButtonLabel,
+        strings.copyInviteLinkActionedAriaLabel,
         strings.openDialpadButtonLabel,
-        copyLinkButtonStylesThemed,
-        inviteLink,
-        menuStyleThemed,
-        alternateCallerId
+        copyLinkButtonStylesThemed
     ]);
     const onDismissDialpad = () => {
         setShowDialpad(false);
@@ -70,6 +79,7 @@ export const AddPeopleDropdown = (props) => {
     }, [defaultMenuProps, setAddPeopleDrawerMenuItems]);
     if (mobileView) {
         return (React.createElement(Stack, null,
+            React.createElement(Announcer, { ariaLive: 'assertive', announcementString: announcerStrings }),
             React.createElement(Stack.Item, { styles: copyLinkButtonContainerStyles },
                 React.createElement(PrimaryButton, { onClick: setDrawerMenuItemsForAddPeople, styles: copyLinkButtonStylesThemed, onRenderIcon: () => PeoplePaneAddPersonIconTrampoline(), text: strings.peoplePaneAddPeopleButtonLabel, "data-ui-id": "call-add-people-button" })),
             addPeopleDrawerMenuItems.length > 0 && (React.createElement(Stack, { styles: drawerContainerStyles, "data-ui-id": "call-add-people-dropdown" },
@@ -77,6 +87,7 @@ export const AddPeopleDropdown = (props) => {
             alternateCallerId && (React.createElement(CallingDialpad, { isMobile: true, strings: strings, showDialpad: showDialpad, onDismissDialpad: onDismissDialpad, onAddParticipant: onAddParticipant, alternateCallerId: alternateCallerId }))));
     }
     return (React.createElement(React.Fragment, null, React.createElement(Stack, null,
+        React.createElement(Announcer, { ariaLive: 'assertive', announcementString: announcerStrings }),
         alternateCallerId && (React.createElement(CallingDialpad, { isMobile: false, strings: strings, showDialpad: showDialpad, onDismissDialpad: onDismissDialpad, onAddParticipant: onAddParticipant, alternateCallerId: alternateCallerId })),
         React.createElement(Stack, { styles: copyLinkButtonStackStyles },
             React.createElement(DefaultButton, { onRenderIcon: () => PeoplePaneAddPersonIconTrampoline(), text: strings.peoplePaneAddPeopleButtonLabel, menuProps: defaultMenuProps, styles: copyLinkButtonStylesThemed, "data-ui-id": "call-add-people-button" })))));

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

@@ -1 +1 @@
-{"version":3,"file":"AddPeopleDropdown.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/AddPeopleDropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport React from 'react';\nimport {\n  DefaultButton,\n  IContextualMenuItem,\n  IContextualMenuProps,\n  PrimaryButton,\n  Stack,\n  useTheme\n} from '@fluentui/react';\n\nimport { _DrawerMenu, _DrawerMenuItemProps } from '@internal/react-components';\nimport copy from 'copy-to-clipboard';\nimport { useMemo, useState } from 'react';\n/* @conditional-compile-remove(PSTN-calls) */\nimport { CallWithChatCompositeIcon } from './icons';\nimport { iconStyles, themedCopyLinkButtonStyles, themedMenuStyle } from './AddPeopleDropdown.styles';\nimport { CallingDialpad } from './CallingDialpad';\nimport { CallingDialpadStrings } from './CallingDialpad';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\nimport { copyLinkButtonContainerStyles, copyLinkButtonStackStyles } from './styles/PeoplePaneContent.styles';\nimport { drawerContainerStyles } from '../CallComposite/styles/CallComposite.styles';\nimport { convertContextualMenuItemToDrawerMenuItem } from '../CallWithChatComposite/ConvertContextualMenuItemToDrawerMenuItem';\nimport { CommunicationIdentifier } from '@azure/communication-common';\nimport { AddPhoneNumberOptions } from '@azure/communication-calling';\n\n/** @private */\nexport interface AddPeopleDropdownStrings extends CallingDialpadStrings {\n  copyInviteLinkButtonLabel: string;\n  openDialpadButtonLabel: string;\n  peoplePaneAddPeopleButtonLabel: string;\n}\n\n/** @private */\nexport interface AddPeopleDropdownProps {\n  inviteLink?: string;\n  mobileView?: boolean;\n  strings: AddPeopleDropdownStrings;\n  onAddParticipant: (participant: CommunicationIdentifier, options?: AddPhoneNumberOptions) => void;\n  alternateCallerId?: string;\n}\n\n/** @private */\nexport const AddPeopleDropdown = (props: AddPeopleDropdownProps): JSX.Element => {\n  const theme = useTheme();\n\n  const { inviteLink, strings, mobileView, onAddParticipant, alternateCallerId } = props;\n\n  const [showDialpad, setShowDialpad] = useState(false);\n\n  const menuStyleThemed = useMemo(() => themedMenuStyle(theme), [theme]);\n\n  const copyLinkButtonStylesThemed = useMemo(() => themedCopyLinkButtonStyles(theme, mobileView), [mobileView, theme]);\n\n  const defaultMenuProps = useMemo((): IContextualMenuProps => {\n    const menuProps: IContextualMenuProps = {\n      styles: menuStyleThemed,\n      items: [],\n      useTargetWidth: true,\n      calloutProps: {\n        preventDismissOnEvent\n      }\n    };\n\n    if (inviteLink) {\n      menuProps.items.push({\n        key: 'InviteLinkKey',\n        text: strings.copyInviteLinkButtonLabel,\n        itemProps: { styles: copyLinkButtonStylesThemed },\n        iconProps: { iconName: 'Link', style: iconStyles },\n        onClick: () => copy(inviteLink)\n      });\n    }\n\n    // only show the dialpad option when alternateCallerId is set\n    if (alternateCallerId) {\n      menuProps.items.push({\n        key: 'DialpadKey',\n        text: strings.openDialpadButtonLabel,\n        itemProps: { styles: copyLinkButtonStylesThemed },\n        iconProps: { iconName: PeoplePaneOpenDialpadIconNameTrampoline(), style: iconStyles },\n        onClick: () => setShowDialpad(true),\n        'data-ui-id': 'call-dial-phone-number-button'\n      });\n    }\n\n    return menuProps;\n  }, [\n    strings.copyInviteLinkButtonLabel,\n    strings.openDialpadButtonLabel,\n    copyLinkButtonStylesThemed,\n    inviteLink,\n    menuStyleThemed,\n    alternateCallerId\n  ]);\n\n  const onDismissDialpad = (): void => {\n    setShowDialpad(false);\n  };\n\n  const [addPeopleDrawerMenuItems, setAddPeopleDrawerMenuItems] = useState<_DrawerMenuItemProps[]>([]);\n\n  const setDrawerMenuItemsForAddPeople: () => void = useMemo(() => {\n    return () => {\n      const drawerMenuItems = defaultMenuProps.items.map((contextualMenu: IContextualMenuItem) =>\n        convertContextualMenuItemToDrawerMenuItem(contextualMenu, () => setAddPeopleDrawerMenuItems([]))\n      );\n      setAddPeopleDrawerMenuItems(drawerMenuItems);\n    };\n  }, [defaultMenuProps, setAddPeopleDrawerMenuItems]);\n\n  if (mobileView) {\n    return (\n      <Stack>\n        <Stack.Item styles={copyLinkButtonContainerStyles}>\n          <PrimaryButton\n            onClick={setDrawerMenuItemsForAddPeople}\n            styles={copyLinkButtonStylesThemed}\n            onRenderIcon={() => PeoplePaneAddPersonIconTrampoline()}\n            text={strings.peoplePaneAddPeopleButtonLabel}\n            data-ui-id=\"call-add-people-button\"\n          />\n        </Stack.Item>\n\n        {addPeopleDrawerMenuItems.length > 0 && (\n          <Stack styles={drawerContainerStyles} data-ui-id=\"call-add-people-dropdown\">\n            <_DrawerMenu onLightDismiss={() => setAddPeopleDrawerMenuItems([])} items={addPeopleDrawerMenuItems} />\n          </Stack>\n        )}\n        {alternateCallerId && (\n          <CallingDialpad\n            isMobile\n            strings={strings}\n            showDialpad={showDialpad}\n            onDismissDialpad={onDismissDialpad}\n            onAddParticipant={onAddParticipant}\n            alternateCallerId={alternateCallerId}\n          />\n        )}\n      </Stack>\n    );\n  }\n\n  return (\n    <>\n      {\n        <Stack>\n          {alternateCallerId && (\n            <CallingDialpad\n              isMobile={false}\n              strings={strings}\n              showDialpad={showDialpad}\n              onDismissDialpad={onDismissDialpad}\n              onAddParticipant={onAddParticipant}\n              alternateCallerId={alternateCallerId}\n            />\n          )}\n\n          <Stack styles={copyLinkButtonStackStyles}>\n            <DefaultButton\n              onRenderIcon={() => PeoplePaneAddPersonIconTrampoline()}\n              text={strings.peoplePaneAddPeopleButtonLabel}\n              menuProps={defaultMenuProps}\n              styles={copyLinkButtonStylesThemed}\n              data-ui-id=\"call-add-people-button\"\n            />\n          </Stack>\n        </Stack>\n      }\n    </>\n  );\n};\n\nfunction PeoplePaneOpenDialpadIconNameTrampoline(): string {\n  /* @conditional-compile-remove(PSTN-calls) */\n  return 'PeoplePaneOpenDialpad';\n\n  return '';\n}\n\nfunction PeoplePaneAddPersonIconTrampoline(): JSX.Element {\n  /* @conditional-compile-remove(PSTN-calls) */\n  return <CallWithChatCompositeIcon iconName=\"PeoplePaneAddPerson\" />;\n\n  return <></>;\n}\n\"../../../../react-components/src\"\"../../../../acs-ui-common/src\""]}
+{"version":3,"file":"AddPeopleDropdown.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/AddPeopleDropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport React from 'react';\nimport {\n  DefaultButton,\n  IContextualMenuItem,\n  IContextualMenuProps,\n  PrimaryButton,\n  Stack,\n  useTheme\n} from '@fluentui/react';\n\nimport { _DrawerMenu, _DrawerMenuItemProps, Announcer } from '@internal/react-components';\nimport copy from 'copy-to-clipboard';\nimport { useMemo, useState } from 'react';\n/* @conditional-compile-remove(PSTN-calls) */\nimport { CallWithChatCompositeIcon } from './icons';\nimport { iconStyles, themedCopyLinkButtonStyles, themedMenuStyle } from './AddPeopleDropdown.styles';\nimport { CallingDialpad } from './CallingDialpad';\nimport { CallingDialpadStrings } from './CallingDialpad';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\nimport { copyLinkButtonContainerStyles, copyLinkButtonStackStyles } from './styles/PeoplePaneContent.styles';\nimport { drawerContainerStyles } from '../CallComposite/styles/CallComposite.styles';\nimport { convertContextualMenuItemToDrawerMenuItem } from '../CallWithChatComposite/ConvertContextualMenuItemToDrawerMenuItem';\nimport { CommunicationIdentifier } from '@azure/communication-common';\nimport { AddPhoneNumberOptions } from '@azure/communication-calling';\n\n/** @private */\nexport interface AddPeopleDropdownStrings extends CallingDialpadStrings {\n  copyInviteLinkButtonLabel: string;\n  openDialpadButtonLabel: string;\n  peoplePaneAddPeopleButtonLabel: string;\n  copyInviteLinkActionedAriaLabel: string;\n}\n\n/** @private */\nexport interface AddPeopleDropdownProps {\n  inviteLink?: string;\n  mobileView?: boolean;\n  strings: AddPeopleDropdownStrings;\n  onAddParticipant: (participant: CommunicationIdentifier, options?: AddPhoneNumberOptions) => void;\n  alternateCallerId?: string;\n}\n\n/** @private */\nexport const AddPeopleDropdown = (props: AddPeopleDropdownProps): JSX.Element => {\n  const theme = useTheme();\n\n  const { inviteLink, strings, mobileView, onAddParticipant, alternateCallerId } = props;\n\n  const [showDialpad, setShowDialpad] = useState(false);\n\n  const [announcerStrings, setAnnouncerStrings] = useState<string>();\n\n  const menuStyleThemed = useMemo(() => themedMenuStyle(theme), [theme]);\n\n  const copyLinkButtonStylesThemed = useMemo(() => themedCopyLinkButtonStyles(theme, mobileView), [mobileView, theme]);\n\n  const defaultMenuProps = useMemo((): IContextualMenuProps => {\n    const menuProps: IContextualMenuProps = {\n      styles: menuStyleThemed,\n      items: [],\n      useTargetWidth: true,\n      calloutProps: {\n        preventDismissOnEvent\n      },\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onMenuOpened(contextualMenu?) {\n        setAnnouncerStrings(undefined);\n      }\n    };\n\n    if (inviteLink) {\n      menuProps.items.push({\n        key: 'InviteLinkKey',\n        text: strings.copyInviteLinkButtonLabel,\n        itemProps: { styles: copyLinkButtonStylesThemed },\n        iconProps: { iconName: 'Link', style: iconStyles },\n        onClick: () => {\n          setAnnouncerStrings(strings.copyInviteLinkActionedAriaLabel);\n          copy(inviteLink);\n        }\n      });\n    }\n\n    // only show the dialpad option when alternateCallerId is set\n    if (alternateCallerId) {\n      menuProps.items.push({\n        key: 'DialpadKey',\n        text: strings.openDialpadButtonLabel,\n        itemProps: { styles: copyLinkButtonStylesThemed },\n        iconProps: { iconName: PeoplePaneOpenDialpadIconNameTrampoline(), style: iconStyles },\n        onClick: () => setShowDialpad(true),\n        'data-ui-id': 'call-dial-phone-number-button'\n      });\n    }\n\n    return menuProps;\n  }, [\n    menuStyleThemed,\n    inviteLink,\n    alternateCallerId,\n    strings.copyInviteLinkButtonLabel,\n    strings.copyInviteLinkActionedAriaLabel,\n    strings.openDialpadButtonLabel,\n    copyLinkButtonStylesThemed\n  ]);\n\n  const onDismissDialpad = (): void => {\n    setShowDialpad(false);\n  };\n\n  const [addPeopleDrawerMenuItems, setAddPeopleDrawerMenuItems] = useState<_DrawerMenuItemProps[]>([]);\n\n  const setDrawerMenuItemsForAddPeople: () => void = useMemo(() => {\n    return () => {\n      const drawerMenuItems = defaultMenuProps.items.map((contextualMenu: IContextualMenuItem) =>\n        convertContextualMenuItemToDrawerMenuItem(contextualMenu, () => setAddPeopleDrawerMenuItems([]))\n      );\n      setAddPeopleDrawerMenuItems(drawerMenuItems);\n    };\n  }, [defaultMenuProps, setAddPeopleDrawerMenuItems]);\n\n  if (mobileView) {\n    return (\n      <Stack>\n        <Announcer ariaLive={'assertive'} announcementString={announcerStrings} />\n        <Stack.Item styles={copyLinkButtonContainerStyles}>\n          <PrimaryButton\n            onClick={setDrawerMenuItemsForAddPeople}\n            styles={copyLinkButtonStylesThemed}\n            onRenderIcon={() => PeoplePaneAddPersonIconTrampoline()}\n            text={strings.peoplePaneAddPeopleButtonLabel}\n            data-ui-id=\"call-add-people-button\"\n          />\n        </Stack.Item>\n\n        {addPeopleDrawerMenuItems.length > 0 && (\n          <Stack styles={drawerContainerStyles} data-ui-id=\"call-add-people-dropdown\">\n            <_DrawerMenu onLightDismiss={() => setAddPeopleDrawerMenuItems([])} items={addPeopleDrawerMenuItems} />\n          </Stack>\n        )}\n        {alternateCallerId && (\n          <CallingDialpad\n            isMobile\n            strings={strings}\n            showDialpad={showDialpad}\n            onDismissDialpad={onDismissDialpad}\n            onAddParticipant={onAddParticipant}\n            alternateCallerId={alternateCallerId}\n          />\n        )}\n      </Stack>\n    );\n  }\n\n  return (\n    <>\n      {\n        <Stack>\n          <Announcer ariaLive={'assertive'} announcementString={announcerStrings} />\n          {alternateCallerId && (\n            <CallingDialpad\n              isMobile={false}\n              strings={strings}\n              showDialpad={showDialpad}\n              onDismissDialpad={onDismissDialpad}\n              onAddParticipant={onAddParticipant}\n              alternateCallerId={alternateCallerId}\n            />\n          )}\n\n          <Stack styles={copyLinkButtonStackStyles}>\n            <DefaultButton\n              onRenderIcon={() => PeoplePaneAddPersonIconTrampoline()}\n              text={strings.peoplePaneAddPeopleButtonLabel}\n              menuProps={defaultMenuProps}\n              styles={copyLinkButtonStylesThemed}\n              data-ui-id=\"call-add-people-button\"\n            />\n          </Stack>\n        </Stack>\n      }\n    </>\n  );\n};\n\nfunction PeoplePaneOpenDialpadIconNameTrampoline(): string {\n  /* @conditional-compile-remove(PSTN-calls) */\n  return 'PeoplePaneOpenDialpad';\n\n  return '';\n}\n\nfunction PeoplePaneAddPersonIconTrampoline(): JSX.Element {\n  /* @conditional-compile-remove(PSTN-calls) */\n  return <CallWithChatCompositeIcon iconName=\"PeoplePaneAddPerson\" />;\n\n  return <></>;\n}\n\"../../../../react-components/src\"\"../../../../acs-ui-common/src\""]}

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

@@ -37,7 +37,7 @@ export const CallingDialpad = (props) => {
     const callButtonStyle = useMemo(() => themedCallButtonStyle(theme), [theme]);
     const dialpadComponent = () => {
         return (React.createElement(React.Fragment, null,
-            React.createElement(Dialpad, { styles: dialpadStyle, onChange: setTextFieldInput }),
+            React.createElement(Dialpad, { styles: dialpadStyle, onChange: setTextFieldInput, isMobile: isMobile }),
             React.createElement(PrimaryButton, { text: strings.dialpadStartCallButtonLabel, onRenderIcon: () => DialpadStartCallIconTrampoline(), onClick: onClickCall, styles: callButtonStyle, disabled: textFieldInput === '' })));
         return React.createElement(React.Fragment, null);
     };

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

@@ -1 +1 @@
-{"version":3,"file":"CallingDialpad.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/CallingDialpad.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport React from 'react';\nimport { useState } from 'react';\nimport { useMemo } from 'react';\nimport { Dialpad, DialpadStyles } from '@internal/react-components';\nimport { _DrawerMenu, _DrawerMenuItemProps, _DrawerSurface } from '@internal/react-components';\nimport { IModalStyles, Modal, Stack, useTheme, Text, IconButton } from '@fluentui/react';\nimport { IButtonStyles, PrimaryButton } from '@fluentui/react';\n\nimport { themeddialpadModalStyle } from './CallingDialpad.styles';\nimport { themedCallButtonStyle, themedDialpadStyle } from './CallingDialpad.styles';\n/* @conditional-compile-remove(PSTN-calls) */\nimport { CallWithChatCompositeIcon } from './icons';\nimport { drawerContainerStyles } from '../CallWithChatComposite/styles/CallWithChatCompositeStyles';\nimport { CommunicationIdentifier } from '@azure/communication-common';\nimport { AddPhoneNumberOptions } from '@azure/communication-calling';\n\n/** @private */\nexport interface CallingDialpadStrings {\n  dialpadModalAriaLabel: string;\n  dialpadModalTitle: string;\n  dialpadCloseModalButtonAriaLabel: string;\n  dialpadStartCallButtonLabel: string;\n}\n\n/** @private */\nexport interface CallingDialpadProps {\n  isMobile: boolean;\n  showDialpad: boolean;\n  strings: CallingDialpadStrings;\n  onDismissDialpad: () => void;\n  onAddParticipant: (participant: CommunicationIdentifier, options?: AddPhoneNumberOptions) => void;\n  alternateCallerId: string;\n}\n\n/** @private */\nexport const CallingDialpad = (props: CallingDialpadProps): JSX.Element => {\n  const { strings, isMobile, showDialpad, onDismissDialpad, onAddParticipant, alternateCallerId } = props;\n  const [textFieldInput, setTextFieldInput] = useState('');\n\n  const theme = useTheme();\n\n  const onDismissTriggered = (): void => {\n    setTextFieldInput('');\n    onDismissDialpad();\n  };\n\n  const onClickCall = (): void => {\n    if (onAddParticipant) {\n      /**\n       * Format the phone number in dialpad textfield to make sure the phone number is in E.164 format.\n       * We assume the input number always include countrycode\n       */\n\n      const phoneNumber = { phoneNumber: '+' + textFieldInput.replace(/\\D/g, '').replaceAll(' ', '') };\n\n      onAddParticipant(phoneNumber, { alternateCallerId: { phoneNumber: alternateCallerId } });\n      onDismissTriggered();\n    }\n  };\n\n  const dialpadModalStyle: Partial<IModalStyles> = useMemo(() => themeddialpadModalStyle(theme), [theme]);\n\n  const dialpadStyle: Partial<DialpadStyles> = useMemo(() => themedDialpadStyle(isMobile, theme), [theme, isMobile]);\n\n  const callButtonStyle: Partial<IButtonStyles> = useMemo(() => themedCallButtonStyle(theme), [theme]);\n\n  const dialpadComponent = (): JSX.Element => {\n    return (\n      <>\n        <Dialpad styles={dialpadStyle} onChange={setTextFieldInput} />\n        <PrimaryButton\n          text={strings.dialpadStartCallButtonLabel}\n          onRenderIcon={() => DialpadStartCallIconTrampoline()}\n          onClick={onClickCall}\n          styles={callButtonStyle}\n          disabled={textFieldInput === ''}\n        />\n      </>\n    );\n\n    return <></>;\n  };\n\n  if (isMobile) {\n    return (\n      <Stack data-ui-id=\"call-with-chat-composite-dialpad\">\n        {showDialpad && (\n          <Stack styles={drawerContainerStyles}>\n            <_DrawerSurface onLightDismiss={onDismissTriggered}>\n              <Stack style={{ padding: '1rem' }}>{dialpadComponent()}</Stack>\n            </_DrawerSurface>\n          </Stack>\n        )}\n      </Stack>\n    );\n  }\n\n  return (\n    <>\n      {\n        <Modal\n          titleAriaId={strings.dialpadModalAriaLabel}\n          isOpen={showDialpad}\n          onDismiss={onDismissTriggered}\n          isBlocking={true}\n          styles={dialpadModalStyle}\n          data-ui-id=\"call-with-chat-composite-dialpad\"\n        >\n          <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\">\n            <Text>{strings.dialpadModalTitle}</Text>\n            <IconButton\n              iconProps={{ iconName: 'Cancel' }}\n              ariaLabel={strings.dialpadCloseModalButtonAriaLabel}\n              onClick={onDismissTriggered}\n              style={{ color: theme.palette.black }}\n            />\n          </Stack>\n\n          <Stack style={{ overflow: 'hidden' }}>{dialpadComponent()}</Stack>\n        </Modal>\n      }\n    </>\n  );\n};\n\nfunction DialpadStartCallIconTrampoline(): JSX.Element {\n  /* @conditional-compile-remove(PSTN-calls) */\n  return <CallWithChatCompositeIcon iconName=\"DialpadStartCall\" />;\n  return <></>;\n}\n\"../../../../react-components/src\""]}
+{"version":3,"file":"CallingDialpad.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/CallingDialpad.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport React from 'react';\nimport { useState } from 'react';\nimport { useMemo } from 'react';\nimport { Dialpad, DialpadStyles } from '@internal/react-components';\nimport { _DrawerMenu, _DrawerMenuItemProps, _DrawerSurface } from '@internal/react-components';\nimport { IModalStyles, Modal, Stack, useTheme, Text, IconButton } from '@fluentui/react';\nimport { IButtonStyles, PrimaryButton } from '@fluentui/react';\n\nimport { themeddialpadModalStyle } from './CallingDialpad.styles';\nimport { themedCallButtonStyle, themedDialpadStyle } from './CallingDialpad.styles';\n/* @conditional-compile-remove(PSTN-calls) */\nimport { CallWithChatCompositeIcon } from './icons';\nimport { drawerContainerStyles } from '../CallWithChatComposite/styles/CallWithChatCompositeStyles';\nimport { CommunicationIdentifier } from '@azure/communication-common';\nimport { AddPhoneNumberOptions } from '@azure/communication-calling';\n\n/** @private */\nexport interface CallingDialpadStrings {\n  dialpadModalAriaLabel: string;\n  dialpadModalTitle: string;\n  dialpadCloseModalButtonAriaLabel: string;\n  dialpadStartCallButtonLabel: string;\n}\n\n/** @private */\nexport interface CallingDialpadProps {\n  isMobile: boolean;\n  showDialpad: boolean;\n  strings: CallingDialpadStrings;\n  onDismissDialpad: () => void;\n  onAddParticipant: (participant: CommunicationIdentifier, options?: AddPhoneNumberOptions) => void;\n  alternateCallerId: string;\n}\n\n/** @private */\nexport const CallingDialpad = (props: CallingDialpadProps): JSX.Element => {\n  const { strings, isMobile, showDialpad, onDismissDialpad, onAddParticipant, alternateCallerId } = props;\n  const [textFieldInput, setTextFieldInput] = useState('');\n\n  const theme = useTheme();\n\n  const onDismissTriggered = (): void => {\n    setTextFieldInput('');\n    onDismissDialpad();\n  };\n\n  const onClickCall = (): void => {\n    if (onAddParticipant) {\n      /**\n       * Format the phone number in dialpad textfield to make sure the phone number is in E.164 format.\n       * We assume the input number always include countrycode\n       */\n\n      const phoneNumber = { phoneNumber: '+' + textFieldInput.replace(/\\D/g, '').replaceAll(' ', '') };\n\n      onAddParticipant(phoneNumber, { alternateCallerId: { phoneNumber: alternateCallerId } });\n      onDismissTriggered();\n    }\n  };\n\n  const dialpadModalStyle: Partial<IModalStyles> = useMemo(() => themeddialpadModalStyle(theme), [theme]);\n\n  const dialpadStyle: Partial<DialpadStyles> = useMemo(() => themedDialpadStyle(isMobile, theme), [theme, isMobile]);\n\n  const callButtonStyle: Partial<IButtonStyles> = useMemo(() => themedCallButtonStyle(theme), [theme]);\n\n  const dialpadComponent = (): JSX.Element => {\n    return (\n      <>\n        <Dialpad styles={dialpadStyle} onChange={setTextFieldInput} isMobile={isMobile} />\n        <PrimaryButton\n          text={strings.dialpadStartCallButtonLabel}\n          onRenderIcon={() => DialpadStartCallIconTrampoline()}\n          onClick={onClickCall}\n          styles={callButtonStyle}\n          disabled={textFieldInput === ''}\n        />\n      </>\n    );\n\n    return <></>;\n  };\n\n  if (isMobile) {\n    return (\n      <Stack data-ui-id=\"call-with-chat-composite-dialpad\">\n        {showDialpad && (\n          <Stack styles={drawerContainerStyles}>\n            <_DrawerSurface onLightDismiss={onDismissTriggered}>\n              <Stack style={{ padding: '1rem' }}>{dialpadComponent()}</Stack>\n            </_DrawerSurface>\n          </Stack>\n        )}\n      </Stack>\n    );\n  }\n\n  return (\n    <>\n      {\n        <Modal\n          titleAriaId={strings.dialpadModalAriaLabel}\n          isOpen={showDialpad}\n          onDismiss={onDismissTriggered}\n          isBlocking={true}\n          styles={dialpadModalStyle}\n          data-ui-id=\"call-with-chat-composite-dialpad\"\n        >\n          <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\">\n            <Text>{strings.dialpadModalTitle}</Text>\n            <IconButton\n              iconProps={{ iconName: 'Cancel' }}\n              ariaLabel={strings.dialpadCloseModalButtonAriaLabel}\n              onClick={onDismissTriggered}\n              style={{ color: theme.palette.black }}\n            />\n          </Stack>\n\n          <Stack style={{ overflow: 'hidden' }}>{dialpadComponent()}</Stack>\n        </Modal>\n      }\n    </>\n  );\n};\n\nfunction DialpadStartCallIconTrampoline(): JSX.Element {\n  /* @conditional-compile-remove(PSTN-calls) */\n  return <CallWithChatCompositeIcon iconName=\"DialpadStartCall\" />;\n  return <></>;\n}\n\"../../../../react-components/src\""]}

package/dist/dist-esm/react-composites/src/composites/common/CallingDialpad.styles.js

@@ -27,7 +27,6 @@ export const themedDialpadStyle = (isMobile, theme) => ({
             backgroundColor: theme.palette.white,
             fontSize: theme.fonts.large.fontSize,
             padding: '0 0.5rem',
-            direction: 'rtl',
             textAlign: isMobile ? 'center' : 'left',
             ':active': {
                 padding: '0 0.5rem'

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

@@ -1 +1 @@
-{"version":3,"file":"CallingDialpad.styles.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/CallingDialpad.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAMlC;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAAY,EAAyB,EAAE,CAAC,CAAC;IAC/E,IAAI,EAAE;QACJ,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;QAC1C,OAAO,EAAE,MAAM;KAChB;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,QAAiB,EAAE,KAAY,EAA0B,EAAE,CAAC,CAAC;IAC9F,IAAI,EAAE;QACJ,OAAO,EAAE,CAAC;QACV,UAAU,EAAE,CAAC;QACb,WAAW,EAAE,CAAC;QACd,QAAQ,EAAE,MAAM;KACjB;IACD,SAAS,EAAE;QACT,IAAI,EAAE;YACJ,YAAY,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,kBAAkB,EAAE;SAC9D;QACD,KAAK,EAAE;YACL,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;YACpC,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ;YACpC,OAAO,EAAE,UAAU;YACnB,SAAS,EAAE,KAAK;YAChB,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;YACvC,SAAS,EAAE;gBACT,OAAO,EAAE,UAAU;aACpB;SACF;KACF;IACD,KAAK,EAAE;QACL,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;KAClC;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAY,EAA0B,EAAE,CAAC,CAAC;IAC9E,IAAI,EAAE;QACJ,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU;QACzC,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;QACrC,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,QAAQ;QAChB,YAAY,EAAE,CAAC;QACf,OAAO,EAAE,UAAU;KACpB;IACD,aAAa,EAAE;QACb,OAAO,EAAE,UAAU;KACpB;CACF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IButtonStyles, IModalStyles, Theme } from '@fluentui/react';\n\nimport { DialpadStyles } from '@internal/react-components';\n\n/**\n * @private\n */\nexport const themeddialpadModalStyle = (theme: Theme): Partial<IModalStyles> => ({\n  main: {\n    borderRadius: theme.effects.roundedCorner6,\n    padding: '1rem'\n  }\n});\n\n/**\n * @private\n */\nexport const themedDialpadStyle = (isMobile: boolean, theme: Theme): Partial<DialpadStyles> => ({\n  root: {\n    padding: 0,\n    marginLeft: 0,\n    marginRight: 0,\n    maxWidth: '100%'\n  },\n  textField: {\n    root: {\n      borderBottom: `1px solid ${theme.palette.neutralTertiaryAlt}`\n    },\n    field: {\n      backgroundColor: theme.palette.white,\n      fontSize: theme.fonts.large.fontSize,\n      padding: '0 0.5rem',\n      direction: 'rtl',\n      textAlign: isMobile ? 'center' : 'left',\n      ':active': {\n        padding: '0 0.5rem'\n      }\n    }\n  },\n  digit: {\n    color: theme.palette.themeDarkAlt\n  }\n});\n\n/**\n * @private\n */\nexport const themedCallButtonStyle = (theme: Theme): Partial<IButtonStyles> => ({\n  root: {\n    fontWeight: theme.fonts.medium.fontWeight,\n    fontSize: theme.fonts.medium.fontSize,\n    width: '100%',\n    height: '2.5rem',\n    borderRadius: 3,\n    padding: '0.625rem'\n  },\n  textContainer: {\n    display: 'contents'\n  }\n});\n\"../../../../react-components/src\""]}
+{"version":3,"file":"CallingDialpad.styles.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/CallingDialpad.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAMlC;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAAY,EAAyB,EAAE,CAAC,CAAC;IAC/E,IAAI,EAAE;QACJ,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;QAC1C,OAAO,EAAE,MAAM;KAChB;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,QAAiB,EAAE,KAAY,EAA0B,EAAE,CAAC,CAAC;IAC9F,IAAI,EAAE;QACJ,OAAO,EAAE,CAAC;QACV,UAAU,EAAE,CAAC;QACb,WAAW,EAAE,CAAC;QACd,QAAQ,EAAE,MAAM;KACjB;IACD,SAAS,EAAE;QACT,IAAI,EAAE;YACJ,YAAY,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,kBAAkB,EAAE;SAC9D;QACD,KAAK,EAAE;YACL,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;YACpC,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ;YACpC,OAAO,EAAE,UAAU;YACnB,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;YACvC,SAAS,EAAE;gBACT,OAAO,EAAE,UAAU;aACpB;SACF;KACF;IACD,KAAK,EAAE;QACL,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;KAClC;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAY,EAA0B,EAAE,CAAC,CAAC;IAC9E,IAAI,EAAE;QACJ,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU;QACzC,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;QACrC,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,QAAQ;QAChB,YAAY,EAAE,CAAC;QACf,OAAO,EAAE,UAAU;KACpB;IACD,aAAa,EAAE;QACb,OAAO,EAAE,UAAU;KACpB;CACF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IButtonStyles, IModalStyles, Theme } from '@fluentui/react';\n\nimport { DialpadStyles } from '@internal/react-components';\n\n/**\n * @private\n */\nexport const themeddialpadModalStyle = (theme: Theme): Partial<IModalStyles> => ({\n  main: {\n    borderRadius: theme.effects.roundedCorner6,\n    padding: '1rem'\n  }\n});\n\n/**\n * @private\n */\nexport const themedDialpadStyle = (isMobile: boolean, theme: Theme): Partial<DialpadStyles> => ({\n  root: {\n    padding: 0,\n    marginLeft: 0,\n    marginRight: 0,\n    maxWidth: '100%'\n  },\n  textField: {\n    root: {\n      borderBottom: `1px solid ${theme.palette.neutralTertiaryAlt}`\n    },\n    field: {\n      backgroundColor: theme.palette.white,\n      fontSize: theme.fonts.large.fontSize,\n      padding: '0 0.5rem',\n      textAlign: isMobile ? 'center' : 'left',\n      ':active': {\n        padding: '0 0.5rem'\n      }\n    }\n  },\n  digit: {\n    color: theme.palette.themeDarkAlt\n  }\n});\n\n/**\n * @private\n */\nexport const themedCallButtonStyle = (theme: Theme): Partial<IButtonStyles> => ({\n  root: {\n    fontWeight: theme.fonts.medium.fontWeight,\n    fontSize: theme.fonts.medium.fontSize,\n    width: '100%',\n    height: '2.5rem',\n    borderRadius: 3,\n    padding: '0.625rem'\n  },\n  textContainer: {\n    display: 'contents'\n  }\n});\n\"../../../../react-components/src\""]}

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

@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-import React from 'react';
+import React, { useState } from 'react';
 import { useMemo } from 'react';
 import { Dialpad } from "../../../../react-components/src";
 import { _DrawerSurface } from "../../../../react-components/src";
@@ -16,18 +16,22 @@ export const SendDtmfDialpad = (props) => {
     const onDismissTriggered = () => {
         onDismissDialpad();
     };
+    const [textFieldValue, setTextFieldValue] = useState();
+    const onChange = (input) => {
+        setTextFieldValue(input);
+    };
     const dialpadModalStyle = useMemo(() => themeddialpadModalStyle(theme), [theme]);
     const dialpadStyle = useMemo(() => themedDialpadStyle(isMobile, theme), [theme, isMobile]);
     if (isMobile) {
         return (React.createElement(Stack, null, showDialpad && (React.createElement(Stack, { styles: drawerContainerStyles },
             React.createElement(_DrawerSurface, { onLightDismiss: onDismissTriggered },
                 React.createElement(Stack, { style: { padding: '1rem' } },
-                    React.createElement(Dialpad, Object.assign({ styles: dialpadStyle }, dialpadProps, { showDeleteButton: false, strings: strings }))))))));
+                    React.createElement(Dialpad, Object.assign({ styles: dialpadStyle }, dialpadProps, { showDeleteButton: false, textFieldValue: textFieldValue, onChange: onChange, strings: strings, isMobile: isMobile }))))))));
     }
     return (React.createElement(React.Fragment, null, React.createElement(Modal, { titleAriaId: strings.dialpadModalAriaLabel, isOpen: showDialpad, onDismiss: onDismissTriggered, isBlocking: true, styles: dialpadModalStyle },
         React.createElement(Stack, { horizontal: true, horizontalAlign: "end", verticalAlign: "center" },
             React.createElement(IconButton, { iconProps: { iconName: 'Cancel' }, ariaLabel: strings.dialpadCloseModalButtonAriaLabel, onClick: onDismissTriggered, style: { color: theme.palette.black } })),
         React.createElement(Stack, { style: { overflow: 'hidden' } },
-            React.createElement(Dialpad, Object.assign({ styles: dialpadStyle }, dialpadProps, { showDeleteButton: false, strings: strings }))))));
+            React.createElement(Dialpad, Object.assign({ styles: dialpadStyle }, dialpadProps, { textFieldValue: textFieldValue, onChange: onChange, showDeleteButton: false, strings: strings, isMobile: isMobile }))))));
 };
 //# sourceMappingURL=SendDtmfDialpad.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SendDtmfDialpad.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/SendDtmfDialpad.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,OAAO,EAAiB,yCAAmC;AACpE,OAAO,EAAqC,cAAc,EAAE,yCAAmC;AAC/F,OAAO,EAAgB,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAEnF,OAAO,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AACvF,OAAO,EAAE,qBAAqB,EAAE,MAAM,6DAA6D,CAAC;AACpG,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAiBjE,eAAe;AACf,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;IAC1E,MAAM,YAAY,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;IAE1C,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,gBAAgB,EAAE,GAAG,KAAK,CAAC;IAEnE,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,kBAAkB,GAAG,GAAS,EAAE;QACpC,gBAAgB,EAAE,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAA0B,OAAO,CAAC,GAAG,EAAE,CAAC,uBAAuB,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAExG,MAAM,YAAY,GAA2B,OAAO,CAAC,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEnH,IAAI,QAAQ,EAAE;QACZ,OAAO,CACL,oBAAC,KAAK,QACH,WAAW,IAAI,CACd,oBAAC,KAAK,IAAC,MAAM,EAAE,qBAAqB;YAClC,oBAAC,cAAc,IAAC,cAAc,EAAE,kBAAkB;gBAChD,oBAAC,KAAK,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;oBAC/B,oBAAC,OAAO,kBAAC,MAAM,EAAE,YAAY,IAAM,YAAY,IAAE,gBAAgB,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,IAAI,CACxF,CACO,CACX,CACT,CACK,CACT,CAAC;KACH;IAED,OAAO,CACL,0CAEI,oBAAC,KAAK,IACJ,WAAW,EAAE,OAAO,CAAC,qBAAqB,EAC1C,MAAM,EAAE,WAAW,EACnB,SAAS,EAAE,kBAAkB,EAC7B,UAAU,EAAE,IAAI,EAChB,MAAM,EAAE,iBAAiB;QAEzB,oBAAC,KAAK,IAAC,UAAU,QAAC,eAAe,EAAC,KAAK,EAAC,aAAa,EAAC,QAAQ;YAC5D,oBAAC,UAAU,IACT,SAAS,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,EACjC,SAAS,EAAE,OAAO,CAAC,gCAAgC,EACnD,OAAO,EAAE,kBAAkB,EAC3B,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,GACrC,CACI;QAER,oBAAC,KAAK,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE;YAClC,oBAAC,OAAO,kBAAC,MAAM,EAAE,YAAY,IAAM,YAAY,IAAE,gBAAgB,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,IAAI,CACxF,CACF,CAET,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport React from 'react';\nimport { useMemo } from 'react';\nimport { Dialpad, DialpadStyles } from '@internal/react-components';\nimport { _DrawerMenu, _DrawerMenuItemProps, _DrawerSurface } from '@internal/react-components';\nimport { IModalStyles, Modal, Stack, useTheme, IconButton } from '@fluentui/react';\n\nimport { themeddialpadModalStyle, themedDialpadStyle } from './SendDtmfDialpad.styles';\nimport { drawerContainerStyles } from '../CallWithChatComposite/styles/CallWithChatCompositeStyles';\nimport { usePropsFor } from '../CallComposite/hooks/usePropsFor';\n\n/** @private */\nexport interface SendDtmfDialpadStrings {\n  dialpadModalAriaLabel: string;\n  dialpadCloseModalButtonAriaLabel: string;\n  placeholderText: string;\n}\n\n/** @private */\nexport interface SendDtmfDialpadProps {\n  isMobile: boolean;\n  showDialpad: boolean;\n  strings: SendDtmfDialpadStrings;\n  onDismissDialpad: () => void;\n}\n\n/** @private */\nexport const SendDtmfDialpad = (props: SendDtmfDialpadProps): JSX.Element => {\n  const dialpadProps = usePropsFor(Dialpad);\n\n  const { strings, isMobile, showDialpad, onDismissDialpad } = props;\n\n  const theme = useTheme();\n\n  const onDismissTriggered = (): void => {\n    onDismissDialpad();\n  };\n\n  const dialpadModalStyle: Partial<IModalStyles> = useMemo(() => themeddialpadModalStyle(theme), [theme]);\n\n  const dialpadStyle: Partial<DialpadStyles> = useMemo(() => themedDialpadStyle(isMobile, theme), [theme, isMobile]);\n\n  if (isMobile) {\n    return (\n      <Stack>\n        {showDialpad && (\n          <Stack styles={drawerContainerStyles}>\n            <_DrawerSurface onLightDismiss={onDismissTriggered}>\n              <Stack style={{ padding: '1rem' }}>\n                <Dialpad styles={dialpadStyle} {...dialpadProps} showDeleteButton={false} strings={strings} />\n              </Stack>\n            </_DrawerSurface>\n          </Stack>\n        )}\n      </Stack>\n    );\n  }\n\n  return (\n    <>\n      {\n        <Modal\n          titleAriaId={strings.dialpadModalAriaLabel}\n          isOpen={showDialpad}\n          onDismiss={onDismissTriggered}\n          isBlocking={true}\n          styles={dialpadModalStyle}\n        >\n          <Stack horizontal horizontalAlign=\"end\" verticalAlign=\"center\">\n            <IconButton\n              iconProps={{ iconName: 'Cancel' }}\n              ariaLabel={strings.dialpadCloseModalButtonAriaLabel}\n              onClick={onDismissTriggered}\n              style={{ color: theme.palette.black }}\n            />\n          </Stack>\n\n          <Stack style={{ overflow: 'hidden' }}>\n            <Dialpad styles={dialpadStyle} {...dialpadProps} showDeleteButton={false} strings={strings} />\n          </Stack>\n        </Modal>\n      }\n    </>\n  );\n};\n\"../../../../react-components/src\""]}
+{"version":3,"file":"SendDtmfDialpad.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/SendDtmfDialpad.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport React, { useState } from 'react';\nimport { useMemo } from 'react';\nimport { Dialpad, DialpadStyles } from '@internal/react-components';\nimport { _DrawerMenu, _DrawerMenuItemProps, _DrawerSurface } from '@internal/react-components';\nimport { IModalStyles, Modal, Stack, useTheme, IconButton } from '@fluentui/react';\n\nimport { themeddialpadModalStyle, themedDialpadStyle } from './SendDtmfDialpad.styles';\nimport { drawerContainerStyles } from '../CallWithChatComposite/styles/CallWithChatCompositeStyles';\nimport { usePropsFor } from '../CallComposite/hooks/usePropsFor';\n\n/** @private */\nexport interface SendDtmfDialpadStrings {\n  dialpadModalAriaLabel: string;\n  dialpadCloseModalButtonAriaLabel: string;\n  placeholderText: string;\n}\n\n/** @private */\nexport interface SendDtmfDialpadProps {\n  isMobile: boolean;\n  showDialpad: boolean;\n  strings: SendDtmfDialpadStrings;\n  onDismissDialpad: () => void;\n}\n\n/** @private */\nexport const SendDtmfDialpad = (props: SendDtmfDialpadProps): JSX.Element => {\n  const dialpadProps = usePropsFor(Dialpad);\n\n  const { strings, isMobile, showDialpad, onDismissDialpad } = props;\n\n  const theme = useTheme();\n\n  const onDismissTriggered = (): void => {\n    onDismissDialpad();\n  };\n\n  const [textFieldValue, setTextFieldValue] = useState<string>();\n\n  const onChange = (input: string): void => {\n    setTextFieldValue(input);\n  };\n\n  const dialpadModalStyle: Partial<IModalStyles> = useMemo(() => themeddialpadModalStyle(theme), [theme]);\n\n  const dialpadStyle: Partial<DialpadStyles> = useMemo(() => themedDialpadStyle(isMobile, theme), [theme, isMobile]);\n\n  if (isMobile) {\n    return (\n      <Stack>\n        {showDialpad && (\n          <Stack styles={drawerContainerStyles}>\n            <_DrawerSurface onLightDismiss={onDismissTriggered}>\n              <Stack style={{ padding: '1rem' }}>\n                <Dialpad\n                  styles={dialpadStyle}\n                  {...dialpadProps}\n                  showDeleteButton={false}\n                  textFieldValue={textFieldValue}\n                  onChange={onChange}\n                  strings={strings}\n                  isMobile={isMobile}\n                />\n              </Stack>\n            </_DrawerSurface>\n          </Stack>\n        )}\n      </Stack>\n    );\n  }\n\n  return (\n    <>\n      {\n        <Modal\n          titleAriaId={strings.dialpadModalAriaLabel}\n          isOpen={showDialpad}\n          onDismiss={onDismissTriggered}\n          isBlocking={true}\n          styles={dialpadModalStyle}\n        >\n          <Stack horizontal horizontalAlign=\"end\" verticalAlign=\"center\">\n            <IconButton\n              iconProps={{ iconName: 'Cancel' }}\n              ariaLabel={strings.dialpadCloseModalButtonAriaLabel}\n              onClick={onDismissTriggered}\n              style={{ color: theme.palette.black }}\n            />\n          </Stack>\n\n          <Stack style={{ overflow: 'hidden' }}>\n            <Dialpad\n              styles={dialpadStyle}\n              {...dialpadProps}\n              textFieldValue={textFieldValue}\n              onChange={onChange}\n              showDeleteButton={false}\n              strings={strings}\n              isMobile={isMobile}\n            />\n          </Stack>\n        </Modal>\n      }\n    </>\n  );\n};\n\"../../../../react-components/src\""]}

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

@@ -10,6 +10,8 @@ declare type TabHeaderProps = {
     onPeopleButtonClicked?: () => void;
     activeTab: TabHeaderTab;
     strings: CallWithChatCompositeStrings | /* @conditional-compile-remove(one-to-n-calling) */ CallCompositeStrings;
+    disableChatButton?: boolean;
+    disablePeopleButton?: boolean;
 };
 /**
  * @private

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

@@ -31,8 +31,8 @@ export const TabHeader = (props) => {
     }, [theme, haveMultipleTabs]);
     return (React.createElement(Stack, { horizontal: true, grow: true, styles: mobilePaneControlBarStyle },
         React.createElement(DefaultButton, { ariaLabel: strings.returnToCallButtonAriaLabel, ariaDescription: strings.returnToCallButtonAriaDescription, onClick: onClose, styles: mobilePaneBackButtonStyles, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }), autoFocus: true }),
-        React.createElement(Stack.Item, { grow: true }, onChatButtonClicked && (React.createElement(DefaultButton, { onClick: onChatButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'chat', role: 'tab' }, strings.chatButtonLabel))),
-        React.createElement(Stack.Item, { grow: true }, onPeopleButtonClicked && (React.createElement(DefaultButton, { onClick: onPeopleButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'people', role: 'tab' }, strings.peopleButtonLabel))),
+        React.createElement(Stack.Item, { grow: true }, onChatButtonClicked && (React.createElement(DefaultButton, { onClick: onChatButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'chat', role: 'tab', disabled: props.disableChatButton }, strings.chatButtonLabel))),
+        React.createElement(Stack.Item, { grow: true }, onPeopleButtonClicked && (React.createElement(DefaultButton, { onClick: onPeopleButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'people', role: 'tab', disabled: props.disablePeopleButton }, strings.peopleButtonLabel))),
         React.createElement(DefaultButton, { styles: mobilePaneHiddenIconStyles, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }) })));
 };
 //# sourceMappingURL=TabHeader.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TabHeader.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/TabHeader.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,yCAAmC;AACtD,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAE,yBAAyB,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,EACL,0BAA0B,EAC1B,sBAAsB,EACtB,yBAAyB,EACzB,0BAA0B,EAC3B,MAAM,sBAAsB,CAAC;AAe9B;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAe,EAAE;IAC9D,MAAM,EAAE,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAC1F,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,gBAAgB,GAAG,mBAAmB,IAAI,qBAAqB,CAAC;IACtE,MAAM,4BAA4B,GAAG,OAAO,CAAC,GAAG,EAAE;QAChD,OAAO,eAAe,CACpB,sBAAsB,EACtB;YACE,IAAI,EAAE;gBACJ,KAAK,EAAE,MAAM;aACd;YACD,KAAK,EAAE;gBACL,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;gBACrC,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU;aAC1C;SACF,EACD,gBAAgB;YACd,CAAC,CAAC;gBACE,WAAW,EAAE;oBACX,YAAY,EAAE,kBAAkB,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;iBAC7D;aACF;YACH,CAAC,CAAC,EAAE,CACP,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAE9B,OAAO,CACL,oBAAC,KAAK,IAAC,UAAU,QAAC,IAAI,QAAC,MAAM,EAAE,yBAAyB;QACtD,oBAAC,aAAa,IACZ,SAAS,EAAE,OAAO,CAAC,2BAA2B,EAC9C,eAAe,EAAE,OAAO,CAAC,iCAAiC,EAC1D,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,0BAA0B,EAClC,YAAY,EAAE,GAAG,EAAE,CAAC,oBAAC,yBAAyB,IAAC,QAAQ,EAAC,aAAa,GAAG,EACxE,SAAS,SACM;QACjB,oBAAC,KAAK,CAAC,IAAI,IAAC,IAAI,UACb,mBAAmB,IAAI,CACtB,oBAAC,aAAa,IACZ,OAAO,EAAE,mBAAmB,EAC5B,MAAM,EAAE,4BAA4B,EACpC,OAAO,EAAE,SAAS,KAAK,MAAM,EAC7B,IAAI,EAAE,KAAK,IAEV,OAAO,CAAC,eAAe,CACV,CACjB,CACU;QACb,oBAAC,KAAK,CAAC,IAAI,IAAC,IAAI,UACb,qBAAqB,IAAI,CACxB,oBAAC,aAAa,IACZ,OAAO,EAAE,qBAAqB,EAC9B,MAAM,EAAE,4BAA4B,EACpC,OAAO,EAAE,SAAS,KAAK,QAAQ,EAC/B,IAAI,EAAE,KAAK,IAEV,OAAO,CAAC,iBAAiB,CACZ,CACjB,CACU;QAEb,oBAAC,aAAa,IACZ,MAAM,EAAE,0BAA0B,EAClC,YAAY,EAAE,GAAG,EAAE,CAAC,oBAAC,yBAAyB,IAAC,QAAQ,EAAC,aAAa,GAAG,GACzD,CACX,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { concatStyleSets, DefaultButton, Stack } from '@fluentui/react';\nimport { useTheme } from '@internal/react-components';\nimport React, { useMemo } from 'react';\n/* @conditional-compile-remove(one-to-n-calling) */\nimport { CallCompositeStrings } from '../CallComposite';\nimport { CallWithChatCompositeStrings } from '../CallWithChatComposite';\nimport { CallWithChatCompositeIcon } from '../common/icons';\nimport {\n  mobilePaneBackButtonStyles,\n  mobilePaneButtonStyles,\n  mobilePaneControlBarStyle,\n  mobilePaneHiddenIconStyles\n} from './styles/Pane.styles';\n\n/**\n * Props for {@link TabHeader} component\n */\ntype TabHeaderProps = {\n  onClose: () => void;\n  // If set, show a button to open chat tab.\n  onChatButtonClicked?: () => void;\n  // If set, show a button to open people tab.\n  onPeopleButtonClicked?: () => void;\n  activeTab: TabHeaderTab;\n  strings: CallWithChatCompositeStrings | /* @conditional-compile-remove(one-to-n-calling) */ CallCompositeStrings;\n};\n\n/**\n * @private\n */\nexport const TabHeader = (props: TabHeaderProps): JSX.Element => {\n  const { onClose, onChatButtonClicked, onPeopleButtonClicked, activeTab, strings } = props;\n  const theme = useTheme();\n  const haveMultipleTabs = onChatButtonClicked && onPeopleButtonClicked;\n  const mobilePaneButtonStylesThemed = useMemo(() => {\n    return concatStyleSets(\n      mobilePaneButtonStyles,\n      {\n        root: {\n          width: '100%'\n        },\n        label: {\n          fontSize: theme.fonts.medium.fontSize,\n          fontWeight: theme.fonts.medium.fontWeight\n        }\n      },\n      haveMultipleTabs\n        ? {\n            rootChecked: {\n              borderBottom: `0.125rem solid ${theme.palette.themePrimary}`\n            }\n          }\n        : {}\n    );\n  }, [theme, haveMultipleTabs]);\n\n  return (\n    <Stack horizontal grow styles={mobilePaneControlBarStyle}>\n      <DefaultButton\n        ariaLabel={strings.returnToCallButtonAriaLabel}\n        ariaDescription={strings.returnToCallButtonAriaDescription}\n        onClick={onClose}\n        styles={mobilePaneBackButtonStyles}\n        onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"ChevronLeft\" />}\n        autoFocus\n      ></DefaultButton>\n      <Stack.Item grow>\n        {onChatButtonClicked && (\n          <DefaultButton\n            onClick={onChatButtonClicked}\n            styles={mobilePaneButtonStylesThemed}\n            checked={activeTab === 'chat'}\n            role={'tab'}\n          >\n            {strings.chatButtonLabel}\n          </DefaultButton>\n        )}\n      </Stack.Item>\n      <Stack.Item grow>\n        {onPeopleButtonClicked && (\n          <DefaultButton\n            onClick={onPeopleButtonClicked}\n            styles={mobilePaneButtonStylesThemed}\n            checked={activeTab === 'people'}\n            role={'tab'}\n          >\n            {strings.peopleButtonLabel}\n          </DefaultButton>\n        )}\n      </Stack.Item>\n      {/* Hidden icon to take the same space as the actual back button on the left. */}\n      <DefaultButton\n        styles={mobilePaneHiddenIconStyles}\n        onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"ChevronLeft\" />}\n      ></DefaultButton>\n    </Stack>\n  );\n};\n\n/**\n * Type used to define which tab is active in {@link TabHeader}\n */\nexport type TabHeaderTab = 'chat' | 'people';\n\"../../../../react-components/src\""]}
+{"version":3,"file":"TabHeader.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/TabHeader.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,yCAAmC;AACtD,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAE,yBAAyB,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,EACL,0BAA0B,EAC1B,sBAAsB,EACtB,yBAAyB,EACzB,0BAA0B,EAC3B,MAAM,sBAAsB,CAAC;AAiB9B;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAe,EAAE;IAC9D,MAAM,EAAE,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAC1F,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,gBAAgB,GAAG,mBAAmB,IAAI,qBAAqB,CAAC;IACtE,MAAM,4BAA4B,GAAG,OAAO,CAAC,GAAG,EAAE;QAChD,OAAO,eAAe,CACpB,sBAAsB,EACtB;YACE,IAAI,EAAE;gBACJ,KAAK,EAAE,MAAM;aACd;YACD,KAAK,EAAE;gBACL,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;gBACrC,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU;aAC1C;SACF,EACD,gBAAgB;YACd,CAAC,CAAC;gBACE,WAAW,EAAE;oBACX,YAAY,EAAE,kBAAkB,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;iBAC7D;aACF;YACH,CAAC,CAAC,EAAE,CACP,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAE9B,OAAO,CACL,oBAAC,KAAK,IAAC,UAAU,QAAC,IAAI,QAAC,MAAM,EAAE,yBAAyB;QACtD,oBAAC,aAAa,IACZ,SAAS,EAAE,OAAO,CAAC,2BAA2B,EAC9C,eAAe,EAAE,OAAO,CAAC,iCAAiC,EAC1D,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,0BAA0B,EAClC,YAAY,EAAE,GAAG,EAAE,CAAC,oBAAC,yBAAyB,IAAC,QAAQ,EAAC,aAAa,GAAG,EACxE,SAAS,SACM;QACjB,oBAAC,KAAK,CAAC,IAAI,IAAC,IAAI,UACb,mBAAmB,IAAI,CACtB,oBAAC,aAAa,IACZ,OAAO,EAAE,mBAAmB,EAC5B,MAAM,EAAE,4BAA4B,EACpC,OAAO,EAAE,SAAS,KAAK,MAAM,EAC7B,IAAI,EAAE,KAAK,EACX,QAAQ,EAAE,KAAK,CAAC,iBAAiB,IAEhC,OAAO,CAAC,eAAe,CACV,CACjB,CACU;QACb,oBAAC,KAAK,CAAC,IAAI,IAAC,IAAI,UACb,qBAAqB,IAAI,CACxB,oBAAC,aAAa,IACZ,OAAO,EAAE,qBAAqB,EAC9B,MAAM,EAAE,4BAA4B,EACpC,OAAO,EAAE,SAAS,KAAK,QAAQ,EAC/B,IAAI,EAAE,KAAK,EACX,QAAQ,EAAE,KAAK,CAAC,mBAAmB,IAElC,OAAO,CAAC,iBAAiB,CACZ,CACjB,CACU;QAEb,oBAAC,aAAa,IACZ,MAAM,EAAE,0BAA0B,EAClC,YAAY,EAAE,GAAG,EAAE,CAAC,oBAAC,yBAAyB,IAAC,QAAQ,EAAC,aAAa,GAAG,GACzD,CACX,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { concatStyleSets, DefaultButton, Stack } from '@fluentui/react';\nimport { useTheme } from '@internal/react-components';\nimport React, { useMemo } from 'react';\n/* @conditional-compile-remove(one-to-n-calling) */\nimport { CallCompositeStrings } from '../CallComposite';\nimport { CallWithChatCompositeStrings } from '../CallWithChatComposite';\nimport { CallWithChatCompositeIcon } from '../common/icons';\nimport {\n  mobilePaneBackButtonStyles,\n  mobilePaneButtonStyles,\n  mobilePaneControlBarStyle,\n  mobilePaneHiddenIconStyles\n} from './styles/Pane.styles';\n\n/**\n * Props for {@link TabHeader} component\n */\ntype TabHeaderProps = {\n  onClose: () => void;\n  // If set, show a button to open chat tab.\n  onChatButtonClicked?: () => void;\n  // If set, show a button to open people tab.\n  onPeopleButtonClicked?: () => void;\n  activeTab: TabHeaderTab;\n  strings: CallWithChatCompositeStrings | /* @conditional-compile-remove(one-to-n-calling) */ CallCompositeStrings;\n  disableChatButton?: boolean;\n  disablePeopleButton?: boolean;\n};\n\n/**\n * @private\n */\nexport const TabHeader = (props: TabHeaderProps): JSX.Element => {\n  const { onClose, onChatButtonClicked, onPeopleButtonClicked, activeTab, strings } = props;\n  const theme = useTheme();\n  const haveMultipleTabs = onChatButtonClicked && onPeopleButtonClicked;\n  const mobilePaneButtonStylesThemed = useMemo(() => {\n    return concatStyleSets(\n      mobilePaneButtonStyles,\n      {\n        root: {\n          width: '100%'\n        },\n        label: {\n          fontSize: theme.fonts.medium.fontSize,\n          fontWeight: theme.fonts.medium.fontWeight\n        }\n      },\n      haveMultipleTabs\n        ? {\n            rootChecked: {\n              borderBottom: `0.125rem solid ${theme.palette.themePrimary}`\n            }\n          }\n        : {}\n    );\n  }, [theme, haveMultipleTabs]);\n\n  return (\n    <Stack horizontal grow styles={mobilePaneControlBarStyle}>\n      <DefaultButton\n        ariaLabel={strings.returnToCallButtonAriaLabel}\n        ariaDescription={strings.returnToCallButtonAriaDescription}\n        onClick={onClose}\n        styles={mobilePaneBackButtonStyles}\n        onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"ChevronLeft\" />}\n        autoFocus\n      ></DefaultButton>\n      <Stack.Item grow>\n        {onChatButtonClicked && (\n          <DefaultButton\n            onClick={onChatButtonClicked}\n            styles={mobilePaneButtonStylesThemed}\n            checked={activeTab === 'chat'}\n            role={'tab'}\n            disabled={props.disableChatButton}\n          >\n            {strings.chatButtonLabel}\n          </DefaultButton>\n        )}\n      </Stack.Item>\n      <Stack.Item grow>\n        {onPeopleButtonClicked && (\n          <DefaultButton\n            onClick={onPeopleButtonClicked}\n            styles={mobilePaneButtonStylesThemed}\n            checked={activeTab === 'people'}\n            role={'tab'}\n            disabled={props.disablePeopleButton}\n          >\n            {strings.peopleButtonLabel}\n          </DefaultButton>\n        )}\n      </Stack.Item>\n      {/* Hidden icon to take the same space as the actual back button on the left. */}\n      <DefaultButton\n        styles={mobilePaneHiddenIconStyles}\n        onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"ChevronLeft\" />}\n      ></DefaultButton>\n    </Stack>\n  );\n};\n\n/**\n * Type used to define which tab is active in {@link TabHeader}\n */\nexport type TabHeaderTab = 'chat' | 'people';\n\"../../../../react-components/src\""]}

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

@@ -19,6 +19,7 @@
         "complianceBannerTranscriptionStopped": "Transcription has stopped.",
         "configurationPageTitle": "Start a call",
         "copyInviteLinkButtonLabel": "Copy invite link",
+        "copyInviteLinkActionedAriaLabel": "Invite link copied",
         "defaultPlaceHolder": "Select an option",
         "dismissSidePaneButtonLabel": "Close",
         "failedToJoinCallDueToNoNetworkMoreDetails": "Call was disconnected due to a network issue. Check your connection and join again.",
@@ -52,14 +53,14 @@
         "dialpadStartCallButtonLabel": "Call",
         "dialpadModalTitle": "Dial Phone Number",
         "dialpadModalAriaLabel": "Dialpad",
-        "dialpadCloseModalButtonAriaLabel": "Close Dialpad",
+        "dialpadCloseModalButtonAriaLabel": "Close dialpad",
         "moreButtonCallingLabel": "More",
         "resumeCallButtonLabel": "Resume",
-        "resumingCallButtonLabel": "Resuming",
+        "resumingCallButtonLabel": "Resuming...",
         "resumeCallButtonAriaLabel": "Resume call",
         "resumingCallButtonAriaLabel": "Resume call",
         "holdScreenLabel": "You're on hold",
-        "openDtmfDialpadLabel": "Show Dialpad",
+        "openDtmfDialpadLabel": "Show dialpad",
         "dtmfDialpadPlaceHolderText": "Enter number"
     },
     "chat": {
@@ -74,6 +75,7 @@
         "chatButtonTooltipOpen": "Show chat",
         "chatPaneTitle": "Chat",
         "copyInviteLinkButtonLabel": "Copy invite link",
+        "copyInviteLinkActionedAriaLabel": "Invite link copied",
         "dismissSidePaneButtonLabel": "Close",
         "moreDrawerAudioDeviceMenuTitle": "Audio Device",
         "moreDrawerButtonLabel": "More options",
@@ -94,8 +96,8 @@
         "dialpadStartCallButtonLabel": "Call",
         "dialpadModalTitle": "Dial Phone Number",
         "dialpadModalAriaLabel": "Dialpad",
-        "dialpadCloseModalButtonAriaLabel": "Close Dialpad",
-        "openDtmfDialpadLabel": "Show Dialpad",
+        "dialpadCloseModalButtonAriaLabel": "Close dialpad",
+        "openDtmfDialpadLabel": "Show dialpad",
         "dtmfDialpadPlaceHolderText": "Enter number"
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@azure/communication-react",
-  "version": "1.3.3-alpha-202208280018.0",
+  "version": "1.3.3-alpha-202209010016.0",
   "sideEffects": false,
   "description": "React library for building modern communication user experiences utilizing Azure Communication Services",
   "keywords": [
@@ -85,13 +85,13 @@
     "@azure/core-auth": "1.3.2",
     "@babel/cli": "~7.16.0",
     "@babel/core": "~7.16.0",
-    "@internal/calling-component-bindings": "1.3.3-alpha-202208280018.0",
-    "@internal/calling-stateful-client": "1.3.3-alpha-202208280018.0",
-    "@internal/chat-component-bindings": "1.3.3-alpha-202208280018.0",
-    "@internal/chat-stateful-client": "1.3.3-alpha-202208280018.0",
-    "@internal/fake-backends": "1.3.3-alpha-202208280018.0",
-    "@internal/react-components": "1.3.3-alpha-202208280018.0",
-    "@internal/react-composites": "1.3.3-alpha-202208280018.0",
+    "@internal/calling-component-bindings": "1.3.3-alpha-202209010016.0",
+    "@internal/calling-stateful-client": "1.3.3-alpha-202209010016.0",
+    "@internal/chat-component-bindings": "1.3.3-alpha-202209010016.0",
+    "@internal/chat-stateful-client": "1.3.3-alpha-202209010016.0",
+    "@internal/fake-backends": "1.3.3-alpha-202209010016.0",
+    "@internal/react-components": "1.3.3-alpha-202209010016.0",
+    "@internal/react-composites": "1.3.3-alpha-202209010016.0",
     "@microsoft/api-documenter": "~7.12.11",
     "@microsoft/api-extractor": "~7.18.0",
     "@rollup/plugin-json": "~4.1.0",