@azure/communication-react 1.23.0-alpha-202501160016 → 1.23.0

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

@@ -1 +1 @@
-{"version":3,"file":"BaseComposite.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/BaseComposite.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  Customizer,\n  LayerHost,\n  mergeStyles,\n  PartialTheme,\n  registerIcons,\n  Stack,\n  Theme,\n  useTheme\n} from '@fluentui/react';\nimport { FluentThemeProvider, ParticipantMenuItemsCallback } from '@internal/react-components';\nimport React, { createContext, useContext } from 'react';\nimport { CompositeLocale, LocalizationProvider } from '../localization';\nimport { AvatarPersonaDataCallback } from './AvatarPersona';\nimport { CallCompositeIcons, CallWithChatCompositeIcons, ChatCompositeIcons, DEFAULT_COMPOSITE_ICONS } from './icons';\nimport { globalLayerHostStyle } from './styles/GlobalHostLayer.styles';\nimport { useId } from '@fluentui/react-hooks';\nimport { ACSAudioProvider } from './AudioProvider';\n/**\n * Properties common to all composites exported from this library.\n *\n * @public\n */\nexport interface BaseCompositeProps<TIcons extends Record<string, JSX.Element>> {\n  /**\n   * Fluent theme for the composite.\n   *\n   * @defaultValue light theme\n   */\n  fluentTheme?: PartialTheme | Theme;\n  /**\n   * Custom Icon override for the composite.\n   * A JSX element can be provided to override the default icon.\n   */\n  icons?: TIcons;\n  /**\n   * Locale for the composite.\n   *\n   * @defaultValue English (US)\n   */\n  locale?: CompositeLocale;\n  /**\n   * Whether composite is displayed right-to-left.\n   *\n   * @defaultValue false\n   */\n  rtl?: boolean;\n  /**\n   * A callback function that can be used to provide custom data to Avatars rendered\n   * in Composite.\n   *\n   * This will not affect the displayName shown in the composite.\n   * The displayName throughout the composite will be what is provided to the adapter when the adapter is created.\n   * will be what is provided to the adapter when the adapter is created.\n   */\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n\n  /**\n   * A callback function that can be used to provide custom menu items for a participant in\n   * participant list.\n   */\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n}\n\n/**\n * A base provider {@link React.Context} to wrap components with other required providers\n * (e.g. icons, FluentThemeProvider, LocalizationProvider).\n *\n * Required providers are only wrapped once, with all other instances only passing children.\n *\n * @private\n */\nexport const BaseProvider = (\n  props: BaseCompositeProps<CallCompositeIcons | ChatCompositeIcons | CallWithChatCompositeIcons> & {\n    children: React.ReactNode;\n    formFactor?: 'desktop' | 'mobile';\n  }\n): JSX.Element => {\n  const { fluentTheme, rtl, locale } = props;\n\n  const globalLayerHostId = useId('composite-global-hostId');\n\n  /**\n   * Pass only the children if we previously registered icons, and have previously wrapped the children in\n   * FluentThemeProvider and LocalizationProvider\n   */\n  const alreadyWrapped = useBase();\n  if (alreadyWrapped) {\n    return <>{props.children}</>;\n  }\n\n  /**\n   * Before registering fluent icons, we should check DEFAULT_COMPOSITE_ICONS and strip out the key value pairs where value is undefined\n   */\n  const iconsToRegister: { [key: string]: JSX.Element } = {};\n  Object.entries(DEFAULT_COMPOSITE_ICONS).forEach(([key, value]) => {\n    if (value) {\n      iconsToRegister[key] = value;\n    }\n  });\n\n  /**\n   * We register the default icon mappings merged with custom icons provided through props\n   * to ensure all icons render correctly.\n   */\n  registerIcons({ icons: { ...iconsToRegister, ...props.icons } });\n\n  /**\n   * We need to create one context for the AudioProvider to ensure that we only have one instance of the AudioContext.\n   */\n  const compositeAudioContext = new AudioContext();\n  // we use Customizer to override default LayerHost injected to <body />\n  // which stop polluting global dom tree and increase compatibility with react-full-screen\n  const CompositeElement = (\n    <FluentThemeProvider fluentTheme={fluentTheme} rtl={rtl}>\n      {\n        // On mobile we expect the composite to fill the device screen, hence we set a meta property to have better OOBE.\n        props.formFactor === 'mobile' && <meta name=\"viewport\" content=\"width=device-width\" />\n      }\n      <Customizer scopedSettings={{ Layer: { hostId: globalLayerHostId } }}>\n        <ACSAudioProvider audioContext={compositeAudioContext}>\n          <WithBackgroundColor>{props.children}</WithBackgroundColor>\n        </ACSAudioProvider>\n      </Customizer>\n      <LayerHost id={globalLayerHostId} className={mergeStyles(globalLayerHostStyle)} />\n    </FluentThemeProvider>\n  );\n  const localizedElement = locale ? LocalizationProvider({ locale, children: CompositeElement }) : CompositeElement;\n  return <BaseContext.Provider value={true}>{localizedElement}</BaseContext.Provider>;\n};\n\n/**\n * @private\n */\nconst BaseContext = createContext<boolean>(false);\n\n/**\n * @private\n */\nconst useBase = (): boolean => useContext(BaseContext);\n\n/**\n * @private\n * Provides a wrapper with a background color to ensure that composites always have a background color.\n * This is necessary to ensure that composites are not transparent,\n * and the background color of it's parent elements doesn't show through the composite.\n */\nconst WithBackgroundColor = (props: { children: React.ReactNode }): JSX.Element => {\n  const { children } = props;\n  const theme = useTheme();\n  const className = mergeStyles({\n    background: theme.semanticColors.bodyBackground,\n    height: '100%',\n    width: '100%',\n    position: 'relative'\n  });\n  return <Stack className={className}>{children}</Stack>;\n};\n"]}
+{"version":3,"file":"BaseComposite.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/BaseComposite.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Customizer, LayerHost, mergeStyles, PartialTheme, registerIcons, Stack, Theme, useTheme } from '@fluentui/react';\nimport { FluentThemeProvider, ParticipantMenuItemsCallback } from '@internal/react-components';\nimport React, { createContext, useContext } from 'react';\nimport { CompositeLocale, LocalizationProvider } from '../localization';\nimport { AvatarPersonaDataCallback } from './AvatarPersona';\nimport { CallCompositeIcons, CallWithChatCompositeIcons, ChatCompositeIcons, DEFAULT_COMPOSITE_ICONS } from './icons';\nimport { globalLayerHostStyle } from './styles/GlobalHostLayer.styles';\nimport { useId } from '@fluentui/react-hooks';\nimport { ACSAudioProvider } from './AudioProvider';\n/**\n * Properties common to all composites exported from this library.\n *\n * @public\n */\nexport interface BaseCompositeProps<TIcons extends Record<string, JSX.Element>> {\n  /**\n   * Fluent theme for the composite.\n   *\n   * @defaultValue light theme\n   */\n  fluentTheme?: PartialTheme | Theme;\n  /**\n   * Custom Icon override for the composite.\n   * A JSX element can be provided to override the default icon.\n   */\n  icons?: TIcons;\n  /**\n   * Locale for the composite.\n   *\n   * @defaultValue English (US)\n   */\n  locale?: CompositeLocale;\n  /**\n   * Whether composite is displayed right-to-left.\n   *\n   * @defaultValue false\n   */\n  rtl?: boolean;\n  /**\n   * A callback function that can be used to provide custom data to Avatars rendered\n   * in Composite.\n   *\n   * This will not affect the displayName shown in the composite.\n   * The displayName throughout the composite will be what is provided to the adapter when the adapter is created.\n   * will be what is provided to the adapter when the adapter is created.\n   */\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n\n  /**\n   * A callback function that can be used to provide custom menu items for a participant in\n   * participant list.\n   */\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n}\n\n/**\n * A base provider {@link React.Context} to wrap components with other required providers\n * (e.g. icons, FluentThemeProvider, LocalizationProvider).\n *\n * Required providers are only wrapped once, with all other instances only passing children.\n *\n * @private\n */\nexport const BaseProvider = (props: BaseCompositeProps<CallCompositeIcons | ChatCompositeIcons | CallWithChatCompositeIcons> & {\n  children: React.ReactNode;\n  formFactor?: 'desktop' | 'mobile';\n}): JSX.Element => {\n  const {\n    fluentTheme,\n    rtl,\n    locale\n  } = props;\n  const globalLayerHostId = useId('composite-global-hostId');\n\n  /**\n   * Pass only the children if we previously registered icons, and have previously wrapped the children in\n   * FluentThemeProvider and LocalizationProvider\n   */\n  const alreadyWrapped = useBase();\n  if (alreadyWrapped) {\n    return <>{props.children}</>;\n  }\n\n  /**\n   * Before registering fluent icons, we should check DEFAULT_COMPOSITE_ICONS and strip out the key value pairs where value is undefined\n   */\n  const iconsToRegister: {\n    [key: string]: JSX.Element;\n  } = {};\n  Object.entries(DEFAULT_COMPOSITE_ICONS).forEach(([key, value]) => {\n    if (value) {\n      iconsToRegister[key] = value;\n    }\n  });\n\n  /**\n   * We register the default icon mappings merged with custom icons provided through props\n   * to ensure all icons render correctly.\n   */\n  registerIcons({\n    icons: {\n      ...iconsToRegister,\n      ...props.icons\n    }\n  });\n\n  /**\n   * We need to create one context for the AudioProvider to ensure that we only have one instance of the AudioContext.\n   */\n  const compositeAudioContext = new AudioContext();\n  // we use Customizer to override default LayerHost injected to <body />\n  // which stop polluting global dom tree and increase compatibility with react-full-screen\n  const CompositeElement = <FluentThemeProvider fluentTheme={fluentTheme} rtl={rtl}>\n      {\n    // On mobile we expect the composite to fill the device screen, hence we set a meta property to have better OOBE.\n    props.formFactor === 'mobile' && <meta name=\"viewport\" content=\"width=device-width\" />}\n      <Customizer scopedSettings={{\n      Layer: {\n        hostId: globalLayerHostId\n      }\n    }}>\n        <ACSAudioProvider audioContext={compositeAudioContext}>\n          <WithBackgroundColor>{props.children}</WithBackgroundColor>\n        </ACSAudioProvider>\n      </Customizer>\n      <LayerHost id={globalLayerHostId} className={mergeStyles(globalLayerHostStyle)} />\n    </FluentThemeProvider>;\n  const localizedElement = locale ? LocalizationProvider({\n    locale,\n    children: CompositeElement\n  }) : CompositeElement;\n  return <BaseContext.Provider value={true}>{localizedElement}</BaseContext.Provider>;\n};\n\n/**\n * @private\n */\nconst BaseContext = createContext<boolean>(false);\n\n/**\n * @private\n */\nconst useBase = (): boolean => useContext(BaseContext);\n\n/**\n * @private\n * Provides a wrapper with a background color to ensure that composites always have a background color.\n * This is necessary to ensure that composites are not transparent,\n * and the background color of it's parent elements doesn't show through the composite.\n */\nconst WithBackgroundColor = (props: {\n  children: React.ReactNode;\n}): JSX.Element => {\n  const {\n    children\n  } = props;\n  const theme = useTheme();\n  const className = mergeStyles({\n    background: theme.semanticColors.bodyBackground,\n    height: '100%',\n    width: '100%',\n    position: 'relative'\n  });\n  return <Stack className={className}>{children}</Stack>;\n};"]}

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

@@ -21,13 +21,13 @@ export const CallingCaptionsBanner = (props) => {
     const onDismissCaptionsSettings = () => {
         setIsCaptionsSettingsOpen(false);
     };
-    const containerClassName = mergeStyles(((_a = props.captionsOptions) === null || _a === void 0 ? void 0 : _a.height) === 'full'
-        ? mergeStyles({
-            position: 'absolute',
-            height: '100%',
-            width: '100%'
-        })
-        : { position: 'relative' });
+    const containerClassName = mergeStyles(((_a = props.captionsOptions) === null || _a === void 0 ? void 0 : _a.height) === 'full' ? mergeStyles({
+        position: 'absolute',
+        height: '100%',
+        width: '100%'
+    }) : {
+        position: 'relative'
+    });
     const floatingChildClassName = mergeStyles({
         position: 'absolute',
         right: 0,
@@ -35,15 +35,7 @@ export const CallingCaptionsBanner = (props) => {
     });
     const strings = useLocale().strings.call;
     const captionsBannerStrings = {
-        captionsBannerSpinnerText: strings.captionsBannerSpinnerText,
-        /* @conditional-compile-remove(rtt) */
-        realTimeTextInputBoxDefaultText: strings.realTimeTextInputBoxDefaultText,
-        /* @conditional-compile-remove(rtt) */
-        realTimeTextBannerContent: strings.realTimeTextBannerContent,
-        /* @conditional-compile-remove(rtt) */
-        realTimeTextBannerTitle: strings.realTimeTextBannerTitle,
-        /* @conditional-compile-remove(rtt) */
-        realTimeTextBannerLinkLabel: strings.realTimeTextBannerLinkLabel
+        captionsBannerSpinnerText: strings.captionsBannerSpinnerText
     };
     const onRenderAvatar = useCallback((userId, options) => {
         return React.createElement(AvatarPersona, Object.assign({ userId: userId }, options, { dataProvider: props.onFetchAvatarPersonaData }));
@@ -58,13 +50,15 @@ export const CallingCaptionsBanner = (props) => {
         return () => window.removeEventListener('resize', handleResize);
     }, []);
     const desktopViewBannerWidth = windowWidth > 620 ? '35rem' : '80%';
-    return (React.createElement(React.Fragment, null,
-        isCaptionsSettingsOpen && (React.createElement(CallingCaptionsSettingsModal, { showCaptionsSettingsModal: isCaptionsSettingsOpen, onDismissCaptionsSettings: onDismissCaptionsSettings, changeCaptionLanguage: props.useTeamsCaptions })),
+    return React.createElement(React.Fragment, null,
+        isCaptionsSettingsOpen && React.createElement(CallingCaptionsSettingsModal, { showCaptionsSettingsModal: isCaptionsSettingsOpen, onDismissCaptionsSettings: onDismissCaptionsSettings, changeCaptionLanguage: props.useTeamsCaptions }),
         React.createElement("div", { className: containerClassName, role: "region", "aria-label": strings.liveCaptionsLabel },
             React.createElement(Stack, { horizontalAlign: "center" },
-                React.createElement(Stack.Item, { style: { width: props.isMobile ? mobileViewBannerWidth : desktopViewBannerWidth } },
+                React.createElement(Stack.Item, { style: {
+                        width: props.isMobile ? mobileViewBannerWidth : desktopViewBannerWidth
+                    } },
                     React.createElement(CaptionsBanner, Object.assign({ captionsOptions: props.captionsOptions, onRenderAvatar: onRenderAvatar, formFactor: props.isMobile ? 'compact' : 'default', strings: captionsBannerStrings }, captionsBannerProps)))),
-            !props.isMobile && captionsBannerProps.isCaptionsOn && (React.createElement("div", { className: floatingChildClassName },
-                React.createElement(CaptionsBannerMoreButton, { onCaptionsSettingsClick: onClickCaptionsSettings, returnFocusRef: props.returnFocusRef }))))));
+            !props.isMobile && captionsBannerProps.isCaptionsOn && React.createElement("div", { className: floatingChildClassName },
+                React.createElement(CaptionsBannerMoreButton, { onCaptionsSettingsClick: onClickCaptionsSettings, returnFocusRef: props.returnFocusRef }))));
 };
 //# sourceMappingURL=CallingCaptionsBanner.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CallingCaptionsBanner.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/CallingCaptionsBanner.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { useState, useEffect, useCallback } from 'react';\nimport { CaptionsBanner, CaptionsBannerStrings, CustomAvatarOptions } from '@internal/react-components';\nimport { _DrawerMenu, _DrawerMenuItemProps, _DrawerSurface } from '@internal/react-components';\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { CallingCaptionsSettingsModal } from './CallingCaptionsSettingsModal';\nimport { CaptionsBannerMoreButton } from './CaptionsBannerMoreButton';\nimport { useLocale } from '../localization';\nimport { AvatarPersona, AvatarPersonaDataCallback } from './AvatarPersona';\nimport { FocusableElement } from './types/FocusableElement';\nimport { usePropsFor } from '../CallComposite/hooks/usePropsFor';\n\nconst mobileViewBannerWidth = '90%';\n\n/** @private */\nexport const CallingCaptionsBanner = (props: {\n  isMobile: boolean;\n  useTeamsCaptions?: boolean;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  captionsOptions?: {\n    height: 'full' | 'default';\n  };\n  /** Element to return focus to when the Captions Banner is closed */\n  returnFocusRef?: React.RefObject<FocusableElement>;\n}): JSX.Element => {\n  const captionsBannerProps = usePropsFor(CaptionsBanner);\n  const [isCaptionsSettingsOpen, setIsCaptionsSettingsOpen] = useState<boolean>(false);\n\n  const onClickCaptionsSettings = (): void => {\n    setIsCaptionsSettingsOpen(true);\n  };\n\n  const onDismissCaptionsSettings = (): void => {\n    setIsCaptionsSettingsOpen(false);\n  };\n\n  const containerClassName = mergeStyles(\n    props.captionsOptions?.height === 'full'\n      ? mergeStyles({\n          position: 'absolute',\n          height: '100%',\n          width: '100%'\n        })\n      : { position: 'relative' }\n  );\n\n  const floatingChildClassName = mergeStyles({\n    position: 'absolute',\n    right: 0,\n    top: 0\n  });\n\n  const strings = useLocale().strings.call;\n\n  const captionsBannerStrings: CaptionsBannerStrings = {\n    captionsBannerSpinnerText: strings.captionsBannerSpinnerText,\n    /* @conditional-compile-remove(rtt) */\n    realTimeTextInputBoxDefaultText: strings.realTimeTextInputBoxDefaultText,\n    /* @conditional-compile-remove(rtt) */\n    realTimeTextBannerContent: strings.realTimeTextBannerContent,\n    /* @conditional-compile-remove(rtt) */\n    realTimeTextBannerTitle: strings.realTimeTextBannerTitle,\n    /* @conditional-compile-remove(rtt) */\n    realTimeTextBannerLinkLabel: strings.realTimeTextBannerLinkLabel\n  };\n\n  const onRenderAvatar = useCallback(\n    (userId?: string, options?: CustomAvatarOptions) => {\n      return <AvatarPersona userId={userId} {...options} dataProvider={props.onFetchAvatarPersonaData} />;\n    },\n    [props.onFetchAvatarPersonaData]\n  );\n\n  const { innerWidth: width } = window;\n\n  const [windowWidth, setWindowWidth] = useState(width);\n\n  useEffect(() => {\n    function handleResize(): void {\n      setWindowWidth(window.innerWidth);\n    }\n\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  const desktopViewBannerWidth = windowWidth > 620 ? '35rem' : '80%';\n\n  return (\n    <>\n      {isCaptionsSettingsOpen && (\n        <CallingCaptionsSettingsModal\n          showCaptionsSettingsModal={isCaptionsSettingsOpen}\n          onDismissCaptionsSettings={onDismissCaptionsSettings}\n          changeCaptionLanguage={props.useTeamsCaptions}\n        />\n      )}\n      {\n        <div className={containerClassName} role=\"region\" aria-label={strings.liveCaptionsLabel}>\n          <Stack horizontalAlign=\"center\">\n            <Stack.Item style={{ width: props.isMobile ? mobileViewBannerWidth : desktopViewBannerWidth }}>\n              <CaptionsBanner\n                captionsOptions={props.captionsOptions}\n                onRenderAvatar={onRenderAvatar}\n                formFactor={props.isMobile ? 'compact' : 'default'}\n                strings={captionsBannerStrings}\n                {...captionsBannerProps}\n              />\n            </Stack.Item>\n          </Stack>\n          {!props.isMobile && captionsBannerProps.isCaptionsOn && (\n            <div className={floatingChildClassName}>\n              <CaptionsBannerMoreButton\n                onCaptionsSettingsClick={onClickCaptionsSettings}\n                returnFocusRef={props.returnFocusRef}\n              />\n            </div>\n          )}\n        </div>\n      }\n    </>\n  );\n};\n"]}
+{"version":3,"file":"CallingCaptionsBanner.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/CallingCaptionsBanner.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { useState, useEffect, useCallback } from 'react';\nimport { CaptionsBanner, CaptionsBannerStrings, CustomAvatarOptions } from '@internal/react-components';\nimport { _DrawerMenu, _DrawerMenuItemProps, _DrawerSurface } from '@internal/react-components';\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { CallingCaptionsSettingsModal } from './CallingCaptionsSettingsModal';\nimport { CaptionsBannerMoreButton } from './CaptionsBannerMoreButton';\nimport { useLocale } from '../localization';\nimport { AvatarPersona, AvatarPersonaDataCallback } from './AvatarPersona';\nimport { FocusableElement } from './types/FocusableElement';\nimport { usePropsFor } from '../CallComposite/hooks/usePropsFor';\nconst mobileViewBannerWidth = '90%';\n\n/** @private */\nexport const CallingCaptionsBanner = (props: {\n  isMobile: boolean;\n  useTeamsCaptions?: boolean;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  captionsOptions?: {\n    height: 'full' | 'default';\n  };\n  /** Element to return focus to when the Captions Banner is closed */\n  returnFocusRef?: React.RefObject<FocusableElement>;\n}): JSX.Element => {\n  const captionsBannerProps = usePropsFor(CaptionsBanner);\n  const [isCaptionsSettingsOpen, setIsCaptionsSettingsOpen] = useState<boolean>(false);\n  const onClickCaptionsSettings = (): void => {\n    setIsCaptionsSettingsOpen(true);\n  };\n  const onDismissCaptionsSettings = (): void => {\n    setIsCaptionsSettingsOpen(false);\n  };\n  const containerClassName = mergeStyles(props.captionsOptions?.height === 'full' ? mergeStyles({\n    position: 'absolute',\n    height: '100%',\n    width: '100%'\n  }) : {\n    position: 'relative'\n  });\n  const floatingChildClassName = mergeStyles({\n    position: 'absolute',\n    right: 0,\n    top: 0\n  });\n  const strings = useLocale().strings.call;\n  const captionsBannerStrings: CaptionsBannerStrings = {\n    captionsBannerSpinnerText: strings.captionsBannerSpinnerText\n  };\n  const onRenderAvatar = useCallback((userId?: string, options?: CustomAvatarOptions) => {\n    return <AvatarPersona userId={userId} {...options} dataProvider={props.onFetchAvatarPersonaData} />;\n  }, [props.onFetchAvatarPersonaData]);\n  const {\n    innerWidth: width\n  } = window;\n  const [windowWidth, setWindowWidth] = useState(width);\n  useEffect(() => {\n    function handleResize(): void {\n      setWindowWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n  const desktopViewBannerWidth = windowWidth > 620 ? '35rem' : '80%';\n  return <>\n      {isCaptionsSettingsOpen && <CallingCaptionsSettingsModal showCaptionsSettingsModal={isCaptionsSettingsOpen} onDismissCaptionsSettings={onDismissCaptionsSettings} changeCaptionLanguage={props.useTeamsCaptions} />}\n      {<div className={containerClassName} role=\"region\" aria-label={strings.liveCaptionsLabel}>\n          <Stack horizontalAlign=\"center\">\n            <Stack.Item style={{\n          width: props.isMobile ? mobileViewBannerWidth : desktopViewBannerWidth\n        }}>\n              <CaptionsBanner captionsOptions={props.captionsOptions} onRenderAvatar={onRenderAvatar} formFactor={props.isMobile ? 'compact' : 'default'} strings={captionsBannerStrings} {...captionsBannerProps} />\n            </Stack.Item>\n          </Stack>\n          {!props.isMobile && captionsBannerProps.isCaptionsOn && <div className={floatingChildClassName}>\n              <CaptionsBannerMoreButton onCaptionsSettingsClick={onClickCaptionsSettings} returnFocusRef={props.returnFocusRef} />\n            </div>}\n        </div>}\n    </>;\n};"]}

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

@@ -21,6 +21,6 @@ export const CallingCaptionsSettingsModal = (props) => {
     };
     const spokenLanguageStrings = strings.spokenLanguageStrings;
     const captionLanguageStrings = strings.captionLanguageStrings;
-    return (React.createElement(CaptionsSettingsModal, Object.assign({}, CaptionsSettingsModalProps, { strings: modalStrings, spokenLanguageStrings: spokenLanguageStrings, captionLanguageStrings: captionLanguageStrings, showModal: props.showCaptionsSettingsModal, onDismissCaptionsSettings: props.onDismissCaptionsSettings, changeCaptionLanguage: props.changeCaptionLanguage })));
+    return React.createElement(CaptionsSettingsModal, Object.assign({}, CaptionsSettingsModalProps, { strings: modalStrings, spokenLanguageStrings: spokenLanguageStrings, captionLanguageStrings: captionLanguageStrings, showModal: props.showCaptionsSettingsModal, onDismissCaptionsSettings: props.onDismissCaptionsSettings, changeCaptionLanguage: props.changeCaptionLanguage }));
 };
 //# sourceMappingURL=CallingCaptionsSettingsModal.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CallingCaptionsSettingsModal.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/CallingCaptionsSettingsModal.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,qBAAqB,EAItB,yCAAmC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAEjE,eAAe;AACf,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,KAI5C,EAAe,EAAE;IAChB,MAAM,0BAA0B,GAAG,WAAW,CAAC,qBAAqB,CAAC,CAAC;IACtE,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;IACzC,MAAM,YAAY,GAAiC;QACjD,0BAA0B,EAAE,OAAO,CAAC,0BAA0B;QAC9D,2CAA2C,EAAE,OAAO,CAAC,2CAA2C;QAChG,4CAA4C,EAAE,OAAO,CAAC,4CAA4C;QAClG,8CAA8C,EAAE,OAAO,CAAC,8CAA8C;QACtG,+CAA+C,EAAE,OAAO,CAAC,+CAA+C;QACxG,kCAAkC,EAAE,OAAO,CAAC,kCAAkC;QAC9E,iCAAiC,EAAE,OAAO,CAAC,iCAAiC;QAC5E,8BAA8B,EAAE,OAAO,CAAC,8BAA8B;QACtE,yCAAyC,EAAE,OAAO,CAAC,yCAAyC;KAC7F,CAAC;IAEF,MAAM,qBAAqB,GAAsC,OAAO,CAAC,qBAAqB,CAAC;IAE/F,MAAM,sBAAsB,GAAuC,OAAO,CAAC,sBAAsB,CAAC;IAElG,OAAO,CACL,oBAAC,qBAAqB,oBAChB,0BAA0B,IAC9B,OAAO,EAAE,YAAY,EACrB,qBAAqB,EAAE,qBAAqB,EAC5C,sBAAsB,EAAE,sBAAsB,EAC9C,SAAS,EAAE,KAAK,CAAC,yBAAyB,EAC1C,yBAAyB,EAAE,KAAK,CAAC,yBAAyB,EAC1D,qBAAqB,EAAE,KAAK,CAAC,qBAAqB,IAClD,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport {\n  CaptionsSettingsModal,\n  CaptionsSettingsModalStrings,\n  SpokenLanguageStrings,\n  CaptionLanguageStrings\n} from '@internal/react-components';\nimport { useLocale } from '../localization';\nimport { usePropsFor } from '../CallComposite/hooks/usePropsFor';\n\n/** @private */\nexport const CallingCaptionsSettingsModal = (props: {\n  showCaptionsSettingsModal: boolean;\n  onDismissCaptionsSettings: () => void;\n  changeCaptionLanguage?: boolean;\n}): JSX.Element => {\n  const CaptionsSettingsModalProps = usePropsFor(CaptionsSettingsModal);\n  const strings = useLocale().strings.call;\n  const modalStrings: CaptionsSettingsModalStrings = {\n    captionsSettingsModalTitle: strings.captionsSettingsModalTitle,\n    captionsSettingsSpokenLanguageDropdownLabel: strings.captionsSettingsSpokenLanguageDropdownLabel,\n    captionsSettingsCaptionLanguageDropdownLabel: strings.captionsSettingsCaptionLanguageDropdownLabel,\n    captionsSettingsSpokenLanguageDropdownInfoText: strings.captionsSettingsSpokenLanguageDropdownInfoText,\n    captionsSettingsCaptionLanguageDropdownInfoText: strings.captionsSettingsCaptionLanguageDropdownInfoText,\n    captionsSettingsConfirmButtonLabel: strings.captionsSettingsConfirmButtonLabel,\n    captionsSettingsCancelButtonLabel: strings.captionsSettingsCancelButtonLabel,\n    captionsSettingsModalAriaLabel: strings.captionsSettingsModalAriaLabel,\n    captionsSettingsCloseModalButtonAriaLabel: strings.captionsSettingsCloseModalButtonAriaLabel\n  };\n\n  const spokenLanguageStrings: SpokenLanguageStrings | undefined = strings.spokenLanguageStrings;\n\n  const captionLanguageStrings: CaptionLanguageStrings | undefined = strings.captionLanguageStrings;\n\n  return (\n    <CaptionsSettingsModal\n      {...CaptionsSettingsModalProps}\n      strings={modalStrings}\n      spokenLanguageStrings={spokenLanguageStrings}\n      captionLanguageStrings={captionLanguageStrings}\n      showModal={props.showCaptionsSettingsModal}\n      onDismissCaptionsSettings={props.onDismissCaptionsSettings}\n      changeCaptionLanguage={props.changeCaptionLanguage}\n    />\n  );\n};\n"]}
+{"version":3,"file":"CallingCaptionsSettingsModal.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/CallingCaptionsSettingsModal.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,qBAAqB,EAA+E,yCAAmC;AAChJ,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAEjE,eAAe;AACf,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,KAI5C,EAAe,EAAE;IAChB,MAAM,0BAA0B,GAAG,WAAW,CAAC,qBAAqB,CAAC,CAAC;IACtE,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;IACzC,MAAM,YAAY,GAAiC;QACjD,0BAA0B,EAAE,OAAO,CAAC,0BAA0B;QAC9D,2CAA2C,EAAE,OAAO,CAAC,2CAA2C;QAChG,4CAA4C,EAAE,OAAO,CAAC,4CAA4C;QAClG,8CAA8C,EAAE,OAAO,CAAC,8CAA8C;QACtG,+CAA+C,EAAE,OAAO,CAAC,+CAA+C;QACxG,kCAAkC,EAAE,OAAO,CAAC,kCAAkC;QAC9E,iCAAiC,EAAE,OAAO,CAAC,iCAAiC;QAC5E,8BAA8B,EAAE,OAAO,CAAC,8BAA8B;QACtE,yCAAyC,EAAE,OAAO,CAAC,yCAAyC;KAC7F,CAAC;IACF,MAAM,qBAAqB,GAAsC,OAAO,CAAC,qBAAqB,CAAC;IAC/F,MAAM,sBAAsB,GAAuC,OAAO,CAAC,sBAAsB,CAAC;IAClG,OAAO,oBAAC,qBAAqB,oBAAK,0BAA0B,IAAE,OAAO,EAAE,YAAY,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,SAAS,EAAE,KAAK,CAAC,yBAAyB,EAAE,yBAAyB,EAAE,KAAK,CAAC,yBAAyB,EAAE,qBAAqB,EAAE,KAAK,CAAC,qBAAqB,IAAI,CAAC;AACpV,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { CaptionsSettingsModal, CaptionsSettingsModalStrings, SpokenLanguageStrings, CaptionLanguageStrings } from '@internal/react-components';\nimport { useLocale } from '../localization';\nimport { usePropsFor } from '../CallComposite/hooks/usePropsFor';\n\n/** @private */\nexport const CallingCaptionsSettingsModal = (props: {\n  showCaptionsSettingsModal: boolean;\n  onDismissCaptionsSettings: () => void;\n  changeCaptionLanguage?: boolean;\n}): JSX.Element => {\n  const CaptionsSettingsModalProps = usePropsFor(CaptionsSettingsModal);\n  const strings = useLocale().strings.call;\n  const modalStrings: CaptionsSettingsModalStrings = {\n    captionsSettingsModalTitle: strings.captionsSettingsModalTitle,\n    captionsSettingsSpokenLanguageDropdownLabel: strings.captionsSettingsSpokenLanguageDropdownLabel,\n    captionsSettingsCaptionLanguageDropdownLabel: strings.captionsSettingsCaptionLanguageDropdownLabel,\n    captionsSettingsSpokenLanguageDropdownInfoText: strings.captionsSettingsSpokenLanguageDropdownInfoText,\n    captionsSettingsCaptionLanguageDropdownInfoText: strings.captionsSettingsCaptionLanguageDropdownInfoText,\n    captionsSettingsConfirmButtonLabel: strings.captionsSettingsConfirmButtonLabel,\n    captionsSettingsCancelButtonLabel: strings.captionsSettingsCancelButtonLabel,\n    captionsSettingsModalAriaLabel: strings.captionsSettingsModalAriaLabel,\n    captionsSettingsCloseModalButtonAriaLabel: strings.captionsSettingsCloseModalButtonAriaLabel\n  };\n  const spokenLanguageStrings: SpokenLanguageStrings | undefined = strings.spokenLanguageStrings;\n  const captionLanguageStrings: CaptionLanguageStrings | undefined = strings.captionLanguageStrings;\n  return <CaptionsSettingsModal {...CaptionsSettingsModalProps} strings={modalStrings} spokenLanguageStrings={spokenLanguageStrings} captionLanguageStrings={captionLanguageStrings} showModal={props.showCaptionsSettingsModal} onDismissCaptionsSettings={props.onDismissCaptionsSettings} changeCaptionLanguage={props.changeCaptionLanguage} />;\n};"]}

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

@@ -26,8 +26,14 @@ export const CallingDialpad = (props) => {
              * Format the phone number in dialpad textfield to make sure the phone number is in E.164 format.
              * We assume the input number always include countrycode
              */
-            const phoneNumber = { phoneNumber: '+' + textFieldInput.replace(/\D/g, '').replaceAll(' ', '') };
-            onAddParticipant(phoneNumber, { alternateCallerId: { phoneNumber: alternateCallerId } });
+            const phoneNumber = {
+                phoneNumber: '+' + textFieldInput.replace(/\D/g, '').replaceAll(' ', '')
+            };
+            onAddParticipant(phoneNumber, {
+                alternateCallerId: {
+                    phoneNumber: alternateCallerId
+                }
+            });
             onDismissTriggered();
         }
     };
@@ -35,19 +41,27 @@ export const CallingDialpad = (props) => {
     const dialpadStyle = useMemo(() => themedDialpadStyle(isMobile, theme), [theme, isMobile]);
     const callButtonStyle = useMemo(() => themedCallButtonStyle(theme), [theme]);
     const dialpadComponent = () => {
-        return (React.createElement(React.Fragment, null,
+        return React.createElement(React.Fragment, null,
             React.createElement(Dialpad, { styles: dialpadStyle, onChange: setTextFieldInput, longPressTrigger: isMobile ? 'touch' : 'mouseAndTouch' }),
-            React.createElement(PrimaryButton, { text: strings.dialpadStartCallButtonLabel, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "DialpadStartCall" }), onClick: onClickCall, styles: callButtonStyle, disabled: textFieldInput === '' })));
+            React.createElement(PrimaryButton, { text: strings.dialpadStartCallButtonLabel, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "DialpadStartCall" }), onClick: onClickCall, styles: callButtonStyle, disabled: textFieldInput === '' }));
     };
     if (isMobile) {
-        return (React.createElement(Stack, { "data-ui-id": "call-with-chat-composite-dialpad" }, showDialpad && (React.createElement(Stack, { styles: drawerContainerStyles() },
+        return React.createElement(Stack, { "data-ui-id": "call-with-chat-composite-dialpad" }, showDialpad && React.createElement(Stack, { styles: drawerContainerStyles() },
             React.createElement(_DrawerSurface, { onLightDismiss: onDismissTriggered, disableMaxHeight: true },
-                React.createElement(Stack, { style: { padding: '1rem' } }, dialpadComponent()))))));
+                React.createElement(Stack, { style: {
+                        padding: '1rem'
+                    } }, dialpadComponent()))));
     }
-    return (React.createElement(React.Fragment, null, React.createElement(Modal, { titleAriaId: strings.dialpadModalAriaLabel, isOpen: showDialpad, onDismiss: onDismissTriggered, isBlocking: true, styles: dialpadModalStyle, "data-ui-id": "call-with-chat-composite-dialpad" },
+    return React.createElement(React.Fragment, null, React.createElement(Modal, { titleAriaId: strings.dialpadModalAriaLabel, isOpen: showDialpad, onDismiss: onDismissTriggered, isBlocking: true, styles: dialpadModalStyle, "data-ui-id": "call-with-chat-composite-dialpad" },
         React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center" },
             React.createElement(Text, null, strings.dialpadModalTitle),
-            React.createElement(IconButton, { iconProps: { iconName: 'Cancel' }, ariaLabel: strings.dialpadCloseModalButtonAriaLabel, onClick: onDismissTriggered, style: { color: theme.palette.black } })),
-        React.createElement(Stack, { style: { overflow: 'hidden' } }, dialpadComponent()))));
+            React.createElement(IconButton, { iconProps: {
+                    iconName: 'Cancel'
+                }, ariaLabel: strings.dialpadCloseModalButtonAriaLabel, onClick: onDismissTriggered, style: {
+                    color: theme.palette.black
+                } })),
+        React.createElement(Stack, { style: {
+                overflow: 'hidden'
+            } }, dialpadComponent())));
 };
 //# sourceMappingURL=CallingDialpad.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CallingDialpad.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/CallingDialpad.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { useState } from 'react';\nimport { useMemo } from 'react';\nimport { Dialpad, DialpadStyles } from '@internal/react-components';\nimport { _DrawerMenu, _DrawerMenuItemProps, _DrawerSurface } from '@internal/react-components';\nimport { IModalStyles, Modal, Stack, useTheme, Text, IconButton } from '@fluentui/react';\nimport { IButtonStyles, PrimaryButton } from '@fluentui/react';\n\nimport { themeddialpadModalStyle } from './CallingDialpad.styles';\nimport { themedCallButtonStyle, themedDialpadStyle } from './CallingDialpad.styles';\nimport { CallWithChatCompositeIcon } from './icons';\n\nimport { PhoneNumberIdentifier } from '@azure/communication-common';\nimport { AddPhoneNumberOptions } from '@azure/communication-calling';\nimport { drawerContainerStyles } from '../CallComposite/styles/CallComposite.styles';\n\n/** @private */\nexport interface CallingDialpadStrings {\n  dialpadModalAriaLabel?: string;\n  dialpadModalTitle?: string;\n  dialpadCloseModalButtonAriaLabel?: string;\n  dialpadStartCallButtonLabel?: string;\n}\n\n/** @private */\nexport interface CallingDialpadProps {\n  isMobile: boolean;\n  showDialpad: boolean;\n  strings: CallingDialpadStrings;\n  onDismissDialpad: () => void;\n  onAddParticipant: (participant: PhoneNumberIdentifier, options?: AddPhoneNumberOptions) => void;\n  alternateCallerId: string;\n}\n\n/** @private */\nexport const CallingDialpad = (props: CallingDialpadProps): JSX.Element => {\n  const { strings, isMobile, showDialpad, onDismissDialpad, onAddParticipant, alternateCallerId } = props;\n  const [textFieldInput, setTextFieldInput] = useState('');\n\n  const theme = useTheme();\n\n  const onDismissTriggered = (): void => {\n    setTextFieldInput('');\n    onDismissDialpad();\n  };\n\n  const onClickCall = (): void => {\n    if (onAddParticipant) {\n      /**\n       * Format the phone number in dialpad textfield to make sure the phone number is in E.164 format.\n       * We assume the input number always include countrycode\n       */\n\n      const phoneNumber = { phoneNumber: '+' + textFieldInput.replace(/\\D/g, '').replaceAll(' ', '') };\n\n      onAddParticipant(phoneNumber, { alternateCallerId: { phoneNumber: alternateCallerId } });\n      onDismissTriggered();\n    }\n  };\n\n  const dialpadModalStyle: Partial<IModalStyles> = useMemo(() => themeddialpadModalStyle(theme), [theme]);\n\n  const dialpadStyle: Partial<DialpadStyles> = useMemo(() => themedDialpadStyle(isMobile, theme), [theme, isMobile]);\n\n  const callButtonStyle: Partial<IButtonStyles> = useMemo(() => themedCallButtonStyle(theme), [theme]);\n\n  const dialpadComponent = (): JSX.Element => {\n    return (\n      <>\n        <Dialpad\n          styles={dialpadStyle}\n          onChange={setTextFieldInput}\n          longPressTrigger={isMobile ? 'touch' : 'mouseAndTouch'}\n        />\n        <PrimaryButton\n          text={strings.dialpadStartCallButtonLabel}\n          onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"DialpadStartCall\" />}\n          onClick={onClickCall}\n          styles={callButtonStyle}\n          disabled={textFieldInput === ''}\n        />\n      </>\n    );\n  };\n\n  if (isMobile) {\n    return (\n      <Stack data-ui-id=\"call-with-chat-composite-dialpad\">\n        {showDialpad && (\n          <Stack styles={drawerContainerStyles()}>\n            <_DrawerSurface onLightDismiss={onDismissTriggered} disableMaxHeight={true}>\n              <Stack style={{ padding: '1rem' }}>{dialpadComponent()}</Stack>\n            </_DrawerSurface>\n          </Stack>\n        )}\n      </Stack>\n    );\n  }\n\n  return (\n    <>\n      {\n        <Modal\n          titleAriaId={strings.dialpadModalAriaLabel}\n          isOpen={showDialpad}\n          onDismiss={onDismissTriggered}\n          isBlocking={true}\n          styles={dialpadModalStyle}\n          data-ui-id=\"call-with-chat-composite-dialpad\"\n        >\n          <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\">\n            <Text>{strings.dialpadModalTitle}</Text>\n            <IconButton\n              iconProps={{ iconName: 'Cancel' }}\n              ariaLabel={strings.dialpadCloseModalButtonAriaLabel}\n              onClick={onDismissTriggered}\n              style={{ color: theme.palette.black }}\n            />\n          </Stack>\n\n          <Stack style={{ overflow: 'hidden' }}>{dialpadComponent()}</Stack>\n        </Modal>\n      }\n    </>\n  );\n};\n"]}
+{"version":3,"file":"CallingDialpad.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/CallingDialpad.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,OAAO,EAAiB,yCAAmC;AACpE,OAAO,EAAqC,cAAc,EAAE,yCAAmC;AAC/F,OAAO,EAAgB,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AACzF,OAAO,EAAiB,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AACpF,OAAO,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAC;AAGpD,OAAO,EAAE,qBAAqB,EAAE,MAAM,8CAA8C,CAAC;AAoBrF,eAAe;AACf,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAA0B,EAAe,EAAE;IACxE,MAAM,EACJ,OAAO,EACP,QAAQ,EACR,WAAW,EACX,gBAAgB,EAChB,gBAAgB,EAChB,iBAAiB,EAClB,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACzD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,kBAAkB,GAAG,GAAS,EAAE;QACpC,iBAAiB,CAAC,EAAE,CAAC,CAAC;QACtB,gBAAgB,EAAE,CAAC;IACrB,CAAC,CAAC;IACF,MAAM,WAAW,GAAG,GAAS,EAAE;QAC7B,IAAI,gBAAgB,EAAE,CAAC;YACrB;;;eAGG;YAEH,MAAM,WAAW,GAAG;gBAClB,WAAW,EAAE,GAAG,GAAG,cAAc,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,GAAG,EAAE,EAAE,CAAC;aACzE,CAAC;YACF,gBAAgB,CAAC,WAAW,EAAE;gBAC5B,iBAAiB,EAAE;oBACjB,WAAW,EAAE,iBAAiB;iBAC/B;aACF,CAAC,CAAC;YACH,kBAAkB,EAAE,CAAC;QACvB,CAAC;IACH,CAAC,CAAC;IACF,MAAM,iBAAiB,GAA0B,OAAO,CAAC,GAAG,EAAE,CAAC,uBAAuB,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACxG,MAAM,YAAY,GAA2B,OAAO,CAAC,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IACnH,MAAM,eAAe,GAA2B,OAAO,CAAC,GAAG,EAAE,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACrG,MAAM,gBAAgB,GAAG,GAAgB,EAAE;QACzC,OAAO;YACH,oBAAC,OAAO,IAAC,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe,GAAI;YACtH,oBAAC,aAAa,IAAC,IAAI,EAAE,OAAO,CAAC,2BAA2B,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,oBAAC,yBAAyB,IAAC,QAAQ,EAAC,kBAAkB,GAAG,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,eAAe,EAAE,QAAQ,EAAE,cAAc,KAAK,EAAE,GAAI,CAC1N,CAAC;IACR,CAAC,CAAC;IACF,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO,oBAAC,KAAK,kBAAY,kCAAkC,IACtD,WAAW,IAAI,oBAAC,KAAK,IAAC,MAAM,EAAE,qBAAqB,EAAE;YAClD,oBAAC,cAAc,IAAC,cAAc,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,IAAI;gBACxE,oBAAC,KAAK,IAAC,KAAK,EAAE;wBAChB,OAAO,EAAE,MAAM;qBAChB,IAAG,gBAAgB,EAAE,CAAS,CACZ,CACX,CACJ,CAAC;IACb,CAAC;IACD,OAAO,0CACF,oBAAC,KAAK,IAAC,WAAW,EAAE,OAAO,CAAC,qBAAqB,EAAE,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,kBAAkB,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,EAAE,iBAAiB,gBAAa,kCAAkC;QAC9L,oBAAC,KAAK,IAAC,UAAU,QAAC,eAAe,EAAC,eAAe,EAAC,aAAa,EAAC,QAAQ;YACtE,oBAAC,IAAI,QAAE,OAAO,CAAC,iBAAiB,CAAQ;YACxC,oBAAC,UAAU,IAAC,SAAS,EAAE;oBACzB,QAAQ,EAAE,QAAQ;iBACnB,EAAE,SAAS,EAAE,OAAO,CAAC,gCAAgC,EAAE,OAAO,EAAE,kBAAkB,EAAE,KAAK,EAAE;oBAC1F,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;iBAC3B,GAAI,CACK;QAER,oBAAC,KAAK,IAAC,KAAK,EAAE;gBAChB,QAAQ,EAAE,QAAQ;aACnB,IAAG,gBAAgB,EAAE,CAAS,CACrB,CACT,CAAC;AACR,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { useState } from 'react';\nimport { useMemo } from 'react';\nimport { Dialpad, DialpadStyles } from '@internal/react-components';\nimport { _DrawerMenu, _DrawerMenuItemProps, _DrawerSurface } from '@internal/react-components';\nimport { IModalStyles, Modal, Stack, useTheme, Text, IconButton } from '@fluentui/react';\nimport { IButtonStyles, PrimaryButton } from '@fluentui/react';\nimport { themeddialpadModalStyle } from './CallingDialpad.styles';\nimport { themedCallButtonStyle, themedDialpadStyle } from './CallingDialpad.styles';\nimport { CallWithChatCompositeIcon } from './icons';\nimport { PhoneNumberIdentifier } from '@azure/communication-common';\nimport { AddPhoneNumberOptions } from '@azure/communication-calling';\nimport { drawerContainerStyles } from '../CallComposite/styles/CallComposite.styles';\n\n/** @private */\nexport interface CallingDialpadStrings {\n  dialpadModalAriaLabel?: string;\n  dialpadModalTitle?: string;\n  dialpadCloseModalButtonAriaLabel?: string;\n  dialpadStartCallButtonLabel?: string;\n}\n\n/** @private */\nexport interface CallingDialpadProps {\n  isMobile: boolean;\n  showDialpad: boolean;\n  strings: CallingDialpadStrings;\n  onDismissDialpad: () => void;\n  onAddParticipant: (participant: PhoneNumberIdentifier, options?: AddPhoneNumberOptions) => void;\n  alternateCallerId: string;\n}\n\n/** @private */\nexport const CallingDialpad = (props: CallingDialpadProps): JSX.Element => {\n  const {\n    strings,\n    isMobile,\n    showDialpad,\n    onDismissDialpad,\n    onAddParticipant,\n    alternateCallerId\n  } = props;\n  const [textFieldInput, setTextFieldInput] = useState('');\n  const theme = useTheme();\n  const onDismissTriggered = (): void => {\n    setTextFieldInput('');\n    onDismissDialpad();\n  };\n  const onClickCall = (): void => {\n    if (onAddParticipant) {\n      /**\n       * Format the phone number in dialpad textfield to make sure the phone number is in E.164 format.\n       * We assume the input number always include countrycode\n       */\n\n      const phoneNumber = {\n        phoneNumber: '+' + textFieldInput.replace(/\\D/g, '').replaceAll(' ', '')\n      };\n      onAddParticipant(phoneNumber, {\n        alternateCallerId: {\n          phoneNumber: alternateCallerId\n        }\n      });\n      onDismissTriggered();\n    }\n  };\n  const dialpadModalStyle: Partial<IModalStyles> = useMemo(() => themeddialpadModalStyle(theme), [theme]);\n  const dialpadStyle: Partial<DialpadStyles> = useMemo(() => themedDialpadStyle(isMobile, theme), [theme, isMobile]);\n  const callButtonStyle: Partial<IButtonStyles> = useMemo(() => themedCallButtonStyle(theme), [theme]);\n  const dialpadComponent = (): JSX.Element => {\n    return <>\n        <Dialpad styles={dialpadStyle} onChange={setTextFieldInput} longPressTrigger={isMobile ? 'touch' : 'mouseAndTouch'} />\n        <PrimaryButton text={strings.dialpadStartCallButtonLabel} onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"DialpadStartCall\" />} onClick={onClickCall} styles={callButtonStyle} disabled={textFieldInput === ''} />\n      </>;\n  };\n  if (isMobile) {\n    return <Stack data-ui-id=\"call-with-chat-composite-dialpad\">\n        {showDialpad && <Stack styles={drawerContainerStyles()}>\n            <_DrawerSurface onLightDismiss={onDismissTriggered} disableMaxHeight={true}>\n              <Stack style={{\n            padding: '1rem'\n          }}>{dialpadComponent()}</Stack>\n            </_DrawerSurface>\n          </Stack>}\n      </Stack>;\n  }\n  return <>\n      {<Modal titleAriaId={strings.dialpadModalAriaLabel} isOpen={showDialpad} onDismiss={onDismissTriggered} isBlocking={true} styles={dialpadModalStyle} data-ui-id=\"call-with-chat-composite-dialpad\">\n          <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\">\n            <Text>{strings.dialpadModalTitle}</Text>\n            <IconButton iconProps={{\n          iconName: 'Cancel'\n        }} ariaLabel={strings.dialpadCloseModalButtonAriaLabel} onClick={onDismissTriggered} style={{\n          color: theme.palette.black\n        }} />\n          </Stack>\n\n          <Stack style={{\n        overflow: 'hidden'\n      }}>{dialpadComponent()}</Stack>\n        </Modal>}\n    </>;\n};"]}

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

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

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

@@ -6,10 +6,12 @@ import { FontIcon } from '@fluentui/react';
 import React from 'react';
 /** @private */
 export const CalloutWithIcon = (props) => {
-    return (React.createElement(Callout, { styles: calloutStyle, target: `#${props.targetId}`, directionalHint: DirectionalHint.topCenter, beakWidth: BEAK_WIDTH_PX, gapSpace: GAP_SPACE_PX, doNotLayer: props.doNotLayer },
-        React.createElement(Stack, { horizontal: true, styles: calloutRootStackStyle, tokens: { childrenGap: '0.375rem' } },
+    return React.createElement(Callout, { styles: calloutStyle, target: `#${props.targetId}`, directionalHint: DirectionalHint.topCenter, beakWidth: BEAK_WIDTH_PX, gapSpace: GAP_SPACE_PX, doNotLayer: props.doNotLayer },
+        React.createElement(Stack, { horizontal: true, styles: calloutRootStackStyle, tokens: {
+                childrenGap: '0.375rem'
+            } },
             React.createElement(FontIcon, { iconName: "Checkmark", className: iconClass }),
-            React.createElement(Text, null, props.text))));
+            React.createElement(Text, null, props.text)));
 };
 const calloutStyle = {
     root: {

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

@@ -1 +1 @@
-{"version":3,"file":"CalloutWithIcon.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/CalloutWithIcon.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACrF,iDAAiD;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,eAAe;AACf,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;IAC1E,OAAO,CACL,oBAAC,OAAO,IACN,MAAM,EAAE,YAAY,EACpB,MAAM,EAAE,IAAI,KAAK,CAAC,QAAQ,EAAE,EAC5B,eAAe,EAAE,eAAe,CAAC,SAAS,EAC1C,SAAS,EAAE,aAAa,EACxB,QAAQ,EAAE,YAAY,EACtB,UAAU,EAAE,KAAK,CAAC,UAAU;QAE5B,oBAAC,KAAK,IAAC,UAAU,QAAC,MAAM,EAAE,qBAAqB,EAAE,MAAM,EAAE,EAAE,WAAW,EAAE,UAAU,EAAE;YAClF,oBAAC,QAAQ,IAAC,QAAQ,EAAC,WAAW,EAAC,SAAS,EAAE,SAAS,GAAI;YACvD,oBAAC,IAAI,QAAE,KAAK,CAAC,IAAI,CAAQ,CACnB,CACA,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG;IACnB,IAAI,EAAE;QACJ,OAAO,EAAE,kCAAkC;QAC3C,YAAY,EAAE,SAAS;KACxB;IACD,WAAW,EAAE;QACX,YAAY,EAAE,SAAS;KACxB;IACD,SAAS,EAAE;QACT,MAAM,EAAE,CAAC;KACV;CACF,CAAC;AAEF,MAAM,qBAAqB,GAAG;IAC5B,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;KACrB;CACF,CAAC;AAEF,MAAM,aAAa,GAAG,CAAC,CAAC;AAExB,MAAM,YAAY,GAAG,CAAC,CAAC;AAEvB,MAAM,SAAS,GAAG,WAAW,CAAC;IAC5B,QAAQ,EAAE,EAAE;CACb,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Callout, DirectionalHint, mergeStyles, Stack, Text } from '@fluentui/react';\n// eslint-disable-next-line no-restricted-imports\nimport { FontIcon } from '@fluentui/react';\nimport React from 'react';\n\n/** @private */\nexport interface CalloutWithIconProps {\n  targetId: string;\n  text?: string;\n  doNotLayer?: boolean;\n}\n\n/** @private */\nexport const CalloutWithIcon = (props: CalloutWithIconProps): JSX.Element => {\n  return (\n    <Callout\n      styles={calloutStyle}\n      target={`#${props.targetId}`}\n      directionalHint={DirectionalHint.topCenter}\n      beakWidth={BEAK_WIDTH_PX}\n      gapSpace={GAP_SPACE_PX}\n      doNotLayer={props.doNotLayer}\n    >\n      <Stack horizontal styles={calloutRootStackStyle} tokens={{ childrenGap: '0.375rem' }}>\n        <FontIcon iconName=\"Checkmark\" className={iconClass} />\n        <Text>{props.text}</Text>\n      </Stack>\n    </Callout>\n  );\n};\n\nconst calloutStyle = {\n  root: {\n    padding: '0.375rem 0.75rem 0.375rem 0.5rem',\n    borderRadius: '0.25rem'\n  },\n  beakCurtain: {\n    borderRadius: '0.25rem'\n  },\n  container: {\n    zIndex: 0\n  }\n};\n\nconst calloutRootStackStyle = {\n  root: {\n    display: 'flex',\n    alignItems: 'center'\n  }\n};\n\nconst BEAK_WIDTH_PX = 8;\n\nconst GAP_SPACE_PX = 2;\n\nconst iconClass = mergeStyles({\n  fontSize: 18\n});\n"]}
+{"version":3,"file":"CalloutWithIcon.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/CalloutWithIcon.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACrF,iDAAiD;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,eAAe;AACf,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;IAC1E,OAAO,oBAAC,OAAO,IAAC,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,eAAe,EAAE,eAAe,CAAC,SAAS,EAAE,SAAS,EAAE,aAAa,EAAE,QAAQ,EAAE,YAAY,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU;QAC1L,oBAAC,KAAK,IAAC,UAAU,QAAC,MAAM,EAAE,qBAAqB,EAAE,MAAM,EAAE;gBACzD,WAAW,EAAE,UAAU;aACxB;YACG,oBAAC,QAAQ,IAAC,QAAQ,EAAC,WAAW,EAAC,SAAS,EAAE,SAAS,GAAI;YACvD,oBAAC,IAAI,QAAE,KAAK,CAAC,IAAI,CAAQ,CACnB,CACA,CAAC;AACf,CAAC,CAAC;AACF,MAAM,YAAY,GAAG;IACnB,IAAI,EAAE;QACJ,OAAO,EAAE,kCAAkC;QAC3C,YAAY,EAAE,SAAS;KACxB;IACD,WAAW,EAAE;QACX,YAAY,EAAE,SAAS;KACxB;IACD,SAAS,EAAE;QACT,MAAM,EAAE,CAAC;KACV;CACF,CAAC;AACF,MAAM,qBAAqB,GAAG;IAC5B,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;KACrB;CACF,CAAC;AACF,MAAM,aAAa,GAAG,CAAC,CAAC;AACxB,MAAM,YAAY,GAAG,CAAC,CAAC;AACvB,MAAM,SAAS,GAAG,WAAW,CAAC;IAC5B,QAAQ,EAAE,EAAE;CACb,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Callout, DirectionalHint, mergeStyles, Stack, Text } from '@fluentui/react';\n// eslint-disable-next-line no-restricted-imports\nimport { FontIcon } from '@fluentui/react';\nimport React from 'react';\n\n/** @private */\nexport interface CalloutWithIconProps {\n  targetId: string;\n  text?: string;\n  doNotLayer?: boolean;\n}\n\n/** @private */\nexport const CalloutWithIcon = (props: CalloutWithIconProps): JSX.Element => {\n  return <Callout styles={calloutStyle} target={`#${props.targetId}`} directionalHint={DirectionalHint.topCenter} beakWidth={BEAK_WIDTH_PX} gapSpace={GAP_SPACE_PX} doNotLayer={props.doNotLayer}>\n      <Stack horizontal styles={calloutRootStackStyle} tokens={{\n      childrenGap: '0.375rem'\n    }}>\n        <FontIcon iconName=\"Checkmark\" className={iconClass} />\n        <Text>{props.text}</Text>\n      </Stack>\n    </Callout>;\n};\nconst calloutStyle = {\n  root: {\n    padding: '0.375rem 0.75rem 0.375rem 0.5rem',\n    borderRadius: '0.25rem'\n  },\n  beakCurtain: {\n    borderRadius: '0.25rem'\n  },\n  container: {\n    zIndex: 0\n  }\n};\nconst calloutRootStackStyle = {\n  root: {\n    display: 'flex',\n    alignItems: 'center'\n  }\n};\nconst BEAK_WIDTH_PX = 8;\nconst GAP_SPACE_PX = 2;\nconst iconClass = mergeStyles({\n  fontSize: 18\n});"]}

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

@@ -42,19 +42,17 @@ export const CaptionsBannerMoreButton = (props) => {
     }), [startCaptionsButtonProps, props.returnFocusRef]);
     moreButtonContextualMenuItems.push({
         key: 'ToggleCaptionsKey',
-        text: startCaptionsButtonProps.checked
-            ? localeStrings.strings.call.startCaptionsButtonTooltipOnContent
-            : localeStrings.strings.call.startCaptionsButtonTooltipOffContent,
+        text: startCaptionsButtonProps.checked ? localeStrings.strings.call.startCaptionsButtonTooltipOnContent : localeStrings.strings.call.startCaptionsButtonTooltipOffContent,
         onClick: () => {
-            startCaptionsButtonProps.checked
-                ? stopCaptions()
-                : startCaptionsButtonProps.currentSpokenLanguage !== ''
-                    ? startCaptions()
-                    : props.onCaptionsSettingsClick && props.onCaptionsSettingsClick();
+            startCaptionsButtonProps.checked ? stopCaptions() : startCaptionsButtonProps.currentSpokenLanguage !== '' ? startCaptions() : props.onCaptionsSettingsClick && props.onCaptionsSettingsClick();
         },
         iconProps: {
             iconName: startCaptionsButtonProps.checked ? 'CaptionsOffIcon' : 'CaptionsIcon',
-            styles: { root: { lineHeight: 0 } }
+            styles: {
+                root: {
+                    lineHeight: 0
+                }
+            }
         },
         itemProps: {
             styles: buttonFlyoutIncreasedSizeStyles
@@ -68,7 +66,11 @@ export const CaptionsBannerMoreButton = (props) => {
             onClick: props.onCaptionsSettingsClick,
             iconProps: {
                 iconName: 'CaptionsSettingsIcon',
-                styles: { root: { lineHeight: 0 } }
+                styles: {
+                    root: {
+                        lineHeight: 0
+                    }
+                }
             },
             itemProps: {
                 styles: buttonFlyoutIncreasedSizeStyles
@@ -76,11 +78,13 @@ export const CaptionsBannerMoreButton = (props) => {
             disabled: !startCaptionsButtonProps.checked
         });
     }
-    return (React.createElement(MoreButton, Object.assign({}, props, { "data-ui-id": "captions-banner-more-button", strings: moreButtonStrings, menuIconProps: { hidden: true }, menuProps: {
+    return React.createElement(MoreButton, Object.assign({}, props, { "data-ui-id": "captions-banner-more-button", strings: moreButtonStrings, menuIconProps: {
+            hidden: true
+        }, menuProps: {
             items: moreButtonContextualMenuItems,
             calloutProps: {
                 preventDismissOnEvent: _preventDismissOnEvent
             }
-        } })));
+        } }));
 };
 //# sourceMappingURL=CaptionsBannerMoreButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CaptionsBannerMoreButton.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/CaptionsBannerMoreButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { ControlBarButtonProps } from '@internal/react-components';\nimport { useCallback } from 'react';\nimport { IContextualMenuItem } from '@fluentui/react';\nimport { StartCaptionsButton } from '@internal/react-components';\nimport { useMemo } from 'react';\nimport { buttonFlyoutIncreasedSizeStyles } from '../CallComposite/styles/Buttons.styles';\nimport { useLocale } from '../localization';\nimport { MoreButton } from './MoreButton';\nimport { _preventDismissOnEvent } from '@internal/acs-ui-common';\nimport { FocusableElement } from './types/FocusableElement';\nimport { usePropsFor } from '../CallComposite/hooks/usePropsFor';\n\n/** @private */\nexport interface CaptionsBannerMoreButtonProps extends ControlBarButtonProps {\n  onCaptionsSettingsClick?: () => void;\n\n  /** Element to return focus to when the Captions Banner is closed */\n  returnFocusRef?: React.RefObject<FocusableElement>;\n}\n\n/**\n *\n * @private\n */\nexport const CaptionsBannerMoreButton = (props: CaptionsBannerMoreButtonProps): JSX.Element => {\n  const localeStrings = useLocale();\n  const startCaptionsButtonProps = usePropsFor(StartCaptionsButton);\n  const moreButtonStrings = useMemo(\n    () => ({\n      label: localeStrings.strings.call.captionsBannerMoreButtonCallingLabel,\n      tooltipOffContent: localeStrings.strings.call.captionsBannerMoreButtonTooltip\n    }),\n    [localeStrings]\n  );\n\n  const moreButtonContextualMenuItems: IContextualMenuItem[] = [];\n\n  const startCaptions = useCallback(async () => {\n    await startCaptionsButtonProps.onStartCaptions({\n      spokenLanguage: startCaptionsButtonProps.currentSpokenLanguage\n    });\n  }, [startCaptionsButtonProps]);\n\n  const stopCaptions = useCallback(async () => {\n    await startCaptionsButtonProps.onStopCaptions();\n    props.returnFocusRef?.current?.focus();\n  }, [startCaptionsButtonProps, props.returnFocusRef]);\n\n  moreButtonContextualMenuItems.push({\n    key: 'ToggleCaptionsKey',\n    text: startCaptionsButtonProps.checked\n      ? localeStrings.strings.call.startCaptionsButtonTooltipOnContent\n      : localeStrings.strings.call.startCaptionsButtonTooltipOffContent,\n    onClick: () => {\n      startCaptionsButtonProps.checked\n        ? stopCaptions()\n        : startCaptionsButtonProps.currentSpokenLanguage !== ''\n          ? startCaptions()\n          : props.onCaptionsSettingsClick && props.onCaptionsSettingsClick();\n    },\n    iconProps: {\n      iconName: startCaptionsButtonProps.checked ? 'CaptionsOffIcon' : 'CaptionsIcon',\n      styles: { root: { lineHeight: 0 } }\n    },\n    itemProps: {\n      styles: buttonFlyoutIncreasedSizeStyles\n    }\n  });\n\n  if (props.onCaptionsSettingsClick) {\n    moreButtonContextualMenuItems.push({\n      key: 'openCaptionsSettingsKey',\n      id: 'common-call-composite-captions-settings-button',\n      text: localeStrings.strings.call.captionsSettingsLabel,\n      onClick: props.onCaptionsSettingsClick,\n      iconProps: {\n        iconName: 'CaptionsSettingsIcon',\n        styles: { root: { lineHeight: 0 } }\n      },\n      itemProps: {\n        styles: buttonFlyoutIncreasedSizeStyles\n      },\n      disabled: !startCaptionsButtonProps.checked\n    });\n  }\n\n  return (\n    <MoreButton\n      {...props}\n      data-ui-id=\"captions-banner-more-button\"\n      strings={moreButtonStrings}\n      menuIconProps={{ hidden: true }}\n      menuProps={{\n        items: moreButtonContextualMenuItems,\n        calloutProps: {\n          preventDismissOnEvent: _preventDismissOnEvent\n        }\n      }}\n    />\n  );\n};\n"]}
+{"version":3,"file":"CaptionsBannerMoreButton.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/CaptionsBannerMoreButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { ControlBarButtonProps } from '@internal/react-components';\nimport { useCallback } from 'react';\nimport { IContextualMenuItem } from '@fluentui/react';\nimport { StartCaptionsButton } from '@internal/react-components';\nimport { useMemo } from 'react';\nimport { buttonFlyoutIncreasedSizeStyles } from '../CallComposite/styles/Buttons.styles';\nimport { useLocale } from '../localization';\nimport { MoreButton } from './MoreButton';\nimport { _preventDismissOnEvent } from '@internal/acs-ui-common';\nimport { FocusableElement } from './types/FocusableElement';\nimport { usePropsFor } from '../CallComposite/hooks/usePropsFor';\n\n/** @private */\nexport interface CaptionsBannerMoreButtonProps extends ControlBarButtonProps {\n  onCaptionsSettingsClick?: () => void;\n\n  /** Element to return focus to when the Captions Banner is closed */\n  returnFocusRef?: React.RefObject<FocusableElement>;\n}\n\n/**\n *\n * @private\n */\nexport const CaptionsBannerMoreButton = (props: CaptionsBannerMoreButtonProps): JSX.Element => {\n  const localeStrings = useLocale();\n  const startCaptionsButtonProps = usePropsFor(StartCaptionsButton);\n  const moreButtonStrings = useMemo(() => ({\n    label: localeStrings.strings.call.captionsBannerMoreButtonCallingLabel,\n    tooltipOffContent: localeStrings.strings.call.captionsBannerMoreButtonTooltip\n  }), [localeStrings]);\n  const moreButtonContextualMenuItems: IContextualMenuItem[] = [];\n  const startCaptions = useCallback(async () => {\n    await startCaptionsButtonProps.onStartCaptions({\n      spokenLanguage: startCaptionsButtonProps.currentSpokenLanguage\n    });\n  }, [startCaptionsButtonProps]);\n  const stopCaptions = useCallback(async () => {\n    await startCaptionsButtonProps.onStopCaptions();\n    props.returnFocusRef?.current?.focus();\n  }, [startCaptionsButtonProps, props.returnFocusRef]);\n  moreButtonContextualMenuItems.push({\n    key: 'ToggleCaptionsKey',\n    text: startCaptionsButtonProps.checked ? localeStrings.strings.call.startCaptionsButtonTooltipOnContent : localeStrings.strings.call.startCaptionsButtonTooltipOffContent,\n    onClick: () => {\n      startCaptionsButtonProps.checked ? stopCaptions() : startCaptionsButtonProps.currentSpokenLanguage !== '' ? startCaptions() : props.onCaptionsSettingsClick && props.onCaptionsSettingsClick();\n    },\n    iconProps: {\n      iconName: startCaptionsButtonProps.checked ? 'CaptionsOffIcon' : 'CaptionsIcon',\n      styles: {\n        root: {\n          lineHeight: 0\n        }\n      }\n    },\n    itemProps: {\n      styles: buttonFlyoutIncreasedSizeStyles\n    }\n  });\n  if (props.onCaptionsSettingsClick) {\n    moreButtonContextualMenuItems.push({\n      key: 'openCaptionsSettingsKey',\n      id: 'common-call-composite-captions-settings-button',\n      text: localeStrings.strings.call.captionsSettingsLabel,\n      onClick: props.onCaptionsSettingsClick,\n      iconProps: {\n        iconName: 'CaptionsSettingsIcon',\n        styles: {\n          root: {\n            lineHeight: 0\n          }\n        }\n      },\n      itemProps: {\n        styles: buttonFlyoutIncreasedSizeStyles\n      },\n      disabled: !startCaptionsButtonProps.checked\n    });\n  }\n  return <MoreButton {...props} data-ui-id=\"captions-banner-more-button\" strings={moreButtonStrings} menuIconProps={{\n    hidden: true\n  }} menuProps={{\n    items: moreButtonContextualMenuItems,\n    calloutProps: {\n      preventDismissOnEvent: _preventDismissOnEvent\n    }\n  }} />;\n};"]}

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

@@ -1,5 +1,9 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /** @private */
-export const containerDivStyles = { position: 'relative', width: '100%', height: '100%' };
+export const containerDivStyles = {
+    position: 'relative',
+    width: '100%',
+    height: '100%'
+};
 //# sourceMappingURL=ContainerRectProps.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ContainerRectProps.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/ContainerRectProps.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAUlC,eAAe;AACf,MAAM,CAAC,MAAM,kBAAkB,GAAW,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle } from '@fluentui/react';\n\n/** @private */\nexport type ContainerRectProps = {\n  containerHeight?: number;\n  containerWidth?: number;\n};\n\n/** @private */\nexport const containerDivStyles: IStyle = { position: 'relative', width: '100%', height: '100%' };\n"]}
+{"version":3,"file":"ContainerRectProps.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/ContainerRectProps.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAUlC,eAAe;AACf,MAAM,CAAC,MAAM,kBAAkB,GAAW;IACxC,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;CACf,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle } from '@fluentui/react';\n\n/** @private */\nexport type ContainerRectProps = {\n  containerHeight?: number;\n  containerWidth?: number;\n};\n\n/** @private */\nexport const containerDivStyles: IStyle = {\n  position: 'relative',\n  width: '100%',\n  height: '100%'\n};"]}