@azure/communication-react 1.5.2-alpha-202301190014.0 → 1.6.1-alpha-202306220014

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

@@ -1 +1 @@
-{"version":3,"file":"CallingDialpad.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/CallingDialpad.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\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}>\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\""]}
+{"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/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/ControlBar/CommonCallControlBar.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { CallAdapter } from '../../CallComposite';
+import { ITheme } from '@fluentui/react';
+import { ControlBarButtonStyles } from "../../../../../react-components/src";
+import { ContainerRectProps } from '../ContainerRectProps';
+import { CallWithChatControlOptions } from '../../CallWithChatComposite';
+import { CommonCallControlOptions } from '../types/CommonCallControlOptions';
+/**
+ * @private
+ */
+export interface CommonCallControlBarProps {
+    callAdapter: CallAdapter;
+    peopleButtonChecked: boolean;
+    onPeopleButtonClicked: () => void;
+    onMoreButtonClicked?: () => void;
+    mobileView: boolean;
+    disableButtonsForLobbyPage: boolean;
+    callControls?: boolean | CommonCallControlOptions | CallWithChatControlOptions;
+    disableButtonsForHoldScreen?: boolean;
+    onClickShowDialpad?: () => void;
+    onShowVideoEffectsPicker?: (showVideoEffectsOptions: boolean) => void;
+    isCaptionsSupported?: boolean;
+}
+/**
+ * @private
+ */
+export declare const CommonCallControlBar: (props: CommonCallControlBarProps & ContainerRectProps) => JSX.Element;
+/** @private */
+export declare const getDesktopCommonButtonStyles: (theme: ITheme) => ControlBarButtonStyles;
+//# sourceMappingURL=CommonCallControlBar.d.ts.map