npm - @azure/communication-react - Versions diffs - 1.15.0 → 1.16.0-alpha-202404160012 - Mend

@azure/communication-react 1.15.0 → 1.16.0-alpha-202404160012

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1165) hide show

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

@@ -39,24 +39,15 @@ export const BaseProvider = (props) => {
      * We register the default icon mappings merged with custom icons provided through props
      * to ensure all icons render correctly.
      */
-    registerIcons({
-        icons: Object.assign(Object.assign({}, iconsToRegister), props.icons)
-    });
+    registerIcons({ icons: Object.assign(Object.assign({}, iconsToRegister), props.icons) });
     // we use Customizer to override default LayerHost injected to <body />
     // which stop polluting global dom tree and increase compatibility with react-full-screen
-    const CompositeElement = React.createElement(FluentThemeProvider, { fluentTheme: fluentTheme, rtl: rtl },
+    const CompositeElement = (React.createElement(FluentThemeProvider, { fluentTheme: fluentTheme, rtl: rtl },
         React.createElement("meta", { name: "viewport", content: "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" }),
-        React.createElement(Customizer, { scopedSettings: {
-                Layer: {
-                    hostId: globalLayerHostId
-                }
-            } },
+        React.createElement(Customizer, { scopedSettings: { Layer: { hostId: globalLayerHostId } } },
             React.createElement(WithBackgroundColor, null, props.children)),
-        React.createElement(LayerHost, { id: globalLayerHostId, className: mergeStyles(globalLayerHostStyle) }));
-    const localizedElement = locale ? LocalizationProvider({
-        locale,
-        children: CompositeElement
-    }) : CompositeElement;
+        React.createElement(LayerHost, { id: globalLayerHostId, className: mergeStyles(globalLayerHostStyle) })));
+    const localizedElement = locale ? LocalizationProvider({ locale, children: CompositeElement }) : CompositeElement;
     return React.createElement(BaseContext.Provider, { value: true }, localizedElement);
 };
 /**

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

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseComposite.js","sourceRoot":"","sources":["~~../../../../../../preprocess-dist/~~react-composites/src/composites/common/BaseComposite.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,~~EAAE~~,UAAU,~~EAAE~~,SAAS,~~EAAE~~,WAAW,~~EAAgB~~,aAAa,~~EAAE~~,KAAK,~~EAAS~~,QAAQ,~~EAAE~~,MAAM,iBAAiB,CAAC;~~AAC1H~~,OAAO,EAAE,mBAAmB,EAAgC,yCAAmC;AAC/F,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAmB,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAExE,OAAO,EAAsE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AACtH,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AA+C9C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,~~CAAC~~,~~KAE5B~~,~~EAAe~~,EAAE;~~IAChB~~,MAAM,~~EACJ~~,WAAW,~~EACX~~,GAAG,~~EACH~~,MAAM,~~EACP~~,GAAG,KAAK,CAAC;~~IACV~~,MAAM,iBAAiB,GAAG,KAAK,CAAC,yBAAyB,CAAC,CAAC;IAE3D;;;OAGG;IACH,MAAM,cAAc,GAAG,OAAO,EAAE,CAAC;IACjC,IAAI,cAAc,EAAE,CAAC;QACnB,OAAO,0CAAG,KAAK,CAAC,QAAQ,CAAI,CAAC;IAC/B,CAAC;IAED;;OAEG;IACH,MAAM,eAAe,~~GAEjB~~,EAAE,CAAC;~~IACP~~,MAAM,CAAC,OAAO,CAAC,uBAAuB,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;QAC/D,IAAI,KAAK,EAAE,CAAC;YACV,eAAe,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;QAC/B,CAAC;IACH,CAAC,CAAC,CAAC;IAEH;;;OAGG;IACH,aAAa,CAAC~~;QACZ~~,KAAK,~~kCACA~~,eAAe,~~GACf~~,KAAK,CAAC,KAAK,~~CACf;KACF~~,CAAC,CAAC;~~IAEH~~,uEAAuE;IACvE,yFAAyF;IACzF,MAAM,gBAAgB,GAAG,oBAAC,mBAAmB,IAAC,WAAW,EAAE,WAAW,EAAE,GAAG,EAAE,GAAG;~~QAC5E~~,8BAAM,IAAI,EAAC,UAAU,EAAC,OAAO,EAAC,uEAAuE,GAAG;QACxG,oBAAC,UAAU,IAAC,cAAc,EAAE~~;gBAC5B~~,KAAK,EAAE~~;oBACL~~,MAAM,EAAE,iBAAiB;~~iBAC1B;aACF;YACG~~,oBAAC,mBAAmB,QAAE,KAAK,CAAC,QAAQ,CAAuB,CAChD;QACb,oBAAC,SAAS,IAAC,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAE,WAAW,CAAC,oBAAoB,CAAC,GAAI,CAC9D,CAAC;~~IACzB~~,MAAM,gBAAgB,GAAG,MAAM,CAAC,CAAC,CAAC,oBAAoB,CAAC~~;QACrD~~,MAAM~~;QACN~~,QAAQ,EAAE,gBAAgB~~;KAC3B~~,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC;~~IACtB~~,OAAO,oBAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,IAAG,gBAAgB,CAAwB,CAAC;AACtF,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,GAAG,aAAa,CAAU,KAAK,CAAC,CAAC;AAElD;;GAEG;AACH,MAAM,OAAO,GAAG,GAAY,EAAE,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;AAEvD;;;;;GAKG;AACH,MAAM,mBAAmB,GAAG,CAAC,~~KAE5B~~,EAAe,EAAE;~~IAChB~~,MAAM,~~EACJ~~,QAAQ,~~EACT~~,GAAG,KAAK,CAAC;~~IACV~~,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,SAAS,GAAG,WAAW,CAAC;QAC5B,UAAU,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc;QAC/C,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,UAAU;KACrB,CAAC,CAAC;IACH,OAAO,oBAAC,KAAK,IAAC,SAAS,EAAE,SAAS,IAAG,QAAQ,CAAS,CAAC;AACzD,CAAC,CAAC","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 [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 // 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};"]}
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"]}

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

@@ -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 ADDED Viewed

@@ -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, longPressTrigger: isMobile ? 'touch' : 'mouseAndTouch' }),
+            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 ADDED Viewed

@@ -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.\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';\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\n styles={dialpadStyle}\n onChange={setTextFieldInput}\n longPressTrigger={isMobile ? 'touch' : 'mouseAndTouch'}\n />\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"]}

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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"]}

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

@@ -3,7 +3,7 @@ import { AvatarPersonaDataCallback } from './AvatarPersona';
 /** @private */
 export declare const CaptionsBanner: (props: {
     isMobile: boolean;
-    isTeamsCall?: boolean;
+    useTeamsCaptions?: boolean;
     onFetchAvatarPersonaData?: AvatarPersonaDataCallback;
 }) => JSX.Element;
 //# sourceMappingURL=CaptionsBanner.d.ts.map

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

@@ -73,15 +73,13 @@ export const CaptionsBanner = (props) => {
     }, []);
     /* @conditional-compile-remove(close-captions) */
     const desktopViewBannerWidth = windowWidth > 620 ? '35rem' : '80%';
-    return React.createElement(React.Fragment, null, /* @conditional-compile-remove(close-captions) */
-        isCaptionsSettingsOpen && React.createElement(CaptionsSettingsModal, { showCaptionsSettingsModal: isCaptionsSettingsOpen, onDismissCaptionsSettings: onDismissCaptionsSettings, changeCaptionLanguage: props.isTeamsCall }), /* @conditional-compile-remove(close-captions) */
-        React.createElement("div", { className: containerClassName },
+    return (React.createElement(React.Fragment, null,
+        /* @conditional-compile-remove(close-captions) */ isCaptionsSettingsOpen && (React.createElement(CaptionsSettingsModal, { showCaptionsSettingsModal: isCaptionsSettingsOpen, onDismissCaptionsSettings: onDismissCaptionsSettings, changeCaptionLanguage: props.useTeamsCaptions })),
+        /* @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(Stack.Item, { style: { width: props.isMobile ? mobileViewBannerWidth : desktopViewBannerWidth } },
                     React.createElement(_CaptionsBanner, Object.assign({}, captionsBannerProps, handlers, { onRenderAvatar: onRenderAvatar, formFactor: props.isMobile ? 'compact' : 'default', strings: captionsBannerStrings })))),
-            !props.isMobile && captionsBannerProps.isCaptionsOn && React.createElement("div", { className: floatingChildClassName },
-                React.createElement(CaptionsBannerMoreButton, { onCaptionsSettingsClick: onClickCaptionsSettings }))));
+            !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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CaptionsBanner.js","sourceRoot":"","sources":["~~../../../../../../preprocess-dist/~~react-composites/src/composites/common/CaptionsBanner.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,iDAAiD;AACjD,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACzD,iDAAiD;AACjD,OAAO,EAAE,eAAe,EAA+C,yCAAmC;AAG1G,iDAAiD;AACjD,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACrD,iDAAiD;AACjD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,iDAAiD;AACjD,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,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,uBAAuB,EAAE,mDAA6C;AAE/E,iDAAiD;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,iDAAiD;AACjD,OAAO,EAAE,aAAa,EAA6B,MAAM,iBAAiB,CAAC;AAE3E,iDAAiD;AACjD,MAAM,qBAAqB,GAAG,KAAK,CAAC;AAEpC,eAAe;AACf,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,~~KAK9B~~,EAAe,EAAE;IAChB,iDAAiD;IACjD,MAAM,mBAAmB,GAAG,kBAAkB,CAAC,uBAAuB,CAAC,CAAC;IACxE,iDAAiD;IACjD,MAAM,QAAQ,GAAG,WAAW,CAAC,eAAe,CAAC,CAAC;IAC9C,iDAAiD;IACjD,MAAM,CAAC,sBAAsB,EAAE,yBAAyB,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IACrF,iDAAiD;IACjD,MAAM,uBAAuB,GAAG,GAAS,EAAE;QACzC,yBAAyB,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC,CAAC;IACF,iDAAiD;IACjD,MAAM,yBAAyB,GAAG,GAAS,EAAE;QAC3C,yBAAyB,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC,CAAC;IACF,iDAAiD;IACjD,MAAM,kBAAkB,GAAG,WAAW,CAAC;QACrC,QAAQ,EAAE,UAAU;KACrB,CAAC,CAAC;IACH,iDAAiD;IACjD,MAAM,sBAAsB,GAAG,WAAW,CAAC;QACzC,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,CAAC;QACR,GAAG,EAAE,CAAC;KACP,CAAC,CAAC;IAEH,iDAAiD;IACjD,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;IAEzC,iDAAiD;IACjD,MAAM,qBAAqB,GAA2B;QACpD,yBAAyB,EAAE,OAAO,CAAC,yBAAyB;KAC7D,CAAC;IACF,iDAAiD;IACjD,MAAM,cAAc,GAAG,WAAW,~~CAAC~~,CAAC,MAAe,EAAE,OAA6B,EAAE,EAAE;~~QACpF~~,OAAO,oBAAC,aAAa,kBAAC,MAAM,EAAE,MAAM,IAAM,OAAO,IAAE,YAAY,EAAE,KAAK,CAAC,wBAAwB,IAAI,CAAC;IACtG,CAAC,~~EAAE~~,CAAC,KAAK,CAAC,wBAAwB,CAAC,~~CAAC~~,CAAC;~~IACrC~~,iDAAiD;IACjD,MAAM,~~EACJ~~,UAAU,EAAE,KAAK,~~EAClB~~,GAAG,MAAM,CAAC;~~IACX~~,iDAAiD;IACjD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,iDAAiD;IACjD,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,YAAY;YACnB,cAAc,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;QACpC,CAAC;~~QACD~~,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAChD,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;IAClE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,iDAAiD;IACjD,MAAM,sBAAsB,GAAG,WAAW,GAAG,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;~~IACnE~~,OAAO,~~0CACF~~,iDAAiD~~;QAAA~~,sBAAsB,IAAI,oBAAC,qBAAqB,~~IAAC~~,yBAAyB,EAAE,sBAAsB,~~EAAE~~,yBAAyB,EAAE,yBAAyB,~~EAAE~~,qBAAqB,EAAE,KAAK,CAAC,~~WAAW~~,~~GAAI~~,~~EACvP~~,iDAAiD~~;QAAA~~,6BAAK,SAAS,EAAE,kBAAkB;~~YAChF~~,oBAAC,KAAK,IAAC,eAAe,EAAC,QAAQ;gBAC7B,oBAAC,KAAK,CAAC,IAAI,IAAC,KAAK,EAAE~~;wBACrB~~,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,sBAAsB;~~qBACvE;oBACK~~,oBAAC,eAAe,~~oBAAK~~,mBAAmB,~~EAAM~~,QAAQ,~~IAAE~~,cAAc,EAAE,cAAc,~~EAAE~~,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,~~EAAE~~,OAAO,EAAE,qBAAqB,~~IAAI~~,~~CACnK~~,CACP;YACP,CAAC,KAAK,CAAC,QAAQ,IAAI,mBAAmB,CAAC,YAAY,IAAI,6BAAK,SAAS,EAAE,sBAAsB;~~gBAC1F~~,oBAAC,wBAAwB,IAAC,uBAAuB,EAAE,uBAAuB,GAAI,CAC1E,CACJ,~~CACP,~~CAAC;~~AACR~~,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 { useState, useEffect, useCallback } from 'react';\n/ @conditional-compile-remove(close-captions) /\nimport { _CaptionsBanner, _CaptionsBannerStrings, CustomAvatarOptions } 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/ @conditional-compile-remove(close-captions) /\nimport { AvatarPersona, AvatarPersonaDataCallback } from './AvatarPersona';\n\n/ @conditional-compile-remove(close-captions) /\nconst mobileViewBannerWidth = '90%';\n\n/* @private /\nexport const CaptionsBanner = (props: {\n isMobile: boolean;\n ~~isTeamsCall~~?: boolean;\n / @conditional-compile-remove(close-captions) /\n onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n}): 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 / @conditional-compile-remove(close-captions) /\n const onRenderAvatar = useCallback((userId?: string, options?: CustomAvatarOptions) => {\n return <AvatarPersona userId={userId} {...options} dataProvider={props.onFetchAvatarPersonaData} />;\n }, [props.onFetchAvatarPersonaData]);\n / @conditional-compile-remove(close-captions) /\n const {\n innerWidth: width\n } = window;\n / @conditional-compile-remove(close-captions) /\n const [windowWidth, setWindowWidth] = useState(width);\n / @conditional-compile-remove(close-captions) /\n useEffect(() => {\n function handleResize(): void {\n setWindowWidth(window.innerWidth);\n }\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n\n / @conditional-compile-remove(close-captions) /\n const desktopViewBannerWidth = windowWidth > 620 ? '35rem' : '80%';\n return <>\n {/ @conditional-compile-remove(close-captions) /isCaptionsSettingsOpen && <CaptionsSettingsModal showCaptionsSettingsModal={isCaptionsSettingsOpen} onDismissCaptionsSettings={onDismissCaptionsSettings} changeCaptionLanguage={props.~~isTeamsCall~~} />}\n {/ @conditional-compile-remove(close-captions) */<div className={containerClassName}>\n <Stack horizontalAlign=\"center\">\n <Stack.Item style={{\n width: props.isMobile ? mobileViewBannerWidth : desktopViewBannerWidth\n }}>\n <_CaptionsBanner {...captionsBannerProps} {...handlers} onRenderAvatar={onRenderAvatar} formFactor={props.isMobile ? 'compact' : 'default'} strings={captionsBannerStrings} />\n </Stack.Item>\n </Stack>\n {!props.isMobile && captionsBannerProps.isCaptionsOn && <div className={floatingChildClassName}>\n <CaptionsBannerMoreButton onCaptionsSettingsClick={onClickCaptionsSettings} />\n </div>}\n </div>}\n ~~</>;\~~n};"]}
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.\n\nimport React from 'react';\n/* @conditional-compile-remove(close-captions) /\nimport { useState, useEffect, useCallback } from 'react';\n/ @conditional-compile-remove(close-captions) /\nimport { _CaptionsBanner, _CaptionsBannerStrings, CustomAvatarOptions } 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/ @conditional-compile-remove(close-captions) /\nimport { AvatarPersona, AvatarPersonaDataCallback } from './AvatarPersona';\n\n/ @conditional-compile-remove(close-captions) /\nconst mobileViewBannerWidth = '90%';\n\n/* @private /\nexport const CaptionsBanner = (props: {\n isMobile: boolean;\n useTeamsCaptions?: boolean;\n / @conditional-compile-remove(close-captions) / onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n}): 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 / @conditional-compile-remove(close-captions) /\n const onRenderAvatar = useCallback(\n (userId?: string, options?: CustomAvatarOptions) => {\n return <AvatarPersona userId={userId} {...options} dataProvider={props.onFetchAvatarPersonaData} />;\n },\n [props.onFetchAvatarPersonaData]\n );\n / @conditional-compile-remove(close-captions) /\n const { innerWidth: width } = window;\n / @conditional-compile-remove(close-captions) /\n const [windowWidth, setWindowWidth] = useState(width);\n / @conditional-compile-remove(close-captions) /\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 / @conditional-compile-remove(close-captions) /\n const desktopViewBannerWidth = windowWidth > 620 ? '35rem' : '80%';\n\n return (\n <>\n {\n / @conditional-compile-remove(close-captions) / isCaptionsSettingsOpen && (\n <CaptionsSettingsModal\n showCaptionsSettingsModal={isCaptionsSettingsOpen}\n onDismissCaptionsSettings={onDismissCaptionsSettings}\n changeCaptionLanguage={props.useTeamsCaptions}\n />\n )\n }\n {\n / @conditional-compile-remove(close-captions) */ <div className={containerClassName}>\n <Stack horizontalAlign=\"center\">\n <Stack.Item style={{ width: props.isMobile ? mobileViewBannerWidth : desktopViewBannerWidth }}>\n <_CaptionsBanner\n {...captionsBannerProps}\n {...handlers}\n onRenderAvatar={onRenderAvatar}\n formFactor={props.isMobile ? 'compact' : 'default'}\n strings={captionsBannerStrings}\n />\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"]}

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

@@ -57,17 +57,19 @@ export const CaptionsBannerMoreButton = (props) => {
     /* @conditional-compile-remove(close-captions) */
     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 ? startCaptionsButtonHandlers.onStopCaptions() : startCaptionsButtonProps.currentSpokenLanguage !== '' ? startCaptions() : props.onCaptionsSettingsClick && props.onCaptionsSettingsClick();
+            startCaptionsButtonProps.checked
+                ? startCaptionsButtonHandlers.onStopCaptions()
+                : startCaptionsButtonProps.currentSpokenLanguage !== ''
+                    ? startCaptions()
+                    : props.onCaptionsSettingsClick && props.onCaptionsSettingsClick();
         },
         iconProps: {
             iconName: startCaptionsButtonProps.checked ? 'CaptionsOffIcon' : 'CaptionsIcon',
-            styles: {
-                root: {
-                    lineHeight: 0
-                }
-            }
+            styles: { root: { lineHeight: 0 } }
         },
         itemProps: {
             styles: buttonFlyoutIncreasedSizeStyles
@@ -82,11 +84,7 @@ export const CaptionsBannerMoreButton = (props) => {
             onClick: props.onCaptionsSettingsClick,
             iconProps: {
                 iconName: 'CaptionsSettingsIcon',
-                styles: {
-                    root: {
-                        lineHeight: 0
-                    }
-                }
+                styles: { root: { lineHeight: 0 } }
             },
             itemProps: {
                 styles: buttonFlyoutIncreasedSizeStyles
@@ -95,14 +93,12 @@ export const CaptionsBannerMoreButton = (props) => {
         });
     }
     /* @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: {
+    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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CaptionsBannerMoreButton.js","sourceRoot":"","sources":["~~../../../../../../preprocess-dist/~~react-composites/src/composites/common/CaptionsBannerMoreButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,iDAAiD;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAGpC,iDAAiD;AACjD,OAAO,EAAE,oBAAoB,EAAE,yCAAmC;AAClE,iDAAiD;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,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,+BAA+B,EAAE,MAAM,wCAAwC,CAAC;AACzF,iDAAiD;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,iDAAiD;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,iDAAiD;AACjD,OAAO,EAAE,4BAA4B,EAAE,mDAA6C;AACpF,iDAAiD;AACjD,OAAO,EAAE,sBAAsB,EAAE,sCAAgC;AAOjE;;;GAGG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,KAAoC,EAAe,EAAE;IAC5F,iDAAiD;IACjD,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC;IAClC,iDAAiD;IACjD,MAAM,wBAAwB,GAAG,kBAAkB,CAAC,4BAA4B,CAAC,CAAC;IAClF,iDAAiD;IACjD,MAAM,2BAA2B,GAAG,WAAW,CAAC,oBAAoB,CAAC,CAAC;IACtE,iDAAiD;IACjD,MAAM,iBAAiB,GAAG,OAAO,~~CAAC~~,GAAG,EAAE,CAAC,CAAC;~~QACvC~~,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,IAAI,CAAC,oCAAoC;QACtE,iBAAiB,EAAE,aAAa,CAAC,OAAO,CAAC,IAAI,CAAC,+BAA+B;KAC9E,CAAC,~~EAAE~~,CAAC,aAAa,CAAC,~~CAAC~~,CAAC;~~IAErB~~,iDAAiD;IACjD,MAAM,6BAA6B,GAA0B,EAAE,CAAC;IAEhE,iDAAiD;IACjD,MAAM,aAAa,GAAG,WAAW,CAAC,GAAS,EAAE;QAC3C,MAAM,2BAA2B,CAAC,eAAe,CAAC;YAChD,cAAc,EAAE,wBAAwB,CAAC,qBAAqB;SAC/D,CAAC,CAAC;IACL,CAAC,CAAA,EAAE,CAAC,2BAA2B,EAAE,wBAAwB,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAElF,iDAAiD;IACjD,6BAA6B,CAAC,IAAI,CAAC;QACjC,GAAG,EAAE,mBAAmB;QACxB,IAAI,EAAE,wBAAwB,CAAC,OAAO,CAAC,CAAC,~~CAAC,~~aAAa,CAAC,OAAO,CAAC,IAAI,CAAC,mCAAmC,CAAC,CAAC,~~CAAC,~~aAAa,CAAC,OAAO,CAAC,IAAI,CAAC,oCAAoC;~~QACzK~~,OAAO,EAAE,GAAG,EAAE;YACZ,wBAAwB,CAAC,OAAO,CAAC,CAAC,~~CAAC,~~2BAA2B,CAAC,cAAc,EAAE,CAAC,CAAC,~~CAAC,~~wBAAwB,CAAC,qBAAqB,KAAK,EAAE,CAAC,CAAC,~~CAAC,~~aAAa,EAAE,CAAC,CAAC,~~CAAC,~~KAAK,CAAC,uBAAuB,IAAI,KAAK,CAAC,uBAAuB,EAAE,CAAC;~~QAC/N~~,CAAC;QACD,SAAS,EAAE;YACT,QAAQ,EAAE,wBAAwB,CAAC,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,cAAc;YAC/E,MAAM,EAAE~~;gBACN~~,IAAI,EAAE~~;oBACJ~~,UAAU,EAAE,CAAC;~~iBACd~~;~~aACF;SACF;~~QACD,SAAS,EAAE;YACT,MAAM,EAAE,+BAA+B;SACxC;KACF,CAAC,CAAC;IACH,iDAAiD;IACjD,IAAI,KAAK,CAAC,uBAAuB,EAAE,CAAC;QAClC,6BAA6B,CAAC,IAAI,CAAC;YACjC,GAAG,EAAE,yBAAyB;YAC9B,EAAE,EAAE,gDAAgD;YACpD,IAAI,EAAE,aAAa,CAAC,OAAO,CAAC,IAAI,CAAC,qBAAqB;YACtD,OAAO,EAAE,KAAK,CAAC,uBAAuB;YACtC,SAAS,EAAE;gBACT,QAAQ,EAAE,sBAAsB;gBAChC,MAAM,EAAE~~;oBACN~~,IAAI,EAAE~~;wBACJ~~,UAAU,EAAE,CAAC;~~qBACd~~;~~iBACF;aACF;~~YACD,SAAS,EAAE;gBACT,MAAM,EAAE,+BAA+B;aACxC;YACD,QAAQ,EAAE,CAAC,wBAAwB,CAAC,OAAO;SAC5C,CAAC,CAAC;IACL,CAAC;IACD,iDAAiD;IACjD,OAAO,oBAAC,UAAU,~~oBAAK~~,KAAK,~~kBAAa~~,6BAA6B,~~EAAC~~,OAAO,EAAE,iBAAiB,~~EAAE~~,aAAa,EAAE~~;YAChH~~,MAAM,EAAE,IAAI~~;SACb~~,EAAE,SAAS,EAAE;~~YACZ~~,KAAK,EAAE,6BAA6B;YACpC,YAAY,EAAE;gBACZ,qBAAqB,EAAE,sBAAsB;aAC9C;SACF,~~IAAI~~,CAAC;~~IACN~~,OAAO,yCAAK,CAAC;AACf,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\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 label: localeStrings.strings.call.captionsBannerMoreButtonCallingLabel,\n tooltipOffContent: localeStrings.strings.call.captionsBannerMoreButtonTooltip\n }), [localeStrings]);\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 ? localeStrings.strings.call.startCaptionsButtonTooltipOnContent : localeStrings.strings.call.startCaptionsButtonTooltipOffContent,\n onClick: () => {\n startCaptionsButtonProps.checked ? startCaptionsButtonHandlers.onStopCaptions() : 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 / @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: {\n root: {\n lineHeight: 0\n }\n }\n },\n itemProps: {\n styles: buttonFlyoutIncreasedSizeStyles\n },\n disabled: !startCaptionsButtonProps.checked\n });\n }\n / @conditional-compile-remove(close-captions) */\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 return <></>;\n};"]}
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';\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"]}

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

@@ -36,7 +36,7 @@ export const CaptionsSettingsModal = (props) => {
     /* @conditional-compile-remove(close-captions) */
     const captionLanguageStrings = strings.captionLanguageStrings;
     /* @conditional-compile-remove(close-captions) */
-    return React.createElement(_CaptionsSettingsModal, Object.assign({}, CaptionsSettingsModalProps, handlers, { strings: modalStrings, spokenLanguageStrings: spokenLanguageStrings, captionLanguageStrings: captionLanguageStrings, showModal: props.showCaptionsSettingsModal, onDismissCaptionsSettings: props.onDismissCaptionsSettings, changeCaptionLanguage: props.changeCaptionLanguage }));
+    return (React.createElement(_CaptionsSettingsModal, Object.assign({}, CaptionsSettingsModalProps, handlers, { strings: modalStrings, spokenLanguageStrings: spokenLanguageStrings, captionLanguageStrings: captionLanguageStrings, showModal: props.showCaptionsSettingsModal, onDismissCaptionsSettings: props.onDismissCaptionsSettings, changeCaptionLanguage: props.changeCaptionLanguage })));
     return React.createElement(React.Fragment, null);
 };
 //# sourceMappingURL=CaptionsSettingsModal.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CaptionsSettingsModal.js","sourceRoot":"","sources":["~~../../../../../../preprocess-dist/~~react-composites/src/composites/common/CaptionsSettingsModal.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,iDAAiD;AACjD,OAAO,~~EAAE~~,sBAAsB,~~EAAgF~~,yCAAmC;~~AAClJ~~,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,wBAAwB,EAAE,mDAA6C;AAEhF,eAAe;AACf,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,~~KAMrC~~,EAAe,EAAE;IAChB,iDAAiD;IACjD,MAAM,0BAA0B,GAAG,kBAAkB,CAAC,wBAAwB,CAAC,CAAC;IAChF,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,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,iDAAiD;IACjD,MAAM,qBAAqB,GAAsC,OAAO,CAAC,qBAAqB,CAAC;IAE/F,iDAAiD;IACjD,MAAM,sBAAsB,GAAuC,OAAO,CAAC,sBAAsB,CAAC;IAElG,iDAAiD;IACjD,OAAO,oBAAC,sBAAsB,~~oBAAK~~,0BAA0B,~~EAAM~~,QAAQ,~~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;~~IACjW~~,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 { _CaptionsSettingsModal, _CaptionsSettingsModalStrings, SpokenLanguageStrings, CaptionLanguageStrings } 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 { _captionSettingsSelector } 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) /\n onDismissCaptionsSettings: () => void;\n / @conditional-compile-remove(close-captions) /\n changeCaptionLanguage?: boolean;\n}): JSX.Element => {\n / @conditional-compile-remove(close-captions) /\n const CaptionsSettingsModalProps = useAdaptedSelector(_captionSettingsSelector);\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 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 / @conditional-compile-remove(close-captions) /\n const spokenLanguageStrings: SpokenLanguageStrings \| undefined = strings.spokenLanguageStrings;\n\n / @conditional-compile-remove(close-captions) /\n const captionLanguageStrings: CaptionLanguageStrings \| undefined = strings.captionLanguageStrings;\n\n / @conditional-compile-remove(close-captions) */\n return <_CaptionsSettingsModal {...CaptionsSettingsModalProps} {...handlers} strings={modalStrings} spokenLanguageStrings={spokenLanguageStrings} captionLanguageStrings={captionLanguageStrings} showModal={props.showCaptionsSettingsModal} onDismissCaptionsSettings={props.onDismissCaptionsSettings} changeCaptionLanguage={props.changeCaptionLanguage} ~~/>;\~~n return <></>;\n};"]}
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,EAIvB,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,wBAAwB,EAAE,mDAA6C;AAEhF,eAAe;AACf,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAIrC,EAAe,EAAE;IAChB,iDAAiD;IACjD,MAAM,0BAA0B,GAAG,kBAAkB,CAAC,wBAAwB,CAAC,CAAC;IAChF,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,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,iDAAiD;IACjD,MAAM,qBAAqB,GAAsC,OAAO,CAAC,qBAAqB,CAAC;IAE/F,iDAAiD;IACjD,MAAM,sBAAsB,GAAuC,OAAO,CAAC,sBAAsB,CAAC;IAElG,iDAAiD;IACjD,OAAO,CACL,oBAAC,sBAAsB,oBACjB,0BAA0B,EAC1B,QAAQ,IACZ,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;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 SpokenLanguageStrings,\n CaptionLanguageStrings\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 { _captionSettingsSelector } 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 / @conditional-compile-remove(close-captions) / changeCaptionLanguage?: boolean;\n}): JSX.Element => {\n / @conditional-compile-remove(close-captions) /\n const CaptionsSettingsModalProps = useAdaptedSelector(_captionSettingsSelector);\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 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 / @conditional-compile-remove(close-captions) /\n const spokenLanguageStrings: SpokenLanguageStrings \| undefined = strings.spokenLanguageStrings;\n\n / @conditional-compile-remove(close-captions) /\n const captionLanguageStrings: CaptionLanguageStrings \| undefined = strings.captionLanguageStrings;\n\n / @conditional-compile-remove(close-captions) */\n return (\n <_CaptionsSettingsModal\n {...CaptionsSettingsModalProps}\n {...handlers}\n strings={modalStrings}\n spokenLanguageStrings={spokenLanguageStrings}\n captionLanguageStrings={captionLanguageStrings}\n showModal={props.showCaptionsSettingsModal}\n onDismissCaptionsSettings={props.onDismissCaptionsSettings}\n changeCaptionLanguage={props.changeCaptionLanguage}\n />\n );\n return <></>;\n};\n"]}

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

@@ -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 CHANGED Viewed

	@@ -1 +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};"]}
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"]}

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

@@ -18,6 +18,7 @@ export interface CommonCallControlBarProps {
     disableButtonsForLobbyPage: boolean;
     callControls?: boolean | CommonCallControlOptions | CallWithChatControlOptions;
     disableButtonsForHoldScreen?: boolean;
+    onClickShowDialpad?: () => void;
     onClickVideoEffects?: (showVideoEffects: boolean) => void;
     isCaptionsSupported?: boolean;
     isCaptionsOn?: boolean;
@@ -31,7 +32,7 @@ export interface CommonCallControlBarProps {
     onSetDialpadPage?: () => void;
     dtmfDialerPresent?: boolean;
     onStopLocalSpotlight?: () => void;
-    isTeamsCall?: boolean;
+    useTeamsCaptions?: boolean;
 }
 /**
  * @private