npm - @azure/communication-react - Versions diffs - 1.9.0-beta.1 → 1.10.0-beta.1 - Mend

@azure/communication-react 1.9.0-beta.1 → 1.10.0-beta.1

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

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

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

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

@@ -14,11 +14,7 @@ export interface InputBoxStylesProps extends BaseCustomStyles {
     textFieldContainer?: IStyle;
 }
 declare type InputBoxComponentProps = {
-    children: ReactNode;
-    /**
-     * Inline child elements passed in. Setting to false will mean they are on a new line.
-     */
-    inlineChildren: boolean;
+    children?: ReactNode;
     'data-ui-id'?: string;
     id?: string;
     textValue: string;

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

@@ -3,7 +3,7 @@
 import React, { useState, useCallback } from 'react';
 import { Stack, TextField, mergeStyles, concatStyleSets, IconButton, TooltipHost } from '@fluentui/react';
 import { isEnterKeyEventFromCompositionSession } from './utils';
-import { inputBoxStyle, inputBoxWrapperStyle, inputButtonStyle, textFieldStyle, textContainerStyle, newLineButtonsContainerStyle, sameLineButtonsContainerStyle, inputBoxNewLineSpaceAffordance, inputButtonTooltipStyle, iconWrapperStyle } from './styles/InputBoxComponent.style';
+import { inputBoxStyle, inputBoxWrapperStyle, inputButtonStyle, textFieldStyle, textContainerStyle, inputButtonTooltipStyle, iconWrapperStyle } from './styles/InputBoxComponent.style';
 import { isDarkThemed } from '../theming/themeUtils';
 import { useTheme } from '../theming';
 /* @conditional-compile-remove(mention) */
@@ -14,7 +14,7 @@ import { TextFieldWithMention } from './TextFieldWithMention/TextFieldWithMentio
 export const InputBoxComponent = (props) => {
     const { styles, id, 'data-ui-id': dataUiId, textValue, onChange, textFieldRef, placeholderText, onKeyDown, onEnterKeyDown, supportNewline, inputClassName, errorMessage, disabled, children } = props;
     const mergedRootStyle = mergeStyles(inputBoxWrapperStyle, styles === null || styles === void 0 ? void 0 : styles.root);
-    const mergedInputFieldStyle = mergeStyles(inputBoxStyle, inputClassName, props.inlineChildren ? {} : inputBoxNewLineSpaceAffordance);
+    const mergedInputFieldStyle = mergeStyles(inputBoxStyle, inputClassName);
     const mergedTextContainerStyle = mergeStyles(textContainerStyle, styles === null || styles === void 0 ? void 0 : styles.textFieldContainer);
     const mergedTextFieldStyle = concatStyleSets(textFieldStyle, {
         fieldGroup: styles === null || styles === void 0 ? void 0 : styles.textField,
@@ -24,7 +24,6 @@ export const InputBoxComponent = (props) => {
             padding: '0 0'
         }
     });
-    const mergedChildrenStyle = mergeStyles(props.inlineChildren ? sameLineButtonsContainerStyle : newLineButtonsContainerStyle);
     const onTextFieldKeyDown = useCallback((ev) => {
         if (isEnterKeyEventFromCompositionSession(ev)) {
             return;
@@ -36,7 +35,7 @@ export const InputBoxComponent = (props) => {
         onKeyDown && onKeyDown(ev);
     }, [onEnterKeyDown, onKeyDown, supportNewline]);
     const onRenderChildren = () => {
-        return React.createElement(Stack, { horizontal: true, className: mergedChildrenStyle }, children);
+        return React.createElement(React.Fragment, null, children);
     };
     const renderTextField = () => {
         const textFieldProps = {
@@ -53,7 +52,7 @@ export const InputBoxComponent = (props) => {
             styles: mergedTextFieldStyle,
             disabled,
             errorMessage,
-            onRenderSuffix: onRenderChildren
+            onRenderSuffix: props.children ? onRenderChildren : undefined
         };
         /* @conditional-compile-remove(mention) */
         const textFieldWithMentionProps = {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"InputBoxComponent.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/InputBoxComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useState, ReactNode, FormEvent, useCallback } from 'react';\nimport { Stack, TextField, mergeStyles, IStyle, ITextField, concatStyleSets, IconButton, TooltipHost, ICalloutContentStyles, ITextFieldProps } from '@fluentui/react';\nimport { BaseCustomStyles } from '../types';\nimport { isEnterKeyEventFromCompositionSession } from './utils';\nimport { inputBoxStyle, inputBoxWrapperStyle, inputButtonStyle, textFieldStyle, textContainerStyle, newLineButtonsContainerStyle, sameLineButtonsContainerStyle, inputBoxNewLineSpaceAffordance, inputButtonTooltipStyle, iconWrapperStyle } from './styles/InputBoxComponent.style';\nimport { isDarkThemed } from '../theming/themeUtils';\nimport { useTheme } from '../theming';\n/* @conditional-compile-remove(mention) /\nimport { MentionLookupOptions } from './MentionPopover';\n/ @conditional-compile-remove(mention) /\nimport { TextFieldWithMention, TextFieldWithMentionProps } from './TextFieldWithMention/TextFieldWithMention';\n\n/\n @private\n /\nexport interface InputBoxStylesProps extends BaseCustomStyles {\n /* Styles for the text field. /\n textField?: IStyle;\n\n /* Styles for the system message; These styles will be ignored when a custom system message component is provided. /\n systemMessage?: IStyle;\n\n /* Styles for customizing the container of the text field /\n textFieldContainer?: IStyle;\n}\ntype InputBoxComponentProps = {\n children: ReactNode;\n /\n Inline child elements passed in. Setting to false will mean they are on a new line.\n /\n inlineChildren: boolean;\n 'data-ui-id'?: string;\n id?: string;\n textValue: string; // This could be plain text or HTML.\n onChange: (event?: FormEvent<HTMLInputElement \| HTMLTextAreaElement>, newValue?: string) => void;\n textFieldRef?: React.RefObject<ITextField>;\n inputClassName?: string;\n placeholderText?: string;\n supportNewline?: boolean;\n maxLength: number;\n onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement \| HTMLTextAreaElement>) => void;\n onEnterKeyDown?: () => void;\n errorMessage?: string \| React.ReactElement;\n disabled?: boolean;\n styles?: InputBoxStylesProps;\n autoFocus?: 'sendBoxTextField';\n / @conditional-compile-remove(mention) /\n mentionLookupOptions?: MentionLookupOptions;\n};\n\n/\n @private\n /\nexport const InputBoxComponent = (props: InputBoxComponentProps): JSX.Element => {\n const {\n styles,\n id,\n 'data-ui-id': dataUiId,\n textValue,\n onChange,\n textFieldRef,\n placeholderText,\n onKeyDown,\n onEnterKeyDown,\n supportNewline,\n inputClassName,\n errorMessage,\n disabled,\n children\n } = props;\n const mergedRootStyle = mergeStyles(inputBoxWrapperStyle, styles?.root);\n const mergedInputFieldStyle = mergeStyles(inputBoxStyle, inputClassName, props.inlineChildren ? {} : inputBoxNewLineSpaceAffordance);\n const mergedTextContainerStyle = mergeStyles(textContainerStyle, styles?.textFieldContainer);\n const mergedTextFieldStyle = concatStyleSets(textFieldStyle, {\n fieldGroup: styles?.textField,\n errorMessage: styles?.systemMessage,\n suffix: {\n backgroundColor: 'transparent',\n padding: '0 0'\n }\n });\n const mergedChildrenStyle = mergeStyles(props.inlineChildren ? sameLineButtonsContainerStyle : newLineButtonsContainerStyle);\n const onTextFieldKeyDown = useCallback((ev: React.KeyboardEvent<HTMLInputElement \| HTMLTextAreaElement>) => {\n if (isEnterKeyEventFromCompositionSession(ev)) {\n return;\n }\n if (ev.key === 'Enter' && (ev.shiftKey === false \|\| !supportNewline)) {\n ev.preventDefault();\n onEnterKeyDown && onEnterKeyDown();\n }\n onKeyDown && onKeyDown(ev);\n }, [onEnterKeyDown, onKeyDown, supportNewline]);\n const onRenderChildren = (): JSX.Element => {\n return <Stack horizontal className={mergedChildrenStyle}>\n {children}\n </Stack>;\n };\n const renderTextField = (): JSX.Element => {\n const textFieldProps: ITextFieldProps = {\n autoFocus: props.autoFocus === 'sendBoxTextField',\n multiline: true,\n autoAdjustHeight: true,\n multiple: false,\n resizable: false,\n componentRef: textFieldRef,\n id,\n inputClassName: mergedInputFieldStyle,\n placeholder: placeholderText,\n autoComplete: 'off',\n styles: mergedTextFieldStyle,\n disabled,\n errorMessage,\n onRenderSuffix: onRenderChildren\n };\n\n / @conditional-compile-remove(mention) /\n const textFieldWithMentionProps: TextFieldWithMentionProps = {\n textFieldProps: textFieldProps,\n dataUiId: dataUiId,\n textValue: textValue,\n onChange: onChange,\n onKeyDown: onKeyDown,\n onEnterKeyDown: onEnterKeyDown,\n textFieldRef: textFieldRef,\n supportNewline: supportNewline,\n mentionLookupOptions: props.mentionLookupOptions\n };\n / @conditional-compile-remove(mention) /\n if (props.mentionLookupOptions) {\n return <TextFieldWithMention {...textFieldWithMentionProps} />;\n }\n return <div style={textFieldProps.errorMessage ? {\n padding: '0 0 5px 5px'\n } : undefined}>\n <TextField {...textFieldProps} data-ui-id={dataUiId} value={textValue} onChange={onChange} onKeyDown={onTextFieldKeyDown} onFocus={e => {\n // Fix for setting the cursor to the correct position when multiline is true\n // This approach should be reviewed during migration to FluentUI v9\n e.currentTarget.value = '';\n e.currentTarget.value = textValue;\n }} />\n </div>;\n };\n return <Stack className={mergedRootStyle}>\n <div className={mergedTextContainerStyle}>{renderTextField()}</div>\n </Stack>;\n};\n\n/\n Props for displaying a send button besides the text input area.\n \n @private\n /\nexport type InputBoxButtonProps = {\n onRenderIcon: (isHover: boolean) => JSX.Element;\n onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n className?: string;\n id?: string;\n ariaLabel?: string;\n tooltipContent?: string;\n};\n\n/\n @private\n */\nexport const InputBoxButton = (props: InputBoxButtonProps): JSX.Element => {\n const {\n onRenderIcon,\n onClick,\n ariaLabel,\n className,\n id,\n tooltipContent\n } = props;\n const [isHover, setIsHover] = useState(false);\n const mergedButtonStyle = mergeStyles(inputButtonStyle, className);\n const theme = useTheme();\n const calloutStyle: Partial<ICalloutContentStyles> = {\n root: {\n padding: 0\n },\n calloutMain: {\n padding: '0.5rem'\n }\n };\n\n // Place callout with no gap between it and the button.\n const calloutProps = {\n gapSpace: 0,\n styles: calloutStyle,\n backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n };\n return <TooltipHost hostClassName={inputButtonTooltipStyle} content={tooltipContent} calloutProps={{\n ...calloutProps\n }}>\n <IconButton className={mergedButtonStyle} ariaLabel={ariaLabel} onClick={onClick} id={id} onMouseEnter={() => {\n setIsHover(true);\n }} onMouseLeave={() => {\n setIsHover(false);\n }}\n // VoiceOver fix: Avoid icon from stealing focus when IconButton is double-tapped to send message by wrapping with Stack with pointerEvents style to none\n onRenderIcon={() => <Stack className={iconWrapperStyle}>{onRenderIcon(isHover)}</Stack>} />\n </TooltipHost>;\n};"]}
1	+ {"version":3,"file":"InputBoxComponent.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/InputBoxComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useState, ReactNode, FormEvent, useCallback } from 'react';\nimport { Stack, TextField, mergeStyles, IStyle, ITextField, concatStyleSets, IconButton, TooltipHost, ICalloutContentStyles, ITextFieldProps } from '@fluentui/react';\nimport { BaseCustomStyles } from '../types';\nimport { isEnterKeyEventFromCompositionSession } from './utils';\nimport { inputBoxStyle, inputBoxWrapperStyle, inputButtonStyle, textFieldStyle, textContainerStyle, inputButtonTooltipStyle, iconWrapperStyle } from './styles/InputBoxComponent.style';\nimport { isDarkThemed } from '../theming/themeUtils';\nimport { useTheme } from '../theming';\n/* @conditional-compile-remove(mention) /\nimport { MentionLookupOptions } from './MentionPopover';\n/ @conditional-compile-remove(mention) /\nimport { TextFieldWithMention, TextFieldWithMentionProps } from './TextFieldWithMention/TextFieldWithMention';\n\n/\n @private\n /\nexport interface InputBoxStylesProps extends BaseCustomStyles {\n /* Styles for the text field. /\n textField?: IStyle;\n\n /* Styles for the system message; These styles will be ignored when a custom system message component is provided. /\n systemMessage?: IStyle;\n\n /* Styles for customizing the container of the text field /\n textFieldContainer?: IStyle;\n}\ntype InputBoxComponentProps = {\n children?: ReactNode;\n 'data-ui-id'?: string;\n id?: string;\n textValue: string; // This could be plain text or HTML.\n onChange: (event?: FormEvent<HTMLInputElement \| HTMLTextAreaElement>, newValue?: string) => void;\n textFieldRef?: React.RefObject<ITextField>;\n inputClassName?: string;\n placeholderText?: string;\n supportNewline?: boolean;\n maxLength: number;\n onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement \| HTMLTextAreaElement>) => void;\n onEnterKeyDown?: () => void;\n errorMessage?: string \| React.ReactElement;\n disabled?: boolean;\n styles?: InputBoxStylesProps;\n autoFocus?: 'sendBoxTextField';\n / @conditional-compile-remove(mention) /\n mentionLookupOptions?: MentionLookupOptions;\n};\n\n/\n @private\n /\nexport const InputBoxComponent = (props: InputBoxComponentProps): JSX.Element => {\n const {\n styles,\n id,\n 'data-ui-id': dataUiId,\n textValue,\n onChange,\n textFieldRef,\n placeholderText,\n onKeyDown,\n onEnterKeyDown,\n supportNewline,\n inputClassName,\n errorMessage,\n disabled,\n children\n } = props;\n const mergedRootStyle = mergeStyles(inputBoxWrapperStyle, styles?.root);\n const mergedInputFieldStyle = mergeStyles(inputBoxStyle, inputClassName);\n const mergedTextContainerStyle = mergeStyles(textContainerStyle, styles?.textFieldContainer);\n const mergedTextFieldStyle = concatStyleSets(textFieldStyle, {\n fieldGroup: styles?.textField,\n errorMessage: styles?.systemMessage,\n suffix: {\n backgroundColor: 'transparent',\n padding: '0 0'\n }\n });\n const onTextFieldKeyDown = useCallback((ev: React.KeyboardEvent<HTMLInputElement \| HTMLTextAreaElement>) => {\n if (isEnterKeyEventFromCompositionSession(ev)) {\n return;\n }\n if (ev.key === 'Enter' && (ev.shiftKey === false \|\| !supportNewline)) {\n ev.preventDefault();\n onEnterKeyDown && onEnterKeyDown();\n }\n onKeyDown && onKeyDown(ev);\n }, [onEnterKeyDown, onKeyDown, supportNewline]);\n const onRenderChildren = (): JSX.Element => {\n return <>{children}</>;\n };\n const renderTextField = (): JSX.Element => {\n const textFieldProps: ITextFieldProps = {\n autoFocus: props.autoFocus === 'sendBoxTextField',\n multiline: true,\n autoAdjustHeight: true,\n multiple: false,\n resizable: false,\n componentRef: textFieldRef,\n id,\n inputClassName: mergedInputFieldStyle,\n placeholder: placeholderText,\n autoComplete: 'off',\n styles: mergedTextFieldStyle,\n disabled,\n errorMessage,\n onRenderSuffix: props.children ? onRenderChildren : undefined\n };\n\n / @conditional-compile-remove(mention) /\n const textFieldWithMentionProps: TextFieldWithMentionProps = {\n textFieldProps: textFieldProps,\n dataUiId: dataUiId,\n textValue: textValue,\n onChange: onChange,\n onKeyDown: onKeyDown,\n onEnterKeyDown: onEnterKeyDown,\n textFieldRef: textFieldRef,\n supportNewline: supportNewline,\n mentionLookupOptions: props.mentionLookupOptions\n };\n / @conditional-compile-remove(mention) /\n if (props.mentionLookupOptions) {\n return <TextFieldWithMention {...textFieldWithMentionProps} />;\n }\n return <div style={textFieldProps.errorMessage ? {\n padding: '0 0 5px 5px'\n } : undefined}>\n <TextField {...textFieldProps} data-ui-id={dataUiId} value={textValue} onChange={onChange} onKeyDown={onTextFieldKeyDown} onFocus={e => {\n // Fix for setting the cursor to the correct position when multiline is true\n // This approach should be reviewed during migration to FluentUI v9\n e.currentTarget.value = '';\n e.currentTarget.value = textValue;\n }} />\n </div>;\n };\n return <Stack className={mergedRootStyle}>\n <div className={mergedTextContainerStyle}>{renderTextField()}</div>\n </Stack>;\n};\n\n/\n Props for displaying a send button besides the text input area.\n \n @private\n /\nexport type InputBoxButtonProps = {\n onRenderIcon: (isHover: boolean) => JSX.Element;\n onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n className?: string;\n id?: string;\n ariaLabel?: string;\n tooltipContent?: string;\n};\n\n/\n @private\n */\nexport const InputBoxButton = (props: InputBoxButtonProps): JSX.Element => {\n const {\n onRenderIcon,\n onClick,\n ariaLabel,\n className,\n id,\n tooltipContent\n } = props;\n const [isHover, setIsHover] = useState(false);\n const mergedButtonStyle = mergeStyles(inputButtonStyle, className);\n const theme = useTheme();\n const calloutStyle: Partial<ICalloutContentStyles> = {\n root: {\n padding: 0\n },\n calloutMain: {\n padding: '0.5rem'\n }\n };\n\n // Place callout with no gap between it and the button.\n const calloutProps = {\n gapSpace: 0,\n styles: calloutStyle,\n backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n };\n return <TooltipHost hostClassName={inputButtonTooltipStyle} content={tooltipContent} calloutProps={{\n ...calloutProps\n }}>\n <IconButton className={mergedButtonStyle} ariaLabel={ariaLabel} onClick={onClick} id={id} onMouseEnter={() => {\n setIsHover(true);\n }} onMouseLeave={() => {\n setIsHover(false);\n }}\n // VoiceOver fix: Avoid icon from stealing focus when IconButton is double-tapped to send message by wrapping with Stack with pointerEvents style to none\n onRenderIcon={() => <Stack className={iconWrapperStyle}>{onRenderIcon(isHover)}</Stack>} />\n </TooltipHost>;\n};"]}

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

@@ -28,5 +28,5 @@ export declare const _LocalVideoTile: React.MemoExoticComponent<(props: {
     styles?: VideoTileStylesProps | undefined;
     personaMinSize?: number | undefined;
     raisedHand?: RaisedHand | undefined;
-}) => JSX.Element>;
+}) => React.JSX.Element>;
 //# sourceMappingURL=LocalVideoTile.d.ts.map

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

@@ -32,5 +32,5 @@ export declare const _RemoteVideoTile: React.MemoExoticComponent<(props: {
     isPinned?: boolean | undefined;
     disablePinMenuItem?: boolean | undefined;
     toggleAnnouncerString?: ((announcerString: string) => void) | undefined;
-}) => JSX.Element>;
+}) => React.JSX.Element>;
 //# sourceMappingURL=RemoteVideoTile.d.ts.map

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

@@ -118,7 +118,7 @@ export const SendBox = (props) => {
                 hasErrorMessage: !!errorMessage,
                 disabled: !!disabled
             })) },
-            React.createElement(InputBoxComponent, { autoFocus: autoFocus, "data-ui-id": ids.sendboxTextField, inlineChildren: true, disabled: disabled, errorMessage: onRenderSystemMessage ? onRenderSystemMessage(errorMessage) : errorMessage, textFieldRef: sendTextFieldRef, id: "sendbox", placeholderText: strings.placeholderText, textValue: textValue, onChange: (_, newValue) => setText(newValue), onKeyDown: ev => {
+            React.createElement(InputBoxComponent, { autoFocus: autoFocus, "data-ui-id": ids.sendboxTextField, disabled: disabled, errorMessage: onRenderSystemMessage ? onRenderSystemMessage(errorMessage) : errorMessage, textFieldRef: sendTextFieldRef, id: "sendbox", placeholderText: strings.placeholderText, textValue: textValue, onChange: (_, newValue) => setText(newValue), onKeyDown: ev => {
                     const keyWasSendingMessage = ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline);
                     if (!keyWasSendingMessage) {
                         onTyping === null || onTyping === void 0 ? void 0 : onTyping();

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SendBox.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/SendBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useState, useMemo, useCallback } from 'react';\nimport { IStyle, ITextField, mergeStyles, concatStyleSets, Icon, Stack } from '@fluentui/react';\nimport { sendButtonStyle, sendIconStyle, sendBoxWrapperStyles, borderAndBoxShadowStyle } from './styles/SendBox.styles';\nimport { BaseCustomStyles } from '../types';\nimport { useTheme } from '../theming';\nimport { useLocale } from '../localization';\nimport { useIdentifiers } from '../identifiers';\nimport { InputBoxButton, InputBoxComponent } from './InputBoxComponent';\nimport { SendBoxErrors } from './SendBoxErrors';\n/* @conditional-compile-remove(file-sharing) /\nimport { _FileUploadCards } from './FileUploadCards';\n/ @conditional-compile-remove(file-sharing) /\nimport { fileUploadCardsStyles } from './styles/SendBox.styles';\nimport { SendBoxErrorBarError } from './SendBoxErrorBar';\n/ @conditional-compile-remove(mention) /\nimport { MentionLookupOptions } from './MentionPopover';\nconst EMPTY_MESSAGE_REGEX = /^\\s$/;\nconst MAXIMUM_LENGTH_OF_MESSAGE = 8000;\n\n/*\n Fluent styles for {@link Sendbox}.\n \n @public\n /\nexport interface SendBoxStylesProps extends BaseCustomStyles {\n /* Styles for the text field. /\n textField?: IStyle;\n /* styles for the text field container /\n textFieldContainer?: IStyle;\n /* Styles for the container of the send message icon. /\n sendMessageIconContainer?: IStyle;\n /* Styles for the send message icon; These styles will be ignored when a custom send message icon is provided. /\n sendMessageIcon?: IStyle;\n /* Styles for the system message; These styles will be ignored when a custom system message component is provided. /\n systemMessage?: IStyle;\n}\n\n/\n Attributes required for SendBox to show file uploads like name, progress etc.\n * @beta\n /\nexport interface ActiveFileUpload {\n /\n Unique identifier for the file upload.\n /\n id: string;\n\n /\n File name to be rendered for uploaded file.\n /\n filename: string;\n\n /\n A number between 0 and 1 indicating the progress of the upload.\n * This is unrelated to the `uploadComplete` property.\n * It is only used to show the progress of the upload.\n * Progress of 1 doesn't mark the upload as complete, set the `uploadComplete`\n * property to true to mark the upload as complete.\n /\n progress: number;\n\n /\n Error to be displayed to the user if the upload fails.\n /\n error?: SendBoxErrorBarError;\n\n /\n `true` means that the upload is completed.\n * This is independent of the upload `progress`.\n /\n uploadComplete?: boolean;\n}\n\n/\n Strings of {@link SendBox} that can be overridden.\n \n @public\n /\nexport interface SendBoxStrings {\n /\n Placeholder text in SendBox when there is no user input\n /\n placeholderText: string;\n /\n The warning message when send box text length is more than max limit\n /\n textTooLong: string;\n /\n Aria label for send message button\n /\n sendButtonAriaLabel: string;\n / @conditional-compile-remove(file-sharing) /\n /\n Error message indicating that all file uploads are not complete.\n /\n fileUploadsPendingError: string;\n / @conditional-compile-remove(file-sharing) /\n /\n Aria label to notify user when focus is on cancel file upload button.\n /\n removeFile: string;\n / @conditional-compile-remove(file-sharing) /\n /\n Aria label to notify user file uploading starts.\n /\n uploading: string;\n / @conditional-compile-remove(file-sharing) /\n /\n Aria label to notify user file is uploaded.\n /\n uploadCompleted: string;\n}\n\n/\n Props for {@link SendBox}.\n \n @public\n /\nexport interface SendBoxProps {\n /\n Optional boolean to disable text box\n * @defaultValue false\n /\n disabled?: boolean;\n /\n Optional text for system message below text box\n /\n systemMessage?: string;\n /\n Optional override behavior on send button click\n /\n onSendMessage?: (content: string) => Promise<void>;\n / @conditional-compile-remove(mention) /\n /\n Optional props needed to lookup suggestions in the mention scenario.\n * @beta\n /\n mentionLookupOptions?: MentionLookupOptions;\n\n /\n Optional callback called when user is typing\n /\n onTyping?: () => Promise<void>;\n /\n Optional callback to render system message below the SendBox.\n * @defaultValue MessageBar\n /\n onRenderSystemMessage?: (systemMessage: string \| undefined) => React.ReactElement;\n /\n Optional boolean to support new line in SendBox.\n * @defaultValue false\n /\n supportNewline?: boolean;\n /\n Optional callback to render send button icon to the right of the SendBox.\n * @defaultValue SendBoxSendHovered icon when mouse over icon and SendBoxSend icon otherwise\n /\n onRenderIcon?: (isHover: boolean) => JSX.Element;\n /\n Allows users to pass in an object contains custom CSS styles.\n * @Example\n * ```\n * <SendBox styles={{ root: { background: 'blue' } }} />\n * ```\n /\n styles?: SendBoxStylesProps;\n /\n Optional strings to override in component\n /\n strings?: Partial<SendBoxStrings>;\n /\n enumerable to determine if the input box has focus on render or not.\n * When undefined nothing has focus on render\n /\n autoFocus?: 'sendBoxTextField';\n / @conditional-compile-remove(file-sharing) /\n /\n Optional callback to render uploaded files in the SendBox. The sendBox will expand\n * vertically to accommodate the uploaded files. File uploads will\n * be rendered below the text area in sendBox.\n * @beta\n /\n onRenderFileUploads?: () => JSX.Element;\n / @conditional-compile-remove(file-sharing) /\n /\n Optional array of active file uploads where each object has attributes\n * of a file upload like name, progress, errorMessage etc.\n * @beta\n /\n activeFileUploads?: ActiveFileUpload[];\n / @conditional-compile-remove(file-sharing) /\n /\n Optional callback to remove the file upload before sending by clicking on\n * cancel icon.\n * @beta\n /\n onCancelFileUpload?: (fileId: string) => void;\n}\n\n/\n Component for typing and sending messages.\n \n Supports sending typing notification when user starts entering text.\n * Supports an optional message below the text input field.\n \n @public\n /\nexport const SendBox = (props: SendBoxProps): JSX.Element => {\n const {\n disabled,\n systemMessage,\n supportNewline,\n onSendMessage,\n onTyping,\n onRenderIcon,\n onRenderSystemMessage,\n styles,\n autoFocus,\n / @conditional-compile-remove(mention) /\n mentionLookupOptions\n } = props;\n const theme = useTheme();\n const localeStrings = useLocale().strings.sendBox;\n const strings = {\n ...localeStrings,\n ...props.strings\n };\n const ids = useIdentifiers();\n const activeFileUploads = activeFileUploadsTrampoline(props);\n const [textValue, setTextValue] = useState('');\n const [textValueOverflow, setTextValueOverflow] = useState(false);\n const sendTextFieldRef = React.useRef<ITextField>(null);\n const [fileUploadsPendingError, setFileUploadsPendingError] = useState<SendBoxErrorBarError \| undefined>(undefined);\n const sendMessageOnClick = (): void => {\n // don't send a message when disabled\n if (disabled \|\| textValueOverflow) {\n return;\n }\n\n // Don't send message until all files have been uploaded successfully\n setFileUploadsPendingError(undefined);\n if (hasIncompleteFileUploads(props)) {\n / @conditional-compile-remove(file-sharing) /\n setFileUploadsPendingError({\n message: strings.fileUploadsPendingError,\n timestamp: Date.now()\n });\n return;\n }\n const message = textValue;\n // we don't want to send empty messages including spaces, newlines, tabs\n // Message can be empty if there is a valid file upload\n if (!EMPTY_MESSAGE_REGEX.test(message) \|\| hasFile(props)) {\n onSendMessage && onSendMessage(sanitizeText(message));\n setTextValue('');\n }\n sendTextFieldRef.current?.focus();\n };\n const setText = (newValue?: string \| undefined): void => {\n if (newValue === undefined) {\n return;\n }\n if (newValue.length > MAXIMUM_LENGTH_OF_MESSAGE) {\n setTextValueOverflow(true);\n } else {\n setTextValueOverflow(false);\n }\n setTextValue(newValue);\n };\n const textTooLongMessage = textValueOverflow ? strings.textTooLong : undefined;\n const errorMessage = systemMessage ?? textTooLongMessage;\n const mergedSendButtonStyle = useMemo(() => mergeStyles(sendButtonStyle, styles?.sendMessageIconContainer), [styles?.sendMessageIconContainer]);\n const mergedStyles = useMemo(() => concatStyleSets(styles), [styles]);\n const hasText = !!textValue;\n const hasTextOrFile = hasText \|\| hasFile(props);\n const mergedSendIconStyle = useMemo(() => mergeStyles(sendIconStyle, {\n color: !!errorMessage \|\| !hasTextOrFile ? theme.palette.neutralTertiary : theme.palette.themePrimary\n }, styles?.sendMessageIcon), [errorMessage, hasTextOrFile, theme, styles?.sendMessageIcon]);\n const onRenderSendIcon = useCallback((isHover: boolean) => onRenderIcon ? onRenderIcon(isHover) : <Icon iconName={isHover && textValue ? 'SendBoxSendHovered' : 'SendBoxSend'} className={mergedSendIconStyle} />, [mergedSendIconStyle, onRenderIcon, textValue]);\n\n // Ensure that errors are cleared when there are no files in sendBox\n React.useEffect(() => {\n if (!activeFileUploads?.filter(upload => !upload.error).length) {\n setFileUploadsPendingError(undefined);\n }\n }, [activeFileUploads]);\n const sendBoxErrorsProps = useMemo(() => {\n return {\n fileUploadsPendingError: fileUploadsPendingError,\n fileUploadError: activeFileUploads?.filter(fileUpload => fileUpload.error).pop()?.error\n };\n }, [activeFileUploads, fileUploadsPendingError]);\n\n / @conditional-compile-remove(file-sharing) /\n const onRenderFileUploads = useCallback(() => {\n if (!activeFileUploads?.filter(upload => !upload.error).length) {\n return null;\n }\n return props.onRenderFileUploads ? props.onRenderFileUploads() : <Stack className={fileUploadCardsStyles}>\n <_FileUploadCards activeFileUploads={activeFileUploads} onCancelFileUpload={props.onCancelFileUpload} strings={{\n removeFile: props.strings?.removeFile ?? localeStrings.removeFile,\n uploading: props.strings?.uploading ?? localeStrings.uploading,\n uploadCompleted: props.strings?.uploadCompleted ?? localeStrings.uploadCompleted\n }} />\n </Stack>;\n }, [activeFileUploads, props, localeStrings]);\n return <Stack className={mergeStyles(sendBoxWrapperStyles, {\n overflow: 'visible'\n } // This is needed for the mention popup to be visible\n )}>\n <SendBoxErrors {...sendBoxErrorsProps} />\n <Stack className={mergeStyles(borderAndBoxShadowStyle({\n theme,\n hasErrorMessage: !!errorMessage,\n disabled: !!disabled\n }))}>\n <InputBoxComponent autoFocus={autoFocus} data-ui-id={ids.sendboxTextField} inlineChildren={true} disabled={disabled} errorMessage={onRenderSystemMessage ? onRenderSystemMessage(errorMessage) : errorMessage} textFieldRef={sendTextFieldRef} id=\"sendbox\" placeholderText={strings.placeholderText} textValue={textValue} onChange={(_, newValue) => setText(newValue)} onKeyDown={ev => {\n const keyWasSendingMessage = ev.key === 'Enter' && (ev.shiftKey === false \|\| !supportNewline);\n if (!keyWasSendingMessage) {\n onTyping?.();\n }\n }} onEnterKeyDown={() => {\n sendMessageOnClick();\n }} styles={mergedStyles} supportNewline={supportNewline} maxLength={MAXIMUM_LENGTH_OF_MESSAGE}\n / @conditional-compile-remove(mention) / mentionLookupOptions={mentionLookupOptions}>\n <InputBoxButton onRenderIcon={onRenderSendIcon} onClick={e => {\n if (!textValueOverflow) {\n sendMessageOnClick();\n }\n e.stopPropagation();\n }} id={'sendIconWrapper'} className={mergedSendButtonStyle} ariaLabel={localeStrings.sendButtonAriaLabel} tooltipContent={localeStrings.sendButtonAriaLabel} />\n </InputBoxComponent>\n {/ @conditional-compile-remove(file-sharing) /\n onRenderFileUploads()}\n </Stack>\n </Stack>;\n};\n\n/\n @private\n /\nconst hasIncompleteFileUploads = (props: SendBoxProps): boolean => {\n const activeFileUploads = activeFileUploadsTrampoline(props);\n return !!(activeFileUploads?.length && !activeFileUploads.filter(fileUpload => !fileUpload.error).every(fileUpload => fileUpload.uploadComplete));\n};\nconst hasFile = (props: SendBoxProps): boolean => {\n const activeFileUploads = activeFileUploadsTrampoline(props);\n return !!activeFileUploads?.find(file => !file.error);\n return false;\n};\nconst sanitizeText = (message: string): string => {\n if (EMPTY_MESSAGE_REGEX.test(message)) {\n return '';\n } else {\n return message;\n }\n};\nconst activeFileUploadsTrampoline = (props: SendBoxProps): ActiveFileUpload[] \| undefined => {\n / @conditional-compile-remove(file-sharing) */\n return props.activeFileUploads;\n return [];\n};"]}
1	+ {"version":3,"file":"SendBox.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/SendBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useState, useMemo, useCallback } from 'react';\nimport { IStyle, ITextField, mergeStyles, concatStyleSets, Icon, Stack } from '@fluentui/react';\nimport { sendButtonStyle, sendIconStyle, sendBoxWrapperStyles, borderAndBoxShadowStyle } from './styles/SendBox.styles';\nimport { BaseCustomStyles } from '../types';\nimport { useTheme } from '../theming';\nimport { useLocale } from '../localization';\nimport { useIdentifiers } from '../identifiers';\nimport { InputBoxButton, InputBoxComponent } from './InputBoxComponent';\nimport { SendBoxErrors } from './SendBoxErrors';\n/* @conditional-compile-remove(file-sharing) /\nimport { _FileUploadCards } from './FileUploadCards';\n/ @conditional-compile-remove(file-sharing) /\nimport { fileUploadCardsStyles } from './styles/SendBox.styles';\nimport { SendBoxErrorBarError } from './SendBoxErrorBar';\n/ @conditional-compile-remove(mention) /\nimport { MentionLookupOptions } from './MentionPopover';\nconst EMPTY_MESSAGE_REGEX = /^\\s$/;\nconst MAXIMUM_LENGTH_OF_MESSAGE = 8000;\n\n/*\n Fluent styles for {@link Sendbox}.\n \n @public\n /\nexport interface SendBoxStylesProps extends BaseCustomStyles {\n /* Styles for the text field. /\n textField?: IStyle;\n /* styles for the text field container /\n textFieldContainer?: IStyle;\n /* Styles for the container of the send message icon. /\n sendMessageIconContainer?: IStyle;\n /* Styles for the send message icon; These styles will be ignored when a custom send message icon is provided. /\n sendMessageIcon?: IStyle;\n /* Styles for the system message; These styles will be ignored when a custom system message component is provided. /\n systemMessage?: IStyle;\n}\n\n/\n Attributes required for SendBox to show file uploads like name, progress etc.\n * @beta\n /\nexport interface ActiveFileUpload {\n /\n Unique identifier for the file upload.\n /\n id: string;\n\n /\n File name to be rendered for uploaded file.\n /\n filename: string;\n\n /\n A number between 0 and 1 indicating the progress of the upload.\n * This is unrelated to the `uploadComplete` property.\n * It is only used to show the progress of the upload.\n * Progress of 1 doesn't mark the upload as complete, set the `uploadComplete`\n * property to true to mark the upload as complete.\n /\n progress: number;\n\n /\n Error to be displayed to the user if the upload fails.\n /\n error?: SendBoxErrorBarError;\n\n /\n `true` means that the upload is completed.\n * This is independent of the upload `progress`.\n /\n uploadComplete?: boolean;\n}\n\n/\n Strings of {@link SendBox} that can be overridden.\n \n @public\n /\nexport interface SendBoxStrings {\n /\n Placeholder text in SendBox when there is no user input\n /\n placeholderText: string;\n /\n The warning message when send box text length is more than max limit\n /\n textTooLong: string;\n /\n Aria label for send message button\n /\n sendButtonAriaLabel: string;\n / @conditional-compile-remove(file-sharing) /\n /\n Error message indicating that all file uploads are not complete.\n /\n fileUploadsPendingError: string;\n / @conditional-compile-remove(file-sharing) /\n /\n Aria label to notify user when focus is on cancel file upload button.\n /\n removeFile: string;\n / @conditional-compile-remove(file-sharing) /\n /\n Aria label to notify user file uploading starts.\n /\n uploading: string;\n / @conditional-compile-remove(file-sharing) /\n /\n Aria label to notify user file is uploaded.\n /\n uploadCompleted: string;\n}\n\n/\n Props for {@link SendBox}.\n \n @public\n /\nexport interface SendBoxProps {\n /\n Optional boolean to disable text box\n * @defaultValue false\n /\n disabled?: boolean;\n /\n Optional text for system message below text box\n /\n systemMessage?: string;\n /\n Optional override behavior on send button click\n /\n onSendMessage?: (content: string) => Promise<void>;\n / @conditional-compile-remove(mention) /\n /\n Optional props needed to lookup suggestions in the mention scenario.\n * @beta\n /\n mentionLookupOptions?: MentionLookupOptions;\n\n /\n Optional callback called when user is typing\n /\n onTyping?: () => Promise<void>;\n /\n Optional callback to render system message below the SendBox.\n * @defaultValue MessageBar\n /\n onRenderSystemMessage?: (systemMessage: string \| undefined) => React.ReactElement;\n /\n Optional boolean to support new line in SendBox.\n * @defaultValue false\n /\n supportNewline?: boolean;\n /\n Optional callback to render send button icon to the right of the SendBox.\n * @defaultValue SendBoxSendHovered icon when mouse over icon and SendBoxSend icon otherwise\n /\n onRenderIcon?: (isHover: boolean) => JSX.Element;\n /\n Allows users to pass in an object contains custom CSS styles.\n * @Example\n * ```\n * <SendBox styles={{ root: { background: 'blue' } }} />\n * ```\n /\n styles?: SendBoxStylesProps;\n /\n Optional strings to override in component\n /\n strings?: Partial<SendBoxStrings>;\n /\n enumerable to determine if the input box has focus on render or not.\n * When undefined nothing has focus on render\n /\n autoFocus?: 'sendBoxTextField';\n / @conditional-compile-remove(file-sharing) /\n /\n Optional callback to render uploaded files in the SendBox. The sendBox will expand\n * vertically to accommodate the uploaded files. File uploads will\n * be rendered below the text area in sendBox.\n * @beta\n /\n onRenderFileUploads?: () => JSX.Element;\n / @conditional-compile-remove(file-sharing) /\n /\n Optional array of active file uploads where each object has attributes\n * of a file upload like name, progress, errorMessage etc.\n * @beta\n /\n activeFileUploads?: ActiveFileUpload[];\n / @conditional-compile-remove(file-sharing) /\n /\n Optional callback to remove the file upload before sending by clicking on\n * cancel icon.\n * @beta\n /\n onCancelFileUpload?: (fileId: string) => void;\n}\n\n/\n Component for typing and sending messages.\n \n Supports sending typing notification when user starts entering text.\n * Supports an optional message below the text input field.\n \n @public\n /\nexport const SendBox = (props: SendBoxProps): JSX.Element => {\n const {\n disabled,\n systemMessage,\n supportNewline,\n onSendMessage,\n onTyping,\n onRenderIcon,\n onRenderSystemMessage,\n styles,\n autoFocus,\n / @conditional-compile-remove(mention) /\n mentionLookupOptions\n } = props;\n const theme = useTheme();\n const localeStrings = useLocale().strings.sendBox;\n const strings = {\n ...localeStrings,\n ...props.strings\n };\n const ids = useIdentifiers();\n const activeFileUploads = activeFileUploadsTrampoline(props);\n const [textValue, setTextValue] = useState('');\n const [textValueOverflow, setTextValueOverflow] = useState(false);\n const sendTextFieldRef = React.useRef<ITextField>(null);\n const [fileUploadsPendingError, setFileUploadsPendingError] = useState<SendBoxErrorBarError \| undefined>(undefined);\n const sendMessageOnClick = (): void => {\n // don't send a message when disabled\n if (disabled \|\| textValueOverflow) {\n return;\n }\n\n // Don't send message until all files have been uploaded successfully\n setFileUploadsPendingError(undefined);\n if (hasIncompleteFileUploads(props)) {\n / @conditional-compile-remove(file-sharing) /\n setFileUploadsPendingError({\n message: strings.fileUploadsPendingError,\n timestamp: Date.now()\n });\n return;\n }\n const message = textValue;\n // we don't want to send empty messages including spaces, newlines, tabs\n // Message can be empty if there is a valid file upload\n if (!EMPTY_MESSAGE_REGEX.test(message) \|\| hasFile(props)) {\n onSendMessage && onSendMessage(sanitizeText(message));\n setTextValue('');\n }\n sendTextFieldRef.current?.focus();\n };\n const setText = (newValue?: string \| undefined): void => {\n if (newValue === undefined) {\n return;\n }\n if (newValue.length > MAXIMUM_LENGTH_OF_MESSAGE) {\n setTextValueOverflow(true);\n } else {\n setTextValueOverflow(false);\n }\n setTextValue(newValue);\n };\n const textTooLongMessage = textValueOverflow ? strings.textTooLong : undefined;\n const errorMessage = systemMessage ?? textTooLongMessage;\n const mergedSendButtonStyle = useMemo(() => mergeStyles(sendButtonStyle, styles?.sendMessageIconContainer), [styles?.sendMessageIconContainer]);\n const mergedStyles = useMemo(() => concatStyleSets(styles), [styles]);\n const hasText = !!textValue;\n const hasTextOrFile = hasText \|\| hasFile(props);\n const mergedSendIconStyle = useMemo(() => mergeStyles(sendIconStyle, {\n color: !!errorMessage \|\| !hasTextOrFile ? theme.palette.neutralTertiary : theme.palette.themePrimary\n }, styles?.sendMessageIcon), [errorMessage, hasTextOrFile, theme, styles?.sendMessageIcon]);\n const onRenderSendIcon = useCallback((isHover: boolean) => onRenderIcon ? onRenderIcon(isHover) : <Icon iconName={isHover && textValue ? 'SendBoxSendHovered' : 'SendBoxSend'} className={mergedSendIconStyle} />, [mergedSendIconStyle, onRenderIcon, textValue]);\n\n // Ensure that errors are cleared when there are no files in sendBox\n React.useEffect(() => {\n if (!activeFileUploads?.filter(upload => !upload.error).length) {\n setFileUploadsPendingError(undefined);\n }\n }, [activeFileUploads]);\n const sendBoxErrorsProps = useMemo(() => {\n return {\n fileUploadsPendingError: fileUploadsPendingError,\n fileUploadError: activeFileUploads?.filter(fileUpload => fileUpload.error).pop()?.error\n };\n }, [activeFileUploads, fileUploadsPendingError]);\n\n / @conditional-compile-remove(file-sharing) /\n const onRenderFileUploads = useCallback(() => {\n if (!activeFileUploads?.filter(upload => !upload.error).length) {\n return null;\n }\n return props.onRenderFileUploads ? props.onRenderFileUploads() : <Stack className={fileUploadCardsStyles}>\n <_FileUploadCards activeFileUploads={activeFileUploads} onCancelFileUpload={props.onCancelFileUpload} strings={{\n removeFile: props.strings?.removeFile ?? localeStrings.removeFile,\n uploading: props.strings?.uploading ?? localeStrings.uploading,\n uploadCompleted: props.strings?.uploadCompleted ?? localeStrings.uploadCompleted\n }} />\n </Stack>;\n }, [activeFileUploads, props, localeStrings]);\n return <Stack className={mergeStyles(sendBoxWrapperStyles, {\n overflow: 'visible'\n } // This is needed for the mention popup to be visible\n )}>\n <SendBoxErrors {...sendBoxErrorsProps} />\n <Stack className={mergeStyles(borderAndBoxShadowStyle({\n theme,\n hasErrorMessage: !!errorMessage,\n disabled: !!disabled\n }))}>\n <InputBoxComponent autoFocus={autoFocus} data-ui-id={ids.sendboxTextField} disabled={disabled} errorMessage={onRenderSystemMessage ? onRenderSystemMessage(errorMessage) : errorMessage} textFieldRef={sendTextFieldRef} id=\"sendbox\" placeholderText={strings.placeholderText} textValue={textValue} onChange={(_, newValue) => setText(newValue)} onKeyDown={ev => {\n const keyWasSendingMessage = ev.key === 'Enter' && (ev.shiftKey === false \|\| !supportNewline);\n if (!keyWasSendingMessage) {\n onTyping?.();\n }\n }} onEnterKeyDown={() => {\n sendMessageOnClick();\n }} styles={mergedStyles} supportNewline={supportNewline} maxLength={MAXIMUM_LENGTH_OF_MESSAGE}\n / @conditional-compile-remove(mention) / mentionLookupOptions={mentionLookupOptions}>\n <InputBoxButton onRenderIcon={onRenderSendIcon} onClick={e => {\n if (!textValueOverflow) {\n sendMessageOnClick();\n }\n e.stopPropagation();\n }} id={'sendIconWrapper'} className={mergedSendButtonStyle} ariaLabel={localeStrings.sendButtonAriaLabel} tooltipContent={localeStrings.sendButtonAriaLabel} />\n </InputBoxComponent>\n {/ @conditional-compile-remove(file-sharing) /\n onRenderFileUploads()}\n </Stack>\n </Stack>;\n};\n\n/\n @private\n /\nconst hasIncompleteFileUploads = (props: SendBoxProps): boolean => {\n const activeFileUploads = activeFileUploadsTrampoline(props);\n return !!(activeFileUploads?.length && !activeFileUploads.filter(fileUpload => !fileUpload.error).every(fileUpload => fileUpload.uploadComplete));\n};\nconst hasFile = (props: SendBoxProps): boolean => {\n const activeFileUploads = activeFileUploadsTrampoline(props);\n return !!activeFileUploads?.find(file => !file.error);\n return false;\n};\nconst sanitizeText = (message: string): string => {\n if (EMPTY_MESSAGE_REGEX.test(message)) {\n return '';\n } else {\n return message;\n }\n};\nconst activeFileUploadsTrampoline = (props: SendBoxProps): ActiveFileUpload[] \| undefined => {\n / @conditional-compile-remove(file-sharing) */\n return props.activeFileUploads;\n return [];\n};"]}

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

@@ -4,7 +4,7 @@ import { BaseCustomStyles } from '../types';
 /**
  * Styles for the VerticalGallery component
  *
- * @beta
+ * @public
  */
 export interface VerticalGalleryStyles extends BaseCustomStyles {
     /** Styles for each video tile in the vertical gallery */
@@ -15,7 +15,7 @@ export interface VerticalGalleryStyles extends BaseCustomStyles {
 /**
  * Strings for localization of the vertical gallery.
  *
- * @beta
+ * @public
  */
 export interface VerticalGalleryStrings {
     /** Aria label for the left page navigation button */
@@ -26,7 +26,7 @@ export interface VerticalGalleryStrings {
 /**
  * Styles for the control bar inside the VerticalGallery component
  *
- * @beta
+ * @public
  */
 export interface VerticalGalleryControlBarStyles extends BaseCustomStyles {
     /**
@@ -45,7 +45,7 @@ export interface VerticalGalleryControlBarStyles extends BaseCustomStyles {
 /**
  * Props for the VerticalGallery component
  *
- * @beta
+ * @public
  */
 export interface VerticalGalleryProps {
     /** Video tiles for the remote participants in the vertical gallery */
@@ -61,7 +61,7 @@ export interface VerticalGalleryProps {
  * VerticalGallery is a overflow gallery for participants in the {@link VideoGallery} component. Stacks
  * participants on the Y-axis of the VideoGallery for better use of horizontal space.
  *
- * @beta
+ * @public
  */
 export declare const VerticalGallery: (props: VerticalGalleryProps) => JSX.Element;
 //# sourceMappingURL=VerticalGallery.d.ts.map

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

@@ -13,7 +13,7 @@ import { bucketize } from './utils/overFlowGalleriesUtils';
  * VerticalGallery is a overflow gallery for participants in the {@link VideoGallery} component. Stacks
  * participants on the Y-axis of the VideoGallery for better use of horizontal space.
  *
- * @beta
+ * @public
  */
 export const VerticalGallery = (props) => {
     const { children, styles, childrenPerPage, onFetchTilesToRender } = props;
@@ -102,7 +102,7 @@ const VerticalGalleryControlBar = (props) => {
     /* @conditional-compile-remove(vertical-gallery) */
     const ids = useIdentifiers();
     /* @conditional-compile-remove(vertical-gallery) */
-    const strings = useLocale().strings.VerticalGallery;
+    const strings = useLocale().strings.verticalGallery;
     const pageCounterContainerStyles = useMemo(() => {
         return mergeStyles(pageNavigationControlBarContainerStyle, styles === null || styles === void 0 ? void 0 : styles.root);
     }, [styles === null || styles === void 0 ? void 0 : styles.root]);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"VerticalGallery.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/VerticalGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, Icon, IStyle, mergeStyles, Stack, Text } from '@fluentui/react';\nimport React, { useEffect, useMemo, useState } from 'react';\n/* @conditional-compile-remove(vertical-gallery) /\nimport { useLocale } from '../localization';\n/ @conditional-compile-remove(vertical-gallery) /\nimport { useIdentifiers } from '../identifiers';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles } from '../types';\nimport { childrenContainerStyle, pageNavigationControlBarContainerStyle, participantPageCounter, leftRightButtonStyles, navIconStyles, rootStyle } from './styles/VerticalGallery.styles';\nimport { bucketize } from './utils/overFlowGalleriesUtils';\n\n/\n Styles for the VerticalGallery component\n \n @beta\n /\nexport interface VerticalGalleryStyles extends BaseCustomStyles {\n /* Styles for each video tile in the vertical gallery /\n children?: IStyle;\n /* Styles for the verticalGallery control bar /\n controlBar?: VerticalGalleryControlBarStyles;\n}\n\n/\n Strings for localization of the vertical gallery.\n \n @beta\n /\nexport interface VerticalGalleryStrings {\n /* Aria label for the left page navigation button /\n leftNavButtonAriaLabel?: string;\n /* Aria label for the right page navigation button /\n rightNavButtonAriaLabel?: string;\n}\n\n/\n Styles for the control bar inside the VerticalGallery component\n \n @beta\n /\nexport interface VerticalGalleryControlBarStyles extends BaseCustomStyles {\n /\n styles for the next button in the VerticalGalleryControlBar\n /\n nextButton?: IStyle;\n /\n Styles for the previous button in the VerticalGalleryControlBar\n /\n previousButton?: IStyle;\n /\n Styles for the counter in the VerticalGalleryControlBar\n /\n counter?: IStyle;\n}\n/\n Props for the VerticalGallery component\n \n @beta\n /\nexport interface VerticalGalleryProps {\n /* Video tiles for the remote participants in the vertical gallery /\n children: React.ReactNode;\n /* Max number of children per page in the vertical Gallery /\n childrenPerPage: number;\n /* Styles to customize the vertical gallery /\n styles?: VerticalGalleryStyles;\n /* helper function to choose which tiles to give video to. /\n onFetchTilesToRender?: (indexes: number[]) => void;\n}\ninterface VerticalGalleryControlBarProps {\n onNextButtonClick: () => void;\n onPreviousButtonClick: () => void;\n buttonsDisabled: {\n next: boolean;\n previous: boolean;\n };\n totalPages: number;\n currentPage: number;\n styles?: VerticalGalleryControlBarStyles;\n}\n\n/\n VerticalGallery is a overflow gallery for participants in the {@link VideoGallery} component. Stacks\n * participants on the Y-axis of the VideoGallery for better use of horizontal space.\n \n @beta\n /\nexport const VerticalGallery = (props: VerticalGalleryProps): JSX.Element => {\n const {\n children,\n styles,\n childrenPerPage,\n onFetchTilesToRender\n } = props;\n const [page, setPage] = useState(1);\n const [buttonState, setButtonState] = useState<{\n previous: boolean;\n next: boolean;\n }>({\n previous: true,\n next: true\n });\n\n / @conditional-compile-remove(vertical-gallery) /\n const ids = useIdentifiers();\n const numberOfChildren = React.Children.count(children);\n const lastPage = Math.ceil(numberOfChildren / childrenPerPage);\n const indexesArray: number[][] = useMemo(() => {\n return bucketize([...Array(numberOfChildren).keys()], childrenPerPage);\n }, [numberOfChildren, childrenPerPage]);\n useEffect(() => {\n if (onFetchTilesToRender && indexesArray) {\n onFetchTilesToRender(indexesArray[page - 1]);\n }\n }, [indexesArray, onFetchTilesToRender, page]);\n const firstIndexOfCurrentPage = (page - 1) childrenPerPage;\n const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;\n const childrenOnCurrentPage = useMemo(() => {\n if (indexesArray[0] !== undefined) {\n return indexesArray[clippedPage - 1].map(index => {\n return React.Children.toArray(children)[index];\n });\n }\n return;\n }, [indexesArray, clippedPage, children]);\n const showButtons = numberOfChildren > childrenPerPage;\n const onPreviousButtonClick = (): void => {\n setPage(page - 1);\n };\n const onNextButtonClick = (): void => {\n setPage(page + 1);\n };\n if (page > lastPage && lastPage > 0) {\n setPage(lastPage);\n }\n useEffect(() => {\n if (page > 1 && page < lastPage && showButtons) {\n // we are somewhere in between first and last pages.\n setButtonState({\n previous: false,\n next: false\n });\n } else if (page === 1 && showButtons) {\n // we are on the first page.\n setButtonState({\n previous: true,\n next: false\n });\n } else if (page === lastPage && showButtons) {\n // we are on the last page.\n setButtonState({\n previous: false,\n next: true\n });\n }\n }, [page, numberOfChildren, lastPage, showButtons]);\n const childContainerStyle = useMemo(() => {\n return {\n root: childrenContainerStyle(2)\n };\n }, []);\n const childrenStyles = useMemo(() => {\n return {\n root: styles?.children\n };\n }, [styles?.children]);\n if (childrenPerPage <= 0) {\n return <></>;\n }\n return <Stack className={mergeStyles(rootStyle, styles?.root)}>\n <Stack styles={childContainerStyle}>\n {childrenOnCurrentPage?.map((child, i) => {\n return <Stack.Item key={i} styles={childrenStyles}\n /* @conditional-compile-remove(vertical-gallery) / data-ui-id={ids.verticalGalleryVideoTile}>\n {child}\n </Stack.Item>;\n })}\n </Stack>\n {showButtons && <VerticalGalleryControlBar buttonsDisabled={buttonState} onPreviousButtonClick={onPreviousButtonClick} onNextButtonClick={onNextButtonClick} totalPages={lastPage} currentPage={page} />}\n </Stack>;\n};\nconst VerticalGalleryControlBar = (props: VerticalGalleryControlBarProps): JSX.Element => {\n const {\n onNextButtonClick,\n onPreviousButtonClick,\n buttonsDisabled,\n currentPage,\n totalPages,\n styles\n } = props;\n const theme = useTheme();\n / @conditional-compile-remove(vertical-gallery) /\n const ids = useIdentifiers();\n\n / @conditional-compile-remove(vertical-gallery) /\n const strings = useLocale().strings.VerticalGallery;\n const pageCounterContainerStyles = useMemo(() => {\n return mergeStyles(pageNavigationControlBarContainerStyle, styles?.root);\n }, [styles?.root]);\n const previousButtonSyles = useMemo(() => {\n return mergeStyles(leftRightButtonStyles(theme), styles?.previousButton);\n }, [styles?.previousButton, theme]);\n const pageCounterStyles = useMemo(() => {\n return mergeStyles(participantPageCounter, styles?.counter);\n }, [styles?.counter]);\n const nextButtonsStyles = useMemo(() => {\n return mergeStyles(leftRightButtonStyles(theme), styles?.nextButton);\n }, [styles?.nextButton, theme]);\n const controlBarSpacing = {\n childrenGap: '0.5rem'\n };\n return <Stack horizontalAlign=\"center\" tokens={controlBarSpacing} horizontal className={pageCounterContainerStyles}>\n <DefaultButton className={previousButtonSyles} onClick={onPreviousButtonClick} disabled={buttonsDisabled?.previous}\n / @conditional-compile-remove(vertical-gallery) / ariaLabel={strings.leftNavButtonAriaLabel}\n / @conditional-compile-remove(vertical-gallery) / data-ui-id={ids.overflowGalleryLeftNavButton}>\n <Icon iconName=\"VerticalGalleryLeftButton\" styles={navIconStyles} />\n </DefaultButton>\n <Text\n / @conditional-compile-remove(vertical-gallery) / data-ui-id={ids.verticalGalleryPageCounter} className={pageCounterStyles}>{`${currentPage} / ${totalPages}`}</Text>\n <DefaultButton className={nextButtonsStyles} onClick={onNextButtonClick} disabled={buttonsDisabled?.next}\n / @conditional-compile-remove(vertical-gallery) / ariaLabel={strings.rightNavButtonAriaLabel}\n / @conditional-compile-remove(vertical-gallery) */ data-ui-id={ids.overflowGalleryRightNavButton}>\n <Icon iconName=\"VerticalGalleryRightButton\" styles={navIconStyles} />\n </DefaultButton>\n </Stack>;\n};"]}
1	+ {"version":3,"file":"VerticalGallery.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/VerticalGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, Icon, IStyle, mergeStyles, Stack, Text } from '@fluentui/react';\nimport React, { useEffect, useMemo, useState } from 'react';\n/* @conditional-compile-remove(vertical-gallery) /\nimport { useLocale } from '../localization';\n/ @conditional-compile-remove(vertical-gallery) /\nimport { useIdentifiers } from '../identifiers';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles } from '../types';\nimport { childrenContainerStyle, pageNavigationControlBarContainerStyle, participantPageCounter, leftRightButtonStyles, navIconStyles, rootStyle } from './styles/VerticalGallery.styles';\nimport { bucketize } from './utils/overFlowGalleriesUtils';\n\n/\n Styles for the VerticalGallery component\n \n @public\n /\nexport interface VerticalGalleryStyles extends BaseCustomStyles {\n /* Styles for each video tile in the vertical gallery /\n children?: IStyle;\n /* Styles for the verticalGallery control bar /\n controlBar?: VerticalGalleryControlBarStyles;\n}\n\n/\n Strings for localization of the vertical gallery.\n \n @public\n /\nexport interface VerticalGalleryStrings {\n /* Aria label for the left page navigation button /\n leftNavButtonAriaLabel?: string;\n /* Aria label for the right page navigation button /\n rightNavButtonAriaLabel?: string;\n}\n\n/\n Styles for the control bar inside the VerticalGallery component\n \n @public\n /\nexport interface VerticalGalleryControlBarStyles extends BaseCustomStyles {\n /\n styles for the next button in the VerticalGalleryControlBar\n /\n nextButton?: IStyle;\n /\n Styles for the previous button in the VerticalGalleryControlBar\n /\n previousButton?: IStyle;\n /\n Styles for the counter in the VerticalGalleryControlBar\n /\n counter?: IStyle;\n}\n/\n Props for the VerticalGallery component\n \n @public\n /\nexport interface VerticalGalleryProps {\n /* Video tiles for the remote participants in the vertical gallery /\n children: React.ReactNode;\n /* Max number of children per page in the vertical Gallery /\n childrenPerPage: number;\n /* Styles to customize the vertical gallery /\n styles?: VerticalGalleryStyles;\n /* helper function to choose which tiles to give video to. /\n onFetchTilesToRender?: (indexes: number[]) => void;\n}\ninterface VerticalGalleryControlBarProps {\n onNextButtonClick: () => void;\n onPreviousButtonClick: () => void;\n buttonsDisabled: {\n next: boolean;\n previous: boolean;\n };\n totalPages: number;\n currentPage: number;\n styles?: VerticalGalleryControlBarStyles;\n}\n\n/\n VerticalGallery is a overflow gallery for participants in the {@link VideoGallery} component. Stacks\n * participants on the Y-axis of the VideoGallery for better use of horizontal space.\n \n @public\n /\nexport const VerticalGallery = (props: VerticalGalleryProps): JSX.Element => {\n const {\n children,\n styles,\n childrenPerPage,\n onFetchTilesToRender\n } = props;\n const [page, setPage] = useState(1);\n const [buttonState, setButtonState] = useState<{\n previous: boolean;\n next: boolean;\n }>({\n previous: true,\n next: true\n });\n\n / @conditional-compile-remove(vertical-gallery) /\n const ids = useIdentifiers();\n const numberOfChildren = React.Children.count(children);\n const lastPage = Math.ceil(numberOfChildren / childrenPerPage);\n const indexesArray: number[][] = useMemo(() => {\n return bucketize([...Array(numberOfChildren).keys()], childrenPerPage);\n }, [numberOfChildren, childrenPerPage]);\n useEffect(() => {\n if (onFetchTilesToRender && indexesArray) {\n onFetchTilesToRender(indexesArray[page - 1]);\n }\n }, [indexesArray, onFetchTilesToRender, page]);\n const firstIndexOfCurrentPage = (page - 1) childrenPerPage;\n const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;\n const childrenOnCurrentPage = useMemo(() => {\n if (indexesArray[0] !== undefined) {\n return indexesArray[clippedPage - 1].map(index => {\n return React.Children.toArray(children)[index];\n });\n }\n return;\n }, [indexesArray, clippedPage, children]);\n const showButtons = numberOfChildren > childrenPerPage;\n const onPreviousButtonClick = (): void => {\n setPage(page - 1);\n };\n const onNextButtonClick = (): void => {\n setPage(page + 1);\n };\n if (page > lastPage && lastPage > 0) {\n setPage(lastPage);\n }\n useEffect(() => {\n if (page > 1 && page < lastPage && showButtons) {\n // we are somewhere in between first and last pages.\n setButtonState({\n previous: false,\n next: false\n });\n } else if (page === 1 && showButtons) {\n // we are on the first page.\n setButtonState({\n previous: true,\n next: false\n });\n } else if (page === lastPage && showButtons) {\n // we are on the last page.\n setButtonState({\n previous: false,\n next: true\n });\n }\n }, [page, numberOfChildren, lastPage, showButtons]);\n const childContainerStyle = useMemo(() => {\n return {\n root: childrenContainerStyle(2)\n };\n }, []);\n const childrenStyles = useMemo(() => {\n return {\n root: styles?.children\n };\n }, [styles?.children]);\n if (childrenPerPage <= 0) {\n return <></>;\n }\n return <Stack className={mergeStyles(rootStyle, styles?.root)}>\n <Stack styles={childContainerStyle}>\n {childrenOnCurrentPage?.map((child, i) => {\n return <Stack.Item key={i} styles={childrenStyles}\n /* @conditional-compile-remove(vertical-gallery) / data-ui-id={ids.verticalGalleryVideoTile}>\n {child}\n </Stack.Item>;\n })}\n </Stack>\n {showButtons && <VerticalGalleryControlBar buttonsDisabled={buttonState} onPreviousButtonClick={onPreviousButtonClick} onNextButtonClick={onNextButtonClick} totalPages={lastPage} currentPage={page} />}\n </Stack>;\n};\nconst VerticalGalleryControlBar = (props: VerticalGalleryControlBarProps): JSX.Element => {\n const {\n onNextButtonClick,\n onPreviousButtonClick,\n buttonsDisabled,\n currentPage,\n totalPages,\n styles\n } = props;\n const theme = useTheme();\n / @conditional-compile-remove(vertical-gallery) /\n const ids = useIdentifiers();\n\n / @conditional-compile-remove(vertical-gallery) /\n const strings = useLocale().strings.verticalGallery;\n const pageCounterContainerStyles = useMemo(() => {\n return mergeStyles(pageNavigationControlBarContainerStyle, styles?.root);\n }, [styles?.root]);\n const previousButtonSyles = useMemo(() => {\n return mergeStyles(leftRightButtonStyles(theme), styles?.previousButton);\n }, [styles?.previousButton, theme]);\n const pageCounterStyles = useMemo(() => {\n return mergeStyles(participantPageCounter, styles?.counter);\n }, [styles?.counter]);\n const nextButtonsStyles = useMemo(() => {\n return mergeStyles(leftRightButtonStyles(theme), styles?.nextButton);\n }, [styles?.nextButton, theme]);\n const controlBarSpacing = {\n childrenGap: '0.5rem'\n };\n return <Stack horizontalAlign=\"center\" tokens={controlBarSpacing} horizontal className={pageCounterContainerStyles}>\n <DefaultButton className={previousButtonSyles} onClick={onPreviousButtonClick} disabled={buttonsDisabled?.previous}\n / @conditional-compile-remove(vertical-gallery) / ariaLabel={strings.leftNavButtonAriaLabel}\n / @conditional-compile-remove(vertical-gallery) / data-ui-id={ids.overflowGalleryLeftNavButton}>\n <Icon iconName=\"VerticalGalleryLeftButton\" styles={navIconStyles} />\n </DefaultButton>\n <Text\n / @conditional-compile-remove(vertical-gallery) / data-ui-id={ids.verticalGalleryPageCounter} className={pageCounterStyles}>{`${currentPage} / ${totalPages}`}</Text>\n <DefaultButton className={nextButtonsStyles} onClick={onNextButtonClick} disabled={buttonsDisabled?.next}\n / @conditional-compile-remove(vertical-gallery) / ariaLabel={strings.rightNavButtonAriaLabel}\n / @conditional-compile-remove(vertical-gallery) */ data-ui-id={ids.overflowGalleryRightNavButton}>\n <Icon iconName=\"VerticalGalleryRightButton\" styles={navIconStyles} />\n </DefaultButton>\n </Stack>;\n};"]}

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

@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-import { FocusZone, Label, mergeStyles, Stack } from '@fluentui/react';
+import { Label, mergeStyles, Stack } from '@fluentui/react';
 import { useWarnings } from '@fluentui/react-hooks';
 import React from 'react';
 import { chunk } from '../utils';
@@ -47,8 +47,12 @@ export const _VideoBackgroundEffectsPicker = (props) => {
             return React.createElement(Stack, { className: mergeStyles((_a = props.styles) === null || _a === void 0 ? void 0 : _a.rowRoot), wrap: props.itemsPerRow === 'wrap', horizontal: true, key: rowIndex, tokens: {
                     childrenGap: '0.5rem'
                 }, "data-ui-id": "video-effects-picker-row" },
-                options.map(option => React.createElement(FocusZone, { key: option.itemKey, shouldFocusOnMount: option.itemKey.includes('none') },
-                    React.createElement(_VideoEffectsItem, Object.assign({}, option, { itemKey: option.itemKey })))),
+                options.map((option, i) => {
+                    if (i === 0 && rowIndex === 0) {
+                        return React.createElement(_VideoEffectsItem, Object.assign({}, option, { itemKey: option.itemKey, key: option.itemKey, focusOnMount: true }));
+                    }
+                    return React.createElement(_VideoEffectsItem, Object.assign({}, option, { itemKey: option.itemKey, key: option.itemKey }));
+                }),
                 fillCount > 0 && rowIndex === optionsByRow.length - 1 && Array.from({
                     length: fillCount
                 }).map((_, index) => React.createElement(Stack, { key: index, styles: hiddenVideoEffectsItemContainerStyles, "data-ui-id": "video-effects-hidden-item" })));

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

	@@ -1 +1 @@
1	- {"version":3,"file":"VideoBackgroundEffectsPicker.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,~~EAAE,SAAS,~~EAAU,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;~~AAC/E~~,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAA0B,MAAM,oBAAoB,CAAC;AAC/E,OAAO,EAAE,qCAAqC,EAAE,MAAM,2BAA2B,CAAC;AA2ElF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,KAAyC,EAAe,EAAE;;IACtG,MAAM,CAAC,oCAAoC,EAAE,uCAAuC,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAqB,KAAK,CAAC,wBAAwB,CAAC,CAAC;IAE3J,+EAA+E;IAC/E,WAAW,CAAC;QACV,IAAI,EAAE,8BAA8B;QACpC,KAAK;QACL,eAAe,EAAE;YACf,YAAY,EAAE,UAAU;YACxB,SAAS,EAAE,mBAAmB;YAC9B,gBAAgB,EAAE,0BAA0B;SAC7C;KACF,CAAC,CAAC;IACH,MAAM,cAAc,GAAG,MAAA,KAAK,CAAC,iBAAiB,mCAAI,oCAAoC,CAAC;IACvF,MAAM,iBAAiB,GAAG,CAAC,iBAAyB,EAAQ,EAAE;;QAC5D,uCAAuC,CAAC,iBAAiB,CAAC,CAAC;QAC3D,MAAA,KAAK,CAAC,QAAQ,+CAAd,KAAK,EAAY,iBAAiB,CAAC,CAAC;IACtC,CAAC,CAAC;IACF,MAAM,gBAAgB,GAA6B,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,iBAC7E,UAAU,EAAE,MAAM,CAAC,OAAO,KAAK,cAAc,EAC7C,QAAQ,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,MAAM,CAAC,OAAO,CAAC,IAC9C,MAAM,EACT,CAAC,CAAC;IACJ,MAAM,WAAW,GAAG,MAAA,KAAK,CAAC,WAAW,mCAAI,CAAC,CAAC;IAC3C,MAAM,YAAY,GAAG,WAAW,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,gBAAgB,EAAE,WAAW,CAAC,CAAC;IAExG,4EAA4E;IAC5E,MAAM,SAAS,GAAG,WAAW,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,GAAG,YAAY,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC;IAC1G,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE;YACpB,WAAW,EAAE,QAAQ;SACtB;QACG,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,MAAA,KAAK,CAAC,MAAM,0CAAE,KAAK,CAAC,IAAG,KAAK,CAAC,KAAK,CAAS;QACxE,YAAY,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,QAAQ,EAAE,EAAE;;YAAC,OAAA,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,MAAA,KAAK,CAAC,MAAM,0CAAE,OAAO,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,EAAE,UAAU,QAAC,GAAG,EAAE,QAAQ,EAAE,MAAM,EAAE;oBACrK,WAAW,EAAE,QAAQ;iBACtB,gBAAa,0BAA0B;gBACjC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,oBAAC,~~SAAS~~,~~IAAC~~,~~GAAG~~,EAAE,MAAM,CAAC,OAAO,EAAE,~~kBAAkB~~,EAAE,MAAM,CAAC,OAAO,~~CAAC~~,~~QAAQ~~,~~CAAC~~,~~MAAM~~,CAAC;~~oBACtG~~,oBAAC,iBAAiB,oBAAK,MAAM,IAAE,OAAO,EAAE,MAAM,CAAC,OAAO,IAAI,~~CAChD~~,CAAC;~~gBACd~~,SAAS,GAAG,CAAC,IAAI,QAAQ,KAAK,YAAY,CAAC,MAAM,GAAG,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC;oBACvE,MAAM,EAAE,SAAS;iBAClB,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,oBAAC,KAAK,IAAC,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,qCAAqC,gBAAa,2BAA2B,GAAG,CAAC,CACvH,CAAA;SAAA,CAAC,CACL,CAAC;AACb,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ~~FocusZone,~~ IStyle, Label, mergeStyles, Stack } from '@fluentui/react';\nimport { useWarnings } from '@fluentui/react-hooks';\nimport React from 'react';\nimport { chunk } from '../utils';\nimport { _VideoEffectsItem, _VideoEffectsItemProps } from './VideoEffectsItem';\nimport { hiddenVideoEffectsItemContainerStyles } from './VideoEffectsItem.styles';\n\n/*\n Props for {@link _VideoBackgroundEffectsPicker}\n * @internal\n /\nexport interface _VideoBackgroundEffectsPickerProps {\n /\n The options to display in the picker.\n /\n options: _VideoBackgroundEffectChoiceOption[];\n\n /\n The key of the current selected Video Background Effect.\n * If you provide this, you must maintain selection state by observing onChange events and passing a new value in when changed.\n /\n selectedEffectKey?: string;\n\n /\n Callback to invoke when a Video Background Effect is selected.\n * @param effectKey - The key of the Video Background Effect that was selected.\n /\n onChange?: (effectKey: string) => void;\n\n /\n The key of the Video Background Effect that is initially selected.\n * Only provide this if the picker is an uncontrolled component;\n * otherwise, use the `selectedEffectKey` property.\n /\n defaultSelectedEffectKey?: string;\n\n /\n The label to display for the picker.\n /\n label?: string;\n\n /\n The number of items to display per row.\n * @default 3\n /\n itemsPerRow?: 'wrap' \| number;\n\n /\n Styles for the picker.\n /\n styles?: _VideoBackgroundEffectsPickerStyles;\n}\n\n/\n Option for the {@link _VideoBackgroundEffectsPicker}.\n * @internal\n /\nexport type _VideoBackgroundEffectChoiceOption = _VideoEffectsItemProps;\n\n/\n Styles for the {@link _VideoBackgroundEffectsPicker}.\n * @internal\n /\nexport interface _VideoBackgroundEffectsPickerStyles {\n /\n Styles for the root element.\n /\n root?: IStyle;\n\n /\n Styles for the label.\n /\n label?: IStyle;\n\n /\n Styles for the root of each row element.\n /\n rowRoot?: IStyle;\n}\n\n/\n Picker for choosing a Video Background Effect.\n \n @remarks\n * This functions similar to a radio group of buttons, where the user can select one of the options.\n \n @internal\n */\nexport const _VideoBackgroundEffectsPicker = (props: _VideoBackgroundEffectsPickerProps): JSX.Element => {\n const [componentControlledSelectedEffectKey, setComponentControlledSelectedEffectKey] = React.useState<string \| undefined>(props.defaultSelectedEffectKey);\n\n // Warn the developer if they use the component in an incorrect controlled way.\n useWarnings({\n name: 'VideoBackgroundEffectsPicker',\n props,\n controlledUsage: {\n onChangeProp: 'onChange',\n valueProp: 'selectedEffectKey',\n defaultValueProp: 'defaultSelectedEffectKey'\n }\n });\n const selectedEffect = props.selectedEffectKey ?? componentControlledSelectedEffectKey;\n const setSelectedEffect = (selectedEffectKey: string): void => {\n setComponentControlledSelectedEffectKey(selectedEffectKey);\n props.onChange?.(selectedEffectKey);\n };\n const convertedOptions: _VideoEffectsItemProps[] = props.options.map(option => ({\n isSelected: option.itemKey === selectedEffect,\n onSelect: () => setSelectedEffect(option.itemKey),\n ...option\n }));\n const itemsPerRow = props.itemsPerRow ?? 3;\n const optionsByRow = itemsPerRow === 'wrap' ? [convertedOptions] : chunk(convertedOptions, itemsPerRow);\n\n // If the final row is not full, fill it with hidden items to ensure layout.\n const fillCount = itemsPerRow === 'wrap' ? 0 : itemsPerRow - optionsByRow[optionsByRow.length - 1].length;\n return <Stack tokens={{\n childrenGap: '0.5rem'\n }}>\n <Label className={mergeStyles(props.styles?.label)}>{props.label}</Label>\n {optionsByRow.map((options, rowIndex) => <Stack className={mergeStyles(props.styles?.rowRoot)} wrap={props.itemsPerRow === 'wrap'} horizontal key={rowIndex} tokens={{\n childrenGap: '0.5rem'\n }} data-ui-id=\"video-effects-picker-row\">\n {options.map(option => <~~FocusZone~~ ~~key~~={option.itemKey} ~~shouldFocusOnMount~~={option.itemKey~~.includes('none')~~}>\n <_VideoEffectsItem {...option} itemKey={option.itemKey} ~~/>\~~n ~~</FocusZone>~~)}\n {fillCount > 0 && rowIndex === optionsByRow.length - 1 && Array.from({\n length: fillCount\n }).map((_, index) => <Stack key={index} styles={hiddenVideoEffectsItemContainerStyles} data-ui-id=\"video-effects-hidden-item\" />)}\n </Stack>)}\n </Stack>;\n};"]}
1	+ {"version":3,"file":"VideoBackgroundEffectsPicker.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, Label, mergeStyles, Stack } from '@fluentui/react';\nimport { useWarnings } from '@fluentui/react-hooks';\nimport React from 'react';\nimport { chunk } from '../utils';\nimport { _VideoEffectsItem, _VideoEffectsItemProps } from './VideoEffectsItem';\nimport { hiddenVideoEffectsItemContainerStyles } from './VideoEffectsItem.styles';\n\n/*\n Props for {@link _VideoBackgroundEffectsPicker}\n * @internal\n /\nexport interface _VideoBackgroundEffectsPickerProps {\n /\n The options to display in the picker.\n /\n options: _VideoBackgroundEffectChoiceOption[];\n\n /\n The key of the current selected Video Background Effect.\n * If you provide this, you must maintain selection state by observing onChange events and passing a new value in when changed.\n /\n selectedEffectKey?: string;\n\n /\n Callback to invoke when a Video Background Effect is selected.\n * @param effectKey - The key of the Video Background Effect that was selected.\n /\n onChange?: (effectKey: string) => void;\n\n /\n The key of the Video Background Effect that is initially selected.\n * Only provide this if the picker is an uncontrolled component;\n * otherwise, use the `selectedEffectKey` property.\n /\n defaultSelectedEffectKey?: string;\n\n /\n The label to display for the picker.\n /\n label?: string;\n\n /\n The number of items to display per row.\n * @default 3\n /\n itemsPerRow?: 'wrap' \| number;\n\n /\n Styles for the picker.\n /\n styles?: _VideoBackgroundEffectsPickerStyles;\n}\n\n/\n Option for the {@link _VideoBackgroundEffectsPicker}.\n * @internal\n /\nexport type _VideoBackgroundEffectChoiceOption = _VideoEffectsItemProps;\n\n/\n Styles for the {@link _VideoBackgroundEffectsPicker}.\n * @internal\n /\nexport interface _VideoBackgroundEffectsPickerStyles {\n /\n Styles for the root element.\n /\n root?: IStyle;\n\n /\n Styles for the label.\n /\n label?: IStyle;\n\n /\n Styles for the root of each row element.\n /\n rowRoot?: IStyle;\n}\n\n/\n Picker for choosing a Video Background Effect.\n \n @remarks\n * This functions similar to a radio group of buttons, where the user can select one of the options.\n \n @internal\n */\nexport const _VideoBackgroundEffectsPicker = (props: _VideoBackgroundEffectsPickerProps): JSX.Element => {\n const [componentControlledSelectedEffectKey, setComponentControlledSelectedEffectKey] = React.useState<string \| undefined>(props.defaultSelectedEffectKey);\n\n // Warn the developer if they use the component in an incorrect controlled way.\n useWarnings({\n name: 'VideoBackgroundEffectsPicker',\n props,\n controlledUsage: {\n onChangeProp: 'onChange',\n valueProp: 'selectedEffectKey',\n defaultValueProp: 'defaultSelectedEffectKey'\n }\n });\n const selectedEffect = props.selectedEffectKey ?? componentControlledSelectedEffectKey;\n const setSelectedEffect = (selectedEffectKey: string): void => {\n setComponentControlledSelectedEffectKey(selectedEffectKey);\n props.onChange?.(selectedEffectKey);\n };\n const convertedOptions: _VideoEffectsItemProps[] = props.options.map(option => ({\n isSelected: option.itemKey === selectedEffect,\n onSelect: () => setSelectedEffect(option.itemKey),\n ...option\n }));\n const itemsPerRow = props.itemsPerRow ?? 3;\n const optionsByRow = itemsPerRow === 'wrap' ? [convertedOptions] : chunk(convertedOptions, itemsPerRow);\n\n // If the final row is not full, fill it with hidden items to ensure layout.\n const fillCount = itemsPerRow === 'wrap' ? 0 : itemsPerRow - optionsByRow[optionsByRow.length - 1].length;\n return <Stack tokens={{\n childrenGap: '0.5rem'\n }}>\n <Label className={mergeStyles(props.styles?.label)}>{props.label}</Label>\n {optionsByRow.map((options, rowIndex) => <Stack className={mergeStyles(props.styles?.rowRoot)} wrap={props.itemsPerRow === 'wrap'} horizontal key={rowIndex} tokens={{\n childrenGap: '0.5rem'\n }} data-ui-id=\"video-effects-picker-row\">\n {options.map((option, i) => {\n if (i === 0 && rowIndex === 0) {\n return <_VideoEffectsItem {...option} itemKey={option.itemKey} key={option.itemKey} focusOnMount={true} />;\n }\n return <_VideoEffectsItem {...option} itemKey={option.itemKey} key={option.itemKey} />;\n })}\n {fillCount > 0 && rowIndex === optionsByRow.length - 1 && Array.from({\n length: fillCount\n }).map((_, index) => <Stack key={index} styles={hiddenVideoEffectsItemContainerStyles} data-ui-id=\"video-effects-hidden-item\" />)}\n </Stack>)}\n </Stack>;\n};"]}

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

@@ -59,6 +59,10 @@ export interface _VideoEffectsItemProps {
      * Styles for the Video effects item.
      */
     styles?: _VideoEffectsItemStyles;
+    /**
+     * Should focus on mounting of the picker item
+     */
+    focusOnMount?: boolean;
 }
 /**
  * Styles for {@link _VideoEffectsItem}

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

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-import { Icon, mergeStyles, Stack, Text, TooltipHost, useTheme } from '@fluentui/react';
-import React, { useCallback } from 'react';
+import { DefaultButton, Icon, mergeStyles, Stack, Text, TooltipHost, useTheme } from '@fluentui/react';
+import React, { useCallback, useEffect } from 'react';
 import { videoEffectsItemContainerStyles } from './VideoEffectsItem.styles';
 /**
  * A component for displaying a Video Background Effect Option.
@@ -20,20 +20,30 @@ export const _VideoEffectsItem = (props) => {
         disabled,
         backgroundImage
     }), [backgroundImage, disabled, isSelected, theme]);
+    const componentRef = React.createRef();
+    useEffect(() => {
+        if (props.focusOnMount && componentRef.current) {
+            componentRef.current.focus();
+        }
+    }, [componentRef, props.focusOnMount]);
     return React.createElement(TooltipHost, Object.assign({}, props.tooltipProps),
-        React.createElement(Stack, { key: props.itemKey, className: mergeStyles((_d = props.styles) === null || _d === void 0 ? void 0 : _d.root), verticalAlign: "center", horizontalAlign: "center", styles: containerStyles, "data-ui-id": `video-effects-item`, onClick: disabled ? undefined : () => { var _a; return (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, props.itemKey); }, onKeyDown: disabled ? undefined : e => {
-                var _a;
-                if (e.key === 'Enter' || e.key === ' ') {
-                    (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, props.itemKey);
-                }
-            }, tabIndex: props.disabled ? -1 : 0, "aria-label": (_e = props.ariaLabel) !== null && _e !== void 0 ? _e : props.itemKey, "aria-disabled": props.disabled, role: "button" },
-            props.iconProps && React.createElement(Stack.Item, { styles: {
-                    root: (_f = props.styles) === null || _f === void 0 ? void 0 : _f.iconContainer
+        React.createElement(Stack, { key: props.itemKey, className: mergeStyles((_d = props.styles) === null || _d === void 0 ? void 0 : _d.root), verticalAlign: "center", horizontalAlign: "center", "data-ui-id": `video-effects-item`, "aria-label": (_e = props.ariaLabel) !== null && _e !== void 0 ? _e : props.itemKey, "aria-disabled": props.disabled },
+            React.createElement(DefaultButton, { styles: containerStyles(), onClick: disabled ? undefined : () => { var _a; return (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, props.itemKey); }, componentRef: componentRef, autoFocus: props.focusOnMount, onKeyDown: disabled ? undefined : e => {
+                    var _a;
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, props.itemKey);
+                    }
                 } },
-                React.createElement(Icon, Object.assign({}, props.iconProps))),
-            props.title && React.createElement(Stack.Item, { styles: {
-                    root: (_g = props.styles) === null || _g === void 0 ? void 0 : _g.textContainer
-                } },
-                React.createElement(Text, { variant: "small" }, props.title))));
+                React.createElement(Stack, { horizontalAlign: 'center', tokens: {
+                        childrenGap: '0.15rem'
+                    } },
+                    props.iconProps && React.createElement(Stack.Item, { styles: {
+                            root: (_f = props.styles) === null || _f === void 0 ? void 0 : _f.iconContainer
+                        } },
+                        React.createElement(Icon, Object.assign({}, props.iconProps))),
+                    props.title && React.createElement(Stack.Item, { styles: {
+                            root: (_g = props.styles) === null || _g === void 0 ? void 0 : _g.textContainer
+                        } },
+                        React.createElement(Text, { variant: "small" }, props.title))))));
 };
 //# sourceMappingURL=VideoEffectsItem.js.map