@azure/communication-react 1.16.0-alpha-202404260012 → 1.16.0-alpha-202404270012

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';\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  }\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  // 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      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0\" />\n      <Customizer scopedSettings={{ Layer: { hostId: globalLayerHostId } }}>\n        <WithBackgroundColor>{props.children}</WithBackgroundColor>\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":["../../../../../../../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  }\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      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0\" />\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"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@azure/communication-react",
-  "version": "1.16.0-alpha-202404260012",
+  "version": "1.16.0-alpha-202404270012",
   "sideEffects": false,
   "description": "React library for building modern communication user experiences utilizing Azure Communication Services",
   "keywords": [