npm - @azure/communication-react - Versions diffs - 1.5.1-beta.1 → 1.5.1-beta.3 - Mend

@azure/communication-react 1.5.1-beta.1 → 1.5.1-beta.3

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 (446) hide show

package/dist/dist-esm/react-components/src/components/DevicesButton.js CHANGED Viewed

@@ -13,7 +13,7 @@ import { _preventDismissOnEvent as preventDismissOnEvent } from "../../../acs-ui
  *
  * @private
  */
-export const generateDefaultDeviceMenuProps = (props, strings, isSelectCamAllowed = true, isSelectMicAllowed = true) => {
+export const generateDefaultDeviceMenuProps = (props, strings, primaryActionItem, isSelectCamAllowed = true, isSelectMicAllowed = true) => {
     var _a, _b;
     const { microphones, speakers, cameras, selectedMicrophone, selectedSpeaker, selectedCamera, onSelectCamera, onSelectMicrophone, onSelectSpeaker } = props;
     const defaultMenuProps = {
@@ -34,88 +34,112 @@ export const generateDefaultDeviceMenuProps = (props, strings, isSelectCamAllowe
     const menuItemStyles = merge(buttonFlyoutItemStyles, (_b = (_a = props.styles) === null || _a === void 0 ? void 0 : _a.menuItemStyles) !== null && _b !== void 0 ? _b : {});
     if (cameras && selectedCamera && onSelectCamera && isSelectCamAllowed) {
         defaultMenuProps.items.push({
-            key: 'sectionCamera',
-            title: strings.cameraMenuTooltip,
+            key: 'cameras',
             itemType: ContextualMenuItemType.Section,
             sectionProps: {
                 title: strings.cameraMenuTitle,
-                items: cameras.map((camera) => ({
-                    key: camera.id,
-                    text: camera.name,
-                    title: camera.name,
-                    iconProps: { iconName: 'OptionsCamera', styles: { root: { lineHeight: 0 } } },
-                    itemProps: {
-                        styles: menuItemStyles
-                    },
-                    canCheck: true,
-                    isChecked: camera.id === (selectedCamera === null || selectedCamera === void 0 ? void 0 : selectedCamera.id),
-                    onClick: () => {
-                        if (camera.id !== (selectedCamera === null || selectedCamera === void 0 ? void 0 : selectedCamera.id)) {
-                            onSelectCamera(camera);
-                        }
+                items: [
+                    {
+                        key: 'sectionCamera',
+                        title: strings.cameraMenuTooltip,
+                        subMenuProps: {
+                            items: cameras.map((camera) => ({
+                                key: camera.id,
+                                text: camera.name,
+                                title: camera.name,
+                                itemProps: {
+                                    styles: menuItemStyles
+                                },
+                                canCheck: true,
+                                isChecked: camera.id === (selectedCamera === null || selectedCamera === void 0 ? void 0 : selectedCamera.id),
+                                onClick: () => {
+                                    if (camera.id !== (selectedCamera === null || selectedCamera === void 0 ? void 0 : selectedCamera.id)) {
+                                        onSelectCamera(camera);
+                                    }
+                                }
+                            }))
+                        },
+                        text: selectedCamera.name
                     }
-                }))
+                ]
             }
         });
+        if (primaryActionItem) {
+            defaultMenuProps.items.push(primaryActionItem);
+        }
     }
     if (microphones && selectedMicrophone && onSelectMicrophone && isSelectMicAllowed) {
         // Set props as Microphone if speakers can be enumerated else set as Audio Device
         const speakersAvailable = speakers && speakers.length > 0;
         const key = speakersAvailable ? 'sectionMicrophone' : 'sectionAudioDevice';
         const title = speakersAvailable ? strings.microphoneMenuTooltip : strings.audioDeviceMenuTooltip;
-        const sectionPropsTitle = speakersAvailable ? strings.microphoneMenuTitle : strings.audioDeviceMenuTitle;
-        const iconName = speakersAvailable ? 'OptionsMic' : 'OptionsSpeaker';
         defaultMenuProps.items.push({
-            key: key,
-            title: title,
+            key: 'microphones',
             itemType: ContextualMenuItemType.Section,
             sectionProps: {
-                title: sectionPropsTitle,
-                items: microphones.map((microphone) => ({
-                    key: microphone.id,
-                    text: microphone.name,
-                    title: microphone.name,
-                    iconProps: { iconName: iconName, styles: { root: { lineHeight: 0 } } },
-                    itemProps: {
-                        styles: menuItemStyles
-                    },
-                    canCheck: true,
-                    isChecked: microphone.id === (selectedMicrophone === null || selectedMicrophone === void 0 ? void 0 : selectedMicrophone.id),
-                    onClick: () => {
-                        if (microphone.id !== (selectedMicrophone === null || selectedMicrophone === void 0 ? void 0 : selectedMicrophone.id)) {
-                            onSelectMicrophone(microphone);
-                        }
+                title: strings.microphoneMenuTitle,
+                items: [
+                    {
+                        key: key,
+                        title: title,
+                        subMenuProps: {
+                            items: microphones.map((microphone) => ({
+                                key: microphone.id,
+                                text: microphone.name,
+                                title: microphone.name,
+                                itemProps: {
+                                    styles: menuItemStyles
+                                },
+                                canCheck: true,
+                                isChecked: microphone.id === (selectedMicrophone === null || selectedMicrophone === void 0 ? void 0 : selectedMicrophone.id),
+                                onClick: () => {
+                                    if (microphone.id !== (selectedMicrophone === null || selectedMicrophone === void 0 ? void 0 : selectedMicrophone.id)) {
+                                        onSelectMicrophone(microphone);
+                                    }
+                                }
+                            }))
+                        },
+                        text: selectedMicrophone.name
                     }
-                }))
+                ]
             }
         });
     }
     if (speakers && selectedSpeaker && onSelectSpeaker) {
         defaultMenuProps.items.push({
-            key: 'sectionSpeaker',
-            title: strings.speakerMenuTooltip,
+            key: 'speakers',
             itemType: ContextualMenuItemType.Section,
             sectionProps: {
                 title: strings.speakerMenuTitle,
-                items: speakers.map((speaker) => ({
-                    key: speaker.id,
-                    text: speaker.name,
-                    title: speaker.name,
-                    iconProps: { iconName: 'OptionsSpeaker', styles: { root: { lineHeight: 0 } } },
-                    itemProps: {
-                        styles: menuItemStyles
-                    },
-                    canCheck: true,
-                    isChecked: speaker.id === (selectedSpeaker === null || selectedSpeaker === void 0 ? void 0 : selectedSpeaker.id),
-                    onClick: () => {
-                        if (speaker.id !== (selectedSpeaker === null || selectedSpeaker === void 0 ? void 0 : selectedSpeaker.id)) {
-                            onSelectSpeaker(speaker);
-                        }
+                items: [
+                    {
+                        key: 'sectionSpeaker',
+                        subMenuProps: {
+                            items: speakers.map((speaker) => ({
+                                key: speaker.id,
+                                text: speaker.name,
+                                title: speaker.name,
+                                itemProps: {
+                                    styles: menuItemStyles
+                                },
+                                canCheck: true,
+                                isChecked: speaker.id === (selectedSpeaker === null || selectedSpeaker === void 0 ? void 0 : selectedSpeaker.id),
+                                onClick: () => {
+                                    if (speaker.id !== (selectedSpeaker === null || selectedSpeaker === void 0 ? void 0 : selectedSpeaker.id)) {
+                                        onSelectSpeaker(speaker);
+                                    }
+                                }
+                            }))
+                        },
+                        text: selectedSpeaker.name
                     }
-                }))
+                ]
             }
         });
     }
+    if (microphones && selectedMicrophone && onSelectMicrophone && isSelectMicAllowed && primaryActionItem) {
+        defaultMenuProps.items.push(primaryActionItem);
+    }
     if (defaultMenuProps.items.length === 0) {
         // Avoids creating an empty context menu.
         return undefined;

package/dist/dist-esm/react-components/src/components/DevicesButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DevicesButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/DevicesButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n ContextualMenuItemType,\n IContextualMenuItem,\n IContextualMenuItemStyles,\n IContextualMenuProps,\n IContextualMenuStyles,\n merge\n} from '@fluentui/react';\nimport React from 'react';\nimport { useLocale } from '../localization';\nimport { ControlBarButton, ControlBarButtonProps, ControlBarButtonStyles } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { buttonFlyoutItemStyles } from './styles/ControlBar.styles';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/*\n Styles for the {@link DevicesButton} menu.\n \n @public\n /\nexport interface DevicesButtonContextualMenuStyles extends IContextualMenuStyles {\n /\n Styles for the items inside the {@link DevicesButton} button menu.\n /\n menuItemStyles?: IContextualMenuItemStyles;\n}\n\n/\n Styles for the Devices button menu items.\n \n @public\n /\nexport interface DevicesButtonStyles extends ControlBarButtonStyles {\n /\n Styles for the {@link DevicesButton} menu.\n /\n menuStyles?: Partial<DevicesButtonContextualMenuStyles>;\n}\n\n/\n A device, e.g. camera, microphone, or speaker, in the {@link DevicesButton} flyout.\n \n @public\n /\nexport interface OptionsDevice {\n /\n Device unique identifier\n /\n id: string;\n /\n Device name\n /\n name: string;\n}\n\n/\n Strings of {@link DevicesButton} that can be overridden.\n \n @public\n /\nexport interface DevicesButtonStrings {\n /\n Label of button\n /\n label: string;\n /\n Button tooltip content.\n /\n tooltipContent?: string;\n /\n Title of camera menu\n /\n cameraMenuTitle: string;\n /\n Title of microphone menu\n /\n microphoneMenuTitle: string;\n /\n Title of speaker menu\n /\n speakerMenuTitle: string;\n /\n Tooltip of camera menu\n /\n cameraMenuTooltip: string;\n /\n Tooltip of microphone menu\n /\n microphoneMenuTooltip: string;\n /\n Tooltip of speaker menu\n /\n speakerMenuTooltip: string;\n}\n\n/\n Props for {@link DevicesButton}.\n \n @public\n /\nexport interface DevicesButtonProps extends ControlBarButtonProps {\n /\n Available microphones for selection\n /\n microphones?: OptionsDevice[];\n /\n Available speakers for selection\n /\n speakers?: OptionsDevice[];\n /\n Available cameras for selection\n /\n cameras?: OptionsDevice[];\n /\n Microphone that is shown as currently selected\n /\n selectedMicrophone?: OptionsDevice;\n /\n Speaker that is shown as currently selected\n /\n selectedSpeaker?: OptionsDevice;\n /\n Camera that is shown as currently selected\n /\n selectedCamera?: OptionsDevice;\n /\n Callback when a camera is selected\n /\n onSelectCamera?: (device: OptionsDevice) => Promise<void>;\n /\n Callback when a microphone is selected\n /\n onSelectMicrophone?: (device: OptionsDevice) => Promise<void>;\n /\n Speaker when a speaker is selected\n /\n onSelectSpeaker?: (device: OptionsDevice) => Promise<void>;\n /\n Optional strings to override in component\n /\n strings?: Partial<DevicesButtonStrings>;\n /\n Option to increase the touch targets of the button flyout menu items from 36px to 48px.\n * Recommended for mobile devices.\n /\n styles?: DevicesButtonStyles;\n}\n\n/\n Subset props for various buttons that show device selection menus.\n \n @private\n /\nexport interface DeviceMenuProps {\n microphones?: OptionsDevice[];\n speakers?: OptionsDevice[];\n cameras?: OptionsDevice[];\n selectedMicrophone?: OptionsDevice;\n selectedSpeaker?: OptionsDevice;\n selectedCamera?: OptionsDevice;\n onSelectCamera?: (device: OptionsDevice) => Promise<void>;\n onSelectMicrophone?: (device: OptionsDevice) => Promise<void>;\n onSelectSpeaker?: (device: OptionsDevice) => Promise<void>;\n styles?: Partial<DeviceMenuStyles>;\n}\n\n/\n Subset of strings for various buttons that show device selection menus.\n \n @private\n /\nexport interface DeviceMenuStrings {\n /\n Title for Camera section in the contextual menu\n /\n cameraMenuTitle?: string;\n /\n Title for Audio Device section in the contextual menu\n \n @remark Used in place of microphoneMenuTitle when speakers can be enumerated\n /\n audioDeviceMenuTitle?: string;\n /\n Title for Microphone section in the contextual menu\n \n @remark Used when speakers can be enumerated\n /\n microphoneMenuTitle?: string;\n /\n Title for Speaker section in the contextual menu\n /\n speakerMenuTitle?: string;\n /\n Tooltip label for Camera section in the contextual menu\n /\n cameraMenuTooltip?: string;\n /\n Tooltip label for Audio Device section in the contextual menu\n \n @remark Used in place of microphoneMenuTooltip when speakers can be enumerated\n /\n audioDeviceMenuTooltip?: string;\n /\n Tooltip label for Microphone section in the contextual menu\n \n @remark Used when speakers can be enumerated\n /\n microphoneMenuTooltip?: string;\n /\n Tooltip label for Speaker section in the contextual menu\n /\n speakerMenuTooltip?: string;\n}\n\n/\n Styles for flyouts used by various buttons for device selection flyouts.\n \n @private\n /\nexport interface DeviceMenuStyles extends IContextualMenuStyles {\n menuItemStyles?: IContextualMenuItemStyles;\n}\n\n/\n Generates default {@link IContextualMenuProps} for buttons that\n * show a drop-down to select devices to use.\n \n @private\n /\nexport const generateDefaultDeviceMenuProps = (\n props: DeviceMenuProps,\n strings: DeviceMenuStrings,\n isSelectCamAllowed = true,\n isSelectMicAllowed = true\n): { items: IContextualMenuItem[] } \| undefined => {\n const {\n microphones,\n speakers,\n cameras,\n selectedMicrophone,\n selectedSpeaker,\n selectedCamera,\n onSelectCamera,\n onSelectMicrophone,\n onSelectSpeaker\n } = props;\n\n const defaultMenuProps: IContextualMenuProps = {\n items: [],\n styles: props.styles,\n calloutProps: {\n styles: {\n root: {\n // Confine the menu to the parents bounds.\n // More info: https://github.com/microsoft/fluentui/issues/18835\n // NB: 95% to keep some space for margin, drop shadow etc around the Callout.\n maxWidth: '95%'\n }\n },\n preventDismissOnEvent\n }\n };\n\n const menuItemStyles = merge(buttonFlyoutItemStyles, props.styles?.menuItemStyles ?? {});\n\n if (cameras && selectedCamera && onSelectCamera && isSelectCamAllowed) {\n defaultMenuProps.items.push({\n key: 'sectionCamera',\n title: strings.cameraMenuTooltip,\n itemType: ContextualMenuItemType.Section,\n sectionProps: {\n title: strings.cameraMenuTitle,\n items: cameras.map((camera) => ({\n key: camera.id,\n text: camera.name,\n title: camera.name,\n iconProps: { iconName: 'OptionsCamera', styles: { root: { lineHeight: 0 } } },\n itemProps: {\n styles: menuItemStyles\n },\n canCheck: true,\n isChecked: camera.id === selectedCamera?.id,\n onClick: () => {\n if (camera.id !== selectedCamera?.id) {\n onSelectCamera(camera);\n }\n }\n }))\n }\n });\n }\n\n if (microphones && selectedMicrophone && onSelectMicrophone && isSelectMicAllowed) {\n // Set props as Microphone if speakers can be enumerated else set as Audio Device\n const speakersAvailable = speakers && speakers.length > 0;\n const key = speakersAvailable ? 'sectionMicrophone' : 'sectionAudioDevice';\n const title = speakersAvailable ? strings.microphoneMenuTooltip : strings.audioDeviceMenuTooltip;\n const sectionPropsTitle = speakersAvailable ? strings.microphoneMenuTitle : strings.audioDeviceMenuTitle;\n const iconName = speakersAvailable ? 'OptionsMic' : 'OptionsSpeaker';\n\n defaultMenuProps.items.push({\n key: key,\n title: title,\n itemType: ContextualMenuItemType.Section,\n sectionProps: {\n title: sectionPropsTitle,\n items: microphones.map((microphone) => ({\n key: microphone.id,\n text: microphone.name,\n title: microphone.name,\n iconProps: { iconName: iconName, styles: { root: { lineHeight: 0 } } },\n itemProps: {\n styles: menuItemStyles\n },\n canCheck: true,\n isChecked: microphone.id === selectedMicrophone?.id,\n onClick: () => {\n if (microphone.id !== selectedMicrophone?.id) {\n onSelectMicrophone(microphone);\n }\n }\n }))\n }\n });\n }\n\n if (speakers && selectedSpeaker && onSelectSpeaker) {\n defaultMenuProps.items.push({\n key: 'sectionSpeaker',\n title: strings.speakerMenuTooltip,\n itemType: ContextualMenuItemType.Section,\n sectionProps: {\n title: strings.speakerMenuTitle,\n items: speakers.map((speaker) => ({\n key: speaker.id,\n text: speaker.name,\n title: speaker.name,\n iconProps: { iconName: 'OptionsSpeaker', styles: { root: { lineHeight: 0 } } },\n itemProps: {\n styles: menuItemStyles\n },\n canCheck: true,\n isChecked: speaker.id === selectedSpeaker?.id,\n onClick: () => {\n if (speaker.id !== selectedSpeaker?.id) {\n onSelectSpeaker(speaker);\n }\n }\n }))\n }\n });\n }\n\n if (defaultMenuProps.items.length === 0) {\n // Avoids creating an empty context menu.\n return undefined;\n }\n return defaultMenuProps;\n};\n\n/\n A button to open a menu that controls device options.\n \n Can be used with {@link ControlBar}.\n \n @public\n */\nexport const DevicesButton = (props: DevicesButtonProps): JSX.Element => {\n const { onRenderIcon } = props;\n\n const localeStrings = useLocale().strings.devicesButton;\n const strings = { ...localeStrings, ...props.strings };\n\n const devicesButtonMenu =\n props.menuProps ?? generateDefaultDeviceMenuProps({ ...props, styles: props.styles?.menuStyles }, strings);\n\n const onRenderOptionsIcon = (): JSX.Element => {\n return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ControlButtonOptions\" />;\n };\n\n return (\n <ControlBarButton\n {...props}\n menuProps={devicesButtonMenu}\n menuIconProps={{ hidden: true }}\n onRenderIcon={onRenderIcon ?? onRenderOptionsIcon}\n strings={strings}\n labelKey={props.labelKey ?? 'devicesButtonLabel'}\n />\n );\n};\n\"../../../acs-ui-common/src\""]}
1	+ {"version":3,"file":"DevicesButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/DevicesButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n ContextualMenuItemType,\n IContextualMenuItem,\n IContextualMenuItemStyles,\n IContextualMenuProps,\n IContextualMenuStyles,\n merge\n} from '@fluentui/react';\nimport React from 'react';\nimport { useLocale } from '../localization';\nimport { ControlBarButton, ControlBarButtonProps, ControlBarButtonStyles } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { buttonFlyoutItemStyles } from './styles/ControlBar.styles';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/*\n Styles for the {@link DevicesButton} menu.\n \n @public\n /\nexport interface DevicesButtonContextualMenuStyles extends IContextualMenuStyles {\n /\n Styles for the items inside the {@link DevicesButton} button menu.\n /\n menuItemStyles?: IContextualMenuItemStyles;\n}\n\n/\n Styles for the Devices button menu items.\n \n @public\n /\nexport interface DevicesButtonStyles extends ControlBarButtonStyles {\n /\n Styles for the {@link DevicesButton} menu.\n /\n menuStyles?: Partial<DevicesButtonContextualMenuStyles>;\n}\n\n/\n A device, e.g. camera, microphone, or speaker, in the {@link DevicesButton} flyout.\n \n @public\n /\nexport interface OptionsDevice {\n /\n Device unique identifier\n /\n id: string;\n /\n Device name\n /\n name: string;\n}\n\n/\n Strings of {@link DevicesButton} that can be overridden.\n \n @public\n /\nexport interface DevicesButtonStrings {\n /\n Label of button\n /\n label: string;\n /\n Button tooltip content.\n /\n tooltipContent?: string;\n /\n Title of camera menu\n /\n cameraMenuTitle: string;\n /\n Title of microphone menu\n /\n microphoneMenuTitle: string;\n /\n Title of speaker menu\n /\n speakerMenuTitle: string;\n /\n Tooltip of camera menu\n /\n cameraMenuTooltip: string;\n /\n Tooltip of microphone menu\n /\n microphoneMenuTooltip: string;\n /\n Tooltip of speaker menu\n /\n speakerMenuTooltip: string;\n}\n\n/\n Props for {@link DevicesButton}.\n \n @public\n /\nexport interface DevicesButtonProps extends ControlBarButtonProps {\n /\n Available microphones for selection\n /\n microphones?: OptionsDevice[];\n /\n Available speakers for selection\n /\n speakers?: OptionsDevice[];\n /\n Available cameras for selection\n /\n cameras?: OptionsDevice[];\n /\n Microphone that is shown as currently selected\n /\n selectedMicrophone?: OptionsDevice;\n /\n Speaker that is shown as currently selected\n /\n selectedSpeaker?: OptionsDevice;\n /\n Camera that is shown as currently selected\n /\n selectedCamera?: OptionsDevice;\n /\n Callback when a camera is selected\n /\n onSelectCamera?: (device: OptionsDevice) => Promise<void>;\n /\n Callback when a microphone is selected\n /\n onSelectMicrophone?: (device: OptionsDevice) => Promise<void>;\n /\n Speaker when a speaker is selected\n /\n onSelectSpeaker?: (device: OptionsDevice) => Promise<void>;\n /\n Optional strings to override in component\n /\n strings?: Partial<DevicesButtonStrings>;\n /\n Option to increase the touch targets of the button flyout menu items from 36px to 48px.\n * Recommended for mobile devices.\n /\n styles?: DevicesButtonStyles;\n}\n\n/\n Subset props for various buttons that show device selection menus.\n \n @private\n /\nexport interface DeviceMenuProps {\n microphones?: OptionsDevice[];\n speakers?: OptionsDevice[];\n cameras?: OptionsDevice[];\n selectedMicrophone?: OptionsDevice;\n selectedSpeaker?: OptionsDevice;\n selectedCamera?: OptionsDevice;\n onSelectCamera?: (device: OptionsDevice) => Promise<void>;\n onSelectMicrophone?: (device: OptionsDevice) => Promise<void>;\n onSelectSpeaker?: (device: OptionsDevice) => Promise<void>;\n styles?: Partial<DeviceMenuStyles>;\n}\n\n/\n Subset of strings for various buttons that show device selection menus.\n \n @private\n /\nexport interface DeviceMenuStrings {\n /\n Title for Camera section in the contextual menu\n /\n cameraMenuTitle?: string;\n /\n Title for Audio Device section in the contextual menu\n \n @remark Used in place of microphoneMenuTitle when speakers can be enumerated\n /\n audioDeviceMenuTitle?: string;\n /\n Title for Microphone section in the contextual menu\n \n @remark Used when speakers can be enumerated\n /\n microphoneMenuTitle?: string;\n /\n Title for Speaker section in the contextual menu\n /\n speakerMenuTitle?: string;\n /\n Tooltip label for Camera section in the contextual menu\n /\n cameraMenuTooltip?: string;\n /\n Tooltip label for Audio Device section in the contextual menu\n \n @remark Used in place of microphoneMenuTooltip when speakers can be enumerated\n /\n audioDeviceMenuTooltip?: string;\n /\n Tooltip label for Microphone section in the contextual menu\n \n @remark Used when speakers can be enumerated\n /\n microphoneMenuTooltip?: string;\n /\n Tooltip label for Speaker section in the contextual menu\n /\n speakerMenuTooltip?: string;\n}\n\n/\n Styles for flyouts used by various buttons for device selection flyouts.\n \n @private\n /\nexport interface DeviceMenuStyles extends IContextualMenuStyles {\n menuItemStyles?: IContextualMenuItemStyles;\n}\n\n/\n Generates default {@link IContextualMenuProps} for buttons that\n * show a drop-down to select devices to use.\n \n @private\n /\nexport const generateDefaultDeviceMenuProps = (\n props: DeviceMenuProps,\n strings: DeviceMenuStrings,\n primaryActionItem?: IContextualMenuItem,\n isSelectCamAllowed = true,\n isSelectMicAllowed = true\n): { items: IContextualMenuItem[] } \| undefined => {\n const {\n microphones,\n speakers,\n cameras,\n selectedMicrophone,\n selectedSpeaker,\n selectedCamera,\n onSelectCamera,\n onSelectMicrophone,\n onSelectSpeaker\n } = props;\n\n const defaultMenuProps: IContextualMenuProps = {\n items: [],\n styles: props.styles,\n calloutProps: {\n styles: {\n root: {\n // Confine the menu to the parents bounds.\n // More info: https://github.com/microsoft/fluentui/issues/18835\n // NB: 95% to keep some space for margin, drop shadow etc around the Callout.\n maxWidth: '95%'\n }\n },\n preventDismissOnEvent\n }\n };\n\n const menuItemStyles = merge(buttonFlyoutItemStyles, props.styles?.menuItemStyles ?? {});\n\n if (cameras && selectedCamera && onSelectCamera && isSelectCamAllowed) {\n defaultMenuProps.items.push({\n key: 'cameras',\n itemType: ContextualMenuItemType.Section,\n sectionProps: {\n title: strings.cameraMenuTitle,\n items: [\n {\n key: 'sectionCamera',\n title: strings.cameraMenuTooltip,\n subMenuProps: {\n items: cameras.map((camera) => ({\n key: camera.id,\n text: camera.name,\n title: camera.name,\n itemProps: {\n styles: menuItemStyles\n },\n canCheck: true,\n isChecked: camera.id === selectedCamera?.id,\n onClick: () => {\n if (camera.id !== selectedCamera?.id) {\n onSelectCamera(camera);\n }\n }\n }))\n },\n text: selectedCamera.name\n }\n ]\n }\n });\n if (primaryActionItem) {\n defaultMenuProps.items.push(primaryActionItem);\n }\n }\n\n if (microphones && selectedMicrophone && onSelectMicrophone && isSelectMicAllowed) {\n // Set props as Microphone if speakers can be enumerated else set as Audio Device\n const speakersAvailable = speakers && speakers.length > 0;\n const key = speakersAvailable ? 'sectionMicrophone' : 'sectionAudioDevice';\n const title = speakersAvailable ? strings.microphoneMenuTooltip : strings.audioDeviceMenuTooltip;\n\n defaultMenuProps.items.push({\n key: 'microphones',\n itemType: ContextualMenuItemType.Section,\n sectionProps: {\n title: strings.microphoneMenuTitle,\n items: [\n {\n key: key,\n title: title,\n subMenuProps: {\n items: microphones.map((microphone) => ({\n key: microphone.id,\n text: microphone.name,\n title: microphone.name,\n itemProps: {\n styles: menuItemStyles\n },\n canCheck: true,\n isChecked: microphone.id === selectedMicrophone?.id,\n onClick: () => {\n if (microphone.id !== selectedMicrophone?.id) {\n onSelectMicrophone(microphone);\n }\n }\n }))\n },\n text: selectedMicrophone.name\n }\n ]\n }\n });\n }\n\n if (speakers && selectedSpeaker && onSelectSpeaker) {\n defaultMenuProps.items.push({\n key: 'speakers',\n itemType: ContextualMenuItemType.Section,\n sectionProps: {\n title: strings.speakerMenuTitle,\n items: [\n {\n key: 'sectionSpeaker',\n subMenuProps: {\n items: speakers.map((speaker) => ({\n key: speaker.id,\n text: speaker.name,\n title: speaker.name,\n itemProps: {\n styles: menuItemStyles\n },\n canCheck: true,\n isChecked: speaker.id === selectedSpeaker?.id,\n onClick: () => {\n if (speaker.id !== selectedSpeaker?.id) {\n onSelectSpeaker(speaker);\n }\n }\n }))\n },\n text: selectedSpeaker.name\n }\n ]\n }\n });\n }\n if (microphones && selectedMicrophone && onSelectMicrophone && isSelectMicAllowed && primaryActionItem) {\n defaultMenuProps.items.push(primaryActionItem);\n }\n\n if (defaultMenuProps.items.length === 0) {\n // Avoids creating an empty context menu.\n return undefined;\n }\n return defaultMenuProps;\n};\n\n/\n A button to open a menu that controls device options.\n \n Can be used with {@link ControlBar}.\n \n @public\n */\nexport const DevicesButton = (props: DevicesButtonProps): JSX.Element => {\n const { onRenderIcon } = props;\n\n const localeStrings = useLocale().strings.devicesButton;\n const strings = { ...localeStrings, ...props.strings };\n\n const devicesButtonMenu =\n props.menuProps ?? generateDefaultDeviceMenuProps({ ...props, styles: props.styles?.menuStyles }, strings);\n\n const onRenderOptionsIcon = (): JSX.Element => {\n return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ControlButtonOptions\" />;\n };\n\n return (\n <ControlBarButton\n {...props}\n menuProps={devicesButtonMenu}\n menuIconProps={{ hidden: true }}\n onRenderIcon={onRenderIcon ?? onRenderOptionsIcon}\n strings={strings}\n labelKey={props.labelKey ?? 'devicesButtonLabel'}\n />\n );\n};\n\"../../../acs-ui-common/src\""]}

package/dist/dist-esm/react-components/src/components/Drawer/DrawerMenuItem.d.ts CHANGED Viewed

@@ -13,6 +13,8 @@ export interface _DrawerMenuItemProps {
     text?: string;
     /** Text that shows at the end of the menu item before any secondaryIcon is supplied */
     secondaryText?: string;
+    /** A component that shows at the end of the menu item before any secondaryIcon is supplied */
+    secondaryComponent?: JSX.Element;
     /** Icon shown at the start of the menu item (before the menu item text) */
     iconProps?: IIconProps;
     /**

package/dist/dist-esm/react-components/src/components/Drawer/DrawerMenuItem.js CHANGED Viewed

@@ -24,6 +24,7 @@ export const DrawerMenuItem = (props) => {
             React.createElement(Text, { styles: {
                     root: { color: props.disabled ? theme.palette.neutralTertiaryAlt : theme.palette.neutralSecondary }
                 } }, props.secondaryText))),
+        props.secondaryComponent && React.createElement(Stack.Item, null, props.secondaryComponent),
         secondaryIcon && React.createElement(Stack.Item, null, secondaryIcon)));
 };
 const MenuItemIcon = (props) => (React.createElement(FontIcon, Object.assign({ className: mergeStyles(iconStyles) }, props)));

package/dist/dist-esm/react-components/src/components/Drawer/DrawerMenuItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DrawerMenuItem.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Drawer/DrawerMenuItem.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EACL,QAAQ,EAMR,WAAW,EACX,KAAK,EACL,IAAI,EACL,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAE7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;~~AAkCjE~~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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n FontIcon,\n IFontIconProps,\n IIconProps,\n IRawStyle,\n IStackStyles,\n IStyle,\n mergeStyles,\n Stack,\n Text\n} from '@fluentui/react';\nimport React from 'react';\nimport { useTheme } from '../../theming/FluentThemeProvider';\nimport { BaseCustomStyles } from '../../types';\nimport { submitWithKeyboard } from '../utils/keyboardNavigation';\n\n/*\n Props for the DrawerMenuItem\n \n @internal\n /\nexport interface _DrawerMenuItemProps {\n onItemClick?: (ev?: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, itemKey?: string) => void;\n itemKey: string;\n /* Text that shows at the start of the menu item after any icon supplied /\n text?: string;\n /* Text that shows at the end of the menu item before any secondaryIcon is supplied /\n secondaryText?: string;\n /* Icon shown at the start of the menu item (before the menu item text) /\n iconProps?: IIconProps;\n /\n Icon shown at the end of the menu item.\n * By default if this component has subMenuProps, this icon is the RightChevron.\n /\n secondaryIconProps?: IIconProps;\n styles?: BaseCustomStyles;\n subMenuProps?: _DrawerMenuItemProps[];\n /\n Whether the menu item is disabled\n * @defaultvalue false\n /\n disabled?: boolean;\n /\n A unique id set for the standard HTML id attibute\n /\n id?: string;\n}\n\n/\n Maps the individual item in menuProps.items passed in the {@link DrawerMenu} into a UI component.\n \n @private\n /\nexport const DrawerMenuItem = (props: _DrawerMenuItemProps): JSX.Element => {\n const theme = useTheme();\n const onClick = (ev?: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>): void =>\n props.onItemClick && props.onItemClick(ev, props.itemKey);\n const onKeyPress = (ev: React.KeyboardEvent<HTMLElement>): void => onClick && submitWithKeyboard(ev, onClick);\n\n const secondaryIcon = props.secondaryIconProps ? (\n <MenuItemIcon {...props.secondaryIconProps} />\n ) : props.subMenuProps ? (\n <MenuItemIcon iconName=\"ChevronRight\" />\n ) : undefined;\n\n return (\n <Stack\n tabIndex={0}\n role=\"menuitem\"\n horizontal\n className={mergeStyles(\n drawerMenuItemRootStyles(theme.palette.neutralLight, theme.fonts.small),\n props.disabled ? disabledDrawerMenuItemRootStyles(theme.palette.neutralQuaternaryAlt) : undefined,\n props.styles?.root\n )}\n onKeyPress={props.disabled ? undefined : onKeyPress}\n onClick={props.disabled ? undefined : onClick}\n tokens={menuItemChildrenGap}\n id={props.id}\n >\n {props.iconProps && (\n <Stack.Item\n role=\"presentation\"\n styles={props.disabled ? { root: { color: theme.palette.neutralTertiaryAlt } } : undefined}\n >\n <MenuItemIcon {...props.iconProps} />\n </Stack.Item>\n )}\n <Stack.Item styles={drawerMenuItemTextStyles} grow>\n <Text styles={props.disabled ? { root: { color: theme.palette.neutralTertiaryAlt } } : undefined}>\n {props.text}\n </Text>\n </Stack.Item>\n {props.secondaryText && (\n <Stack.Item styles={drawerMenuItemTextStyles} className={mergeStyles(secondaryTextStyles)}>\n <Text\n styles={{\n root: { color: props.disabled ? theme.palette.neutralTertiaryAlt : theme.palette.neutralSecondary }\n }}\n >\n {props.secondaryText}\n </Text>\n </Stack.Item>\n )}\n {secondaryIcon && <Stack.Item>{secondaryIcon}</Stack.Item>}\n </Stack>\n );\n};\n\nconst MenuItemIcon = (props: IFontIconProps): JSX.Element => (\n <FontIcon className={mergeStyles(iconStyles)} {...props} />\n);\n\nconst menuItemChildrenGap = { childrenGap: '0.5rem' };\n\nconst drawerMenuItemRootStyles = (hoverBackground: string, fontSize: IRawStyle): IStyle => ({\n ...fontSize,\n height: '3rem',\n lineHeight: '3rem',\n padding: '0rem 0.75rem',\n cursor: 'pointer',\n ':hover, :focus': {\n background: hoverBackground\n }\n});\n\nconst disabledDrawerMenuItemRootStyles = (background: string): IStyle => ({\n pointerEvents: 'none',\n background: background,\n ':hover, :focus': {\n background: background\n }\n});\n\n/* Ensure long text entries appropriately show ellipsis instead of wrapping to a new line or showing a scrollbar */\nconst drawerMenuItemTextStyles: IStackStyles = {\n root: {\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap'\n }\n};\n\nconst iconStyles: IStyle = {\n // Vertically center icons in the menu item. Using line-height does not work for centering fluent SVG icons.\n display: 'flex',\n alignItems: 'center',\n height: '100%',\n\n // This can be removed when we upgrade to fluent-react-icons v2 (that removes the inner span element)\n ' span': {\n display: 'flex',\n alignItems: 'center',\n height: '100%'\n }\n};\n\nconst secondaryTextStyles: IStyle = {\n // limit width for secondaryText in the menu item so it does not overlap with text on left.\n maxWidth: '50%'\n};\n"]}
1	+ {"version":3,"file":"DrawerMenuItem.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Drawer/DrawerMenuItem.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n FontIcon,\n IFontIconProps,\n IIconProps,\n IRawStyle,\n IStackStyles,\n IStyle,\n mergeStyles,\n Stack,\n Text\n} from '@fluentui/react';\nimport React from 'react';\nimport { useTheme } from '../../theming/FluentThemeProvider';\nimport { BaseCustomStyles } from '../../types';\nimport { submitWithKeyboard } from '../utils/keyboardNavigation';\n\n/*\n Props for the DrawerMenuItem\n \n @internal\n /\nexport interface _DrawerMenuItemProps {\n onItemClick?: (ev?: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, itemKey?: string) => void;\n itemKey: string;\n /* Text that shows at the start of the menu item after any icon supplied /\n text?: string;\n /* Text that shows at the end of the menu item before any secondaryIcon is supplied /\n secondaryText?: string;\n /* A component that shows at the end of the menu item before any secondaryIcon is supplied /\n secondaryComponent?: JSX.Element;\n /* Icon shown at the start of the menu item (before the menu item text) /\n iconProps?: IIconProps;\n /\n Icon shown at the end of the menu item.\n * By default if this component has subMenuProps, this icon is the RightChevron.\n /\n secondaryIconProps?: IIconProps;\n styles?: BaseCustomStyles;\n subMenuProps?: _DrawerMenuItemProps[];\n /\n Whether the menu item is disabled\n * @defaultvalue false\n /\n disabled?: boolean;\n /\n A unique id set for the standard HTML id attibute\n /\n id?: string;\n}\n\n/\n Maps the individual item in menuProps.items passed in the {@link DrawerMenu} into a UI component.\n \n @private\n /\nexport const DrawerMenuItem = (props: _DrawerMenuItemProps): JSX.Element => {\n const theme = useTheme();\n const onClick = (ev?: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>): void =>\n props.onItemClick && props.onItemClick(ev, props.itemKey);\n const onKeyPress = (ev: React.KeyboardEvent<HTMLElement>): void => onClick && submitWithKeyboard(ev, onClick);\n\n const secondaryIcon = props.secondaryIconProps ? (\n <MenuItemIcon {...props.secondaryIconProps} />\n ) : props.subMenuProps ? (\n <MenuItemIcon iconName=\"ChevronRight\" />\n ) : undefined;\n\n return (\n <Stack\n tabIndex={0}\n role=\"menuitem\"\n horizontal\n className={mergeStyles(\n drawerMenuItemRootStyles(theme.palette.neutralLight, theme.fonts.small),\n props.disabled ? disabledDrawerMenuItemRootStyles(theme.palette.neutralQuaternaryAlt) : undefined,\n props.styles?.root\n )}\n onKeyPress={props.disabled ? undefined : onKeyPress}\n onClick={props.disabled ? undefined : onClick}\n tokens={menuItemChildrenGap}\n id={props.id}\n >\n {props.iconProps && (\n <Stack.Item\n role=\"presentation\"\n styles={props.disabled ? { root: { color: theme.palette.neutralTertiaryAlt } } : undefined}\n >\n <MenuItemIcon {...props.iconProps} />\n </Stack.Item>\n )}\n <Stack.Item styles={drawerMenuItemTextStyles} grow>\n <Text styles={props.disabled ? { root: { color: theme.palette.neutralTertiaryAlt } } : undefined}>\n {props.text}\n </Text>\n </Stack.Item>\n {props.secondaryText && (\n <Stack.Item styles={drawerMenuItemTextStyles} className={mergeStyles(secondaryTextStyles)}>\n <Text\n styles={{\n root: { color: props.disabled ? theme.palette.neutralTertiaryAlt : theme.palette.neutralSecondary }\n }}\n >\n {props.secondaryText}\n </Text>\n </Stack.Item>\n )}\n {props.secondaryComponent && <Stack.Item>{props.secondaryComponent}</Stack.Item>}\n {secondaryIcon && <Stack.Item>{secondaryIcon}</Stack.Item>}\n </Stack>\n );\n};\n\nconst MenuItemIcon = (props: IFontIconProps): JSX.Element => (\n <FontIcon className={mergeStyles(iconStyles)} {...props} />\n);\n\nconst menuItemChildrenGap = { childrenGap: '0.5rem' };\n\nconst drawerMenuItemRootStyles = (hoverBackground: string, fontSize: IRawStyle): IStyle => ({\n ...fontSize,\n height: '3rem',\n lineHeight: '3rem',\n padding: '0rem 0.75rem',\n cursor: 'pointer',\n ':hover, :focus': {\n background: hoverBackground\n }\n});\n\nconst disabledDrawerMenuItemRootStyles = (background: string): IStyle => ({\n pointerEvents: 'none',\n background: background,\n ':hover, :focus': {\n background: background\n }\n});\n\n/* Ensure long text entries appropriately show ellipsis instead of wrapping to a new line or showing a scrollbar */\nconst drawerMenuItemTextStyles: IStackStyles = {\n root: {\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap'\n }\n};\n\nconst iconStyles: IStyle = {\n // Vertically center icons in the menu item. Using line-height does not work for centering fluent SVG icons.\n display: 'flex',\n alignItems: 'center',\n height: '100%',\n\n // This can be removed when we upgrade to fluent-react-icons v2 (that removes the inner span element)\n ' span': {\n display: 'flex',\n alignItems: 'center',\n height: '100%'\n }\n};\n\nconst secondaryTextStyles: IStyle = {\n // limit width for secondaryText in the menu item so it does not overlap with text on left.\n maxWidth: '50%'\n};\n"]}

package/dist/dist-esm/react-components/src/components/ErrorBar.d.ts CHANGED Viewed

@@ -169,6 +169,10 @@ export interface ErrorBarStrings {
      * Generic message for when screen sharing fails
      */
     startScreenSharingGeneric?: string;
+    /**
+     * Error bar string letting you know remote participants see a frozen stream for you.
+     */
+    cameraFrozenForRemoteParticipants?: string;
 }
 /**
  * All errors that can be shown in the {@link ErrorBar}.

package/dist/dist-esm/react-components/src/components/ErrorBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ErrorBar.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ErrorBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAoB,UAAU,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAEL,YAAY,EACZ,+BAA+B,EAC/B,YAAY,EACZ,mBAAmB,EACnB,cAAc,EACf,MAAM,SAAS,CAAC;AAsOjB;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAe,EAAE;;IAC5D,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC;IACnD,MAAM,OAAO,GAAG,MAAA,KAAK,CAAC,OAAO,mCAAI,aAAa,CAAC;IAE/C,sDAAsD;IACtD,yDAAyD;IACzD,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;IAEpD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAmB,EAAE,CAAC,CAAC;IAE7E,mGAAmG;IACnG,4EAA4E;IAC5E,SAAS,CACP,GAAG,EAAE,CAAC,kBAAkB,CAAC,+BAA+B,CAAC,KAAK,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC,EACrG,CAAC,KAAK,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAC7C,CAAC;IAEF,MAAM,MAAM,GAAG,YAAY,CACzB,KAAK,CAAC,mBAAmB,EACzB,eAAe,EACf,KAAK,CAAC,oBAAoB,CAAC,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAChE,CAAC;IAEF,OAAO,CACL,oBAAC,KAAK,kBAAY,iBAAiB,IAChC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACrB,oBAAC,UAAU,oBACL,KAAK,IACT,MAAM,EAAE;YACN,SAAS,EAAE;gBACT,SAAS,EAAE,QAAQ;aACpB;YACD,IAAI,EAAE;gBACJ,MAAM,EAAE,CAAC;aACV;YACD,OAAO,EAAE;gBACP,UAAU,EAAE,SAAS;aACtB;YACD,SAAS,EAAE;gBACT,MAAM,EAAE,CAAC;gBACT,UAAU,EAAE,QAAQ;aACrB;SACF,EACD,GAAG,EAAE,KAAK,CAAC,IAAI,EACf,cAAc,EAAE,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,EAC1C,mBAAmB,EAAE,mBAAmB,CAAC,KAAK,CAAC,IAAI,CAAC,EACpD,SAAS,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,YAAY,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC,EACzE,sBAAsB,EAAE,OAAO,CAAC,sBAAsB,EACtD,gBAAgB,EAAE,EAAE,QAAQ,EAAE,eAAe,EAAE,KAE9C,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CACT,CACd,CAAC,CACI,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport { IMessageBarProps, MessageBar, Stack } from '@fluentui/react';\nimport { useLocale } from '../localization';\nimport {\n DismissedError,\n dismissError,\n dropDismissalsForInactiveErrors,\n errorsToShow,\n messageBarIconProps,\n messageBarType\n} from './utils';\n\n/*\n Props for {@link ErrorBar}.\n \n In addition to the following, {@link ErrorBar} forwards all\n * {@link @fluentui/react#IMessageBarProps} to the underlying {@link @fluentui/react#MessageBar}.\n \n @public\n /\nexport interface ErrorBarProps extends IMessageBarProps {\n /\n Strings shown on the UI on errors.\n /\n strings?: ErrorBarStrings;\n\n /\n Currently active errors.\n /\n activeErrorMessages: ActiveErrorMessage[];\n\n /\n If set, errors with {@link ActiveErrorMessage.timestamp} older than the time this component is mounted\n * are not shown.\n \n This is useful when using the {@link ErrorBar} with a stateful client that handles more than one call\n * or chat thread. Set this prop to ignore errors from previous call or chat.\n \n @defaultValue false\n /\n ignorePremountErrors?: boolean;\n}\n\n/\n All strings that may be shown on the UI in the {@link ErrorBar}.\n \n @public\n /\nexport interface ErrorBarStrings {\n /\n Unable to reach Chat service.\n \n This can mean:\n * - Incorrect Azure Communication Services endpoint was provided.\n * - User's network connection is down.\n /\n unableToReachChatService: string;\n\n /\n User does not have access to the Chat service.\n * This usually means that either the Azure Communication Services endpiont or the token provided are incorrect.\n /\n accessDenied: string;\n\n /\n User is no longer on the thread.\n \n See also: {@link ErrorBarStrings.sendMessageNotInChatThread} for a more specific error.\n /\n userNotInChatThread: string;\n\n /\n Sending message failed because user is no longer on the thread.\n /\n sendMessageNotInChatThread: string;\n\n /\n A generic message when sending message fails.\n * Prefer more specific error strings when possible.\n /\n sendMessageGeneric: string;\n\n /\n A generic message when starting video fails.\n /\n startVideoGeneric: string;\n\n /\n A generic message when starting video fails.\n /\n stopVideoGeneric: string;\n\n /\n A generic message when muting microphone fails.\n /\n muteGeneric: string;\n\n /\n A generic message when unmuting microphone fails.\n /\n unmuteGeneric: string;\n\n /\n A generic message when starting screenshare fails.\n /\n startScreenShareGeneric: string;\n\n /\n A generic message when stopping screenshare fails.\n /\n stopScreenShareGeneric: string;\n\n /\n Message shown when poor network quality is detected during a call.\n /\n callNetworkQualityLow: string;\n\n /\n Message shown on failure to detect audio output devices.\n /\n callNoSpeakerFound: string;\n\n /\n Message shown on failure to detect audio input devices.\n /\n callNoMicrophoneFound: string;\n\n /\n Message shown when microphone can be enumerated but access is blocked by the system.\n /\n callMicrophoneAccessDenied: string;\n\n /\n Message shown when microphone can be enumerated but access is blocked by the system, for safari browsers\n /\n callMicrophoneAccessDeniedSafari: string;\n\n /\n Message shown when microphone is muted by the system (not by local or remote participants)\n /\n callMicrophoneMutedBySystem: string;\n\n /\n Message shown when microphone is unmuted by the system (not by local or remote participants).\n * This typically occurs if the system recovers from an unexpected mute.\n /\n callMicrophoneUnmutedBySystem: string;\n\n /\n Mac OS specific message shown when microphone can be enumerated but access is\n * blocked by the system.\n /\n callMacOsMicrophoneAccessDenied: string;\n\n /\n Message shown when poor network causes local video stream to be frozen.\n /\n callLocalVideoFreeze: string;\n\n /\n Message shown when camera can be enumerated but access is blocked by the system.\n /\n callCameraAccessDenied: string;\n\n /\n Message shown when camera can be enumerated but access is blocked by the system, for safari browsers\n /\n callCameraAccessDeniedSafari: string;\n\n /\n Message shown when local video fails to start because camera is already in use by\n * another applciation.\n /\n callCameraAlreadyInUse: string;\n\n /\n Message shown when local video is stopped by the system (not by local or remote participants)\n /\n callVideoStoppedBySystem: string;\n\n /\n Message shown when local video was recovered by the system (not by the local participant)\n /\n callVideoRecoveredBySystem: string;\n\n /\n Mac OS specific message shown when system denies access to camera.\n /\n callMacOsCameraAccessDenied: string;\n\n /\n Mac OS specific message shown when system denies sharing local screen on a call.\n /\n callMacOsScreenShareAccessDenied: string;\n /\n Dimiss errorbar button aria label read by screen reader accessibility tools\n /\n dismissButtonAriaLabel?: string;\n\n /\n An error message when joining a call fails.\n /\n failedToJoinCallGeneric?: string;\n\n /\n An error message when joining a call fails specifically due to an invalid meeting link.\n /\n failedToJoinCallInvalidMeetingLink?: string;\n /\n Generic message for when screen sharing fails\n /\n startScreenSharingGeneric?: string;\n}\n\n/\n All errors that can be shown in the {@link ErrorBar}.\n \n @public\n /\nexport type ErrorType = keyof ErrorBarStrings;\n\n/\n Active error messages to be shown via {@link ErrorBar}.\n \n @public\n /\nexport interface ActiveErrorMessage {\n /\n Type of error that is active.\n /\n type: ErrorType;\n /\n The latest timestamp when this error was observed.\n \n When available, this is used to track errors that have already been seen and dismissed\n * by the user.\n /\n timestamp?: Date;\n}\n\n/\n A component to show error messages on the UI.\n * All strings that can be shown are accepted as the {@link ErrorBarProps.strings} so that they can be localized.\n * Active errors are selected by {@link ErrorBarProps.activeErrorMessages}.\n \n This component internally tracks dismissed by the user.\n * * Errors that have an associated timestamp: The error is shown on the UI again if it occurs after being dismissed.\n * * Errors that do not have a timestamp: The error is dismissed until it disappears from the props.\n * If the error recurs, it is shown in the UI.\n \n Uses {@link @fluentui/react#MessageBar} UI element.\n \n @public\n */\nexport const ErrorBar = (props: ErrorBarProps): JSX.Element => {\n const localeStrings = useLocale().strings.errorBar;\n const strings = props.strings ?? localeStrings;\n\n // Timestamp for when this comopnent is first mounted.\n // Never updated through the lifecycle of this component.\n const mountTimestamp = useRef(new Date(Date.now()));\n\n const [dismissedErrors, setDismissedErrors] = useState<DismissedError[]>([]);\n\n // dropDismissalsForInactiveErrors only returns a new object if `dismissedErrors` actually changes.\n // Without this behaviour, this `useEffect` block would cause a render loop.\n useEffect(\n () => setDismissedErrors(dropDismissalsForInactiveErrors(props.activeErrorMessages, dismissedErrors)),\n [props.activeErrorMessages, dismissedErrors]\n );\n\n const toShow = errorsToShow(\n props.activeErrorMessages,\n dismissedErrors,\n props.ignorePremountErrors ? mountTimestamp.current : undefined\n );\n\n return (\n <Stack data-ui-id=\"error-bar-stack\">\n {toShow.map((error) => (\n <MessageBar\n {...props}\n styles={{\n innerText: {\n alignSelf: 'center'\n },\n icon: {\n height: 0\n },\n content: {\n lineHeight: 'inherit'\n },\n dismissal: {\n height: 0,\n paddingTop: '0.8rem'\n }\n }}\n key={error.type}\n messageBarType={messageBarType(error.type)}\n messageBarIconProps={messageBarIconProps(error.type)}\n onDismiss={() => setDismissedErrors(dismissError(dismissedErrors, error))}\n dismissButtonAriaLabel={strings.dismissButtonAriaLabel}\n dismissIconProps={{ iconName: 'ErrorBarClear' }}\n >\n {strings[error.type]}\n </MessageBar>\n ))}\n </Stack>\n );\n};\n"]}
1	+ {"version":3,"file":"ErrorBar.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ErrorBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAoB,UAAU,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAEL,YAAY,EACZ,+BAA+B,EAC/B,YAAY,EACZ,mBAAmB,EACnB,cAAc,EACf,MAAM,SAAS,CAAC;AA0OjB;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAe,EAAE;;IAC5D,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC;IACnD,MAAM,OAAO,GAAG,MAAA,KAAK,CAAC,OAAO,mCAAI,aAAa,CAAC;IAE/C,sDAAsD;IACtD,yDAAyD;IACzD,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;IAEpD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAmB,EAAE,CAAC,CAAC;IAE7E,mGAAmG;IACnG,4EAA4E;IAC5E,SAAS,CACP,GAAG,EAAE,CAAC,kBAAkB,CAAC,+BAA+B,CAAC,KAAK,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC,EACrG,CAAC,KAAK,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAC7C,CAAC;IAEF,MAAM,MAAM,GAAG,YAAY,CACzB,KAAK,CAAC,mBAAmB,EACzB,eAAe,EACf,KAAK,CAAC,oBAAoB,CAAC,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAChE,CAAC;IAEF,OAAO,CACL,oBAAC,KAAK,kBAAY,iBAAiB,IAChC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACrB,oBAAC,UAAU,oBACL,KAAK,IACT,MAAM,EAAE;YACN,SAAS,EAAE;gBACT,SAAS,EAAE,QAAQ;aACpB;YACD,IAAI,EAAE;gBACJ,MAAM,EAAE,CAAC;aACV;YACD,OAAO,EAAE;gBACP,UAAU,EAAE,SAAS;aACtB;YACD,SAAS,EAAE;gBACT,MAAM,EAAE,CAAC;gBACT,UAAU,EAAE,QAAQ;aACrB;SACF,EACD,GAAG,EAAE,KAAK,CAAC,IAAI,EACf,cAAc,EAAE,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,EAC1C,mBAAmB,EAAE,mBAAmB,CAAC,KAAK,CAAC,IAAI,CAAC,EACpD,SAAS,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,YAAY,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC,EACzE,sBAAsB,EAAE,OAAO,CAAC,sBAAsB,EACtD,gBAAgB,EAAE,EAAE,QAAQ,EAAE,eAAe,EAAE,KAE9C,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CACT,CACd,CAAC,CACI,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport { IMessageBarProps, MessageBar, Stack } from '@fluentui/react';\nimport { useLocale } from '../localization';\nimport {\n DismissedError,\n dismissError,\n dropDismissalsForInactiveErrors,\n errorsToShow,\n messageBarIconProps,\n messageBarType\n} from './utils';\n\n/*\n Props for {@link ErrorBar}.\n \n In addition to the following, {@link ErrorBar} forwards all\n * {@link @fluentui/react#IMessageBarProps} to the underlying {@link @fluentui/react#MessageBar}.\n \n @public\n /\nexport interface ErrorBarProps extends IMessageBarProps {\n /\n Strings shown on the UI on errors.\n /\n strings?: ErrorBarStrings;\n\n /\n Currently active errors.\n /\n activeErrorMessages: ActiveErrorMessage[];\n\n /\n If set, errors with {@link ActiveErrorMessage.timestamp} older than the time this component is mounted\n * are not shown.\n \n This is useful when using the {@link ErrorBar} with a stateful client that handles more than one call\n * or chat thread. Set this prop to ignore errors from previous call or chat.\n \n @defaultValue false\n /\n ignorePremountErrors?: boolean;\n}\n\n/\n All strings that may be shown on the UI in the {@link ErrorBar}.\n \n @public\n /\nexport interface ErrorBarStrings {\n /\n Unable to reach Chat service.\n \n This can mean:\n * - Incorrect Azure Communication Services endpoint was provided.\n * - User's network connection is down.\n /\n unableToReachChatService: string;\n\n /\n User does not have access to the Chat service.\n * This usually means that either the Azure Communication Services endpiont or the token provided are incorrect.\n /\n accessDenied: string;\n\n /\n User is no longer on the thread.\n \n See also: {@link ErrorBarStrings.sendMessageNotInChatThread} for a more specific error.\n /\n userNotInChatThread: string;\n\n /\n Sending message failed because user is no longer on the thread.\n /\n sendMessageNotInChatThread: string;\n\n /\n A generic message when sending message fails.\n * Prefer more specific error strings when possible.\n /\n sendMessageGeneric: string;\n\n /\n A generic message when starting video fails.\n /\n startVideoGeneric: string;\n\n /\n A generic message when starting video fails.\n /\n stopVideoGeneric: string;\n\n /\n A generic message when muting microphone fails.\n /\n muteGeneric: string;\n\n /\n A generic message when unmuting microphone fails.\n /\n unmuteGeneric: string;\n\n /\n A generic message when starting screenshare fails.\n /\n startScreenShareGeneric: string;\n\n /\n A generic message when stopping screenshare fails.\n /\n stopScreenShareGeneric: string;\n\n /\n Message shown when poor network quality is detected during a call.\n /\n callNetworkQualityLow: string;\n\n /\n Message shown on failure to detect audio output devices.\n /\n callNoSpeakerFound: string;\n\n /\n Message shown on failure to detect audio input devices.\n /\n callNoMicrophoneFound: string;\n\n /\n Message shown when microphone can be enumerated but access is blocked by the system.\n /\n callMicrophoneAccessDenied: string;\n\n /\n Message shown when microphone can be enumerated but access is blocked by the system, for safari browsers\n /\n callMicrophoneAccessDeniedSafari: string;\n\n /\n Message shown when microphone is muted by the system (not by local or remote participants)\n /\n callMicrophoneMutedBySystem: string;\n\n /\n Message shown when microphone is unmuted by the system (not by local or remote participants).\n * This typically occurs if the system recovers from an unexpected mute.\n /\n callMicrophoneUnmutedBySystem: string;\n\n /\n Mac OS specific message shown when microphone can be enumerated but access is\n * blocked by the system.\n /\n callMacOsMicrophoneAccessDenied: string;\n\n /\n Message shown when poor network causes local video stream to be frozen.\n /\n callLocalVideoFreeze: string;\n\n /\n Message shown when camera can be enumerated but access is blocked by the system.\n /\n callCameraAccessDenied: string;\n\n /\n Message shown when camera can be enumerated but access is blocked by the system, for safari browsers\n /\n callCameraAccessDeniedSafari: string;\n\n /\n Message shown when local video fails to start because camera is already in use by\n * another applciation.\n /\n callCameraAlreadyInUse: string;\n\n /\n Message shown when local video is stopped by the system (not by local or remote participants)\n /\n callVideoStoppedBySystem: string;\n\n /\n Message shown when local video was recovered by the system (not by the local participant)\n /\n callVideoRecoveredBySystem: string;\n\n /\n Mac OS specific message shown when system denies access to camera.\n /\n callMacOsCameraAccessDenied: string;\n\n /\n Mac OS specific message shown when system denies sharing local screen on a call.\n /\n callMacOsScreenShareAccessDenied: string;\n /\n Dimiss errorbar button aria label read by screen reader accessibility tools\n /\n dismissButtonAriaLabel?: string;\n\n /\n An error message when joining a call fails.\n /\n failedToJoinCallGeneric?: string;\n\n /\n An error message when joining a call fails specifically due to an invalid meeting link.\n /\n failedToJoinCallInvalidMeetingLink?: string;\n /\n Generic message for when screen sharing fails\n /\n startScreenSharingGeneric?: string;\n /\n Error bar string letting you know remote participants see a frozen stream for you.\n /\n cameraFrozenForRemoteParticipants?: string;\n}\n\n/\n All errors that can be shown in the {@link ErrorBar}.\n \n @public\n /\nexport type ErrorType = keyof ErrorBarStrings;\n\n/\n Active error messages to be shown via {@link ErrorBar}.\n \n @public\n /\nexport interface ActiveErrorMessage {\n /\n Type of error that is active.\n /\n type: ErrorType;\n /\n The latest timestamp when this error was observed.\n \n When available, this is used to track errors that have already been seen and dismissed\n * by the user.\n /\n timestamp?: Date;\n}\n\n/\n A component to show error messages on the UI.\n * All strings that can be shown are accepted as the {@link ErrorBarProps.strings} so that they can be localized.\n * Active errors are selected by {@link ErrorBarProps.activeErrorMessages}.\n \n This component internally tracks dismissed by the user.\n * * Errors that have an associated timestamp: The error is shown on the UI again if it occurs after being dismissed.\n * * Errors that do not have a timestamp: The error is dismissed until it disappears from the props.\n * If the error recurs, it is shown in the UI.\n \n Uses {@link @fluentui/react#MessageBar} UI element.\n \n @public\n */\nexport const ErrorBar = (props: ErrorBarProps): JSX.Element => {\n const localeStrings = useLocale().strings.errorBar;\n const strings = props.strings ?? localeStrings;\n\n // Timestamp for when this comopnent is first mounted.\n // Never updated through the lifecycle of this component.\n const mountTimestamp = useRef(new Date(Date.now()));\n\n const [dismissedErrors, setDismissedErrors] = useState<DismissedError[]>([]);\n\n // dropDismissalsForInactiveErrors only returns a new object if `dismissedErrors` actually changes.\n // Without this behaviour, this `useEffect` block would cause a render loop.\n useEffect(\n () => setDismissedErrors(dropDismissalsForInactiveErrors(props.activeErrorMessages, dismissedErrors)),\n [props.activeErrorMessages, dismissedErrors]\n );\n\n const toShow = errorsToShow(\n props.activeErrorMessages,\n dismissedErrors,\n props.ignorePremountErrors ? mountTimestamp.current : undefined\n );\n\n return (\n <Stack data-ui-id=\"error-bar-stack\">\n {toShow.map((error) => (\n <MessageBar\n {...props}\n styles={{\n innerText: {\n alignSelf: 'center'\n },\n icon: {\n height: 0\n },\n content: {\n lineHeight: 'inherit'\n },\n dismissal: {\n height: 0,\n paddingTop: '0.8rem'\n }\n }}\n key={error.type}\n messageBarType={messageBarType(error.type)}\n messageBarIconProps={messageBarIconProps(error.type)}\n onDismiss={() => setDismissedErrors(dismissError(dismissedErrors, error))}\n dismissButtonAriaLabel={strings.dismissButtonAriaLabel}\n dismissIconProps={{ iconName: 'ErrorBarClear' }}\n >\n {strings[error.type]}\n </MessageBar>\n ))}\n </Stack>\n );\n};\n"]}

package/dist/dist-esm/react-components/src/components/FileDownloadCards.d.ts CHANGED Viewed

@@ -1,9 +1,15 @@
 /// <reference types="react" />
+/**
+ * @beta
+ */
+export declare type FileMetadataAttachmentType = 'fileSharing' | /* @conditional-compile-remove(teams-inline-images) */ 'teamsInlineImage' | 'unknown';
 /**
  * Meta Data containing information about the uploaded file.
  * @beta
  */
 export interface FileMetadata {
+    attachmentType: FileMetadataAttachmentType;
+    id: string;
     /**
      * File name to be displayed.
      */
@@ -18,6 +24,13 @@ export interface FileMetadata {
      * Download URL for the file.
      */
     url: string;
+    previewUrl?: string;
+}
+/**
+ * @beta
+ */
+export interface AttachmentDownloadResult {
+    blobUrl: string;
 }
 /**
  * Strings of _FileDownloadCards that can be overridden.

package/dist/dist-esm/react-components/src/components/FileDownloadCards.js CHANGED Viewed

@@ -56,7 +56,11 @@ export const _FileDownloadCards = (props) => {
             }
         }
     }), [props]);
-    if (!fileMetadata || fileMetadata.length === 0) {
+    // Its safe to assume that if the first item in the fileMetadata is not a fileSharing type we don't want to display the FileDownloadCard.
+    // Since you can't have both fileSharing and teamsInlineImage in the same message.
+    if (!fileMetadata ||
+        fileMetadata.length === 0 ||
+        /* @conditional-compile-remove(teams-inline-images) */ fileMetadata[0].attachmentType !== 'fileSharing') {
         return React.createElement(React.Fragment, null);
     }
     return (React.createElement("div", { style: fileDownloadCardsStyle, "data-ui-id": "file-download-card-group" },

package/dist/dist-esm/react-components/src/components/FileDownloadCards.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FileDownloadCards.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/FileDownloadCards.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { Icon, IconButton, Spinner, SpinnerSize } from '@fluentui/react';\nimport React, { useCallback, useState } from 'react';\nimport { useMemo } from 'react';\n/* @conditional-compile-remove(file-sharing) /\nimport { useLocale } from '../localization';\nimport { _FileCard } from './FileCard';\nimport { _FileCardGroup } from './FileCardGroup';\nimport { iconButtonClassName } from './styles/IconButton.styles';\n\n/\n Meta Data containing information about the uploaded file.\n * @beta\n /\nexport interface FileMetadata {\n /\n File name to be displayed.\n /\n name: string;\n /\n Extension is used for rendering the file icon.\n * An unknown extension will be rendered as a generic icon.\n * Example: `jpeg`\n /\n extension: string;\n /\n Download URL for the file.\n /\n url: string;\n}\n\n/\n Strings of _FileDownloadCards that can be overridden.\n \n @internal\n /\nexport interface _FileDownloadCardsStrings {\n /* Aria label to notify user when focus is on file download button. /\n downloadFile: string;\n}\n\n/\n @beta\n * A file download error returned via a {@link FileDownloadHandler}.\n * This error message is used to render an error message in the UI.\n /\nexport interface FileDownloadError {\n /* The error message to display in the UI /\n errorMessage: string;\n}\n\n/\n @beta\n \n A callback function for handling file downloads.\n * The function needs to return a promise that resolves to a file download URL.\n * If the promise is rejected, the {@link Error.message} will be used to display an error message to the user.\n \n @example\n * ```ts\n * const fileDownloadHandler: FileDownloadHandler = async (userId, fileData) => {\n * if (isUnauthorizedUser(userId)) {\n * return { errorMessage: 'You don’t have permission to download this file.' };\n * } else {\n * return new URL(fileData.url);\n * }\n * }\n \n const App = () => (\n * <ChatComposite\n * ...\n * fileSharing={{\n * fileDownloadHandler: fileDownloadHandler\n * }}\n * />\n * )\n \n ```\n * @param userId - The user ID of the user downloading the file.\n * @param fileMetadata - The {@link FileMetadata} containing file `url`, `extension` and `name`.\n /\nexport type FileDownloadHandler = (userId: string, fileMetadata: FileMetadata) => Promise<URL \| FileDownloadError>;\n\n/\n @internal\n /\nexport interface _FileDownloadCards {\n /\n User id of the local participant\n /\n userId: string;\n /\n A chat message metadata that inculdes file metadata\n /\n fileMetadata: FileMetadata[];\n /\n A function of type {@link FileDownloadHandler} for handling file downloads.\n * If the function is not specified, the file's `url` will be opened in a new tab to\n * initiate the download.\n /\n downloadHandler?: FileDownloadHandler;\n /\n Optional callback that runs if downloadHandler returns {@link FileDownloadError}.\n /\n onDownloadErrorMessage?: (errMsg: string) => void;\n /\n Optional arialabel strings for file download cards\n /\n strings?: _FileDownloadCardsStrings;\n}\n\nconst fileDownloadCardsStyle = {\n marginTop: '0.25rem'\n};\n\nconst actionIconStyle = { height: '1rem' };\n\n/\n @internal\n /\nexport const _FileDownloadCards = (props: _FileDownloadCards): JSX.Element => {\n const { userId, fileMetadata } = props;\n const [showSpinner, setShowSpinner] = useState(false);\n const localeStrings = useLocaleStringsTrampoline();\n\n const downloadFileButtonString = useMemo(\n () => () => {\n return props.strings?.downloadFile ?? localeStrings.downloadFile;\n // Return download button without aria label\n return props.strings?.downloadFile ?? '';\n },\n [props.strings?.downloadFile, localeStrings.downloadFile]\n );\n\n const fileDownloadHandler = useCallback(\n async (userId, file) => {\n if (!props.downloadHandler) {\n window.open(file.url, '_blank', 'noopener,noreferrer');\n } else {\n setShowSpinner(true);\n try {\n const response = await props.downloadHandler(userId, file);\n setShowSpinner(false);\n if (response instanceof URL) {\n window.open(response.toString(), '_blank', 'noopener,noreferrer');\n } else {\n props.onDownloadErrorMessage && props.onDownloadErrorMessage(response.errorMessage);\n }\n } finally {\n setShowSpinner(false);\n }\n }\n },\n [props]\n );\n\n if (!fileMetadata \|\| fileMetadata.length === 0) {\n return <></>;\n }\n\n return (\n <div style={fileDownloadCardsStyle} data-ui-id=\"file-download-card-group\">\n <_FileCardGroup>\n {fileMetadata &&\n fileMetadata.map((file) => (\n <_FileCard\n fileName={file.name}\n key={file.name}\n fileExtension={file.extension}\n actionIcon={\n showSpinner ? (\n <Spinner size={SpinnerSize.medium} aria-live={'polite'} role={'status'} />\n ) : (\n <IconButton className={iconButtonClassName} ariaLabel={downloadFileButtonString()}>\n <DownloadIconTrampoline />\n </IconButton>\n )\n }\n actionHandler={() => fileDownloadHandler(userId, file)}\n />\n ))}\n </_FileCardGroup>\n </div>\n );\n};\n\n/\n @private\n /\nconst DownloadIconTrampoline = (): JSX.Element => {\n // @conditional-compile-remove(file-sharing)\n return <Icon data-ui-id=\"file-download-card-download-icon\" iconName=\"DownloadFile\" style={actionIconStyle} />;\n // Return _some_ available icon, as the real icon is beta-only.\n return <Icon iconName=\"EditBoxCancel\" style={actionIconStyle} />;\n};\n\nconst useLocaleStringsTrampoline = (): _FileDownloadCardsStrings => {\n / @conditional-compile-remove(file-sharing) */\n return useLocale().strings.messageThread;\n return { downloadFile: '' };\n};\n"]}
1	+ {"version":3,"file":"FileDownloadCards.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/FileDownloadCards.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { Icon, IconButton, Spinner, SpinnerSize } from '@fluentui/react';\nimport React, { useCallback, useState } from 'react';\nimport { useMemo } from 'react';\n/* @conditional-compile-remove(file-sharing) /\nimport { useLocale } from '../localization';\nimport { _FileCard } from './FileCard';\nimport { _FileCardGroup } from './FileCardGroup';\nimport { iconButtonClassName } from './styles/IconButton.styles';\n\n/ @conditional-compile-remove(teams-inline-images) /\n/\n @beta\n /\nexport type FileMetadataAttachmentType =\n \| 'fileSharing'\n \| / @conditional-compile-remove(teams-inline-images) / 'teamsInlineImage'\n \| 'unknown';\n\n/\n Meta Data containing information about the uploaded file.\n * @beta\n /\nexport interface FileMetadata {\n / @conditional-compile-remove(teams-inline-images) /\n /\n * Attachment type of the file.\n * Possible values {@link FileDownloadHandler}.\n /\n attachmentType: FileMetadataAttachmentType;\n / @conditional-compile-remove(teams-inline-images) /\n /\n * Unique ID of the file.\n /\n id: string;\n /\n File name to be displayed.\n /\n name: string;\n /\n Extension is used for rendering the file icon.\n * An unknown extension will be rendered as a generic icon.\n * Example: `jpeg`\n /\n extension: string;\n /\n Download URL for the file.\n /\n url: string;\n / @conditional-compile-remove(teams-inline-images) /\n /\n * Preview URL for the file.\n * Used in the message bubble for inline images.\n /\n previewUrl?: string;\n}\n\n/ @conditional-compile-remove(teams-inline-images) /\n/\n @beta\n /\nexport interface AttachmentDownloadResult {\n blobUrl: string;\n}\n\n/\n Strings of _FileDownloadCards that can be overridden.\n \n @internal\n /\nexport interface _FileDownloadCardsStrings {\n /* Aria label to notify user when focus is on file download button. /\n downloadFile: string;\n}\n\n/\n @beta\n * A file download error returned via a {@link FileDownloadHandler}.\n * This error message is used to render an error message in the UI.\n /\nexport interface FileDownloadError {\n /* The error message to display in the UI /\n errorMessage: string;\n}\n\n/\n @beta\n \n A callback function for handling file downloads.\n * The function needs to return a promise that resolves to a file download URL.\n * If the promise is rejected, the {@link Error.message} will be used to display an error message to the user.\n \n @example\n * ```ts\n * const fileDownloadHandler: FileDownloadHandler = async (userId, fileData) => {\n * if (isUnauthorizedUser(userId)) {\n * return { errorMessage: 'You don’t have permission to download this file.' };\n * } else {\n * return new URL(fileData.url);\n * }\n * }\n \n const App = () => (\n * <ChatComposite\n * ...\n * fileSharing={{\n * fileDownloadHandler: fileDownloadHandler\n * }}\n * />\n * )\n \n ```\n * @param userId - The user ID of the user downloading the file.\n * @param fileMetadata - The {@link FileMetadata} containing file `url`, `extension` and `name`.\n /\nexport type FileDownloadHandler = (userId: string, fileMetadata: FileMetadata) => Promise<URL \| FileDownloadError>;\n\n/\n @internal\n /\nexport interface _FileDownloadCards {\n /\n User id of the local participant\n /\n userId: string;\n /\n A chat message metadata that inculdes file metadata\n /\n fileMetadata: FileMetadata[];\n /\n A function of type {@link FileDownloadHandler} for handling file downloads.\n * If the function is not specified, the file's `url` will be opened in a new tab to\n * initiate the download.\n /\n downloadHandler?: FileDownloadHandler;\n /\n Optional callback that runs if downloadHandler returns {@link FileDownloadError}.\n /\n onDownloadErrorMessage?: (errMsg: string) => void;\n /\n Optional arialabel strings for file download cards\n /\n strings?: _FileDownloadCardsStrings;\n}\n\nconst fileDownloadCardsStyle = {\n marginTop: '0.25rem'\n};\n\nconst actionIconStyle = { height: '1rem' };\n\n/\n @internal\n /\nexport const _FileDownloadCards = (props: _FileDownloadCards): JSX.Element => {\n const { userId, fileMetadata } = props;\n const [showSpinner, setShowSpinner] = useState(false);\n const localeStrings = useLocaleStringsTrampoline();\n\n const downloadFileButtonString = useMemo(\n () => () => {\n return props.strings?.downloadFile ?? localeStrings.downloadFile;\n // Return download button without aria label\n return props.strings?.downloadFile ?? '';\n },\n [props.strings?.downloadFile, localeStrings.downloadFile]\n );\n\n const fileDownloadHandler = useCallback(\n async (userId, file) => {\n if (!props.downloadHandler) {\n window.open(file.url, '_blank', 'noopener,noreferrer');\n } else {\n setShowSpinner(true);\n try {\n const response = await props.downloadHandler(userId, file);\n setShowSpinner(false);\n if (response instanceof URL) {\n window.open(response.toString(), '_blank', 'noopener,noreferrer');\n } else {\n props.onDownloadErrorMessage && props.onDownloadErrorMessage(response.errorMessage);\n }\n } finally {\n setShowSpinner(false);\n }\n }\n },\n [props]\n );\n // Its safe to assume that if the first item in the fileMetadata is not a fileSharing type we don't want to display the FileDownloadCard.\n // Since you can't have both fileSharing and teamsInlineImage in the same message.\n if (\n !fileMetadata \|\|\n fileMetadata.length === 0 \|\|\n / @conditional-compile-remove(teams-inline-images) / fileMetadata[0].attachmentType !== 'fileSharing'\n ) {\n return <></>;\n }\n\n return (\n <div style={fileDownloadCardsStyle} data-ui-id=\"file-download-card-group\">\n <_FileCardGroup>\n {fileMetadata &&\n fileMetadata.map((file) => (\n <_FileCard\n fileName={file.name}\n key={file.name}\n fileExtension={file.extension}\n actionIcon={\n showSpinner ? (\n <Spinner size={SpinnerSize.medium} aria-live={'polite'} role={'status'} />\n ) : (\n <IconButton className={iconButtonClassName} ariaLabel={downloadFileButtonString()}>\n <DownloadIconTrampoline />\n </IconButton>\n )\n }\n actionHandler={() => fileDownloadHandler(userId, file)}\n />\n ))}\n </_FileCardGroup>\n </div>\n );\n};\n\n/\n @private\n /\nconst DownloadIconTrampoline = (): JSX.Element => {\n // @conditional-compile-remove(file-sharing)\n return <Icon data-ui-id=\"file-download-card-download-icon\" iconName=\"DownloadFile\" style={actionIconStyle} />;\n // Return _some_ available icon, as the real icon is beta-only.\n return <Icon iconName=\"EditBoxCancel\" style={actionIconStyle} />;\n};\n\nconst useLocaleStringsTrampoline = (): _FileDownloadCardsStrings => {\n / @conditional-compile-remove(file-sharing) */\n return useLocale().strings.messageThread;\n return { downloadFile: '' };\n};\n"]}

package/dist/dist-esm/react-components/src/components/GridLayout.js CHANGED Viewed

@@ -30,7 +30,7 @@ export const GridLayout = (props) => {
         return calculateGridProps(numberOfChildren, currentWidth, currentHeight);
     }, [numberOfChildren, currentWidth, currentHeight]);
     const cssGridStyles = useMemo(() => createGridStyles(numberOfChildren, gridProps), [numberOfChildren, gridProps]);
-    return (React.createElement("div", { ref: containerRef, className: mergeStyles(gridLayoutStyle, cssGridStyles, styles === null || styles === void 0 ? void 0 : styles.root) }, children));
+    return (React.createElement("div", { ref: containerRef, className: mergeStyles(gridLayoutStyle, cssGridStyles, styles === null || styles === void 0 ? void 0 : styles.root), "data-ui-id": "grid-layout" }, children));
 };
 /**
  * The cell aspect ratio we aim for in a grid

package/dist/dist-esm/react-components/src/components/GridLayout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GridLayout.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/GridLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStyle, mergeStyles } from '@fluentui/react';\nimport React, { useRef, useEffect, useState, useMemo } from 'react';\nimport { BaseCustomStyles } from '../types';\nimport { gridLayoutStyle } from './styles/GridLayout.styles';\n\n/*\n Props for {@link GridLayout}.\n \n @public\n /\nexport interface GridLayoutProps {\n children: React.ReactNode;\n /\n Allows users to pass in an object contains custom CSS styles.\n * @Example\n * ```\n * <GridLayout styles={{ root: { background: 'blue' } }} />\n * ```\n /\n styles?: BaseCustomStyles;\n}\n\n/\n {@link GridLayout} Component Styles.\n * @public\n /\nexport interface GridLayoutStyles extends BaseCustomStyles {\n /* Styles for each child of {@link GridLayout} /\n children?: IStyle;\n}\n\n/\n A component to lay out audio / video participants tiles in a call.\n \n @public\n /\nexport const GridLayout = (props: GridLayoutProps): JSX.Element => {\n const { children, styles } = props;\n const numberOfChildren = React.Children.count(children);\n\n const [currentWidth, setCurrentWidth] = useState(0);\n const [currentHeight, setCurrentHeight] = useState(0);\n\n const containerRef = useRef<HTMLDivElement>(null);\n\n const observer = useRef(\n new ResizeObserver((entries): void => {\n const { width, height } = entries[0].contentRect;\n setCurrentWidth(width);\n setCurrentHeight(height);\n })\n );\n\n useEffect(() => {\n if (containerRef.current) {\n observer.current.observe(containerRef.current);\n }\n const currentObserver = observer.current;\n return () => currentObserver.disconnect();\n }, [observer, containerRef]);\n\n const gridProps = useMemo(() => {\n return calculateGridProps(numberOfChildren, currentWidth, currentHeight);\n }, [numberOfChildren, currentWidth, currentHeight]);\n\n const cssGridStyles = useMemo(() => createGridStyles(numberOfChildren, gridProps), [numberOfChildren, gridProps]);\n\n return (\n <div ref={containerRef} className={mergeStyles(gridLayoutStyle, cssGridStyles, styles?.root)}>\n {children}\n </div>\n );\n};\n\n/\n The cell aspect ratio we aim for in a grid\n /\nconst TARGET_CELL_ASPECT_RATIO = 16 / 9;\n/\n The minimum cell aspect ratio we allow\n /\nconst MINIMUM_CELL_ASPECT_RATIO_ALLOWED = 8 / 9;\n\nconst isCloserThan = (a: number, b: number, target: number): boolean => {\n return Math.abs(target - a) < Math.abs(target - b);\n};\n\n/\n Properties to describe a grid. The number of rows, number of columns and whether it fills horizontally or vertically.\n \n @Example\n * ```\n * ______________________\n * \|_______\|_______\|______\|\n * \|___________\|__________\| This grid has 2 rows, 3 columns and fills horizontally.\n * ______________\n * \| \| \| \|\n * \|____\|____\| \|\n * \| \| \| \|\n * \|____\|____\|____\| This grid has 2 rows, 3 columns and fills vertically.\n * _______________\n * \| \| \|\n * \|_______\|_______\|\n * \| \| \| If all cells are equal, we default the fill direction as horizontal.\n * \|_______\|_______\| This grid has 2 rows, 2 columns and fills horizontally.\n * ```\n /\ntype GridProps = {\n fillDirection: FillDirection;\n rows: number;\n columns: number;\n};\n\ntype FillDirection = 'horizontal' \| 'vertical';\n\n/\n Get the best GridProps to place a number of items in a grid as evenly as possible given the width and height of the grid\n * @param numberOfItems - number of items to place in grid\n * @param width - width of grid\n * @param height - height of grid\n * @returns GridProps\n /\nexport const calculateGridProps = (numberOfItems: number, width: number, height: number): GridProps => {\n if (numberOfItems <= 0) {\n return { fillDirection: 'horizontal', rows: 0, columns: 0 };\n }\n // If width or height are 0 then we return rows and column evenly\n if (width <= 0 \|\| height <= 0) {\n return {\n fillDirection: 'horizontal',\n rows: Math.ceil(Math.sqrt(numberOfItems)),\n columns: Math.ceil(Math.sqrt(numberOfItems))\n };\n }\n const aspectRatio = width / height;\n // Approximate how many rows to divide the grid to achieve cells close to the TARGET_CELL_ASPECT_RATIO\n let rows = Math.floor(Math.sqrt((TARGET_CELL_ASPECT_RATIO / aspectRatio) numberOfItems)) \|\| 1;\n // Make sure rows do not exceed numberOfItems\n rows = Math.min(rows, numberOfItems);\n // Given the rows, get the minimum columns needed to create enough cells for the number of items\n let columns = Math.ceil(numberOfItems / rows);\n\n // Default fill direction to horizontal\n let fillDirection: 'horizontal' \| 'vertical' = 'horizontal';\n\n while (rows < numberOfItems) {\n // If cell aspect ratio is less than MINIMUM_CELL_ASPECT_RATIO_ALLOWED then try more rows\n if ((rows / columns) * aspectRatio < MINIMUM_CELL_ASPECT_RATIO_ALLOWED) {\n rows += 1;\n columns = Math.ceil(numberOfItems / rows);\n continue;\n }\n if (numberOfItems < rows * columns) {\n // We need to check that stretching columns vertically will result in only one less cell in stretched columns.\n // Likewise, we need to check that stretching rows horizonally will result in only one less cell in stretched rows.\n // e.g. For 4 rows, 2 columns, but only 6 items, we cannot stretch vertically because that would result in a\n // column of 2 cells which is less by more than 1 compared to the unstretched column.\n // _________\n // \|____\| \|\n // \|____\|____\|\n // \|____\| \|\n // \|____\|____\|\n\n const canStretchVertically = numberOfItems >= rows + (columns - 1) * (rows - 1);\n const canStretchHorizontally = numberOfItems >= columns + (rows - 1) * (columns - 1);\n if (!canStretchVertically && !canStretchHorizontally) {\n rows += 1;\n columns = Math.ceil(numberOfItems / rows);\n continue;\n } else if (!canStretchVertically) {\n break;\n } else if (!canStretchHorizontally) {\n fillDirection = 'vertical';\n break;\n }\n\n // We need to figure out whether the big cells should stretch horizontally or vertically\n // to fill in the empty spaces\n // e.g. For 2 rows, 3 columns, but only 5 items, we need to choose whether to stretch cells\n // horizontally or vertically\n // ______________________ _______________________\n // \| \| \| \| \| \| \| \|\n // \|_______\|_______\|______\| \|_______\|_______\| \|\n // \| \| \| \| \| \| \|\n // \|___________\|__________\| \|_______\|_______\|_______\|\n\n // Calculate the aspect ratio of big cells stretched horizontally\n const horizontallyStretchedCellRatio = (rows / (columns - 1)) * aspectRatio;\n // Calculate the aspect ratio of big cells stretched vertically\n const verticallyStretchedCellRatio = ((rows - 1) / columns) * aspectRatio;\n // We know the horizontally stretched cells aspect ratio is higher than MINIMUM_CELL_ASPECT_RATIO_ALLOWED. If vertically stretched cells\n // is also higher than the MINIMUM_CELL_ASPECT_RATIO_ALLOWED, then choose which aspect ratio is better.\n if (verticallyStretchedCellRatio >= MINIMUM_CELL_ASPECT_RATIO_ALLOWED) {\n // If vertically stetched cell has an aspect ratio closer to TARGET_CELL_ASPECT_RATIO then change the fill direction to vertical\n if (isCloserThan(verticallyStretchedCellRatio, horizontallyStretchedCellRatio, TARGET_CELL_ASPECT_RATIO)) {\n fillDirection = 'vertical';\n }\n }\n }\n break;\n }\n\n return { fillDirection, rows, columns };\n};\n\n/*\n Creates a styles classname with CSS Grid related styles given GridProps and the number of items to distribute as evenly as possible.\n * @param numberOfItems - number of items to place in grid\n * @param gridProps - GridProps that define the number of rows, number of columns, and the fill direction\n * @returns - classname\n /\nexport const createGridStyles = (numberOfItems: number, gridProps: GridProps): string => {\n const isHorizontal = gridProps.fillDirection === 'horizontal';\n // Blocks are either rows or columns depending on whether we fill horizontally or vertically. Each block may differ in the number of cells.\n const blocks = isHorizontal ? gridProps.rows : gridProps.columns;\n const smallCellsPerBlock = Math.ceil(numberOfItems / blocks);\n const bigCellsPerBlock = Math.floor(numberOfItems / blocks);\n const numBigCells = (gridProps.rows gridProps.columns - numberOfItems) * bigCellsPerBlock;\n // Get grid units\n // e.g. If some blocks have 2 big cells while others have 3 small cells, we need to work with 6 units per block\n const units = smallCellsPerBlock * bigCellsPerBlock;\n\n const gridStyles = isHorizontal\n ? {\n gridTemplateColumns: `repeat(${units}, minmax(0, 1fr))`,\n gridTemplateRows: `repeat(${blocks}, minmax(0, 1fr))`,\n gridAutoFlow: 'row'\n }\n : {\n gridTemplateColumns: `repeat(${blocks}, minmax(0, 1fr))`,\n gridTemplateRows: `repeat(${units}, minmax(0, 1fr))`,\n gridAutoFlow: 'column'\n };\n\n const smallCellStyle = isHorizontal\n ? {\n '> ': {\n gridColumn: `auto / span ${units / smallCellsPerBlock}`\n }\n }\n : {\n '> ': {\n gridRow: `auto / span ${units / smallCellsPerBlock}`\n }\n };\n\n // If there are big cells, we are choosing to place the latest children into the big cells.\n // That is why we use the '> :nth-last-child(-n + ${numBigCells})' CSS selector below\n const bigCellStyle = numBigCells\n ? {\n [`> :nth-last-child(-n + ${numBigCells})`]: isHorizontal\n ? {\n gridColumn: `auto / span ${units / bigCellsPerBlock}`\n }\n : {\n gridRow: `auto / span ${units / bigCellsPerBlock}`\n }\n }\n : {};\n\n return mergeStyles(gridStyles, smallCellStyle, bigCellStyle);\n};\n"]}
1	+ {"version":3,"file":"GridLayout.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/GridLayout.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEpE,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AA4B7D;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAe,EAAE;IAChE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACnC,MAAM,gBAAgB,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAExD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACpD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEtD,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAElD,MAAM,QAAQ,GAAG,MAAM,CACrB,IAAI,cAAc,CAAC,CAAC,OAAO,EAAQ,EAAE;QACnC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC;QACjD,eAAe,CAAC,KAAK,CAAC,CAAC;QACvB,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAC3B,CAAC,CAAC,CACH,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;SAChD;QACD,MAAM,eAAe,GAAG,QAAQ,CAAC,OAAO,CAAC;QACzC,OAAO,GAAG,EAAE,CAAC,eAAe,CAAC,UAAU,EAAE,CAAC;IAC5C,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC;IAE7B,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,OAAO,kBAAkB,CAAC,gBAAgB,EAAE,YAAY,EAAE,aAAa,CAAC,CAAC;IAC3E,CAAC,EAAE,CAAC,gBAAgB,EAAE,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC;IAEpD,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,gBAAgB,EAAE,SAAS,CAAC,EAAE,CAAC,gBAAgB,EAAE,SAAS,CAAC,CAAC,CAAC;IAElH,OAAO,CACL,6BACE,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,WAAW,CAAC,eAAe,EAAE,aAAa,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,gBACzD,aAAa,IAEvB,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,wBAAwB,GAAG,EAAE,GAAG,CAAC,CAAC;AACxC;;GAEG;AACH,MAAM,iCAAiC,GAAG,CAAC,GAAG,CAAC,CAAC;AAEhD,MAAM,YAAY,GAAG,CAAC,CAAS,EAAE,CAAS,EAAE,MAAc,EAAW,EAAE;IACrE,OAAO,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;AACrD,CAAC,CAAC;AA8BF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,aAAqB,EAAE,KAAa,EAAE,MAAc,EAAa,EAAE;IACpG,IAAI,aAAa,IAAI,CAAC,EAAE;QACtB,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;KAC7D;IACD,iEAAiE;IACjE,IAAI,KAAK,IAAI,CAAC,IAAI,MAAM,IAAI,CAAC,EAAE;QAC7B,OAAO;YACL,aAAa,EAAE,YAAY;YAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YACzC,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;SAC7C,CAAC;KACH;IACD,MAAM,WAAW,GAAG,KAAK,GAAG,MAAM,CAAC;IACnC,sGAAsG;IACtG,IAAI,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,wBAAwB,GAAG,WAAW,CAAC,GAAG,aAAa,CAAC,CAAC,IAAI,CAAC,CAAC;IAChG,6CAA6C;IAC7C,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC;IACrC,gGAAgG;IAChG,IAAI,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,CAAC;IAE9C,uCAAuC;IACvC,IAAI,aAAa,GAA8B,YAAY,CAAC;IAE5D,OAAO,IAAI,GAAG,aAAa,EAAE;QAC3B,yFAAyF;QACzF,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC,GAAG,WAAW,GAAG,iCAAiC,EAAE;YACtE,IAAI,IAAI,CAAC,CAAC;YACV,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,CAAC;YAC1C,SAAS;SACV;QACD,IAAI,aAAa,GAAG,IAAI,GAAG,OAAO,EAAE;YAClC,8GAA8G;YAC9G,mHAAmH;YACnH,4GAA4G;YAC5G,qFAAqF;YACrF,aAAa;YACb,cAAc;YACd,cAAc;YACd,cAAc;YACd,cAAc;YAEd,MAAM,oBAAoB,GAAG,aAAa,IAAI,IAAI,GAAG,CAAC,OAAO,GAAG,CAAC,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;YAChF,MAAM,sBAAsB,GAAG,aAAa,IAAI,OAAO,GAAG,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC;YACrF,IAAI,CAAC,oBAAoB,IAAI,CAAC,sBAAsB,EAAE;gBACpD,IAAI,IAAI,CAAC,CAAC;gBACV,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,CAAC;gBAC1C,SAAS;aACV;iBAAM,IAAI,CAAC,oBAAoB,EAAE;gBAChC,MAAM;aACP;iBAAM,IAAI,CAAC,sBAAsB,EAAE;gBAClC,aAAa,GAAG,UAAU,CAAC;gBAC3B,MAAM;aACP;YAED,wFAAwF;YACxF,8BAA8B;YAC9B,2FAA2F;YAC3F,wDAAwD;YACxD,gEAAgE;YAChE,iEAAiE;YACjE,iEAAiE;YACjE,iEAAiE;YACjE,iEAAiE;YAEjE,iEAAiE;YACjE,MAAM,8BAA8B,GAAG,CAAC,IAAI,GAAG,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC;YAC5E,+DAA+D;YAC/D,MAAM,4BAA4B,GAAG,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG,OAAO,CAAC,GAAG,WAAW,CAAC;YAC1E,wIAAwI;YACxI,uGAAuG;YACvG,IAAI,4BAA4B,IAAI,iCAAiC,EAAE;gBACrE,gIAAgI;gBAChI,IAAI,YAAY,CAAC,4BAA4B,EAAE,8BAA8B,EAAE,wBAAwB,CAAC,EAAE;oBACxG,aAAa,GAAG,UAAU,CAAC;iBAC5B;aACF;SACF;QACD,MAAM;KACP;IAED,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AAC1C,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,aAAqB,EAAE,SAAoB,EAAU,EAAE;IACtF,MAAM,YAAY,GAAG,SAAS,CAAC,aAAa,KAAK,YAAY,CAAC;IAC9D,2IAA2I;IAC3I,MAAM,MAAM,GAAG,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC;IACjE,MAAM,kBAAkB,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC,CAAC;IAC7D,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,MAAM,CAAC,CAAC;IAC5D,MAAM,WAAW,GAAG,CAAC,SAAS,CAAC,IAAI,GAAG,SAAS,CAAC,OAAO,GAAG,aAAa,CAAC,GAAG,gBAAgB,CAAC;IAC5F,iBAAiB;IACjB,+GAA+G;IAC/G,MAAM,KAAK,GAAG,kBAAkB,GAAG,gBAAgB,CAAC;IAEpD,MAAM,UAAU,GAAG,YAAY;QAC7B,CAAC,CAAC;YACE,mBAAmB,EAAE,UAAU,KAAK,mBAAmB;YACvD,gBAAgB,EAAE,UAAU,MAAM,mBAAmB;YACrD,YAAY,EAAE,KAAK;SACpB;QACH,CAAC,CAAC;YACE,mBAAmB,EAAE,UAAU,MAAM,mBAAmB;YACxD,gBAAgB,EAAE,UAAU,KAAK,mBAAmB;YACpD,YAAY,EAAE,QAAQ;SACvB,CAAC;IAEN,MAAM,cAAc,GAAG,YAAY;QACjC,CAAC,CAAC;YACE,KAAK,EAAE;gBACL,UAAU,EAAE,eAAe,KAAK,GAAG,kBAAkB,EAAE;aACxD;SACF;QACH,CAAC,CAAC;YACE,KAAK,EAAE;gBACL,OAAO,EAAE,eAAe,KAAK,GAAG,kBAAkB,EAAE;aACrD;SACF,CAAC;IAEN,2FAA2F;IAC3F,sFAAsF;IACtF,MAAM,YAAY,GAAG,WAAW;QAC9B,CAAC,CAAC;YACE,CAAC,2BAA2B,WAAW,GAAG,CAAC,EAAE,YAAY;gBACvD,CAAC,CAAC;oBACE,UAAU,EAAE,eAAe,KAAK,GAAG,gBAAgB,EAAE;iBACtD;gBACH,CAAC,CAAC;oBACE,OAAO,EAAE,eAAe,KAAK,GAAG,gBAAgB,EAAE;iBACnD;SACN;QACH,CAAC,CAAC,EAAE,CAAC;IAEP,OAAO,WAAW,CAAC,UAAU,EAAE,cAAc,EAAE,YAAY,CAAC,CAAC;AAC/D,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStyle, mergeStyles } from '@fluentui/react';\nimport React, { useRef, useEffect, useState, useMemo } from 'react';\nimport { BaseCustomStyles } from '../types';\nimport { gridLayoutStyle } from './styles/GridLayout.styles';\n\n/*\n Props for {@link GridLayout}.\n \n @public\n /\nexport interface GridLayoutProps {\n children: React.ReactNode;\n /\n Allows users to pass in an object contains custom CSS styles.\n * @Example\n * ```\n * <GridLayout styles={{ root: { background: 'blue' } }} />\n * ```\n /\n styles?: BaseCustomStyles;\n}\n\n/\n {@link GridLayout} Component Styles.\n * @public\n /\nexport interface GridLayoutStyles extends BaseCustomStyles {\n /* Styles for each child of {@link GridLayout} /\n children?: IStyle;\n}\n\n/\n A component to lay out audio / video participants tiles in a call.\n \n @public\n /\nexport const GridLayout = (props: GridLayoutProps): JSX.Element => {\n const { children, styles } = props;\n const numberOfChildren = React.Children.count(children);\n\n const [currentWidth, setCurrentWidth] = useState(0);\n const [currentHeight, setCurrentHeight] = useState(0);\n\n const containerRef = useRef<HTMLDivElement>(null);\n\n const observer = useRef(\n new ResizeObserver((entries): void => {\n const { width, height } = entries[0].contentRect;\n setCurrentWidth(width);\n setCurrentHeight(height);\n })\n );\n\n useEffect(() => {\n if (containerRef.current) {\n observer.current.observe(containerRef.current);\n }\n const currentObserver = observer.current;\n return () => currentObserver.disconnect();\n }, [observer, containerRef]);\n\n const gridProps = useMemo(() => {\n return calculateGridProps(numberOfChildren, currentWidth, currentHeight);\n }, [numberOfChildren, currentWidth, currentHeight]);\n\n const cssGridStyles = useMemo(() => createGridStyles(numberOfChildren, gridProps), [numberOfChildren, gridProps]);\n\n return (\n <div\n ref={containerRef}\n className={mergeStyles(gridLayoutStyle, cssGridStyles, styles?.root)}\n data-ui-id=\"grid-layout\"\n >\n {children}\n </div>\n );\n};\n\n/\n The cell aspect ratio we aim for in a grid\n /\nconst TARGET_CELL_ASPECT_RATIO = 16 / 9;\n/\n The minimum cell aspect ratio we allow\n /\nconst MINIMUM_CELL_ASPECT_RATIO_ALLOWED = 8 / 9;\n\nconst isCloserThan = (a: number, b: number, target: number): boolean => {\n return Math.abs(target - a) < Math.abs(target - b);\n};\n\n/\n Properties to describe a grid. The number of rows, number of columns and whether it fills horizontally or vertically.\n \n @Example\n * ```\n * ______________________\n * \|_______\|_______\|______\|\n * \|___________\|__________\| This grid has 2 rows, 3 columns and fills horizontally.\n * ______________\n * \| \| \| \|\n * \|____\|____\| \|\n * \| \| \| \|\n * \|____\|____\|____\| This grid has 2 rows, 3 columns and fills vertically.\n * _______________\n * \| \| \|\n * \|_______\|_______\|\n * \| \| \| If all cells are equal, we default the fill direction as horizontal.\n * \|_______\|_______\| This grid has 2 rows, 2 columns and fills horizontally.\n * ```\n /\ntype GridProps = {\n fillDirection: FillDirection;\n rows: number;\n columns: number;\n};\n\ntype FillDirection = 'horizontal' \| 'vertical';\n\n/\n Get the best GridProps to place a number of items in a grid as evenly as possible given the width and height of the grid\n * @param numberOfItems - number of items to place in grid\n * @param width - width of grid\n * @param height - height of grid\n * @returns GridProps\n /\nexport const calculateGridProps = (numberOfItems: number, width: number, height: number): GridProps => {\n if (numberOfItems <= 0) {\n return { fillDirection: 'horizontal', rows: 0, columns: 0 };\n }\n // If width or height are 0 then we return rows and column evenly\n if (width <= 0 \|\| height <= 0) {\n return {\n fillDirection: 'horizontal',\n rows: Math.ceil(Math.sqrt(numberOfItems)),\n columns: Math.ceil(Math.sqrt(numberOfItems))\n };\n }\n const aspectRatio = width / height;\n // Approximate how many rows to divide the grid to achieve cells close to the TARGET_CELL_ASPECT_RATIO\n let rows = Math.floor(Math.sqrt((TARGET_CELL_ASPECT_RATIO / aspectRatio) numberOfItems)) \|\| 1;\n // Make sure rows do not exceed numberOfItems\n rows = Math.min(rows, numberOfItems);\n // Given the rows, get the minimum columns needed to create enough cells for the number of items\n let columns = Math.ceil(numberOfItems / rows);\n\n // Default fill direction to horizontal\n let fillDirection: 'horizontal' \| 'vertical' = 'horizontal';\n\n while (rows < numberOfItems) {\n // If cell aspect ratio is less than MINIMUM_CELL_ASPECT_RATIO_ALLOWED then try more rows\n if ((rows / columns) * aspectRatio < MINIMUM_CELL_ASPECT_RATIO_ALLOWED) {\n rows += 1;\n columns = Math.ceil(numberOfItems / rows);\n continue;\n }\n if (numberOfItems < rows * columns) {\n // We need to check that stretching columns vertically will result in only one less cell in stretched columns.\n // Likewise, we need to check that stretching rows horizonally will result in only one less cell in stretched rows.\n // e.g. For 4 rows, 2 columns, but only 6 items, we cannot stretch vertically because that would result in a\n // column of 2 cells which is less by more than 1 compared to the unstretched column.\n // _________\n // \|____\| \|\n // \|____\|____\|\n // \|____\| \|\n // \|____\|____\|\n\n const canStretchVertically = numberOfItems >= rows + (columns - 1) * (rows - 1);\n const canStretchHorizontally = numberOfItems >= columns + (rows - 1) * (columns - 1);\n if (!canStretchVertically && !canStretchHorizontally) {\n rows += 1;\n columns = Math.ceil(numberOfItems / rows);\n continue;\n } else if (!canStretchVertically) {\n break;\n } else if (!canStretchHorizontally) {\n fillDirection = 'vertical';\n break;\n }\n\n // We need to figure out whether the big cells should stretch horizontally or vertically\n // to fill in the empty spaces\n // e.g. For 2 rows, 3 columns, but only 5 items, we need to choose whether to stretch cells\n // horizontally or vertically\n // ______________________ _______________________\n // \| \| \| \| \| \| \| \|\n // \|_______\|_______\|______\| \|_______\|_______\| \|\n // \| \| \| \| \| \| \|\n // \|___________\|__________\| \|_______\|_______\|_______\|\n\n // Calculate the aspect ratio of big cells stretched horizontally\n const horizontallyStretchedCellRatio = (rows / (columns - 1)) * aspectRatio;\n // Calculate the aspect ratio of big cells stretched vertically\n const verticallyStretchedCellRatio = ((rows - 1) / columns) * aspectRatio;\n // We know the horizontally stretched cells aspect ratio is higher than MINIMUM_CELL_ASPECT_RATIO_ALLOWED. If vertically stretched cells\n // is also higher than the MINIMUM_CELL_ASPECT_RATIO_ALLOWED, then choose which aspect ratio is better.\n if (verticallyStretchedCellRatio >= MINIMUM_CELL_ASPECT_RATIO_ALLOWED) {\n // If vertically stetched cell has an aspect ratio closer to TARGET_CELL_ASPECT_RATIO then change the fill direction to vertical\n if (isCloserThan(verticallyStretchedCellRatio, horizontallyStretchedCellRatio, TARGET_CELL_ASPECT_RATIO)) {\n fillDirection = 'vertical';\n }\n }\n }\n break;\n }\n\n return { fillDirection, rows, columns };\n};\n\n/*\n Creates a styles classname with CSS Grid related styles given GridProps and the number of items to distribute as evenly as possible.\n * @param numberOfItems - number of items to place in grid\n * @param gridProps - GridProps that define the number of rows, number of columns, and the fill direction\n * @returns - classname\n /\nexport const createGridStyles = (numberOfItems: number, gridProps: GridProps): string => {\n const isHorizontal = gridProps.fillDirection === 'horizontal';\n // Blocks are either rows or columns depending on whether we fill horizontally or vertically. Each block may differ in the number of cells.\n const blocks = isHorizontal ? gridProps.rows : gridProps.columns;\n const smallCellsPerBlock = Math.ceil(numberOfItems / blocks);\n const bigCellsPerBlock = Math.floor(numberOfItems / blocks);\n const numBigCells = (gridProps.rows gridProps.columns - numberOfItems) * bigCellsPerBlock;\n // Get grid units\n // e.g. If some blocks have 2 big cells while others have 3 small cells, we need to work with 6 units per block\n const units = smallCellsPerBlock * bigCellsPerBlock;\n\n const gridStyles = isHorizontal\n ? {\n gridTemplateColumns: `repeat(${units}, minmax(0, 1fr))`,\n gridTemplateRows: `repeat(${blocks}, minmax(0, 1fr))`,\n gridAutoFlow: 'row'\n }\n : {\n gridTemplateColumns: `repeat(${blocks}, minmax(0, 1fr))`,\n gridTemplateRows: `repeat(${units}, minmax(0, 1fr))`,\n gridAutoFlow: 'column'\n };\n\n const smallCellStyle = isHorizontal\n ? {\n '> ': {\n gridColumn: `auto / span ${units / smallCellsPerBlock}`\n }\n }\n : {\n '> ': {\n gridRow: `auto / span ${units / smallCellsPerBlock}`\n }\n };\n\n // If there are big cells, we are choosing to place the latest children into the big cells.\n // That is why we use the '> :nth-last-child(-n + ${numBigCells})' CSS selector below\n const bigCellStyle = numBigCells\n ? {\n [`> :nth-last-child(-n + ${numBigCells})`]: isHorizontal\n ? {\n gridColumn: `auto / span ${units / bigCellsPerBlock}`\n }\n : {\n gridRow: `auto / span ${units / bigCellsPerBlock}`\n }\n }\n : {};\n\n return mergeStyles(gridStyles, smallCellStyle, bigCellStyle);\n};\n"]}

package/dist/dist-esm/react-components/src/components/HorizontalGallery.d.ts CHANGED Viewed

@@ -27,6 +27,10 @@ export interface HorizontalGalleryProps {
      * @defaultValue 5
      */
     childrenPerPage?: number;
+    /**
+     * helper function to choose which tiles to give video to.
+     */
+    onFetchTilesToRender?: (indexes: number[]) => void;
 }
 /**
  * Renders a horizontal gallery that parents children horizontally. Handles pagination based on the childrenPerPage prop.