@azure/communication-react 1.19.0-alpha-202407250014 → 1.19.0-alpha-202407270014

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

@@ -1,45 +1,73 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-import { IconButton, Persona, PersonaSize, Stack, Text, useTheme } from '@fluentui/react';
+import { DefaultButton, IconButton, Persona, PersonaSize, PrimaryButton, Stack, Text, useTheme } from '@fluentui/react';
 import React from 'react';
 /* @conditional-compile-remove(one-to-n-calling) */
 import { useLocale } from '../localization';
+import { _formatString } from "../../../acs-ui-common/src";
 /**
  * A Notification component that is to be used to represent incoming calls to the end user.
  * Allows the user to accept or reject the incoming call.
  * @beta
  */
 export const IncomingCallNotification = (props) => {
-    const { callerName, alertText, avatarImage, onAcceptWithAudio, onAcceptWithVideo, onReject, personaSize, styles } = props;
+    var _a, _b, _c, _d, _e, _f, _g;
+    const { callerName, alertText, avatarImage, onAcceptWithAudio, 
+    /* @conditional-compile-remove(one-to-n-calling) */
+    onAcceptWithVideo, onReject, onDismiss, personaSize, styles, strings, 
+    /* @conditional-compile-remove(one-to-n-calling) */
+    acceptOptions } = props;
     const theme = useTheme();
     /* @conditional-compile-remove(one-to-n-calling) */
     const localeStrings = useLocale().strings.IncomingCallNotification;
-    return (React.createElement(Stack, { horizontal: true, tokens: { childrenGap: '0.5rem' }, verticalAlign: "center", styles: (styles === null || styles === void 0 ? void 0 : styles.root) ? styles.root : incomingCallToastStyle(theme) },
-        React.createElement(Stack, { horizontalAlign: "start", styles: (styles === null || styles === void 0 ? void 0 : styles.avatarContainer) ? styles.avatarContainer : incomingCallToastAvatarContainerStyle },
-            React.createElement(Persona, { imageUrl: avatarImage, text: callerName, size: PersonaSize.size40, coinSize: personaSize, hidePersonaDetails: true, "aria-label": callerName })),
-        React.createElement(Stack, { grow: 1, horizontalAlign: "center", style: { alignItems: 'flex-start', fontFamily: 'Segoe UI' } },
-            React.createElement(Stack, { style: { fontSize: '0.875rem' } },
-                React.createElement(Text, null, callerName !== null && callerName !== void 0 ? callerName : 
-                /* @conditional-compile-remove(one-to-n-calling) */ localeStrings.incomingCallNotificationPlaceholderId)),
-            React.createElement(Stack, { style: { fontSize: '0.75rem' } },
-                React.createElement(Text, null, alertText !== null && alertText !== void 0 ? alertText : 
-                /* @conditional-compile-remove(one-to-n-calling) */ localeStrings.incomingCallNotificationPlaceholderAlert))),
-        React.createElement(Stack, { horizontal: true, tokens: { childrenGap: 10 } },
-            React.createElement(IconButton, { styles: (styles === null || styles === void 0 ? void 0 : styles.rejectButton) ? styles.rejectButton : incomingCallRejectButtonStyle(theme), onClick: () => onReject(), iconProps: { iconName: 'IncomingCallNotificationRejectIcon' }, 
+    /* @conditional-compile-remove(one-to-n-calling) */
+    const formattedMessageString = localeStrings.incomingCallNotificationPlaceholderAlert && callerName
+        ? _formatString(localeStrings.incomingCallNotificationPlaceholderAlert, { callerName: callerName })
+        : callerName;
+    /* @conditional-compile-remove(one-to-n-calling) */
+    const acceptManuOptions = acceptOptions.showAcceptWithVideo
+        ? {
+            items: [
+                {
+                    key: 'audio',
+                    text: 
+                    /* @conditional-compile-remove(one-to-n-calling) */ (_a = strings === null || strings === void 0 ? void 0 : strings.incomingCallNotificationAcceptButtonLabel) !== null && _a !== void 0 ? _a : localeStrings.incomingCallNotificationAcceptButtonLabel,
+                    onClick: () => onAcceptWithAudio()
+                },
+                {
+                    key: 'video',
+                    text: 
+                    /* @conditional-compile-remove(one-to-n-calling) */ (_b = strings === null || strings === void 0 ? void 0 : strings.incomingCallNotificationAccceptWithVideoButtonLabel) !== null && _b !== void 0 ? _b : localeStrings.incomingCallNotificationAccceptWithVideoButtonLabel,
+                    onClick: () => onAcceptWithVideo()
+                }
+            ]
+        }
+        : undefined;
+    return (React.createElement(Stack, { tokens: { childrenGap: '0.5rem' }, verticalAlign: "center", styles: (styles === null || styles === void 0 ? void 0 : styles.root) ? styles.root : incomingCallToastStyle(theme) },
+        React.createElement(Stack, { horizontal: true, verticalAlign: "center", tokens: { childrenGap: personaSize ? '0.5rem' : '0rem' } },
+            React.createElement(Stack, { horizontalAlign: "start", styles: (styles === null || styles === void 0 ? void 0 : styles.avatarContainer) ? styles.avatarContainer : incomingCallToastAvatarContainerStyle },
+                React.createElement(Persona, { imageUrl: avatarImage, text: callerName, size: PersonaSize.size24, coinSize: personaSize, hidePersonaDetails: true, "aria-label": callerName })),
+            React.createElement(Stack, { grow: true, horizontalAlign: "center", style: { alignItems: 'flex-start', fontFamily: 'Segoe UI' } },
+                React.createElement(Stack, { style: { fontSize: '0.75rem' } },
+                    React.createElement(Text, null, (_c = alertText !== null && alertText !== void 0 ? alertText : strings === null || strings === void 0 ? void 0 : strings.incomingCallNotificationPlaceholderAlert) !== null && _c !== void 0 ? _c : 
+                    /* @conditional-compile-remove(one-to-n-calling) */ formattedMessageString))),
+            React.createElement(IconButton, { iconProps: { iconName: 'cancel' }, onClick: onDismiss, styles: dismissButtonStyle(theme) })),
+        React.createElement(Stack, { horizontal: true, horizontalAlign: 'center', tokens: { childrenGap: '0.5rem' } },
+            React.createElement(PrimaryButton, { styles: (styles === null || styles === void 0 ? void 0 : styles.acceptButton) ? styles.acceptButton : incomingCallAcceptButtonStyle(theme), onClick: () => onAcceptWithAudio(), iconProps: { iconName: 'IncomingCallNotificationAcceptIcon', style: { lineHeight: '1rem' } }, 
                 /* @conditional-compile-remove(one-to-n-calling) */
-                ariaLabel: localeStrings.incomingCallNoticicationRejectAriaLabel }),
-            React.createElement(IconButton, { styles: (styles === null || styles === void 0 ? void 0 : styles.acceptButton) ? styles.acceptButton : incomingCallAcceptButtonStyle(theme), onClick: () => onAcceptWithVideo(), iconProps: { iconName: 'IncomingCallNotificationAcceptWithVideoIcon' }, 
+                ariaLabel: (_d = strings === null || strings === void 0 ? void 0 : strings.incomingCallNoticicationAcceptWithAudioAriaLabel) !== null && _d !== void 0 ? _d : localeStrings.incomingCallNoticicationAcceptWithAudioAriaLabel, 
                 /* @conditional-compile-remove(one-to-n-calling) */
-                ariaLabel: localeStrings.incomingCallNoticicationAcceptWithVideoAriaLabel }),
-            React.createElement(IconButton, { styles: (styles === null || styles === void 0 ? void 0 : styles.acceptButton) ? styles.acceptButton : incomingCallAcceptButtonStyle(theme), onClick: () => onAcceptWithAudio(), iconProps: { iconName: 'IncomingCallNotificationAcceptIcon' }, 
+                menuProps: acceptManuOptions }, 
+            /* @conditional-compile-remove(one-to-n-calling) */ (_e = strings === null || strings === void 0 ? void 0 : strings.incomingCallNotificationAcceptButtonLabel) !== null && _e !== void 0 ? _e : localeStrings.incomingCallNotificationAcceptButtonLabel),
+            React.createElement(DefaultButton, { styles: (styles === null || styles === void 0 ? void 0 : styles.rejectButton) ? styles.rejectButton : incomingCallRejectButtonStyle(theme), onClick: () => onReject(), label: 'Decline', iconProps: { iconName: 'IncomingCallNotificationRejectIcon' }, 
                 /* @conditional-compile-remove(one-to-n-calling) */
-                ariaLabel: localeStrings.incomingCallNoticicationAcceptWithAudioAriaLabel }))));
+                ariaLabel: (_f = strings === null || strings === void 0 ? void 0 : strings.incomingCallNoticicationRejectAriaLabel) !== null && _f !== void 0 ? _f : localeStrings.incomingCallNoticicationRejectAriaLabel }, 
+            /* @conditional-compile-remove(one-to-n-calling) */ (_g = strings === null || strings === void 0 ? void 0 : strings.incomingCallNotificationRejectButtonLabel) !== null && _g !== void 0 ? _g : localeStrings.incomingCallNotificationRejectButtonLabel))));
 };
 const incomingCallToastStyle = (theme) => {
     return {
         root: {
-            minWidth: '20rem',
-            maxWidth: '40rem',
+            width: '20rem',
             background: theme.palette.white,
             opacity: 0.95,
             borderRadius: '0.5rem',
@@ -53,35 +81,44 @@ const incomingCallToastAvatarContainerStyle = {
         marginRight: '0.5rem'
     }
 };
+const dismissButtonStyle = (theme) => {
+    return {
+        root: {
+            color: theme.palette.neutralPrimary,
+            width: '1rem',
+            height: '1rem'
+        },
+        rootHovered: {
+            color: theme.palette.neutralDark
+        }
+    };
+};
 const incomingCallAcceptButtonStyle = (theme) => {
     return {
         root: {
-            backgroundColor: theme.palette.greenDark,
             color: theme.palette.white,
-            borderRadius: '2rem',
-            minWidth: '2rem',
-            width: '2rem',
-            border: 'none'
+            border: 'none',
+            borderRadius: theme.effects.roundedCorner4,
+            width: '100%',
+            maxWidth: '8.875rem'
         },
         rootHovered: {
-            backgroundColor: theme.palette.green,
             color: theme.palette.white
+        },
+        icon: {
+            height: '1.25rem'
         }
     };
 };
 const incomingCallRejectButtonStyle = (theme) => {
     return {
         root: {
-            backgroundColor: theme.palette.redDark,
-            color: theme.palette.white,
-            borderRadius: '2rem',
-            minWidth: '2rem',
-            width: '2rem',
-            border: 'none'
+            borderRadius: theme.effects.roundedCorner4,
+            maxWidth: '8.875rem',
+            width: '100%'
         },
-        rootHovered: {
-            backgroundColor: theme.palette.red,
-            color: theme.palette.white
+        icon: {
+            height: '1.25rem'
         }
     };
 };

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

@@ -1 +1 @@
-{"version":3,"file":"IncomingCallNotification.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/IncomingCallNotification.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  IButtonStyles,\n  IStackStyles,\n  IconButton,\n  Persona,\n  PersonaSize,\n  Stack,\n  Text,\n  Theme,\n  useTheme\n} from '@fluentui/react';\nimport React from 'react';\n/* @conditional-compile-remove(one-to-n-calling) */\nimport { useLocale } from '../localization';\n\n/**\n * Strings for the incoming call notification component.\n *\n * @beta\n */\nexport interface IncomingCallNotificationStrings {\n  /**\n   *Placeholder CallerID for the incoming call notification.\n   */\n  incomingCallNotificationPlaceholderId?: string;\n  /**\n   * Placeholder Alert for the incoming call notification.\n   */\n  incomingCallNotificationPlaceholderAlert?: string;\n  /**\n   * Aria label for the accept with audio button in the incoming call notification.\n   */\n  incomingCallNoticicationAcceptWithAudioAriaLabel?: string;\n  /**\n   * Aria label for the accept with video button in the incoming call notification.\n   */\n  incomingCallNoticicationAcceptWithVideoAriaLabel?: string;\n  /**\n   * Aria label for the reject button in the incoming call notification.\n   */\n  incomingCallNoticicationRejectAriaLabel?: string;\n}\n\n/**\n * Styles for the incoming call notification component.\n *\n * @beta\n */\nexport interface IncomingCallNotificationStyles {\n  /**\n   * Styles for the accept buttons.\n   */\n  acceptButton?: IButtonStyles;\n  /**\n   * Styles for the reject button.\n   */\n  rejectButton?: IButtonStyles;\n  /**\n   * Styles for the root container.\n   */\n  root?: IStackStyles;\n  /**\n   * Styles for the avatar container.\n   */\n  avatarContainer?: IStackStyles;\n}\n\n/**\n * Properties for the incoming call notification component.\n *\n * @beta\n */\nexport interface IncomingCallNotificationProps {\n  /**\n   * Caller's Name\n   */\n  callerName?: string;\n  /**\n   * Alert Text\"\n   */\n  alertText?: string;\n  /**\n   * URL to the avatar image for the user\n   */\n  avatarImage?: string;\n  /**\n   * Size of the persona coin\n   */\n  personaSize?: number;\n  /**\n   * Callback to render the avatar\n   */\n  onRenderAvatar?: () => JSX.Element;\n  /**\n   * Callback to accept the call with audio\n   */\n  onAcceptWithAudio: () => void;\n  /**\n   * Callback to accept the call with Video\n   */\n  onAcceptWithVideo: () => void;\n  /**\n   * Callback to reject the call\n   */\n  onReject: () => void;\n  /**\n   * Styles for the incoming call notification component.\n   */\n  styles?: IncomingCallNotificationStyles;\n}\n\n/**\n * A Notification component that is to be used to represent incoming calls to the end user.\n * Allows the user to accept or reject the incoming call.\n * @beta\n */\nexport const IncomingCallNotification = (props: IncomingCallNotificationProps): JSX.Element => {\n  const { callerName, alertText, avatarImage, onAcceptWithAudio, onAcceptWithVideo, onReject, personaSize, styles } =\n    props;\n  const theme = useTheme();\n  /* @conditional-compile-remove(one-to-n-calling) */\n  const localeStrings = useLocale().strings.IncomingCallNotification;\n  return (\n    <Stack\n      horizontal\n      tokens={{ childrenGap: '0.5rem' }}\n      verticalAlign=\"center\"\n      styles={styles?.root ? styles.root : incomingCallToastStyle(theme)}\n    >\n      <Stack\n        horizontalAlign=\"start\"\n        styles={styles?.avatarContainer ? styles.avatarContainer : incomingCallToastAvatarContainerStyle}\n      >\n        <Persona\n          imageUrl={avatarImage}\n          text={callerName}\n          size={PersonaSize.size40}\n          coinSize={personaSize}\n          hidePersonaDetails={true}\n          aria-label={callerName}\n        />\n      </Stack>\n\n      <Stack grow={1} horizontalAlign=\"center\" style={{ alignItems: 'flex-start', fontFamily: 'Segoe UI' }}>\n        <Stack style={{ fontSize: '0.875rem' }}>\n          <Text>\n            {callerName ??\n              /* @conditional-compile-remove(one-to-n-calling) */ localeStrings.incomingCallNotificationPlaceholderId}\n          </Text>\n        </Stack>\n        <Stack style={{ fontSize: '0.75rem' }}>\n          <Text>\n            {alertText ??\n              /* @conditional-compile-remove(one-to-n-calling) */ localeStrings.incomingCallNotificationPlaceholderAlert}\n          </Text>\n        </Stack>\n      </Stack>\n\n      <Stack horizontal tokens={{ childrenGap: 10 }}>\n        <IconButton\n          styles={styles?.rejectButton ? styles.rejectButton : incomingCallRejectButtonStyle(theme)}\n          onClick={() => onReject()}\n          iconProps={{ iconName: 'IncomingCallNotificationRejectIcon' }}\n          /* @conditional-compile-remove(one-to-n-calling) */\n          ariaLabel={localeStrings.incomingCallNoticicationRejectAriaLabel}\n        />\n        <IconButton\n          styles={styles?.acceptButton ? styles.acceptButton : incomingCallAcceptButtonStyle(theme)}\n          onClick={() => onAcceptWithVideo()}\n          iconProps={{ iconName: 'IncomingCallNotificationAcceptWithVideoIcon' }}\n          /* @conditional-compile-remove(one-to-n-calling) */\n          ariaLabel={localeStrings.incomingCallNoticicationAcceptWithVideoAriaLabel}\n        />\n        <IconButton\n          styles={styles?.acceptButton ? styles.acceptButton : incomingCallAcceptButtonStyle(theme)}\n          onClick={() => onAcceptWithAudio()}\n          iconProps={{ iconName: 'IncomingCallNotificationAcceptIcon' }}\n          /* @conditional-compile-remove(one-to-n-calling) */\n          ariaLabel={localeStrings.incomingCallNoticicationAcceptWithAudioAriaLabel}\n        />\n      </Stack>\n    </Stack>\n  );\n};\n\nconst incomingCallToastStyle = (theme: Theme): IStackStyles => {\n  return {\n    root: {\n      minWidth: '20rem',\n      maxWidth: '40rem',\n      background: theme.palette.white,\n      opacity: 0.95,\n      borderRadius: '0.5rem',\n      boxShadow: theme.effects.elevation8,\n      padding: '1rem'\n    }\n  };\n};\n\nconst incomingCallToastAvatarContainerStyle: IStackStyles = {\n  root: {\n    marginRight: '0.5rem'\n  }\n};\n\nconst incomingCallAcceptButtonStyle = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      backgroundColor: theme.palette.greenDark,\n      color: theme.palette.white,\n      borderRadius: '2rem',\n      minWidth: '2rem',\n      width: '2rem',\n      border: 'none'\n    },\n    rootHovered: {\n      backgroundColor: theme.palette.green,\n      color: theme.palette.white\n    }\n  };\n};\n\nconst incomingCallRejectButtonStyle = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      backgroundColor: theme.palette.redDark,\n      color: theme.palette.white,\n      borderRadius: '2rem',\n      minWidth: '2rem',\n      width: '2rem',\n      border: 'none'\n    },\n    rootHovered: {\n      backgroundColor: theme.palette.red,\n      color: theme.palette.white\n    }\n  };\n};\n"]}
+{"version":3,"file":"IncomingCallNotification.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/IncomingCallNotification.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  DefaultButton,\n  IButtonStyles,\n  IconButton,\n  IStackStyles,\n  Persona,\n  PersonaSize,\n  PrimaryButton,\n  Stack,\n  Text,\n  Theme,\n  useTheme\n} from '@fluentui/react';\n/* @conditional-compile-remove(one-to-n-calling) */\nimport { IContextualMenuProps } from '@fluentui/react';\nimport React from 'react';\n/* @conditional-compile-remove(one-to-n-calling) */\nimport { useLocale } from '../localization';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/**\n * Strings for the incoming call notification component.\n *\n * @beta\n */\nexport interface IncomingCallNotificationStrings {\n  /**\n   * Placeholder CallerID for the incoming call notification.\n   */\n  incomingCallNotificationPlaceholderId?: string;\n  /**\n   * Placeholder Alert for the incoming call notification.\n   */\n  incomingCallNotificationPlaceholderAlert?: string;\n  /**\n   * Aria label for the accept with audio button in the incoming call notification.\n   */\n  incomingCallNoticicationAcceptWithAudioAriaLabel?: string;\n  /**\n   * Aria label for the accept with video button in the incoming call notification.\n   */\n  incomingCallNoticicationAcceptWithVideoAriaLabel?: string;\n  /**\n   * Aria label for the reject button in the incoming call notification.\n   */\n  incomingCallNoticicationRejectAriaLabel?: string;\n  /**\n   * Label for the accept button in the incoming call notification.\n   */\n  incomingCallNotificationAcceptButtonLabel?: string;\n  /**\n   * Label for the accept with video button in the incoming call notification.\n   */\n  incomingCallNotificationAccceptWithVideoButtonLabel?: string;\n  /**\n   * label for the reject button in the incoming call notification.\n   */\n  incomingCallNotificationRejectButtonLabel?: string;\n}\n\n/**\n * Styles for the incoming call notification component.\n *\n * @beta\n */\nexport interface IncomingCallNotificationStyles {\n  /**\n   * Styles for the accept buttons.\n   */\n  acceptButton?: IButtonStyles;\n  /**\n   * Styles for the reject button.\n   */\n  rejectButton?: IButtonStyles;\n  /**\n   * Styles for the root container.\n   */\n  root?: IStackStyles;\n  /**\n   * Styles for the avatar container.\n   */\n  avatarContainer?: IStackStyles;\n}\n\n/**\n * Properties for the incoming call notification component.\n *\n * @beta\n */\nexport interface IncomingCallNotificationProps {\n  /**\n   * Caller's Name\n   */\n  callerName?: string;\n  /**\n   * Alert Text\"\n   */\n  alertText?: string;\n  /**\n   * URL to the avatar image for the user\n   */\n  avatarImage?: string;\n  /**\n   * Size of the persona coin\n   */\n  personaSize?: number;\n  /**\n   * Callback to render the avatar\n   */\n  onRenderAvatar?: () => JSX.Element;\n  /**\n   * Callback to accept the call with audio\n   */\n  onAcceptWithAudio: () => void;\n  /**\n   * Callback to accept the call with Video\n   */\n  onAcceptWithVideo: () => void;\n  /**\n   * Callback to reject the call\n   */\n  onReject: () => void;\n  /**\n   * Callback when the notification is dismissed\n   */\n  onDismiss?: () => void;\n  /**\n   * Styles for the incoming call notification component.\n   */\n  styles?: IncomingCallNotificationStyles;\n  /**\n   * Strings for the incoming call notification component.\n   */\n  strings?: IncomingCallNotificationStrings;\n  /**\n   * Options for whether to show the accept with video button\n   */\n  acceptOptions: {\n    showAcceptWithVideo: boolean;\n  };\n}\n\n/**\n * A Notification component that is to be used to represent incoming calls to the end user.\n * Allows the user to accept or reject the incoming call.\n * @beta\n */\nexport const IncomingCallNotification = (props: IncomingCallNotificationProps): JSX.Element => {\n  const {\n    callerName,\n    alertText,\n    avatarImage,\n    onAcceptWithAudio,\n    /* @conditional-compile-remove(one-to-n-calling) */\n    onAcceptWithVideo,\n    onReject,\n    onDismiss,\n    personaSize,\n    styles,\n    strings,\n    /* @conditional-compile-remove(one-to-n-calling) */\n    acceptOptions\n  } = props;\n  const theme = useTheme();\n  /* @conditional-compile-remove(one-to-n-calling) */\n  const localeStrings = useLocale().strings.IncomingCallNotification;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  const formattedMessageString =\n    localeStrings.incomingCallNotificationPlaceholderAlert && callerName\n      ? _formatString(localeStrings.incomingCallNotificationPlaceholderAlert, { callerName: callerName })\n      : callerName;\n\n  /* @conditional-compile-remove(one-to-n-calling) */\n  const acceptManuOptions: IContextualMenuProps | undefined = acceptOptions.showAcceptWithVideo\n    ? {\n        items: [\n          {\n            key: 'audio',\n            text:\n              /* @conditional-compile-remove(one-to-n-calling) */ strings?.incomingCallNotificationAcceptButtonLabel ??\n              localeStrings.incomingCallNotificationAcceptButtonLabel,\n            onClick: () => onAcceptWithAudio()\n          },\n          {\n            key: 'video',\n            text:\n              /* @conditional-compile-remove(one-to-n-calling) */ strings?.incomingCallNotificationAccceptWithVideoButtonLabel ??\n              localeStrings.incomingCallNotificationAccceptWithVideoButtonLabel,\n            onClick: () => onAcceptWithVideo()\n          }\n        ]\n      }\n    : undefined;\n\n  return (\n    <Stack\n      tokens={{ childrenGap: '0.5rem' }}\n      verticalAlign=\"center\"\n      styles={styles?.root ? styles.root : incomingCallToastStyle(theme)}\n    >\n      <Stack horizontal verticalAlign=\"center\" tokens={{ childrenGap: personaSize ? '0.5rem' : '0rem' }}>\n        <Stack\n          horizontalAlign=\"start\"\n          styles={styles?.avatarContainer ? styles.avatarContainer : incomingCallToastAvatarContainerStyle}\n        >\n          <Persona\n            imageUrl={avatarImage}\n            text={callerName}\n            size={PersonaSize.size24}\n            coinSize={personaSize}\n            hidePersonaDetails={true}\n            aria-label={callerName}\n          />\n        </Stack>\n\n        <Stack grow horizontalAlign=\"center\" style={{ alignItems: 'flex-start', fontFamily: 'Segoe UI' }}>\n          <Stack style={{ fontSize: '0.75rem' }}>\n            <Text>\n              {alertText ??\n                strings?.incomingCallNotificationPlaceholderAlert ??\n                /* @conditional-compile-remove(one-to-n-calling) */ formattedMessageString}\n            </Text>\n          </Stack>\n        </Stack>\n        <IconButton iconProps={{ iconName: 'cancel' }} onClick={onDismiss} styles={dismissButtonStyle(theme)} />\n      </Stack>\n\n      <Stack horizontal horizontalAlign={'center'} tokens={{ childrenGap: '0.5rem' }}>\n        <PrimaryButton\n          styles={styles?.acceptButton ? styles.acceptButton : incomingCallAcceptButtonStyle(theme)}\n          onClick={() => onAcceptWithAudio()}\n          iconProps={{ iconName: 'IncomingCallNotificationAcceptIcon', style: { lineHeight: '1rem' } }}\n          /* @conditional-compile-remove(one-to-n-calling) */\n          ariaLabel={\n            strings?.incomingCallNoticicationAcceptWithAudioAriaLabel ??\n            localeStrings.incomingCallNoticicationAcceptWithAudioAriaLabel\n          }\n          /* @conditional-compile-remove(one-to-n-calling) */\n          menuProps={acceptManuOptions}\n        >\n          {\n            /* @conditional-compile-remove(one-to-n-calling) */ strings?.incomingCallNotificationAcceptButtonLabel ??\n              localeStrings.incomingCallNotificationAcceptButtonLabel\n          }\n        </PrimaryButton>\n        <DefaultButton\n          styles={styles?.rejectButton ? styles.rejectButton : incomingCallRejectButtonStyle(theme)}\n          onClick={() => onReject()}\n          label={'Decline'}\n          iconProps={{ iconName: 'IncomingCallNotificationRejectIcon' }}\n          /* @conditional-compile-remove(one-to-n-calling) */\n          ariaLabel={\n            strings?.incomingCallNoticicationRejectAriaLabel ?? localeStrings.incomingCallNoticicationRejectAriaLabel\n          }\n        >\n          {\n            /* @conditional-compile-remove(one-to-n-calling) */ strings?.incomingCallNotificationRejectButtonLabel ??\n              localeStrings.incomingCallNotificationRejectButtonLabel\n          }\n        </DefaultButton>\n      </Stack>\n    </Stack>\n  );\n};\n\nconst incomingCallToastStyle = (theme: Theme): IStackStyles => {\n  return {\n    root: {\n      width: '20rem',\n      background: theme.palette.white,\n      opacity: 0.95,\n      borderRadius: '0.5rem',\n      boxShadow: theme.effects.elevation8,\n      padding: '1rem'\n    }\n  };\n};\n\nconst incomingCallToastAvatarContainerStyle: IStackStyles = {\n  root: {\n    marginRight: '0.5rem'\n  }\n};\n\nconst dismissButtonStyle = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      color: theme.palette.neutralPrimary,\n      width: '1rem',\n      height: '1rem'\n    },\n    rootHovered: {\n      color: theme.palette.neutralDark\n    }\n  };\n};\n\nconst incomingCallAcceptButtonStyle = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      color: theme.palette.white,\n      border: 'none',\n      borderRadius: theme.effects.roundedCorner4,\n      width: '100%',\n      maxWidth: '8.875rem'\n    },\n    rootHovered: {\n      color: theme.palette.white\n    },\n    icon: {\n      height: '1.25rem'\n    }\n  };\n};\n\nconst incomingCallRejectButtonStyle = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      borderRadius: theme.effects.roundedCorner4,\n      maxWidth: '8.875rem',\n      width: '100%'\n    },\n    icon: {\n      height: '1.25rem'\n    }\n  };\n};\n"]}

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

@@ -0,0 +1,76 @@
+/// <reference types="react" />
+import { IncomingCallNotificationStyles, IncomingCallNotificationStrings } from './IncomingCallNotification';
+/**
+ * Represents an active incoming call.
+ * @beta
+ */
+export interface ActiveIncomingCall {
+    /**
+     * Unique identifier for the incoming call.
+     */
+    id: string;
+    /**
+     * Information about the caller.
+     */
+    callerInfo: {
+        /**
+         * Display name of the caller.
+         */
+        displayName: string;
+    };
+    /**
+     * Start time of the incoming call.
+     */
+    startTime: Date;
+    /**
+     * End time of the incoming call.
+     */
+    endTime?: Date;
+    /**
+     * Whether or not the call is a voip capable call.
+     */
+    videoAvailable: boolean;
+}
+/**
+ * Props for the IncomingCallManager component.
+ * @beta
+ */
+export interface IncomingCallStackProps {
+    /**
+     * List of incoming calls.
+     */
+    activeIncomingCalls: ActiveIncomingCall[];
+    /**
+     * List of incoming calls that have ended.
+     */
+    removedIncomingCalls: ActiveIncomingCall[];
+    /**
+     * Handler to accept the incoming call.
+     * @param incomingCallId - Id of the incoming call to accept.
+     * @param useVideo - Whether to accept with video.
+     * @returns void
+     */
+    onAcceptCall: (incomingCallId: string, useVideo?: boolean) => void;
+    /**
+     * Handler to reject the incoming call.
+     * @param incomingCallId - id of the incoming call to reject
+     * @returns - void
+     */
+    onRejectCall: (incomingCallId: string) => void;
+    /**
+     * Styles for the incoming call notifications.
+     */
+    styles?: IncomingCallNotificationStyles;
+    /**
+     * Strings for the incoming call notifications.
+     */
+    strings?: IncomingCallNotificationStrings;
+}
+/**
+ * Wrapper to manage multiple incoming calls
+ * @param props - {@link IncomingCallManagerProps}
+ * @returns
+ * @beta
+ */
+export declare const IncomingCallStack: (props: IncomingCallStackProps) => JSX.Element;
+//# sourceMappingURL=IncomingCallStack.d.ts.map

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

@@ -0,0 +1,23 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* @conditional-compile-remove(one-to-n-calling) */
+import { IncomingCallNotification } from './IncomingCallNotification';
+import { Stack } from '@fluentui/react';
+import React from 'react';
+/**
+ * Wrapper to manage multiple incoming calls
+ * @param props - {@link IncomingCallManagerProps}
+ * @returns
+ * @beta
+ */
+export const IncomingCallStack = (props) => {
+    /* @conditional-compile-remove(one-to-n-calling) */
+    const { activeIncomingCalls, removedIncomingCalls, onAcceptCall, onRejectCall, styles, strings } = props;
+    return (React.createElement(Stack, { tokens: { childrenGap: '0.25rem' } }, 
+    /* @conditional-compile-remove(one-to-n-calling) */ activeIncomingCalls
+        .filter((incomingCall) => !removedIncomingCalls.some((call) => call.id === incomingCall.id))
+        .map((incomingCall) => {
+        return (React.createElement(IncomingCallNotification, { key: incomingCall.id, callerName: incomingCall.callerInfo.displayName, onAcceptWithAudio: () => onAcceptCall(incomingCall.id), onAcceptWithVideo: () => onAcceptCall(incomingCall.id, true), onReject: () => onRejectCall(incomingCall.id), onDismiss: () => onRejectCall(incomingCall.id), styles: styles, strings: strings, acceptOptions: { showAcceptWithVideo: incomingCall.videoAvailable } }));
+    })));
+};
+//# sourceMappingURL=IncomingCallStack.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IncomingCallStack.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/IncomingCallStack.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,mDAAmD;AACnD,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,KAAK,MAAM,OAAO,CAAC;AAqE1B;;;;;GAKG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;IAC9E,mDAAmD;IACnD,MAAM,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IACzG,OAAO,CACL,oBAAC,KAAK,IAAC,MAAM,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE;IAErC,mDAAmD,CAAC,mBAAmB;SACpE,MAAM,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,YAAY,CAAC,EAAE,CAAC,CAAC;SAC3F,GAAG,CAAC,CAAC,YAAY,EAAE,EAAE;QACpB,OAAO,CACL,oBAAC,wBAAwB,IACvB,GAAG,EAAE,YAAY,CAAC,EAAE,EACpB,UAAU,EAAE,YAAY,CAAC,UAAU,CAAC,WAAW,EAC/C,iBAAiB,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC,EACtD,iBAAiB,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,EAAE,IAAI,CAAC,EAC5D,QAAQ,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC,EAC7C,SAAS,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC,EAC9C,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,EAAE,mBAAmB,EAAE,YAAY,CAAC,cAAc,EAAE,GACzC,CAC7B,CAAC;IACJ,CAAC,CAAC,CAEA,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(one-to-n-calling) */\nimport { IncomingCallNotification } from './IncomingCallNotification';\nimport { IncomingCallNotificationStyles, IncomingCallNotificationStrings } from './IncomingCallNotification';\nimport { Stack } from '@fluentui/react';\nimport React from 'react';\n\n/**\n * Represents an active incoming call.\n * @beta\n */\nexport interface ActiveIncomingCall {\n  /**\n   * Unique identifier for the incoming call.\n   */\n  id: string;\n  /**\n   * Information about the caller.\n   */\n  callerInfo: {\n    /**\n     * Display name of the caller.\n     */\n    displayName: string;\n  };\n  /**\n   * Start time of the incoming call.\n   */\n  startTime: Date;\n  /**\n   * End time of the incoming call.\n   */\n  endTime?: Date;\n  /**\n   * Whether or not the call is a voip capable call.\n   */\n  videoAvailable: boolean;\n}\n/**\n * Props for the IncomingCallManager component.\n * @beta\n */\nexport interface IncomingCallStackProps {\n  /**\n   * List of incoming calls.\n   */\n  activeIncomingCalls: ActiveIncomingCall[];\n  /**\n   * List of incoming calls that have ended.\n   */\n  removedIncomingCalls: ActiveIncomingCall[];\n  /**\n   * Handler to accept the incoming call.\n   * @param incomingCallId - Id of the incoming call to accept.\n   * @param useVideo - Whether to accept with video.\n   * @returns void\n   */\n  onAcceptCall: (incomingCallId: string, useVideo?: boolean) => void;\n  /**\n   * Handler to reject the incoming call.\n   * @param incomingCallId - id of the incoming call to reject\n   * @returns - void\n   */\n  onRejectCall: (incomingCallId: string) => void;\n  /**\n   * Styles for the incoming call notifications.\n   */\n  styles?: IncomingCallNotificationStyles;\n  /**\n   * Strings for the incoming call notifications.\n   */\n  strings?: IncomingCallNotificationStrings;\n}\n\n/**\n * Wrapper to manage multiple incoming calls\n * @param props - {@link IncomingCallManagerProps}\n * @returns\n * @beta\n */\nexport const IncomingCallStack = (props: IncomingCallStackProps): JSX.Element => {\n  /* @conditional-compile-remove(one-to-n-calling) */\n  const { activeIncomingCalls, removedIncomingCalls, onAcceptCall, onRejectCall, styles, strings } = props;\n  return (\n    <Stack tokens={{ childrenGap: '0.25rem' }}>\n      {\n        /* @conditional-compile-remove(one-to-n-calling) */ activeIncomingCalls\n          .filter((incomingCall) => !removedIncomingCalls.some((call) => call.id === incomingCall.id))\n          .map((incomingCall) => {\n            return (\n              <IncomingCallNotification\n                key={incomingCall.id}\n                callerName={incomingCall.callerInfo.displayName}\n                onAcceptWithAudio={() => onAcceptCall(incomingCall.id)}\n                onAcceptWithVideo={() => onAcceptCall(incomingCall.id, true)}\n                onReject={() => onRejectCall(incomingCall.id)}\n                onDismiss={() => onRejectCall(incomingCall.id)}\n                styles={styles}\n                strings={strings}\n                acceptOptions={{ showAcceptWithVideo: incomingCall.videoAvailable }}\n              ></IncomingCallNotification>\n            );\n          })\n      }\n    </Stack>\n  );\n};\n"]}

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

@@ -51,11 +51,6 @@ export interface MeetingConferencePhoneInfoModalProps {
  * a component for setting spoken languages
  */
 export declare const MeetingConferencePhoneInfoModal: (props: MeetingConferencePhoneInfoModalProps) => JSX.Element;
-/**
- * @internal
- * format phone number
- */
-export declare const formatPhoneNumber: (phoneNumber: string) => string;
 /**
  * @internal
  * format phone number link

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

@@ -11,9 +11,8 @@ import { themedPhoneInfoModalStyle, titleClassName, titleContainerClassName, pho
 /* @conditional-compile-remove(teams-meeting-conference) */
 import { useLocale } from '../localization';
 /* @conditional-compile-remove(teams-meeting-conference) */
-import { isPossiblePhoneNumber, parsePhoneNumber } from 'libphonenumber-js';
-/* @conditional-compile-remove(teams-meeting-conference) */
 import { _pxToRem } from "../../../acs-ui-common/src";
+import { _formatPhoneNumber } from './utils/formatPhoneNumber';
 /* @conditional-compile-remove(teams-meeting-conference) */
 /**
  * @public
@@ -48,7 +47,7 @@ export const MeetingConferencePhoneInfoModal = (props) => {
                                 React.createElement(Text, { className: stepTextStyle }, strings === null || strings === void 0 ? void 0 : strings.meetingConferencePhoneInfoModalDialIn)))),
                     React.createElement(Stack.Item, { className: phoneInfoStep }, conferencePhoneInfoList.map((phoneNumber, index) => (React.createElement(Stack.Item, { key: index },
                         React.createElement(Text, { className: phoneInfoTextStyle },
-                            formatPhoneNumber(phoneNumber.phoneNumber),
+                            _formatPhoneNumber(phoneNumber.phoneNumber, true),
                             ' ',
                             phoneNumber.isTollFree
                                 ? strings.meetingConferencePhoneInfoModalTollFree
@@ -75,25 +74,6 @@ export const MeetingConferencePhoneInfoModal = (props) => {
                             React.createElement(Text, { className: stepTextStyle }, strings === null || strings === void 0 ? void 0 : strings.meetingConferencePhoneInfoModalWait)))))))));
 };
 /* @conditional-compile-remove(teams-meeting-conference) */
-/**
- * @internal
- * format phone number
- */
-export const formatPhoneNumber = (phoneNumber) => {
-    var _a;
-    if (!phoneNumber) {
-        return '';
-    }
-    let enchantedPhoneNumber = phoneNumber;
-    if (!phoneNumber.startsWith('+')) {
-        enchantedPhoneNumber = `+${phoneNumber}`;
-    }
-    if (isPossiblePhoneNumber(enchantedPhoneNumber)) {
-        return ((_a = parsePhoneNumber(enchantedPhoneNumber)) === null || _a === void 0 ? void 0 : _a.formatInternational()) || enchantedPhoneNumber;
-    }
-    return phoneNumber;
-};
-/* @conditional-compile-remove(teams-meeting-conference) */
 /**
  * @internal
  * format phone number link
@@ -108,7 +88,7 @@ export const formatPhoneNumberLink = (phoneNumber) => {
  */
 export const formatPhoneNumberInfo = (phoneNumber, strings) => {
     const templateText = phoneNumber.country && phoneNumber.city ? strings === null || strings === void 0 ? void 0 : strings.meetingConferencePhoneInfoModalTollGeoData : '';
-    return ((templateText === null || templateText === void 0 ? void 0 : templateText.replace('{phoneNumber}', formatPhoneNumber(phoneNumber.phoneNumber)).replace('{country}', phoneNumber.country || '').replace('{city}', phoneNumber.city || '').trim()) || '');
+    return ((templateText === null || templateText === void 0 ? void 0 : templateText.replace('{country}', phoneNumber.country || '').replace('{city}', phoneNumber.city || '').trim()) || '');
 };
 /* @conditional-compile-remove(teams-meeting-conference) */
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"MeetingConferencePhoneInfo.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/MeetingConferencePhoneInfo.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,2DAA2D;AAC3D,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,2DAA2D;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,2DAA2D;AAC3D,OAAO,EAAgB,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAE/F,2DAA2D;AAC3D,OAAO,EACL,yBAAyB,EACzB,cAAc,EACd,uBAAuB,EACvB,kBAAkB,EAClB,aAAa,EACb,wBAAwB,EACxB,aAAa,EACb,aAAa,EACb,uBAAuB,EACvB,kBAAkB,EACnB,MAAM,qCAAqC,CAAC;AAG7C,2DAA2D;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,2DAA2D;AAC3D,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC5E,2DAA2D;AAC3D,OAAO,EAAE,QAAQ,EAAE,mCAAgC;AAqDnD,2DAA2D;AAC3D;;;GAGG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC,KAA2C,EAAe,EAAE;IAC1G,MAAM,EAAE,uBAAuB,EAAE,SAAS,EAAE,iCAAiC,EAAE,GAAG,KAAK,CAAC;IAExF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,0BAA0B,CAAC;IAE/D,MAAM,SAAS,GAAG,WAAW,CAAC,GAAS,EAAE;QACvC,IAAI,iCAAiC,EAAE,CAAC;YACtC,iCAAiC,EAAE,CAAC;QACtC,CAAC;IACH,CAAC,EAAE,CAAC,iCAAiC,CAAC,CAAC,CAAC;IAExC,MAAM,mBAAmB,GAA0B,OAAO,CAAC,GAAG,EAAE,CAAC,yBAAyB,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAE5G,OAAO,CACL;QACE,oBAAC,KAAK,IACJ,WAAW,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,oCAAoC,EAC1D,MAAM,EAAE,SAAS,EACjB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,IAAI,EAChB,MAAM,EAAE,mBAAmB;YAE3B,oBAAC,KAAK,IAAC,UAAU,QAAC,eAAe,EAAC,eAAe,EAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,uBAAuB;gBACzG,oBAAC,IAAI,IAAC,SAAS,EAAE,cAAc,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,oCAAoC,CAAQ;gBACvF,oBAAC,UAAU,IACT,SAAS,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,EACjC,SAAS,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,oCAAoC,EACxD,OAAO,EAAE,SAAS,EAClB,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,GACrC,CACI;YACP,uBAAuB,CAAC,MAAM,KAAK,CAAC,IAAI,CACvC,oBAAC,KAAK,IAAC,UAAU;gBACf,oBAAC,IAAI,IAAC,SAAS,EAAE,aAAa,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,+CAA+C,CAAQ,CAC3F,CACT;YACA,uBAAuB,CAAC,MAAM,GAAG,CAAC,IAAI,CACrC,oBAAC,KAAK;gBACJ,oBAAC,KAAK,IAAC,UAAU,QAAC,eAAe,EAAC,eAAe,EAAC,SAAS,EAAE,wBAAwB;oBACnF,oBAAC,KAAK,CAAC,IAAI,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;wBACpC,oBAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,aAAa;4BACxC,oBAAC,KAAK,IAAC,SAAS,EAAE,uBAAuB,CAAC,KAAK,CAAC,GAAU;4BAC1D,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,aAAa,CAAC,KAAK,CAAC;gCACzC,oBAAC,KAAK,IAAC,aAAa,EAAC,QAAQ,EAAC,eAAe,EAAC,QAAQ;oCACpD,oBAAC,IAAI,IAAC,QAAQ,EAAC,yBAAyB,EAAC,SAAS,EAAE,kBAAkB,CAAC,KAAK,CAAC,GAAI,CAC3E,CACG;4BACb,oBAAC,KAAK,CAAC,IAAI;gCACT,oBAAC,IAAI,IAAC,SAAS,EAAE,aAAa,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,qCAAqC,CAAQ,CAC5E,CACP,CACG;oBACb,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,aAAa,IACjC,uBAAuB,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE,CAAC,CACnD,oBAAC,KAAK,CAAC,IAAI,IAAC,GAAG,EAAE,KAAK;wBACpB,oBAAC,IAAI,IAAC,SAAS,EAAE,kBAAkB;4BAChC,iBAAiB,CAAC,WAAW,CAAC,WAAW,CAAC;4BAAE,GAAG;4BAC/C,WAAW,CAAC,UAAU;gCACrB,CAAC,CAAC,OAAO,CAAC,uCAAuC;gCACjD,CAAC,CAAC,OAAO,CAAC,mCAAmC,CAC1C;wBACP,+BAAM;wBACN,oBAAC,IAAI,IAAC,SAAS,EAAE,kBAAkB;;4BAAI,qBAAqB,CAAC,WAAW,EAAE,OAAO,CAAC,CAAQ,CAC/E,CACd,CAAC,CACS,CACP;gBACR,oBAAC,KAAK,IACJ,UAAU,QACV,eAAe,EAAC,eAAe,EAC/B,aAAa,EAAC,QAAQ,EACtB,SAAS,EAAE,wBAAwB;oBAEnC,oBAAC,KAAK,CAAC,IAAI,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;wBACpC,oBAAC,KAAK,IAAC,UAAU;4BACf,oBAAC,KAAK,IAAC,SAAS,EAAE,uBAAuB,CAAC,KAAK,CAAC,GAAU;4BAC1D,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,aAAa,CAAC,KAAK,CAAC;gCACzC,oBAAC,KAAK,IAAC,aAAa,EAAC,QAAQ,EAAC,eAAe,EAAC,QAAQ;oCACpD,oBAAC,IAAI,IAAC,QAAQ,EAAC,6BAA6B,EAAC,SAAS,EAAE,kBAAkB,CAAC,KAAK,CAAC,GAAI,CAC/E,CACG;4BACb,oBAAC,KAAK,CAAC,IAAI;gCACT,oBAAC,IAAI,IAAC,SAAS,EAAE,aAAa,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,wCAAwC,CAAQ,CAC/E,CACP,CACG;oBACb,oBAAC,IAAI,IAAC,SAAS,EAAE,kBAAkB,IAAG,eAAe,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAQ,CAChG;gBACR,oBAAC,KAAK,IAAC,UAAU,QAAC,eAAe,EAAC,eAAe,EAAC,aAAa,EAAC,QAAQ;oBACtE,oBAAC,KAAK,IAAC,UAAU;wBACf,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,aAAa,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE;4BAC7E,oBAAC,IAAI,IAAC,QAAQ,EAAC,iCAAiC,EAAC,SAAS,EAAE,kBAAkB,CAAC,KAAK,CAAC,GAAI,CAC9E;wBACb,oBAAC,KAAK,CAAC,IAAI;4BACT,oBAAC,IAAI,IAAC,SAAS,EAAE,aAAa,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,mCAAmC,CAAQ,CAC1E,CACP,CACF,CACF,CACT,CACK,CACP,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,2DAA2D;AAC3D;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,WAAmB,EAAU,EAAE;;IAC/D,IAAI,CAAC,WAAW,EAAE,CAAC;QACjB,OAAO,EAAE,CAAC;IACZ,CAAC;IACD,IAAI,oBAAoB,GAAG,WAAW,CAAC;IACvC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;QACjC,oBAAoB,GAAG,IAAI,WAAW,EAAE,CAAC;IAC3C,CAAC;IACD,IAAI,qBAAqB,CAAC,oBAAoB,CAAC,EAAE,CAAC;QAChD,OAAO,CAAA,MAAA,gBAAgB,CAAC,oBAAoB,CAAC,0CAAE,mBAAmB,EAAE,KAAI,oBAAoB,CAAC;IAC/F,CAAC;IACD,OAAO,WAAW,CAAC;AACrB,CAAC,CAAC;AAEF,2DAA2D;AAC3D;;;GAGG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,WAAgC,EAAU,EAAE;IAChF,OAAO,QAAQ,WAAW,CAAC,WAAW,KAAK,WAAW,CAAC,YAAY,GAAG,CAAC;AACzE,CAAC,CAAC;AAEF,2DAA2D;AAC3D;;;GAGG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CACnC,WAAgC,EAChC,OAA2D,EACnD,EAAE;IACV,MAAM,YAAY,GAChB,WAAW,CAAC,OAAO,IAAI,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,0CAA0C,CAAC,CAAC,CAAC,EAAE,CAAC;IACrG,OAAO,CACL,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CACR,OAAO,CAAC,eAAe,EAAE,iBAAiB,CAAC,WAAW,CAAC,WAAW,CAAC,EACpE,OAAO,CAAC,WAAW,EAAE,WAAW,CAAC,OAAO,IAAI,EAAE,EAC9C,OAAO,CAAC,QAAQ,EAAE,WAAW,CAAC,IAAI,IAAI,EAAE,EACxC,IAAI,EAAE,KAAI,EAAE,CAChB,CAAC;AACJ,CAAC,CAAC;AAEF,2DAA2D;AAC3D;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,SAAkB,EAAU,EAAE;IAC5D,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,OAAO,EAAE,CAAC;IACZ,CAAC;IACD,IAAI,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,MAAM,MAAK,CAAC,EAAE,CAAC;QAC5B,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;AAC/F,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(teams-meeting-conference) */\nimport React, { useCallback } from 'react';\n/* @conditional-compile-remove(teams-meeting-conference) */\nimport { useMemo } from 'react';\n/* @conditional-compile-remove(teams-meeting-conference) */\nimport { IModalStyles, Modal, Stack, useTheme, Text, IconButton, Icon } from '@fluentui/react';\n\n/* @conditional-compile-remove(teams-meeting-conference) */\nimport {\n  themedPhoneInfoModalStyle,\n  titleClassName,\n  titleContainerClassName,\n  phoneInfoTextStyle,\n  phoneInfoIcon,\n  phoneInfoInctructionLine,\n  phoneInfoStep,\n  stepTextStyle,\n  infoConnectionLinkStyle,\n  phoneInfoIconStyle\n} from './styles/TeamsMeetingConferenceInfo';\n/* @conditional-compile-remove(teams-meeting-conference) */\nimport { _preventDismissOnEvent } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(teams-meeting-conference) */\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(teams-meeting-conference) */\nimport { isPossiblePhoneNumber, parsePhoneNumber } from 'libphonenumber-js';\n/* @conditional-compile-remove(teams-meeting-conference) */\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/* @conditional-compile-remove(teams-meeting-conference) */\n/**\n * strings for phone info modal\n * @public\n */\nexport interface MeetingConferencePhoneInfoModalStrings {\n  /**\n   * Header for the phone info modal\n   */\n  meetingConferencePhoneInfoModalTitle: string;\n  /**\n   * Phone number instruction\n   */\n  meetingConferencePhoneInfoModalDialIn: string;\n  /**\n   * Meeting ID instruction\n   */\n  meetingConferencePhoneInfoModalMeetingId: string;\n  /**\n   * Wait for phone connection\n   */\n  meetingConferencePhoneInfoModalWait: string;\n  /**\n   * Toll Free Phone Label\n   */\n  meetingConferencePhoneInfoModalTollFree: string;\n  /**\n   * Toll Phone Label\n   */\n  meetingConferencePhoneInfoModalToll: string;\n  /**\n   * Toll Phone Label without geo data\n   */\n  meetingConferencePhoneInfoModalTollGeoData: string;\n  /**\n   * No phone number available message\n   */\n  meetingConferencePhoneInfoModalNoPhoneAvailable: string;\n}\n\n/* @conditional-compile-remove(teams-meeting-conference) */\n/**\n * @public\n * MeetingConferencePhoneInfoModal Component Props.\n */\nexport interface MeetingConferencePhoneInfoModalProps {\n  conferencePhoneInfoList: ConferencePhoneInfo[];\n  showModal?: boolean;\n  onDismissMeetingPhoneInfoSettings?: () => void;\n}\n\n/* @conditional-compile-remove(teams-meeting-conference) */\n/**\n * @public\n * a component for setting spoken languages\n */\nexport const MeetingConferencePhoneInfoModal = (props: MeetingConferencePhoneInfoModalProps): JSX.Element => {\n  const { conferencePhoneInfoList, showModal, onDismissMeetingPhoneInfoSettings } = props;\n\n  const theme = useTheme();\n  const strings = useLocale().strings.meetingConferencePhoneInfo;\n\n  const onDismiss = useCallback((): void => {\n    if (onDismissMeetingPhoneInfoSettings) {\n      onDismissMeetingPhoneInfoSettings();\n    }\n  }, [onDismissMeetingPhoneInfoSettings]);\n\n  const PhoneInfoModalStyle: Partial<IModalStyles> = useMemo(() => themedPhoneInfoModalStyle(theme), [theme]);\n\n  return (\n    <>\n      <Modal\n        titleAriaId={strings?.meetingConferencePhoneInfoModalTitle}\n        isOpen={showModal}\n        onDismiss={onDismiss}\n        isBlocking={true}\n        styles={PhoneInfoModalStyle}\n      >\n        <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\" className={titleContainerClassName}>\n          <Text className={titleClassName}>{strings?.meetingConferencePhoneInfoModalTitle}</Text>\n          <IconButton\n            iconProps={{ iconName: 'Cancel' }}\n            ariaLabel={strings?.meetingConferencePhoneInfoModalTitle}\n            onClick={onDismiss}\n            style={{ color: theme.palette.black }}\n          />\n        </Stack>\n        {conferencePhoneInfoList.length === 0 && (\n          <Stack horizontal>\n            <Text className={stepTextStyle}>{strings?.meetingConferencePhoneInfoModalNoPhoneAvailable}</Text>\n          </Stack>\n        )}\n        {conferencePhoneInfoList.length > 0 && (\n          <Stack>\n            <Stack horizontal horizontalAlign=\"space-between\" className={phoneInfoInctructionLine}>\n              <Stack.Item style={{ display: 'flex' }}>\n                <Stack horizontal className={phoneInfoStep}>\n                  <Stack className={infoConnectionLinkStyle(theme)}></Stack>\n                  <Stack.Item className={phoneInfoIcon(theme)}>\n                    <Stack verticalAlign=\"center\" horizontalAlign=\"center\">\n                      <Icon iconName=\"JoinByPhoneDialStepIcon\" className={phoneInfoIconStyle(theme)} />\n                    </Stack>\n                  </Stack.Item>\n                  <Stack.Item>\n                    <Text className={stepTextStyle}>{strings?.meetingConferencePhoneInfoModalDialIn}</Text>\n                  </Stack.Item>\n                </Stack>\n              </Stack.Item>\n              <Stack.Item className={phoneInfoStep}>\n                {conferencePhoneInfoList.map((phoneNumber, index) => (\n                  <Stack.Item key={index}>\n                    <Text className={phoneInfoTextStyle}>\n                      {formatPhoneNumber(phoneNumber.phoneNumber)}{' '}\n                      {phoneNumber.isTollFree\n                        ? strings.meetingConferencePhoneInfoModalTollFree\n                        : strings.meetingConferencePhoneInfoModalToll}\n                    </Text>\n                    <br />\n                    <Text className={phoneInfoTextStyle}> {formatPhoneNumberInfo(phoneNumber, strings)}</Text>\n                  </Stack.Item>\n                ))}\n              </Stack.Item>\n            </Stack>\n            <Stack\n              horizontal\n              horizontalAlign=\"space-between\"\n              verticalAlign=\"center\"\n              className={phoneInfoInctructionLine}\n            >\n              <Stack.Item style={{ display: 'flex' }}>\n                <Stack horizontal>\n                  <Stack className={infoConnectionLinkStyle(theme)}></Stack>\n                  <Stack.Item className={phoneInfoIcon(theme)}>\n                    <Stack verticalAlign=\"center\" horizontalAlign=\"center\">\n                      <Icon iconName=\"JoinByPhoneConferenceIdIcon\" className={phoneInfoIconStyle(theme)} />\n                    </Stack>\n                  </Stack.Item>\n                  <Stack.Item>\n                    <Text className={stepTextStyle}>{strings?.meetingConferencePhoneInfoModalMeetingId}</Text>\n                  </Stack.Item>\n                </Stack>\n              </Stack.Item>\n              <Text className={phoneInfoTextStyle}>{formatMeetingId(conferencePhoneInfoList[0].conferenceId)}</Text>\n            </Stack>\n            <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\">\n              <Stack horizontal>\n                <Stack.Item className={phoneInfoIcon(theme)} style={{ marginLeft: _pxToRem(2) }}>\n                  <Icon iconName=\"JoinByPhoneWaitToBeAdmittedIcon\" className={phoneInfoIconStyle(theme)} />\n                </Stack.Item>\n                <Stack.Item>\n                  <Text className={stepTextStyle}>{strings?.meetingConferencePhoneInfoModalWait}</Text>\n                </Stack.Item>\n              </Stack>\n            </Stack>\n          </Stack>\n        )}\n      </Modal>\n    </>\n  );\n};\n\n/* @conditional-compile-remove(teams-meeting-conference) */\n/**\n * @internal\n * format phone number\n */\nexport const formatPhoneNumber = (phoneNumber: string): string => {\n  if (!phoneNumber) {\n    return '';\n  }\n  let enchantedPhoneNumber = phoneNumber;\n  if (!phoneNumber.startsWith('+')) {\n    enchantedPhoneNumber = `+${phoneNumber}`;\n  }\n  if (isPossiblePhoneNumber(enchantedPhoneNumber)) {\n    return parsePhoneNumber(enchantedPhoneNumber)?.formatInternational() || enchantedPhoneNumber;\n  }\n  return phoneNumber;\n};\n\n/* @conditional-compile-remove(teams-meeting-conference) */\n/**\n * @internal\n * format phone number link\n */\nexport const formatPhoneNumberLink = (phoneNumber: ConferencePhoneInfo): string => {\n  return `tel:+${phoneNumber.phoneNumber},,${phoneNumber.conferenceId}#`;\n};\n\n/* @conditional-compile-remove(teams-meeting-conference) */\n/**\n * @internal\n * format phone number\n */\nexport const formatPhoneNumberInfo = (\n  phoneNumber: ConferencePhoneInfo,\n  strings: MeetingConferencePhoneInfoModalStrings | undefined\n): string => {\n  const templateText =\n    phoneNumber.country && phoneNumber.city ? strings?.meetingConferencePhoneInfoModalTollGeoData : '';\n  return (\n    templateText\n      ?.replace('{phoneNumber}', formatPhoneNumber(phoneNumber.phoneNumber))\n      .replace('{country}', phoneNumber.country || '')\n      .replace('{city}', phoneNumber.city || '')\n      .trim() || ''\n  );\n};\n\n/* @conditional-compile-remove(teams-meeting-conference) */\n/**\n * @internal\n * format meeting id\n */\nexport const formatMeetingId = (meetingId?: string): string => {\n  if (!meetingId) {\n    return '';\n  }\n  if (meetingId?.length !== 9) {\n    return meetingId;\n  }\n\n  return [meetingId.slice(0, 3), meetingId.slice(3, 6), meetingId.slice(6, 9)].join(' ') + '#';\n};\n\n/* @conditional-compile-remove(teams-meeting-conference) */\n/**\n * @public\n * Information for conference phone info\n */\nexport interface ConferencePhoneInfo {\n  phoneNumber: string;\n  conferenceId: string;\n  isTollFree: boolean;\n  country?: string;\n  city?: string;\n}\n"]}
+{"version":3,"file":"MeetingConferencePhoneInfo.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/MeetingConferencePhoneInfo.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(teams-meeting-conference) */\nimport React, { useCallback } from 'react';\n/* @conditional-compile-remove(teams-meeting-conference) */\nimport { useMemo } from 'react';\n/* @conditional-compile-remove(teams-meeting-conference) */\nimport { IModalStyles, Modal, Stack, useTheme, Text, IconButton, Icon } from '@fluentui/react';\n\n/* @conditional-compile-remove(teams-meeting-conference) */\nimport {\n  themedPhoneInfoModalStyle,\n  titleClassName,\n  titleContainerClassName,\n  phoneInfoTextStyle,\n  phoneInfoIcon,\n  phoneInfoInctructionLine,\n  phoneInfoStep,\n  stepTextStyle,\n  infoConnectionLinkStyle,\n  phoneInfoIconStyle\n} from './styles/TeamsMeetingConferenceInfo';\n/* @conditional-compile-remove(teams-meeting-conference) */\nimport { _preventDismissOnEvent } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(teams-meeting-conference) */\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(teams-meeting-conference) */\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { _formatPhoneNumber } from './utils/formatPhoneNumber';\n\n/* @conditional-compile-remove(teams-meeting-conference) */\n/**\n * strings for phone info modal\n * @public\n */\nexport interface MeetingConferencePhoneInfoModalStrings {\n  /**\n   * Header for the phone info modal\n   */\n  meetingConferencePhoneInfoModalTitle: string;\n  /**\n   * Phone number instruction\n   */\n  meetingConferencePhoneInfoModalDialIn: string;\n  /**\n   * Meeting ID instruction\n   */\n  meetingConferencePhoneInfoModalMeetingId: string;\n  /**\n   * Wait for phone connection\n   */\n  meetingConferencePhoneInfoModalWait: string;\n  /**\n   * Toll Free Phone Label\n   */\n  meetingConferencePhoneInfoModalTollFree: string;\n  /**\n   * Toll Phone Label\n   */\n  meetingConferencePhoneInfoModalToll: string;\n  /**\n   * Toll Phone Label without geo data\n   */\n  meetingConferencePhoneInfoModalTollGeoData: string;\n  /**\n   * No phone number available message\n   */\n  meetingConferencePhoneInfoModalNoPhoneAvailable: string;\n}\n\n/* @conditional-compile-remove(teams-meeting-conference) */\n/**\n * @public\n * MeetingConferencePhoneInfoModal Component Props.\n */\nexport interface MeetingConferencePhoneInfoModalProps {\n  conferencePhoneInfoList: ConferencePhoneInfo[];\n  showModal?: boolean;\n  onDismissMeetingPhoneInfoSettings?: () => void;\n}\n\n/* @conditional-compile-remove(teams-meeting-conference) */\n/**\n * @public\n * a component for setting spoken languages\n */\nexport const MeetingConferencePhoneInfoModal = (props: MeetingConferencePhoneInfoModalProps): JSX.Element => {\n  const { conferencePhoneInfoList, showModal, onDismissMeetingPhoneInfoSettings } = props;\n\n  const theme = useTheme();\n  const strings = useLocale().strings.meetingConferencePhoneInfo;\n\n  const onDismiss = useCallback((): void => {\n    if (onDismissMeetingPhoneInfoSettings) {\n      onDismissMeetingPhoneInfoSettings();\n    }\n  }, [onDismissMeetingPhoneInfoSettings]);\n\n  const PhoneInfoModalStyle: Partial<IModalStyles> = useMemo(() => themedPhoneInfoModalStyle(theme), [theme]);\n\n  return (\n    <>\n      <Modal\n        titleAriaId={strings?.meetingConferencePhoneInfoModalTitle}\n        isOpen={showModal}\n        onDismiss={onDismiss}\n        isBlocking={true}\n        styles={PhoneInfoModalStyle}\n      >\n        <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\" className={titleContainerClassName}>\n          <Text className={titleClassName}>{strings?.meetingConferencePhoneInfoModalTitle}</Text>\n          <IconButton\n            iconProps={{ iconName: 'Cancel' }}\n            ariaLabel={strings?.meetingConferencePhoneInfoModalTitle}\n            onClick={onDismiss}\n            style={{ color: theme.palette.black }}\n          />\n        </Stack>\n        {conferencePhoneInfoList.length === 0 && (\n          <Stack horizontal>\n            <Text className={stepTextStyle}>{strings?.meetingConferencePhoneInfoModalNoPhoneAvailable}</Text>\n          </Stack>\n        )}\n        {conferencePhoneInfoList.length > 0 && (\n          <Stack>\n            <Stack horizontal horizontalAlign=\"space-between\" className={phoneInfoInctructionLine}>\n              <Stack.Item style={{ display: 'flex' }}>\n                <Stack horizontal className={phoneInfoStep}>\n                  <Stack className={infoConnectionLinkStyle(theme)}></Stack>\n                  <Stack.Item className={phoneInfoIcon(theme)}>\n                    <Stack verticalAlign=\"center\" horizontalAlign=\"center\">\n                      <Icon iconName=\"JoinByPhoneDialStepIcon\" className={phoneInfoIconStyle(theme)} />\n                    </Stack>\n                  </Stack.Item>\n                  <Stack.Item>\n                    <Text className={stepTextStyle}>{strings?.meetingConferencePhoneInfoModalDialIn}</Text>\n                  </Stack.Item>\n                </Stack>\n              </Stack.Item>\n              <Stack.Item className={phoneInfoStep}>\n                {conferencePhoneInfoList.map((phoneNumber, index) => (\n                  <Stack.Item key={index}>\n                    <Text className={phoneInfoTextStyle}>\n                      {_formatPhoneNumber(phoneNumber.phoneNumber, true)}{' '}\n                      {phoneNumber.isTollFree\n                        ? strings.meetingConferencePhoneInfoModalTollFree\n                        : strings.meetingConferencePhoneInfoModalToll}\n                    </Text>\n                    <br />\n                    <Text className={phoneInfoTextStyle}> {formatPhoneNumberInfo(phoneNumber, strings)}</Text>\n                  </Stack.Item>\n                ))}\n              </Stack.Item>\n            </Stack>\n            <Stack\n              horizontal\n              horizontalAlign=\"space-between\"\n              verticalAlign=\"center\"\n              className={phoneInfoInctructionLine}\n            >\n              <Stack.Item style={{ display: 'flex' }}>\n                <Stack horizontal>\n                  <Stack className={infoConnectionLinkStyle(theme)}></Stack>\n                  <Stack.Item className={phoneInfoIcon(theme)}>\n                    <Stack verticalAlign=\"center\" horizontalAlign=\"center\">\n                      <Icon iconName=\"JoinByPhoneConferenceIdIcon\" className={phoneInfoIconStyle(theme)} />\n                    </Stack>\n                  </Stack.Item>\n                  <Stack.Item>\n                    <Text className={stepTextStyle}>{strings?.meetingConferencePhoneInfoModalMeetingId}</Text>\n                  </Stack.Item>\n                </Stack>\n              </Stack.Item>\n              <Text className={phoneInfoTextStyle}>{formatMeetingId(conferencePhoneInfoList[0].conferenceId)}</Text>\n            </Stack>\n            <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\">\n              <Stack horizontal>\n                <Stack.Item className={phoneInfoIcon(theme)} style={{ marginLeft: _pxToRem(2) }}>\n                  <Icon iconName=\"JoinByPhoneWaitToBeAdmittedIcon\" className={phoneInfoIconStyle(theme)} />\n                </Stack.Item>\n                <Stack.Item>\n                  <Text className={stepTextStyle}>{strings?.meetingConferencePhoneInfoModalWait}</Text>\n                </Stack.Item>\n              </Stack>\n            </Stack>\n          </Stack>\n        )}\n      </Modal>\n    </>\n  );\n};\n\n/* @conditional-compile-remove(teams-meeting-conference) */\n/**\n * @internal\n * format phone number link\n */\nexport const formatPhoneNumberLink = (phoneNumber: ConferencePhoneInfo): string => {\n  return `tel:+${phoneNumber.phoneNumber},,${phoneNumber.conferenceId}#`;\n};\n\n/* @conditional-compile-remove(teams-meeting-conference) */\n/**\n * @internal\n * format phone number\n */\nexport const formatPhoneNumberInfo = (\n  phoneNumber: ConferencePhoneInfo,\n  strings: MeetingConferencePhoneInfoModalStrings | undefined\n): string => {\n  const templateText =\n    phoneNumber.country && phoneNumber.city ? strings?.meetingConferencePhoneInfoModalTollGeoData : '';\n  return (\n    templateText\n      ?.replace('{country}', phoneNumber.country || '')\n      .replace('{city}', phoneNumber.city || '')\n      .trim() || ''\n  );\n};\n\n/* @conditional-compile-remove(teams-meeting-conference) */\n/**\n * @internal\n * format meeting id\n */\nexport const formatMeetingId = (meetingId?: string): string => {\n  if (!meetingId) {\n    return '';\n  }\n  if (meetingId?.length !== 9) {\n    return meetingId;\n  }\n\n  return [meetingId.slice(0, 3), meetingId.slice(3, 6), meetingId.slice(6, 9)].join(' ') + '#';\n};\n\n/* @conditional-compile-remove(teams-meeting-conference) */\n/**\n * @public\n * Information for conference phone info\n */\nexport interface ConferencePhoneInfo {\n  phoneNumber: string;\n  conferenceId: string;\n  isTollFree: boolean;\n  country?: string;\n  city?: string;\n}\n"]}

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

@@ -316,18 +316,19 @@ export type MessageThreadProps = {
  */
 export interface RichTextEditBoxOptions extends RichTextEditorOptions {
     /**
-     * Optional callback to upload an inline image in the rich text editor.
+     * Optional callback to handle an inline image that's inserted in the rich text editor.
+     * When not provided, pasting images into rich text editor will be disabled.
      */
-    onUploadInlineImage?: (imageUrl: string, imageFileName: string, messageId: string) => void;
+    onInsertInlineImage?: (imageUrl: string, imageFileName: string, messageId: string) => void;
     /**
-     * Optional callback to remove the attachment upload or delete the image before sending.
+     * Optional callback to remove the image upload or delete the image from server before sending.
      */
     onCancelInlineImageUpload?: (imageId: string, messageId: string) => void;
     /**
      * Optional Record of type {@link AttachmentMetadataInProgress}
-     * to render inline images being uploaded in the MessageThread's edit box.
+     * to render inline images being inserted in the MessageThread's edit boxes.
      */
-    messagesImageUploadsInProgress?: Record<string, AttachmentMetadataInProgress[]>;
+    messagesInlineImages?: Record<string, AttachmentMetadataInProgress[]>;
 }
 /**
  * Props to render a single message.

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

@@ -538,10 +538,10 @@ export const MessageThreadWrapper = (props) => {
                             /* @conditional-compile-remove(rich-text-editor-image-upload) */
                             onPaste: richTextEditorOptions === null || richTextEditorOptions === void 0 ? void 0 : richTextEditorOptions.onPaste, 
                             /* @conditional-compile-remove(rich-text-editor-image-upload) */
-                            onUploadInlineImage: richTextEditorOptions === null || richTextEditorOptions === void 0 ? void 0 : richTextEditorOptions.onUploadInlineImage, 
+                            onInsertInlineImage: richTextEditorOptions === null || richTextEditorOptions === void 0 ? void 0 : richTextEditorOptions.onInsertInlineImage, 
                             /* @conditional-compile-remove(rich-text-editor-image-upload) */
-                            imageUploadsInProgress: (richTextEditorOptions === null || richTextEditorOptions === void 0 ? void 0 : richTextEditorOptions.messagesImageUploadsInProgress) &&
-                                (richTextEditorOptions === null || richTextEditorOptions === void 0 ? void 0 : richTextEditorOptions.messagesImageUploadsInProgress[message.message.messageId]), 
+                            inlineImages: (richTextEditorOptions === null || richTextEditorOptions === void 0 ? void 0 : richTextEditorOptions.messagesInlineImages) &&
+                                (richTextEditorOptions === null || richTextEditorOptions === void 0 ? void 0 : richTextEditorOptions.messagesInlineImages[message.message.messageId]), 
                             /* @conditional-compile-remove(rich-text-editor-image-upload) */
                             onCancelInlineImageUpload: richTextEditorOptions === null || richTextEditorOptions === void 0 ? void 0 : richTextEditorOptions.onCancelInlineImageUpload })));
                     }))))));