@azure/communication-react 1.6.0 → 1.6.1-alpha-202306220014

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

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

package/dist/dist-esm/react-composites/src/composites/common/CallingDialpad.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { PhoneNumberIdentifier } from '@azure/communication-common';
+import { AddPhoneNumberOptions } from '@azure/communication-calling';
+/** @private */
+export interface CallingDialpadStrings {
+    dialpadModalAriaLabel: string;
+    dialpadModalTitle: string;
+    dialpadCloseModalButtonAriaLabel: string;
+    dialpadStartCallButtonLabel: string;
+}
+/** @private */
+export interface CallingDialpadProps {
+    isMobile: boolean;
+    showDialpad: boolean;
+    strings: CallingDialpadStrings;
+    onDismissDialpad: () => void;
+    onAddParticipant: (participant: PhoneNumberIdentifier, options?: AddPhoneNumberOptions) => void;
+    alternateCallerId: string;
+}
+/** @private */
+export declare const CallingDialpad: (props: CallingDialpadProps) => JSX.Element;
+//# sourceMappingURL=CallingDialpad.d.ts.map

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

@@ -0,0 +1,60 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import React from 'react';
+import { useState } from 'react';
+import { useMemo } from 'react';
+import { Dialpad } from "../../../../react-components/src";
+import { _DrawerSurface } from "../../../../react-components/src";
+import { Modal, Stack, useTheme, Text, IconButton } from '@fluentui/react';
+import { PrimaryButton } from '@fluentui/react';
+import { themeddialpadModalStyle } from './CallingDialpad.styles';
+import { themedCallButtonStyle, themedDialpadStyle } from './CallingDialpad.styles';
+/* @conditional-compile-remove(PSTN-calls) */
+import { CallWithChatCompositeIcon } from './icons';
+import { drawerContainerStyles } from '../CallComposite/styles/CallComposite.styles';
+/** @private */
+export const CallingDialpad = (props) => {
+    const { strings, isMobile, showDialpad, onDismissDialpad, onAddParticipant, alternateCallerId } = props;
+    const [textFieldInput, setTextFieldInput] = useState('');
+    const theme = useTheme();
+    const onDismissTriggered = () => {
+        setTextFieldInput('');
+        onDismissDialpad();
+    };
+    const onClickCall = () => {
+        if (onAddParticipant) {
+            /**
+             * 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 } });
+            onDismissTriggered();
+        }
+    };
+    const dialpadModalStyle = useMemo(() => themeddialpadModalStyle(theme), [theme]);
+    const dialpadStyle = useMemo(() => themedDialpadStyle(isMobile, theme), [theme, isMobile]);
+    const callButtonStyle = useMemo(() => themedCallButtonStyle(theme), [theme]);
+    const dialpadComponent = () => {
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Dialpad, { styles: dialpadStyle, onChange: setTextFieldInput, isMobile: isMobile }),
+            React.createElement(PrimaryButton, { text: strings.dialpadStartCallButtonLabel, onRenderIcon: () => DialpadStartCallIconTrampoline(), onClick: onClickCall, styles: callButtonStyle, disabled: textFieldInput === '' })));
+        return React.createElement(React.Fragment, null);
+    };
+    if (isMobile) {
+        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()))))));
+    }
+    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()))));
+};
+function DialpadStartCallIconTrampoline() {
+    /* @conditional-compile-remove(PSTN-calls) */
+    return React.createElement(CallWithChatCompositeIcon, { iconName: "DialpadStartCall" });
+    return React.createElement(React.Fragment, null);
+}
+//# sourceMappingURL=CallingDialpad.js.map

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

@@ -0,0 +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.\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';\n/* @conditional-compile-remove(PSTN-calls) */\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 styles={dialpadStyle} onChange={setTextFieldInput} isMobile={isMobile} />\n        <PrimaryButton\n          text={strings.dialpadStartCallButtonLabel}\n          onRenderIcon={() => DialpadStartCallIconTrampoline()}\n          onClick={onClickCall}\n          styles={callButtonStyle}\n          disabled={textFieldInput === ''}\n        />\n      </>\n    );\n\n    return <></>;\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\nfunction DialpadStartCallIconTrampoline(): JSX.Element {\n  /* @conditional-compile-remove(PSTN-calls) */\n  return <CallWithChatCompositeIcon iconName=\"DialpadStartCall\" />;\n  return <></>;\n}\n\"../../../../react-components/src\""]}

package/dist/dist-esm/react-composites/src/composites/common/CallingDialpad.styles.d.ts

@@ -0,0 +1,15 @@
+import { IButtonStyles, IModalStyles, Theme } from '@fluentui/react';
+import { DialpadStyles } from "../../../../react-components/src";
+/**
+ * @private
+ */
+export declare const themeddialpadModalStyle: (theme: Theme) => Partial<IModalStyles>;
+/**
+ * @private
+ */
+export declare const themedDialpadStyle: (isMobile: boolean, theme: Theme) => Partial<DialpadStyles>;
+/**
+ * @private
+ */
+export declare const themedCallButtonStyle: (theme: Theme) => Partial<IButtonStyles>;
+//# sourceMappingURL=CallingDialpad.styles.d.ts.map

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

@@ -0,0 +1,61 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/**
+ * @private
+ */
+export const themeddialpadModalStyle = (theme) => ({
+    main: {
+        borderRadius: theme.effects.roundedCorner6,
+        padding: '1rem'
+    }
+});
+/**
+ * @private
+ */
+export const themedDialpadStyle = (isMobile, theme) => ({
+    root: {
+        padding: 0,
+        marginLeft: 0,
+        marginRight: 0,
+        maxWidth: '100%'
+    },
+    textField: {
+        root: {
+            borderBottom: `1px solid ${theme.palette.neutralTertiaryAlt}`
+        },
+        field: {
+            backgroundColor: theme.palette.white,
+            fontSize: theme.fonts.large.fontSize,
+            padding: '0 0.5rem',
+            textAlign: isMobile ? 'center' : 'left',
+            ':active': {
+                padding: '0 0.5rem'
+            }
+        }
+    },
+    deleteIcon: {
+        root: {
+            backgroundColor: theme.palette.white
+        }
+    },
+    digit: {
+        color: theme.palette.themeDarkAlt
+    }
+});
+/**
+ * @private
+ */
+export const themedCallButtonStyle = (theme) => ({
+    root: {
+        fontWeight: theme.fonts.medium.fontWeight,
+        fontSize: theme.fonts.medium.fontSize,
+        width: '100%',
+        height: '2.5rem',
+        borderRadius: 3,
+        padding: '0.625rem'
+    },
+    textContainer: {
+        display: 'contents'
+    }
+});
+//# sourceMappingURL=CallingDialpad.styles.js.map

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

@@ -0,0 +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\"../../../../react-components/src\""]}

package/dist/dist-esm/react-composites/src/composites/common/CaptionsBanner.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+/** @private */
+export declare const CaptionsBanner: (props: {
+    isMobile: boolean;
+}) => JSX.Element;
+//# sourceMappingURL=CaptionsBanner.d.ts.map

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

@@ -0,0 +1,68 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import React from 'react';
+/* @conditional-compile-remove(close-captions) */
+import { useState } from 'react';
+/* @conditional-compile-remove(close-captions) */
+import { _CaptionsBanner } from "../../../../react-components/src";
+/* @conditional-compile-remove(close-captions) */
+import { mergeStyles, Stack } from '@fluentui/react';
+/* @conditional-compile-remove(close-captions) */
+import { CaptionsSettingsModal } from './CaptionsSettingsModal';
+/* @conditional-compile-remove(close-captions) */
+import { CaptionsBannerMoreButton } from './CaptionsBannerMoreButton';
+/* @conditional-compile-remove(close-captions) */
+import { useAdaptedSelector } from '../CallComposite/hooks/useAdaptedSelector';
+/* @conditional-compile-remove(close-captions) */
+import { useHandlers } from '../CallComposite/hooks/useHandlers';
+/* @conditional-compile-remove(close-captions) */
+import { _captionsBannerSelector } from "../../../../calling-component-bindings/src";
+/* @conditional-compile-remove(close-captions) */
+import { useLocale } from '../localization';
+/* @conditional-compile-remove(close-captions) */
+const mobileViewBannerWidth = '90%';
+/* @conditional-compile-remove(close-captions) */
+const desktopViewBannerWidth = '50%';
+/** @private */
+export const CaptionsBanner = (props) => {
+    /* @conditional-compile-remove(close-captions) */
+    const captionsBannerProps = useAdaptedSelector(_captionsBannerSelector);
+    /* @conditional-compile-remove(close-captions) */
+    const handlers = useHandlers(_CaptionsBanner);
+    /* @conditional-compile-remove(close-captions) */
+    const [isCaptionsSettingsOpen, setIsCaptionsSettingsOpen] = useState(false);
+    /* @conditional-compile-remove(close-captions) */
+    const onClickCaptionsSettings = () => {
+        setIsCaptionsSettingsOpen(true);
+    };
+    /* @conditional-compile-remove(close-captions) */
+    const onDismissCaptionsSettings = () => {
+        setIsCaptionsSettingsOpen(false);
+    };
+    /* @conditional-compile-remove(close-captions) */
+    const containerClassName = mergeStyles({
+        position: 'relative'
+    });
+    /* @conditional-compile-remove(close-captions) */
+    const floatingChildClassName = mergeStyles({
+        position: 'absolute',
+        right: 0,
+        top: 0
+    });
+    /* @conditional-compile-remove(close-captions) */
+    const strings = useLocale().strings.call;
+    /* @conditional-compile-remove(close-captions) */
+    const captionsBannerStrings = {
+        captionsBannerSpinnerText: strings.captionsBannerSpinnerText
+    };
+    return (React.createElement(React.Fragment, null,
+        /* @conditional-compile-remove(close-captions) */ isCaptionsSettingsOpen && (React.createElement(CaptionsSettingsModal, { showCaptionsSettingsModal: isCaptionsSettingsOpen, onDismissCaptionsSettings: onDismissCaptionsSettings })),
+        /* @conditional-compile-remove(close-captions) */
+        React.createElement("div", { className: containerClassName },
+            React.createElement(Stack, { horizontalAlign: "center" },
+                React.createElement(Stack.Item, { style: { width: props.isMobile ? mobileViewBannerWidth : desktopViewBannerWidth } },
+                    React.createElement(_CaptionsBanner, Object.assign({}, captionsBannerProps, handlers, { strings: captionsBannerStrings })))),
+            !props.isMobile && captionsBannerProps.isCaptionsOn && (React.createElement("div", { className: floatingChildClassName },
+                React.createElement(CaptionsBannerMoreButton, { onCaptionsSettingsClick: onClickCaptionsSettings }))))));
+};
+//# sourceMappingURL=CaptionsBanner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CaptionsBanner.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/CaptionsBanner.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport React from 'react';\n/* @conditional-compile-remove(close-captions) */\nimport { useState } from 'react';\n/* @conditional-compile-remove(close-captions) */\nimport { _CaptionsBanner, _CaptionsBannerStrings } from '@internal/react-components';\n/* @conditional-compile-remove(close-captions) */\nimport { _DrawerMenu, _DrawerMenuItemProps, _DrawerSurface } from '@internal/react-components';\n/* @conditional-compile-remove(close-captions) */\nimport { mergeStyles, Stack } from '@fluentui/react';\n/* @conditional-compile-remove(close-captions) */\nimport { CaptionsSettingsModal } from './CaptionsSettingsModal';\n/* @conditional-compile-remove(close-captions) */\nimport { CaptionsBannerMoreButton } from './CaptionsBannerMoreButton';\n/* @conditional-compile-remove(close-captions) */\nimport { useAdaptedSelector } from '../CallComposite/hooks/useAdaptedSelector';\n/* @conditional-compile-remove(close-captions) */\nimport { useHandlers } from '../CallComposite/hooks/useHandlers';\n/* @conditional-compile-remove(close-captions) */\nimport { _captionsBannerSelector } from '@internal/calling-component-bindings';\n\n/* @conditional-compile-remove(close-captions) */\nimport { useLocale } from '../localization';\n\n/* @conditional-compile-remove(close-captions) */\nconst mobileViewBannerWidth = '90%';\n/* @conditional-compile-remove(close-captions) */\nconst desktopViewBannerWidth = '50%';\n\n/** @private */\nexport const CaptionsBanner = (props: { isMobile: boolean }): JSX.Element => {\n  /* @conditional-compile-remove(close-captions) */\n  const captionsBannerProps = useAdaptedSelector(_captionsBannerSelector);\n  /* @conditional-compile-remove(close-captions) */\n  const handlers = useHandlers(_CaptionsBanner);\n  /* @conditional-compile-remove(close-captions) */\n  const [isCaptionsSettingsOpen, setIsCaptionsSettingsOpen] = useState<boolean>(false);\n  /* @conditional-compile-remove(close-captions) */\n  const onClickCaptionsSettings = (): void => {\n    setIsCaptionsSettingsOpen(true);\n  };\n  /* @conditional-compile-remove(close-captions) */\n  const onDismissCaptionsSettings = (): void => {\n    setIsCaptionsSettingsOpen(false);\n  };\n  /* @conditional-compile-remove(close-captions) */\n  const containerClassName = mergeStyles({\n    position: 'relative'\n  });\n  /* @conditional-compile-remove(close-captions) */\n  const floatingChildClassName = mergeStyles({\n    position: 'absolute',\n    right: 0,\n    top: 0\n  });\n\n  /* @conditional-compile-remove(close-captions) */\n  const strings = useLocale().strings.call;\n\n  /* @conditional-compile-remove(close-captions) */\n  const captionsBannerStrings: _CaptionsBannerStrings = {\n    captionsBannerSpinnerText: strings.captionsBannerSpinnerText\n  };\n  return (\n    <>\n      {\n        /* @conditional-compile-remove(close-captions) */ isCaptionsSettingsOpen && (\n          <CaptionsSettingsModal\n            showCaptionsSettingsModal={isCaptionsSettingsOpen}\n            onDismissCaptionsSettings={onDismissCaptionsSettings}\n          />\n        )\n      }\n      {\n        /* @conditional-compile-remove(close-captions) */\n        <div className={containerClassName}>\n          <Stack horizontalAlign=\"center\">\n            <Stack.Item style={{ width: props.isMobile ? mobileViewBannerWidth : desktopViewBannerWidth }}>\n              <_CaptionsBanner {...captionsBannerProps} {...handlers} strings={captionsBannerStrings} />\n            </Stack.Item>\n          </Stack>\n          {!props.isMobile && captionsBannerProps.isCaptionsOn && (\n            <div className={floatingChildClassName}>\n              <CaptionsBannerMoreButton onCaptionsSettingsClick={onClickCaptionsSettings} />\n            </div>\n          )}\n        </div>\n      }\n    </>\n  );\n};\n\"../../../../react-components/src\"\"../../../../calling-component-bindings/src\""]}

package/dist/dist-esm/react-composites/src/composites/common/CaptionsBannerMoreButton.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { ControlBarButtonProps } from "../../../../react-components/src";
+/** @private */
+export interface CaptionsBannerMoreButtonProps extends ControlBarButtonProps {
+    onCaptionsSettingsClick?: () => void;
+}
+/**
+ *
+ * @private
+ */
+export declare const CaptionsBannerMoreButton: (props: CaptionsBannerMoreButtonProps) => JSX.Element;
+//# sourceMappingURL=CaptionsBannerMoreButton.d.ts.map

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

@@ -0,0 +1,104 @@
+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) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import React from 'react';
+/* @conditional-compile-remove(close-captions) */
+import { useCallback } from 'react';
+/* @conditional-compile-remove(close-captions) */
+import { _StartCaptionsButton } from "../../../../react-components/src";
+/* @conditional-compile-remove(close-captions) */
+import { useMemo } from 'react';
+/* @conditional-compile-remove(close-captions) */
+import { useAdaptedSelector } from '../CallComposite/hooks/useAdaptedSelector';
+/* @conditional-compile-remove(close-captions) */
+import { useHandlers } from '../CallComposite/hooks/useHandlers';
+/* @conditional-compile-remove(close-captions) */
+import { buttonFlyoutIncreasedSizeStyles } from '../CallComposite/styles/Buttons.styles';
+/* @conditional-compile-remove(close-captions) */
+import { useLocale } from '../localization';
+/* @conditional-compile-remove(close-captions) */
+import { MoreButton } from './MoreButton';
+/* @conditional-compile-remove(close-captions) */
+import { _startCaptionsButtonSelector } from "../../../../calling-component-bindings/src";
+/* @conditional-compile-remove(close-captions) */
+import { _preventDismissOnEvent } from "../../../../acs-ui-common/src";
+/**
+ *
+ * @private
+ */
+export const CaptionsBannerMoreButton = (props) => {
+    /* @conditional-compile-remove(close-captions) */
+    const localeStrings = useLocale();
+    /* @conditional-compile-remove(close-captions) */
+    const startCaptionsButtonProps = useAdaptedSelector(_startCaptionsButtonSelector);
+    /* @conditional-compile-remove(close-captions) */
+    const startCaptionsButtonHandlers = useHandlers(_StartCaptionsButton);
+    /* @conditional-compile-remove(close-captions) */
+    const moreButtonStrings = useMemo(() => ({
+        label: localeStrings.strings.call.captionsBannerMoreButtonCallingLabel,
+        tooltipOffContent: localeStrings.strings.call.captionsBannerMoreButtonTooltip
+    }), [localeStrings]);
+    /* @conditional-compile-remove(close-captions) */
+    const moreButtonContextualMenuItems = [];
+    /* @conditional-compile-remove(close-captions) */
+    const startCaptions = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        yield startCaptionsButtonHandlers.onStartCaptions({
+            spokenLanguage: startCaptionsButtonProps.currentSpokenLanguage
+        });
+    }), [startCaptionsButtonHandlers, startCaptionsButtonProps.currentSpokenLanguage]);
+    /* @conditional-compile-remove(close-captions) */
+    moreButtonContextualMenuItems.push({
+        key: 'ToggleCaptionsKey',
+        text: startCaptionsButtonProps.checked
+            ? localeStrings.strings.call.startCaptionsButtonTooltipOnContent
+            : localeStrings.strings.call.startCaptionsButtonTooltipOffContent,
+        onClick: () => {
+            startCaptionsButtonProps.checked
+                ? startCaptionsButtonHandlers.onStopCaptions()
+                : startCaptionsButtonProps.currentSpokenLanguage !== ''
+                    ? startCaptions()
+                    : props.onCaptionsSettingsClick && props.onCaptionsSettingsClick();
+        },
+        iconProps: {
+            iconName: startCaptionsButtonProps.checked ? 'CaptionsOffIcon' : 'CaptionsIcon',
+            styles: { root: { lineHeight: 0 } }
+        },
+        itemProps: {
+            styles: buttonFlyoutIncreasedSizeStyles
+        }
+    });
+    /* @conditional-compile-remove(close-captions) */
+    if (props.onCaptionsSettingsClick) {
+        moreButtonContextualMenuItems.push({
+            key: 'openCaptionsSettingsKey',
+            id: 'common-call-composite-captions-settings-button',
+            text: localeStrings.strings.call.captionsSettingsLabel,
+            onClick: props.onCaptionsSettingsClick,
+            iconProps: {
+                iconName: 'CaptionsSettingsIcon',
+                styles: { root: { lineHeight: 0 } }
+            },
+            itemProps: {
+                styles: buttonFlyoutIncreasedSizeStyles
+            },
+            disabled: !startCaptionsButtonProps.checked
+        });
+    }
+    /* @conditional-compile-remove(close-captions) */
+    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
+            }
+        } })));
+    return React.createElement(React.Fragment, null);
+};
+//# sourceMappingURL=CaptionsBannerMoreButton.js.map

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

@@ -0,0 +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.\nimport React from 'react';\nimport { ControlBarButtonProps } from '@internal/react-components';\n/* @conditional-compile-remove(close-captions) */\nimport { useCallback } from 'react';\n/* @conditional-compile-remove(close-captions) */\nimport { IContextualMenuItem } from '@fluentui/react';\n/* @conditional-compile-remove(close-captions) */\nimport { _StartCaptionsButton } from '@internal/react-components';\n/* @conditional-compile-remove(close-captions) */\nimport { useMemo } from 'react';\n/* @conditional-compile-remove(close-captions) */\nimport { useAdaptedSelector } from '../CallComposite/hooks/useAdaptedSelector';\n/* @conditional-compile-remove(close-captions) */\nimport { useHandlers } from '../CallComposite/hooks/useHandlers';\n/* @conditional-compile-remove(close-captions) */\nimport { buttonFlyoutIncreasedSizeStyles } from '../CallComposite/styles/Buttons.styles';\n/* @conditional-compile-remove(close-captions) */\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(close-captions) */\nimport { MoreButton } from './MoreButton';\n/* @conditional-compile-remove(close-captions) */\nimport { _startCaptionsButtonSelector } from '@internal/calling-component-bindings';\n/* @conditional-compile-remove(close-captions) */\nimport { _preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/** @private */\nexport interface CaptionsBannerMoreButtonProps extends ControlBarButtonProps {\n  onCaptionsSettingsClick?: () => void;\n}\n\n/**\n *\n * @private\n */\nexport const CaptionsBannerMoreButton = (props: CaptionsBannerMoreButtonProps): JSX.Element => {\n  /* @conditional-compile-remove(close-captions) */\n  const localeStrings = useLocale();\n  /* @conditional-compile-remove(close-captions) */\n  const startCaptionsButtonProps = useAdaptedSelector(_startCaptionsButtonSelector);\n  /* @conditional-compile-remove(close-captions) */\n  const startCaptionsButtonHandlers = useHandlers(_StartCaptionsButton);\n  /* @conditional-compile-remove(close-captions) */\n  const moreButtonStrings = useMemo(\n    () => ({\n      label: localeStrings.strings.call.captionsBannerMoreButtonCallingLabel,\n      tooltipOffContent: localeStrings.strings.call.captionsBannerMoreButtonTooltip\n    }),\n    [localeStrings]\n  );\n\n  /* @conditional-compile-remove(close-captions) */\n  const moreButtonContextualMenuItems: IContextualMenuItem[] = [];\n\n  /* @conditional-compile-remove(close-captions) */\n  const startCaptions = useCallback(async () => {\n    await startCaptionsButtonHandlers.onStartCaptions({\n      spokenLanguage: startCaptionsButtonProps.currentSpokenLanguage\n    });\n  }, [startCaptionsButtonHandlers, startCaptionsButtonProps.currentSpokenLanguage]);\n\n  /* @conditional-compile-remove(close-captions) */\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        ? startCaptionsButtonHandlers.onStopCaptions()\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  /* @conditional-compile-remove(close-captions) */\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  /* @conditional-compile-remove(close-captions) */\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  return <></>;\n};\n\"../../../../react-components/src\"\"../../../../calling-component-bindings/src\"\"../../../../acs-ui-common/src\""]}

package/dist/dist-esm/react-composites/src/composites/common/CaptionsSettingsModal.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+/** @private */
+export declare const CaptionsSettingsModal: (props: {
+    showCaptionsSettingsModal: boolean;
+    onDismissCaptionsSettings: () => void;
+}) => JSX.Element;
+//# sourceMappingURL=CaptionsSettingsModal.d.ts.map

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

@@ -0,0 +1,38 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import React from 'react';
+/* @conditional-compile-remove(close-captions) */
+import { _CaptionsSettingsModal } from "../../../../react-components/src";
+/* @conditional-compile-remove(close-captions) */
+import { useAdaptedSelector } from '../CallComposite/hooks/useAdaptedSelector';
+/* @conditional-compile-remove(close-captions) */
+import { useHandlers } from '../CallComposite/hooks/useHandlers';
+/* @conditional-compile-remove(close-captions) */
+import { useLocale } from '../localization';
+/* @conditional-compile-remove(close-captions) */
+import { _changeSpokenLanguageSelector } from "../../../../calling-component-bindings/src";
+/** @private */
+export const CaptionsSettingsModal = (props) => {
+    /* @conditional-compile-remove(close-captions) */
+    const CaptionsSettingsModalProps = useAdaptedSelector(_changeSpokenLanguageSelector);
+    /* @conditional-compile-remove(close-captions) */
+    const handlers = useHandlers(_CaptionsSettingsModal);
+    /* @conditional-compile-remove(close-captions) */
+    const strings = useLocale().strings.call;
+    /* @conditional-compile-remove(close-captions) */
+    const modalStrings = {
+        captionsSettingsModalTitle: strings.captionsSettingsModalTitle,
+        captionsSettingsDropdownLabel: strings.captionsSettingsDropdownLabel,
+        captionsSettingsDropdownInfoText: strings.captionsSettingsDropdownInfoText,
+        captionsSettingsConfirmButtonLabel: strings.captionsSettingsConfirmButtonLabel,
+        captionsSettingsCancelButtonLabel: strings.captionsSettingsCancelButtonLabel,
+        captionsSettingsModalAriaLabel: strings.captionsSettingsModalAriaLabel,
+        captionsSettingsCloseModalButtonAriaLabel: strings.captionsSettingsCloseModalButtonAriaLabel
+    };
+    /* @conditional-compile-remove(close-captions) */
+    const captionsAvailableLanguageStrings = strings.captionsAvailableLanguageStrings;
+    /* @conditional-compile-remove(close-captions) */
+    return (React.createElement(_CaptionsSettingsModal, Object.assign({}, CaptionsSettingsModalProps, handlers, { strings: modalStrings, captionsAvailableLanguageStrings: captionsAvailableLanguageStrings, showModal: props.showCaptionsSettingsModal, onDismissCaptionsSettings: props.onDismissCaptionsSettings })));
+    return React.createElement(React.Fragment, null);
+};
+//# sourceMappingURL=CaptionsSettingsModal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CaptionsSettingsModal.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/CaptionsSettingsModal.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,iDAAiD;AACjD,OAAO,EACL,sBAAsB,EAGvB,yCAAmC;AACpC,iDAAiD;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2CAA2C,CAAC;AAC/E,iDAAiD;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,iDAAiD;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,iDAAiD;AACjD,OAAO,EAAE,6BAA6B,EAAE,mDAA6C;AAErF,eAAe;AACf,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAGrC,EAAe,EAAE;IAChB,iDAAiD;IACjD,MAAM,0BAA0B,GAAG,kBAAkB,CAAC,6BAA6B,CAAC,CAAC;IACrF,iDAAiD;IACjD,MAAM,QAAQ,GAAG,WAAW,CAAC,sBAAsB,CAAC,CAAC;IACrD,iDAAiD;IACjD,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;IACzC,iDAAiD;IACjD,MAAM,YAAY,GAAkC;QAClD,0BAA0B,EAAE,OAAO,CAAC,0BAA0B;QAC9D,6BAA6B,EAAE,OAAO,CAAC,6BAA6B;QACpE,gCAAgC,EAAE,OAAO,CAAC,gCAAgC;QAC1E,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,iDAAiD;IACjD,MAAM,gCAAgC,GACpC,OAAO,CAAC,gCAAgC,CAAC;IAE3C,iDAAiD;IACjD,OAAO,CACL,oBAAC,sBAAsB,oBACjB,0BAA0B,EAC1B,QAAQ,IACZ,OAAO,EAAE,YAAY,EACrB,gCAAgC,EAAE,gCAAgC,EAClE,SAAS,EAAE,KAAK,CAAC,yBAAyB,EAC1C,yBAAyB,EAAE,KAAK,CAAC,yBAAyB,IAC1D,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(close-captions) */\nimport {\n  _CaptionsSettingsModal,\n  _CaptionsSettingsModalStrings,\n  CaptionsAvailableLanguageStrings\n} from '@internal/react-components';\n/* @conditional-compile-remove(close-captions) */\nimport { useAdaptedSelector } from '../CallComposite/hooks/useAdaptedSelector';\n/* @conditional-compile-remove(close-captions) */\nimport { useHandlers } from '../CallComposite/hooks/useHandlers';\n/* @conditional-compile-remove(close-captions) */\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(close-captions) */\nimport { _changeSpokenLanguageSelector } from '@internal/calling-component-bindings';\n\n/** @private */\nexport const CaptionsSettingsModal = (props: {\n  /* @conditional-compile-remove(close-captions) */ showCaptionsSettingsModal: boolean;\n  /* @conditional-compile-remove(close-captions) */ onDismissCaptionsSettings: () => void;\n}): JSX.Element => {\n  /* @conditional-compile-remove(close-captions) */\n  const CaptionsSettingsModalProps = useAdaptedSelector(_changeSpokenLanguageSelector);\n  /* @conditional-compile-remove(close-captions) */\n  const handlers = useHandlers(_CaptionsSettingsModal);\n  /* @conditional-compile-remove(close-captions) */\n  const strings = useLocale().strings.call;\n  /* @conditional-compile-remove(close-captions) */\n  const modalStrings: _CaptionsSettingsModalStrings = {\n    captionsSettingsModalTitle: strings.captionsSettingsModalTitle,\n    captionsSettingsDropdownLabel: strings.captionsSettingsDropdownLabel,\n    captionsSettingsDropdownInfoText: strings.captionsSettingsDropdownInfoText,\n    captionsSettingsConfirmButtonLabel: strings.captionsSettingsConfirmButtonLabel,\n    captionsSettingsCancelButtonLabel: strings.captionsSettingsCancelButtonLabel,\n    captionsSettingsModalAriaLabel: strings.captionsSettingsModalAriaLabel,\n    captionsSettingsCloseModalButtonAriaLabel: strings.captionsSettingsCloseModalButtonAriaLabel\n  };\n  /* @conditional-compile-remove(close-captions) */\n  const captionsAvailableLanguageStrings: CaptionsAvailableLanguageStrings | undefined =\n    strings.captionsAvailableLanguageStrings;\n\n  /* @conditional-compile-remove(close-captions) */\n  return (\n    <_CaptionsSettingsModal\n      {...CaptionsSettingsModalProps}\n      {...handlers}\n      strings={modalStrings}\n      captionsAvailableLanguageStrings={captionsAvailableLanguageStrings}\n      showModal={props.showCaptionsSettingsModal}\n      onDismissCaptionsSettings={props.onDismissCaptionsSettings}\n    />\n  );\n  return <></>;\n};\n\"../../../../react-components/src\"\"../../../../calling-component-bindings/src\""]}

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

@@ -1,9 +1,5 @@
 // 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":["../../../../../../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};"]}
+{"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"]}

package/dist/dist-esm/react-composites/src/composites/common/ControlBar/CommonCallControlBar.d.ts

@@ -17,6 +17,9 @@ export interface CommonCallControlBarProps {
     disableButtonsForLobbyPage: boolean;
     callControls?: boolean | CommonCallControlOptions | CallWithChatControlOptions;
     disableButtonsForHoldScreen?: boolean;
+    onClickShowDialpad?: () => void;
+    onShowVideoEffectsPicker?: (showVideoEffectsOptions: boolean) => void;
+    isCaptionsSupported?: boolean;
 }
 /**
  * @private