@azure/communication-react 1.4.2-alpha-202212010027.0 → 1.4.2-alpha-202301052137

package/dist/dist-esm/react-components/src/components/DevicePermissions/{DomainPermissions.js → SitePermissions.js}

@@ -4,7 +4,7 @@ import React from 'react';
 /* @conditional-compile-remove(call-readiness) */
 import { useLocale } from '../../localization';
 /* @conditional-compile-remove(call-readiness) */
-import { DomainPermissionsContainer } from './DomainPermissionsScaffolding';
+import { SitePermissionsContainer } from './SitePermissionsScaffolding';
 /* @conditional-compile-remove(call-readiness) */
 import { useShallowMerge } from '../utils/merge';
 /**
@@ -13,24 +13,26 @@ import { useShallowMerge } from '../utils/merge';
  * Component to allow Contoso to help their end user with their devices should their permissions be blocked
  * by their browsers settings.
  */
-export const CameraAndMicrophoneDomainPermissions = (props) => {
+export const CameraAndMicrophoneSitePermissions = (props) => {
     var _a, _b, _c;
     /* @conditional-compile-remove(call-readiness) */
     const locale = useLocale().strings;
     /* @conditional-compile-remove(call-readiness) */
     const strings = useShallowMerge(props.type === 'denied'
-        ? locale.CameraAndMicrophoneDomainPermissionsDenied
+        ? props.browserHint === 'safari'
+            ? locale.CameraAndMicrophoneSitePermissionsDeniedSafari
+            : locale.CameraAndMicrophoneSitePermissionsDenied
         : props.type === 'request'
-            ? locale.CameraAndMicrophoneDomainPermissionsRequest
-            : locale.CameraAndMicrophoneDomainPermissionsCheck, props.strings);
+            ? locale.CameraAndMicrophoneSitePermissionsRequest
+            : locale.CameraAndMicrophoneSitePermissionsCheck, props.strings);
     /* @conditional-compile-remove(call-readiness) */
-    const cameraIconName = ((_a = props.microphoneIconName) !== null && _a !== void 0 ? _a : props.type === 'denied') ? 'DomainPermissionCameraDenied' : 'DomainPermissionCamera';
+    const cameraIconName = ((_a = props.microphoneIconName) !== null && _a !== void 0 ? _a : props.type === 'denied') ? 'SitePermissionCameraDenied' : 'SitePermissionCamera';
     /* @conditional-compile-remove(call-readiness) */
-    const microphoneIconName = ((_b = props.microphoneIconName) !== null && _b !== void 0 ? _b : props.type === 'denied') ? 'DomainPermissionMicDenied' : 'DomainPermissionMic';
+    const microphoneIconName = ((_b = props.microphoneIconName) !== null && _b !== void 0 ? _b : props.type === 'denied') ? 'SitePermissionMicDenied' : 'SitePermissionMic';
     /* @conditional-compile-remove(call-readiness) */
-    const connectorIconName = (_c = props.microphoneIconName) !== null && _c !== void 0 ? _c : 'DomainPermissionsSparkle';
+    const connectorIconName = (_c = props.microphoneIconName) !== null && _c !== void 0 ? _c : 'SitePermissionsSparkle';
     /* @conditional-compile-remove(call-readiness) */
-    return (React.createElement(DomainPermissionsContainer, Object.assign({}, props, { strings: strings, cameraIconName: cameraIconName, connectorIconName: connectorIconName, microphoneIconName: microphoneIconName, onPrimaryButtonClick: props.onContinueAnywayClick })));
+    return (React.createElement(SitePermissionsContainer, Object.assign({}, props, { strings: strings, cameraIconName: cameraIconName, connectorIconName: connectorIconName, microphoneIconName: microphoneIconName, onPrimaryButtonClick: props.onContinueAnywayClick })));
     return React.createElement(React.Fragment, null);
 };
 /**
@@ -39,20 +41,22 @@ export const CameraAndMicrophoneDomainPermissions = (props) => {
  *
  * @beta
  */
-export const MicrophoneDomainPermissions = (props) => {
+export const MicrophoneSitePermissions = (props) => {
     var _a;
     /* @conditional-compile-remove(call-readiness) */
     const locale = useLocale().strings;
     /* @conditional-compile-remove(call-readiness) */
     const strings = useShallowMerge(props.type === 'denied'
-        ? locale.MicrophoneDomainPermissionsDenied
+        ? props.browserHint === 'safari'
+            ? locale.MicrophoneSitePermissionsDeniedSafari
+            : locale.MicrophoneSitePermissionsDenied
         : props.type === 'request'
-            ? locale.MicrophoneDomainPermissionsRequest
-            : locale.MicrophoneDomainPermissionsCheck, props.strings);
+            ? locale.MicrophoneSitePermissionsRequest
+            : locale.MicrophoneSitePermissionsCheck, props.strings);
     /* @conditional-compile-remove(call-readiness) */
-    const iconName = ((_a = props.microphoneIconName) !== null && _a !== void 0 ? _a : props.type === 'denied') ? 'DomainPermissionMicDenied' : 'DomainPermissionMic';
+    const iconName = ((_a = props.microphoneIconName) !== null && _a !== void 0 ? _a : props.type === 'denied') ? 'SitePermissionMicDenied' : 'SitePermissionMic';
     /* @conditional-compile-remove(call-readiness) */
-    return (React.createElement(DomainPermissionsContainer, Object.assign({}, props, { strings: strings, cameraIconName: iconName, onPrimaryButtonClick: props.onContinueAnywayClick })));
+    return (React.createElement(SitePermissionsContainer, Object.assign({}, props, { strings: strings, cameraIconName: iconName, onPrimaryButtonClick: props.onContinueAnywayClick })));
     return React.createElement(React.Fragment, null);
 };
 /**
@@ -61,20 +65,22 @@ export const MicrophoneDomainPermissions = (props) => {
  *
  * @beta
  */
-export const CameraDomainPermissions = (props) => {
+export const CameraSitePermissions = (props) => {
     var _a;
     /* @conditional-compile-remove(call-readiness) */
     const locale = useLocale().strings;
     /* @conditional-compile-remove(call-readiness) */
     const strings = useShallowMerge(props.type === 'denied'
-        ? locale.CameraDomainPermissionsDenied
+        ? props.browserHint === 'safari'
+            ? locale.CameraSitePermissionsDeniedSafari
+            : locale.CameraSitePermissionsDenied
         : props.type === 'request'
-            ? locale.CameraDomainPermissionsRequest
-            : locale.CameraDomainPermissionsCheck, props.strings);
+            ? locale.CameraSitePermissionsRequest
+            : locale.CameraSitePermissionsCheck, props.strings);
     /* @conditional-compile-remove(call-readiness) */
-    const iconName = ((_a = props.cameraIconName) !== null && _a !== void 0 ? _a : props.type === 'denied') ? 'DomainPermissionCameraDenied' : 'DomainPermissionCamera';
+    const iconName = ((_a = props.cameraIconName) !== null && _a !== void 0 ? _a : props.type === 'denied') ? 'SitePermissionCameraDenied' : 'SitePermissionCamera';
     /* @conditional-compile-remove(call-readiness) */
-    return (React.createElement(DomainPermissionsContainer, Object.assign({}, props, { strings: strings, microphoneIconName: iconName, onPrimaryButtonClick: props.onContinueAnywayClick })));
+    return (React.createElement(SitePermissionsContainer, Object.assign({}, props, { strings: strings, microphoneIconName: iconName, onPrimaryButtonClick: props.onContinueAnywayClick })));
     return React.createElement(React.Fragment, null);
 };
-//# sourceMappingURL=DomainPermissions.js.map
+//# sourceMappingURL=SitePermissions.js.map

package/dist/dist-esm/react-components/src/components/DevicePermissions/SitePermissions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SitePermissions.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/DevicePermissions/SitePermissions.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React from 'react';\n/* @conditional-compile-remove(call-readiness) */\nimport { useLocale } from '../../localization';\nimport { SitePermissionsStrings, SitePermissionsStyles } from './SitePermissionsScaffolding';\n/* @conditional-compile-remove(call-readiness) */\nimport { SitePermissionsContainer } from './SitePermissionsScaffolding';\n/* @conditional-compile-remove(call-readiness) */\nimport { useShallowMerge } from '../utils/merge';\n\n/**\n * @beta\n * Props for SitePermissions components.\n */\nexport interface CommonSitePermissionsProps {\n  /**\n   * Name of application calling experience is in.\n   */\n  appName: string;\n  /**\n   * Type of the Site Permissions component.\n   */\n  type: 'request' | 'denied' | 'check';\n  /**\n   * Type of the browser used, the Site permission component will show different guidance text based on the browser type\n   */\n  browserHint?: 'safari' | 'unset';\n  /**\n   * Action to be taken by the more help link. Possible to send to external page or show other modal.\n   * If this is not provided the button will not be shown.\n   */\n  onTroubleshootingClick?: () => void;\n  /**\n   * Action that is taken when the user clicks the continue anyway button.\n   * If this is not provided the button will not be shown.\n   */\n  onContinueAnywayClick?: () => void;\n  /**\n   * Styles for SitePermissions component.\n   */\n  styles?: SitePermissionsStyles;\n}\n\n/**\n * @beta\n * Strings for CameraAndMicrophoneSitePermissions component.\n */\nexport type CameraAndMicrophoneSitePermissionsStrings = SitePermissionsStrings;\n\n/**\n * @beta\n * Props for CameraAndMicrophoneSitePermissions component.\n */\nexport interface CameraAndMicrophoneSitePermissionsProps extends CommonSitePermissionsProps {\n  /** Icon name for the camera icon */\n  cameraIconName?: string;\n  /** Icon name for the microphone icon */\n  microphoneIconName?: string;\n  /** Icon name for the central icon between the camera and microphone icons */\n  connectorIconName?: string;\n  /** Strings for use with the {@link CameraAndMicrophoneSitePermissions} */\n  strings?: CameraAndMicrophoneSitePermissionsStrings;\n}\n\n/**\n * @beta\n *\n * Component to allow Contoso to help their end user with their devices should their permissions be blocked\n * by their browsers settings.\n */\nexport const CameraAndMicrophoneSitePermissions = (props: CameraAndMicrophoneSitePermissionsProps): JSX.Element => {\n  /* @conditional-compile-remove(call-readiness) */\n  const locale = useLocale().strings;\n\n  /* @conditional-compile-remove(call-readiness) */\n  const strings = useShallowMerge(\n    props.type === 'denied'\n      ? props.browserHint === 'safari'\n        ? locale.CameraAndMicrophoneSitePermissionsDeniedSafari\n        : locale.CameraAndMicrophoneSitePermissionsDenied\n      : props.type === 'request'\n      ? locale.CameraAndMicrophoneSitePermissionsRequest\n      : locale.CameraAndMicrophoneSitePermissionsCheck,\n    props.strings\n  );\n\n  /* @conditional-compile-remove(call-readiness) */\n  const cameraIconName =\n    props.microphoneIconName ?? props.type === 'denied' ? 'SitePermissionCameraDenied' : 'SitePermissionCamera';\n  /* @conditional-compile-remove(call-readiness) */\n  const microphoneIconName =\n    props.microphoneIconName ?? props.type === 'denied' ? 'SitePermissionMicDenied' : 'SitePermissionMic';\n  /* @conditional-compile-remove(call-readiness) */\n  const connectorIconName = props.microphoneIconName ?? 'SitePermissionsSparkle';\n\n  /* @conditional-compile-remove(call-readiness) */\n  return (\n    <SitePermissionsContainer\n      {...props}\n      strings={strings}\n      cameraIconName={cameraIconName}\n      connectorIconName={connectorIconName}\n      microphoneIconName={microphoneIconName}\n      onPrimaryButtonClick={props.onContinueAnywayClick}\n    />\n  );\n  return <></>;\n};\n\n/**\n * @beta\n * Strings for MicrophoneSitePermissions component.\n */\nexport type MicrophoneSitePermissionsStrings = SitePermissionsStrings;\n\n/**\n * @beta\n * Props for MicrophoneSitePermissions component.\n */\nexport interface MicrophoneSitePermissionsProps extends CommonSitePermissionsProps {\n  /** Icon name for the microphone icon */\n  microphoneIconName?: string;\n  /** Strings for use with the {@link MicrophoneSitePermissions} */\n  strings?: MicrophoneSitePermissionsStrings;\n}\n\n/**\n * Component to allow Contoso to help their end user with their devices should their permissions be blocked\n * by their browsers settings.\n *\n * @beta\n */\nexport const MicrophoneSitePermissions = (props: MicrophoneSitePermissionsProps): JSX.Element => {\n  /* @conditional-compile-remove(call-readiness) */\n  const locale = useLocale().strings;\n\n  /* @conditional-compile-remove(call-readiness) */\n  const strings = useShallowMerge(\n    props.type === 'denied'\n      ? props.browserHint === 'safari'\n        ? locale.MicrophoneSitePermissionsDeniedSafari\n        : locale.MicrophoneSitePermissionsDenied\n      : props.type === 'request'\n      ? locale.MicrophoneSitePermissionsRequest\n      : locale.MicrophoneSitePermissionsCheck,\n    props.strings\n  );\n\n  /* @conditional-compile-remove(call-readiness) */\n  const iconName =\n    props.microphoneIconName ?? props.type === 'denied' ? 'SitePermissionMicDenied' : 'SitePermissionMic';\n\n  /* @conditional-compile-remove(call-readiness) */\n  return (\n    <SitePermissionsContainer\n      {...props}\n      strings={strings}\n      cameraIconName={iconName}\n      onPrimaryButtonClick={props.onContinueAnywayClick}\n    />\n  );\n  return <></>;\n};\n\n/**\n * @beta\n * Strings for CameraSitePermissions component.\n */\nexport type CameraSitePermissionsStrings = SitePermissionsStrings;\n\n/**\n * @beta\n * Props for CameraSitePermissions component.\n */\nexport interface CameraSitePermissionsProps extends CommonSitePermissionsProps {\n  /** Icon name for the camera icon */\n  cameraIconName?: string;\n  /** Strings for use with the {@link CameraSitePermissions} */\n  strings?: CameraSitePermissionsStrings;\n}\n\n/**\n * Component to allow Contoso to help their end user with their devices should their permissions be blocked\n * by their browsers settings.\n *\n * @beta\n */\nexport const CameraSitePermissions = (props: CameraSitePermissionsProps): JSX.Element => {\n  /* @conditional-compile-remove(call-readiness) */\n  const locale = useLocale().strings;\n\n  /* @conditional-compile-remove(call-readiness) */\n  const strings = useShallowMerge(\n    props.type === 'denied'\n      ? props.browserHint === 'safari'\n        ? locale.CameraSitePermissionsDeniedSafari\n        : locale.CameraSitePermissionsDenied\n      : props.type === 'request'\n      ? locale.CameraSitePermissionsRequest\n      : locale.CameraSitePermissionsCheck,\n    props.strings\n  );\n\n  /* @conditional-compile-remove(call-readiness) */\n  const iconName =\n    props.cameraIconName ?? props.type === 'denied' ? 'SitePermissionCameraDenied' : 'SitePermissionCamera';\n\n  /* @conditional-compile-remove(call-readiness) */\n  return (\n    <SitePermissionsContainer\n      {...props}\n      strings={strings}\n      microphoneIconName={iconName}\n      onPrimaryButtonClick={props.onContinueAnywayClick}\n    />\n  );\n  return <></>;\n};\n"]}

package/dist/dist-esm/react-components/src/components/DevicePermissions/{DomainPermissionsScaffolding.d.ts → SitePermissionsScaffolding.d.ts}

@@ -3,9 +3,9 @@ import { ILinkStyles, IButtonStyles } from '@fluentui/react';
 import { BaseCustomStyles } from '../../types';
 /**
  * @private
- * Props for DomainPermissions component.
+ * Props for SitePermissions component.
  */
-export interface DomainPermissionsContainerProps {
+export interface SitePermissionsContainerProps {
     /**
      * Name of application calling experience is in.
      */
@@ -36,19 +36,19 @@ export interface DomainPermissionsContainerProps {
      */
     onPrimaryButtonClick?: () => void;
     /**
-     * Localization strings for DomainPermissions component.
+     * Localization strings for SitePermissions component.
      */
-    strings?: DomainPermissionsStrings;
+    strings?: SitePermissionsStrings;
     /**
-     * Styles for DomainPermissions component.
+     * Styles for SitePermissions component.
      */
-    styles?: DomainPermissionsStyles;
+    styles?: SitePermissionsStyles;
 }
 /**
  * @beta
- * Strings for DomainPermissions component
+ * Strings for SitePermissions component
  */
-export declare type DomainPermissionsStrings = {
+export declare type SitePermissionsStrings = {
     /**
      * Main text string.
      */
@@ -71,16 +71,16 @@ export declare type DomainPermissionsStrings = {
     ariaLabel?: string;
 };
 /**
- * Fluent styles for {@link DomainPermissionsContainer}.
+ * Fluent styles for {@link SitePermissionsContainer}.
  *
  * @beta
  */
-export interface DomainPermissionsStyles extends BaseCustomStyles {
+export interface SitePermissionsStyles extends BaseCustomStyles {
     /** Styles for the primary button. */
     primaryButton?: IButtonStyles;
     /** Styles for the help troubleshooting link text. */
     troubleshootingLink?: ILinkStyles;
 }
 /** @private */
-export declare const DomainPermissionsContainer: (props: DomainPermissionsContainerProps) => JSX.Element;
-//# sourceMappingURL=DomainPermissionsScaffolding.d.ts.map
+export declare const SitePermissionsContainer: (props: SitePermissionsContainerProps) => JSX.Element;
+//# sourceMappingURL=SitePermissionsScaffolding.d.ts.map

package/dist/dist-esm/react-components/src/components/DevicePermissions/{DomainPermissionsScaffolding.js → SitePermissionsScaffolding.js}

@@ -3,18 +3,18 @@
 import React from 'react';
 import { Stack, Text, Link, Icon, useTheme, PrimaryButton, mergeStyleSets } from '@fluentui/react';
 import { _formatString } from "../../../../acs-ui-common/src";
-import { iconBannerContainerStyles, iconContainerStyles, iconPrimaryStyles, linkTextStyles, primaryButtonStyles, primaryTextStyles, secondaryTextStyles, sparkleIconBackdropStyles, textContainerStyles } from '../styles/DomainPermissions.styles';
+import { iconBannerContainerStyles, iconContainerStyles, iconPrimaryStyles, linkTextStyles, primaryButtonStyles, primaryTextStyles, secondaryTextStyles, sparkleIconBackdropStyles, textContainerStyles } from '../styles/SitePermissions.styles';
 import { isValidString } from '../utils';
 /**
  * spacing for the icons in the banner.
  */
 const tokens = { childrenGap: '2rem' };
 /** @private */
-export const DomainPermissionsContainer = (props) => {
+export const SitePermissionsContainer = (props) => {
     var _a, _b;
     const { appName, onTroubleshootingClick, onPrimaryButtonClick, strings } = props;
     const theme = useTheme();
-    return (React.createElement(Stack, { style: { padding: '2rem', maxWidth: '25.375rem' }, "aria-label": strings === null || strings === void 0 ? void 0 : strings.ariaLabel },
+    return (React.createElement(Stack, { style: { padding: '2rem', maxWidth: '25.375rem', alignSelf: 'center' }, "aria-label": strings === null || strings === void 0 ? void 0 : strings.ariaLabel },
         React.createElement(Stack, { styles: iconBannerContainerStyles, horizontal: true, horizontalAlign: 'center', verticalFill: true, tokens: tokens },
             props.cameraIconName && (React.createElement(Stack, null,
                 React.createElement(Icon, { styles: iconPrimaryStyles, iconName: props.cameraIconName }))),
@@ -28,4 +28,4 @@ export const DomainPermissionsContainer = (props) => {
             onPrimaryButtonClick && isValidString(strings === null || strings === void 0 ? void 0 : strings.primaryButtonText) && (React.createElement(PrimaryButton, { styles: mergeStyleSets(primaryButtonStyles, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.primaryButton), text: strings === null || strings === void 0 ? void 0 : strings.primaryButtonText, onClick: onPrimaryButtonClick })),
             onTroubleshootingClick && isValidString(strings === null || strings === void 0 ? void 0 : strings.linkText) && (React.createElement(Link, { styles: mergeStyleSets(linkTextStyles, (_b = props.styles) === null || _b === void 0 ? void 0 : _b.troubleshootingLink), onClick: onTroubleshootingClick }, strings === null || strings === void 0 ? void 0 : strings.linkText)))));
 };
-//# sourceMappingURL=DomainPermissionsScaffolding.js.map
+//# sourceMappingURL=SitePermissionsScaffolding.js.map

package/dist/dist-esm/react-components/src/components/DevicePermissions/SitePermissionsScaffolding.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SitePermissionsScaffolding.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/DevicePermissions/SitePermissionsScaffolding.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React from 'react';\nimport {\n  Stack,\n  Text,\n  Link,\n  Icon,\n  useTheme,\n  PrimaryButton,\n  ILinkStyles,\n  IButtonStyles,\n  mergeStyleSets\n} from '@fluentui/react';\nimport { _formatString, _pxToRem } from '@internal/acs-ui-common';\nimport {\n  iconBannerContainerStyles,\n  iconContainerStyles,\n  iconPrimaryStyles,\n  linkTextStyles,\n  primaryButtonStyles,\n  primaryTextStyles,\n  secondaryTextStyles,\n  sparkleIconBackdropStyles,\n  textContainerStyles\n} from '../styles/SitePermissions.styles';\nimport { isValidString } from '../utils';\nimport { BaseCustomStyles } from '../../types';\n\n/**\n * @private\n * Props for SitePermissions component.\n */\nexport interface SitePermissionsContainerProps {\n  /**\n   * Name of application calling experience is in.\n   */\n  appName?: string;\n  /**\n   * Name of icon to be used for the camera icon.\n   * If this is not provided the icon will not be shown.\n   */\n  cameraIconName?: string;\n  /**\n   * Name of icon to be used for the sparkle icon.\n   * If this is not provided the icon will not be shown.\n   */\n  connectorIconName?: string;\n  /**\n   * Name of icon to be used for the mic icon.\n   * If this is not provided the icon will not be shown.\n   */\n  microphoneIconName?: string;\n  /**\n   * Action to be taken by the more help link. Possible to send to external page or show other modal.\n   * If this is not provided the button will not be shown.\n   */\n  onTroubleshootingClick?: () => void;\n  /**\n   * Action that is taken when the user clicks an optional primary button.\n   * If this is not provided the button will not be shown.\n   */\n  onPrimaryButtonClick?: () => void;\n  /**\n   * Localization strings for SitePermissions component.\n   */\n  strings?: SitePermissionsStrings;\n  /**\n   * Styles for SitePermissions component.\n   */\n  styles?: SitePermissionsStyles;\n}\n\n/**\n * @beta\n * Strings for SitePermissions component\n */\nexport type SitePermissionsStrings = {\n  /**\n   * Main text string.\n   */\n  primaryText?: string;\n  /**\n   * Subtext string.\n   */\n  secondaryText?: string;\n  /**\n   * More help link string.\n   */\n  linkText?: string;\n  /**\n   * Primary button text string.\n   */\n  primaryButtonText?: string;\n  /**\n   * Aria label describing the content of the container\n   */\n  ariaLabel?: string;\n};\n\n/**\n * Fluent styles for {@link SitePermissionsContainer}.\n *\n * @beta\n */\nexport interface SitePermissionsStyles extends BaseCustomStyles {\n  /** Styles for the primary button. */\n  primaryButton?: IButtonStyles;\n  /** Styles for the help troubleshooting link text. */\n  troubleshootingLink?: ILinkStyles;\n}\n\n/**\n * spacing for the icons in the banner.\n */\nconst tokens = { childrenGap: '2rem' };\n\n/** @private */\nexport const SitePermissionsContainer = (props: SitePermissionsContainerProps): JSX.Element => {\n  const { appName, onTroubleshootingClick, onPrimaryButtonClick, strings } = props;\n  const theme = useTheme();\n\n  return (\n    <Stack style={{ padding: '2rem', maxWidth: '25.375rem', alignSelf: 'center' }} aria-label={strings?.ariaLabel}>\n      <Stack styles={iconBannerContainerStyles} horizontal horizontalAlign={'center'} verticalFill tokens={tokens}>\n        {props.cameraIconName && (\n          <Stack>\n            <Icon styles={iconPrimaryStyles} iconName={props.cameraIconName}></Icon>\n          </Stack>\n        )}\n        {props.connectorIconName && (\n          <Stack styles={iconContainerStyles} horizontal>\n            <Icon styles={sparkleIconBackdropStyles(theme)} iconName={props.connectorIconName}></Icon>\n          </Stack>\n        )}\n        {props.microphoneIconName && (\n          <Stack>\n            <Icon styles={iconPrimaryStyles} iconName={props.microphoneIconName}></Icon>\n          </Stack>\n        )}\n      </Stack>\n      <Stack styles={textContainerStyles}>\n        {strings && isValidString(strings?.primaryText) && (\n          <Text styles={primaryTextStyles}>\n            {appName ? _formatString(strings.primaryText, { appName: appName }) : strings.primaryText}\n          </Text>\n        )}\n        {strings && isValidString(strings?.secondaryText) && (\n          <Text styles={secondaryTextStyles}>{strings?.secondaryText}</Text>\n        )}\n\n        {onPrimaryButtonClick && isValidString(strings?.primaryButtonText) && (\n          <PrimaryButton\n            styles={mergeStyleSets(primaryButtonStyles, props.styles?.primaryButton)}\n            text={strings?.primaryButtonText}\n            onClick={onPrimaryButtonClick}\n          />\n        )}\n        {onTroubleshootingClick && isValidString(strings?.linkText) && (\n          <Link\n            styles={mergeStyleSets(linkTextStyles, props.styles?.troubleshootingLink)}\n            onClick={onTroubleshootingClick}\n          >\n            {strings?.linkText}\n          </Link>\n        )}\n      </Stack>\n    </Stack>\n  );\n};\n\"../../../../acs-ui-common/src\""]}

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

@@ -116,6 +116,14 @@ const DialpadContainer = (props) => {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             onChange: (e) => {
                 setText(e.target.value);
+            }, 
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            onClick: (e) => {
+                const input = e.target;
+                const end = input.value.length;
+                // Move focus to end of input field
+                input.setSelectionRange(end, end);
+                input.focus();
             }, placeholder: props.strings.placeholderText, "data-test-id": "dialpad-input", onRenderSuffix: () => {
                 var _a;
                 return (React.createElement(React.Fragment, null, showDeleteButton && plainTextValue.length !== 0 && (React.createElement(IconButton, { ariaLabel: props.strings.deleteButtonAriaLabel, onClick: deleteNumbers, styles: concatStyleSets(iconButtonStyles(theme), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.deleteIcon), iconProps: { iconName: 'DialpadBackspace' } }))));

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

@@ -1 +1 @@
-{"version":3,"file":"Dialpad.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Dialpad/Dialpad.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useEffect } from 'react';\nimport { IStyle, IButtonStyles, ITextFieldStyles } from '@fluentui/react';\n\nimport { IconButton } from '@fluentui/react';\nimport {\n  concatStyleSets,\n  DefaultButton,\n  FocusZone,\n  mergeStyles,\n  Stack,\n  Text,\n  TextField,\n  useTheme\n} from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useState } from 'react';\n/* @conditional-compile-remove(dialpad) */\nimport { useLocale } from '../../localization';\nimport {\n  buttonStyles,\n  containerStyles,\n  iconButtonStyles,\n  digitStyles,\n  letterStyles,\n  textFieldStyles\n} from '../styles/Dialpad.styles';\nimport { formatPhoneNumber } from '../utils/formatPhoneNumber';\nimport useLongPress from '../utils/useLongPress';\n\n/**\n * Strings of {@link Dialpad} that can be overridden.\n *\n * @beta\n */\nexport interface DialpadStrings {\n  placeholderText: string;\n  deleteButtonAriaLabel?: string;\n}\n\n/**\n * Styles for {@link Dialpad} component.\n *\n * @beta\n */\nexport interface DialpadStyles {\n  root?: IStyle;\n  button?: IButtonStyles;\n  textField?: Partial<ITextFieldStyles>;\n  digit?: IStyle;\n  letter?: IStyle;\n  deleteIcon?: IButtonStyles;\n}\n\n/**\n * DTMF tone for PSTN calls.\n *\n * @beta\n */\nexport type DtmfTone =\n  | 'A'\n  | 'B'\n  | 'C'\n  | 'D'\n  | 'Flash'\n  | 'Num0'\n  | 'Num1'\n  | 'Num2'\n  | 'Num3'\n  | 'Num4'\n  | 'Num5'\n  | 'Num6'\n  | 'Num7'\n  | 'Num8'\n  | 'Num9'\n  | 'Pound'\n  | 'Star';\n\n/**\n * Props for {@link Dialpad} component.\n *\n * @beta\n */\nexport interface DialpadProps {\n  strings?: DialpadStrings;\n  /**  function to send dtmf tones on button click */\n  onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;\n  /**  Callback for dialpad button behavior*/\n  onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;\n  /** set dialpad textfield content */\n  textFieldValue?: string;\n  /**  on change function for text field, provides an unformatted plain text*/\n  onChange?: (input: string) => void;\n  /**  boolean input to determine when to show/hide delete button, default true */\n  showDeleteButton?: boolean;\n  /**  boolean input to determine if dialpad is in mobile view, default false */\n  isMobile?: boolean;\n  styles?: DialpadStyles;\n}\n\ntype DialpadButtonContent = {\n  /** Number displayed on each dialpad button */\n  digit: string;\n  /** Letters displayed on each dialpad button */\n  letter?: string;\n};\n\nconst dialPadButtonsDefault: DialpadButtonContent[][] = [\n  [{ digit: '1' }, { digit: '2', letter: 'ABC' }, { digit: '3', letter: 'DEF' }],\n  [\n    { digit: '4', letter: 'GHI' },\n    { digit: '5', letter: 'JKL' },\n    { digit: '6', letter: 'MNO' }\n  ],\n  [\n    { digit: '7', letter: 'PQRS' },\n    { digit: '8', letter: 'TUV' },\n    { digit: '9', letter: 'WXYZ' }\n  ],\n  [{ digit: '*' }, { digit: '0', letter: '+' }, { digit: '#' }]\n];\n\nconst DtmfTones: DtmfTone[] = [\n  'Num1',\n  'Num2',\n  'Num3',\n  'Num4',\n  'Num5',\n  'Num6',\n  'Num7',\n  'Num8',\n  'Num9',\n  'Star',\n  'Num0',\n  'Pound'\n];\n\nconst DialpadButton = (props: {\n  digit: string;\n  letter?: string;\n  styles?: DialpadStyles;\n  index: number;\n  onClick: (input: string, index: number) => void;\n  onLongPress: (input: string, index: number) => void;\n  isMobile?: boolean;\n}): JSX.Element => {\n  const theme = useTheme();\n\n  const { digit, index, onClick, onLongPress, isMobile = false } = props;\n\n  const useLongPressProps = React.useMemo(\n    () => ({\n      onClick: async () => {\n        onClick(digit, index);\n      },\n      onLongPress: async () => {\n        onLongPress(digit, index);\n      },\n      touchEventsOnly: isMobile\n    }),\n    [digit, index, isMobile, onClick, onLongPress]\n  );\n\n  const longPressHandlers = useLongPress(useLongPressProps);\n\n  return (\n    <DefaultButton\n      data-test-id={`dialpad-button-${props.index}`}\n      styles={concatStyleSets(buttonStyles(theme), props.styles?.button)}\n      {...longPressHandlers}\n    >\n      <Stack>\n        <Text className={mergeStyles(digitStyles(theme), props.styles?.digit)}>{props.digit}</Text>\n\n        <Text className={mergeStyles(letterStyles(theme), props.styles?.letter)}>{props.letter ?? ' '}</Text>\n      </Stack>\n    </DefaultButton>\n  );\n};\n\nconst DialpadContainer = (props: {\n  strings: DialpadStrings;\n  onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;\n  /**  Callback for dialpad button behavior */\n  onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;\n  /** Pass in custom content to dialpad textfield */\n  textFieldValue?: string;\n  /**  on change function for text field, provides an unformatted plain text */\n  onChange?: (input: string) => void;\n  /**  boolean input to determine when to show/hide delete button, default true */\n  showDeleteButton?: boolean;\n  /**  boolean input to determine if dialpad is in mobile view, default false */\n  isMobile?: boolean;\n  styles?: DialpadStyles;\n}): JSX.Element => {\n  const theme = useTheme();\n\n  const {\n    onSendDtmfTone,\n    onClickDialpadButton,\n    textFieldValue,\n    onChange,\n    showDeleteButton = true,\n    isMobile = false\n  } = props;\n\n  const [plainTextValue, setPlainTextValue] = useState(textFieldValue ?? '');\n\n  useEffect(() => {\n    if (onChange) {\n      onChange(plainTextValue);\n    }\n  }, [plainTextValue, onChange]);\n\n  useEffect(() => {\n    setText(textFieldValue ?? '');\n  }, [textFieldValue]);\n\n  const onClickDialpad = (input: string, index: number): void => {\n    setText(plainTextValue + input);\n    if (onSendDtmfTone) {\n      onSendDtmfTone(DtmfTones[index]);\n    }\n    if (onClickDialpadButton) {\n      onClickDialpadButton(input, index);\n    }\n  };\n\n  const onLongPressDialpad = (input: string, index: number): void => {\n    if (input === '0' && index === 10) {\n      setText(plainTextValue + '+');\n    } else {\n      setText(plainTextValue + input);\n    }\n    if (onSendDtmfTone) {\n      onSendDtmfTone(DtmfTones[index]);\n    }\n    if (onClickDialpadButton) {\n      onClickDialpadButton(input, index);\n    }\n  };\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const setText = (input: string): void => {\n    // remove non-valid characters from input: letters,special characters excluding +, *,#\n    const plainInput = sanitizeInput(input);\n    setPlainTextValue(plainInput);\n  };\n\n  const deleteNumbers = (): void => {\n    const modifiedInput = plainTextValue.substring(0, plainTextValue.length - 1);\n    setText(modifiedInput);\n  };\n\n  return (\n    <div\n      className={mergeStyles(containerStyles(theme), props.styles?.root)}\n      data-test-id=\"dialpadContainer\"\n      data-ui-id=\"dialpadContainer\"\n    >\n      <TextField\n        styles={concatStyleSets(textFieldStyles(theme), props.styles?.textField)}\n        value={textFieldValue ? textFieldValue : formatPhoneNumber(plainTextValue)}\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        onChange={(e: any) => {\n          setText(e.target.value);\n        }}\n        placeholder={props.strings.placeholderText}\n        data-test-id=\"dialpad-input\"\n        onRenderSuffix={(): JSX.Element => (\n          <>\n            {showDeleteButton && plainTextValue.length !== 0 && (\n              <IconButton\n                ariaLabel={props.strings.deleteButtonAriaLabel}\n                onClick={deleteNumbers}\n                styles={concatStyleSets(iconButtonStyles(theme), props.styles?.deleteIcon)}\n                iconProps={{ iconName: 'DialpadBackspace' }}\n              />\n            )}\n          </>\n        )}\n      />\n      <FocusZone>\n        {dialPadButtonsDefault.map((rows, rowIndex) => {\n          return (\n            <Stack horizontal key={`row_${rowIndex}`} horizontalAlign=\"stretch\">\n              {rows.map((button, columnIndex) => (\n                <DialpadButton\n                  key={`button_${columnIndex}`}\n                  /* row index = 0\n                  columnIndex: (0,1,2) => (0,1,2)\n                  row index = 1\n                  columnIndex: (0,1,2)=> (3,4,5)\n                  row index = 2\n                  columnIndex: (0,1,2)=> (6,7,8)\n                  row index = 3\n                  columnIndex: (0,1,2)=> (9,10,11)\n                  columnIndex + rowIndex*rows.length calculates the corresponding index for each button\n                  dialpad index:\n                  0 1 2\n                  3 4 5\n                  6 7 8\n                  9 10 11\n                  then use this index to locate the corresponding dtmf tones\n                  DtmfTones[index]\n                  */\n                  index={columnIndex + rowIndex * rows.length}\n                  digit={button.digit}\n                  letter={button.letter}\n                  styles={props.styles}\n                  onClick={onClickDialpad}\n                  onLongPress={onLongPressDialpad}\n                  isMobile={isMobile}\n                />\n              ))}\n            </Stack>\n          );\n        })}\n      </FocusZone>\n    </div>\n  );\n};\n\n/**\n * A component to allow users to enter phone number through clicking on dialpad/using keyboard\n * It will return empty component for stable builds\n *\n * @beta\n */\nexport const Dialpad = (props: DialpadProps): JSX.Element => {\n  /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */\n  const localeStrings = useLocale().strings.dialpad;\n\n  const dialpadLocaleStringsTrampoline = (): DialpadStrings => {\n    /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */\n    return localeStrings;\n    // Even though the component strings type doesn't have `DialpadStrings` in stable build,\n    // the string values exist. So unsafe cast for stable build.\n    return '' as unknown as DialpadStrings;\n  };\n  const strings = { ...dialpadLocaleStringsTrampoline(), ...props.strings };\n  return <DialpadContainer strings={strings} {...props} />;\n};\n\nconst sanitizeInput = (input: string): string => {\n  // remove non-valid characters from input: letters,special characters excluding +, *,#\n  return input.replace(/[^\\d*#+]/g, '');\n};\n\"../../../../acs-ui-common/src\""]}
+{"version":3,"file":"Dialpad.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Dialpad/Dialpad.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useEffect } from 'react';\nimport { IStyle, IButtonStyles, ITextFieldStyles } from '@fluentui/react';\n\nimport { IconButton } from '@fluentui/react';\nimport {\n  concatStyleSets,\n  DefaultButton,\n  FocusZone,\n  mergeStyles,\n  Stack,\n  Text,\n  TextField,\n  useTheme\n} from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useState } from 'react';\n/* @conditional-compile-remove(dialpad) */\nimport { useLocale } from '../../localization';\nimport {\n  buttonStyles,\n  containerStyles,\n  iconButtonStyles,\n  digitStyles,\n  letterStyles,\n  textFieldStyles\n} from '../styles/Dialpad.styles';\nimport { formatPhoneNumber } from '../utils/formatPhoneNumber';\nimport useLongPress from '../utils/useLongPress';\n\n/**\n * Strings of {@link Dialpad} that can be overridden.\n *\n * @beta\n */\nexport interface DialpadStrings {\n  placeholderText: string;\n  deleteButtonAriaLabel?: string;\n}\n\n/**\n * Styles for {@link Dialpad} component.\n *\n * @beta\n */\nexport interface DialpadStyles {\n  root?: IStyle;\n  button?: IButtonStyles;\n  textField?: Partial<ITextFieldStyles>;\n  digit?: IStyle;\n  letter?: IStyle;\n  deleteIcon?: IButtonStyles;\n}\n\n/**\n * DTMF tone for PSTN calls.\n *\n * @beta\n */\nexport type DtmfTone =\n  | 'A'\n  | 'B'\n  | 'C'\n  | 'D'\n  | 'Flash'\n  | 'Num0'\n  | 'Num1'\n  | 'Num2'\n  | 'Num3'\n  | 'Num4'\n  | 'Num5'\n  | 'Num6'\n  | 'Num7'\n  | 'Num8'\n  | 'Num9'\n  | 'Pound'\n  | 'Star';\n\n/**\n * Props for {@link Dialpad} component.\n *\n * @beta\n */\nexport interface DialpadProps {\n  strings?: DialpadStrings;\n  /**  function to send dtmf tones on button click */\n  onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;\n  /**  Callback for dialpad button behavior*/\n  onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;\n  /** set dialpad textfield content */\n  textFieldValue?: string;\n  /**  on change function for text field, provides an unformatted plain text*/\n  onChange?: (input: string) => void;\n  /**  boolean input to determine when to show/hide delete button, default true */\n  showDeleteButton?: boolean;\n  /**  boolean input to determine if dialpad is in mobile view, default false */\n  isMobile?: boolean;\n  styles?: DialpadStyles;\n}\n\ntype DialpadButtonContent = {\n  /** Number displayed on each dialpad button */\n  digit: string;\n  /** Letters displayed on each dialpad button */\n  letter?: string;\n};\n\nconst dialPadButtonsDefault: DialpadButtonContent[][] = [\n  [{ digit: '1' }, { digit: '2', letter: 'ABC' }, { digit: '3', letter: 'DEF' }],\n  [\n    { digit: '4', letter: 'GHI' },\n    { digit: '5', letter: 'JKL' },\n    { digit: '6', letter: 'MNO' }\n  ],\n  [\n    { digit: '7', letter: 'PQRS' },\n    { digit: '8', letter: 'TUV' },\n    { digit: '9', letter: 'WXYZ' }\n  ],\n  [{ digit: '*' }, { digit: '0', letter: '+' }, { digit: '#' }]\n];\n\nconst DtmfTones: DtmfTone[] = [\n  'Num1',\n  'Num2',\n  'Num3',\n  'Num4',\n  'Num5',\n  'Num6',\n  'Num7',\n  'Num8',\n  'Num9',\n  'Star',\n  'Num0',\n  'Pound'\n];\n\nconst DialpadButton = (props: {\n  digit: string;\n  letter?: string;\n  styles?: DialpadStyles;\n  index: number;\n  onClick: (input: string, index: number) => void;\n  onLongPress: (input: string, index: number) => void;\n  isMobile?: boolean;\n}): JSX.Element => {\n  const theme = useTheme();\n\n  const { digit, index, onClick, onLongPress, isMobile = false } = props;\n\n  const useLongPressProps = React.useMemo(\n    () => ({\n      onClick: async () => {\n        onClick(digit, index);\n      },\n      onLongPress: async () => {\n        onLongPress(digit, index);\n      },\n      touchEventsOnly: isMobile\n    }),\n    [digit, index, isMobile, onClick, onLongPress]\n  );\n\n  const longPressHandlers = useLongPress(useLongPressProps);\n\n  return (\n    <DefaultButton\n      data-test-id={`dialpad-button-${props.index}`}\n      styles={concatStyleSets(buttonStyles(theme), props.styles?.button)}\n      {...longPressHandlers}\n    >\n      <Stack>\n        <Text className={mergeStyles(digitStyles(theme), props.styles?.digit)}>{props.digit}</Text>\n\n        <Text className={mergeStyles(letterStyles(theme), props.styles?.letter)}>{props.letter ?? ' '}</Text>\n      </Stack>\n    </DefaultButton>\n  );\n};\n\nconst DialpadContainer = (props: {\n  strings: DialpadStrings;\n  onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;\n  /**  Callback for dialpad button behavior */\n  onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;\n  /** Pass in custom content to dialpad textfield */\n  textFieldValue?: string;\n  /**  on change function for text field, provides an unformatted plain text */\n  onChange?: (input: string) => void;\n  /**  boolean input to determine when to show/hide delete button, default true */\n  showDeleteButton?: boolean;\n  /**  boolean input to determine if dialpad is in mobile view, default false */\n  isMobile?: boolean;\n  styles?: DialpadStyles;\n}): JSX.Element => {\n  const theme = useTheme();\n\n  const {\n    onSendDtmfTone,\n    onClickDialpadButton,\n    textFieldValue,\n    onChange,\n    showDeleteButton = true,\n    isMobile = false\n  } = props;\n\n  const [plainTextValue, setPlainTextValue] = useState(textFieldValue ?? '');\n\n  useEffect(() => {\n    if (onChange) {\n      onChange(plainTextValue);\n    }\n  }, [plainTextValue, onChange]);\n\n  useEffect(() => {\n    setText(textFieldValue ?? '');\n  }, [textFieldValue]);\n\n  const onClickDialpad = (input: string, index: number): void => {\n    setText(plainTextValue + input);\n    if (onSendDtmfTone) {\n      onSendDtmfTone(DtmfTones[index]);\n    }\n    if (onClickDialpadButton) {\n      onClickDialpadButton(input, index);\n    }\n  };\n\n  const onLongPressDialpad = (input: string, index: number): void => {\n    if (input === '0' && index === 10) {\n      setText(plainTextValue + '+');\n    } else {\n      setText(plainTextValue + input);\n    }\n    if (onSendDtmfTone) {\n      onSendDtmfTone(DtmfTones[index]);\n    }\n    if (onClickDialpadButton) {\n      onClickDialpadButton(input, index);\n    }\n  };\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const setText = (input: string): void => {\n    // remove non-valid characters from input: letters,special characters excluding +, *,#\n    const plainInput = sanitizeInput(input);\n    setPlainTextValue(plainInput);\n  };\n\n  const deleteNumbers = (): void => {\n    const modifiedInput = plainTextValue.substring(0, plainTextValue.length - 1);\n    setText(modifiedInput);\n  };\n\n  return (\n    <div\n      className={mergeStyles(containerStyles(theme), props.styles?.root)}\n      data-test-id=\"dialpadContainer\"\n      data-ui-id=\"dialpadContainer\"\n    >\n      <TextField\n        styles={concatStyleSets(textFieldStyles(theme), props.styles?.textField)}\n        value={textFieldValue ? textFieldValue : formatPhoneNumber(plainTextValue)}\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        onChange={(e: any) => {\n          setText(e.target.value);\n        }}\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        onClick={(e: any) => {\n          const input = e.target;\n          const end = input.value.length;\n\n          // Move focus to end of input field\n          input.setSelectionRange(end, end);\n          input.focus();\n        }}\n        placeholder={props.strings.placeholderText}\n        data-test-id=\"dialpad-input\"\n        onRenderSuffix={(): JSX.Element => (\n          <>\n            {showDeleteButton && plainTextValue.length !== 0 && (\n              <IconButton\n                ariaLabel={props.strings.deleteButtonAriaLabel}\n                onClick={deleteNumbers}\n                styles={concatStyleSets(iconButtonStyles(theme), props.styles?.deleteIcon)}\n                iconProps={{ iconName: 'DialpadBackspace' }}\n              />\n            )}\n          </>\n        )}\n      />\n      <FocusZone>\n        {dialPadButtonsDefault.map((rows, rowIndex) => {\n          return (\n            <Stack horizontal key={`row_${rowIndex}`} horizontalAlign=\"stretch\">\n              {rows.map((button, columnIndex) => (\n                <DialpadButton\n                  key={`button_${columnIndex}`}\n                  /* row index = 0\n                  columnIndex: (0,1,2) => (0,1,2)\n                  row index = 1\n                  columnIndex: (0,1,2)=> (3,4,5)\n                  row index = 2\n                  columnIndex: (0,1,2)=> (6,7,8)\n                  row index = 3\n                  columnIndex: (0,1,2)=> (9,10,11)\n                  columnIndex + rowIndex*rows.length calculates the corresponding index for each button\n                  dialpad index:\n                  0 1 2\n                  3 4 5\n                  6 7 8\n                  9 10 11\n                  then use this index to locate the corresponding dtmf tones\n                  DtmfTones[index]\n                  */\n                  index={columnIndex + rowIndex * rows.length}\n                  digit={button.digit}\n                  letter={button.letter}\n                  styles={props.styles}\n                  onClick={onClickDialpad}\n                  onLongPress={onLongPressDialpad}\n                  isMobile={isMobile}\n                />\n              ))}\n            </Stack>\n          );\n        })}\n      </FocusZone>\n    </div>\n  );\n};\n\n/**\n * A component to allow users to enter phone number through clicking on dialpad/using keyboard\n * It will return empty component for stable builds\n *\n * @beta\n */\nexport const Dialpad = (props: DialpadProps): JSX.Element => {\n  /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */\n  const localeStrings = useLocale().strings.dialpad;\n\n  const dialpadLocaleStringsTrampoline = (): DialpadStrings => {\n    /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */\n    return localeStrings;\n    // Even though the component strings type doesn't have `DialpadStrings` in stable build,\n    // the string values exist. So unsafe cast for stable build.\n    return '' as unknown as DialpadStrings;\n  };\n  const strings = { ...dialpadLocaleStringsTrampoline(), ...props.strings };\n  return <DialpadContainer strings={strings} {...props} />;\n};\n\nconst sanitizeInput = (input: string): string => {\n  // remove non-valid characters from input: letters,special characters excluding +, *,#\n  return input.replace(/[^\\d*#+]/g, '');\n};\n\"../../../../acs-ui-common/src\""]}

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

@@ -102,6 +102,10 @@ export interface ErrorBarStrings {
      * Message shown when microphone can be enumerated but access is blocked by the system.
      */
     callMicrophoneAccessDenied: string;
+    /**
+     * Message shown when microphone can be enumerated but access is blocked by the system, for safari browsers
+     */
+    callMicrophoneAccessDeniedSafari: string;
     /**
      * Message shown when microphone is muted by the system (not by local or remote participants)
      */
@@ -124,6 +128,10 @@ export interface ErrorBarStrings {
      * Message shown when camera can be enumerated but access is blocked by the system.
      */
     callCameraAccessDenied: string;
+    /**
+     * Message shown when camera can be enumerated but access is blocked by the system, for safari browsers
+     */
+    callCameraAccessDeniedSafari: string;
     /**
      * Message shown when local video fails to start because camera is already in use by
      * another applciation.

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

@@ -1 +1 @@
-{"version":3,"file":"ErrorBar.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ErrorBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAoB,UAAU,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAEL,YAAY,EACZ,+BAA+B,EAC/B,YAAY,EACZ,mBAAmB,EACnB,cAAc,EACf,MAAM,SAAS,CAAC;AAwNjB;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAe,EAAE;;IAC5D,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC;IACnD,MAAM,OAAO,GAAG,MAAA,KAAK,CAAC,OAAO,mCAAI,aAAa,CAAC;IAE/C,sDAAsD;IACtD,yDAAyD;IACzD,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;IAEpD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAmB,EAAE,CAAC,CAAC;IAE7E,mGAAmG;IACnG,4EAA4E;IAC5E,SAAS,CACP,GAAG,EAAE,CAAC,kBAAkB,CAAC,+BAA+B,CAAC,KAAK,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC,EACrG,CAAC,KAAK,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAC7C,CAAC;IAEF,MAAM,MAAM,GAAG,YAAY,CACzB,KAAK,CAAC,mBAAmB,EACzB,eAAe,EACf,KAAK,CAAC,oBAAoB,CAAC,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAChE,CAAC;IAEF,OAAO,CACL,oBAAC,KAAK,kBAAY,iBAAiB,IAChC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACrB,oBAAC,UAAU,oBACL,KAAK,IACT,MAAM,EAAE;YACN,SAAS,EAAE;gBACT,UAAU,EAAE,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ;gBACnE,UAAU,EAAE,MAAM;aACnB;YACD,IAAI,EAAE;gBACJ,MAAM,EAAE,CAAC;aACV;YACD,OAAO,EAAE;gBACP,UAAU,EAAE,SAAS;aACtB;YACD,SAAS,EAAE;gBACT,MAAM,EAAE,CAAC;gBACT,UAAU,EAAE,QAAQ;aACrB;SACF,EACD,GAAG,EAAE,KAAK,CAAC,IAAI,EACf,cAAc,EAAE,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,EAC1C,mBAAmB,EAAE,mBAAmB,CAAC,KAAK,CAAC,IAAI,CAAC,EACpD,SAAS,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,YAAY,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC,EACzE,sBAAsB,EAAE,OAAO,CAAC,sBAAsB,EACtD,gBAAgB,EAAE,EAAE,QAAQ,EAAE,eAAe,EAAE,KAE9C,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CACT,CACd,CAAC,CACI,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport { IMessageBarProps, MessageBar, Stack } from '@fluentui/react';\nimport { useLocale } from '../localization';\nimport {\n  DismissedError,\n  dismissError,\n  dropDismissalsForInactiveErrors,\n  errorsToShow,\n  messageBarIconProps,\n  messageBarType\n} from './utils';\n\n/**\n * Props for {@link ErrorBar}.\n *\n * In addition to the following, {@link ErrorBar} forwards all\n * {@link @fluentui/react#IMessageBarProps} to the underlying {@link @fluentui/react#MessageBar}.\n *\n * @public\n */\nexport interface ErrorBarProps extends IMessageBarProps {\n  /**\n   * Strings shown on the UI on errors.\n   */\n  strings?: ErrorBarStrings;\n\n  /**\n   * Currently active errors.\n   */\n  activeErrorMessages: ActiveErrorMessage[];\n\n  /**\n   * If set, errors with {@link ActiveErrorMessage.timestamp} older than the time this component is mounted\n   * are not shown.\n   *\n   * This is useful when using the {@link ErrorBar} with a stateful client that handles more than one call\n   * or chat thread. Set this prop to ignore errors from previous call or chat.\n   *\n   * @defaultValue false\n   */\n  ignorePremountErrors?: boolean;\n}\n\n/**\n * All strings that may be shown on the UI in the {@link ErrorBar}.\n *\n * @public\n */\nexport interface ErrorBarStrings {\n  /**\n   * Unable to reach Chat service.\n   *\n   * This can mean:\n   *   - Incorrect Azure Communication Services endpoint was provided.\n   *   - User's network connection is down.\n   */\n  unableToReachChatService: string;\n\n  /**\n   * User does not have access to the Chat service.\n   * This usually means that either the Azure Communication Services endpiont or the token provided are incorrect.\n   */\n  accessDenied: string;\n\n  /**\n   * User is no longer on the thread.\n   *\n   * See also: {@link ErrorBarStrings.sendMessageNotInChatThread} for a more specific error.\n   */\n  userNotInChatThread: string;\n\n  /**\n   * Sending message failed because user is no longer on the thread.\n   */\n  sendMessageNotInChatThread: string;\n\n  /**\n   * A generic message when sending message fails.\n   * Prefer more specific error strings when possible.\n   */\n  sendMessageGeneric: string;\n\n  /**\n   * A generic message when starting video fails.\n   */\n  startVideoGeneric: string;\n\n  /**\n   * A generic message when starting video fails.\n   */\n  stopVideoGeneric: string;\n\n  /**\n   * A generic message when muting microphone fails.\n   */\n  muteGeneric: string;\n\n  /**\n   * A generic message when unmuting microphone fails.\n   */\n  unmuteGeneric: string;\n\n  /**\n   * A generic message when starting screenshare fails.\n   */\n  startScreenShareGeneric: string;\n\n  /**\n   * A generic message when stopping screenshare fails.\n   */\n  stopScreenShareGeneric: string;\n\n  /**\n   * Message shown when poor network quality is detected during a call.\n   */\n  callNetworkQualityLow: string;\n\n  /**\n   * Message shown on failure to detect audio output devices.\n   */\n  callNoSpeakerFound: string;\n\n  /**\n   * Message shown on failure to detect audio input devices.\n   */\n  callNoMicrophoneFound: string;\n\n  /**\n   * Message shown when microphone can be enumerated but access is blocked by the system.\n   */\n  callMicrophoneAccessDenied: string;\n\n  /**\n   * Message shown when microphone is muted by the system (not by local or remote participants)\n   */\n  callMicrophoneMutedBySystem: string;\n\n  /**\n   * Message shown when microphone is unmuted by the system (not by local or remote participants).\n   * This typically occurs if the system recovers from an unexpected mute.\n   */\n  callMicrophoneUnmutedBySystem: string;\n\n  /**\n   * Mac OS specific message shown when microphone can be enumerated but access is\n   * blocked by the system.\n   */\n  callMacOsMicrophoneAccessDenied: string;\n\n  /**\n   * Message shown when poor network causes local video stream to be frozen.\n   */\n  callLocalVideoFreeze: string;\n\n  /**\n   * Message shown when camera can be enumerated but access is blocked by the system.\n   */\n  callCameraAccessDenied: string;\n\n  /**\n   * Message shown when local video fails to start because camera is already in use by\n   * another applciation.\n   */\n  callCameraAlreadyInUse: string;\n\n  /**\n   * Message shown when local video is stopped by the system (not by local or remote participants)\n   */\n  callVideoStoppedBySystem: string;\n\n  /**\n   * Message shown when local video was recovered by the system (not by the local participant)\n   */\n  callVideoRecoveredBySystem: string;\n\n  /**\n   * Mac OS specific message shown when system denies access to camera.\n   */\n  callMacOsCameraAccessDenied: string;\n\n  /**\n   * Mac OS specific message shown when system denies sharing local screen on a call.\n   */\n  callMacOsScreenShareAccessDenied: string;\n  /**\n   * Dimiss errorbar button aria label read by screen reader accessibility tools\n   */\n  dismissButtonAriaLabel?: string;\n\n  /**\n   * An error message when joining a call fails.\n   */\n  failedToJoinCallGeneric?: string;\n\n  /**\n   * An error message when joining a call fails specifically due to an invalid meeting link.\n   */\n  failedToJoinCallInvalidMeetingLink?: string;\n}\n\n/**\n * All errors that can be shown in the {@link ErrorBar}.\n *\n * @public\n */\nexport type ErrorType = keyof ErrorBarStrings;\n\n/**\n * Active error messages to be shown via {@link ErrorBar}.\n *\n * @public\n */\nexport interface ActiveErrorMessage {\n  /**\n   * Type of error that is active.\n   */\n  type: ErrorType;\n  /**\n   * The latest timestamp when this error was observed.\n   *\n   * When available, this is used to track errors that have already been seen and dismissed\n   * by the user.\n   */\n  timestamp?: Date;\n}\n\n/**\n * A component to show error messages on the UI.\n * All strings that can be shown are accepted as the {@link ErrorBarProps.strings} so that they can be localized.\n * Active errors are selected by {@link ErrorBarProps.activeErrorMessages}.\n *\n * This component internally tracks dismissed by the user.\n *   * Errors that have an associated timestamp: The error is shown on the UI again if it occurs after being dismissed.\n *   * Errors that do not have a timestamp: The error is dismissed until it disappears from the props.\n *         If the error recurs, it is shown in the UI.\n *\n * Uses {@link @fluentui/react#MessageBar} UI element.\n *\n * @public\n */\nexport const ErrorBar = (props: ErrorBarProps): JSX.Element => {\n  const localeStrings = useLocale().strings.errorBar;\n  const strings = props.strings ?? localeStrings;\n\n  // Timestamp for when this comopnent is first mounted.\n  // Never updated through the lifecycle of this component.\n  const mountTimestamp = useRef(new Date(Date.now()));\n\n  const [dismissedErrors, setDismissedErrors] = useState<DismissedError[]>([]);\n\n  // dropDismissalsForInactiveErrors only returns a new object if `dismissedErrors` actually changes.\n  // Without this behaviour, this `useEffect` block would cause a render loop.\n  useEffect(\n    () => setDismissedErrors(dropDismissalsForInactiveErrors(props.activeErrorMessages, dismissedErrors)),\n    [props.activeErrorMessages, dismissedErrors]\n  );\n\n  const toShow = errorsToShow(\n    props.activeErrorMessages,\n    dismissedErrors,\n    props.ignorePremountErrors ? mountTimestamp.current : undefined\n  );\n\n  return (\n    <Stack data-ui-id=\"error-bar-stack\">\n      {toShow.map((error) => (\n        <MessageBar\n          {...props}\n          styles={{\n            innerText: {\n              paddingTop: messageBarType(error.type) === 5 ? '0.15rem' : '0.1rem', // to move the inner text of the message bar down to be centered\n              lineHeight: 'none'\n            },\n            icon: {\n              height: 0\n            },\n            content: {\n              lineHeight: 'inherit'\n            },\n            dismissal: {\n              height: 0,\n              paddingTop: '0.8rem'\n            }\n          }}\n          key={error.type}\n          messageBarType={messageBarType(error.type)}\n          messageBarIconProps={messageBarIconProps(error.type)}\n          onDismiss={() => setDismissedErrors(dismissError(dismissedErrors, error))}\n          dismissButtonAriaLabel={strings.dismissButtonAriaLabel}\n          dismissIconProps={{ iconName: 'ErrorBarClear' }}\n        >\n          {strings[error.type]}\n        </MessageBar>\n      ))}\n    </Stack>\n  );\n};\n"]}
+{"version":3,"file":"ErrorBar.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ErrorBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAoB,UAAU,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAEL,YAAY,EACZ,+BAA+B,EAC/B,YAAY,EACZ,mBAAmB,EACnB,cAAc,EACf,MAAM,SAAS,CAAC;AAkOjB;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAe,EAAE;;IAC5D,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC;IACnD,MAAM,OAAO,GAAG,MAAA,KAAK,CAAC,OAAO,mCAAI,aAAa,CAAC;IAE/C,sDAAsD;IACtD,yDAAyD;IACzD,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;IAEpD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAmB,EAAE,CAAC,CAAC;IAE7E,mGAAmG;IACnG,4EAA4E;IAC5E,SAAS,CACP,GAAG,EAAE,CAAC,kBAAkB,CAAC,+BAA+B,CAAC,KAAK,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC,EACrG,CAAC,KAAK,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAC7C,CAAC;IAEF,MAAM,MAAM,GAAG,YAAY,CACzB,KAAK,CAAC,mBAAmB,EACzB,eAAe,EACf,KAAK,CAAC,oBAAoB,CAAC,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAChE,CAAC;IAEF,OAAO,CACL,oBAAC,KAAK,kBAAY,iBAAiB,IAChC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACrB,oBAAC,UAAU,oBACL,KAAK,IACT,MAAM,EAAE;YACN,SAAS,EAAE;gBACT,UAAU,EAAE,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ;gBACnE,UAAU,EAAE,MAAM;aACnB;YACD,IAAI,EAAE;gBACJ,MAAM,EAAE,CAAC;aACV;YACD,OAAO,EAAE;gBACP,UAAU,EAAE,SAAS;aACtB;YACD,SAAS,EAAE;gBACT,MAAM,EAAE,CAAC;gBACT,UAAU,EAAE,QAAQ;aACrB;SACF,EACD,GAAG,EAAE,KAAK,CAAC,IAAI,EACf,cAAc,EAAE,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,EAC1C,mBAAmB,EAAE,mBAAmB,CAAC,KAAK,CAAC,IAAI,CAAC,EACpD,SAAS,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,YAAY,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC,EACzE,sBAAsB,EAAE,OAAO,CAAC,sBAAsB,EACtD,gBAAgB,EAAE,EAAE,QAAQ,EAAE,eAAe,EAAE,KAE9C,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CACT,CACd,CAAC,CACI,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport { IMessageBarProps, MessageBar, Stack } from '@fluentui/react';\nimport { useLocale } from '../localization';\nimport {\n  DismissedError,\n  dismissError,\n  dropDismissalsForInactiveErrors,\n  errorsToShow,\n  messageBarIconProps,\n  messageBarType\n} from './utils';\n\n/**\n * Props for {@link ErrorBar}.\n *\n * In addition to the following, {@link ErrorBar} forwards all\n * {@link @fluentui/react#IMessageBarProps} to the underlying {@link @fluentui/react#MessageBar}.\n *\n * @public\n */\nexport interface ErrorBarProps extends IMessageBarProps {\n  /**\n   * Strings shown on the UI on errors.\n   */\n  strings?: ErrorBarStrings;\n\n  /**\n   * Currently active errors.\n   */\n  activeErrorMessages: ActiveErrorMessage[];\n\n  /**\n   * If set, errors with {@link ActiveErrorMessage.timestamp} older than the time this component is mounted\n   * are not shown.\n   *\n   * This is useful when using the {@link ErrorBar} with a stateful client that handles more than one call\n   * or chat thread. Set this prop to ignore errors from previous call or chat.\n   *\n   * @defaultValue false\n   */\n  ignorePremountErrors?: boolean;\n}\n\n/**\n * All strings that may be shown on the UI in the {@link ErrorBar}.\n *\n * @public\n */\nexport interface ErrorBarStrings {\n  /**\n   * Unable to reach Chat service.\n   *\n   * This can mean:\n   *   - Incorrect Azure Communication Services endpoint was provided.\n   *   - User's network connection is down.\n   */\n  unableToReachChatService: string;\n\n  /**\n   * User does not have access to the Chat service.\n   * This usually means that either the Azure Communication Services endpiont or the token provided are incorrect.\n   */\n  accessDenied: string;\n\n  /**\n   * User is no longer on the thread.\n   *\n   * See also: {@link ErrorBarStrings.sendMessageNotInChatThread} for a more specific error.\n   */\n  userNotInChatThread: string;\n\n  /**\n   * Sending message failed because user is no longer on the thread.\n   */\n  sendMessageNotInChatThread: string;\n\n  /**\n   * A generic message when sending message fails.\n   * Prefer more specific error strings when possible.\n   */\n  sendMessageGeneric: string;\n\n  /**\n   * A generic message when starting video fails.\n   */\n  startVideoGeneric: string;\n\n  /**\n   * A generic message when starting video fails.\n   */\n  stopVideoGeneric: string;\n\n  /**\n   * A generic message when muting microphone fails.\n   */\n  muteGeneric: string;\n\n  /**\n   * A generic message when unmuting microphone fails.\n   */\n  unmuteGeneric: string;\n\n  /**\n   * A generic message when starting screenshare fails.\n   */\n  startScreenShareGeneric: string;\n\n  /**\n   * A generic message when stopping screenshare fails.\n   */\n  stopScreenShareGeneric: string;\n\n  /**\n   * Message shown when poor network quality is detected during a call.\n   */\n  callNetworkQualityLow: string;\n\n  /**\n   * Message shown on failure to detect audio output devices.\n   */\n  callNoSpeakerFound: string;\n\n  /**\n   * Message shown on failure to detect audio input devices.\n   */\n  callNoMicrophoneFound: string;\n\n  /**\n   * Message shown when microphone can be enumerated but access is blocked by the system.\n   */\n  callMicrophoneAccessDenied: string;\n\n  /**\n   * Message shown when microphone can be enumerated but access is blocked by the system, for safari browsers\n   */\n  callMicrophoneAccessDeniedSafari: string;\n\n  /**\n   * Message shown when microphone is muted by the system (not by local or remote participants)\n   */\n  callMicrophoneMutedBySystem: string;\n\n  /**\n   * Message shown when microphone is unmuted by the system (not by local or remote participants).\n   * This typically occurs if the system recovers from an unexpected mute.\n   */\n  callMicrophoneUnmutedBySystem: string;\n\n  /**\n   * Mac OS specific message shown when microphone can be enumerated but access is\n   * blocked by the system.\n   */\n  callMacOsMicrophoneAccessDenied: string;\n\n  /**\n   * Message shown when poor network causes local video stream to be frozen.\n   */\n  callLocalVideoFreeze: string;\n\n  /**\n   * Message shown when camera can be enumerated but access is blocked by the system.\n   */\n  callCameraAccessDenied: string;\n\n  /**\n   * Message shown when camera can be enumerated but access is blocked by the system, for safari browsers\n   */\n  callCameraAccessDeniedSafari: string;\n\n  /**\n   * Message shown when local video fails to start because camera is already in use by\n   * another applciation.\n   */\n  callCameraAlreadyInUse: string;\n\n  /**\n   * Message shown when local video is stopped by the system (not by local or remote participants)\n   */\n  callVideoStoppedBySystem: string;\n\n  /**\n   * Message shown when local video was recovered by the system (not by the local participant)\n   */\n  callVideoRecoveredBySystem: string;\n\n  /**\n   * Mac OS specific message shown when system denies access to camera.\n   */\n  callMacOsCameraAccessDenied: string;\n\n  /**\n   * Mac OS specific message shown when system denies sharing local screen on a call.\n   */\n  callMacOsScreenShareAccessDenied: string;\n  /**\n   * Dimiss errorbar button aria label read by screen reader accessibility tools\n   */\n  dismissButtonAriaLabel?: string;\n\n  /**\n   * An error message when joining a call fails.\n   */\n  failedToJoinCallGeneric?: string;\n\n  /**\n   * An error message when joining a call fails specifically due to an invalid meeting link.\n   */\n  failedToJoinCallInvalidMeetingLink?: string;\n}\n\n/**\n * All errors that can be shown in the {@link ErrorBar}.\n *\n * @public\n */\nexport type ErrorType = keyof ErrorBarStrings;\n\n/**\n * Active error messages to be shown via {@link ErrorBar}.\n *\n * @public\n */\nexport interface ActiveErrorMessage {\n  /**\n   * Type of error that is active.\n   */\n  type: ErrorType;\n  /**\n   * The latest timestamp when this error was observed.\n   *\n   * When available, this is used to track errors that have already been seen and dismissed\n   * by the user.\n   */\n  timestamp?: Date;\n}\n\n/**\n * A component to show error messages on the UI.\n * All strings that can be shown are accepted as the {@link ErrorBarProps.strings} so that they can be localized.\n * Active errors are selected by {@link ErrorBarProps.activeErrorMessages}.\n *\n * This component internally tracks dismissed by the user.\n *   * Errors that have an associated timestamp: The error is shown on the UI again if it occurs after being dismissed.\n *   * Errors that do not have a timestamp: The error is dismissed until it disappears from the props.\n *         If the error recurs, it is shown in the UI.\n *\n * Uses {@link @fluentui/react#MessageBar} UI element.\n *\n * @public\n */\nexport const ErrorBar = (props: ErrorBarProps): JSX.Element => {\n  const localeStrings = useLocale().strings.errorBar;\n  const strings = props.strings ?? localeStrings;\n\n  // Timestamp for when this comopnent is first mounted.\n  // Never updated through the lifecycle of this component.\n  const mountTimestamp = useRef(new Date(Date.now()));\n\n  const [dismissedErrors, setDismissedErrors] = useState<DismissedError[]>([]);\n\n  // dropDismissalsForInactiveErrors only returns a new object if `dismissedErrors` actually changes.\n  // Without this behaviour, this `useEffect` block would cause a render loop.\n  useEffect(\n    () => setDismissedErrors(dropDismissalsForInactiveErrors(props.activeErrorMessages, dismissedErrors)),\n    [props.activeErrorMessages, dismissedErrors]\n  );\n\n  const toShow = errorsToShow(\n    props.activeErrorMessages,\n    dismissedErrors,\n    props.ignorePremountErrors ? mountTimestamp.current : undefined\n  );\n\n  return (\n    <Stack data-ui-id=\"error-bar-stack\">\n      {toShow.map((error) => (\n        <MessageBar\n          {...props}\n          styles={{\n            innerText: {\n              paddingTop: messageBarType(error.type) === 5 ? '0.15rem' : '0.1rem', // to move the inner text of the message bar down to be centered\n              lineHeight: 'none'\n            },\n            icon: {\n              height: 0\n            },\n            content: {\n              lineHeight: 'inherit'\n            },\n            dismissal: {\n              height: 0,\n              paddingTop: '0.8rem'\n            }\n          }}\n          key={error.type}\n          messageBarType={messageBarType(error.type)}\n          messageBarIconProps={messageBarIconProps(error.type)}\n          onDismiss={() => setDismissedErrors(dismissError(dismissedErrors, error))}\n          dismissButtonAriaLabel={strings.dismissButtonAriaLabel}\n          dismissIconProps={{ iconName: 'ErrorBarClear' }}\n        >\n          {strings[error.type]}\n        </MessageBar>\n      ))}\n    </Stack>\n  );\n};\n"]}

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

@@ -109,7 +109,7 @@ const DefaultSystemMessage = (props) => {
     }
     return React.createElement(React.Fragment, null);
 };
-const memoizeAllMessages = memoizeFnAll((_messageKey, message, showMessageDate, showMessageStatus, onRenderAvatar, shouldOverlapAvatarAndMessage, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, _attached, statusToRender, participantCount, readCount, onRenderMessage, onUpdateMessage, onDeleteMessage, onSendMessage) => {
+const memoizeAllMessages = memoizeFnAll((_messageKey, message, showMessageDate, showMessageStatus, onRenderAvatar, shouldOverlapAvatarAndMessage, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, _attached, statusToRender, participantCount, readCount, onRenderMessage, onUpdateMessage, onDeleteMessage, onSendMessage, disableEditing) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const messageProps = {
         message,
@@ -117,7 +117,8 @@ const memoizeAllMessages = memoizeFnAll((_messageKey, message, showMessageDate,
         showDate: showMessageDate,
         onUpdateMessage,
         onDeleteMessage,
-        onSendMessage
+        onSendMessage,
+        disableEditing
     };
     switch (message.messageType) {
         case 'chat': {
@@ -470,7 +471,7 @@ export const MessageThread = (props) => {
             return memoizedMessageFn(key !== null && key !== void 0 ? key : 'id_' + index, message, showMessageDate, showMessageStatus, onRenderAvatar, isNarrow, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, 
             // Temporary solution to make sure we re-render if attach attribute is changed.
             // The proper fix should be in selector.
-            message.messageType === 'chat' ? message.attached : undefined, statusToRender, participantCount, readCountForHoveredIndicator, onRenderMessage, onUpdateMessage, onDeleteMessage, onSendMessage);
+            message.messageType === 'chat' ? message.attached : undefined, statusToRender, participantCount, readCountForHoveredIndicator, onRenderMessage, onUpdateMessage, onDeleteMessage, onSendMessage, props.disableEditing);
         });
     }), [
         messages,
@@ -491,7 +492,8 @@ export const MessageThread = (props) => {
         onSendMessage,
         lastSeenChatMessage,
         lastSendingChatMessage,
-        lastDeliveredChatMessage
+        lastDeliveredChatMessage,
+        props.disableEditing
     ]);
     const theme = useTheme();
     const chatBody = useMemo(() => {