@azure/communication-react 1.7.1-alpha-202309010013 → 1.8.0-beta.1

package/dist/dist-esm/react-composites/src/composites/localization/locales/zh-CN/strings.json

@@ -50,6 +50,7 @@
         "deniedPermissionToRoomDetails": "你没有加入此聊天室的权限。",
         "deniedPermissionToRoomTitle": "已拒绝对会议室的权限",
         "peopleButtonLabel": "人员",
+        "selectedPeopleButtonLabel": "已选择“人员”按钮",
         "peoplePaneTitle": "人员",
         "peopleButtonTooltipOpen": "显示参与者",
         "peopleButtonTooltipClose": "隐藏参与者",
@@ -99,16 +100,18 @@
         "startCaptionsButtonOffLabel": "关闭辅助字幕",
         "startCaptionsButtonTooltipOnContent": "关闭辅助字幕",
         "startCaptionsButtonTooltipOffContent": "开启字幕",
-        "captionsSettingsModalTitle": "正在使用哪种语言?",
-        "captionsSettingsDropdownLabel": "口述语言",
-        "captionsSettingsDropdownInfoText": "此通话中的每个人都在讲的语言。",
+        "captionsSettingsModalTitle": "字幕设置",
+        "captionsSettingsSpokenLanguageDropdownLabel": "口述语言",
+        "captionsSettingsCaptionLanguageDropdownLabel": "辅助字幕语言",
+        "captionsSettingsSpokenLanguageDropdownInfoText": "此通话中的每个人都在讲的语言。",
+        "captionsSettingsCaptionLanguageDropdownInfoText": "字幕将以此语言显示。",
         "captionsSettingsConfirmButtonLabel": "确认",
         "captionsSettingsCancelButtonLabel": "取消",
         "captionsSettingsModalAriaLabel": "字幕设置模式",
         "captionsSettingsCloseModalButtonAriaLabel": "关闭字幕设置",
         "captionsBannerMoreButtonCallingLabel": "更多",
         "captionsBannerMoreButtonTooltip": "更多选项",
-        "captionsAvailableLanguageStrings": {
+        "spokenLanguageStrings": {
             "ar-ae": "阿拉伯语 - 阿拉伯联合酋长国",
             "ar-sa": "阿拉伯语 - 沙特阿拉伯",
             "da-dk": "丹麦语",
@@ -151,6 +154,40 @@
             "sk-sk": "斯洛伐克语",
             "zh-tw": "中文 – 台湾"
         },
+        "captionLanguageStrings": {
+            "ar": "阿拉伯语",
+            "da": "丹麦语",
+            "de": "德语",
+            "en": "英语",
+            "es": "西班牙语",
+            "fi": "芬兰语",
+            "fr-ca": "法语 - 加拿大",
+            "fr": "法语 - 法国",
+            "hi": "印地语",
+            "it": "意大利语",
+            "ja": "日语",
+            "ko": "朝鲜语",
+            "nb": "挪威语(博克马尔语)",
+            "nl": "荷兰语",
+            "pl": "波兰语",
+            "pt": "葡萄牙语 - 巴西",
+            "ru": "俄语",
+            "sv": "瑞典语",
+            "zh-Hans": "中文(简体)",
+            "zh-Hant": "中文(繁体)",
+            "cs": "捷克语",
+            "pt-pt": "葡萄牙语 - 葡萄牙",
+            "tr": "土耳其语",
+            "vi": "越南语",
+            "th": "泰语",
+            "he": "希伯来语",
+            "cy": "威尔士语",
+            "uk": "乌克兰语",
+            "el": "希腊语",
+            "hu": "匈牙利语",
+            "ro": "罗马尼亚语",
+            "sk": "斯洛伐克语"
+        },
         "captionsBannerSpinnerText": "正在启动字幕...",
         "transferPageTransferorText": "正在转接...",
         "transferPageTransferTargetText": "正在连接...",
@@ -193,7 +230,9 @@
         "moreDrawerSpeakerMenuTitle": "扬声器",
         "moreDrawerCaptionsMenuTitle": "实时辅助字幕",
         "moreDrawerSpokenLanguageMenuTitle": "口述语言",
+        "moreDrawerCaptionLanguageMenuTitle": "字幕语言",
         "peopleButtonLabel": "人员",
+        "selectedPeopleButtonLabel": "已选择“人员”按钮",
         "peopleButtonTooltipOpen": "显示参与者",
         "peopleButtonTooltipClose": "隐藏参与者",
         "peoplePaneSubTitle": "在此通话中",

package/dist/dist-esm/react-composites/src/composites/localization/locales/zh-TW/strings.json

@@ -50,6 +50,7 @@
         "deniedPermissionToRoomDetails": "您沒有加入此會議室的權限。",
         "deniedPermissionToRoomTitle": "會議室權限遭拒絕",
         "peopleButtonLabel": "人員",
+        "selectedPeopleButtonLabel": "已選取人員按鈕",
         "peoplePaneTitle": "人員",
         "peopleButtonTooltipOpen": "顯示參與者",
         "peopleButtonTooltipClose": "隱藏參與者",
@@ -99,16 +100,18 @@
         "startCaptionsButtonOffLabel": "關閉字幕",
         "startCaptionsButtonTooltipOnContent": "關閉字幕",
         "startCaptionsButtonTooltipOffContent": "開啟字幕",
-        "captionsSettingsModalTitle": "正在使用何種語言?",
-        "captionsSettingsDropdownLabel": "口語語言",
-        "captionsSettingsDropdownInfoText": "此通話中的每個人在說的語言。",
+        "captionsSettingsModalTitle": "字幕設定",
+        "captionsSettingsSpokenLanguageDropdownLabel": "口語語言",
+        "captionsSettingsCaptionLanguageDropdownLabel": "字幕語言",
+        "captionsSettingsSpokenLanguageDropdownInfoText": "此通話中的每個人在說的語言。",
+        "captionsSettingsCaptionLanguageDropdownInfoText": "字幕將以此語言顯示。",
         "captionsSettingsConfirmButtonLabel": "確認",
         "captionsSettingsCancelButtonLabel": "取消",
         "captionsSettingsModalAriaLabel": "字幕設定模式",
         "captionsSettingsCloseModalButtonAriaLabel": "關閉字幕設定",
         "captionsBannerMoreButtonCallingLabel": "其他",
         "captionsBannerMoreButtonTooltip": "更多選項",
-        "captionsAvailableLanguageStrings": {
+        "spokenLanguageStrings": {
             "ar-ae": "阿拉伯文 - 阿拉伯聯合大公國",
             "ar-sa": "阿拉伯文 - 沙烏地阿拉伯",
             "da-dk": "丹麥文",
@@ -151,6 +154,40 @@
             "sk-sk": "斯洛伐克文",
             "zh-tw": "中文 - 台灣"
         },
+        "captionLanguageStrings": {
+            "ar": "阿拉伯文",
+            "da": "丹麥文",
+            "de": "德文",
+            "en": "英文",
+            "es": "西班牙文",
+            "fi": "芬蘭文",
+            "fr-ca": "法文 - 加拿大",
+            "fr": "法文 - 法國",
+            "hi": "印地文",
+            "it": "義大利文",
+            "ja": "日文",
+            "ko": "韓文",
+            "nb": "挪威文 (巴克摩)",
+            "nl": "荷蘭文",
+            "pl": "波蘭文",
+            "pt": "葡萄牙文 - 巴西",
+            "ru": "俄文",
+            "sv": "瑞典文",
+            "zh-Hans": "中文 (簡體)",
+            "zh-Hant": "中文 (繁體)",
+            "cs": "捷克文",
+            "pt-pt": "葡萄牙文 - 葡萄牙",
+            "tr": "土耳其文",
+            "vi": "越南文",
+            "th": "泰文",
+            "he": "希伯來文",
+            "cy": "威爾斯文",
+            "uk": "烏克蘭文",
+            "el": "希臘文",
+            "hu": "匈牙利文",
+            "ro": "羅馬尼亞文",
+            "sk": "斯洛伐克文"
+        },
         "captionsBannerSpinnerText": "正在啟動輔助字幕...",
         "transferPageTransferorText": "正在轉接...",
         "transferPageTransferTargetText": "正在連線...",
@@ -193,7 +230,9 @@
         "moreDrawerSpeakerMenuTitle": "揚聲器",
         "moreDrawerCaptionsMenuTitle": "即時字幕",
         "moreDrawerSpokenLanguageMenuTitle": "口語語言",
+        "moreDrawerCaptionLanguageMenuTitle": "字幕語言",
         "peopleButtonLabel": "人員",
+        "selectedPeopleButtonLabel": "已選取人員按鈕",
         "peopleButtonTooltipOpen": "顯示參與者",
         "peopleButtonTooltipClose": "隱藏參與者",
         "peoplePaneSubTitle": "在此通話中",

package/dist/dist-esm/react-composites/src/index-public.js.map

@@ -1 +1 @@
-{"version":3,"file":"index-public.js","sourceRoot":"","sources":["../../../../../react-composites/src/index-public.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,4EAA4E;AAC5E,8BAA8B;AAC9B,EAAE;AACF,mFAAmF;AACnF,cAAc,cAAc,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n// This entry point exports only the symbols that should be re-exported from\n// @azure/communication-react.\n//\n// This avoids having to list all the types again in @internal/communication-react.\nexport * from './composites';\n"]}
+{"version":3,"file":"index-public.js","sourceRoot":"","sources":["../../../../preprocess-dist/react-composites/src/index-public.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,4EAA4E;AAC5E,8BAA8B;AAC9B,EAAE;AACF,mFAAmF;AACnF,cAAc,cAAc,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n// This entry point exports only the symbols that should be re-exported from\n// @azure/communication-react.\n//\n// This avoids having to list all the types again in @internal/communication-react.\nexport * from './composites';"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@azure/communication-react",
-  "version": "1.7.1-alpha-202309010013",
+  "version": "1.8.0-beta.1",
   "sideEffects": false,
   "description": "React library for building modern communication user experiences utilizing Azure Communication Services",
   "keywords": [
@@ -95,13 +95,13 @@
     "@azure/core-auth": "^1.4.0",
     "@babel/cli": "~7.16.0",
     "@babel/core": "~7.16.0",
-    "@internal/calling-component-bindings": "1.7.1-alpha-202309010013",
-    "@internal/calling-stateful-client": "1.7.1-alpha-202309010013",
-    "@internal/chat-component-bindings": "1.7.1-alpha-202309010013",
-    "@internal/chat-stateful-client": "1.7.1-alpha-202309010013",
-    "@internal/fake-backends": "1.7.1-alpha-202309010013",
-    "@internal/react-components": "1.7.1-alpha-202309010013",
-    "@internal/react-composites": "1.7.1-alpha-202309010013",
+    "@internal/calling-component-bindings": "1.8.0-beta.1",
+    "@internal/calling-stateful-client": "1.8.0-beta.1",
+    "@internal/chat-component-bindings": "1.8.0-beta.1",
+    "@internal/chat-stateful-client": "1.8.0-beta.1",
+    "@internal/fake-backends": "1.8.0-beta.1",
+    "@internal/react-components": "1.8.0-beta.1",
+    "@internal/react-composites": "1.8.0-beta.1",
     "@fluentui/react-northstar": "0.61.0",
     "@microsoft/api-documenter": "~7.12.11",
     "@microsoft/api-extractor": "~7.18.0",

package/dist/dist-esm/calling-stateful-client/src/CapabilitiesSubscriber.d.ts

@@ -1,16 +0,0 @@
-import { CapabilitiesFeature } from '@azure/communication-calling';
-import { CallContext } from './CallContext';
-import { CallIdRef } from './CallIdRef';
-/**
- * @private
- */
-export declare class CapabilitiesSubscriber {
-    private _callIdRef;
-    private _context;
-    private _capabilitiesFeature;
-    constructor(callIdRef: CallIdRef, context: CallContext, capabilities: CapabilitiesFeature);
-    private subscribe;
-    unsubscribe: () => void;
-    private capabilitiesChanged;
-}
-//# sourceMappingURL=CapabilitiesSubscriber.d.ts.map

package/dist/dist-esm/calling-stateful-client/src/CapabilitiesSubscriber.js

@@ -1,24 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-/* @conditional-compile-remove(capabilities) */
-/**
- * @private
- */
-export class CapabilitiesSubscriber {
-    constructor(callIdRef, context, capabilities) {
-        this.subscribe = () => {
-            this._capabilitiesFeature.on('capabilitiesChanged', this.capabilitiesChanged);
-        };
-        this.unsubscribe = () => {
-            this._capabilitiesFeature.off('capabilitiesChanged', this.capabilitiesChanged);
-        };
-        this.capabilitiesChanged = (data) => {
-            this._context.setCapabilities(this._callIdRef.callId, this._capabilitiesFeature.capabilities, data);
-        };
-        this._callIdRef = callIdRef;
-        this._context = context;
-        this._capabilitiesFeature = capabilities;
-        this.subscribe();
-    }
-}
-//# sourceMappingURL=CapabilitiesSubscriber.js.map

package/dist/dist-esm/calling-stateful-client/src/CapabilitiesSubscriber.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CapabilitiesSubscriber.js","sourceRoot":"","sources":["../../../../../calling-stateful-client/src/CapabilitiesSubscriber.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AASlC,+CAA+C;AAC/C;;GAEG;AACH,MAAM,OAAO,sBAAsB;IAKjC,YAAY,SAAoB,EAAE,OAAoB,EAAE,YAAiC;QAQjF,cAAS,GAAG,GAAS,EAAE;YAC7B,IAAI,CAAC,oBAAoB,CAAC,EAAE,CAAC,qBAAqB,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;QAChF,CAAC,CAAC;QAEK,gBAAW,GAAG,GAAS,EAAE;YAC9B,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,qBAAqB,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;QACjF,CAAC,CAAC;QAEM,wBAAmB,GAAG,CAAC,IAA4B,EAAQ,EAAE;YACnE,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,IAAI,CAAC,oBAAoB,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;QACtG,CAAC,CAAC;QAjBA,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;QAC5B,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;QACxB,IAAI,CAAC,oBAAoB,GAAG,YAAY,CAAC;QAEzC,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;CAaF","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n/* @conditional-compile-remove(capabilities) */\nimport { CapabilitiesChangeInfo, CapabilitiesFeature } from '@azure/communication-calling';\n/* @conditional-compile-remove(capabilities) */\nimport { CallContext } from './CallContext';\n/* @conditional-compile-remove(capabilities) */\nimport { CallIdRef } from './CallIdRef';\n\n/* @conditional-compile-remove(capabilities) */\n/**\n * @private\n */\nexport class CapabilitiesSubscriber {\n  private _callIdRef: CallIdRef;\n  private _context: CallContext;\n  private _capabilitiesFeature: CapabilitiesFeature;\n\n  constructor(callIdRef: CallIdRef, context: CallContext, capabilities: CapabilitiesFeature) {\n    this._callIdRef = callIdRef;\n    this._context = context;\n    this._capabilitiesFeature = capabilities;\n\n    this.subscribe();\n  }\n\n  private subscribe = (): void => {\n    this._capabilitiesFeature.on('capabilitiesChanged', this.capabilitiesChanged);\n  };\n\n  public unsubscribe = (): void => {\n    this._capabilitiesFeature.off('capabilitiesChanged', this.capabilitiesChanged);\n  };\n\n  private capabilitiesChanged = (data: CapabilitiesChangeInfo): void => {\n    this._context.setCapabilities(this._callIdRef.callId, this._capabilitiesFeature.capabilities, data);\n  };\n}\n"]}

package/dist/dist-esm/react-components/src/components/ImageGallery.d.ts

@@ -1,71 +0,0 @@
-import { SyntheticEvent } from 'react';
-/**
- * Props for {@link ImageGallery}.
- *
- * @beta
- */
-export interface ImageGalleryImageProps {
-    /** Image Url used to display the image in a large scale. */
-    imageUrl: string;
-    /** String used as a file name when downloading this image to user's local device. */
-    saveAsName: string;
-    /** Optional string used as a alt text for the image. @default 'image' */
-    altText?: string;
-    /** Optional string used as the title of the image and displayed on the top left corner of the ImageGallery. */
-    title?: string;
-    /** Optional JSX element used as a title icon and displayed to the left of the title element. */
-    titleIcon?: JSX.Element;
-}
-/**
- * Props for {@link ImageGallery}.
- *
- * @beta
- */
-export interface ImageGalleryProps {
-    /**
-     * Boolean that controls whether the modal is displayed.
-     */
-    isOpen: boolean;
-    /**
-     * Array of images used to populate the ImageGallery
-     */
-    images: Array<ImageGalleryImageProps>;
-    /**
-     * Callback to invoke when the ImageGallery modal is dismissed
-     */
-    onDismiss: () => void;
-    /**
-     * Callback called when the download button is clicked.
-     */
-    onImageDownloadButtonClicked: (imageUrl: string, saveAsName: string) => void;
-    /**
-     * Callback called when there's an error loading the image.
-     */
-    onError?: (event: SyntheticEvent<HTMLImageElement, Event>) => void;
-    /**
-     * Indicating which index of the images array to start with.
-     */
-    startIndex?: number;
-}
-/**
- * Strings of {@link ImageGallery} that can be overridden.
- *
- * @beta
- */
-export interface ImageGalleryStrings {
-    /**
-     * Download button label for ImageGallery
-     */
-    downloadButtonLabel: string;
-    /**
-     * Dismiss button aria label for ImageGallery
-     */
-    dismissButtonAriaLabel: string;
-}
-/**
- * Component to render a fullscreen modal for a selected image.
- *
- * @beta
- */
-export declare const ImageGallery: (props: ImageGalleryProps) => JSX.Element;
-//# sourceMappingURL=ImageGallery.d.ts.map

package/dist/dist-esm/react-components/src/components/ImageGallery.js

@@ -1,65 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-/* @conditional-compile-remove(image-gallery) */
-import { DefaultButton, FocusTrapZone, Icon, IconButton, Modal, Stack, mergeStyles } from '@fluentui/react';
-/* @conditional-compile-remove(image-gallery) */
-import React, { useState } from 'react';
-/* @conditional-compile-remove(image-gallery) */
-import { bodyContainer, bodyFocusZone, brokenImageStyle, cancelIcon, closeButtonStyles, controlBarContainerStyle, downloadButtonStyle, downloadIcon, downloadIconStyle, focusTrapZoneStyle, headerStyle, normalImageStyle, overlayStyles, scrollableContentStyle, smallDownloadButtonContainerStyle, titleBarContainerStyle, titleStyle } from './styles/ImageGallery.style';
-/* @conditional-compile-remove(image-gallery) */
-import { useTheme } from '../theming/FluentThemeProvider';
-/* @conditional-compile-remove(image-gallery) */
-import { useLocale } from '../localization';
-/* @conditional-compile-remove(image-gallery) */
-/**
- * Component to render a fullscreen modal for a selected image.
- *
- * @beta
- */
-export const ImageGallery = (props) => {
-    const { isOpen, images, onImageDownloadButtonClicked, onDismiss, onError, startIndex = 0 } = props;
-    const theme = useTheme();
-    /* @conditional-compile-remove(image-gallery) */
-    const localeStrings = useLocale().strings.imageGallery;
-    const [isImageLoaded, setIsImageLoaded] = useState(true);
-    const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(theme);
-    if (images.length <= startIndex) {
-        return React.createElement(React.Fragment, null);
-    }
-    const image = images[startIndex];
-    const renderHeaderBar = () => {
-        return (React.createElement(Stack, { className: mergeStyles(headerStyle) },
-            React.createElement(Stack, { className: mergeStyles(titleBarContainerStyle) },
-                image.titleIcon,
-                React.createElement(Stack.Item, { className: mergeStyles(titleStyle(theme)), "aria-label": image.title }, image.title)),
-            React.createElement(Stack, { className: mergeStyles(controlBarContainerStyle) },
-                React.createElement(DefaultButton, { className: mergeStyles(downloadButtonStyle(theme)), 
-                    /* @conditional-compile-remove(image-gallery) */
-                    text: localeStrings.downloadButtonLabel, onClick: () => onImageDownloadButtonClicked(image.imageUrl, image.saveAsName), onRenderIcon: () => React.createElement(Icon, { iconName: downloadIcon.iconName, className: mergeStyles(downloadIconStyle) }), "aria-live": 'polite', "aria-label": localeStrings.downloadButtonLabel }),
-                React.createElement(IconButton, { iconProps: downloadIcon, className: mergeStyles(smallDownloadButtonContainerStyle(theme)), onClick: () => onImageDownloadButtonClicked(image.imageUrl, image.saveAsName), "aria-label": localeStrings.downloadButtonLabel, "aria-live": 'polite' }),
-                React.createElement(IconButton, { iconProps: cancelIcon, className: mergeStyles(closeButtonStyles(theme)), onClick: onDismiss, 
-                    /* @conditional-compile-remove(image-gallery) */
-                    ariaLabel: localeStrings.dismissButtonAriaLabel, "aria-live": 'polite' }))));
-    };
-    const renderBodyWithLightDismiss = () => {
-        return (React.createElement(Stack, { className: mergeStyles(bodyContainer), onClick: () => props.onDismiss() },
-            React.createElement(FocusTrapZone, { onKeyDown: (e) => {
-                    if (e.key === 'Escape' || e.key === 'Esc') {
-                        onDismiss();
-                    }
-                }, 
-                // Ensure when the focus trap has focus, the light dismiss area can still be clicked with mouse to dismiss.
-                // Note: this still correctly captures keyboard focus, this just allows mouse click outside of the focus trap.
-                isClickableOutsideFocusTrap: true, className: mergeStyles(bodyFocusZone) },
-                React.createElement("img", { src: image.imageUrl, className: mergeStyles(imageStyle), alt: image.altText || 'image', "aria-label": 'image-gallery-main-image', "aria-live": 'polite', onError: (event) => {
-                        setIsImageLoaded(false);
-                        onError && onError(event);
-                    }, onClick: (event) => event.stopPropagation(), onDoubleClick: (event) => {
-                        event.persist();
-                    } }))));
-    };
-    return (React.createElement(Modal, { titleAriaId: image.title, isOpen: isOpen, onDismiss: onDismiss, overlay: { styles: Object.assign({}, overlayStyles(theme)) }, styles: { main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle }, isDarkOverlay: true },
-        renderHeaderBar(),
-        renderBodyWithLightDismiss()));
-};
-//# sourceMappingURL=ImageGallery.js.map

package/dist/dist-esm/react-components/src/components/ImageGallery.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ImageGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ImageGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n/* @conditional-compile-remove(image-gallery) */\nimport { DefaultButton, FocusTrapZone, Icon, IconButton, Modal, Stack, mergeStyles } from '@fluentui/react';\n/* @conditional-compile-remove(image-gallery) */\nimport React, { SyntheticEvent, useState } from 'react';\n/* @conditional-compile-remove(image-gallery) */\nimport {\n  bodyContainer,\n  bodyFocusZone,\n  brokenImageStyle,\n  cancelIcon,\n  closeButtonStyles,\n  controlBarContainerStyle,\n  downloadButtonStyle,\n  downloadIcon,\n  downloadIconStyle,\n  focusTrapZoneStyle,\n  headerStyle,\n  normalImageStyle,\n  overlayStyles,\n  scrollableContentStyle,\n  smallDownloadButtonContainerStyle,\n  titleBarContainerStyle,\n  titleStyle\n} from './styles/ImageGallery.style';\n/* @conditional-compile-remove(image-gallery) */\nimport { useTheme } from '../theming/FluentThemeProvider';\n/* @conditional-compile-remove(image-gallery) */\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(image-gallery) */\nimport { ChatTheme } from '../theming';\n/**\n * Props for {@link ImageGallery}.\n *\n * @beta\n */\nexport interface ImageGalleryImageProps {\n  /** Image Url used to display the image in a large scale. */\n  imageUrl: string;\n  /** String used as a file name when downloading this image to user's local device. */\n  saveAsName: string;\n  /** Optional string used as a alt text for the image. @default 'image' */\n  altText?: string;\n  /** Optional string used as the title of the image and displayed on the top left corner of the ImageGallery. */\n  title?: string;\n  /** Optional JSX element used as a title icon and displayed to the left of the title element. */\n  titleIcon?: JSX.Element;\n}\n/* @conditional-compile-remove(image-gallery) */\n/**\n * Props for {@link ImageGallery}.\n *\n * @beta\n */\nexport interface ImageGalleryProps {\n  /**\n   * Boolean that controls whether the modal is displayed.\n   */\n  isOpen: boolean;\n  /**\n   * Array of images used to populate the ImageGallery\n   */\n  images: Array<ImageGalleryImageProps>;\n  /**\n   * Callback to invoke when the ImageGallery modal is dismissed\n   */\n  onDismiss: () => void;\n  /**\n   * Callback called when the download button is clicked.\n   */\n  onImageDownloadButtonClicked: (imageUrl: string, saveAsName: string) => void;\n  /**\n   * Callback called when there's an error loading the image.\n   */\n  onError?: (event: SyntheticEvent<HTMLImageElement, Event>) => void;\n  /**\n   * Indicating which index of the images array to start with.\n   */\n  startIndex?: number;\n}\n/* @conditional-compile-remove(image-gallery) */\n/**\n * Strings of {@link ImageGallery} that can be overridden.\n *\n * @beta\n */\nexport interface ImageGalleryStrings {\n  /**\n   * Download button label for ImageGallery\n   */\n  downloadButtonLabel: string;\n  /**\n   * Dismiss button aria label for ImageGallery\n   */\n  dismissButtonAriaLabel: string;\n}\n/* @conditional-compile-remove(image-gallery) */\n/**\n * Component to render a fullscreen modal for a selected image.\n *\n * @beta\n */\nexport const ImageGallery = (props: ImageGalleryProps): JSX.Element => {\n  const { isOpen, images, onImageDownloadButtonClicked, onDismiss, onError, startIndex = 0 } = props;\n  const theme = useTheme() as unknown as ChatTheme;\n\n  /* @conditional-compile-remove(image-gallery) */\n  const localeStrings = useLocale().strings.imageGallery;\n\n  const [isImageLoaded, setIsImageLoaded] = useState<boolean>(true);\n\n  const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(theme);\n\n  if (images.length <= startIndex) {\n    return <></>;\n  }\n  const image = images[startIndex];\n  const renderHeaderBar = (): JSX.Element => {\n    return (\n      <Stack className={mergeStyles(headerStyle)}>\n        <Stack className={mergeStyles(titleBarContainerStyle)}>\n          {image.titleIcon}\n          <Stack.Item className={mergeStyles(titleStyle(theme))} aria-label={image.title}>\n            {image.title}\n          </Stack.Item>\n        </Stack>\n        <Stack className={mergeStyles(controlBarContainerStyle)}>\n          <DefaultButton\n            className={mergeStyles(downloadButtonStyle(theme))}\n            /* @conditional-compile-remove(image-gallery) */\n            text={localeStrings.downloadButtonLabel}\n            onClick={() => onImageDownloadButtonClicked(image.imageUrl, image.saveAsName)}\n            onRenderIcon={() => <Icon iconName={downloadIcon.iconName} className={mergeStyles(downloadIconStyle)} />}\n            aria-live={'polite'}\n            /* @conditional-compile-remove(image-gallery) */\n            aria-label={localeStrings.downloadButtonLabel}\n          />\n          <IconButton\n            iconProps={downloadIcon}\n            className={mergeStyles(smallDownloadButtonContainerStyle(theme))}\n            onClick={() => onImageDownloadButtonClicked(image.imageUrl, image.saveAsName)}\n            /* @conditional-compile-remove(image-gallery) */\n            aria-label={localeStrings.downloadButtonLabel}\n            aria-live={'polite'}\n          />\n          <IconButton\n            iconProps={cancelIcon}\n            className={mergeStyles(closeButtonStyles(theme))}\n            onClick={onDismiss}\n            /* @conditional-compile-remove(image-gallery) */\n            ariaLabel={localeStrings.dismissButtonAriaLabel}\n            aria-live={'polite'}\n          />\n        </Stack>\n      </Stack>\n    );\n  };\n\n  const renderBodyWithLightDismiss = (): JSX.Element => {\n    return (\n      <Stack className={mergeStyles(bodyContainer)} onClick={() => props.onDismiss()}>\n        <FocusTrapZone\n          onKeyDown={(e) => {\n            if (e.key === 'Escape' || e.key === 'Esc') {\n              onDismiss();\n            }\n          }}\n          // Ensure when the focus trap has focus, the light dismiss area can still be clicked with mouse to dismiss.\n          // Note: this still correctly captures keyboard focus, this just allows mouse click outside of the focus trap.\n          isClickableOutsideFocusTrap={true}\n          className={mergeStyles(bodyFocusZone)}\n        >\n          <img\n            src={image.imageUrl}\n            className={mergeStyles(imageStyle)}\n            alt={image.altText || 'image'}\n            aria-label={'image-gallery-main-image'}\n            aria-live={'polite'}\n            onError={(event) => {\n              setIsImageLoaded(false);\n              onError && onError(event);\n            }}\n            onClick={(event) => event.stopPropagation()}\n            onDoubleClick={(event) => {\n              event.persist();\n            }}\n          />\n        </FocusTrapZone>\n      </Stack>\n    );\n  };\n\n  return (\n    <Modal\n      titleAriaId={image.title}\n      isOpen={isOpen}\n      onDismiss={onDismiss}\n      overlay={{ styles: { ...overlayStyles(theme) } }}\n      styles={{ main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle }}\n      isDarkOverlay={true}\n    >\n      {renderHeaderBar()}\n      {renderBodyWithLightDismiss()}\n    </Modal>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/VideoGallery/FocusContentLayout.d.ts

@@ -1,21 +0,0 @@
-import { LayoutProps } from './Layout';
-/**
- * Props for {@link FocusedContentLayout}.
- *
- * @private
- */
-export interface FocusedContentLayoutProps extends LayoutProps {
-    /**
-     * Whether to display the local video camera switcher button
-     */
-    showCameraSwitcherInLocalPreview?: boolean;
-    /**
-     * Height of parent element
-     */
-    parentHeight?: number;
-}
-/**
- * Video gallery layout to focus on the screenshare stream that is present in the call.
- */
-export declare const FocusedContentLayout: (props: FocusedContentLayoutProps) => JSX.Element;
-//# sourceMappingURL=FocusContentLayout.d.ts.map

package/dist/dist-esm/react-components/src/components/VideoGallery/FocusContentLayout.js

@@ -1,18 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-import { LayerHost, Stack, mergeStyles } from '@fluentui/react';
-import React from 'react';
-import { innerLayoutStyle, layerHostStyle, rootLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';
-import { videoGalleryLayoutGap } from './styles/Layout.styles';
-import { useId } from '@fluentui/react-hooks';
-/**
- * Video gallery layout to focus on the screenshare stream that is present in the call.
- */
-export const FocusedContentLayout = (props) => {
-    const { screenShareComponent } = props;
-    const layerHostId = useId('layerhost');
-    return (React.createElement(Stack, { styles: rootLayoutStyle },
-        React.createElement(LayerHost, { id: layerHostId, className: mergeStyles(layerHostStyle) }),
-        React.createElement(Stack, { styles: innerLayoutStyle, tokens: videoGalleryLayoutGap }, screenShareComponent ? screenShareComponent : React.createElement(React.Fragment, null))));
-};
-//# sourceMappingURL=FocusContentLayout.js.map

package/dist/dist-esm/react-components/src/components/VideoGallery/FocusContentLayout.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FocusContentLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/FocusContentLayout.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEhE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAC7G,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAkB9C;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAgC,EAAe,EAAE;IACpF,MAAM,EAAE,oBAAoB,EAAE,GAAG,KAAK,CAAC;IAEvC,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IAEvC,OAAO,CACL,oBAAC,KAAK,IAAC,MAAM,EAAE,eAAe;QAC5B,oBAAC,SAAS,IAAC,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,CAAC,cAAc,CAAC,GAAI;QACtE,oBAAC,KAAK,IAAC,MAAM,EAAE,gBAAgB,EAAE,MAAM,EAAE,qBAAqB,IAC3D,oBAAoB,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,yCAAK,CAC9C,CACF,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { LayerHost, Stack, mergeStyles } from '@fluentui/react';\nimport { LayoutProps } from './Layout';\nimport React from 'react';\nimport { innerLayoutStyle, layerHostStyle, rootLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { useId } from '@fluentui/react-hooks';\n\n/**\n * Props for {@link FocusedContentLayout}.\n *\n * @private\n */\nexport interface FocusedContentLayoutProps extends LayoutProps {\n  /**\n   * Whether to display the local video camera switcher button\n   */\n  showCameraSwitcherInLocalPreview?: boolean;\n  /**\n   * Height of parent element\n   */\n  parentHeight?: number;\n}\n\n/**\n * Video gallery layout to focus on the screenshare stream that is present in the call.\n */\nexport const FocusedContentLayout = (props: FocusedContentLayoutProps): JSX.Element => {\n  const { screenShareComponent } = props;\n\n  const layerHostId = useId('layerhost');\n\n  return (\n    <Stack styles={rootLayoutStyle}>\n      <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />\n      <Stack styles={innerLayoutStyle} tokens={videoGalleryLayoutGap}>\n        {screenShareComponent ? screenShareComponent : <></>}\n      </Stack>\n    </Stack>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/VideoGallery/SpeakerVideoLayout.d.ts

@@ -1,28 +0,0 @@
-import { LocalVideoTileSize } from '../VideoGallery';
-import { LayoutProps } from './Layout';
-/**
- * Props for {@link SpeakerVideoLayout}.
- *
- * @private
- */
-export interface SpeakerVideoLayoutProps extends LayoutProps {
-    /**
-     * Whether to display the local video camera switcher button
-     */
-    showCameraSwitcherInLocalPreview?: boolean;
-    /**
-     * Height of parent element
-     */
-    parentHeight?: number;
-    /**
-     * Local video tile mode
-     */
-    localVideoTileSize?: LocalVideoTileSize;
-}
-/**
- * Layout for the gallery mode to highlight the current dominant speaker
- *
- * @private
- */
-export declare const SpeakerVideoLayout: (props: SpeakerVideoLayoutProps) => JSX.Element;
-//# sourceMappingURL=SpeakerVideoLayout.d.ts.map

package/dist/dist-esm/react-components/src/components/VideoGallery/SpeakerVideoLayout.js

@@ -1,145 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-import { LayerHost, Stack, mergeStyles, useTheme } from '@fluentui/react';
-import { isNarrowWidth } from '../utils/responsive';
-/* @conditional-compile-remove(vertical-gallery) */
-import { isShortHeight } from '../utils/responsive';
-import React, { useMemo, useRef, useState } from 'react';
-import { OverflowGallery } from './OverflowGallery';
-import { SMALL_FLOATING_MODAL_SIZE_REM, LARGE_FLOATING_MODAL_SIZE_REM, localVideoTileContainerStyle } from './styles/FloatingLocalVideo.styles';
-/* @conditional-compile-remove(vertical-gallery) */
-import { VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM, SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM } from './styles/FloatingLocalVideo.styles';
-import { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';
-import { GridLayout } from '../GridLayout';
-import { rootLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';
-import { layerHostStyle, innerLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';
-import { videoGalleryLayoutGap } from './styles/Layout.styles';
-import { useId } from '@fluentui/react-hooks';
-/**
- * Layout for the gallery mode to highlight the current dominant speaker
- *
- * @private
- */
-export const SpeakerVideoLayout = (props) => {
-    const { remoteParticipants = [], dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, parentWidth, 
-    /* @conditional-compile-remove(vertical-gallery) */ parentHeight, 
-    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition = 'HorizontalBottom', pinnedParticipantUserIds = [], 
-    /* @conditional-compile-remove(click-to-call) */ localVideoTileSize } = props;
-    const theme = useTheme();
-    const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
-    /* @conditional-compile-remove(vertical-gallery) */
-    const isShort = parentHeight ? isShortHeight(parentHeight) : false;
-    // This is for tracking the number of children in the first page of overflow gallery.
-    // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.
-    const childrenPerPage = useRef(4);
-    const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({
-        remoteParticipants,
-        dominantSpeakers,
-        maxRemoteVideoStreams,
-        isScreenShareActive: !!screenShareComponent,
-        maxOverflowGalleryDominantSpeakers: screenShareComponent
-            ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)
-            : childrenPerPage.current,
-        /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds,
-        /* @conditional-compile-remove(gallery-layouts) */ layout: 'speaker'
-    });
-    let activeVideoStreams = 0;
-    const gridTiles = gridParticipants.map((p) => {
-        var _a, _b;
-        return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
-            ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && activeVideoStreams++ < maxRemoteVideoStreams
-            : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
-    });
-    const shouldFloatLocalVideo = remoteParticipants.length > 0;
-    if (!shouldFloatLocalVideo && localVideoComponent) {
-        gridTiles.push(localVideoComponent);
-    }
-    /**
-     * instantiate indexes available to render with indexes available that would be on first page
-     *
-     * For some components which do not strictly follow the order of the array, we might
-     * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of
-     * this case when those components are here
-     */
-    const [indexesToRender, setIndexesToRender] = useState([]);
-    const overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {
-        var _a, _b;
-        return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
-            ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) &&
-                indexesToRender &&
-                indexesToRender.includes(i) &&
-                activeVideoStreams++ < maxRemoteVideoStreams
-            : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
-    });
-    const layerHostId = useId('layerhost');
-    const localVideoSizeRem = useMemo(() => {
-        if (isNarrow || /*@conditional-compile-remove(click-to-call) */ localVideoTileSize === '9:16') {
-            return SMALL_FLOATING_MODAL_SIZE_REM;
-        }
-        /* @conditional-compile-remove(vertical-gallery) */
-        if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'VerticalRight') {
-            return isNarrow
-                ? SMALL_FLOATING_MODAL_SIZE_REM
-                : isShort
-                    ? SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM
-                    : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM;
-        }
-        /*@conditional-compile-remove(click-to-call) */
-        if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'HorizontalBottom') {
-            return localVideoTileSize === '16:9' || !isNarrow ? LARGE_FLOATING_MODAL_SIZE_REM : SMALL_FLOATING_MODAL_SIZE_REM;
-        }
-        return LARGE_FLOATING_MODAL_SIZE_REM;
-    }, [
-        overflowGalleryTiles.length,
-        isNarrow,
-        screenShareComponent,
-        /* @conditional-compile-remove(vertical-gallery) */ isShort,
-        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
-        /* @conditional-compile-remove(click-to-call) */ localVideoTileSize
-    ]);
-    const wrappedLocalVideoComponent = localVideoComponent || (screenShareComponent && localVideoComponent) ? (React.createElement(Stack, { className: mergeStyles(localVideoTileContainerStyle(theme, localVideoSizeRem, !!screenShareComponent, 
-        /* @conditional-compile-remove(gallery-layouts) */ overflowGalleryPosition)) }, localVideoComponent)) : undefined;
-    const overflowGallery = useMemo(() => {
-        if (overflowGalleryTiles.length === 0 && !screenShareComponent) {
-            return null;
-        }
-        return (React.createElement(OverflowGallery
-        /* @conditional-compile-remove(vertical-gallery) */
-        , { 
-            /* @conditional-compile-remove(vertical-gallery) */
-            isShort: isShort, onFetchTilesToRender: setIndexesToRender, isNarrow: isNarrow, shouldFloatLocalVideo: true, overflowGalleryElements: overflowGalleryTiles, horizontalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, 
-            /* @conditional-compile-remove(vertical-gallery) */
-            verticalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.verticalGallery, 
-            /* @conditional-compile-remove(vertical-gallery) */
-            overflowGalleryPosition: overflowGalleryPosition, onChildrenPerPageChange: (n) => {
-                childrenPerPage.current = n;
-            } }));
-    }, [
-        isNarrow,
-        /* @conditional-compile-remove(vertical-gallery) */ isShort,
-        screenShareComponent,
-        overflowGalleryTiles,
-        styles === null || styles === void 0 ? void 0 : styles.horizontalGallery,
-        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
-        setIndexesToRender,
-        /* @conditional-compile-remove(vertical-gallery) */ styles === null || styles === void 0 ? void 0 : styles.verticalGallery
-    ]);
-    return (React.createElement(Stack, { styles: rootLayoutStyle },
-        wrappedLocalVideoComponent,
-        React.createElement(LayerHost, { id: layerHostId, className: mergeStyles(layerHostStyle) }),
-        React.createElement(Stack
-        /* @conditional-compile-remove(vertical-gallery) */
-        , { 
-            /* @conditional-compile-remove(vertical-gallery) */
-            horizontal: overflowGalleryPosition === 'VerticalRight', styles: innerLayoutStyle, tokens: videoGalleryLayoutGap },
-            /* @conditional-compile-remove(gallery-layouts) */ props.overflowGalleryPosition === 'HorizontalTop' ? (overflowGallery) : (React.createElement(React.Fragment, null)),
-            screenShareComponent ? (screenShareComponent) : (React.createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles)),
-            overflowGalleryTrampoline(overflowGallery, 
-            /* @conditional-compile-remove(gallery-layouts) */ props.overflowGalleryPosition))));
-};
-const overflowGalleryTrampoline = (gallery, galleryPosition) => {
-    /* @conditional-compile-remove(gallery-layouts) */
-    return galleryPosition !== 'HorizontalTop' ? gallery : React.createElement(React.Fragment, null);
-    return gallery;
-};
-//# sourceMappingURL=SpeakerVideoLayout.js.map