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/Caption.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Caption.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/Caption.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAY,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC9E,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,gBAAgB,EAAE,iCAAiC,EAAE,oBAAoB,EAAE,6BAA6B,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAgBlK;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAe,EAAE;IAC5D,MAAM,EACJ,WAAW,EACX,MAAM,EACN,WAAW,EACX,cAAc,EACf,GAAG,KAAK,CAAC;IACV,MAAM,cAAc,GAAa;QAC/B,kBAAkB,EAAE,IAAI;QACxB,IAAI,EAAE,WAAW,CAAC,MAAM;QACxB,IAAI,EAAE,WAAW;QACjB,mBAAmB,EAAE,KAAK;QAC1B,iBAAiB,EAAE,OAAO;QAC1B,MAAM,EAAE;YACN,IAAI,EAAE;gBACJ,MAAM,EAAE,SAAS;aAClB;SACF;KACF,CAAC;IACF,MAAM,QAAQ,GAAG,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,EAAE,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,oBAAC,OAAO,oBAAK,cAAc,EAAI,CAAC;IACjH,OAAO,oBAAC,KAAK,IAAC,UAAU,QAAC,aAAa,EAAC,OAAO,EAAC,eAAe,EAAC,OAAO;QAClE,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,aAAa,IAAG,QAAQ,CAAc;QAE7D,oBAAC,KAAK,IAAC,aAAa,EAAC,OAAO,EAAC,SAAS,EAAE,iCAAiC;YACvE,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,6BAA6B;gBAClD,oBAAC,IAAI,IAAC,SAAS,EAAE,oBAAoB,IAAG,WAAW,CAAQ,CAChD;YACb,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,gBAAgB,EAAE,GAAG,EAAC,MAAM,IAChD,WAAW,CACD,CACP,CACF,CAAC;AACb,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IPersona, Persona, Stack, PersonaSize, Text } from '@fluentui/react';\nimport React from 'react';\nimport { _FileUploadCardsStrings } from './FileUploadCards';\nimport { OnRenderAvatarCallback } from '../types';\nimport { captionClassName, captionsContentContainerClassName, displayNameClassName, displayNameContainerClassName, iconClassName } from './styles/Captions.style';\nimport { _CaptionsInfo } from './CaptionsBanner';\n\n/*\n @internal\n * Props for a single line of caption.\n /\nexport interface _CaptionProps extends _CaptionsInfo {\n /\n Optional callback to override render of the avatar.\n \n @param userId - user Id\n /\n onRenderAvatar?: OnRenderAvatarCallback;\n}\n\n/\n @internal\n * A component for displaying a single line of caption\n */\nexport const _Caption = (props: _CaptionProps): JSX.Element => {\n const {\n displayName,\n userId,\n captionText,\n onRenderAvatar\n } = props;\n const personaOptions: IPersona = {\n hidePersonaDetails: true,\n size: PersonaSize.size32,\n text: displayName,\n showOverflowTooltip: false,\n initialsTextColor: 'white',\n styles: {\n root: {\n margin: '0.25rem'\n }\n }\n };\n const userIcon = onRenderAvatar ? onRenderAvatar(userId ?? '', personaOptions) : <Persona {...personaOptions} />;\n return <Stack horizontal verticalAlign=\"start\" horizontalAlign=\"start\">\n <Stack.Item className={iconClassName}>{userIcon}</Stack.Item>\n\n <Stack verticalAlign=\"start\" className={captionsContentContainerClassName}>\n <Stack.Item className={displayNameContainerClassName}>\n <Text className={displayNameClassName}>{displayName}</Text>\n </Stack.Item>\n <Stack.Item className={captionClassName} dir=\"auto\">\n {captionText}\n </Stack.Item>\n </Stack>\n </Stack>;\n};"]}
1	+ {"version":3,"file":"Caption.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/Caption.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAY,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC9E,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,gBAAgB,EAAE,iCAAiC,EAAE,oBAAoB,EAAE,6BAA6B,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAgBlK;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAe,EAAE;IAC5D,MAAM,EACJ,WAAW,EACX,MAAM,EACN,WAAW,EACX,cAAc,EACf,GAAG,KAAK,CAAC;IACV,MAAM,cAAc,GAAa;QAC/B,kBAAkB,EAAE,IAAI;QACxB,IAAI,EAAE,WAAW,CAAC,MAAM;QACxB,IAAI,EAAE,WAAW;QACjB,mBAAmB,EAAE,KAAK;QAC1B,uBAAuB,EAAE,IAAI;QAC7B,iBAAiB,EAAE,OAAO;QAC1B,MAAM,EAAE;YACN,IAAI,EAAE;gBACJ,MAAM,EAAE,SAAS;aAClB;SACF;KACF,CAAC;IACF,MAAM,QAAQ,GAAG,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,EAAE,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,oBAAC,OAAO,oBAAK,cAAc,EAAI,CAAC;IACjH,OAAO,oBAAC,KAAK,IAAC,UAAU,QAAC,aAAa,EAAC,OAAO,EAAC,eAAe,EAAC,OAAO;QAClE,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,aAAa,IAAG,QAAQ,CAAc;QAE7D,oBAAC,KAAK,IAAC,aAAa,EAAC,OAAO,EAAC,SAAS,EAAE,iCAAiC;YACvE,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,6BAA6B;gBAClD,oBAAC,IAAI,IAAC,SAAS,EAAE,oBAAoB,IAAG,WAAW,CAAQ,CAChD;YACb,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,gBAAgB,EAAE,GAAG,EAAC,MAAM,IAChD,WAAW,CACD,CACP,CACF,CAAC;AACb,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IPersona, Persona, Stack, PersonaSize, Text } from '@fluentui/react';\nimport React from 'react';\nimport { _FileUploadCardsStrings } from './FileUploadCards';\nimport { OnRenderAvatarCallback } from '../types';\nimport { captionClassName, captionsContentContainerClassName, displayNameClassName, displayNameContainerClassName, iconClassName } from './styles/Captions.style';\nimport { _CaptionsInfo } from './CaptionsBanner';\n\n/*\n @internal\n * Props for a single line of caption.\n /\nexport interface _CaptionProps extends _CaptionsInfo {\n /\n Optional callback to override render of the avatar.\n \n @param userId - user Id\n /\n onRenderAvatar?: OnRenderAvatarCallback;\n}\n\n/\n @internal\n * A component for displaying a single line of caption\n */\nexport const _Caption = (props: _CaptionProps): JSX.Element => {\n const {\n displayName,\n userId,\n captionText,\n onRenderAvatar\n } = props;\n const personaOptions: IPersona = {\n hidePersonaDetails: true,\n size: PersonaSize.size32,\n text: displayName,\n showOverflowTooltip: false,\n imageShouldStartVisible: true,\n initialsTextColor: 'white',\n styles: {\n root: {\n margin: '0.25rem'\n }\n }\n };\n const userIcon = onRenderAvatar ? onRenderAvatar(userId ?? '', personaOptions) : <Persona {...personaOptions} />;\n return <Stack horizontal verticalAlign=\"start\" horizontalAlign=\"start\">\n <Stack.Item className={iconClassName}>{userIcon}</Stack.Item>\n\n <Stack verticalAlign=\"start\" className={captionsContentContainerClassName}>\n <Stack.Item className={displayNameContainerClassName}>\n <Text className={displayNameClassName}>{displayName}</Text>\n </Stack.Item>\n <Stack.Item className={captionClassName} dir=\"auto\">\n {captionText}\n </Stack.Item>\n </Stack>\n </Stack>;\n};"]}

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

@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-import { concatStyleSets, Icon, mergeStyles } from '@fluentui/react';
+import { concatStyleSets, Icon, mergeStyles, Stack } from '@fluentui/react';
 import { ChatMyMessage } from '@fluentui-contrib/react-chat';
 import { mergeClasses } from '@fluentui/react-components';
 import { _formatString } from "../../../../acs-ui-common/src";
@@ -10,7 +10,7 @@ import { editBoxStyle, inputBoxIcon, editingButtonStyle, editBoxStyleSet } from
 import { InputBoxButton, InputBoxComponent } from '../InputBoxComponent';
 import { useChatMyMessageStyles } from '../styles/MessageThread.styles';
 import { _FileUploadCards } from '../FileUploadCards';
-import { chatMessageFailedTagStyle, useChatMessageEditContainerStyles } from '../styles/ChatMessageComponent.styles';
+import { chatMessageFailedTagStyle, editChatMessageFailedTagStyle, chatMessageFailedTagStackItemStyle, editChatMessageButtonsStackStyle, useChatMessageEditContainerStyles } from '../styles/ChatMessageComponent.styles';
 const MAXIMUM_LENGTH_OF_MESSAGE = 8000;
 const onRenderCancelIcon = (color) => {
     const className = mergeStyles(inputBoxIcon, {
@@ -72,7 +72,7 @@ export const ChatMessageComponentAsEditBox = (props) => {
     }, [attachedFilesMetadata]);
     const getContent = () => {
         return React.createElement(React.Fragment, null,
-            React.createElement(InputBoxComponent, { inlineChildren: false, id: 'editbox', textFieldRef: editTextFieldRef, inputClassName: editBoxStyle, placeholderText: strings.editBoxPlaceholderText, textValue: textValue, onChange: setText, onKeyDown: ev => {
+            React.createElement(InputBoxComponent, { id: 'editbox', textFieldRef: editTextFieldRef, inputClassName: editBoxStyle, placeholderText: strings.editBoxPlaceholderText, textValue: textValue, onChange: setText, onKeyDown: ev => {
                     if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown') {
                         ev.stopPropagation();
                     }
@@ -81,19 +81,23 @@ export const ChatMessageComponentAsEditBox = (props) => {
                         attachedFilesMetadata
                     });
                 }, supportNewline: false, maxLength: MAXIMUM_LENGTH_OF_MESSAGE, errorMessage: textTooLongMessage, styles: editBoxStyles,
-                /* @conditional-compile-remove(mention) */ mentionLookupOptions: mentionLookupOptions },
-                React.createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxCancelButton, tooltipContent: strings.editBoxCancelButton, onRenderIcon: onRenderThemedCancelIcon, onClick: () => {
-                        onCancel && onCancel(message.messageId);
-                    }, id: 'dismissIconWrapper' }),
-                React.createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxSubmitButton, tooltipContent: strings.editBoxSubmitButton, onRenderIcon: onRenderThemedSubmitIcon, onClick: e => {
-                        submitEnabled && onSubmit(textValue, message.metadata, {
-                            attachedFilesMetadata
-                        });
-                        e.stopPropagation();
-                    }, id: 'submitIconWrapper' })),
-            message.failureReason && React.createElement("div", { className: mergeStyles(chatMessageFailedTagStyle(theme), {
-                    padding: '0.5rem'
-                }) }, message.failureReason),
+                /* @conditional-compile-remove(mention) */ mentionLookupOptions: mentionLookupOptions }),
+            React.createElement(Stack, { horizontal: true, horizontalAlign: "end", className: editChatMessageButtonsStackStyle, tokens: {
+                    childrenGap: '0.25rem'
+                } },
+                message.failureReason && React.createElement(Stack.Item, { grow: true, align: "stretch", className: chatMessageFailedTagStackItemStyle },
+                    React.createElement("div", { className: mergeStyles(chatMessageFailedTagStyle(theme), editChatMessageFailedTagStyle) }, message.failureReason)),
+                React.createElement(Stack.Item, { align: "end" },
+                    React.createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxCancelButton, tooltipContent: strings.editBoxCancelButton, onRenderIcon: onRenderThemedCancelIcon, onClick: () => {
+                            onCancel && onCancel(message.messageId);
+                        }, id: 'dismissIconWrapper' })),
+                React.createElement(Stack.Item, { align: "end" },
+                    React.createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxSubmitButton, tooltipContent: strings.editBoxSubmitButton, onRenderIcon: onRenderThemedSubmitIcon, onClick: e => {
+                            submitEnabled && onSubmit(textValue, message.metadata, {
+                                attachedFilesMetadata
+                            });
+                            e.stopPropagation();
+                        }, id: 'submitIconWrapper' }))),
             onRenderFileUploads());
     };
     const bodyClassName = mergeClasses(editContainerStyles.body, message.failureReason !== undefined ? editContainerStyles.bodyError : editContainerStyles.bodyDefault);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ChatMessageComponentAsEditBox.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ChatMessage/ChatMessageComponentAsEditBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets, Icon, ITextField, mergeStyles } from '@fluentui/react';\nimport { ChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useTheme } from '../../theming/FluentThemeProvider';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { editBoxStyle, inputBoxIcon, editingButtonStyle, editBoxStyleSet } from '../styles/EditBox.styles';\nimport { InputBoxButton, InputBoxComponent } from '../InputBoxComponent';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { useChatMyMessageStyles } from '../styles/MessageThread.styles';\nimport { ChatMessage } from '../../types';\nimport { _FileUploadCards } from '../FileUploadCards';\nimport { FileMetadata } from '../FileDownloadCards';\nimport { chatMessageFailedTagStyle, useChatMessageEditContainerStyles } from '../styles/ChatMessageComponent.styles';\n/* @conditional-compile-remove(mention) /\nimport { MentionLookupOptions } from '../MentionPopover';\nconst MAXIMUM_LENGTH_OF_MESSAGE = 8000;\nconst onRenderCancelIcon = (color: string): JSX.Element => {\n const className = mergeStyles(inputBoxIcon, {\n color\n });\n return <Icon iconName={'EditBoxCancel'} className={className} />;\n};\nconst onRenderSubmitIcon = (color: string): JSX.Element => {\n const className = mergeStyles(inputBoxIcon, {\n color\n });\n return <Icon iconName={'EditBoxSubmit'} className={className} />;\n};\n\n/* @private /\nexport type ChatMessageComponentAsEditBoxProps = {\n onCancel?: (messageId: string) => void;\n onSubmit: (text: string, metadata?: Record<string, string>, options?: {\n attachedFilesMetadata?: FileMetadata[];\n }) => void;\n message: ChatMessage;\n strings: MessageThreadStrings;\n / @conditional-compile-remove(mention) /\n mentionLookupOptions?: MentionLookupOptions;\n};\ntype MessageState = 'OK' \| 'too short' \| 'too long';\n\n/\n @private\n /\nexport const ChatMessageComponentAsEditBox = (props: ChatMessageComponentAsEditBoxProps): JSX.Element => {\n const {\n onCancel,\n onSubmit,\n strings,\n message\n } = props;\n / @conditional-compile-remove(mention) /\n const {\n mentionLookupOptions\n } = props;\n const [textValue, setTextValue] = useState<string>(message.content \|\| '');\n const [attachedFilesMetadata, setAttachedFilesMetadata] = React.useState(getMessageAttachedFilesMetadata(message));\n const editTextFieldRef = React.useRef<ITextField>(null);\n const theme = useTheme();\n const messageState = getMessageState(textValue, attachedFilesMetadata ?? []);\n const submitEnabled = messageState === 'OK';\n const editContainerStyles = useChatMessageEditContainerStyles();\n const chatMyMessageStyles = useChatMyMessageStyles();\n useEffect(() => {\n editTextFieldRef.current?.focus();\n }, []);\n const setText = (event?: React.FormEvent<HTMLInputElement \| HTMLTextAreaElement>, newValue?: string): void => {\n setTextValue(newValue ?? '');\n };\n const textTooLongMessage = messageState === 'too long' ? _formatString(strings.editBoxTextLimit, {\n limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}`\n }) : undefined;\n const onRenderThemedCancelIcon = useCallback((isHover: boolean) => onRenderCancelIcon(isHover ? theme.palette.accent : theme.palette.neutralSecondary), [theme.palette.neutralSecondary, theme.palette.accent]);\n const onRenderThemedSubmitIcon = useCallback((isHover: boolean) => onRenderSubmitIcon(isHover ? theme.palette.accent : theme.palette.neutralSecondary), [theme.palette.neutralSecondary, theme.palette.accent]);\n const editBoxStyles = useMemo(() => {\n return concatStyleSets(editBoxStyleSet, {\n textField: {\n borderColor: theme.palette.themePrimary\n }\n });\n }, [theme.palette.themePrimary]);\n const onRenderFileUploads = useCallback(() => {\n return !!attachedFilesMetadata && attachedFilesMetadata.length > 0 && <div style={{\n margin: '0.25rem'\n }}>\n <_FileUploadCards activeFileUploads={attachedFilesMetadata?.map(file => ({\n id: file.name,\n filename: file.name,\n progress: 1\n }))} onCancelFileUpload={fileId => {\n setAttachedFilesMetadata(attachedFilesMetadata?.filter(file => file.name !== fileId));\n }} />\n </div>;\n }, [attachedFilesMetadata]);\n const getContent = (): JSX.Element => {\n return <>\n <InputBoxComponent inlineChildren={false} id={'editbox'} textFieldRef={editTextFieldRef} inputClassName={editBoxStyle} placeholderText={strings.editBoxPlaceholderText} textValue={textValue} onChange={setText} onKeyDown={ev => {\n if (ev.key === 'ArrowUp' \|\| ev.key === 'ArrowDown') {\n ev.stopPropagation();\n }\n }} onEnterKeyDown={() => {\n submitEnabled && onSubmit(textValue, message.metadata, {\n attachedFilesMetadata\n });\n }} supportNewline={false} maxLength={MAXIMUM_LENGTH_OF_MESSAGE} errorMessage={textTooLongMessage} styles={editBoxStyles}\n / @conditional-compile-remove(mention) / mentionLookupOptions={mentionLookupOptions}>\n <InputBoxButton className={editingButtonStyle} ariaLabel={strings.editBoxCancelButton} tooltipContent={strings.editBoxCancelButton} onRenderIcon={onRenderThemedCancelIcon} onClick={() => {\n onCancel && onCancel(message.messageId);\n }} id={'dismissIconWrapper'} />\n <InputBoxButton className={editingButtonStyle} ariaLabel={strings.editBoxSubmitButton} tooltipContent={strings.editBoxSubmitButton} onRenderIcon={onRenderThemedSubmitIcon} onClick={e => {\n submitEnabled && onSubmit(textValue, message.metadata, {\n attachedFilesMetadata\n });\n e.stopPropagation();\n }} id={'submitIconWrapper'} />\n </InputBoxComponent>\n {message.failureReason && <div className={mergeStyles(chatMessageFailedTagStyle(theme), {\n padding: '0.5rem'\n })}>\n {message.failureReason}\n </div>}\n {onRenderFileUploads()}\n </>;\n };\n const bodyClassName = mergeClasses(editContainerStyles.body, message.failureReason !== undefined ? editContainerStyles.bodyError : editContainerStyles.bodyDefault);\n return <ChatMyMessage root={{\n className: mergeClasses(chatMyMessageStyles.root, editContainerStyles.root)\n }} body={{\n className: bodyClassName\n }}>\n {getContent()}\n </ChatMyMessage>;\n};\nconst isMessageTooLong = (messageText: string): boolean => messageText.length > MAXIMUM_LENGTH_OF_MESSAGE;\nconst isMessageEmpty = (messageText: string, attachedFilesMetadata: FileMetadata[]): boolean => messageText.trim().length === 0 && attachedFilesMetadata.length === 0;\nconst getMessageState = (messageText: string, attachedFilesMetadata: FileMetadata[]): MessageState => isMessageEmpty(messageText, attachedFilesMetadata) ? 'too short' : isMessageTooLong(messageText) ? 'too long' : 'OK';\n\n// @TODO: Remove when file-sharing feature becomes stable.\nconst getMessageAttachedFilesMetadata = (message: ChatMessage): FileMetadata[] \| undefined => {\n / @conditional-compile-remove(file-sharing) */\n return message.attachedFilesMetadata;\n return [];\n};\"../../../../acs-ui-common/src\""]}
1	+ {"version":3,"file":"ChatMessageComponentAsEditBox.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ChatMessage/ChatMessageComponentAsEditBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets, Icon, ITextField, mergeStyles, Stack } from '@fluentui/react';\nimport { ChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useTheme } from '../../theming/FluentThemeProvider';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { editBoxStyle, inputBoxIcon, editingButtonStyle, editBoxStyleSet } from '../styles/EditBox.styles';\nimport { InputBoxButton, InputBoxComponent } from '../InputBoxComponent';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { useChatMyMessageStyles } from '../styles/MessageThread.styles';\nimport { ChatMessage } from '../../types';\nimport { _FileUploadCards } from '../FileUploadCards';\nimport { FileMetadata } from '../FileDownloadCards';\nimport { chatMessageFailedTagStyle, editChatMessageFailedTagStyle, chatMessageFailedTagStackItemStyle, editChatMessageButtonsStackStyle, useChatMessageEditContainerStyles } from '../styles/ChatMessageComponent.styles';\n/* @conditional-compile-remove(mention) /\nimport { MentionLookupOptions } from '../MentionPopover';\nconst MAXIMUM_LENGTH_OF_MESSAGE = 8000;\nconst onRenderCancelIcon = (color: string): JSX.Element => {\n const className = mergeStyles(inputBoxIcon, {\n color\n });\n return <Icon iconName={'EditBoxCancel'} className={className} />;\n};\nconst onRenderSubmitIcon = (color: string): JSX.Element => {\n const className = mergeStyles(inputBoxIcon, {\n color\n });\n return <Icon iconName={'EditBoxSubmit'} className={className} />;\n};\n\n/* @private /\nexport type ChatMessageComponentAsEditBoxProps = {\n onCancel?: (messageId: string) => void;\n onSubmit: (text: string, metadata?: Record<string, string>, options?: {\n attachedFilesMetadata?: FileMetadata[];\n }) => void;\n message: ChatMessage;\n strings: MessageThreadStrings;\n / @conditional-compile-remove(mention) /\n mentionLookupOptions?: MentionLookupOptions;\n};\ntype MessageState = 'OK' \| 'too short' \| 'too long';\n\n/\n @private\n /\nexport const ChatMessageComponentAsEditBox = (props: ChatMessageComponentAsEditBoxProps): JSX.Element => {\n const {\n onCancel,\n onSubmit,\n strings,\n message\n } = props;\n / @conditional-compile-remove(mention) /\n const {\n mentionLookupOptions\n } = props;\n const [textValue, setTextValue] = useState<string>(message.content \|\| '');\n const [attachedFilesMetadata, setAttachedFilesMetadata] = React.useState(getMessageAttachedFilesMetadata(message));\n const editTextFieldRef = React.useRef<ITextField>(null);\n const theme = useTheme();\n const messageState = getMessageState(textValue, attachedFilesMetadata ?? []);\n const submitEnabled = messageState === 'OK';\n const editContainerStyles = useChatMessageEditContainerStyles();\n const chatMyMessageStyles = useChatMyMessageStyles();\n useEffect(() => {\n editTextFieldRef.current?.focus();\n }, []);\n const setText = (event?: React.FormEvent<HTMLInputElement \| HTMLTextAreaElement>, newValue?: string): void => {\n setTextValue(newValue ?? '');\n };\n const textTooLongMessage = messageState === 'too long' ? _formatString(strings.editBoxTextLimit, {\n limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}`\n }) : undefined;\n const onRenderThemedCancelIcon = useCallback((isHover: boolean) => onRenderCancelIcon(isHover ? theme.palette.accent : theme.palette.neutralSecondary), [theme.palette.neutralSecondary, theme.palette.accent]);\n const onRenderThemedSubmitIcon = useCallback((isHover: boolean) => onRenderSubmitIcon(isHover ? theme.palette.accent : theme.palette.neutralSecondary), [theme.palette.neutralSecondary, theme.palette.accent]);\n const editBoxStyles = useMemo(() => {\n return concatStyleSets(editBoxStyleSet, {\n textField: {\n borderColor: theme.palette.themePrimary\n }\n });\n }, [theme.palette.themePrimary]);\n const onRenderFileUploads = useCallback(() => {\n return !!attachedFilesMetadata && attachedFilesMetadata.length > 0 && <div style={{\n margin: '0.25rem'\n }}>\n <_FileUploadCards activeFileUploads={attachedFilesMetadata?.map(file => ({\n id: file.name,\n filename: file.name,\n progress: 1\n }))} onCancelFileUpload={fileId => {\n setAttachedFilesMetadata(attachedFilesMetadata?.filter(file => file.name !== fileId));\n }} />\n </div>;\n }, [attachedFilesMetadata]);\n const getContent = (): JSX.Element => {\n return <>\n <InputBoxComponent id={'editbox'} textFieldRef={editTextFieldRef} inputClassName={editBoxStyle} placeholderText={strings.editBoxPlaceholderText} textValue={textValue} onChange={setText} onKeyDown={ev => {\n if (ev.key === 'ArrowUp' \|\| ev.key === 'ArrowDown') {\n ev.stopPropagation();\n }\n }} onEnterKeyDown={() => {\n submitEnabled && onSubmit(textValue, message.metadata, {\n attachedFilesMetadata\n });\n }} supportNewline={false} maxLength={MAXIMUM_LENGTH_OF_MESSAGE} errorMessage={textTooLongMessage} styles={editBoxStyles}\n / @conditional-compile-remove(mention) / mentionLookupOptions={mentionLookupOptions}></InputBoxComponent>\n <Stack horizontal horizontalAlign=\"end\" className={editChatMessageButtonsStackStyle} tokens={{\n childrenGap: '0.25rem'\n }}>\n {message.failureReason && <Stack.Item grow align=\"stretch\" className={chatMessageFailedTagStackItemStyle}>\n <div className={mergeStyles(chatMessageFailedTagStyle(theme), editChatMessageFailedTagStyle)}>\n {message.failureReason}\n </div>\n </Stack.Item>}\n <Stack.Item align=\"end\">\n <InputBoxButton className={editingButtonStyle} ariaLabel={strings.editBoxCancelButton} tooltipContent={strings.editBoxCancelButton} onRenderIcon={onRenderThemedCancelIcon} onClick={() => {\n onCancel && onCancel(message.messageId);\n }} id={'dismissIconWrapper'} />\n </Stack.Item>\n <Stack.Item align=\"end\">\n <InputBoxButton className={editingButtonStyle} ariaLabel={strings.editBoxSubmitButton} tooltipContent={strings.editBoxSubmitButton} onRenderIcon={onRenderThemedSubmitIcon} onClick={e => {\n submitEnabled && onSubmit(textValue, message.metadata, {\n attachedFilesMetadata\n });\n e.stopPropagation();\n }} id={'submitIconWrapper'} />\n </Stack.Item>\n </Stack>\n {onRenderFileUploads()}\n </>;\n };\n const bodyClassName = mergeClasses(editContainerStyles.body, message.failureReason !== undefined ? editContainerStyles.bodyError : editContainerStyles.bodyDefault);\n return <ChatMyMessage root={{\n className: mergeClasses(chatMyMessageStyles.root, editContainerStyles.root)\n }} body={{\n className: bodyClassName\n }}>\n {getContent()}\n </ChatMyMessage>;\n};\nconst isMessageTooLong = (messageText: string): boolean => messageText.length > MAXIMUM_LENGTH_OF_MESSAGE;\nconst isMessageEmpty = (messageText: string, attachedFilesMetadata: FileMetadata[]): boolean => messageText.trim().length === 0 && attachedFilesMetadata.length === 0;\nconst getMessageState = (messageText: string, attachedFilesMetadata: FileMetadata[]): MessageState => isMessageEmpty(messageText, attachedFilesMetadata) ? 'too short' : isMessageTooLong(messageText) ? 'too long' : 'OK';\n\n// @TODO: Remove when file-sharing feature becomes stable.\nconst getMessageAttachedFilesMetadata = (message: ChatMessage): FileMetadata[] \| undefined => {\n / @conditional-compile-remove(file-sharing) */\n return message.attachedFilesMetadata;\n return [];\n};\"../../../../acs-ui-common/src\""]}

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

@@ -129,11 +129,7 @@ const MessageBubble = (props) => {
         React.createElement("div", { key: props.message.messageId, ref: messageRef }, message.mine ? React.createElement(ChatMyMessage, { attached: attached, key: props.message.messageId, body: {
                 // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors
                 className: mergeClasses(chatMyMessageStyles.body, isBlockedMessage ? chatMessageCommonStyles.blocked : props.message.status === 'failed' ? chatMessageCommonStyles.failed : undefined, attached !== 'top' ? chatMyMessageStyles.bodyAttached : undefined, mergeStyles(messageContainerStyle)),
-                style: Object.assign({}, createStyleFromV8Style(messageContainerStyle)),
-                // make body not focusable to remove repetitions from narrators.
-                // inner components are already focusable
-                tabIndex: -1,
-                role: 'presentation'
+                style: Object.assign({}, createStyleFromV8Style(messageContainerStyle))
             }, root: {
                 className: chatMyMessageStyles.root,
                 onBlur: e => {
@@ -154,6 +150,7 @@ const MessageBubble = (props) => {
                 role: 'none',
                 tabIndex: -1
             }, "data-ui-id": "chat-composite-message", author: React.createElement(Text, { className: chatMessageDateStyle, tabIndex: 0 }, message.senderDisplayName), timestamp: React.createElement(Text, { className: chatMessageDateStyle, "data-ui-id": ids.messageTimestamp, tabIndex: 0 }, formattedTimestamp), details: getMessageDetails(), actions: {
+                tabIndex: 0,
                 children: actionMenuProps === null || actionMenuProps === void 0 ? void 0 : actionMenuProps.children,
                 className: mergeClasses(chatMyMessageStyles.menu,
                 // Make actions menu visible when the message is focused or the flyout is shown
@@ -172,14 +169,14 @@ const MessageBubble = (props) => {
                     props.onActionButtonClick(message, setMessageReadBy);
                 }
             } }, getContent()) : React.createElement(FluentChatMessage, { attached: attached, key: props.message.messageId, root: {
-                className: chatMessageStyles.root
-            }, author: React.createElement(Text, { className: chatMessageAuthorStyle }, message.senderDisplayName), body: {
-                className: chatItemMessageContainerClassName,
-                style: Object.assign({}, createStyleFromV8Style(messageContainerStyle)),
+                className: chatMessageStyles.root,
                 // make body not focusable to remove repetitions from narrators.
                 // inner components are already focusable
                 tabIndex: -1,
                 role: 'none'
+            }, author: React.createElement(Text, { className: chatMessageAuthorStyle }, message.senderDisplayName), body: {
+                className: chatItemMessageContainerClassName,
+                style: Object.assign({}, createStyleFromV8Style(messageContainerStyle))
             }, "data-ui-id": "chat-composite-message", timestamp: React.createElement(Text, { className: chatMessageDateStyle, "data-ui-id": ids.messageTimestamp }, formattedTimestamp) }, getContent())),
         chatActionsEnabled && React.createElement(ChatMessageActionFlyout, { hidden: !chatMessageActionFlyoutTarget, target: chatMessageActionFlyoutTarget, increaseFlyoutItemSize: wasInteractionByTouch, onDismiss: onActionFlyoutDismiss, onEditClick: onEditClick, onRemoveClick: onRemoveClick, onResendClick: onResendClick, strings: strings, messageReadBy: messageReadBy, messageStatus: messageStatus !== null && messageStatus !== void 0 ? messageStatus : 'failed', remoteParticipantsCount: remoteParticipantsCount, onRenderAvatar: onRenderAvatar, showMessageStatus: showMessageStatus }));
     return chatMessage;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ChatMessageComponentAsMessageBubble.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ChatMessage/ChatMessageComponentAsMessageBubble.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Text, mergeStyles, IStyle } from '@fluentui/react';\nimport { ChatMessage as FluentChatMessage, ChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useRef, useState } from 'react';\nimport { chatMessageEditedTagStyle, chatMessageDateStyle, chatMessageFailedTagStyle, chatMessageAuthorStyle } from '../styles/ChatMessageComponent.styles';\nimport { formatTimeForChatMessage, formatTimestampForChatMessage } from '../utils/Datetime';\nimport { useIdentifiers } from '../../identifiers/IdentifierProvider';\nimport { useTheme } from '../../theming';\nimport { ChatMessageActionFlyout } from './ChatMessageActionsFlyout';\nimport { ChatMessageContent } from './ChatMessageContent';\nimport { ChatMessage } from '../../types/ChatMessage';\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) /\nimport { FileMetadata } from '../FileDownloadCards';\n/ @conditional-compile-remove(data-loss-prevention) /\nimport { BlockedMessageContent } from './ChatMessageContent';\n/ @conditional-compile-remove(data-loss-prevention) /\nimport { BlockedMessage } from '../../types/ChatMessage';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { chatMessageActionMenuProps } from './ChatMessageActionMenu';\nimport { ComponentSlotStyle, OnRenderAvatarCallback } from '../../types';\nimport { _FileDownloadCards, FileDownloadHandler } from '../FileDownloadCards';\nimport { ComponentLocale, useLocale } from '../../localization';\n/ @conditional-compile-remove(mention) /\nimport { MentionDisplayOptions } from '../MentionPopover';\nimport { createStyleFromV8Style } from '../styles/v8StyleShim';\nimport { MessageStatus } from '@internal/acs-ui-common';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { useChatMessageStyles, useChatMyMessageStyles, useChatMessageCommonStyles } from '../styles/MessageThread.styles';\ntype ChatMessageComponentAsMessageBubbleProps = {\n message: ChatMessage \| / @conditional-compile-remove(data-loss-prevention) /BlockedMessage;\n messageContainerStyle?: ComponentSlotStyle;\n /* Styles for message status indicator container. /\n messageStatusContainer?: (mine: boolean) => IStyle;\n showDate?: boolean;\n disableEditing?: boolean;\n onEditClick: () => void;\n onRemoveClick?: () => void;\n onResendClick?: () => void;\n strings: MessageThreadStrings;\n userId: string;\n messageStatus?: string;\n /\n Whether the status indicator for each message is displayed or not.\n /\n showMessageStatus?: boolean;\n messageStatusRenderer?: (status: MessageStatus) => JSX.Element \| null;\n /\n Whether to overlap avatar and message when the view is width constrained.\n /\n shouldOverlapAvatarAndMessage: boolean;\n /\n Optional callback to render uploaded files in the message component.\n /\n onRenderFileDownloads?: (userId: string, message: ChatMessage) => JSX.Element;\n /\n Optional function called when someone clicks on the file download icon.\n /\n fileDownloadHandler?: FileDownloadHandler;\n remoteParticipantsCount?: number;\n onActionButtonClick: (message: ChatMessage, setMessageReadBy: (readBy: {\n id: string;\n displayName: string;\n }[]) => void) => void;\n /\n Optional callback to override render of the avatar.\n \n @param userId - user Id\n /\n onRenderAvatar?: OnRenderAvatarCallback;\n\n /\n Optional function to provide customized date format.\n * @beta\n /\n onDisplayDateTimeString?: (messageDate: Date) => string;\n / @conditional-compile-remove(mention) /\n /\n Optional props needed to display suggestions in the mention scenario.\n * @internal\n /\n mentionDisplayOptions?: MentionDisplayOptions;\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n /\n Optional function to fetch attachments.\n /\n onFetchAttachments?: (attachment: FileMetadata) => Promise<void>;\n / @conditional-compile-remove(image-gallery) /\n /\n Optional callback called when an inline image is clicked.\n * @beta\n /\n onInlineImageClicked?: (attachmentId: string, messageId: string) => Promise<void>;\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n /\n Optional map of attachment ids to blob urls.\n /\n attachmentsMap?: Record<string, string>;\n};\nconst generateDefaultTimestamp = (createdOn: Date, showDate: boolean \| undefined, strings: MessageThreadStrings): string => {\n const formattedTimestamp = showDate ? formatTimestampForChatMessage(createdOn, new Date(), strings) : formatTimeForChatMessage(createdOn);\n return formattedTimestamp;\n};\n\n// onDisplayDateTimeString from props overwrite onDisplayDateTimeString from locale\nconst generateCustomizedTimestamp = (props: ChatMessageComponentAsMessageBubbleProps, createdOn: Date, locale: ComponentLocale): string => {\n / @conditional-compile-remove(date-time-customization) /\n return props.onDisplayDateTimeString ? props.onDisplayDateTimeString(createdOn) : locale.onDisplayDateTimeString ? locale.onDisplayDateTimeString(createdOn) : '';\n return '';\n};\n/* @private /\nconst MessageBubble = (props: ChatMessageComponentAsMessageBubbleProps): JSX.Element => {\n const ids = useIdentifiers();\n const theme = useTheme();\n const locale = useLocale();\n const {\n userId,\n message,\n onRemoveClick,\n onResendClick,\n disableEditing,\n showDate,\n messageContainerStyle,\n strings,\n onEditClick,\n remoteParticipantsCount = 0,\n onRenderAvatar,\n showMessageStatus,\n messageStatus,\n fileDownloadHandler,\n / @conditional-compile-remove(image-gallery) /\n onInlineImageClicked,\n shouldOverlapAvatarAndMessage\n } = props;\n const defaultTimeStamp = message.createdOn ? generateDefaultTimestamp(message.createdOn, showDate, strings) : undefined;\n const customTimestamp = message.createdOn ? generateCustomizedTimestamp(props, message.createdOn, locale) : '';\n const formattedTimestamp = customTimestamp \|\| defaultTimeStamp;\n\n // Track if the action menu was opened by touch - if so we increase the touch targets for the items\n const [wasInteractionByTouch, setWasInteractionByTouch] = useState(false);\n // `focused` state is used for show/hide actionMenu\n const [focused, setFocused] = React.useState<boolean>(false);\n\n // The chat message action flyout should target the Chat.Message action menu if clicked,\n // or target the chat message if opened via touch press.\n // Undefined indicates the flyout menu should not be being shown.\n const messageRef = useRef<HTMLDivElement \| null>(null);\n const messageActionButtonRef = useRef<HTMLDivElement \| null>(null);\n const [chatMessageActionFlyoutTarget, setChatMessageActionFlyoutTarget] = useState<React.MutableRefObject<HTMLElement \| null> \| undefined>(undefined);\n const chatActionsEnabled = !disableEditing && message.status !== 'sending' && !!message.mine && / @conditional-compile-remove(data-loss-prevention) /message.messageType !== 'blocked';\n const [messageReadBy, setMessageReadBy] = useState<{\n id: string;\n displayName: string;\n }[]>([]);\n const actionMenuProps = chatMessageActionMenuProps({\n ariaLabel: strings.actionMenuMoreOptions ?? '',\n enabled: chatActionsEnabled,\n menuButtonRef: messageActionButtonRef,\n // Force show the action button while the flyout is open (otherwise this will dismiss when the pointer is hovered over the flyout)\n forceShow: chatMessageActionFlyoutTarget === messageActionButtonRef,\n onActionButtonClick: () => {\n if (message.messageType === 'chat') {\n props.onActionButtonClick(message, setMessageReadBy);\n setChatMessageActionFlyoutTarget(messageActionButtonRef);\n }\n },\n theme\n });\n const onActionFlyoutDismiss = useCallback((): void => {\n // When the flyout dismiss is called, since we control if the action flyout is visible\n // or not we need to set the target to undefined here to actually hide the action flyout\n setChatMessageActionFlyoutTarget(undefined);\n }, [setChatMessageActionFlyoutTarget]);\n const defaultOnRenderFileDownloads = useCallback(() => <_FileDownloadCards userId={userId} fileMetadata={message['attachedFilesMetadata'] \|\| []} downloadHandler={fileDownloadHandler}\n / @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)/ strings={{\n downloadFile: strings.downloadFile,\n fileCardGroupMessage: strings.fileCardGroupMessage\n }} />, [userId, message, / @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)/\n strings, fileDownloadHandler]);\n const editedOn = 'editedOn' in message ? message.editedOn : undefined;\n const getMessageDetails = useCallback(() => {\n if (messageStatus === 'failed') {\n return <div className={chatMessageFailedTagStyle(theme)}>{strings.failToSendTag}</div>;\n } else if (message.messageType === 'chat' && editedOn) {\n return <div className={chatMessageEditedTagStyle(theme)}>{strings.editedTag}</div>;\n }\n return undefined;\n }, [editedOn, message.messageType, messageStatus, strings.editedTag, strings.failToSendTag, theme]);\n\n / @conditional-compile-remove(image-gallery) /\n const handleOnInlineImageClicked = useCallback(async (attachmentId: string): Promise<void> => {\n if (onInlineImageClicked === undefined) {\n return;\n }\n await onInlineImageClicked(attachmentId, message.messageId);\n }, [message, onInlineImageClicked]);\n const getContent = useCallback(() => {\n / @conditional-compile-remove(data-loss-prevention) /\n if (message.messageType === 'blocked') {\n return <div tabIndex={0}>\n <BlockedMessageContent message={message} strings={strings} />\n </div>;\n }\n return <div tabIndex={0} className=\"ui-chat__message__content\">\n <ChatMessageContent message={message} strings={strings}\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) / onFetchAttachment={props.onFetchAttachments}\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) / attachmentsMap={props.attachmentsMap}\n / @conditional-compile-remove(mention) / mentionDisplayOptions={props.mentionDisplayOptions}\n / @conditional-compile-remove(image-gallery) / onInlineImageClicked={handleOnInlineImageClicked} />\n {props.onRenderFileDownloads ? props.onRenderFileDownloads(userId, message) : defaultOnRenderFileDownloads()}\n </div>;\n }, [defaultOnRenderFileDownloads, message, props, strings, userId, / @conditional-compile-remove(image-gallery) /\n handleOnInlineImageClicked]);\n const isBlockedMessage = false \|\| / @conditional-compile-remove(data-loss-prevention) /message.messageType === 'blocked';\n const chatMyMessageStyles = useChatMyMessageStyles();\n const chatMessageCommonStyles = useChatMessageCommonStyles();\n const chatMessageStyles = useChatMessageStyles();\n const chatItemMessageContainerClassName = mergeClasses(\n // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors\n chatMessageStyles.body, isBlockedMessage ? chatMessageCommonStyles.blocked : props.message.status === 'failed' ? chatMessageCommonStyles.failed : undefined, shouldOverlapAvatarAndMessage ? chatMessageStyles.avatarOverlap : chatMessageStyles.avatarNoOverlap, message.attached === 'top' \|\| message.attached === false ? chatMessageStyles.bodyWithAvatar : chatMessageStyles.bodyWithoutAvatar, mergeStyles(messageContainerStyle));\n const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n const chatMessage = <>\n <div key={props.message.messageId} ref={messageRef}>\n {message.mine ? <ChatMyMessage attached={attached} key={props.message.messageId} body={{\n // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors\n className: mergeClasses(chatMyMessageStyles.body, isBlockedMessage ? chatMessageCommonStyles.blocked : props.message.status === 'failed' ? chatMessageCommonStyles.failed : undefined, attached !== 'top' ? chatMyMessageStyles.bodyAttached : undefined, mergeStyles(messageContainerStyle)),\n style: {\n ...createStyleFromV8Style(messageContainerStyle)\n },\n // make body not focusable to remove repetitions from narrators.\n // inner components are already focusable\n tabIndex: -1,\n role: 'presentation'\n }} root={{\n className: chatMyMessageStyles.root,\n onBlur: e => {\n // copy behavior from North\n // `focused` controls is focused the whole `ChatMessage` or any of its children. When we're navigating\n // with keyboard the focused element will be changed and there is no way to use `:focus` selector\n const shouldPreserveFocusState = e.currentTarget.contains(e.relatedTarget);\n setFocused(shouldPreserveFocusState);\n },\n onFocus: () => {\n // copy behavior from North\n // react onFocus is called even when nested component receives focus (i.e. it bubbles)\n // so when focus moves within actionMenu, the `focus` state in chatMessage remains true, and keeps actionMenu visible\n setFocused(true);\n },\n // make body not focusable to remove repetitions from narrators.\n // inner components are already focusable\n role: 'none',\n tabIndex: -1\n }} data-ui-id=\"chat-composite-message\" author={<Text className={chatMessageDateStyle} tabIndex={0}>\n {message.senderDisplayName}\n </Text>} timestamp={<Text className={chatMessageDateStyle} data-ui-id={ids.messageTimestamp} tabIndex={0}>\n {formattedTimestamp}\n </Text>} details={getMessageDetails()} actions={{\n children: actionMenuProps?.children,\n className: mergeClasses(chatMyMessageStyles.menu,\n // Make actions menu visible when the message is focused or the flyout is shown\n focused \|\| chatMessageActionFlyoutTarget?.current ? chatMyMessageStyles.menuVisible : chatMyMessageStyles.menuHidden, attached !== 'top' ? chatMyMessageStyles.menuAttached : undefined)\n }} onTouchStart={() => setWasInteractionByTouch(true)} onPointerDown={() => setWasInteractionByTouch(false)} onKeyDown={() => setWasInteractionByTouch(false)} onClick={() => {\n if (!wasInteractionByTouch) {\n return;\n }\n // If the message was touched via touch we immediately open the menu\n // flyout (when using mouse the 3-dot menu that appears on hover\n // must be clicked to open the flyout).\n // In doing so here we set the target of the flyout to be the message and\n // not the 3-dot menu button to position the flyout correctly.\n setChatMessageActionFlyoutTarget(messageRef);\n if (message.messageType === 'chat') {\n props.onActionButtonClick(message, setMessageReadBy);\n }\n }}>\n {getContent()}\n </ChatMyMessage> : <FluentChatMessage attached={attached} key={props.message.messageId} root={{\n className: chatMessageStyles.root\n }} author={<Text className={chatMessageAuthorStyle}>{message.senderDisplayName}</Text>} body={{\n className: chatItemMessageContainerClassName,\n style: {\n ...createStyleFromV8Style(messageContainerStyle)\n },\n // make body not focusable to remove repetitions from narrators.\n // inner components are already focusable\n tabIndex: -1,\n role: 'none'\n }} data-ui-id=\"chat-composite-message\" timestamp={<Text className={chatMessageDateStyle} data-ui-id={ids.messageTimestamp}>\n {formattedTimestamp}\n </Text>}>\n {getContent()}\n </FluentChatMessage>}\n </div>\n {chatActionsEnabled && <ChatMessageActionFlyout hidden={!chatMessageActionFlyoutTarget} target={chatMessageActionFlyoutTarget} increaseFlyoutItemSize={wasInteractionByTouch} onDismiss={onActionFlyoutDismiss} onEditClick={onEditClick} onRemoveClick={onRemoveClick} onResendClick={onResendClick} strings={strings} messageReadBy={messageReadBy} messageStatus={messageStatus ?? 'failed'} remoteParticipantsCount={remoteParticipantsCount} onRenderAvatar={onRenderAvatar} showMessageStatus={showMessageStatus} />}\n </>;\n return chatMessage;\n};\n\n/* @private */\nexport const ChatMessageComponentAsMessageBubble = React.memo(MessageBubble);\"../../../../acs-ui-common/src\""]}
1	+ {"version":3,"file":"ChatMessageComponentAsMessageBubble.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ChatMessage/ChatMessageComponentAsMessageBubble.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Text, mergeStyles, IStyle } from '@fluentui/react';\nimport { ChatMessage as FluentChatMessage, ChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useRef, useState } from 'react';\nimport { chatMessageEditedTagStyle, chatMessageDateStyle, chatMessageFailedTagStyle, chatMessageAuthorStyle } from '../styles/ChatMessageComponent.styles';\nimport { formatTimeForChatMessage, formatTimestampForChatMessage } from '../utils/Datetime';\nimport { useIdentifiers } from '../../identifiers/IdentifierProvider';\nimport { useTheme } from '../../theming';\nimport { ChatMessageActionFlyout } from './ChatMessageActionsFlyout';\nimport { ChatMessageContent } from './ChatMessageContent';\nimport { ChatMessage } from '../../types/ChatMessage';\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) /\nimport { FileMetadata } from '../FileDownloadCards';\n/ @conditional-compile-remove(data-loss-prevention) /\nimport { BlockedMessageContent } from './ChatMessageContent';\n/ @conditional-compile-remove(data-loss-prevention) /\nimport { BlockedMessage } from '../../types/ChatMessage';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { chatMessageActionMenuProps } from './ChatMessageActionMenu';\nimport { ComponentSlotStyle, OnRenderAvatarCallback } from '../../types';\nimport { _FileDownloadCards, FileDownloadHandler } from '../FileDownloadCards';\nimport { ComponentLocale, useLocale } from '../../localization';\n/ @conditional-compile-remove(mention) /\nimport { MentionDisplayOptions } from '../MentionPopover';\nimport { createStyleFromV8Style } from '../styles/v8StyleShim';\nimport { MessageStatus } from '@internal/acs-ui-common';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { useChatMessageStyles, useChatMyMessageStyles, useChatMessageCommonStyles } from '../styles/MessageThread.styles';\ntype ChatMessageComponentAsMessageBubbleProps = {\n message: ChatMessage \| / @conditional-compile-remove(data-loss-prevention) /BlockedMessage;\n messageContainerStyle?: ComponentSlotStyle;\n /* Styles for message status indicator container. /\n messageStatusContainer?: (mine: boolean) => IStyle;\n showDate?: boolean;\n disableEditing?: boolean;\n onEditClick: () => void;\n onRemoveClick?: () => void;\n onResendClick?: () => void;\n strings: MessageThreadStrings;\n userId: string;\n messageStatus?: string;\n /\n Whether the status indicator for each message is displayed or not.\n /\n showMessageStatus?: boolean;\n messageStatusRenderer?: (status: MessageStatus) => JSX.Element \| null;\n /\n Whether to overlap avatar and message when the view is width constrained.\n /\n shouldOverlapAvatarAndMessage: boolean;\n /\n Optional callback to render uploaded files in the message component.\n /\n onRenderFileDownloads?: (userId: string, message: ChatMessage) => JSX.Element;\n /\n Optional function called when someone clicks on the file download icon.\n /\n fileDownloadHandler?: FileDownloadHandler;\n remoteParticipantsCount?: number;\n onActionButtonClick: (message: ChatMessage, setMessageReadBy: (readBy: {\n id: string;\n displayName: string;\n }[]) => void) => void;\n /\n Optional callback to override render of the avatar.\n \n @param userId - user Id\n /\n onRenderAvatar?: OnRenderAvatarCallback;\n\n /\n Optional function to provide customized date format.\n * @beta\n /\n onDisplayDateTimeString?: (messageDate: Date) => string;\n / @conditional-compile-remove(mention) /\n /\n Optional props needed to display suggestions in the mention scenario.\n * @internal\n /\n mentionDisplayOptions?: MentionDisplayOptions;\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n /\n Optional function to fetch attachments.\n /\n onFetchAttachments?: (attachment: FileMetadata) => Promise<void>;\n / @conditional-compile-remove(image-gallery) /\n /\n Optional callback called when an inline image is clicked.\n * @beta\n /\n onInlineImageClicked?: (attachmentId: string, messageId: string) => Promise<void>;\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n /\n Optional map of attachment ids to blob urls.\n /\n attachmentsMap?: Record<string, string>;\n};\nconst generateDefaultTimestamp = (createdOn: Date, showDate: boolean \| undefined, strings: MessageThreadStrings): string => {\n const formattedTimestamp = showDate ? formatTimestampForChatMessage(createdOn, new Date(), strings) : formatTimeForChatMessage(createdOn);\n return formattedTimestamp;\n};\n\n// onDisplayDateTimeString from props overwrite onDisplayDateTimeString from locale\nconst generateCustomizedTimestamp = (props: ChatMessageComponentAsMessageBubbleProps, createdOn: Date, locale: ComponentLocale): string => {\n / @conditional-compile-remove(date-time-customization) /\n return props.onDisplayDateTimeString ? props.onDisplayDateTimeString(createdOn) : locale.onDisplayDateTimeString ? locale.onDisplayDateTimeString(createdOn) : '';\n return '';\n};\n/* @private /\nconst MessageBubble = (props: ChatMessageComponentAsMessageBubbleProps): JSX.Element => {\n const ids = useIdentifiers();\n const theme = useTheme();\n const locale = useLocale();\n const {\n userId,\n message,\n onRemoveClick,\n onResendClick,\n disableEditing,\n showDate,\n messageContainerStyle,\n strings,\n onEditClick,\n remoteParticipantsCount = 0,\n onRenderAvatar,\n showMessageStatus,\n messageStatus,\n fileDownloadHandler,\n / @conditional-compile-remove(image-gallery) /\n onInlineImageClicked,\n shouldOverlapAvatarAndMessage\n } = props;\n const defaultTimeStamp = message.createdOn ? generateDefaultTimestamp(message.createdOn, showDate, strings) : undefined;\n const customTimestamp = message.createdOn ? generateCustomizedTimestamp(props, message.createdOn, locale) : '';\n const formattedTimestamp = customTimestamp \|\| defaultTimeStamp;\n\n // Track if the action menu was opened by touch - if so we increase the touch targets for the items\n const [wasInteractionByTouch, setWasInteractionByTouch] = useState(false);\n // `focused` state is used for show/hide actionMenu\n const [focused, setFocused] = React.useState<boolean>(false);\n\n // The chat message action flyout should target the Chat.Message action menu if clicked,\n // or target the chat message if opened via touch press.\n // Undefined indicates the flyout menu should not be being shown.\n const messageRef = useRef<HTMLDivElement \| null>(null);\n const messageActionButtonRef = useRef<HTMLDivElement \| null>(null);\n const [chatMessageActionFlyoutTarget, setChatMessageActionFlyoutTarget] = useState<React.MutableRefObject<HTMLElement \| null> \| undefined>(undefined);\n const chatActionsEnabled = !disableEditing && message.status !== 'sending' && !!message.mine && / @conditional-compile-remove(data-loss-prevention) /message.messageType !== 'blocked';\n const [messageReadBy, setMessageReadBy] = useState<{\n id: string;\n displayName: string;\n }[]>([]);\n const actionMenuProps = chatMessageActionMenuProps({\n ariaLabel: strings.actionMenuMoreOptions ?? '',\n enabled: chatActionsEnabled,\n menuButtonRef: messageActionButtonRef,\n // Force show the action button while the flyout is open (otherwise this will dismiss when the pointer is hovered over the flyout)\n forceShow: chatMessageActionFlyoutTarget === messageActionButtonRef,\n onActionButtonClick: () => {\n if (message.messageType === 'chat') {\n props.onActionButtonClick(message, setMessageReadBy);\n setChatMessageActionFlyoutTarget(messageActionButtonRef);\n }\n },\n theme\n });\n const onActionFlyoutDismiss = useCallback((): void => {\n // When the flyout dismiss is called, since we control if the action flyout is visible\n // or not we need to set the target to undefined here to actually hide the action flyout\n setChatMessageActionFlyoutTarget(undefined);\n }, [setChatMessageActionFlyoutTarget]);\n const defaultOnRenderFileDownloads = useCallback(() => <_FileDownloadCards userId={userId} fileMetadata={message['attachedFilesMetadata'] \|\| []} downloadHandler={fileDownloadHandler}\n / @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)/ strings={{\n downloadFile: strings.downloadFile,\n fileCardGroupMessage: strings.fileCardGroupMessage\n }} />, [userId, message, / @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)/\n strings, fileDownloadHandler]);\n const editedOn = 'editedOn' in message ? message.editedOn : undefined;\n const getMessageDetails = useCallback(() => {\n if (messageStatus === 'failed') {\n return <div className={chatMessageFailedTagStyle(theme)}>{strings.failToSendTag}</div>;\n } else if (message.messageType === 'chat' && editedOn) {\n return <div className={chatMessageEditedTagStyle(theme)}>{strings.editedTag}</div>;\n }\n return undefined;\n }, [editedOn, message.messageType, messageStatus, strings.editedTag, strings.failToSendTag, theme]);\n\n / @conditional-compile-remove(image-gallery) /\n const handleOnInlineImageClicked = useCallback(async (attachmentId: string): Promise<void> => {\n if (onInlineImageClicked === undefined) {\n return;\n }\n await onInlineImageClicked(attachmentId, message.messageId);\n }, [message, onInlineImageClicked]);\n const getContent = useCallback(() => {\n / @conditional-compile-remove(data-loss-prevention) /\n if (message.messageType === 'blocked') {\n return <div tabIndex={0}>\n <BlockedMessageContent message={message} strings={strings} />\n </div>;\n }\n return <div tabIndex={0} className=\"ui-chat__message__content\">\n <ChatMessageContent message={message} strings={strings}\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) / onFetchAttachment={props.onFetchAttachments}\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) / attachmentsMap={props.attachmentsMap}\n / @conditional-compile-remove(mention) / mentionDisplayOptions={props.mentionDisplayOptions}\n / @conditional-compile-remove(image-gallery) / onInlineImageClicked={handleOnInlineImageClicked} />\n {props.onRenderFileDownloads ? props.onRenderFileDownloads(userId, message) : defaultOnRenderFileDownloads()}\n </div>;\n }, [defaultOnRenderFileDownloads, message, props, strings, userId, / @conditional-compile-remove(image-gallery) /\n handleOnInlineImageClicked]);\n const isBlockedMessage = false \|\| / @conditional-compile-remove(data-loss-prevention) /message.messageType === 'blocked';\n const chatMyMessageStyles = useChatMyMessageStyles();\n const chatMessageCommonStyles = useChatMessageCommonStyles();\n const chatMessageStyles = useChatMessageStyles();\n const chatItemMessageContainerClassName = mergeClasses(\n // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors\n chatMessageStyles.body, isBlockedMessage ? chatMessageCommonStyles.blocked : props.message.status === 'failed' ? chatMessageCommonStyles.failed : undefined, shouldOverlapAvatarAndMessage ? chatMessageStyles.avatarOverlap : chatMessageStyles.avatarNoOverlap, message.attached === 'top' \|\| message.attached === false ? chatMessageStyles.bodyWithAvatar : chatMessageStyles.bodyWithoutAvatar, mergeStyles(messageContainerStyle));\n const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n const chatMessage = <>\n <div key={props.message.messageId} ref={messageRef}>\n {message.mine ? <ChatMyMessage attached={attached} key={props.message.messageId} body={{\n // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors\n className: mergeClasses(chatMyMessageStyles.body, isBlockedMessage ? chatMessageCommonStyles.blocked : props.message.status === 'failed' ? chatMessageCommonStyles.failed : undefined, attached !== 'top' ? chatMyMessageStyles.bodyAttached : undefined, mergeStyles(messageContainerStyle)),\n style: {\n ...createStyleFromV8Style(messageContainerStyle)\n }\n }} root={{\n className: chatMyMessageStyles.root,\n onBlur: e => {\n // copy behavior from North\n // `focused` controls is focused the whole `ChatMessage` or any of its children. When we're navigating\n // with keyboard the focused element will be changed and there is no way to use `:focus` selector\n const shouldPreserveFocusState = e.currentTarget.contains(e.relatedTarget);\n setFocused(shouldPreserveFocusState);\n },\n onFocus: () => {\n // copy behavior from North\n // react onFocus is called even when nested component receives focus (i.e. it bubbles)\n // so when focus moves within actionMenu, the `focus` state in chatMessage remains true, and keeps actionMenu visible\n setFocused(true);\n },\n // make body not focusable to remove repetitions from narrators.\n // inner components are already focusable\n role: 'none',\n tabIndex: -1\n }} data-ui-id=\"chat-composite-message\" author={<Text className={chatMessageDateStyle} tabIndex={0}>\n {message.senderDisplayName}\n </Text>} timestamp={<Text className={chatMessageDateStyle} data-ui-id={ids.messageTimestamp} tabIndex={0}>\n {formattedTimestamp}\n </Text>} details={getMessageDetails()} actions={{\n tabIndex: 0,\n children: actionMenuProps?.children,\n className: mergeClasses(chatMyMessageStyles.menu,\n // Make actions menu visible when the message is focused or the flyout is shown\n focused \|\| chatMessageActionFlyoutTarget?.current ? chatMyMessageStyles.menuVisible : chatMyMessageStyles.menuHidden, attached !== 'top' ? chatMyMessageStyles.menuAttached : undefined)\n }} onTouchStart={() => setWasInteractionByTouch(true)} onPointerDown={() => setWasInteractionByTouch(false)} onKeyDown={() => setWasInteractionByTouch(false)} onClick={() => {\n if (!wasInteractionByTouch) {\n return;\n }\n // If the message was touched via touch we immediately open the menu\n // flyout (when using mouse the 3-dot menu that appears on hover\n // must be clicked to open the flyout).\n // In doing so here we set the target of the flyout to be the message and\n // not the 3-dot menu button to position the flyout correctly.\n setChatMessageActionFlyoutTarget(messageRef);\n if (message.messageType === 'chat') {\n props.onActionButtonClick(message, setMessageReadBy);\n }\n }}>\n {getContent()}\n </ChatMyMessage> : <FluentChatMessage attached={attached} key={props.message.messageId} root={{\n className: chatMessageStyles.root,\n // make body not focusable to remove repetitions from narrators.\n // inner components are already focusable\n tabIndex: -1,\n role: 'none'\n }} author={<Text className={chatMessageAuthorStyle}>{message.senderDisplayName}</Text>} body={{\n className: chatItemMessageContainerClassName,\n style: {\n ...createStyleFromV8Style(messageContainerStyle)\n }\n }} data-ui-id=\"chat-composite-message\" timestamp={<Text className={chatMessageDateStyle} data-ui-id={ids.messageTimestamp}>\n {formattedTimestamp}\n </Text>}>\n {getContent()}\n </FluentChatMessage>}\n </div>\n {chatActionsEnabled && <ChatMessageActionFlyout hidden={!chatMessageActionFlyoutTarget} target={chatMessageActionFlyoutTarget} increaseFlyoutItemSize={wasInteractionByTouch} onDismiss={onActionFlyoutDismiss} onEditClick={onEditClick} onRemoveClick={onRemoveClick} onResendClick={onResendClick} strings={strings} messageReadBy={messageReadBy} messageStatus={messageStatus ?? 'failed'} remoteParticipantsCount={remoteParticipantsCount} onRenderAvatar={onRenderAvatar} showMessageStatus={showMessageStatus} />}\n </>;\n return chatMessage;\n};\n\n/* @private */\nexport const ChatMessageComponentAsMessageBubble = React.memo(MessageBubble);\"../../../../acs-ui-common/src\""]}

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

@@ -45,10 +45,10 @@ export const _DrawerMenu = (props) => {
     }), [firstItemStyle, borderRadius]);
     return React.createElement(_DrawerSurface, { disableMaxHeight: props.disableMaxHeight, styles: (_b = props.styles) === null || _b === void 0 ? void 0 : _b.drawerSurfaceStyles, onLightDismiss: props.onLightDismiss, heading: props.heading },
         React.createElement(Stack, { styles: props.styles, role: "menu", "data-ui-id": "drawer-menu" }, menuItemsToRender === null || menuItemsToRender === void 0 ? void 0 :
-            menuItemsToRender.slice(0, 1).map(item => React.createElement(DrawerMenuItem, Object.assign({}, item, { key: '0', styles: modifiedFirstItemStyle, onItemClick: (ev, itemKey) => {
+            menuItemsToRender.slice(0, 1).map(item => React.createElement(DrawerMenuItem, Object.assign({}, item, { key: `${item.itemKey}` + '0', shouldFocusOnMount: true, styles: modifiedFirstItemStyle, onItemClick: (ev, itemKey) => {
                     onItemClick(item, ev, itemKey);
                 } }))), menuItemsToRender === null || menuItemsToRender === void 0 ? void 0 :
-            menuItemsToRender.slice(1).map((item, i) => React.createElement(DrawerMenuItem, Object.assign({}, item, { key: `${i + 1}`, onItemClick: (ev, itemKey) => {
+            menuItemsToRender.slice(1).map((item, i) => React.createElement(DrawerMenuItem, Object.assign({}, item, { key: `${item.itemKey}` + `${i + 1}`, onItemClick: (ev, itemKey) => {
                     onItemClick(item, ev, itemKey);
                 } })))));
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DrawerMenu.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/Drawer/DrawerMenu.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAE7D,OAAO,EAAE,cAAc,EAAwB,MAAM,kBAAkB,CAAC;AACxE,OAAO,EAAE,cAAc,EAAwB,MAAM,iBAAiB,CAAC;AAsCvE;;;;GAIG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAe,EAAE;;IAClE,gGAAgG;IAChG,iGAAiG;IACjG,+EAA+E;IAC/E,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IAErE,6CAA6C;IAC7C,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE;;QACrC,IAAI,KAAK,GAAuC,KAAK,CAAC,KAAK,CAAC;QAC5D,KAAK,MAAM,UAAU,IAAI,eAAe,EAAE;YACxC,KAAK,GAAG,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,UAAU,CAAC,0CAAE,YAAY,CAAC;SACxE;QACD,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC;IAEnC,oGAAoG;IACpG,kGAAkG;IAClG,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,IAA0B,EAAE,EAA6F,EAAE,OAA4B,EAAQ,EAAE;;QAChM,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,kBAAkB,CAAC,CAAC,GAAG,eAAe,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;SACxD;QACD,MAAA,IAAI,CAAC,WAAW,+CAAhB,IAAI,EAAe,EAAE,EAAE,OAAO,CAAC,CAAC;IAClC,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,2EAA2E;IAC3E,MAAM,YAAY,GAAG,QAAQ,EAAE,CAAC,OAAO,CAAC,cAAc,CAAC;IACvD,MAAM,cAAc,GAAG,iBAAiB,KAAI,MAAA,iBAAiB,CAAC,CAAC,CAAC,0CAAE,MAAM,CAAA,CAAC;IACzE,MAAM,sBAAsB,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,EAAE,EAAE;QACvE,IAAI,EAAE;YACJ,oBAAoB,EAAE,YAAY;YAClC,mBAAmB,EAAE,YAAY;SAClC;KACF,CAAC,EAAE,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC,CAAC;IACpC,OAAO,oBAAC,cAAc,IAAC,gBAAgB,EAAE,KAAK,CAAC,gBAAgB,EAAE,MAAM,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,mBAAmB,EAAE,cAAc,EAAE,KAAK,CAAC,cAAc,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO;QACpK,oBAAC,KAAK,IAAC,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,IAAI,EAAC,MAAM,gBAAY,aAAa,IAC9D,iBAAiB,aAAjB,iBAAiB;YAAjB,iBAAiB,CAAE,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,oBAAC,cAAc,oBAAK,IAAI,IAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,sBAAsB,EAAE,WAAW,EAAE,CAAC,EAAE,EAAE,OAAO,EAAE,EAAE;~~oBAC7I~~,WAAW,CAAC,IAAI,EAAE,EAAE,EAAE,OAAO,CAAC,CAAC;gBACjC,CAAC,IAAI,CAAC,EACH,iBAAiB,aAAjB,iBAAiB;YAAjB,iBAAiB,CAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,oBAAC,cAAc,oBAAK,IAAI,IAAE,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE,EAAE,OAAO,EAAE,EAAE;~~oBACtH~~,WAAW,CAAC,IAAI,EAAE,EAAE,EAAE,OAAO,CAAC,CAAC;gBACjC,CAAC,IAAI,CAAC,CACE,CACO,CAAC;AACtB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { merge, Stack } from '@fluentui/react';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { _DrawerSurfaceProps } from '.';\nimport { useTheme } from '../../theming/FluentThemeProvider';\nimport { BaseCustomStyles } from '../../types';\nimport { DrawerMenuItem, _DrawerMenuItemProps } from './DrawerMenuItem';\nimport { _DrawerSurface, _DrawerSurfaceStyles } from './DrawerSurface';\n\n/*\n Styles for the {@link _DrawerMenu}.\n \n @internal\n /\nexport interface _DrawerMenuStyles extends BaseCustomStyles {\n /* Styles for the {@link DrawerSurface} container. /\n drawerSurfaceStyles?: _DrawerSurfaceStyles;\n}\n\n/\n Props for the {@link _DrawerMenu}\n \n @internal\n /\nexport interface _DrawerMenuProps {\n items: _DrawerMenuItemProps[];\n\n /\n Callback when the drawer's light-dismissal is triggered.\n /\n onLightDismiss: () => void;\n\n /\n String to show in heading of drawer menu\n /\n heading?: string;\n\n /\n By default, maxHeight value is set to 75%.\n * Set value to true for no default maxHeight to be applied on drawerSurface\n /\n disableMaxHeight?: boolean;\n styles?: _DrawerMenuStyles;\n}\n\n/\n Takes a set of menu items and returns a created menu inside a {@link _DrawerSurface}.\n \n @internal\n */\nexport const _DrawerMenu = (props: _DrawerMenuProps): JSX.Element => {\n // This component breaks from a pure component pattern in order to internally support sub menus.\n // When a sub menu item is clicked the menu items displayed is updated to be that of the submenu.\n // To track this state we store a list of the keys clicked up until this point.\n const [selectedKeyPath, setSelectedKeyPath] = useState<string[]>([]);\n\n // Get the menu items that should be rendered\n const menuItemsToRender = useMemo(() => {\n let items: _DrawerMenuItemProps[] \| undefined = props.items;\n for (const subMenuKey of selectedKeyPath) {\n items = items?.find(item => item.itemKey === subMenuKey)?.subMenuProps;\n }\n return items;\n }, [props.items, selectedKeyPath]);\n\n // When an item is clicked and it contains a submenu, push the key for the submenu. This will ensure\n // a new render is triggered, menuItemsToRender will be re-calculated and the submenu will render.\n const onItemClick = useCallback((item: _DrawerMenuItemProps, ev?: React.MouseEvent<HTMLElement, MouseEvent> \| React.KeyboardEvent<HTMLElement> \| undefined, itemKey?: string \| undefined): void => {\n if (item.subMenuProps) {\n setSelectedKeyPath([...selectedKeyPath, item.itemKey]);\n }\n item.onItemClick?.(ev, itemKey);\n }, [selectedKeyPath]);\n\n // Ensure the first item has a border radius that matches the DrawerSurface\n const borderRadius = useTheme().effects.roundedCorner4;\n const firstItemStyle = menuItemsToRender && menuItemsToRender[0]?.styles;\n const modifiedFirstItemStyle = useMemo(() => merge(firstItemStyle ?? {}, {\n root: {\n borderTopRightRadius: borderRadius,\n borderTopLeftRadius: borderRadius\n }\n }), [firstItemStyle, borderRadius]);\n return <_DrawerSurface disableMaxHeight={props.disableMaxHeight} styles={props.styles?.drawerSurfaceStyles} onLightDismiss={props.onLightDismiss} heading={props.heading}>\n <Stack styles={props.styles} role=\"menu\" data-ui-id=\"drawer-menu\">\n {menuItemsToRender?.slice(0, 1).map(item => <DrawerMenuItem {...item} key={'0'} styles={modifiedFirstItemStyle} onItemClick={(ev, itemKey) => {\n onItemClick(item, ev, itemKey);\n }} />)}\n {menuItemsToRender?.slice(1).map((item, i) => <DrawerMenuItem {...item} key={`${i + 1}`} onItemClick={(ev, itemKey) => {\n onItemClick(item, ev, itemKey);\n }} />)}\n </Stack>\n </_DrawerSurface>;\n};"]}
1	+ {"version":3,"file":"DrawerMenu.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/Drawer/DrawerMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { merge, Stack } from '@fluentui/react';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { _DrawerSurfaceProps } from '.';\nimport { useTheme } from '../../theming/FluentThemeProvider';\nimport { BaseCustomStyles } from '../../types';\nimport { DrawerMenuItem, _DrawerMenuItemProps } from './DrawerMenuItem';\nimport { _DrawerSurface, _DrawerSurfaceStyles } from './DrawerSurface';\n\n/*\n Styles for the {@link _DrawerMenu}.\n \n @internal\n /\nexport interface _DrawerMenuStyles extends BaseCustomStyles {\n /* Styles for the {@link DrawerSurface} container. /\n drawerSurfaceStyles?: _DrawerSurfaceStyles;\n}\n\n/\n Props for the {@link _DrawerMenu}\n \n @internal\n /\nexport interface _DrawerMenuProps {\n items: _DrawerMenuItemProps[];\n\n /\n Callback when the drawer's light-dismissal is triggered.\n /\n onLightDismiss: () => void;\n\n /\n String to show in heading of drawer menu\n /\n heading?: string;\n\n /\n By default, maxHeight value is set to 75%.\n * Set value to true for no default maxHeight to be applied on drawerSurface\n /\n disableMaxHeight?: boolean;\n styles?: _DrawerMenuStyles;\n}\n\n/\n Takes a set of menu items and returns a created menu inside a {@link _DrawerSurface}.\n \n @internal\n */\nexport const _DrawerMenu = (props: _DrawerMenuProps): JSX.Element => {\n // This component breaks from a pure component pattern in order to internally support sub menus.\n // When a sub menu item is clicked the menu items displayed is updated to be that of the submenu.\n // To track this state we store a list of the keys clicked up until this point.\n const [selectedKeyPath, setSelectedKeyPath] = useState<string[]>([]);\n\n // Get the menu items that should be rendered\n const menuItemsToRender = useMemo(() => {\n let items: _DrawerMenuItemProps[] \| undefined = props.items;\n for (const subMenuKey of selectedKeyPath) {\n items = items?.find(item => item.itemKey === subMenuKey)?.subMenuProps;\n }\n return items;\n }, [props.items, selectedKeyPath]);\n\n // When an item is clicked and it contains a submenu, push the key for the submenu. This will ensure\n // a new render is triggered, menuItemsToRender will be re-calculated and the submenu will render.\n const onItemClick = useCallback((item: _DrawerMenuItemProps, ev?: React.MouseEvent<HTMLElement, MouseEvent> \| React.KeyboardEvent<HTMLElement> \| undefined, itemKey?: string \| undefined): void => {\n if (item.subMenuProps) {\n setSelectedKeyPath([...selectedKeyPath, item.itemKey]);\n }\n item.onItemClick?.(ev, itemKey);\n }, [selectedKeyPath]);\n\n // Ensure the first item has a border radius that matches the DrawerSurface\n const borderRadius = useTheme().effects.roundedCorner4;\n const firstItemStyle = menuItemsToRender && menuItemsToRender[0]?.styles;\n const modifiedFirstItemStyle = useMemo(() => merge(firstItemStyle ?? {}, {\n root: {\n borderTopRightRadius: borderRadius,\n borderTopLeftRadius: borderRadius\n }\n }), [firstItemStyle, borderRadius]);\n return <_DrawerSurface disableMaxHeight={props.disableMaxHeight} styles={props.styles?.drawerSurfaceStyles} onLightDismiss={props.onLightDismiss} heading={props.heading}>\n <Stack styles={props.styles} role=\"menu\" data-ui-id=\"drawer-menu\">\n {menuItemsToRender?.slice(0, 1).map(item => <DrawerMenuItem {...item} key={`${item.itemKey}` + '0'} shouldFocusOnMount={true} styles={modifiedFirstItemStyle} onItemClick={(ev, itemKey) => {\n onItemClick(item, ev, itemKey);\n }} />)}\n {menuItemsToRender?.slice(1).map((item, i) => <DrawerMenuItem {...item} key={`${item.itemKey}` + `${i + 1}`} onItemClick={(ev, itemKey) => {\n onItemClick(item, ev, itemKey);\n }} />)}\n </Stack>\n </_DrawerSurface>;\n};"]}

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

@@ -33,6 +33,10 @@ export interface _DrawerMenuItemProps {
      * A unique id set for the standard HTML id attibute
      */
     id?: string;
+    /**
+     * Property to set the focus since this is the first item in the menu
+     */
+    shouldFocusOnMount?: boolean;
 }
 /**
  * Maps the individual item in menuProps.items passed in the {@link DrawerMenu} into a UI component.

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

@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-import { FontIcon, mergeStyles, Stack, Text } from '@fluentui/react';
+import { FocusZone, FontIcon, mergeStyles, Stack, Text } from '@fluentui/react';
 import React from 'react';
 import { useTheme } from '../../theming/FluentThemeProvider';
 import { submitWithKeyboard } from '../utils/keyboardNavigation';
@@ -15,27 +15,28 @@ export const DrawerMenuItem = (props) => {
     const onClick = (ev) => props.onItemClick && props.onItemClick(ev, props.itemKey);
     const onKeyPress = (ev) => onClick && submitWithKeyboard(ev, onClick);
     const secondaryIcon = props.secondaryIconProps ? React.createElement(MenuItemIcon, Object.assign({}, props.secondaryIconProps)) : props.subMenuProps ? React.createElement(MenuItemIcon, { iconName: "ChevronRight" }) : undefined;
-    return React.createElement(Stack, { tabIndex: 0, role: "menuitem", horizontal: true, className: mergeStyles(drawerMenuItemRootStyles(theme.palette.neutralLight, theme.fonts.small), props.disabled ? disabledDrawerMenuItemRootStyles(theme.palette.neutralQuaternaryAlt) : undefined, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root), onKeyPress: props.disabled ? undefined : onKeyPress, onClick: props.disabled ? undefined : onClick, tokens: menuItemChildrenGap, id: props.id },
-        props.iconProps && React.createElement(Stack.Item, { role: "presentation", styles: props.disabled ? {
-                root: {
-                    color: theme.palette.neutralTertiaryAlt
-                }
-            } : undefined },
-            React.createElement(MenuItemIcon, Object.assign({}, props.iconProps))),
-        React.createElement(Stack.Item, { styles: drawerMenuItemTextStyles, grow: true },
-            React.createElement(Text, { styles: props.disabled ? {
+    return React.createElement(FocusZone, { shouldFocusOnMount: props.shouldFocusOnMount },
+        React.createElement(Stack, { tabIndex: 0, role: "menuitem", horizontal: true, className: mergeStyles(drawerMenuItemRootStyles(theme.palette.neutralLight, theme.fonts.small), props.disabled ? disabledDrawerMenuItemRootStyles(theme.palette.neutralQuaternaryAlt) : undefined, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root), onKeyPress: props.disabled ? undefined : onKeyPress, onClick: props.disabled ? undefined : onClick, tokens: menuItemChildrenGap, id: props.id },
+            props.iconProps && React.createElement(Stack.Item, { role: "presentation", styles: props.disabled ? {
                     root: {
                         color: theme.palette.neutralTertiaryAlt
                     }
-                } : undefined }, props.text)),
-        props.secondaryText && React.createElement(Stack.Item, { styles: drawerMenuItemTextStyles, className: mergeStyles(secondaryTextStyles) },
-            React.createElement(Text, { styles: {
-                    root: {
-                        color: props.disabled ? theme.palette.neutralTertiaryAlt : theme.palette.neutralSecondary
-                    }
-                } }, props.secondaryText)),
-        props.secondaryComponent && React.createElement(Stack.Item, null, props.secondaryComponent),
-        secondaryIcon && React.createElement(Stack.Item, null, secondaryIcon));
+                } : undefined },
+                React.createElement(MenuItemIcon, Object.assign({}, props.iconProps))),
+            React.createElement(Stack.Item, { styles: drawerMenuItemTextStyles, grow: true },
+                React.createElement(Text, { styles: props.disabled ? {
+                        root: {
+                            color: theme.palette.neutralTertiaryAlt
+                        }
+                    } : undefined }, props.text)),
+            props.secondaryText && React.createElement(Stack.Item, { styles: drawerMenuItemTextStyles, className: mergeStyles(secondaryTextStyles) },
+                React.createElement(Text, { styles: {
+                        root: {
+                            color: props.disabled ? theme.palette.neutralTertiaryAlt : theme.palette.neutralSecondary
+                        }
+                    } }, props.secondaryText)),
+            props.secondaryComponent && React.createElement(Stack.Item, null, props.secondaryComponent),
+            secondaryIcon && React.createElement(Stack.Item, null, secondaryIcon)));
 };
 const MenuItemIcon = (props) => React.createElement(FontIcon, Object.assign({ className: mergeStyles(iconStyles) }, props));
 const menuItemChildrenGap = {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DrawerMenuItem.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/Drawer/DrawerMenuItem.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,QAAQ,EAA+D,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;~~AAClI~~,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAE7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;~~AAoCjE~~;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAA2B,EAAe,EAAE;;IACzE,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,OAAO,GAAG,CAAC,EAAqE,EAAQ,EAAE,CAAC,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,WAAW,CAAC,EAAE,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IAC3J,MAAM,UAAU,GAAG,CAAC,EAAoC,EAAQ,EAAE,CAAC,OAAO,IAAI,kBAAkB,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC;IAC9G,MAAM,aAAa,GAAG,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,oBAAC,YAAY,oBAAK,KAAK,CAAC,kBAAkB,EAAI,CAAC,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,oBAAC,YAAY,IAAC,QAAQ,EAAC,cAAc,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;IAC5K,OAAO,oBAAC,KAAK,IAAC,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAC,UAAU,EAAC,UAAU,QAAC,SAAS,EAAE,WAAW,CAAC,wBAAwB,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,gCAAgC,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,CAAC,EAAE,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,EAAE,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,mBAAmB,EAAE,EAAE,EAAE,KAAK,CAAC,EAAE;~~QACtZ~~,KAAK,CAAC,SAAS,IAAI,oBAAC,KAAK,CAAC,IAAI,IAAC,IAAI,EAAC,cAAc,EAAC,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;~~gBAC7E~~,IAAI,EAAE;~~oBACJ~~,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,kBAAkB;~~iBACxC~~;~~aACF~~,CAAC,CAAC,CAAC,SAAS;~~YACP~~,oBAAC,YAAY,oBAAK,KAAK,CAAC,SAAS,EAAI,CAC1B;~~QACf~~,oBAAC,KAAK,CAAC,IAAI,IAAC,MAAM,EAAE,wBAAwB,EAAE,IAAI;~~YAChD~~,oBAAC,IAAI,IAAC,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;~~oBAC~~/B,IAAI,EAAE;~~wBACJ~~,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,kBAAkB;~~qBACxC~~;~~iBACF~~,CAAC,CAAC,CAAC,SAAS,IACR,KAAK,CAAC,IAAI,CACN,CACI;~~QACZ~~,KAAK,CAAC,aAAa,IAAI,oBAAC,KAAK,CAAC,IAAI,IAAC,MAAM,EAAE,wBAAwB,EAAE,SAAS,EAAE,WAAW,CAAC,mBAAmB,CAAC;~~YAC7G~~,oBAAC,IAAI,IAAC,MAAM,EAAE;~~oBAChB~~,IAAI,EAAE;~~wBACJ~~,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB;~~qBAC1F~~;~~iBACF~~,IACM,KAAK,CAAC,aAAa,CACf,CACI;~~QACd~~,KAAK,CAAC,kBAAkB,IAAI,oBAAC,KAAK,CAAC,IAAI,QAAE,KAAK,CAAC,kBAAkB,CAAc;~~QAC~~/E,aAAa,IAAI,oBAAC,KAAK,CAAC,IAAI,QAAE,aAAa,CAAc,CACpD,CAAC;~~AACb~~,CAAC,CAAC;AACF,MAAM,YAAY,GAAG,CAAC,KAAqB,EAAe,EAAE,CAAC,oBAAC,QAAQ,kBAAC,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,IAAM,KAAK,EAAI,CAAC;AACzH,MAAM,mBAAmB,GAAG;IAC1B,WAAW,EAAE,QAAQ;CACtB,CAAC;AACF,MAAM,wBAAwB,GAAG,CAAC,eAAuB,EAAE,QAAmB,EAAU,EAAE,CAAC,iCACtF,QAAQ,KACX,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,MAAM,EAClB,OAAO,EAAE,cAAc,EACvB,MAAM,EAAE,SAAS,EACjB,gBAAgB,EAAE;QAChB,UAAU,EAAE,eAAe;KAC5B,IACD,CAAC;AACH,MAAM,gCAAgC,GAAG,CAAC,UAAkB,EAAU,EAAE,CAAC,CAAC;IACxE,aAAa,EAAE,MAAM;IACrB,UAAU,EAAE,UAAU;IACtB,gBAAgB,EAAE;QAChB,UAAU,EAAE,UAAU;KACvB;CACF,CAAC,CAAC;AAEH,oHAAoH;AACpH,MAAM,wBAAwB,GAAiB;IAC7C,IAAI,EAAE;QACJ,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,UAAU;QACxB,UAAU,EAAE,QAAQ;KACrB;CACF,CAAC;AACF,MAAM,UAAU,GAAW;IACzB,4GAA4G;IAC5G,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,MAAM,EAAE,MAAM;IACd,qGAAqG;IACrG,OAAO,EAAE;QACP,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,MAAM;KACf;CACF,CAAC;AACF,MAAM,mBAAmB,GAAW;IAClC,2FAA2F;IAC3F,QAAQ,EAAE,KAAK;CAChB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { FontIcon, IFontIconProps, IIconProps, IRawStyle, IStackStyles, IStyle, mergeStyles, Stack, Text } from '@fluentui/react';\nimport React from 'react';\nimport { useTheme } from '../../theming/FluentThemeProvider';\nimport { BaseCustomStyles } from '../../types';\nimport { submitWithKeyboard } from '../utils/keyboardNavigation';\n\n/*\n Props for the DrawerMenuItem\n \n @internal\n /\nexport interface _DrawerMenuItemProps {\n onItemClick?: (ev?: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, itemKey?: string) => void;\n itemKey: string;\n /* Text that shows at the start of the menu item after any icon supplied /\n text?: string;\n /* Text that shows at the end of the menu item before any secondaryIcon is supplied /\n secondaryText?: string;\n /* A component that shows at the end of the menu item before any secondaryIcon is supplied /\n secondaryComponent?: JSX.Element;\n /* Icon shown at the start of the menu item (before the menu item text) /\n iconProps?: IIconProps;\n /\n Icon shown at the end of the menu item.\n * By default if this component has subMenuProps, this icon is the RightChevron.\n /\n secondaryIconProps?: IIconProps;\n styles?: BaseCustomStyles;\n subMenuProps?: _DrawerMenuItemProps[];\n /\n Whether the menu item is disabled\n * @defaultvalue false\n /\n disabled?: boolean;\n /\n A unique id set for the standard HTML id attibute\n /\n id?: string;\n}\n\n/\n Maps the individual item in menuProps.items passed in the {@link DrawerMenu} into a UI component.\n \n @private\n /\nexport const DrawerMenuItem = (props: _DrawerMenuItemProps): JSX.Element => {\n const theme = useTheme();\n const onClick = (ev?: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>): void => props.onItemClick && props.onItemClick(ev, props.itemKey);\n const onKeyPress = (ev: React.KeyboardEvent<HTMLElement>): void => onClick && submitWithKeyboard(ev, onClick);\n const secondaryIcon = props.secondaryIconProps ? <MenuItemIcon {...props.secondaryIconProps} /> : props.subMenuProps ? <MenuItemIcon iconName=\"ChevronRight\" /> : undefined;\n return <Stack tabIndex={0} role=\"menuitem\" horizontal className={mergeStyles(drawerMenuItemRootStyles(theme.palette.neutralLight, theme.fonts.small), props.disabled ? disabledDrawerMenuItemRootStyles(theme.palette.neutralQuaternaryAlt) : undefined, props.styles?.root)} onKeyPress={props.disabled ? undefined : onKeyPress} onClick={props.disabled ? undefined : onClick} tokens={menuItemChildrenGap} id={props.id}>\n {props.iconProps && <Stack.Item role=\"presentation\" styles={props.disabled ? {\n root: {\n color: theme.palette.neutralTertiaryAlt\n }\n } : undefined}>\n <MenuItemIcon {...props.iconProps} />\n </Stack.Item>}\n <Stack.Item styles={drawerMenuItemTextStyles} grow>\n <Text styles={props.disabled ? {\n root: {\n color: theme.palette.neutralTertiaryAlt\n }\n } : undefined}>\n {props.text}\n </Text>\n </Stack.Item>\n {props.secondaryText && <Stack.Item styles={drawerMenuItemTextStyles} className={mergeStyles(secondaryTextStyles)}>\n <Text styles={{\n root: {\n color: props.disabled ? theme.palette.neutralTertiaryAlt : theme.palette.neutralSecondary\n }\n }}>\n {props.secondaryText}\n </Text>\n </Stack.Item>}\n {props.secondaryComponent && <Stack.Item>{props.secondaryComponent}</Stack.Item>}\n {secondaryIcon && <Stack.Item>{secondaryIcon}</Stack.Item>}\n </~~Stack~~>;\n};\nconst MenuItemIcon = (props: IFontIconProps): JSX.Element => <FontIcon className={mergeStyles(iconStyles)} {...props} />;\nconst menuItemChildrenGap = {\n childrenGap: '0.5rem'\n};\nconst drawerMenuItemRootStyles = (hoverBackground: string, fontSize: IRawStyle): IStyle => ({\n ...fontSize,\n height: '3rem',\n lineHeight: '3rem',\n padding: '0rem 0.75rem',\n cursor: 'pointer',\n ':hover, :focus': {\n background: hoverBackground\n }\n});\nconst disabledDrawerMenuItemRootStyles = (background: string): IStyle => ({\n pointerEvents: 'none',\n background: background,\n ':hover, :focus': {\n background: background\n }\n});\n\n/* Ensure long text entries appropriately show ellipsis instead of wrapping to a new line or showing a scrollbar */\nconst drawerMenuItemTextStyles: IStackStyles = {\n root: {\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap'\n }\n};\nconst iconStyles: IStyle = {\n // Vertically center icons in the menu item. Using line-height does not work for centering fluent SVG icons.\n display: 'flex',\n alignItems: 'center',\n height: '100%',\n // This can be removed when we upgrade to fluent-react-icons v2 (that removes the inner span element)\n ' span': {\n display: 'flex',\n alignItems: 'center',\n height: '100%'\n }\n};\nconst secondaryTextStyles: IStyle = {\n // limit width for secondaryText in the menu item so it does not overlap with text on left.\n maxWidth: '50%'\n};"]}
1	+ {"version":3,"file":"DrawerMenuItem.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/Drawer/DrawerMenuItem.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { FocusZone, FontIcon, IFontIconProps, IIconProps, IRawStyle, IStackStyles, IStyle, mergeStyles, Stack, Text } from '@fluentui/react';\nimport React from 'react';\nimport { useTheme } from '../../theming/FluentThemeProvider';\nimport { BaseCustomStyles } from '../../types';\nimport { submitWithKeyboard } from '../utils/keyboardNavigation';\n\n/*\n Props for the DrawerMenuItem\n \n @internal\n /\nexport interface _DrawerMenuItemProps {\n onItemClick?: (ev?: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, itemKey?: string) => void;\n itemKey: string;\n /* Text that shows at the start of the menu item after any icon supplied /\n text?: string;\n /* Text that shows at the end of the menu item before any secondaryIcon is supplied /\n secondaryText?: string;\n /* A component that shows at the end of the menu item before any secondaryIcon is supplied /\n secondaryComponent?: JSX.Element;\n /* Icon shown at the start of the menu item (before the menu item text) /\n iconProps?: IIconProps;\n /\n Icon shown at the end of the menu item.\n * By default if this component has subMenuProps, this icon is the RightChevron.\n /\n secondaryIconProps?: IIconProps;\n styles?: BaseCustomStyles;\n subMenuProps?: _DrawerMenuItemProps[];\n /\n Whether the menu item is disabled\n * @defaultvalue false\n /\n disabled?: boolean;\n /\n A unique id set for the standard HTML id attibute\n /\n id?: string;\n /\n Property to set the focus since this is the first item in the menu\n /\n shouldFocusOnMount?: boolean;\n}\n\n/\n Maps the individual item in menuProps.items passed in the {@link DrawerMenu} into a UI component.\n \n @private\n /\nexport const DrawerMenuItem = (props: _DrawerMenuItemProps): JSX.Element => {\n const theme = useTheme();\n const onClick = (ev?: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>): void => props.onItemClick && props.onItemClick(ev, props.itemKey);\n const onKeyPress = (ev: React.KeyboardEvent<HTMLElement>): void => onClick && submitWithKeyboard(ev, onClick);\n const secondaryIcon = props.secondaryIconProps ? <MenuItemIcon {...props.secondaryIconProps} /> : props.subMenuProps ? <MenuItemIcon iconName=\"ChevronRight\" /> : undefined;\n return <FocusZone shouldFocusOnMount={props.shouldFocusOnMount}>\n <Stack tabIndex={0} role=\"menuitem\" horizontal className={mergeStyles(drawerMenuItemRootStyles(theme.palette.neutralLight, theme.fonts.small), props.disabled ? disabledDrawerMenuItemRootStyles(theme.palette.neutralQuaternaryAlt) : undefined, props.styles?.root)} onKeyPress={props.disabled ? undefined : onKeyPress} onClick={props.disabled ? undefined : onClick} tokens={menuItemChildrenGap} id={props.id}>\n {props.iconProps && <Stack.Item role=\"presentation\" styles={props.disabled ? {\n root: {\n color: theme.palette.neutralTertiaryAlt\n }\n } : undefined}>\n <MenuItemIcon {...props.iconProps} />\n </Stack.Item>}\n <Stack.Item styles={drawerMenuItemTextStyles} grow>\n <Text styles={props.disabled ? {\n root: {\n color: theme.palette.neutralTertiaryAlt\n }\n } : undefined}>\n {props.text}\n </Text>\n </Stack.Item>\n {props.secondaryText && <Stack.Item styles={drawerMenuItemTextStyles} className={mergeStyles(secondaryTextStyles)}>\n <Text styles={{\n root: {\n color: props.disabled ? theme.palette.neutralTertiaryAlt : theme.palette.neutralSecondary\n }\n }}>\n {props.secondaryText}\n </Text>\n </Stack.Item>}\n {props.secondaryComponent && <Stack.Item>{props.secondaryComponent}</Stack.Item>}\n {secondaryIcon && <Stack.Item>{secondaryIcon}</Stack.Item>}\n </Stack>\n </FocusZone>;\n};\nconst MenuItemIcon = (props: IFontIconProps): JSX.Element => <FontIcon className={mergeStyles(iconStyles)} {...props} />;\nconst menuItemChildrenGap = {\n childrenGap: '0.5rem'\n};\nconst drawerMenuItemRootStyles = (hoverBackground: string, fontSize: IRawStyle): IStyle => ({\n ...fontSize,\n height: '3rem',\n lineHeight: '3rem',\n padding: '0rem 0.75rem',\n cursor: 'pointer',\n ':hover, :focus': {\n background: hoverBackground\n }\n});\nconst disabledDrawerMenuItemRootStyles = (background: string): IStyle => ({\n pointerEvents: 'none',\n background: background,\n ':hover, :focus': {\n background: background\n }\n});\n\n/* Ensure long text entries appropriately show ellipsis instead of wrapping to a new line or showing a scrollbar */\nconst drawerMenuItemTextStyles: IStackStyles = {\n root: {\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap'\n }\n};\nconst iconStyles: IStyle = {\n // Vertically center icons in the menu item. Using line-height does not work for centering fluent SVG icons.\n display: 'flex',\n alignItems: 'center',\n height: '100%',\n // This can be removed when we upgrade to fluent-react-icons v2 (that removes the inner span element)\n ' span': {\n display: 'flex',\n alignItems: 'center',\n height: '100%'\n }\n};\nconst secondaryTextStyles: IStyle = {\n // limit width for secondaryText in the menu item so it does not overlap with text on left.\n maxWidth: '50%'\n};"]}

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

@@ -1,11 +1,11 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /* @conditional-compile-remove(image-gallery) */
-import { DefaultButton, FocusTrapZone, Icon, IconButton, Modal, Stack, mergeStyles } from '@fluentui/react';
+import { DefaultButton, Icon, IconButton, Modal, Stack, mergeStyles } from '@fluentui/react';
 /* @conditional-compile-remove(image-gallery) */
 import React, { useState } from 'react';
 /* @conditional-compile-remove(image-gallery) */
-import { bodyContainer, bodyFocusZone, brokenImageStyle, cancelIcon, closeButtonStyles, controlBarContainerStyle, downloadButtonStyle, downloadIcon, downloadIconStyle, focusTrapZoneStyle, headerStyle, normalImageStyle, overlayStyles, scrollableContentStyle, smallDownloadButtonContainerStyle, titleBarContainerStyle, titleStyle } from './styles/ImageGallery.style';
+import { bodyContainer, brokenImageStyle, cancelIcon, closeButtonStyles, controlBarContainerStyle, downloadButtonStyle, downloadIcon, downloadIconStyle, focusTrapZoneStyle, headerStyle, normalImageStyle, overlayStyles, scrollableContentStyle, smallDownloadButtonContainerStyle, titleBarContainerStyle, titleStyle } from './styles/ImageGallery.style';
 /* @conditional-compile-remove(image-gallery) */
 import { useTheme } from '../theming/FluentThemeProvider';
 /* @conditional-compile-remove(image-gallery) */
@@ -37,20 +37,12 @@ export const ImageGallery = (props) => {
                     /* @conditional-compile-remove(image-gallery) */ ariaLabel: localeStrings.dismissButtonAriaLabel, "aria-live": 'polite' })));
     };
     const renderBodyWithLightDismiss = () => {
-        return React.createElement(Stack, { className: mergeStyles(bodyContainer), onClick: () => props.onDismiss() },
-            React.createElement(FocusTrapZone, { onKeyDown: e => {
-                    if (e.key === 'Escape' || e.key === 'Esc') {
-                        onDismiss();
-                    }
-                },
-                // Ensure when the focus trap has focus, the light dismiss area can still be clicked with mouse to dismiss.
-                // Note: this still correctly captures keyboard focus, this just allows mouse click outside of the focus trap.
-                isClickableOutsideFocusTrap: true, className: mergeStyles(bodyFocusZone) }, images.length > startIndex && React.createElement("img", { src: image === null || image === void 0 ? void 0 : image.imageUrl, className: mergeStyles(imageStyle), alt: (image === null || image === void 0 ? void 0 : image.altText) || 'image', "aria-label": 'image-gallery-main-image', "aria-live": 'polite', onError: event => {
-                    setIsImageLoaded(false);
-                    onError && onError(event);
-                }, onClick: event => event.stopPropagation(), onDoubleClick: event => {
-                    event.persist();
-                } })));
+        return React.createElement(Stack, { className: mergeStyles(bodyContainer), onClick: () => props.onDismiss() }, images.length > startIndex && React.createElement("img", { src: image === null || image === void 0 ? void 0 : image.imageUrl, className: mergeStyles(imageStyle), alt: (image === null || image === void 0 ? void 0 : image.altText) || 'image', "aria-label": 'image-gallery-main-image', "aria-live": 'polite', onError: event => {
+                setIsImageLoaded(false);
+                onError && onError(event);
+            }, onClick: event => event.stopPropagation(), onDoubleClick: event => {
+                event.persist();
+            } }));
     };
     return React.createElement(Modal, { titleAriaId: image === null || image === void 0 ? void 0 : image.title, isOpen: isOpen, onDismiss: onDismiss, overlay: {
             styles: Object.assign({}, overlayStyles(theme))