@azure/communication-react 1.8.1-alpha-202309200012 → 1.8.1-alpha-202309220012

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

@@ -1 +1 @@
-{"version":3,"file":"ControlBarButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ControlBarButton.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  DefaultButton,\n  IButtonProps,\n  IRenderFunction,\n  concatStyleSets,\n  IButtonStyles,\n  KeyCodes\n} from '@fluentui/react';\nimport { controlButtonStyles } from './styles/ControlBar.styles';\nimport { ControlButtonTooltip } from './ControlButtonTooltip';\n\n/**\n * Strings of {@link ControlBarButton} that can be overridden.\n *\n * @public\n */\nexport interface ControlBarButtonStrings {\n  /**\n   * Label of the button. This supersedes onLabel or offLabel if used.\n   */\n  label?: string;\n  /**\n   * Label of the button shown when the button is checked.\n   */\n  onLabel?: string;\n  /**\n   * Label of the button shown when the button is not checked.\n   */\n  offLabel?: string;\n  /**\n   * Tooltip content of the button. This supersedes tooltipDisabledContent, tooltipOnContent and tooltipOffContent if used.\n   */\n  tooltipContent?: string;\n  /**\n   * Tooltip content when the button is disabled.\n   */\n  tooltipDisabledContent?: string;\n  /**\n   * Tooltip content when the button is in the checked state.\n   */\n  tooltipOnContent?: string;\n  /**\n   * Tooltip content when the button is in the unchecked state.\n   */\n  tooltipOffContent?: string;\n}\n\n/**\n * Styles for all {@link ControlBarButton} implementations.\n *\n * @public\n */\nexport type ControlBarButtonStyles = IButtonStyles;\n\n/**\n * Props for {@link ControlBarButton}.\n *\n * @public\n */\nexport interface ControlBarButtonProps extends IButtonProps {\n  /**\n   * Whether the label is displayed or not.\n   *\n   * @defaultValue `false`\n   */\n  showLabel?: boolean;\n\n  /**\n   * Key to use for the Label component\n   */\n  labelKey?: string;\n\n  /**\n   * Id to use for the tooltip host.\n   *\n   * @defaultValue This uses the labelKey and appends -tooltip by default\n   */\n  tooltipId?: string;\n\n  /**\n   * Optional strings to override in component.\n   */\n  strings?: ControlBarButtonStrings;\n\n  /**\n   * Icon to render when the button is checked.\n   */\n  onRenderOnIcon?: IRenderFunction<IButtonProps>;\n\n  /**\n   * Icon to render when the button is not checked.\n   */\n  onRenderOffIcon?: IRenderFunction<IButtonProps>;\n\n  /**\n   * Fluent styles, including extensions common to all {@link ControlBarButton}s.\n   */\n  styles?: ControlBarButtonStyles;\n}\n\nconst DefaultRenderIcon = (props?: ControlBarButtonProps): JSX.Element | null => {\n  return props?.checked\n    ? props?.onRenderOnIcon\n      ? props?.onRenderOnIcon()\n      : null\n    : props?.onRenderOffIcon\n    ? props?.onRenderOffIcon()\n    : null;\n};\n\n/**\n * Default button styled for the {@link ControlBar}.\n *\n * Use this component create custom buttons that are styled the same as other buttons provided by the UI Library.\n *\n * @public\n */\nexport const ControlBarButton = (props: ControlBarButtonProps): JSX.Element => {\n  const componentStyles = concatStyleSets(controlButtonStyles, props.styles ?? {});\n\n  const labelText =\n    props?.text ?? props?.strings?.label ?? (props?.checked ? props?.strings?.onLabel : props?.strings?.offLabel);\n\n  const tooltipContent =\n    props?.strings?.tooltipContent ??\n    (props?.disabled\n      ? props?.strings?.tooltipDisabledContent\n      : props?.checked\n      ? props?.strings?.tooltipOnContent\n      : props?.strings?.tooltipOffContent);\n\n  const tooltipId = props.tooltipId ?? props.labelKey ? props.labelKey + '-tooltip' : undefined;\n\n  return (\n    <ControlButtonTooltip content={tooltipContent} id={tooltipId}>\n      <DefaultButton\n        {...props}\n        styles={componentStyles}\n        onRenderText={props.showLabel && props.onRenderText ? props.onRenderText : undefined}\n        onRenderIcon={props.onRenderIcon ?? DefaultRenderIcon}\n        ariaLabel={props.splitButtonAriaLabel ?? props.ariaLabel ?? tooltipContent ?? labelText}\n        allowDisabledFocus={props.allowDisabledFocus ?? true}\n        menuTriggerKeyCode={KeyCodes.down} // explicitly sets the keypress to activiate the split button drop down.\n        text={undefined} // this is handled as a child of the button, without this the `showLabel` prop may be ignored.\n      >\n        {props.showLabel ? labelText : <></>}\n      </DefaultButton>\n    </ControlButtonTooltip>\n  );\n};\n"]}
+{"version":3,"file":"ControlBarButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ControlBarButton.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  DefaultButton,\n  IButtonProps,\n  IRenderFunction,\n  concatStyleSets,\n  IButtonStyles,\n  KeyCodes\n} from '@fluentui/react';\nimport { controlButtonStyles } from './styles/ControlBar.styles';\nimport { ControlButtonTooltip } from './ControlButtonTooltip';\n\n/**\n * Strings of {@link ControlBarButton} that can be overridden.\n *\n * @public\n */\nexport interface ControlBarButtonStrings {\n  /**\n   * Label of the button. This supersedes onLabel or offLabel if used.\n   */\n  label?: string;\n  /**\n   * Label of the button shown when the button is checked.\n   */\n  onLabel?: string;\n  /**\n   * Label of the button shown when the button is not checked.\n   */\n  offLabel?: string;\n  /**\n   * Tooltip content of the button. This supersedes tooltipDisabledContent, tooltipOnContent and tooltipOffContent if used.\n   */\n  tooltipContent?: string;\n  /**\n   * Tooltip content when the button is disabled.\n   */\n  tooltipDisabledContent?: string;\n  /**\n   * Tooltip content when the button is in the checked state.\n   */\n  tooltipOnContent?: string;\n  /**\n   * Tooltip content when the button is in the unchecked state.\n   */\n  tooltipOffContent?: string;\n}\n\n/**\n * Styles for all {@link ControlBarButton} implementations.\n *\n * @public\n */\nexport type ControlBarButtonStyles = IButtonStyles;\n\n/**\n * Props for {@link ControlBarButton}.\n *\n * @public\n */\nexport interface ControlBarButtonProps extends IButtonProps {\n  /**\n   * Whether the label is displayed or not.\n   *\n   * @defaultValue `false`\n   */\n  showLabel?: boolean;\n\n  /**\n   * Key to use for the Label component\n   */\n  labelKey?: string;\n\n  /**\n   * Id to use for the tooltip host.\n   *\n   * @defaultValue This uses the labelKey and appends -tooltip by default\n   */\n  tooltipId?: string;\n\n  /**\n   * Optional strings to override in component.\n   */\n  strings?: ControlBarButtonStrings;\n\n  /**\n   * Icon to render when the button is checked.\n   */\n  onRenderOnIcon?: IRenderFunction<IButtonProps>;\n\n  /**\n   * Icon to render when the button is not checked.\n   */\n  onRenderOffIcon?: IRenderFunction<IButtonProps>;\n\n  /**\n   * Fluent styles, including extensions common to all {@link ControlBarButton}s.\n   */\n  styles?: ControlBarButtonStyles;\n}\n\nconst DefaultRenderIcon = (props?: ControlBarButtonProps): JSX.Element | null => {\n  return props?.checked\n    ? props?.onRenderOnIcon\n      ? props?.onRenderOnIcon()\n      : null\n    : props?.onRenderOffIcon\n    ? props?.onRenderOffIcon()\n    : null;\n};\n\n/**\n * Default button styled for the {@link ControlBar}.\n *\n * Use this component create custom buttons that are styled the same as other buttons provided by the UI Library.\n *\n * @public\n */\nexport const ControlBarButton = (props: ControlBarButtonProps): JSX.Element => {\n  const componentStyles = concatStyleSets(controlButtonStyles, props.styles ?? {});\n\n  const labelText =\n    props?.text ?? props?.strings?.label ?? (props?.checked ? props?.strings?.onLabel : props?.strings?.offLabel);\n\n  const tooltipContent =\n    props?.strings?.tooltipContent ??\n    (props?.disabled\n      ? props?.strings?.tooltipDisabledContent\n      : props?.checked\n      ? props?.strings?.tooltipOnContent\n      : props?.strings?.tooltipOffContent);\n\n  const tooltipId = props.tooltipId ?? props.labelKey ? props.labelKey + '-tooltip' : undefined;\n\n  return (\n    <ControlButtonTooltip content={tooltipContent} id={tooltipId}>\n      <DefaultButton\n        {...props}\n        styles={componentStyles}\n        onRenderText={props.showLabel && props.onRenderText ? props.onRenderText : undefined}\n        onRenderIcon={props.onRenderIcon ?? DefaultRenderIcon}\n        ariaLabel={props.splitButtonAriaLabel ?? props.ariaLabel ?? tooltipContent ?? labelText}\n        allowDisabledFocus={props.allowDisabledFocus ?? true}\n        menuTriggerKeyCode={KeyCodes.down} // explicitly sets the keypress to activiate the split button drop down.\n        text={undefined} // this is handled as a child of the button, without this the `showLabel` prop may be ignored.\n      >\n        {props.showLabel ? labelText : <></>}\n      </DefaultButton>\n    </ControlButtonTooltip>\n  );\n};\n"]}

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ITooltipHostProps } from '@fluentui/react';
 /**
  * Tooltip that should wrap control bar buttons.

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

@@ -1,5 +1,5 @@
 // Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
+// Licensed under the MIT License.
 import React from 'react';
 import { TooltipHost, mergeStyleSets, useTheme } from '@fluentui/react';
 import { isDarkThemed } from '../theming/themeUtils';

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

@@ -1 +1 @@
-{"version":3,"file":"ControlButtonTooltip.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ControlButtonTooltip.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,WAAW,EAIX,cAAc,EACd,QAAQ,EACT,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,wDAAwD;AACxD,uFAAuF;AACvF,yHAAyH;AACzH,MAAM,UAAU,GAAgC,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,cAAc,EAAE,EAAE,CAAC;AAEtF;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAwB,EAAe,EAAE;IAC5E,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,YAAY,GAAmC,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,CAAC;IAElH,uDAAuD;IACvD,MAAM,YAAY,GAAG;QACnB,QAAQ,EAAE,CAAC;QACX,MAAM,EAAE,YAAY;QACpB,eAAe,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;KACzE,CAAC;IACF,OAAO,CACL,oBAAC,WAAW,oBACN,KAAK,kBACG,KAAK,CAAC,EAAE,EACpB,YAAY,kCAAO,YAAY,GAAK,KAAK,CAAC,YAAY,GACtD,MAAM,EAAE,cAAc,CAAC,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,KAE/C,KAAK,CAAC,QAAQ,CACH,CACf,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React from 'react';\nimport {\n  TooltipHost,\n  ITooltipHostStyles,\n  ITooltipHostProps,\n  ICalloutContentStyles,\n  mergeStyleSets,\n  useTheme\n} from '@fluentui/react';\nimport { isDarkThemed } from '../theming/themeUtils';\n\n// The TooltipHost root uses display: inline by default.\n// To prevent sizing issues or tooltip positioning issues, we override to inline-block.\n// For more details see \"Icon Button with Tooltip\" on https://developer.microsoft.com/en-us/fluentui#/controls/web/button\nconst hostStyles: Partial<ITooltipHostStyles> = { root: { display: 'inline-block' } };\n\n/**\n * Tooltip that should wrap control bar buttons.\n *\n * @private\n */\nexport const ControlButtonTooltip = (props: ITooltipHostProps): JSX.Element => {\n  const theme = useTheme();\n  const calloutStyle: Partial<ICalloutContentStyles> = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };\n\n  // Place callout with no gap between it and the button.\n  const calloutProps = {\n    gapSpace: 0,\n    styles: calloutStyle,\n    backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n  };\n  return (\n    <TooltipHost\n      {...props}\n      data-ui-id={props.id}\n      calloutProps={{ ...calloutProps, ...props.calloutProps }}\n      styles={mergeStyleSets(hostStyles, props.styles)}\n    >\n      {props.children}\n    </TooltipHost>\n  );\n};\n"]}
+{"version":3,"file":"ControlButtonTooltip.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ControlButtonTooltip.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,WAAW,EAIX,cAAc,EACd,QAAQ,EACT,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,wDAAwD;AACxD,uFAAuF;AACvF,yHAAyH;AACzH,MAAM,UAAU,GAAgC,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,cAAc,EAAE,EAAE,CAAC;AAEtF;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAwB,EAAe,EAAE;IAC5E,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,YAAY,GAAmC,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,CAAC;IAElH,uDAAuD;IACvD,MAAM,YAAY,GAAG;QACnB,QAAQ,EAAE,CAAC;QACX,MAAM,EAAE,YAAY;QACpB,eAAe,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;KACzE,CAAC;IACF,OAAO,CACL,oBAAC,WAAW,oBACN,KAAK,kBACG,KAAK,CAAC,EAAE,EACpB,YAAY,kCAAO,YAAY,GAAK,KAAK,CAAC,YAAY,GACtD,MAAM,EAAE,cAAc,CAAC,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,KAE/C,KAAK,CAAC,QAAQ,CACH,CACf,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport {\n  TooltipHost,\n  ITooltipHostStyles,\n  ITooltipHostProps,\n  ICalloutContentStyles,\n  mergeStyleSets,\n  useTheme\n} from '@fluentui/react';\nimport { isDarkThemed } from '../theming/themeUtils';\n\n// The TooltipHost root uses display: inline by default.\n// To prevent sizing issues or tooltip positioning issues, we override to inline-block.\n// For more details see \"Icon Button with Tooltip\" on https://developer.microsoft.com/en-us/fluentui#/controls/web/button\nconst hostStyles: Partial<ITooltipHostStyles> = { root: { display: 'inline-block' } };\n\n/**\n * Tooltip that should wrap control bar buttons.\n *\n * @private\n */\nexport const ControlButtonTooltip = (props: ITooltipHostProps): JSX.Element => {\n  const theme = useTheme();\n  const calloutStyle: Partial<ICalloutContentStyles> = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };\n\n  // Place callout with no gap between it and the button.\n  const calloutProps = {\n    gapSpace: 0,\n    styles: calloutStyle,\n    backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n  };\n  return (\n    <TooltipHost\n      {...props}\n      data-ui-id={props.id}\n      calloutProps={{ ...calloutProps, ...props.calloutProps }}\n      styles={mergeStyleSets(hostStyles, props.styles)}\n    >\n      {props.children}\n    </TooltipHost>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/DevicePermissions/BrowserPermissionDenied.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IButtonStyles, ILinkStyles } from '@fluentui/react';
 import { BaseCustomStyles } from '../../types';
 /**

package/dist/dist-esm/react-components/src/components/DevicePermissions/BrowserPermissionDenied.js

@@ -1,5 +1,5 @@
 // Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
+// Licensed under the MIT License.
 import React from 'react';
 /* @conditional-compile-remove(call-readiness) */
 import { Stack, Text, Link, Icon, PrimaryButton, mergeStyleSets } from '@fluentui/react';

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

@@ -1 +1 @@
-{"version":3,"file":"BrowserPermissionDenied.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/DevicePermissions/BrowserPermissionDenied.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React from 'react';\nimport { IButtonStyles, ILinkStyles } from '@fluentui/react';\n/* @conditional-compile-remove(call-readiness) */\nimport { Stack, Text, Link, Icon, PrimaryButton, mergeStyleSets } from '@fluentui/react';\n/* @conditional-compile-remove(call-readiness) */\nimport { useLocale } from '../../localization';\n/* @conditional-compile-remove(call-readiness) */\nimport { _formatString, _pxToRem } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(call-readiness) */\nimport {\n  iconContainerStyles,\n  iconPrimaryStyles,\n  linkTextStyles,\n  primaryButtonStyles,\n  primaryTextStyles,\n  secondaryTextStyles,\n  textContainerStyles\n} from './../styles/BrowserPermissionDenied.styles';\nimport { BaseCustomStyles } from '../../types';\n/* @conditional-compile-remove(call-readiness) */\nimport { isValidString } from '../utils';\n\n/**\n * @beta\n * Props for BrowserPermissionDenied component.\n */\nexport interface BrowserPermissionDeniedProps {\n  /**\n   * Action to be taken by the more help link. Possible to send to external page or show other modal.\n   */\n  onTroubleshootingClick?: () => void;\n  /**\n   * Action to be taken by the try again primary button.\n   */\n  onTryAgainClick?: () => void;\n  /**\n   * Localization strings for BrowserPermissionDenied component.\n   */\n  strings?: BrowserPermissionDeniedStrings;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <BrowserPermissionDenied styles={{ primaryButton: { root: {backgroundColor: 'blue' }}}} />\n   * ```\n   */\n  styles?: BrowserPermissionDeniedStyles;\n}\n\n/**\n * @beta\n * Strings for BrowserPermissionDenied component\n */\nexport interface BrowserPermissionDeniedStrings {\n  /**\n   * Main button text string.\n   */\n  primaryButtonText: string;\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\n/**\n * Fluent styles for {@link BrowserPermissionDenied}.\n *\n * @beta\n */\nexport interface BrowserPermissionDeniedStyles 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/* @conditional-compile-remove(call-readiness) */\nconst BrowserPermissionDeniedContainer = (props: BrowserPermissionDeniedProps): JSX.Element => {\n  const { onTroubleshootingClick, onTryAgainClick, strings, styles } = props;\n  return (\n    <Stack style={{ padding: '2rem', paddingTop: '2.5rem', maxWidth: '25.375rem' }}>\n      <Stack horizontal style={{ paddingBottom: '1.5rem' }} horizontalAlign={'space-between'}>\n        <Stack styles={iconContainerStyles} horizontalAlign={'center'}>\n          <Icon styles={iconPrimaryStyles} iconName={'BrowserPermissionDeniedError'}></Icon>\n        </Stack>\n      </Stack>\n      <Stack styles={textContainerStyles}>\n        {isValidString(strings?.primaryText) && <Text styles={primaryTextStyles}>{strings?.primaryText}</Text>}\n        {isValidString(strings?.secondaryText) && <Text styles={secondaryTextStyles}>{strings?.secondaryText}</Text>}\n\n        {onTryAgainClick && isValidString(strings?.primaryButtonText) && (\n          <PrimaryButton\n            styles={mergeStyleSets(primaryButtonStyles, styles?.primaryButton)}\n            text={strings?.primaryButtonText}\n            onClick={onTryAgainClick}\n          />\n        )}\n\n        {onTroubleshootingClick && isValidString(strings?.linkText) && (\n          <Link styles={mergeStyleSets(linkTextStyles, styles?.troubleshootingLink)} onClick={onTroubleshootingClick}>\n            {strings?.linkText}\n          </Link>\n        )}\n      </Stack>\n    </Stack>\n  );\n};\n\n/**\n * @beta\n *\n * Component to allow Contoso to help their end user with their devices should their browser experience device permission issues.\n */\nexport const BrowserPermissionDenied = (props: BrowserPermissionDeniedProps): JSX.Element => {\n  /* @conditional-compile-remove(call-readiness) */\n  const locale = useLocale().strings.BrowserPermissionDenied;\n  /* @conditional-compile-remove(call-readiness) */\n  return <BrowserPermissionDeniedContainer {...props} strings={props.strings ? props.strings : locale} />;\n  return <></>;\n};\n\"../../../../acs-ui-common/src\""]}
+{"version":3,"file":"BrowserPermissionDenied.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/DevicePermissions/BrowserPermissionDenied.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { IButtonStyles, ILinkStyles } from '@fluentui/react';\n/* @conditional-compile-remove(call-readiness) */\nimport { Stack, Text, Link, Icon, PrimaryButton, mergeStyleSets } from '@fluentui/react';\n/* @conditional-compile-remove(call-readiness) */\nimport { useLocale } from '../../localization';\n/* @conditional-compile-remove(call-readiness) */\nimport { _formatString, _pxToRem } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(call-readiness) */\nimport {\n  iconContainerStyles,\n  iconPrimaryStyles,\n  linkTextStyles,\n  primaryButtonStyles,\n  primaryTextStyles,\n  secondaryTextStyles,\n  textContainerStyles\n} from './../styles/BrowserPermissionDenied.styles';\nimport { BaseCustomStyles } from '../../types';\n/* @conditional-compile-remove(call-readiness) */\nimport { isValidString } from '../utils';\n\n/**\n * @beta\n * Props for BrowserPermissionDenied component.\n */\nexport interface BrowserPermissionDeniedProps {\n  /**\n   * Action to be taken by the more help link. Possible to send to external page or show other modal.\n   */\n  onTroubleshootingClick?: () => void;\n  /**\n   * Action to be taken by the try again primary button.\n   */\n  onTryAgainClick?: () => void;\n  /**\n   * Localization strings for BrowserPermissionDenied component.\n   */\n  strings?: BrowserPermissionDeniedStrings;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <BrowserPermissionDenied styles={{ primaryButton: { root: {backgroundColor: 'blue' }}}} />\n   * ```\n   */\n  styles?: BrowserPermissionDeniedStyles;\n}\n\n/**\n * @beta\n * Strings for BrowserPermissionDenied component\n */\nexport interface BrowserPermissionDeniedStrings {\n  /**\n   * Main button text string.\n   */\n  primaryButtonText: string;\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\n/**\n * Fluent styles for {@link BrowserPermissionDenied}.\n *\n * @beta\n */\nexport interface BrowserPermissionDeniedStyles 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/* @conditional-compile-remove(call-readiness) */\nconst BrowserPermissionDeniedContainer = (props: BrowserPermissionDeniedProps): JSX.Element => {\n  const { onTroubleshootingClick, onTryAgainClick, strings, styles } = props;\n  return (\n    <Stack style={{ padding: '2rem', paddingTop: '2.5rem', maxWidth: '25.375rem' }}>\n      <Stack horizontal style={{ paddingBottom: '1.5rem' }} horizontalAlign={'space-between'}>\n        <Stack styles={iconContainerStyles} horizontalAlign={'center'}>\n          <Icon styles={iconPrimaryStyles} iconName={'BrowserPermissionDeniedError'}></Icon>\n        </Stack>\n      </Stack>\n      <Stack styles={textContainerStyles}>\n        {isValidString(strings?.primaryText) && <Text styles={primaryTextStyles}>{strings?.primaryText}</Text>}\n        {isValidString(strings?.secondaryText) && <Text styles={secondaryTextStyles}>{strings?.secondaryText}</Text>}\n\n        {onTryAgainClick && isValidString(strings?.primaryButtonText) && (\n          <PrimaryButton\n            styles={mergeStyleSets(primaryButtonStyles, styles?.primaryButton)}\n            text={strings?.primaryButtonText}\n            onClick={onTryAgainClick}\n          />\n        )}\n\n        {onTroubleshootingClick && isValidString(strings?.linkText) && (\n          <Link styles={mergeStyleSets(linkTextStyles, styles?.troubleshootingLink)} onClick={onTroubleshootingClick}>\n            {strings?.linkText}\n          </Link>\n        )}\n      </Stack>\n    </Stack>\n  );\n};\n\n/**\n * @beta\n *\n * Component to allow Contoso to help their end user with their devices should their browser experience device permission issues.\n */\nexport const BrowserPermissionDenied = (props: BrowserPermissionDeniedProps): JSX.Element => {\n  /* @conditional-compile-remove(call-readiness) */\n  const locale = useLocale().strings.BrowserPermissionDenied;\n  /* @conditional-compile-remove(call-readiness) */\n  return <BrowserPermissionDeniedContainer {...props} strings={props.strings ? props.strings : locale} />;\n  return <></>;\n};\n\"../../../../acs-ui-common/src\""]}

package/dist/dist-esm/react-components/src/components/DevicePermissions/BrowserPermissionDeniedIOS.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { BrowserPermissionDeniedProps, BrowserPermissionDeniedStrings } from './BrowserPermissionDenied';
 /**
  * @beta

package/dist/dist-esm/react-components/src/components/DevicePermissions/BrowserPermissionDeniedIOS.js

@@ -1,5 +1,5 @@
 // Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
+// Licensed under the MIT License.
 import React from 'react';
 /* @conditional-compile-remove(call-readiness) */
 import { useMemo } from 'react';

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

@@ -1 +1 @@
-{"version":3,"file":"BrowserPermissionDeniedIOS.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/DevicePermissions/BrowserPermissionDeniedIOS.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,iDAAiD;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,iDAAiD;AACjD,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,aAAa,EAAE,cAAc,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC9G,iDAAiD;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG/C,iDAAiD;AACjD,OAAO,EACL,gCAAgC,EAChC,iBAAiB,EACjB,oBAAoB,EACpB,uBAAuB,EACvB,uBAAuB,EACvB,kBAAkB,EAClB,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,4CAA4C,CAAC;AAEpD,iDAAiD;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAsEzC,iDAAiD;AACjD,MAAM,mCAAmC,GAAG,CAAC,KAAsC,EAAe,EAAE;IAClG,MAAM,EAAE,WAAW,EAAE,sBAAsB,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACxF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,gBAAgB,GAAG,OAAO,CAAC,GAAG,EAAE;QACpC,OAAO,cAAc,CAAC,oBAAoB,EAAE,EAAE,IAAI,EAAE,EAAE,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;IACtG,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACL,oBAAC,KAAK,IAAC,MAAM,EAAE,gCAAgC;QAC5C,WAAW,IAAI,CACd,oBAAC,KAAK,IAAC,MAAM,EAAE,cAAc,CAAC,iBAAiB,EAAE,EAAE,IAAI,EAAE,EAAE,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc,EAAE,EAAE,CAAC,IACrG,aAAa,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,YAAY,CAAC,IAAI,CACvC,oBAAC,KAAK,IACJ,GAAG,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,EAAE,EACtB,GAAG,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,CAAC,aAAa,EAChC,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,GAC5B,CACH,CACK,CACT;QACD,oBAAC,KAAK,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,SAAS,EAAE;YACzD,oBAAC,KAAK,IAAC,MAAM,EAAE,mBAAmB;gBAC/B,aAAa,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,CAAC,IAAI,oBAAC,IAAI,IAAC,MAAM,EAAE,iBAAiB,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,CAAQ;gBACrG,aAAa,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,CAAC,IAAI,oBAAC,IAAI,IAAC,MAAM,EAAE,mBAAmB,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,CAAQ;gBAC3G,aAAa,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,CAAC,IAAI,CACpC,oBAAC,KAAK,IAAC,MAAM,EAAE,uBAAuB;oBACpC,oBAAC,KAAK,IAAC,eAAe,EAAE,QAAQ,EAAE,MAAM,EAAE,gBAAgB;wBACxD,oBAAC,IAAI,IAAC,MAAM,EAAE,uBAAuB,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,cAAc,CAAQ,CACjE;oBACR,oBAAC,IAAI,IAAC,MAAM,EAAE,kBAAkB,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,CAAQ,CACvD,CACT;gBACA,aAAa,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,CAAC,IAAI,CACpC,oBAAC,KAAK,IAAC,MAAM,EAAE,uBAAuB;oBACpC,oBAAC,KAAK,IAAC,eAAe,EAAE,QAAQ,EAAE,MAAM,EAAE,gBAAgB;wBACxD,oBAAC,IAAI,IAAC,MAAM,EAAE,uBAAuB,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,cAAc,CAAQ,CACjE;oBACR,oBAAC,IAAI,IAAC,MAAM,EAAE,kBAAkB,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,CAAQ,CACvD,CACT;gBACA,aAAa,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,CAAC,IAAI,CACpC,oBAAC,KAAK,IAAC,MAAM,EAAE,uBAAuB;oBACpC,oBAAC,KAAK,IAAC,eAAe,EAAE,QAAQ,EAAE,MAAM,EAAE,gBAAgB;wBACxD,oBAAC,IAAI,IAAC,MAAM,EAAE,uBAAuB,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,cAAc,CAAQ,CACjE;oBACR,oBAAC,IAAI,IAAC,MAAM,EAAE,kBAAkB,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,CAAQ,CACvD,CACT;gBACA,aAAa,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,CAAC,IAAI,CACpC,oBAAC,KAAK,IAAC,MAAM,EAAE,cAAc,CAAC,uBAAuB,EAAE,EAAE,IAAI,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE,CAAC;oBAC3F,oBAAC,KAAK,IAAC,eAAe,EAAE,QAAQ,EAAE,MAAM,EAAE,gBAAgB;wBACxD,oBAAC,IAAI,IAAC,MAAM,EAAE,uBAAuB,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,cAAc,CAAQ,CACjE;oBACR,oBAAC,IAAI,IAAC,MAAM,EAAE,kBAAkB,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,CAAQ,CACvD,CACT;gBACA,aAAa,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,iBAAiB,CAAC,IAAI,CAC5C,oBAAC,aAAa,IACZ,MAAM,EAAE,cAAc,CAAC,mBAAmB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,aAAa,CAAC,EAClE,IAAI,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,iBAAiB,EAChC,OAAO,EAAE,eAAe,GACxB,CACH;gBACA,aAAa,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CAAC,IAAI,CACnC,oBAAC,IAAI,IAAC,MAAM,EAAE,cAAc,CAAC,cAAc,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,mBAAmB,CAAC,EAAE,OAAO,EAAE,sBAAsB,IACvG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CACb,CACR,CACK,CACF,CACF,CACT,CAAC;AACJ,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,KAAsC,EAAe,EAAE;IAChG,iDAAiD;IACjD,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,0BAA0B,CAAC;IAC9D,iDAAiD;IACjD,OAAO,oBAAC,mCAAmC,oBAAK,KAAK,IAAE,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,IAAI,CAAC;IAC3G,OAAO,yCAAK,CAAC;AACf,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React from 'react';\n/* @conditional-compile-remove(call-readiness) */\nimport { useMemo } from 'react';\n/* @conditional-compile-remove(call-readiness) */\nimport { Stack, Text, Link, PrimaryButton, mergeStyleSets, useTheme, Image, ImageFit } from '@fluentui/react';\n/* @conditional-compile-remove(call-readiness) */\nimport { useLocale } from '../../localization';\n/* @conditional-compile-remove(call-readiness) */\nimport { _formatString, _pxToRem } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(call-readiness) */\nimport {\n  browserPermissionContainerStyles,\n  iOSImageContainer,\n  iOSStepsCircleStyles,\n  iOSStepsContainerStyles,\n  iOSStepsDigitTextStyles,\n  iOSStepsTextStyles,\n  linkTextStyles,\n  primaryButtonStyles,\n  primaryTextStyles,\n  secondaryTextStyles,\n  textContainerStyles\n} from './../styles/BrowserPermissionDenied.styles';\nimport { BrowserPermissionDeniedProps, BrowserPermissionDeniedStrings } from './BrowserPermissionDenied';\n/* @conditional-compile-remove(call-readiness) */\nimport { isValidString } from '../utils';\n\n/**\n * @beta\n * Props for BrowserPermissionDeniedIOS component.\n */\nexport interface BrowserPermissionDeniedIOSProps extends BrowserPermissionDeniedProps {\n  /**\n   * Localization strings for BrowserPermissionDeniedIOS component.\n   */\n  strings?: BrowserPermissionDeniedIOSStrings;\n  /**\n   * Link to image source.\n   *\n   * Image is inserted into the top of the component.\n   */\n  imageSource?: string;\n}\n\n/**\n * @beta\n * Strings for BrowserPermissionDeniedIOS component\n */\nexport interface BrowserPermissionDeniedIOSStrings extends BrowserPermissionDeniedStrings {\n  /**\n   * Image alt text\n   */\n  imageAltText: string;\n  /**\n   * Main text string.\n   */\n  primaryText: string;\n  /**\n   * Subtext string.\n   */\n  secondaryText: string;\n  /**\n   * Step 1 string\n   */\n  step1Text: string;\n  /**\n   * Step 1 digit string\n   */\n  step1DigitText: string;\n  /**\n   * Step 2 string\n   */\n  step2Text: string;\n  /**\n   * Step 2 digit string\n   */\n  step2DigitText: string;\n  /**\n   * Step 3 string\n   */\n  step3Text: string;\n  /**\n   * Step 3 digit string\n   */\n  step3DigitText: string;\n  /**\n   * Step 4 string\n   */\n  step4Text: string;\n  /**\n   * Step 4 digit string\n   */\n  step4DigitText: string;\n}\n\n/* @conditional-compile-remove(call-readiness) */\nconst BrowserPermissionDeniedIOSContainer = (props: BrowserPermissionDeniedIOSProps): JSX.Element => {\n  const { imageSource, onTroubleshootingClick, onTryAgainClick, strings, styles } = props;\n  const theme = useTheme();\n\n  const stepsCircleStyle = useMemo(() => {\n    return mergeStyleSets(iOSStepsCircleStyles, { root: { background: theme.palette.neutralLighter } });\n  }, [theme]);\n\n  return (\n    <Stack styles={browserPermissionContainerStyles}>\n      {imageSource && (\n        <Stack styles={mergeStyleSets(iOSImageContainer, { root: { background: theme.palette.neutralLighter } })}>\n          {isValidString(strings?.imageAltText) && (\n            <Image\n              src={imageSource ?? ''}\n              alt={strings?.imageAltText}\n              imageFit={ImageFit.centerContain}\n              style={{ padding: '1.5rem' }}\n            />\n          )}\n        </Stack>\n      )}\n      <Stack style={{ padding: '1rem', paddingBottom: '1.25rem' }}>\n        <Stack styles={textContainerStyles}>\n          {isValidString(strings?.primaryText) && <Text styles={primaryTextStyles}>{strings?.primaryText}</Text>}\n          {isValidString(strings?.secondaryText) && <Text styles={secondaryTextStyles}>{strings?.secondaryText}</Text>}\n          {isValidString(strings?.step1Text) && (\n            <Stack styles={iOSStepsContainerStyles}>\n              <Stack horizontalAlign={'center'} styles={stepsCircleStyle}>\n                <Text styles={iOSStepsDigitTextStyles}>{strings?.step1DigitText}</Text>\n              </Stack>\n              <Text styles={iOSStepsTextStyles}>{strings?.step1Text}</Text>\n            </Stack>\n          )}\n          {isValidString(strings?.step2Text) && (\n            <Stack styles={iOSStepsContainerStyles}>\n              <Stack horizontalAlign={'center'} styles={stepsCircleStyle}>\n                <Text styles={iOSStepsDigitTextStyles}>{strings?.step2DigitText}</Text>\n              </Stack>\n              <Text styles={iOSStepsTextStyles}>{strings?.step2Text}</Text>\n            </Stack>\n          )}\n          {isValidString(strings?.step3Text) && (\n            <Stack styles={iOSStepsContainerStyles}>\n              <Stack horizontalAlign={'center'} styles={stepsCircleStyle}>\n                <Text styles={iOSStepsDigitTextStyles}>{strings?.step3DigitText}</Text>\n              </Stack>\n              <Text styles={iOSStepsTextStyles}>{strings?.step3Text}</Text>\n            </Stack>\n          )}\n          {isValidString(strings?.step4Text) && (\n            <Stack styles={mergeStyleSets(iOSStepsContainerStyles, { root: { paddingBottom: '1.5rem' } })}>\n              <Stack horizontalAlign={'center'} styles={stepsCircleStyle}>\n                <Text styles={iOSStepsDigitTextStyles}>{strings?.step4DigitText}</Text>\n              </Stack>\n              <Text styles={iOSStepsTextStyles}>{strings?.step4Text}</Text>\n            </Stack>\n          )}\n          {isValidString(strings?.primaryButtonText) && (\n            <PrimaryButton\n              styles={mergeStyleSets(primaryButtonStyles, styles?.primaryButton)}\n              text={strings?.primaryButtonText}\n              onClick={onTryAgainClick}\n            />\n          )}\n          {isValidString(strings?.linkText) && (\n            <Link styles={mergeStyleSets(linkTextStyles, styles?.troubleshootingLink)} onClick={onTroubleshootingClick}>\n              {strings?.linkText}\n            </Link>\n          )}\n        </Stack>\n      </Stack>\n    </Stack>\n  );\n};\n\n/**\n * @beta\n *\n * Component to allow Contoso to help their end user with their devices should their browser experience device permission issues.\n */\nexport const BrowserPermissionDeniedIOS = (props: BrowserPermissionDeniedIOSProps): JSX.Element => {\n  /* @conditional-compile-remove(call-readiness) */\n  const locale = useLocale().strings.BrowserPermissionDeniedIOS;\n  /* @conditional-compile-remove(call-readiness) */\n  return <BrowserPermissionDeniedIOSContainer {...props} strings={props.strings ? props.strings : locale} />;\n  return <></>;\n};\n\"../../../../acs-ui-common/src\""]}
+{"version":3,"file":"BrowserPermissionDeniedIOS.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/DevicePermissions/BrowserPermissionDeniedIOS.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 { useMemo } from 'react';\n/* @conditional-compile-remove(call-readiness) */\nimport { Stack, Text, Link, PrimaryButton, mergeStyleSets, useTheme, Image, ImageFit } from '@fluentui/react';\n/* @conditional-compile-remove(call-readiness) */\nimport { useLocale } from '../../localization';\n/* @conditional-compile-remove(call-readiness) */\nimport { _formatString, _pxToRem } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(call-readiness) */\nimport {\n  browserPermissionContainerStyles,\n  iOSImageContainer,\n  iOSStepsCircleStyles,\n  iOSStepsContainerStyles,\n  iOSStepsDigitTextStyles,\n  iOSStepsTextStyles,\n  linkTextStyles,\n  primaryButtonStyles,\n  primaryTextStyles,\n  secondaryTextStyles,\n  textContainerStyles\n} from './../styles/BrowserPermissionDenied.styles';\nimport { BrowserPermissionDeniedProps, BrowserPermissionDeniedStrings } from './BrowserPermissionDenied';\n/* @conditional-compile-remove(call-readiness) */\nimport { isValidString } from '../utils';\n\n/**\n * @beta\n * Props for BrowserPermissionDeniedIOS component.\n */\nexport interface BrowserPermissionDeniedIOSProps extends BrowserPermissionDeniedProps {\n  /**\n   * Localization strings for BrowserPermissionDeniedIOS component.\n   */\n  strings?: BrowserPermissionDeniedIOSStrings;\n  /**\n   * Link to image source.\n   *\n   * Image is inserted into the top of the component.\n   */\n  imageSource?: string;\n}\n\n/**\n * @beta\n * Strings for BrowserPermissionDeniedIOS component\n */\nexport interface BrowserPermissionDeniedIOSStrings extends BrowserPermissionDeniedStrings {\n  /**\n   * Image alt text\n   */\n  imageAltText: string;\n  /**\n   * Main text string.\n   */\n  primaryText: string;\n  /**\n   * Subtext string.\n   */\n  secondaryText: string;\n  /**\n   * Step 1 string\n   */\n  step1Text: string;\n  /**\n   * Step 1 digit string\n   */\n  step1DigitText: string;\n  /**\n   * Step 2 string\n   */\n  step2Text: string;\n  /**\n   * Step 2 digit string\n   */\n  step2DigitText: string;\n  /**\n   * Step 3 string\n   */\n  step3Text: string;\n  /**\n   * Step 3 digit string\n   */\n  step3DigitText: string;\n  /**\n   * Step 4 string\n   */\n  step4Text: string;\n  /**\n   * Step 4 digit string\n   */\n  step4DigitText: string;\n}\n\n/* @conditional-compile-remove(call-readiness) */\nconst BrowserPermissionDeniedIOSContainer = (props: BrowserPermissionDeniedIOSProps): JSX.Element => {\n  const { imageSource, onTroubleshootingClick, onTryAgainClick, strings, styles } = props;\n  const theme = useTheme();\n\n  const stepsCircleStyle = useMemo(() => {\n    return mergeStyleSets(iOSStepsCircleStyles, { root: { background: theme.palette.neutralLighter } });\n  }, [theme]);\n\n  return (\n    <Stack styles={browserPermissionContainerStyles}>\n      {imageSource && (\n        <Stack styles={mergeStyleSets(iOSImageContainer, { root: { background: theme.palette.neutralLighter } })}>\n          {isValidString(strings?.imageAltText) && (\n            <Image\n              src={imageSource ?? ''}\n              alt={strings?.imageAltText}\n              imageFit={ImageFit.centerContain}\n              style={{ padding: '1.5rem' }}\n            />\n          )}\n        </Stack>\n      )}\n      <Stack style={{ padding: '1rem', paddingBottom: '1.25rem' }}>\n        <Stack styles={textContainerStyles}>\n          {isValidString(strings?.primaryText) && <Text styles={primaryTextStyles}>{strings?.primaryText}</Text>}\n          {isValidString(strings?.secondaryText) && <Text styles={secondaryTextStyles}>{strings?.secondaryText}</Text>}\n          {isValidString(strings?.step1Text) && (\n            <Stack styles={iOSStepsContainerStyles}>\n              <Stack horizontalAlign={'center'} styles={stepsCircleStyle}>\n                <Text styles={iOSStepsDigitTextStyles}>{strings?.step1DigitText}</Text>\n              </Stack>\n              <Text styles={iOSStepsTextStyles}>{strings?.step1Text}</Text>\n            </Stack>\n          )}\n          {isValidString(strings?.step2Text) && (\n            <Stack styles={iOSStepsContainerStyles}>\n              <Stack horizontalAlign={'center'} styles={stepsCircleStyle}>\n                <Text styles={iOSStepsDigitTextStyles}>{strings?.step2DigitText}</Text>\n              </Stack>\n              <Text styles={iOSStepsTextStyles}>{strings?.step2Text}</Text>\n            </Stack>\n          )}\n          {isValidString(strings?.step3Text) && (\n            <Stack styles={iOSStepsContainerStyles}>\n              <Stack horizontalAlign={'center'} styles={stepsCircleStyle}>\n                <Text styles={iOSStepsDigitTextStyles}>{strings?.step3DigitText}</Text>\n              </Stack>\n              <Text styles={iOSStepsTextStyles}>{strings?.step3Text}</Text>\n            </Stack>\n          )}\n          {isValidString(strings?.step4Text) && (\n            <Stack styles={mergeStyleSets(iOSStepsContainerStyles, { root: { paddingBottom: '1.5rem' } })}>\n              <Stack horizontalAlign={'center'} styles={stepsCircleStyle}>\n                <Text styles={iOSStepsDigitTextStyles}>{strings?.step4DigitText}</Text>\n              </Stack>\n              <Text styles={iOSStepsTextStyles}>{strings?.step4Text}</Text>\n            </Stack>\n          )}\n          {isValidString(strings?.primaryButtonText) && (\n            <PrimaryButton\n              styles={mergeStyleSets(primaryButtonStyles, styles?.primaryButton)}\n              text={strings?.primaryButtonText}\n              onClick={onTryAgainClick}\n            />\n          )}\n          {isValidString(strings?.linkText) && (\n            <Link styles={mergeStyleSets(linkTextStyles, styles?.troubleshootingLink)} onClick={onTroubleshootingClick}>\n              {strings?.linkText}\n            </Link>\n          )}\n        </Stack>\n      </Stack>\n    </Stack>\n  );\n};\n\n/**\n * @beta\n *\n * Component to allow Contoso to help their end user with their devices should their browser experience device permission issues.\n */\nexport const BrowserPermissionDeniedIOS = (props: BrowserPermissionDeniedIOSProps): JSX.Element => {\n  /* @conditional-compile-remove(call-readiness) */\n  const locale = useLocale().strings.BrowserPermissionDeniedIOS;\n  /* @conditional-compile-remove(call-readiness) */\n  return <BrowserPermissionDeniedIOSContainer {...props} strings={props.strings ? props.strings : locale} />;\n  return <></>;\n};\n\"../../../../acs-ui-common/src\""]}

package/dist/dist-esm/react-components/src/components/DevicePermissions/DevicePermissionDropdown.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IDropdownOption, IDropdownStyles } from '@fluentui/react';
 /**
  * Strings of {@link DevicePermissionDropdown} that can be overridden.

package/dist/dist-esm/react-components/src/components/DevicePermissions/DevicePermissionDropdown.js

@@ -1,5 +1,5 @@
 // Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
+// Licensed under the MIT License.
 import { Dropdown, Stack, Text } from '@fluentui/react';
 import React from 'react';
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"DevicePermissionDropdown.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/DevicePermissions/DevicePermissionDropdown.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,QAAQ,EAAoC,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC1F,OAAO,KAAK,MAAM,OAAO,CAAC;AA8D1B;;;;GAIG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;IAC9F,MAAM,EAAE,IAAI,EAAE,mBAAmB,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAE1F,MAAM,mBAAmB,GAAG,GAAgB,EAAE;QAC5C,OAAO,CACL,oBAAC,KAAK,IAAC,UAAU,QAAC,aAAa,EAAC,QAAQ;YACrC,IAAI;YACL,oBAAC,IAAI,QAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,eAAe,CAAQ,CACjC,CACT,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,GAAgB,EAAE;QAC1C,OAAO,oBAAC,IAAI,QAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,mBAAmB,CAAQ,CAAC;IACrD,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,QAAQ,kBACK,qBAAqB,EACjC,WAAW,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,eAAe,EACrC,KAAK,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,EACrB,mBAAmB,EAAE,mBAAmB,EACxC,iBAAiB,EAAE,iBAAiB,EACpC,OAAO,EAAE,GAAG,EAAE;YACZ,IAAI,mBAAmB,EAAE;gBACvB,mBAAmB,CAAC,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;aAChE;YACD,OAAO,aAAP,OAAO,uBAAP,OAAO,EAAI,CAAC;QACd,CAAC,EACD,OAAO,EAAE,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,EAAE,EACtB,MAAM,EAAE,MAAM,GACd,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { Dropdown, IDropdownOption, IDropdownStyles, Stack, Text } from '@fluentui/react';\nimport React from 'react';\n\n/**\n * Strings of {@link DevicePermissionDropdown} that can be overridden.\n *\n * @internal\n */\nexport interface _DevicePermissionDropdownStrings {\n  /**\n   * dropdown label\n   */\n\n  label?: string;\n  /**\n   * dropdown placeholder\n   */\n  placeHolderText: string;\n  /** string for action button  */\n  actionButtonContent?: string;\n}\n\n/**\n * Props for {@link _DevicePermissionDropdown}.\n *\n * @internal\n */\nexport interface _DevicePermissionDropdownProps {\n  /**\n   * icon shown in dropdown placeholder\n   */\n  icon?: JSX.Element;\n  /**\n   * Dropdown content\n   */\n  options?: IDropdownOption[];\n  /**\n   * Ask for permissions of devices.\n   *\n   * @remarks\n   * Browser permission window will pop up if permissions are not granted yet\n   *\n   * @param constrain - Define constraints for accessing local devices {@link @azure/communication-calling#PermissionConstraints }\n   */\n  askDevicePermission?(constrain: _PermissionConstraints): Promise<void>;\n  /**\n   * Optional callback when component is clicked\n   */\n  onClick?: () => void;\n  /**\n   * Define constraints for accessing local devices  {@link @azure/communication-calling#PermissionConstraints }\n   */\n  constrain?: _PermissionConstraints;\n  /**\n   * Strings for devicepermissiondropdown\n   */\n  strings?: _DevicePermissionDropdownStrings;\n  /**\n   * Styles for devicepermissiondropdown\n   */\n  styles?: Partial<IDropdownStyles>;\n}\n\n/**\n * A dropdown to trigger device permission prompt\n *\n * @internal\n */\nexport const _DevicePermissionDropdown = (props: _DevicePermissionDropdownProps): JSX.Element => {\n  const { icon, askDevicePermission, onClick, constrain, strings, options, styles } = props;\n\n  const onRenderPlaceholder = (): JSX.Element => {\n    return (\n      <Stack horizontal verticalAlign=\"center\">\n        {icon}\n        <Text>{strings?.placeHolderText}</Text>\n      </Stack>\n    );\n  };\n\n  const onRenderCaretDown = (): JSX.Element => {\n    return <Text>{strings?.actionButtonContent}</Text>;\n  };\n\n  return (\n    <Dropdown\n      data-ui-id={'permission-dropdown'}\n      placeholder={strings?.placeHolderText}\n      label={strings?.label}\n      onRenderPlaceholder={onRenderPlaceholder}\n      onRenderCaretDown={onRenderCaretDown}\n      onClick={() => {\n        if (askDevicePermission) {\n          askDevicePermission(constrain ?? { video: true, audio: true });\n        }\n        onClick?.();\n      }}\n      options={options ?? []}\n      styles={styles}\n    />\n  );\n};\n\n/**\n * Define constraints for accessing local devices  {@link @azure/communication-calling#PermissionConstraints }\n *\n * @internal\n */\nexport type _PermissionConstraints = {\n  audio: boolean;\n  video: boolean;\n};\n"]}
+{"version":3,"file":"DevicePermissionDropdown.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/DevicePermissions/DevicePermissionDropdown.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,QAAQ,EAAoC,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC1F,OAAO,KAAK,MAAM,OAAO,CAAC;AA8D1B;;;;GAIG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;IAC9F,MAAM,EAAE,IAAI,EAAE,mBAAmB,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAE1F,MAAM,mBAAmB,GAAG,GAAgB,EAAE;QAC5C,OAAO,CACL,oBAAC,KAAK,IAAC,UAAU,QAAC,aAAa,EAAC,QAAQ;YACrC,IAAI;YACL,oBAAC,IAAI,QAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,eAAe,CAAQ,CACjC,CACT,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,GAAgB,EAAE;QAC1C,OAAO,oBAAC,IAAI,QAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,mBAAmB,CAAQ,CAAC;IACrD,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,QAAQ,kBACK,qBAAqB,EACjC,WAAW,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,eAAe,EACrC,KAAK,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,EACrB,mBAAmB,EAAE,mBAAmB,EACxC,iBAAiB,EAAE,iBAAiB,EACpC,OAAO,EAAE,GAAG,EAAE;YACZ,IAAI,mBAAmB,EAAE;gBACvB,mBAAmB,CAAC,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;aAChE;YACD,OAAO,aAAP,OAAO,uBAAP,OAAO,EAAI,CAAC;QACd,CAAC,EACD,OAAO,EAAE,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,EAAE,EACtB,MAAM,EAAE,MAAM,GACd,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Dropdown, IDropdownOption, IDropdownStyles, Stack, Text } from '@fluentui/react';\nimport React from 'react';\n\n/**\n * Strings of {@link DevicePermissionDropdown} that can be overridden.\n *\n * @internal\n */\nexport interface _DevicePermissionDropdownStrings {\n  /**\n   * dropdown label\n   */\n\n  label?: string;\n  /**\n   * dropdown placeholder\n   */\n  placeHolderText: string;\n  /** string for action button  */\n  actionButtonContent?: string;\n}\n\n/**\n * Props for {@link _DevicePermissionDropdown}.\n *\n * @internal\n */\nexport interface _DevicePermissionDropdownProps {\n  /**\n   * icon shown in dropdown placeholder\n   */\n  icon?: JSX.Element;\n  /**\n   * Dropdown content\n   */\n  options?: IDropdownOption[];\n  /**\n   * Ask for permissions of devices.\n   *\n   * @remarks\n   * Browser permission window will pop up if permissions are not granted yet\n   *\n   * @param constrain - Define constraints for accessing local devices {@link @azure/communication-calling#PermissionConstraints }\n   */\n  askDevicePermission?(constrain: _PermissionConstraints): Promise<void>;\n  /**\n   * Optional callback when component is clicked\n   */\n  onClick?: () => void;\n  /**\n   * Define constraints for accessing local devices  {@link @azure/communication-calling#PermissionConstraints }\n   */\n  constrain?: _PermissionConstraints;\n  /**\n   * Strings for devicepermissiondropdown\n   */\n  strings?: _DevicePermissionDropdownStrings;\n  /**\n   * Styles for devicepermissiondropdown\n   */\n  styles?: Partial<IDropdownStyles>;\n}\n\n/**\n * A dropdown to trigger device permission prompt\n *\n * @internal\n */\nexport const _DevicePermissionDropdown = (props: _DevicePermissionDropdownProps): JSX.Element => {\n  const { icon, askDevicePermission, onClick, constrain, strings, options, styles } = props;\n\n  const onRenderPlaceholder = (): JSX.Element => {\n    return (\n      <Stack horizontal verticalAlign=\"center\">\n        {icon}\n        <Text>{strings?.placeHolderText}</Text>\n      </Stack>\n    );\n  };\n\n  const onRenderCaretDown = (): JSX.Element => {\n    return <Text>{strings?.actionButtonContent}</Text>;\n  };\n\n  return (\n    <Dropdown\n      data-ui-id={'permission-dropdown'}\n      placeholder={strings?.placeHolderText}\n      label={strings?.label}\n      onRenderPlaceholder={onRenderPlaceholder}\n      onRenderCaretDown={onRenderCaretDown}\n      onClick={() => {\n        if (askDevicePermission) {\n          askDevicePermission(constrain ?? { video: true, audio: true });\n        }\n        onClick?.();\n      }}\n      options={options ?? []}\n      styles={styles}\n    />\n  );\n};\n\n/**\n * Define constraints for accessing local devices  {@link @azure/communication-calling#PermissionConstraints }\n *\n * @internal\n */\nexport type _PermissionConstraints = {\n  audio: boolean;\n  video: boolean;\n};\n"]}

package/dist/dist-esm/react-components/src/components/DevicePermissions/SitePermissions.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SitePermissionsStrings, SitePermissionsStyles } from './SitePermissionsScaffolding';
 /**
  * @beta

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

@@ -1,5 +1,5 @@
 // Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
+// Licensed under the MIT License.
 import React from 'react';
 /* @conditional-compile-remove(call-readiness) */
 import { useLocale } from '../../localization';

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

@@ -1 +1 @@
-{"version":3,"file":"SitePermissions.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/DevicePermissions/SitePermissions.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,iDAAiD;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,iDAAiD;AACjD,OAAO,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AACxE,iDAAiD;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAwDjD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,CAAC,KAA8C,EAAe,EAAE;;IAChH,iDAAiD;IACjD,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC;IAEnC,iDAAiD;IACjD,MAAM,OAAO,GAAG,eAAe,CAC7B,KAAK,CAAC,IAAI,KAAK,QAAQ;QACrB,CAAC,CAAC,KAAK,CAAC,WAAW,KAAK,QAAQ;YAC9B,CAAC,CAAC,MAAM,CAAC,8CAA8C;YACvD,CAAC,CAAC,MAAM,CAAC,wCAAwC;QACnD,CAAC,CAAC,KAAK,CAAC,IAAI,KAAK,SAAS;YAC1B,CAAC,CAAC,MAAM,CAAC,yCAAyC;YAClD,CAAC,CAAC,MAAM,CAAC,uCAAuC,EAClD,KAAK,CAAC,OAAO,CACd,CAAC;IAEF,iDAAiD;IACjD,MAAM,cAAc,GAClB,CAAA,MAAA,KAAK,CAAC,kBAAkB,mCAAI,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,sBAAsB,CAAC;IAC9G,iDAAiD;IACjD,MAAM,kBAAkB,GACtB,CAAA,MAAA,KAAK,CAAC,kBAAkB,mCAAI,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,mBAAmB,CAAC;IACxG,iDAAiD;IACjD,MAAM,iBAAiB,GAAG,MAAA,KAAK,CAAC,kBAAkB,mCAAI,wBAAwB,CAAC;IAE/E,iDAAiD;IACjD,OAAO,CACL,oBAAC,wBAAwB,oBACnB,KAAK,IACT,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,EAC9B,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,kBAAkB,EACtC,oBAAoB,EAAE,KAAK,CAAC,qBAAqB,IACjD,CACH,CAAC;IACF,OAAO,yCAAK,CAAC;AACf,CAAC,CAAC;AAmBF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;;IAC9F,iDAAiD;IACjD,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC;IAEnC,iDAAiD;IACjD,MAAM,OAAO,GAAG,eAAe,CAC7B,KAAK,CAAC,IAAI,KAAK,QAAQ;QACrB,CAAC,CAAC,KAAK,CAAC,WAAW,KAAK,QAAQ;YAC9B,CAAC,CAAC,MAAM,CAAC,qCAAqC;YAC9C,CAAC,CAAC,MAAM,CAAC,+BAA+B;QAC1C,CAAC,CAAC,KAAK,CAAC,IAAI,KAAK,SAAS;YAC1B,CAAC,CAAC,MAAM,CAAC,gCAAgC;YACzC,CAAC,CAAC,MAAM,CAAC,8BAA8B,EACzC,KAAK,CAAC,OAAO,CACd,CAAC;IAEF,iDAAiD;IACjD,MAAM,QAAQ,GACZ,CAAA,MAAA,KAAK,CAAC,kBAAkB,mCAAI,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,mBAAmB,CAAC;IAExG,iDAAiD;IACjD,OAAO,CACL,oBAAC,wBAAwB,oBACnB,KAAK,IACT,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,QAAQ,EACxB,oBAAoB,EAAE,KAAK,CAAC,qBAAqB,IACjD,CACH,CAAC;IACF,OAAO,yCAAK,CAAC;AACf,CAAC,CAAC;AAmBF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAiC,EAAe,EAAE;;IACtF,iDAAiD;IACjD,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC;IAEnC,iDAAiD;IACjD,MAAM,OAAO,GAAG,eAAe,CAC7B,KAAK,CAAC,IAAI,KAAK,QAAQ;QACrB,CAAC,CAAC,KAAK,CAAC,WAAW,KAAK,QAAQ;YAC9B,CAAC,CAAC,MAAM,CAAC,iCAAiC;YAC1C,CAAC,CAAC,MAAM,CAAC,2BAA2B;QACtC,CAAC,CAAC,KAAK,CAAC,IAAI,KAAK,SAAS;YAC1B,CAAC,CAAC,MAAM,CAAC,4BAA4B;YACrC,CAAC,CAAC,MAAM,CAAC,0BAA0B,EACrC,KAAK,CAAC,OAAO,CACd,CAAC;IAEF,iDAAiD;IACjD,MAAM,QAAQ,GACZ,CAAA,MAAA,KAAK,CAAC,cAAc,mCAAI,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,sBAAsB,CAAC;IAE1G,iDAAiD;IACjD,OAAO,CACL,oBAAC,wBAAwB,oBACnB,KAAK,IACT,OAAO,EAAE,OAAO,EAChB,kBAAkB,EAAE,QAAQ,EAC5B,oBAAoB,EAAE,KAAK,CAAC,qBAAqB,IACjD,CACH,CAAC;IACF,OAAO,yCAAK,CAAC;AACf,CAAC,CAAC","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   * Kind of the Site Permissions component.\n   */\n  kind: '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.kind === 'denied'\n      ? props.browserHint === 'safari'\n        ? locale.CameraAndMicrophoneSitePermissionsDeniedSafari\n        : locale.CameraAndMicrophoneSitePermissionsDenied\n      : props.kind === '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.kind === 'denied' ? 'SitePermissionCameraDenied' : 'SitePermissionCamera';\n  /* @conditional-compile-remove(call-readiness) */\n  const microphoneIconName =\n    props.microphoneIconName ?? props.kind === '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.kind === 'denied'\n      ? props.browserHint === 'safari'\n        ? locale.MicrophoneSitePermissionsDeniedSafari\n        : locale.MicrophoneSitePermissionsDenied\n      : props.kind === '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.kind === '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.kind === 'denied'\n      ? props.browserHint === 'safari'\n        ? locale.CameraSitePermissionsDeniedSafari\n        : locale.CameraSitePermissionsDenied\n      : props.kind === '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.kind === '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"]}
+{"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   * Kind of the Site Permissions component.\n   */\n  kind: '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.kind === 'denied'\n      ? props.browserHint === 'safari'\n        ? locale.CameraAndMicrophoneSitePermissionsDeniedSafari\n        : locale.CameraAndMicrophoneSitePermissionsDenied\n      : props.kind === '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.kind === 'denied' ? 'SitePermissionCameraDenied' : 'SitePermissionCamera';\n  /* @conditional-compile-remove(call-readiness) */\n  const microphoneIconName =\n    props.microphoneIconName ?? props.kind === '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.kind === 'denied'\n      ? props.browserHint === 'safari'\n        ? locale.MicrophoneSitePermissionsDeniedSafari\n        : locale.MicrophoneSitePermissionsDenied\n      : props.kind === '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.kind === '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.kind === 'denied'\n      ? props.browserHint === 'safari'\n        ? locale.CameraSitePermissionsDeniedSafari\n        : locale.CameraSitePermissionsDenied\n      : props.kind === '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.kind === '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/SitePermissionsScaffolding.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ILinkStyles, IButtonStyles } from '@fluentui/react';
 import { BaseCustomStyles } from '../../types';
 /**

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

@@ -1,5 +1,5 @@
 // Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
+// Licensed under the MIT License.
 import React from 'react';
 import { Stack, Text, Link, Icon, useTheme, PrimaryButton, mergeStyleSets } from '@fluentui/react';
 import { _formatString } from "../../../../acs-ui-common/src";

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

@@ -1 +1 @@
-{"version":3,"file":"SitePermissionsScaffolding.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/DevicePermissions/SitePermissionsScaffolding.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,aAAa,EAGb,cAAc,EACf,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,aAAa,EAAY,sCAAgC;AAClE,OAAO,EACL,yBAAyB,EACzB,mBAAmB,EACnB,iBAAiB,EACjB,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,mBAAmB,EACnB,yBAAyB,EACzB,mBAAmB,EACpB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAsFzC;;GAEG;AACH,MAAM,MAAM,GAAG,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC;AAEvC,eAAe;AACf,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,KAAoC,EAAe,EAAE;;IAC5F,MAAM,EAAE,OAAO,EAAE,sBAAsB,EAAE,oBAAoB,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IACjF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,OAAO,CACL,oBAAC,KAAK,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,gBAAc,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS;QAC3G,oBAAC,KAAK,IAAC,MAAM,EAAE,yBAAyB,EAAE,UAAU,QAAC,eAAe,EAAE,QAAQ,EAAE,YAAY,QAAC,MAAM,EAAE,MAAM;YACxG,KAAK,CAAC,cAAc,IAAI,CACvB,oBAAC,KAAK;gBACJ,oBAAC,IAAI,IAAC,MAAM,EAAE,iBAAiB,EAAE,QAAQ,EAAE,KAAK,CAAC,cAAc,GAAS,CAClE,CACT;YACA,KAAK,CAAC,iBAAiB,IAAI,CAC1B,oBAAC,KAAK,IAAC,MAAM,EAAE,mBAAmB,EAAE,UAAU;gBAC5C,oBAAC,IAAI,IAAC,MAAM,EAAE,yBAAyB,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAE,KAAK,CAAC,iBAAiB,GAAS,CACpF,CACT;YACA,KAAK,CAAC,kBAAkB,IAAI,CAC3B,oBAAC,KAAK;gBACJ,oBAAC,IAAI,IAAC,MAAM,EAAE,iBAAiB,EAAE,QAAQ,EAAE,KAAK,CAAC,kBAAkB,GAAS,CACtE,CACT,CACK;QACR,oBAAC,KAAK,IAAC,MAAM,EAAE,mBAAmB;YAC/B,OAAO,IAAI,aAAa,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,CAAC,IAAI,CACjD,oBAAC,IAAI,IAAC,MAAM,EAAE,iBAAiB,IAC5B,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,WAAW,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CACpF,CACR;YACA,OAAO,IAAI,aAAa,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,CAAC,IAAI,CACnD,oBAAC,IAAI,IAAC,MAAM,EAAE,mBAAmB,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,CAAQ,CACnE;YAEA,oBAAoB,IAAI,aAAa,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,iBAAiB,CAAC,IAAI,CACpE,oBAAC,aAAa,IACZ,MAAM,EAAE,cAAc,CAAC,mBAAmB,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,aAAa,CAAC,EACxE,IAAI,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,iBAAiB,EAChC,OAAO,EAAE,oBAAoB,GAC7B,CACH;YACA,sBAAsB,IAAI,aAAa,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CAAC,IAAI,CAC7D,oBAAC,IAAI,IACH,MAAM,EAAE,cAAc,CAAC,cAAc,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,mBAAmB,CAAC,EACzE,OAAO,EAAE,sBAAsB,IAE9B,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CACb,CACR,CACK,CACF,CACT,CAAC;AACJ,CAAC,CAAC","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\""]}
+{"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/DevicesButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IContextualMenuItem, IContextualMenuItemStyles, IContextualMenuStyles } from '@fluentui/react';
 import { ControlBarButtonProps, ControlBarButtonStyles } from './ControlBarButton';
 /**

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

@@ -1,5 +1,5 @@
 // Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
+// Licensed under the MIT License.
 import { ContextualMenuItemType, merge } from '@fluentui/react';
 import React from 'react';
 import { useLocale } from '../localization';

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

@@ -1 +1 @@
-{"version":3,"file":"DevicesButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/DevicesButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n  ContextualMenuItemType,\n  IContextualMenuItem,\n  IContextualMenuItemStyles,\n  IContextualMenuProps,\n  IContextualMenuStyles,\n  merge\n} from '@fluentui/react';\nimport React from 'react';\nimport { useLocale } from '../localization';\nimport { ControlBarButton, ControlBarButtonProps, ControlBarButtonStyles } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { buttonFlyoutItemStyles } from './styles/ControlBar.styles';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/**\n * Styles for the {@link DevicesButton} menu.\n *\n * @public\n */\nexport interface DevicesButtonContextualMenuStyles extends IContextualMenuStyles {\n  /**\n   * Styles for the items inside the {@link DevicesButton} button menu.\n   */\n  menuItemStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Styles for the Devices button menu items.\n *\n * @public\n */\nexport interface DevicesButtonStyles extends ControlBarButtonStyles {\n  /**\n   * Styles for the {@link DevicesButton} menu.\n   */\n  menuStyles?: Partial<DevicesButtonContextualMenuStyles>;\n}\n\n/**\n * A device, e.g. camera, microphone, or speaker, in the {@link DevicesButton} flyout.\n *\n * @public\n */\nexport interface OptionsDevice {\n  /**\n   * Device unique identifier\n   */\n  id: string;\n  /**\n   * Device name\n   */\n  name: string;\n}\n\n/**\n * Strings of {@link DevicesButton} that can be overridden.\n *\n * @public\n */\nexport interface DevicesButtonStrings {\n  /**\n   * Label of button\n   */\n  label: string;\n  /**\n   * Button tooltip content.\n   */\n  tooltipContent?: string;\n  /**\n   * Title of camera menu\n   */\n  cameraMenuTitle: string;\n  /**\n   * Title of microphone menu\n   */\n  microphoneMenuTitle: string;\n  /**\n   * Title of speaker menu\n   */\n  speakerMenuTitle: string;\n  /**\n   * Tooltip of camera menu\n   */\n  cameraMenuTooltip: string;\n  /**\n   * Tooltip of microphone menu\n   */\n  microphoneMenuTooltip: string;\n  /**\n   * Tooltip of speaker menu\n   */\n  speakerMenuTooltip: string;\n}\n\n/**\n * Props for {@link DevicesButton}.\n *\n * @public\n */\nexport interface DevicesButtonProps extends ControlBarButtonProps {\n  /**\n   * Available microphones for selection\n   */\n  microphones?: OptionsDevice[];\n  /**\n   * Available speakers for selection\n   */\n  speakers?: OptionsDevice[];\n  /**\n   * Available cameras for selection\n   */\n  cameras?: OptionsDevice[];\n  /**\n   * Microphone that is shown as currently selected\n   */\n  selectedMicrophone?: OptionsDevice;\n  /**\n   * Speaker that is shown as currently selected\n   */\n  selectedSpeaker?: OptionsDevice;\n  /**\n   * Camera that is shown as currently selected\n   */\n  selectedCamera?: OptionsDevice;\n  /**\n   * Callback when a camera is selected\n   */\n  onSelectCamera?: (device: OptionsDevice) => Promise<void>;\n  /**\n   * Callback when a microphone is selected\n   */\n  onSelectMicrophone?: (device: OptionsDevice) => Promise<void>;\n  /**\n   * Speaker when a speaker is selected\n   */\n  onSelectSpeaker?: (device: OptionsDevice) => Promise<void>;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<DevicesButtonStrings>;\n  /**\n   * Option to increase the touch targets of the button flyout menu items from 36px to 48px.\n   * Recommended for mobile devices.\n   */\n  styles?: DevicesButtonStyles;\n}\n\n/**\n * Subset props for various buttons that show device selection menus.\n *\n * @internal\n */\nexport interface DeviceMenuProps {\n  microphones?: OptionsDevice[];\n  speakers?: OptionsDevice[];\n  cameras?: OptionsDevice[];\n  selectedMicrophone?: OptionsDevice;\n  selectedSpeaker?: OptionsDevice;\n  selectedCamera?: OptionsDevice;\n  onSelectCamera?: (device: OptionsDevice) => Promise<void>;\n  onSelectMicrophone?: (device: OptionsDevice) => Promise<void>;\n  onSelectSpeaker?: (device: OptionsDevice) => Promise<void>;\n  styles?: Partial<DeviceMenuStyles>;\n}\n\n/**\n * Subset of strings for various buttons that show device selection menus.\n *\n * @internal\n */\nexport interface DeviceMenuStrings {\n  /**\n   * Title for Camera section in the contextual menu\n   */\n  cameraMenuTitle?: string;\n  /**\n   * Title for Audio Device section in the contextual menu\n   *\n   * @remark Used in place of microphoneMenuTitle when speakers can be enumerated\n   */\n  audioDeviceMenuTitle?: string;\n  /**\n   * Title for Microphone section in the contextual menu\n   *\n   * @remark Used when speakers can be enumerated\n   */\n  microphoneMenuTitle?: string;\n  /**\n   * Title for Speaker section in the contextual menu\n   */\n  speakerMenuTitle?: string;\n  /**\n   * Tooltip label for Camera section in the contextual menu\n   */\n  cameraMenuTooltip?: string;\n  /**\n   * Tooltip label for Audio Device section in the contextual menu\n   *\n   * @remark Used in place of microphoneMenuTooltip when speakers can be enumerated\n   */\n  audioDeviceMenuTooltip?: string;\n  /**\n   * Tooltip label for Microphone section in the contextual menu\n   *\n   * @remark Used when speakers can be enumerated\n   */\n  microphoneMenuTooltip?: string;\n  /**\n   * Tooltip label for Speaker section in the contextual menu\n   */\n  speakerMenuTooltip?: string;\n}\n\n/**\n * Styles for flyouts used by various buttons for device selection flyouts.\n *\n * @internal\n */\nexport interface DeviceMenuStyles extends IContextualMenuStyles {\n  menuItemStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Generates default {@link IContextualMenuProps} for buttons that\n * show a drop-down to select devices to use.\n *\n * @internal\n */\nexport const generateDefaultDeviceMenuProps = (\n  props: DeviceMenuProps,\n  strings: DeviceMenuStrings,\n  primaryActionItem?: IContextualMenuItem,\n  isSelectCamAllowed = true,\n  isSelectMicAllowed = true\n): { items: IContextualMenuItem[] } | undefined => {\n  const {\n    microphones,\n    speakers,\n    cameras,\n    selectedMicrophone,\n    selectedSpeaker,\n    selectedCamera,\n    onSelectCamera,\n    onSelectMicrophone,\n    onSelectSpeaker\n  } = props;\n\n  const defaultMenuProps: IContextualMenuProps = {\n    items: [],\n    styles: props.styles,\n    calloutProps: {\n      styles: {\n        root: {\n          // Confine the menu to the parents bounds.\n          // More info: https://github.com/microsoft/fluentui/issues/18835\n          // NB: 95% to keep some space for margin, drop shadow etc around the Callout.\n          maxWidth: '95%'\n        }\n      },\n      preventDismissOnEvent\n    }\n  };\n\n  const menuItemStyles = merge(buttonFlyoutItemStyles, props.styles?.menuItemStyles ?? {});\n\n  if (cameras && selectedCamera && onSelectCamera && isSelectCamAllowed) {\n    defaultMenuProps.items.push({\n      key: 'cameras',\n      itemType: ContextualMenuItemType.Section,\n      sectionProps: {\n        title: strings.cameraMenuTitle,\n        items: [\n          {\n            key: 'sectionCamera',\n            title: strings.cameraMenuTooltip,\n            subMenuProps: {\n              calloutProps: {\n                preventDismissOnEvent\n              },\n              items: cameras.map((camera) => ({\n                key: camera.id,\n                text: camera.name,\n                title: camera.name,\n                iconProps: {\n                  iconName: 'ContextMenuCameraIcon',\n                  styles: { root: { lineHeight: 0 } }\n                },\n                itemProps: {\n                  styles: menuItemStyles\n                },\n                canCheck: true,\n                isChecked: camera.id === selectedCamera?.id,\n                onClick: () => {\n                  if (camera.id !== selectedCamera?.id) {\n                    onSelectCamera(camera);\n                  }\n                }\n              }))\n            },\n            text: selectedCamera.name\n          }\n        ]\n      }\n    });\n    if (primaryActionItem) {\n      defaultMenuProps.items.push(primaryActionItem);\n    }\n  }\n\n  if (microphones && selectedMicrophone && onSelectMicrophone && isSelectMicAllowed) {\n    // Set props as Microphone if speakers can be enumerated else set as Audio Device\n    const speakersAvailable = speakers && speakers.length > 0;\n    const key = speakersAvailable ? 'sectionMicrophone' : 'sectionAudioDevice';\n    const title = speakersAvailable ? strings.microphoneMenuTooltip : strings.audioDeviceMenuTooltip;\n\n    defaultMenuProps.items.push({\n      key: 'microphones',\n      itemType: ContextualMenuItemType.Section,\n      sectionProps: {\n        title: strings.microphoneMenuTitle,\n        items: [\n          {\n            key: key,\n            title: title,\n            subMenuProps: {\n              calloutProps: {\n                preventDismissOnEvent\n              },\n              items: microphones.map((microphone) => ({\n                key: microphone.id,\n                text: microphone.name,\n                title: microphone.name,\n                itemProps: {\n                  styles: menuItemStyles\n                },\n                iconProps: {\n                  iconName: 'ContextMenuMicIcon',\n                  styles: { root: { lineHeight: 0 } }\n                },\n                canCheck: true,\n                isChecked: microphone.id === selectedMicrophone?.id,\n                onClick: () => {\n                  if (microphone.id !== selectedMicrophone?.id) {\n                    onSelectMicrophone(microphone);\n                  }\n                }\n              }))\n            },\n            text: selectedMicrophone.name\n          }\n        ]\n      }\n    });\n  }\n\n  if (speakers && selectedSpeaker && onSelectSpeaker) {\n    defaultMenuProps.items.push({\n      key: 'speakers',\n      itemType: ContextualMenuItemType.Section,\n      sectionProps: {\n        title: strings.speakerMenuTitle,\n        items: [\n          {\n            key: 'sectionSpeaker',\n            subMenuProps: {\n              calloutProps: {\n                preventDismissOnEvent\n              },\n              items: speakers.map((speaker) => ({\n                key: speaker.id,\n                text: speaker.name,\n                title: speaker.name,\n                itemProps: {\n                  styles: menuItemStyles\n                },\n                iconProps: {\n                  iconName: 'ContextMenuSpeakerIcon',\n                  styles: { root: { lineHeight: 0 } }\n                },\n                canCheck: true,\n                isChecked: speaker.id === selectedSpeaker?.id,\n                onClick: () => {\n                  if (speaker.id !== selectedSpeaker?.id) {\n                    onSelectSpeaker(speaker);\n                  }\n                }\n              }))\n            },\n            text: selectedSpeaker.name\n          }\n        ]\n      }\n    });\n  }\n  if (microphones && selectedMicrophone && onSelectMicrophone && isSelectMicAllowed && primaryActionItem) {\n    defaultMenuProps.items.push(primaryActionItem);\n  }\n\n  if (defaultMenuProps.items.length === 0) {\n    // Avoids creating an empty context menu.\n    return undefined;\n  }\n  return defaultMenuProps;\n};\n\n/**\n * A button to open a menu that controls device options.\n *\n * Can be used with {@link ControlBar}.\n *\n * @public\n */\nexport const DevicesButton = (props: DevicesButtonProps): JSX.Element => {\n  const { onRenderIcon } = props;\n\n  const localeStrings = useLocale().strings.devicesButton;\n  const strings = { ...localeStrings, ...props.strings };\n\n  const devicesButtonMenu =\n    props.menuProps ?? generateDefaultDeviceMenuProps({ ...props, styles: props.styles?.menuStyles }, strings);\n\n  const onRenderOptionsIcon = (): JSX.Element => {\n    return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ControlButtonOptions\" />;\n  };\n\n  return (\n    <ControlBarButton\n      {...props}\n      menuProps={devicesButtonMenu}\n      menuIconProps={{ hidden: true }}\n      onRenderIcon={onRenderIcon ?? onRenderOptionsIcon}\n      strings={strings}\n      labelKey={props.labelKey ?? 'devicesButtonLabel'}\n    />\n  );\n};\n\"../../../acs-ui-common/src\""]}
+{"version":3,"file":"DevicesButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/DevicesButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  ContextualMenuItemType,\n  IContextualMenuItem,\n  IContextualMenuItemStyles,\n  IContextualMenuProps,\n  IContextualMenuStyles,\n  merge\n} from '@fluentui/react';\nimport React from 'react';\nimport { useLocale } from '../localization';\nimport { ControlBarButton, ControlBarButtonProps, ControlBarButtonStyles } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { buttonFlyoutItemStyles } from './styles/ControlBar.styles';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/**\n * Styles for the {@link DevicesButton} menu.\n *\n * @public\n */\nexport interface DevicesButtonContextualMenuStyles extends IContextualMenuStyles {\n  /**\n   * Styles for the items inside the {@link DevicesButton} button menu.\n   */\n  menuItemStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Styles for the Devices button menu items.\n *\n * @public\n */\nexport interface DevicesButtonStyles extends ControlBarButtonStyles {\n  /**\n   * Styles for the {@link DevicesButton} menu.\n   */\n  menuStyles?: Partial<DevicesButtonContextualMenuStyles>;\n}\n\n/**\n * A device, e.g. camera, microphone, or speaker, in the {@link DevicesButton} flyout.\n *\n * @public\n */\nexport interface OptionsDevice {\n  /**\n   * Device unique identifier\n   */\n  id: string;\n  /**\n   * Device name\n   */\n  name: string;\n}\n\n/**\n * Strings of {@link DevicesButton} that can be overridden.\n *\n * @public\n */\nexport interface DevicesButtonStrings {\n  /**\n   * Label of button\n   */\n  label: string;\n  /**\n   * Button tooltip content.\n   */\n  tooltipContent?: string;\n  /**\n   * Title of camera menu\n   */\n  cameraMenuTitle: string;\n  /**\n   * Title of microphone menu\n   */\n  microphoneMenuTitle: string;\n  /**\n   * Title of speaker menu\n   */\n  speakerMenuTitle: string;\n  /**\n   * Tooltip of camera menu\n   */\n  cameraMenuTooltip: string;\n  /**\n   * Tooltip of microphone menu\n   */\n  microphoneMenuTooltip: string;\n  /**\n   * Tooltip of speaker menu\n   */\n  speakerMenuTooltip: string;\n}\n\n/**\n * Props for {@link DevicesButton}.\n *\n * @public\n */\nexport interface DevicesButtonProps extends ControlBarButtonProps {\n  /**\n   * Available microphones for selection\n   */\n  microphones?: OptionsDevice[];\n  /**\n   * Available speakers for selection\n   */\n  speakers?: OptionsDevice[];\n  /**\n   * Available cameras for selection\n   */\n  cameras?: OptionsDevice[];\n  /**\n   * Microphone that is shown as currently selected\n   */\n  selectedMicrophone?: OptionsDevice;\n  /**\n   * Speaker that is shown as currently selected\n   */\n  selectedSpeaker?: OptionsDevice;\n  /**\n   * Camera that is shown as currently selected\n   */\n  selectedCamera?: OptionsDevice;\n  /**\n   * Callback when a camera is selected\n   */\n  onSelectCamera?: (device: OptionsDevice) => Promise<void>;\n  /**\n   * Callback when a microphone is selected\n   */\n  onSelectMicrophone?: (device: OptionsDevice) => Promise<void>;\n  /**\n   * Speaker when a speaker is selected\n   */\n  onSelectSpeaker?: (device: OptionsDevice) => Promise<void>;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<DevicesButtonStrings>;\n  /**\n   * Option to increase the touch targets of the button flyout menu items from 36px to 48px.\n   * Recommended for mobile devices.\n   */\n  styles?: DevicesButtonStyles;\n}\n\n/**\n * Subset props for various buttons that show device selection menus.\n *\n * @internal\n */\nexport interface DeviceMenuProps {\n  microphones?: OptionsDevice[];\n  speakers?: OptionsDevice[];\n  cameras?: OptionsDevice[];\n  selectedMicrophone?: OptionsDevice;\n  selectedSpeaker?: OptionsDevice;\n  selectedCamera?: OptionsDevice;\n  onSelectCamera?: (device: OptionsDevice) => Promise<void>;\n  onSelectMicrophone?: (device: OptionsDevice) => Promise<void>;\n  onSelectSpeaker?: (device: OptionsDevice) => Promise<void>;\n  styles?: Partial<DeviceMenuStyles>;\n}\n\n/**\n * Subset of strings for various buttons that show device selection menus.\n *\n * @internal\n */\nexport interface DeviceMenuStrings {\n  /**\n   * Title for Camera section in the contextual menu\n   */\n  cameraMenuTitle?: string;\n  /**\n   * Title for Audio Device section in the contextual menu\n   *\n   * @remark Used in place of microphoneMenuTitle when speakers can be enumerated\n   */\n  audioDeviceMenuTitle?: string;\n  /**\n   * Title for Microphone section in the contextual menu\n   *\n   * @remark Used when speakers can be enumerated\n   */\n  microphoneMenuTitle?: string;\n  /**\n   * Title for Speaker section in the contextual menu\n   */\n  speakerMenuTitle?: string;\n  /**\n   * Tooltip label for Camera section in the contextual menu\n   */\n  cameraMenuTooltip?: string;\n  /**\n   * Tooltip label for Audio Device section in the contextual menu\n   *\n   * @remark Used in place of microphoneMenuTooltip when speakers can be enumerated\n   */\n  audioDeviceMenuTooltip?: string;\n  /**\n   * Tooltip label for Microphone section in the contextual menu\n   *\n   * @remark Used when speakers can be enumerated\n   */\n  microphoneMenuTooltip?: string;\n  /**\n   * Tooltip label for Speaker section in the contextual menu\n   */\n  speakerMenuTooltip?: string;\n}\n\n/**\n * Styles for flyouts used by various buttons for device selection flyouts.\n *\n * @internal\n */\nexport interface DeviceMenuStyles extends IContextualMenuStyles {\n  menuItemStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Generates default {@link IContextualMenuProps} for buttons that\n * show a drop-down to select devices to use.\n *\n * @internal\n */\nexport const generateDefaultDeviceMenuProps = (\n  props: DeviceMenuProps,\n  strings: DeviceMenuStrings,\n  primaryActionItem?: IContextualMenuItem,\n  isSelectCamAllowed = true,\n  isSelectMicAllowed = true\n): { items: IContextualMenuItem[] } | undefined => {\n  const {\n    microphones,\n    speakers,\n    cameras,\n    selectedMicrophone,\n    selectedSpeaker,\n    selectedCamera,\n    onSelectCamera,\n    onSelectMicrophone,\n    onSelectSpeaker\n  } = props;\n\n  const defaultMenuProps: IContextualMenuProps = {\n    items: [],\n    styles: props.styles,\n    calloutProps: {\n      styles: {\n        root: {\n          // Confine the menu to the parents bounds.\n          // More info: https://github.com/microsoft/fluentui/issues/18835\n          // NB: 95% to keep some space for margin, drop shadow etc around the Callout.\n          maxWidth: '95%'\n        }\n      },\n      preventDismissOnEvent\n    }\n  };\n\n  const menuItemStyles = merge(buttonFlyoutItemStyles, props.styles?.menuItemStyles ?? {});\n\n  if (cameras && selectedCamera && onSelectCamera && isSelectCamAllowed) {\n    defaultMenuProps.items.push({\n      key: 'cameras',\n      itemType: ContextualMenuItemType.Section,\n      sectionProps: {\n        title: strings.cameraMenuTitle,\n        items: [\n          {\n            key: 'sectionCamera',\n            title: strings.cameraMenuTooltip,\n            subMenuProps: {\n              calloutProps: {\n                preventDismissOnEvent\n              },\n              items: cameras.map((camera) => ({\n                key: camera.id,\n                text: camera.name,\n                title: camera.name,\n                iconProps: {\n                  iconName: 'ContextMenuCameraIcon',\n                  styles: { root: { lineHeight: 0 } }\n                },\n                itemProps: {\n                  styles: menuItemStyles\n                },\n                canCheck: true,\n                isChecked: camera.id === selectedCamera?.id,\n                onClick: () => {\n                  if (camera.id !== selectedCamera?.id) {\n                    onSelectCamera(camera);\n                  }\n                }\n              }))\n            },\n            text: selectedCamera.name\n          }\n        ]\n      }\n    });\n    if (primaryActionItem) {\n      defaultMenuProps.items.push(primaryActionItem);\n    }\n  }\n\n  if (microphones && selectedMicrophone && onSelectMicrophone && isSelectMicAllowed) {\n    // Set props as Microphone if speakers can be enumerated else set as Audio Device\n    const speakersAvailable = speakers && speakers.length > 0;\n    const key = speakersAvailable ? 'sectionMicrophone' : 'sectionAudioDevice';\n    const title = speakersAvailable ? strings.microphoneMenuTooltip : strings.audioDeviceMenuTooltip;\n\n    defaultMenuProps.items.push({\n      key: 'microphones',\n      itemType: ContextualMenuItemType.Section,\n      sectionProps: {\n        title: strings.microphoneMenuTitle,\n        items: [\n          {\n            key: key,\n            title: title,\n            subMenuProps: {\n              calloutProps: {\n                preventDismissOnEvent\n              },\n              items: microphones.map((microphone) => ({\n                key: microphone.id,\n                text: microphone.name,\n                title: microphone.name,\n                itemProps: {\n                  styles: menuItemStyles\n                },\n                iconProps: {\n                  iconName: 'ContextMenuMicIcon',\n                  styles: { root: { lineHeight: 0 } }\n                },\n                canCheck: true,\n                isChecked: microphone.id === selectedMicrophone?.id,\n                onClick: () => {\n                  if (microphone.id !== selectedMicrophone?.id) {\n                    onSelectMicrophone(microphone);\n                  }\n                }\n              }))\n            },\n            text: selectedMicrophone.name\n          }\n        ]\n      }\n    });\n  }\n\n  if (speakers && selectedSpeaker && onSelectSpeaker) {\n    defaultMenuProps.items.push({\n      key: 'speakers',\n      itemType: ContextualMenuItemType.Section,\n      sectionProps: {\n        title: strings.speakerMenuTitle,\n        items: [\n          {\n            key: 'sectionSpeaker',\n            subMenuProps: {\n              calloutProps: {\n                preventDismissOnEvent\n              },\n              items: speakers.map((speaker) => ({\n                key: speaker.id,\n                text: speaker.name,\n                title: speaker.name,\n                itemProps: {\n                  styles: menuItemStyles\n                },\n                iconProps: {\n                  iconName: 'ContextMenuSpeakerIcon',\n                  styles: { root: { lineHeight: 0 } }\n                },\n                canCheck: true,\n                isChecked: speaker.id === selectedSpeaker?.id,\n                onClick: () => {\n                  if (speaker.id !== selectedSpeaker?.id) {\n                    onSelectSpeaker(speaker);\n                  }\n                }\n              }))\n            },\n            text: selectedSpeaker.name\n          }\n        ]\n      }\n    });\n  }\n  if (microphones && selectedMicrophone && onSelectMicrophone && isSelectMicAllowed && primaryActionItem) {\n    defaultMenuProps.items.push(primaryActionItem);\n  }\n\n  if (defaultMenuProps.items.length === 0) {\n    // Avoids creating an empty context menu.\n    return undefined;\n  }\n  return defaultMenuProps;\n};\n\n/**\n * A button to open a menu that controls device options.\n *\n * Can be used with {@link ControlBar}.\n *\n * @public\n */\nexport const DevicesButton = (props: DevicesButtonProps): JSX.Element => {\n  const { onRenderIcon } = props;\n\n  const localeStrings = useLocale().strings.devicesButton;\n  const strings = { ...localeStrings, ...props.strings };\n\n  const devicesButtonMenu =\n    props.menuProps ?? generateDefaultDeviceMenuProps({ ...props, styles: props.styles?.menuStyles }, strings);\n\n  const onRenderOptionsIcon = (): JSX.Element => {\n    return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ControlButtonOptions\" />;\n  };\n\n  return (\n    <ControlBarButton\n      {...props}\n      menuProps={devicesButtonMenu}\n      menuIconProps={{ hidden: true }}\n      onRenderIcon={onRenderIcon ?? onRenderOptionsIcon}\n      strings={strings}\n      labelKey={props.labelKey ?? 'devicesButtonLabel'}\n    />\n  );\n};\n\"../../../acs-ui-common/src\""]}

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IStyle, IButtonStyles, ITextFieldStyles } from '@fluentui/react';
 /**
  * Strings of {@link Dialpad} that can be overridden.

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

@@ -1,5 +1,5 @@
 // Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
+// Licensed under the MIT License.
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {

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        // 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\""]}
+{"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/Drawer/DrawerContentContainer.js

@@ -1,5 +1,5 @@
 // Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
+// Licensed under the MIT License.
 import { AnimationStyles, mergeStyles, Stack, Text, useTheme } from '@fluentui/react';
 import React from 'react';
 /**