npm - @azure/communication-react - Versions diffs - 1.14.1-alpha-202403290012 → 1.15.0-alpha-202404030013 - Mend

@azure/communication-react 1.14.1-alpha-202403290012 → 1.15.0-alpha-202404030013

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

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

@@ -13,7 +13,7 @@ import { useChatMessageRichTextEditContainerStyles } from '../styles/ChatMessage
 import { MAXIMUM_LENGTH_OF_MESSAGE } from '../utils/SendBoxUtils';
 import { getMessageState, onRenderCancelIcon, onRenderSubmitIcon } from '../utils/ChatMessageComponentAsEditBoxUtils';
 /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
-import { getMessageAttachedFilesMetadata } from '../utils/ChatMessageComponentAsEditBoxUtils';
+import { getMessageWithAttachmentMetadata } from '../utils/ChatMessageComponentAsEditBoxUtils';
 import { RichTextInputBoxComponent } from '../RichTextEditor/RichTextInputBoxComponent';
 import { editBoxRichTextEditorStyle, richTextActionButtonsStyle } from '../styles/RichTextEditor.styles';
 import { RichTextSendBoxErrors } from '../RichTextEditor/RichTextSendBoxErrors';
@@ -25,7 +25,7 @@ export const ChatMessageComponentAsRichTextEditBox = (props) => {
     const { onCancel, onSubmit, strings, message } = props;
     const [textValue, setTextValue] = useState(message.content || '');
     /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
-    const [attachmentMetadata, _] = React.useState(getMessageAttachedFilesMetadata(message));
+    const [attachmentMetadata, _] = React.useState(getMessageWithAttachmentMetadata(message));
     const editTextFieldRef = React.useRef(null);
     const theme = useTheme();
     const messageState = getMessageState(textValue,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ChatMessageComponentAsRichTextEditBox.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageComponentAsRichTextEditBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { 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 { editBoxWidthStyles, richTextEditBoxActionButtonIcon } from '../styles/EditBox.styles';\nimport { InputBoxButton } from '../InputBoxButton';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { useChatMyMessageStyles } from '../styles/MessageThread.styles';\nimport { ChatMessage } from '../../types';\nimport { _AttachmentUploadCards } from '../AttachmentUploadCards';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\nimport { AttachmentMetadata } from '../../types/Attachment';\nimport { useChatMessageRichTextEditContainerStyles } from '../styles/ChatMessageComponent.styles';\nimport { MAXIMUM_LENGTH_OF_MESSAGE } from '../utils/SendBoxUtils';\nimport { getMessageState, onRenderCancelIcon, onRenderSubmitIcon } from '../utils/ChatMessageComponentAsEditBoxUtils';\n/ @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\nimport { getMessageAttachedFilesMetadata } from '../utils/ChatMessageComponentAsEditBoxUtils';\nimport { RichTextEditorComponentRef } from '../RichTextEditor/RichTextEditor';\nimport { RichTextInputBoxComponent } from '../RichTextEditor/RichTextInputBoxComponent';\nimport { editBoxRichTextEditorStyle, richTextActionButtonsStyle } from '../styles/RichTextEditor.styles';\nimport { RichTextSendBoxErrors } from '../RichTextEditor/RichTextSendBoxErrors';\nimport { useLocale } from '../../localization';\n\n/* @beta /\nexport type ChatMessageComponentAsRichTextEditBoxProps = {\n onCancel?: (messageId: string) => void;\n onSubmit: (\n text: string,\n metadata?: Record<string, string>,\n options?: {\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n attachmentMetadata?: AttachmentMetadata[];\n }\n ) => void;\n message: ChatMessage;\n strings: MessageThreadStrings;\n};\n\n/\n @beta\n /\nexport const ChatMessageComponentAsRichTextEditBox = (\n props: ChatMessageComponentAsRichTextEditBoxProps\n): JSX.Element => {\n const { onCancel, onSubmit, strings, message } = props;\n\n const [textValue, setTextValue] = useState<string>(message.content \|\| '');\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n const [attachmentMetadata, _] = React.useState(getMessageAttachedFilesMetadata(message));\n const editTextFieldRef = React.useRef<RichTextEditorComponentRef>(null);\n const theme = useTheme();\n const messageState = getMessageState(\n textValue,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) / attachmentMetadata ??\n []\n );\n const submitEnabled = messageState === 'OK';\n\n const editContainerStyles = useChatMessageRichTextEditContainerStyles();\n const chatMyMessageStyles = useChatMyMessageStyles();\n const locale = useLocale().strings;\n\n // TODO: Check if the focus is needed, if so use `focusOnInit` prop\n // for Rooster component instead as this sets focus too early\n useEffect(() => {\n editTextFieldRef.current?.focus();\n }, []);\n\n const setText = (newValue?: string): void => {\n setTextValue(newValue ?? '');\n };\n\n const textTooLongMessage =\n messageState === 'too long'\n ? _formatString(strings.editBoxTextLimit, { limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}` })\n : undefined;\n\n const iconClassName = useCallback(\n (isHover: boolean) => {\n const color = isHover ? theme.palette.accent : theme.palette.neutralSecondary;\n return mergeStyles(richTextEditBoxActionButtonIcon, { color });\n },\n [theme.palette.accent, theme.palette.neutralSecondary]\n );\n\n const onRenderThemedCancelIcon = useCallback(\n (isHover: boolean) => {\n return onRenderCancelIcon(iconClassName(isHover));\n },\n [iconClassName]\n );\n\n const onRenderThemedSubmitIcon = useCallback(\n (isHover: boolean) => {\n return onRenderSubmitIcon(iconClassName(isHover));\n },\n [iconClassName]\n );\n\n const actionButtons = useMemo(() => {\n return (\n <Stack horizontal>\n <InputBoxButton\n className={richTextActionButtonsStyle}\n ariaLabel={strings.editBoxCancelButton}\n tooltipContent={strings.editBoxCancelButton}\n onRenderIcon={onRenderThemedCancelIcon}\n onClick={() => {\n onCancel && onCancel(message.messageId);\n }}\n id={'dismissIconWrapper'}\n />\n <InputBoxButton\n className={richTextActionButtonsStyle}\n ariaLabel={strings.editBoxSubmitButton}\n tooltipContent={strings.editBoxSubmitButton}\n onRenderIcon={onRenderThemedSubmitIcon}\n onClick={(e) => {\n submitEnabled &&\n onSubmit(\n textValue,\n message.metadata,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) / {\n attachmentMetadata\n }\n );\n e.stopPropagation();\n }}\n id={'submitIconWrapper'}\n />\n </Stack>\n );\n }, [\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) / attachmentMetadata,\n message.messageId,\n message.metadata,\n onCancel,\n onRenderThemedCancelIcon,\n onRenderThemedSubmitIcon,\n onSubmit,\n strings.editBoxCancelButton,\n strings.editBoxSubmitButton,\n submitEnabled,\n textValue\n ]);\n const richTextLocaleStrings = useMemo(() => {\n / @conditional-compile-remove(rich-text-editor) /\n return locale.richTextSendBox;\n return locale.sendBox;\n }, [/ @conditional-compile-remove(rich-text-editor) */ locale.richTextSendBox, locale.sendBox]);\n\n const getContent = (): JSX.Element => {\n return (\n <Stack className={mergeStyles(editBoxWidthStyles)}>\n <RichTextSendBoxErrors textTooLongMessage={textTooLongMessage} systemMessage={message.failureReason} />\n <RichTextInputBoxComponent\n placeholderText={strings.editBoxPlaceholderText}\n onChange={setText}\n editorComponentRef={editTextFieldRef}\n initialContent={message.content}\n strings={richTextLocaleStrings}\n disabled={false}\n actionComponents={actionButtons}\n richTextEditorStyleProps={editBoxRichTextEditorStyle}\n isHorizontalLayoutDisabled={true}\n />\n </Stack>\n );\n };\n\n const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n return (\n <ChatMyMessage\n attached={attached}\n root={{\n className: chatMyMessageStyles.root\n }}\n body={{\n className: mergeClasses(\n editContainerStyles.body,\n attached !== 'top' ? editContainerStyles.bodyAttached : undefined\n )\n }}\n >\n {getContent()}\n </ChatMyMessage>\n );\n};\n"]}
1	+ {"version":3,"file":"ChatMessageComponentAsRichTextEditBox.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageComponentAsRichTextEditBox.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,sCAAgC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAC7D,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,EAAE,kBAAkB,EAAE,+BAA+B,EAAE,MAAM,0BAA0B,CAAC;AAC/F,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAKxE,OAAO,EAAE,yCAAyC,EAAE,MAAM,uCAAuC,CAAC;AAClG,OAAO,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,6CAA6C,CAAC;AACtH,qGAAqG;AACrG,OAAO,EAAE,gCAAgC,EAAE,MAAM,6CAA6C,CAAC;AAE/F,OAAO,EAAE,yBAAyB,EAAE,MAAM,6CAA6C,CAAC;AACxF,OAAO,EAAE,0BAA0B,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AACzG,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;AAChF,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAiB/C;;GAEG;AACH,MAAM,CAAC,MAAM,qCAAqC,GAAG,CACnD,KAAiD,EACpC,EAAE;IACf,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAEvD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAS,OAAO,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC;IAC1E,qGAAqG;IACrG,MAAM,CAAC,kBAAkB,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,gCAAgC,CAAC,OAAO,CAAC,CAAC,CAAC;IAC1F,MAAM,gBAAgB,GAAG,KAAK,CAAC,MAAM,CAA6B,IAAI,CAAC,CAAC;IACxE,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,YAAY,GAAG,eAAe,CAClC,SAAS;IACT,qGAAqG,CAAC,kBAAkB,aAAlB,kBAAkB,cAAlB,kBAAkB,GACtH,EAAE,CACL,CAAC;IACF,MAAM,aAAa,GAAG,YAAY,KAAK,IAAI,CAAC;IAE5C,MAAM,mBAAmB,GAAG,yCAAyC,EAAE,CAAC;IACxE,MAAM,mBAAmB,GAAG,sBAAsB,EAAE,CAAC;IACrD,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC;IAEnC,mEAAmE;IACnE,6DAA6D;IAC7D,SAAS,CAAC,GAAG,EAAE;;QACb,MAAA,gBAAgB,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;IACpC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,OAAO,GAAG,CAAC,QAAiB,EAAQ,EAAE;QAC1C,YAAY,CAAC,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,EAAE,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,MAAM,kBAAkB,GACtB,YAAY,KAAK,UAAU;QACzB,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,gBAAgB,EAAE,EAAE,WAAW,EAAE,GAAG,yBAAyB,EAAE,EAAE,CAAC;QAC1F,CAAC,CAAC,SAAS,CAAC;IAEhB,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,OAAgB,EAAE,EAAE;QACnB,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC;QAC9E,OAAO,WAAW,CAAC,+BAA+B,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;IACjE,CAAC,EACD,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC,CACvD,CAAC;IAEF,MAAM,wBAAwB,GAAG,WAAW,CAC1C,CAAC,OAAgB,EAAE,EAAE;QACnB,OAAO,kBAAkB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC;IACpD,CAAC,EACD,CAAC,aAAa,CAAC,CAChB,CAAC;IAEF,MAAM,wBAAwB,GAAG,WAAW,CAC1C,CAAC,OAAgB,EAAE,EAAE;QACnB,OAAO,kBAAkB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC;IACpD,CAAC,EACD,CAAC,aAAa,CAAC,CAChB,CAAC;IAEF,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO,CACL,oBAAC,KAAK,IAAC,UAAU;YACf,oBAAC,cAAc,IACb,SAAS,EAAE,0BAA0B,EACrC,SAAS,EAAE,OAAO,CAAC,mBAAmB,EACtC,cAAc,EAAE,OAAO,CAAC,mBAAmB,EAC3C,YAAY,EAAE,wBAAwB,EACtC,OAAO,EAAE,GAAG,EAAE;oBACZ,QAAQ,IAAI,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;gBAC1C,CAAC,EACD,EAAE,EAAE,oBAAoB,GACxB;YACF,oBAAC,cAAc,IACb,SAAS,EAAE,0BAA0B,EACrC,SAAS,EAAE,OAAO,CAAC,mBAAmB,EACtC,cAAc,EAAE,OAAO,CAAC,mBAAmB,EAC3C,YAAY,EAAE,wBAAwB,EACtC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACb,aAAa;wBACX,QAAQ,CACN,SAAS,EACT,OAAO,CAAC,QAAQ;wBAChB,qGAAqG,CAAC;4BACpG,kBAAkB;yBACnB,CACF,CAAC;oBACJ,CAAC,CAAC,eAAe,EAAE,CAAC;gBACtB,CAAC,EACD,EAAE,EAAE,mBAAmB,GACvB,CACI,CACT,CAAC;IACJ,CAAC,EAAE;QACD,qGAAqG,CAAC,kBAAkB;QACxH,OAAO,CAAC,SAAS;QACjB,OAAO,CAAC,QAAQ;QAChB,QAAQ;QACR,wBAAwB;QACxB,wBAAwB;QACxB,QAAQ;QACR,OAAO,CAAC,mBAAmB;QAC3B,OAAO,CAAC,mBAAmB;QAC3B,aAAa;QACb,SAAS;KACV,CAAC,CAAC;IACH,MAAM,qBAAqB,GAAG,OAAO,CAAC,GAAG,EAAE;QACzC,mDAAmD;QACnD,OAAO,MAAM,CAAC,eAAe,CAAC;QAC9B,OAAO,MAAM,CAAC,OAAO,CAAC;IACxB,CAAC,EAAE,CAAC,mDAAmD,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;IAEjG,MAAM,UAAU,GAAG,GAAgB,EAAE;QACnC,OAAO,CACL,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,kBAAkB,CAAC;YAC/C,oBAAC,qBAAqB,IAAC,kBAAkB,EAAE,kBAAkB,EAAE,aAAa,EAAE,OAAO,CAAC,aAAa,GAAI;YACvG,oBAAC,yBAAyB,IACxB,eAAe,EAAE,OAAO,CAAC,sBAAsB,EAC/C,QAAQ,EAAE,OAAO,EACjB,kBAAkB,EAAE,gBAAgB,EACpC,cAAc,EAAE,OAAO,CAAC,OAAO,EAC/B,OAAO,EAAE,qBAAqB,EAC9B,QAAQ,EAAE,KAAK,EACf,gBAAgB,EAAE,aAAa,EAC/B,wBAAwB,EAAE,0BAA0B,EACpD,0BAA0B,EAAE,IAAI,GAChC,CACI,CACT,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,OAAO,CAAC,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;IACzG,OAAO,CACL,oBAAC,aAAa,IACZ,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE;YACJ,SAAS,EAAE,mBAAmB,CAAC,IAAI;SACpC,EACD,IAAI,EAAE;YACJ,SAAS,EAAE,YAAY,CACrB,mBAAmB,CAAC,IAAI,EACxB,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,mBAAmB,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAClE;SACF,IAEA,UAAU,EAAE,CACC,CACjB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { 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 { editBoxWidthStyles, richTextEditBoxActionButtonIcon } from '../styles/EditBox.styles';\nimport { InputBoxButton } from '../InputBoxButton';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { useChatMyMessageStyles } from '../styles/MessageThread.styles';\nimport { ChatMessage } from '../../types';\nimport { _AttachmentUploadCards } from '../AttachmentUploadCards';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\nimport { AttachmentMetadata } from '../../types/Attachment';\nimport { useChatMessageRichTextEditContainerStyles } from '../styles/ChatMessageComponent.styles';\nimport { MAXIMUM_LENGTH_OF_MESSAGE } from '../utils/SendBoxUtils';\nimport { getMessageState, onRenderCancelIcon, onRenderSubmitIcon } from '../utils/ChatMessageComponentAsEditBoxUtils';\n/ @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\nimport { getMessageWithAttachmentMetadata } from '../utils/ChatMessageComponentAsEditBoxUtils';\nimport { RichTextEditorComponentRef } from '../RichTextEditor/RichTextEditor';\nimport { RichTextInputBoxComponent } from '../RichTextEditor/RichTextInputBoxComponent';\nimport { editBoxRichTextEditorStyle, richTextActionButtonsStyle } from '../styles/RichTextEditor.styles';\nimport { RichTextSendBoxErrors } from '../RichTextEditor/RichTextSendBoxErrors';\nimport { useLocale } from '../../localization';\n\n/* @beta /\nexport type ChatMessageComponentAsRichTextEditBoxProps = {\n onCancel?: (messageId: string) => void;\n onSubmit: (\n text: string,\n metadata?: Record<string, string>,\n options?: {\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n attachmentMetadata?: AttachmentMetadata[];\n }\n ) => void;\n message: ChatMessage;\n strings: MessageThreadStrings;\n};\n\n/\n @beta\n /\nexport const ChatMessageComponentAsRichTextEditBox = (\n props: ChatMessageComponentAsRichTextEditBoxProps\n): JSX.Element => {\n const { onCancel, onSubmit, strings, message } = props;\n\n const [textValue, setTextValue] = useState<string>(message.content \|\| '');\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n const [attachmentMetadata, _] = React.useState(getMessageWithAttachmentMetadata(message));\n const editTextFieldRef = React.useRef<RichTextEditorComponentRef>(null);\n const theme = useTheme();\n const messageState = getMessageState(\n textValue,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) / attachmentMetadata ??\n []\n );\n const submitEnabled = messageState === 'OK';\n\n const editContainerStyles = useChatMessageRichTextEditContainerStyles();\n const chatMyMessageStyles = useChatMyMessageStyles();\n const locale = useLocale().strings;\n\n // TODO: Check if the focus is needed, if so use `focusOnInit` prop\n // for Rooster component instead as this sets focus too early\n useEffect(() => {\n editTextFieldRef.current?.focus();\n }, []);\n\n const setText = (newValue?: string): void => {\n setTextValue(newValue ?? '');\n };\n\n const textTooLongMessage =\n messageState === 'too long'\n ? _formatString(strings.editBoxTextLimit, { limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}` })\n : undefined;\n\n const iconClassName = useCallback(\n (isHover: boolean) => {\n const color = isHover ? theme.palette.accent : theme.palette.neutralSecondary;\n return mergeStyles(richTextEditBoxActionButtonIcon, { color });\n },\n [theme.palette.accent, theme.palette.neutralSecondary]\n );\n\n const onRenderThemedCancelIcon = useCallback(\n (isHover: boolean) => {\n return onRenderCancelIcon(iconClassName(isHover));\n },\n [iconClassName]\n );\n\n const onRenderThemedSubmitIcon = useCallback(\n (isHover: boolean) => {\n return onRenderSubmitIcon(iconClassName(isHover));\n },\n [iconClassName]\n );\n\n const actionButtons = useMemo(() => {\n return (\n <Stack horizontal>\n <InputBoxButton\n className={richTextActionButtonsStyle}\n ariaLabel={strings.editBoxCancelButton}\n tooltipContent={strings.editBoxCancelButton}\n onRenderIcon={onRenderThemedCancelIcon}\n onClick={() => {\n onCancel && onCancel(message.messageId);\n }}\n id={'dismissIconWrapper'}\n />\n <InputBoxButton\n className={richTextActionButtonsStyle}\n ariaLabel={strings.editBoxSubmitButton}\n tooltipContent={strings.editBoxSubmitButton}\n onRenderIcon={onRenderThemedSubmitIcon}\n onClick={(e) => {\n submitEnabled &&\n onSubmit(\n textValue,\n message.metadata,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) / {\n attachmentMetadata\n }\n );\n e.stopPropagation();\n }}\n id={'submitIconWrapper'}\n />\n </Stack>\n );\n }, [\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) / attachmentMetadata,\n message.messageId,\n message.metadata,\n onCancel,\n onRenderThemedCancelIcon,\n onRenderThemedSubmitIcon,\n onSubmit,\n strings.editBoxCancelButton,\n strings.editBoxSubmitButton,\n submitEnabled,\n textValue\n ]);\n const richTextLocaleStrings = useMemo(() => {\n / @conditional-compile-remove(rich-text-editor) /\n return locale.richTextSendBox;\n return locale.sendBox;\n }, [/ @conditional-compile-remove(rich-text-editor) */ locale.richTextSendBox, locale.sendBox]);\n\n const getContent = (): JSX.Element => {\n return (\n <Stack className={mergeStyles(editBoxWidthStyles)}>\n <RichTextSendBoxErrors textTooLongMessage={textTooLongMessage} systemMessage={message.failureReason} />\n <RichTextInputBoxComponent\n placeholderText={strings.editBoxPlaceholderText}\n onChange={setText}\n editorComponentRef={editTextFieldRef}\n initialContent={message.content}\n strings={richTextLocaleStrings}\n disabled={false}\n actionComponents={actionButtons}\n richTextEditorStyleProps={editBoxRichTextEditorStyle}\n isHorizontalLayoutDisabled={true}\n />\n </Stack>\n );\n };\n\n const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n return (\n <ChatMyMessage\n attached={attached}\n root={{\n className: chatMyMessageStyles.root\n }}\n body={{\n className: mergeClasses(\n editContainerStyles.body,\n attached !== 'top' ? editContainerStyles.bodyAttached : undefined\n )\n }}\n >\n {getContent()}\n </ChatMyMessage>\n );\n};\n"]}

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

@@ -12,6 +12,10 @@ export interface EndCallButtonStrings {
     label: string;
     /** Tooltip content. */
     tooltipContent?: string;
+    /** Label for leave option when ending call */
+    leaveOption?: string;
+    /** Label for end the whole call option when ending call */
+    endCallOption?: string;
 }
 /**
  * Props for {@link EndCallButton}.
@@ -23,7 +27,12 @@ export interface EndCallButtonProps extends ControlBarButtonProps {
      * Utility property for using this component with `communication react eventHandlers`.
      * Maps directly to the `onClick` property.
      */
-    onHangUp?: () => Promise<void>;
+    onHangUp?: (forEveryone?: boolean) => Promise<void>;
+    /**
+     * Set this to true to make it a split button.
+     * The split arrow will trigger a contextual menu to allow end for everyone or just for the user.
+     */
+    enableEndCallMenu?: boolean;
     /**
      * Optional strings to override in component
      */

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

@@ -1,6 +1,5 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var _a, _b;
 import { concatStyleSets, Icon } from '@fluentui/react';
 import React from 'react';
 import { useLocale } from '../localization';
@@ -8,6 +7,8 @@ import { useTheme } from '../theming';
 import { darkTheme, lightTheme } from '../theming/themes';
 import { isDarkThemed } from '../theming/themeUtils';
 import { ControlBarButton } from './ControlBarButton';
+/* @conditional-compile-remove(end-call-options) */
+import { _preventDismissOnEvent as preventDismissOnEvent } from "../../../acs-ui-common/src";
 const onRenderEndCallIcon = () => React.createElement(Icon, { iconName: "ControlButtonEndCall" });
 /**
  * A button to end an ongoing call.
@@ -17,68 +18,109 @@ const onRenderEndCallIcon = () => React.createElement(Icon, { iconName: "Control
  * @public
  */
 export const EndCallButton = (props) => {
-    var _a, _b, _c;
-    const { styles } = props;
+    var _a, _b;
+    const { styles, /* @conditional-compile-remove(end-call-options) */ enableEndCallMenu, onHangUp } = props;
     const localeStrings = useLocale().strings.endCallButton;
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
     const theme = useTheme();
     const isDarkTheme = isDarkThemed(theme);
     const componentStyles = concatStyleSets(isDarkTheme ? darkThemeCallButtonStyles : lightThemeCallButtonStyles, styles !== null && styles !== void 0 ? styles : {});
-    return (React.createElement(ControlBarButton, Object.assign({}, props, { onClick: (_a = props.onHangUp) !== null && _a !== void 0 ? _a : props.onClick, styles: componentStyles, onRenderIcon: (_b = props.onRenderIcon) !== null && _b !== void 0 ? _b : onRenderEndCallIcon, strings: strings, labelKey: (_c = props.labelKey) !== null && _c !== void 0 ? _c : 'endCallButtonLabel' })));
+    /* @conditional-compile-remove(end-call-options) */
+    const defaultMenuProps = {
+        items: [
+            {
+                key: 'endForSelf',
+                text: localeStrings.leaveOption,
+                title: localeStrings.leaveOption,
+                onClick: () => {
+                    onHangUp && onHangUp(false);
+                }
+            },
+            {
+                key: 'endForEveryone',
+                text: localeStrings.endCallOption,
+                title: localeStrings.endCallOption,
+                onClick: () => {
+                    onHangUp && onHangUp(true);
+                }
+            }
+        ],
+        styles: props.styles,
+        calloutProps: {
+            styles: {
+                root: {
+                    maxWidth: '95%'
+                }
+            },
+            preventDismissOnEvent
+        }
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ControlBarButton, Object.assign({}, props, {
+            /* @conditional-compile-remove(end-call-options) */
+            menuProps: enableEndCallMenu ? defaultMenuProps : undefined, onClick: onHangUp ? () => onHangUp() : props.onClick, styles: componentStyles, onRenderIcon: (_a = props.onRenderIcon) !== null && _a !== void 0 ? _a : onRenderEndCallIcon, strings: strings, labelKey: (_b = props.labelKey) !== null && _b !== void 0 ? _b : 'endCallButtonLabel' }))));
 };
-// using media query to prevent windows from overwriting the button color
-const darkThemeCallButtonStyles = {
-    root: {
-        color: darkTheme.callingPalette.iconWhite,
-        background: darkTheme.callingPalette.callRed,
-        '@media (forced-colors: active)': {
-            forcedColorAdjust: 'auto',
-            border: `1px ${(_a = lightTheme.palette) === null || _a === void 0 ? void 0 : _a.neutralQuaternaryAlt} solid`
+const getButtonStyles = (theme) => {
+    var _a;
+    return ({
+        regular: {
+            color: theme.callingPalette.iconWhite,
+            background: theme.callingPalette.callRed,
+            '@media (forced-colors: active)': {
+                forcedColorAdjust: 'auto',
+                border: `1px ${(_a = theme.palette) === null || _a === void 0 ? void 0 : _a.neutralQuaternaryAlt} solid`
+            },
+            ' i': {
+                color: theme.callingPalette.iconWhite
+            },
+            ':focus::after': { outlineColor: `${theme.callingPalette.iconWhite} !important` } // added !important to avoid override by FluentUI button styles
         },
-        ':focus::after': { outlineColor: `${darkTheme.callingPalette.iconWhite} !important` } // added !important to avoid override by FluentUI button styles
-    },
-    rootHovered: {
-        color: darkTheme.callingPalette.iconWhite,
-        background: darkTheme.callingPalette.callRed,
-        '@media (forced-colors: active)': {
-            forcedColorAdjust: 'auto'
-        }
-    },
-    rootPressed: {
-        color: darkTheme.callingPalette.iconWhite,
-        background: darkTheme.callingPalette.callRed,
-        '@media (forced-colors: active)': {
-            forcedColorAdjust: 'auto'
+        pressed: {
+            color: theme.callingPalette.iconWhite,
+            background: theme.callingPalette.callRedDarker,
+            border: 'none',
+            ' i': {
+                color: theme.callingPalette.iconWhite
+            },
+            '@media (forced-colors: active)': {
+                forcedColorAdjust: 'auto'
+            }
+        },
+        hovered: {
+            color: theme.callingPalette.iconWhite,
+            background: theme.callingPalette.callRedDark,
+            border: 'none',
+            ' i': {
+                color: theme.callingPalette.iconWhite
+            },
+            '@media (forced-colors: active)': {
+                forcedColorAdjust: 'auto'
+            }
         }
-    },
+    });
+};
+const darkThemeButtonStyles = getButtonStyles(darkTheme);
+const lightThemeButtonStyles = getButtonStyles(lightTheme);
+// using media query to prevent windows from overwriting the button color
+const darkThemeCallButtonStyles = {
+    root: darkThemeButtonStyles.regular,
+    rootHovered: darkThemeButtonStyles.hovered,
+    rootPressed: darkThemeButtonStyles.pressed,
     label: {
         color: darkTheme.callingPalette.iconWhite
-    }
+    },
+    splitButtonMenuButton: Object.assign(Object.assign({}, darkThemeButtonStyles.regular), { borderTop: 'none', borderRight: 'none', borderBottom: 'none', '&:hover': darkThemeButtonStyles.hovered }),
+    splitButtonMenuButtonChecked: darkThemeButtonStyles.hovered,
+    splitButtonMenuButtonExpanded: darkThemeButtonStyles.pressed
 };
 const lightThemeCallButtonStyles = {
-    root: {
-        color: lightTheme.callingPalette.iconWhite,
-        background: lightTheme.callingPalette.callRed,
-        '@media (forced-colors: active)': {
-            forcedColorAdjust: 'auto',
-            border: `1px ${(_b = lightTheme.palette) === null || _b === void 0 ? void 0 : _b.neutralQuaternaryAlt} solid`
-        },
-        ':focus::after': { outlineColor: `${lightTheme.callingPalette.iconWhite} !important` } // added !important to avoid override by FluentUI button styles
-    },
-    rootHovered: {
-        color: lightTheme.callingPalette.iconWhite,
-        background: lightTheme.callingPalette.callRed,
-        '@media (forced-colors: active)': {
-            forcedColorAdjust: 'auto'
-        }
-    },
-    rootPressed: {
-        color: lightTheme.callingPalette.iconWhite,
-        background: lightTheme.callingPalette.callRed,
-        '@media (forced-colors: active)': {
-            forcedColorAdjust: 'auto'
-        }
-    },
+    root: lightThemeButtonStyles.regular,
+    rootHovered: lightThemeButtonStyles.hovered,
+    rootPressed: lightThemeButtonStyles.pressed,
+    splitButtonMenuButton: Object.assign(Object.assign({}, lightThemeButtonStyles.regular), { borderTop: 'none', borderRight: 'none', borderBottom: 'none', '&:hover': lightThemeButtonStyles.hovered }),
+    splitButtonMenuButtonChecked: lightThemeButtonStyles.hovered,
+    splitButtonMenuButtonExpanded: lightThemeButtonStyles.pressed,
+    splitButtonMenuFocused: lightThemeButtonStyles.pressed,
     label: {
         color: lightTheme.callingPalette.iconWhite
     }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"EndCallButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/EndCallButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets, Icon } from '@fluentui/react';\nimport React from 'react';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { darkTheme, lightTheme } from '../theming/themes';\nimport { isDarkThemed } from '../theming/themeUtils';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\n\n/*\n Strings of {@link EndCallButton} that can be overridden.\n \n @public\n /\nexport interface EndCallButtonStrings {\n /\n Label of button\n /\n label: string;\n /* Tooltip content. /\n tooltipContent?: string;\n}\n\n/\n Props for {@link EndCallButton}.\n \n @public\n /\nexport interface EndCallButtonProps extends ControlBarButtonProps {\n /\n Utility property for using this component with `communication react eventHandlers`.\n * Maps directly to the `onClick` property.\n /\n onHangUp?: () => Promise<void>;\n\n /\n Optional strings to override in component\n /\n strings?: EndCallButtonStrings;\n}\n\nconst onRenderEndCallIcon = (): JSX.Element => <Icon iconName=\"ControlButtonEndCall\" />;\n\n/\n A button to end an ongoing call.\n \n Can be used with {@link ControlBar}.\n \n @public\n */\nexport const EndCallButton = (props: EndCallButtonProps): JSX.Element => {\n const { styles } = props;\n\n const localeStrings = useLocale().strings.endCallButton;\n const strings = { ...localeStrings, ...props.strings };\n\n const theme = useTheme();\n const isDarkTheme = isDarkThemed(theme);\n const componentStyles = concatStyleSets(\n isDarkTheme ? darkThemeCallButtonStyles : lightThemeCallButtonStyles,\n styles ?? {}\n );\n\n return (\n <ControlBarButton\n {...props}\n onClick={props.onHangUp ?? props.onClick}\n styles={componentStyles}\n onRenderIcon={props.onRenderIcon ?? onRenderEndCallIcon}\n strings={strings}\n labelKey={props.labelKey ?? 'endCallButtonLabel'}\n />\n );\n};\n// using media query to prevent windows from overwriting the button color\nconst darkThemeCallButtonStyles = {\n root: {\n color: darkTheme.callingPalette.iconWhite,\n background: darkTheme.callingPalette.callRed,\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'auto',\n border: `1px ${lightTheme.palette?.neutralQuaternaryAlt} solid`\n },\n ':focus::after': { outlineColor: `${darkTheme.callingPalette.iconWhite} !important` } // added !important to avoid override by FluentUI button styles\n },\n rootHovered: {\n color: darkTheme.callingPalette.iconWhite,\n background: darkTheme.callingPalette.callRed,\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'auto'\n }\n },\n rootPressed: {\n color: darkTheme.callingPalette.iconWhite,\n background: darkTheme.callingPalette.callRed,\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'auto'\n }\n },\n label: {\n color: darkTheme.callingPalette.iconWhite\n }\n};\n\nconst lightThemeCallButtonStyles = {\n root: {\n color: lightTheme.callingPalette.iconWhite,\n background: lightTheme.callingPalette.callRed,\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'auto',\n border: `1px ${lightTheme.palette?.neutralQuaternaryAlt} solid`\n },\n ':focus::after': { outlineColor: `${lightTheme.callingPalette.iconWhite} !important` } // added !important to avoid override by FluentUI button styles\n },\n rootHovered: {\n color: lightTheme.callingPalette.iconWhite,\n background: lightTheme.callingPalette.callRed,\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'auto'\n }\n },\n rootPressed: {\n color: lightTheme.callingPalette.iconWhite,\n background: lightTheme.callingPalette.callRed,\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'auto'\n }\n },\n label: {\n color: lightTheme.callingPalette.iconWhite\n }\n};\n"]}
1	+ {"version":3,"file":"EndCallButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/EndCallButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets, Icon, IStyle, PartialTheme } from '@fluentui/react';\n/* @conditional-compile-remove(end-call-options) /\nimport { IContextualMenuProps } from '@fluentui/react';\nimport React from 'react';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { CallingTheme, darkTheme, lightTheme } from '../theming/themes';\nimport { isDarkThemed } from '../theming/themeUtils';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\n/ @conditional-compile-remove(end-call-options) /\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/\n Strings of {@link EndCallButton} that can be overridden.\n \n @public\n /\nexport interface EndCallButtonStrings {\n /\n Label of button\n /\n label: string;\n /* Tooltip content. /\n tooltipContent?: string;\n\n / @conditional-compile-remove(end-call-options) /\n /* Label for leave option when ending call /\n leaveOption?: string;\n\n / @conditional-compile-remove(end-call-options) /\n /* Label for end the whole call option when ending call /\n endCallOption?: string;\n}\n\n/\n Props for {@link EndCallButton}.\n \n @public\n /\nexport interface EndCallButtonProps extends ControlBarButtonProps {\n /\n Utility property for using this component with `communication react eventHandlers`.\n * Maps directly to the `onClick` property.\n /\n onHangUp?: (forEveryone?: boolean) => Promise<void>;\n\n / @conditional-compile-remove(end-call-options) /\n /\n Set this to true to make it a split button.\n * The split arrow will trigger a contextual menu to allow end for everyone or just for the user.\n /\n enableEndCallMenu?: boolean;\n\n /\n Optional strings to override in component\n /\n strings?: EndCallButtonStrings;\n}\n\nconst onRenderEndCallIcon = (): JSX.Element => <Icon iconName=\"ControlButtonEndCall\" />;\n\n/\n A button to end an ongoing call.\n \n Can be used with {@link ControlBar}.\n \n @public\n /\nexport const EndCallButton = (props: EndCallButtonProps): JSX.Element => {\n const { styles, / @conditional-compile-remove(end-call-options) / enableEndCallMenu, onHangUp } = props;\n\n const localeStrings = useLocale().strings.endCallButton;\n const strings = { ...localeStrings, ...props.strings };\n\n const theme = useTheme();\n const isDarkTheme = isDarkThemed(theme);\n const componentStyles = concatStyleSets(\n isDarkTheme ? darkThemeCallButtonStyles : lightThemeCallButtonStyles,\n styles ?? {}\n );\n\n / @conditional-compile-remove(end-call-options) /\n const defaultMenuProps: IContextualMenuProps = {\n items: [\n {\n key: 'endForSelf',\n text: localeStrings.leaveOption,\n title: localeStrings.leaveOption,\n onClick: () => {\n onHangUp && onHangUp(false);\n }\n },\n {\n key: 'endForEveryone',\n text: localeStrings.endCallOption,\n title: localeStrings.endCallOption,\n onClick: () => {\n onHangUp && onHangUp(true);\n }\n }\n ],\n styles: props.styles,\n calloutProps: {\n styles: {\n root: {\n maxWidth: '95%'\n }\n },\n preventDismissOnEvent\n }\n };\n\n return (\n <>\n <ControlBarButton\n {...props}\n / @conditional-compile-remove(end-call-options) */\n menuProps={enableEndCallMenu ? defaultMenuProps : undefined}\n onClick={onHangUp ? () => onHangUp() : props.onClick}\n styles={componentStyles}\n onRenderIcon={props.onRenderIcon ?? onRenderEndCallIcon}\n strings={strings}\n labelKey={props.labelKey ?? 'endCallButtonLabel'}\n />\n </>\n );\n};\n\nconst getButtonStyles = (\n theme: PartialTheme & CallingTheme\n): { regular: IStyle; pressed: IStyle; hovered: IStyle } => ({\n regular: {\n color: theme.callingPalette.iconWhite,\n background: theme.callingPalette.callRed,\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'auto',\n border: `1px ${theme.palette?.neutralQuaternaryAlt} solid`\n },\n ' i': {\n color: theme.callingPalette.iconWhite\n },\n ':focus::after': { outlineColor: `${theme.callingPalette.iconWhite} !important` } // added !important to avoid override by FluentUI button styles\n },\n pressed: {\n color: theme.callingPalette.iconWhite,\n background: theme.callingPalette.callRedDarker,\n border: 'none',\n ' i': {\n color: theme.callingPalette.iconWhite\n },\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'auto'\n }\n },\n hovered: {\n color: theme.callingPalette.iconWhite,\n background: theme.callingPalette.callRedDark,\n border: 'none',\n ' i': {\n color: theme.callingPalette.iconWhite\n },\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'auto'\n }\n }\n});\n\nconst darkThemeButtonStyles = getButtonStyles(darkTheme);\nconst lightThemeButtonStyles = getButtonStyles(lightTheme);\n\n// using media query to prevent windows from overwriting the button color\nconst darkThemeCallButtonStyles = {\n root: darkThemeButtonStyles.regular,\n rootHovered: darkThemeButtonStyles.hovered,\n rootPressed: darkThemeButtonStyles.pressed,\n label: {\n color: darkTheme.callingPalette.iconWhite\n },\n splitButtonMenuButton: {\n ...(darkThemeButtonStyles.regular as object),\n borderTop: 'none',\n borderRight: 'none',\n borderBottom: 'none',\n '&:hover': darkThemeButtonStyles.hovered\n },\n splitButtonMenuButtonChecked: darkThemeButtonStyles.hovered,\n splitButtonMenuButtonExpanded: darkThemeButtonStyles.pressed\n};\n\nconst lightThemeCallButtonStyles = {\n root: lightThemeButtonStyles.regular,\n rootHovered: lightThemeButtonStyles.hovered,\n rootPressed: lightThemeButtonStyles.pressed,\n splitButtonMenuButton: {\n ...(lightThemeButtonStyles.regular as object),\n borderTop: 'none',\n borderRight: 'none',\n borderBottom: 'none',\n '&:hover': lightThemeButtonStyles.hovered\n },\n splitButtonMenuButtonChecked: lightThemeButtonStyles.hovered,\n splitButtonMenuButtonExpanded: lightThemeButtonStyles.pressed,\n splitButtonMenuFocused: lightThemeButtonStyles.pressed,\n label: {\n color: lightTheme.callingPalette.iconWhite\n }\n};\n"]}

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

@@ -38,10 +38,10 @@ export interface ReactionButtonStrings {
     likeReactionTooltipContent?: string;
     /** Tooltip content of heart reaction button. */
     heartReactionTooltipContent?: string;
-    /** Tooltip content of laugh reaction button. */
-    laughReactionTooltipContent?: string;
     /** Tooltip content of clap reaction button. */
     applauseReactionTooltipContent?: string;
+    /** Tooltip content of laugh reaction button. */
+    laughReactionTooltipContent?: string;
     /** Tooltip content of surprised reaction button. */
     surprisedReactionTooltipContent?: string;
 }

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

@@ -3,7 +3,7 @@
 /* @conditional-compile-remove(reaction) */
 import { ContextualMenuItemType, DefaultPalette, IconButton, mergeStyles, TooltipHost, useTheme } from '@fluentui/react';
 /* @conditional-compile-remove(reaction) */
-import React, { useState } from 'react';
+import React from 'react';
 /* @conditional-compile-remove(reaction) */
 import { ControlBarButton } from './ControlBarButton';
 /* @conditional-compile-remove(reaction) */
@@ -15,6 +15,8 @@ import { emojiStyles, reactionEmojiMenuStyles, reactionToolTipHostStyle } from '
 /* @conditional-compile-remove(reaction) */
 import { isDarkThemed } from '../theming/themeUtils';
 /* @conditional-compile-remove(reaction) */
+import { getEmojiFrameCount } from './VideoGallery/utils/videoGalleryLayoutUtils';
+/* @conditional-compile-remove(reaction) */
 /**
  * A button to send reactions.
  *
@@ -29,20 +31,19 @@ export const ReactionButton = (props) => {
     const theme = useTheme();
     const styles = reactionButtonStyles(theme);
     const onRenderIcon = () => (React.createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "ReactionButtonIcon" }));
-    const [isHoveredMap, setIsHoveredMap] = useState(new Map());
-    const emojis = ['like', 'heart', 'laugh', 'applause', 'surprised'];
+    const emojis = ['like', 'heart', 'applause', 'laugh', 'surprised'];
     const emojiButtonTooltip = new Map([
         ['like', strings.likeReactionTooltipContent],
         ['heart', strings.heartReactionTooltipContent],
-        ['laugh', strings.laughReactionTooltipContent],
         ['applause', strings.applauseReactionTooltipContent],
+        ['laugh', strings.laughReactionTooltipContent],
         ['surprised', strings.surprisedReactionTooltipContent]
     ]);
     const emojiResource = new Map([
         ['like', (_a = props.reactionResources.likeReaction) === null || _a === void 0 ? void 0 : _a.url],
         ['heart', (_b = props.reactionResources.heartReaction) === null || _b === void 0 ? void 0 : _b.url],
-        ['laugh', (_c = props.reactionResources.laughReaction) === null || _c === void 0 ? void 0 : _c.url],
-        ['applause', (_d = props.reactionResources.applauseReaction) === null || _d === void 0 ? void 0 : _d.url],
+        ['applause', (_c = props.reactionResources.applauseReaction) === null || _c === void 0 ? void 0 : _c.url],
+        ['laugh', (_d = props.reactionResources.laughReaction) === null || _d === void 0 ? void 0 : _d.url],
         ['surprised', (_e = props.reactionResources.surprisedReaction) === null || _e === void 0 ? void 0 : _e.url]
     ]);
     const calloutStyle = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };
@@ -51,20 +52,16 @@ export const ReactionButton = (props) => {
         styles: calloutStyle,
         backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''
     };
-    const renderEmoji = (item, dismissMenu) => (React.createElement("div", { style: reactionEmojiMenuStyles() }, emojis.map((emoji, index) => {
+    const classname = mergeStyles(reactionEmojiMenuStyles());
+    const renderEmoji = (item, dismissMenu) => (React.createElement("div", { className: classname }, emojis.map((emoji, index) => {
         const resourceUrl = emojiResource.get(emoji);
+        const frameCount = props.reactionResources !== undefined ? getEmojiFrameCount(emoji, props.reactionResources) : 0;
+        const classname = mergeStyles(emojiStyles(resourceUrl ? resourceUrl : '', frameCount));
         return (React.createElement(TooltipHost, { key: index, "data-ui-id": index, hidden: props.disableTooltip, content: emojiButtonTooltip.get(emoji), styles: reactionToolTipHostStyle(), calloutProps: Object.assign({}, calloutProps) },
             React.createElement(IconButton, { key: index, onClick: () => {
                     props.onReactionClick(emoji);
-                    setIsHoveredMap((prevMap) => {
-                        return new Map(prevMap).set(emoji, false);
-                    });
                     dismissMenu();
-                }, style: emojiStyles(resourceUrl ? resourceUrl : '', isHoveredMap.get(emoji) ? 'running' : 'paused'), onMouseEnter: () => setIsHoveredMap((prevMap) => {
-                    return new Map(prevMap).set(emoji, true);
-                }), onMouseLeave: () => setIsHoveredMap((prevMap) => {
-                    return new Map(prevMap).set(emoji, false);
-                }) })));
+                }, className: classname })));
     })));
     const emojiList = [
         { key: 'reactions', itemType: ContextualMenuItemType.Normal, onRender: renderEmoji }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ReactionButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ReactionButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(reaction) /\nimport {\n ContextualMenuItemType,\n DefaultPalette,\n IButtonStyles,\n ICalloutContentStyles,\n IconButton,\n IContextualMenuItem,\n mergeStyles,\n Theme,\n TooltipHost,\n useTheme\n} from '@fluentui/react';\n/ @conditional-compile-remove(reaction) /\nimport React, { useState } from 'react';\n/ @conditional-compile-remove(reaction) /\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\n/ @conditional-compile-remove(reaction) /\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\n/ @conditional-compile-remove(reaction) /\nimport { useLocale } from '../localization';\n/ @conditional-compile-remove(reaction) /\nimport { emojiStyles, reactionEmojiMenuStyles, reactionToolTipHostStyle } from './styles/ReactionButton.styles';\n/ @conditional-compile-remove(reaction) /\nimport { isDarkThemed } from '../theming/themeUtils';\n/ @conditional-compile-remove(reaction) /\nimport { ReactionResources } from '..';\n\n/ @conditional-compile-remove(reaction) /\n/\n Props for {@link ReactionButton}.\n \n @beta\n /\nexport interface ReactionButtonProps extends ControlBarButtonProps {\n /\n Optional strings to override in component\n /\n strings?: Partial<ReactionButtonStrings>;\n /\n Click event to send reaction to meeting\n /\n onReactionClick: (reaction: string) => Promise<void>;\n /\n Reaction resource locator and parameters\n /\n reactionResources: ReactionResources;\n}\n\n/ @conditional-compile-remove(reaction) /\n/\n Strings of {@link ReactionButton} that can be overridden.\n \n @beta\n /\nexport interface ReactionButtonStrings {\n /* Label of the button. /\n label: string;\n /* Aria label for reaction button accessibility announcement /\n ariaLabel: string;\n /* Tooltip content when the button is disabled. /\n tooltipDisabledContent?: string;\n /* Tooltip content when the button is enabled. /\n tooltipContent?: string;\n /* Tooltip content of like reaction button. /\n likeReactionTooltipContent?: string;\n /* Tooltip content of heart reaction button. /\n heartReactionTooltipContent?: string;\n /* Tooltip content of laugh reaction button. /\n laughReactionTooltipContent?: string;\n /* Tooltip content of clap reaction button. /\n applauseReactionTooltipContent?: string;\n /* Tooltip content of surprised reaction button. /\n surprisedReactionTooltipContent?: string;\n}\n\n/ @conditional-compile-remove(reaction) /\n/\n A button to send reactions.\n \n Can be used with {@link ControlBar}.\n \n @beta\n /\nexport const ReactionButton = (props: ReactionButtonProps): JSX.Element => {\n const localeStrings = useLocale().strings.reactionButton;\n const strings = { ...localeStrings, ...props.strings };\n const theme = useTheme();\n const styles = reactionButtonStyles(theme);\n const onRenderIcon = (): JSX.Element => (\n <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ReactionButtonIcon\" />\n );\n\n const [isHoveredMap, setIsHoveredMap] = useState(new Map());\n const emojis = ['like', 'heart', 'laugh', 'applause', 'surprised'];\n const emojiButtonTooltip: Map<string, string \| undefined> = new Map([\n ['like', strings.likeReactionTooltipContent],\n ['heart', strings.heartReactionTooltipContent],\n ['laugh', strings.laughReactionTooltipContent],\n ['applause', strings.applauseReactionTooltipContent],\n ['surprised', strings.surprisedReactionTooltipContent]\n ]);\n const emojiResource: Map<string, string \| undefined> = new Map([\n ['like', props.reactionResources.likeReaction?.url],\n ['heart', props.reactionResources.heartReaction?.url],\n ['laugh', props.reactionResources.laughReaction?.url],\n ['applause', props.reactionResources.applauseReaction?.url],\n ['surprised', props.reactionResources.surprisedReaction?.url]\n ]);\n\n const calloutStyle: Partial<ICalloutContentStyles> = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };\n\n const calloutProps = {\n gapSpace: 4,\n styles: calloutStyle,\n backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n };\n\n const renderEmoji = (item: IContextualMenuItem, dismissMenu: () => void): React.JSX.Element => (\n <div style={reactionEmojiMenuStyles()}>\n {emojis.map((emoji, index) => {\n const resourceUrl = emojiResource.get(emoji);\n return (\n <TooltipHost\n key={index}\n data-ui-id={index}\n hidden={props.disableTooltip}\n content={emojiButtonTooltip.get(emoji)}\n styles={reactionToolTipHostStyle()}\n calloutProps={{ ...calloutProps }}\n >\n <IconButton\n key={index}\n onClick={() => {\n props.onReactionClick(emoji);\n setIsHoveredMap((prevMap) => {\n return new Map(prevMap).set(emoji, false);\n });\n dismissMenu();\n }}\n style={emojiStyles(resourceUrl ? resourceUrl : '', isHoveredMap.get(emoji) ? 'running' : 'paused')}\n onMouseEnter={() =>\n setIsHoveredMap((prevMap) => {\n return new Map(prevMap).set(emoji, true);\n })\n }\n onMouseLeave={() =>\n setIsHoveredMap((prevMap) => {\n return new Map(prevMap).set(emoji, false);\n })\n }\n />\n </TooltipHost>\n );\n })}\n </div>\n );\n\n const emojiList: IContextualMenuItem[] = [\n { key: 'reactions', itemType: ContextualMenuItemType.Normal, onRender: renderEmoji }\n ];\n\n return (\n <ControlBarButton\n {...props}\n className={mergeStyles(styles, props.styles)}\n menuProps={{\n shouldFocusOnMount: true,\n items: emojiList\n }}\n onRenderIcon={props.onRenderIcon ?? onRenderIcon}\n strings={strings}\n labelKey={props.labelKey ?? 'reactionButtonLabel'}\n onRenderMenuIcon={() => <div />}\n disabled={props.disabled}\n ariaLabel={strings.ariaLabel}\n />\n );\n};\n\n/ @conditional-compile-remove(reaction) */\nconst reactionButtonStyles = (theme: Theme): IButtonStyles => ({\n rootChecked: {\n background: theme.palette.themePrimary,\n color: DefaultPalette.white\n },\n rootCheckedHovered: {\n background: theme.palette.themePrimary,\n color: DefaultPalette.white\n },\n labelChecked: { color: DefaultPalette.white }\n});\n"]}
1	+ {"version":3,"file":"ReactionButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ReactionButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(reaction) /\nimport {\n ContextualMenuItemType,\n DefaultPalette,\n IButtonStyles,\n ICalloutContentStyles,\n IconButton,\n IContextualMenuItem,\n mergeStyles,\n Theme,\n TooltipHost,\n useTheme\n} from '@fluentui/react';\n/ @conditional-compile-remove(reaction) /\nimport React from 'react';\n/ @conditional-compile-remove(reaction) /\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\n/ @conditional-compile-remove(reaction) /\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\n/ @conditional-compile-remove(reaction) /\nimport { useLocale } from '../localization';\n/ @conditional-compile-remove(reaction) /\nimport { emojiStyles, reactionEmojiMenuStyles, reactionToolTipHostStyle } from './styles/ReactionButton.styles';\n/ @conditional-compile-remove(reaction) /\nimport { isDarkThemed } from '../theming/themeUtils';\n/ @conditional-compile-remove(reaction) /\nimport { ReactionResources } from '..';\n/ @conditional-compile-remove(reaction) /\nimport { getEmojiFrameCount } from './VideoGallery/utils/videoGalleryLayoutUtils';\n\n/ @conditional-compile-remove(reaction) /\n/\n Props for {@link ReactionButton}.\n \n @beta\n /\nexport interface ReactionButtonProps extends ControlBarButtonProps {\n /\n Optional strings to override in component\n /\n strings?: Partial<ReactionButtonStrings>;\n /\n Click event to send reaction to meeting\n /\n onReactionClick: (reaction: string) => Promise<void>;\n /\n Reaction resource locator and parameters\n /\n reactionResources: ReactionResources;\n}\n\n/ @conditional-compile-remove(reaction) /\n/\n Strings of {@link ReactionButton} that can be overridden.\n \n @beta\n /\nexport interface ReactionButtonStrings {\n /* Label of the button. /\n label: string;\n /* Aria label for reaction button accessibility announcement /\n ariaLabel: string;\n /* Tooltip content when the button is disabled. /\n tooltipDisabledContent?: string;\n /* Tooltip content when the button is enabled. /\n tooltipContent?: string;\n /* Tooltip content of like reaction button. /\n likeReactionTooltipContent?: string;\n /* Tooltip content of heart reaction button. /\n heartReactionTooltipContent?: string;\n /* Tooltip content of clap reaction button. /\n applauseReactionTooltipContent?: string;\n /* Tooltip content of laugh reaction button. /\n laughReactionTooltipContent?: string;\n /* Tooltip content of surprised reaction button. /\n surprisedReactionTooltipContent?: string;\n}\n\n/ @conditional-compile-remove(reaction) /\n/\n A button to send reactions.\n \n Can be used with {@link ControlBar}.\n \n @beta\n /\nexport const ReactionButton = (props: ReactionButtonProps): JSX.Element => {\n const localeStrings = useLocale().strings.reactionButton;\n const strings = { ...localeStrings, ...props.strings };\n const theme = useTheme();\n const styles = reactionButtonStyles(theme);\n const onRenderIcon = (): JSX.Element => (\n <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ReactionButtonIcon\" />\n );\n\n const emojis = ['like', 'heart', 'applause', 'laugh', 'surprised'];\n const emojiButtonTooltip: Map<string, string \| undefined> = new Map([\n ['like', strings.likeReactionTooltipContent],\n ['heart', strings.heartReactionTooltipContent],\n ['applause', strings.applauseReactionTooltipContent],\n ['laugh', strings.laughReactionTooltipContent],\n ['surprised', strings.surprisedReactionTooltipContent]\n ]);\n const emojiResource: Map<string, string \| undefined> = new Map([\n ['like', props.reactionResources.likeReaction?.url],\n ['heart', props.reactionResources.heartReaction?.url],\n ['applause', props.reactionResources.applauseReaction?.url],\n ['laugh', props.reactionResources.laughReaction?.url],\n ['surprised', props.reactionResources.surprisedReaction?.url]\n ]);\n\n const calloutStyle: Partial<ICalloutContentStyles> = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };\n\n const calloutProps = {\n gapSpace: 4,\n styles: calloutStyle,\n backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n };\n\n const classname = mergeStyles(reactionEmojiMenuStyles());\n\n const renderEmoji = (item: IContextualMenuItem, dismissMenu: () => void): React.JSX.Element => (\n <div className={classname}>\n {emojis.map((emoji, index) => {\n const resourceUrl = emojiResource.get(emoji);\n const frameCount: number =\n props.reactionResources !== undefined ? getEmojiFrameCount(emoji, props.reactionResources) : 0;\n const classname = mergeStyles(emojiStyles(resourceUrl ? resourceUrl : '', frameCount));\n return (\n <TooltipHost\n key={index}\n data-ui-id={index}\n hidden={props.disableTooltip}\n content={emojiButtonTooltip.get(emoji)}\n styles={reactionToolTipHostStyle()}\n calloutProps={{ ...calloutProps }}\n >\n <IconButton\n key={index}\n onClick={() => {\n props.onReactionClick(emoji);\n dismissMenu();\n }}\n className={classname}\n />\n </TooltipHost>\n );\n })}\n </div>\n );\n\n const emojiList: IContextualMenuItem[] = [\n { key: 'reactions', itemType: ContextualMenuItemType.Normal, onRender: renderEmoji }\n ];\n\n return (\n <ControlBarButton\n {...props}\n className={mergeStyles(styles, props.styles)}\n menuProps={{\n shouldFocusOnMount: true,\n items: emojiList\n }}\n onRenderIcon={props.onRenderIcon ?? onRenderIcon}\n strings={strings}\n labelKey={props.labelKey ?? 'reactionButtonLabel'}\n onRenderMenuIcon={() => <div />}\n disabled={props.disabled}\n ariaLabel={strings.ariaLabel}\n />\n );\n};\n\n/ @conditional-compile-remove(reaction) */\nconst reactionButtonStyles = (theme: Theme): IButtonStyles => ({\n rootChecked: {\n background: theme.palette.themePrimary,\n color: DefaultPalette.white\n },\n rootCheckedHovered: {\n background: theme.palette.themePrimary,\n color: DefaultPalette.white\n },\n labelChecked: { color: DefaultPalette.white }\n});\n"]}

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

@@ -19,8 +19,8 @@ export interface RichTextInputBoxComponentProps {
     strings: Partial<RichTextSendBoxStrings>;
     disabled: boolean;
     actionComponents: ReactNode;
-    onRenderFileUploads?: () => JSX.Element;
-    hasFiles?: boolean;
+    onRenderAttachmentUploads?: () => JSX.Element;
+    hasAttachments?: boolean;
     richTextEditorStyleProps: (isExpanded: boolean) => RichTextEditorStyleProps;
     isHorizontalLayoutDisabled?: boolean;
 }

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

@@ -14,9 +14,9 @@ import { inputBoxContentStackStyle, inputBoxRichTextStackItemStyle, inputBoxRich
 export const RichTextInputBoxComponent = (props) => {
     const { placeholderText, initialContent, onChange, onEnterKeyDown, editorComponentRef, disabled, strings, actionComponents,
     /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
-    onRenderFileUploads,
+    onRenderAttachmentUploads,
     /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
-    hasFiles, richTextEditorStyleProps, isHorizontalLayoutDisabled = false } = props;
+    hasAttachments, richTextEditorStyleProps, isHorizontalLayoutDisabled = false } = props;
     const theme = useTheme();
     const [showRichTextEditorFormatting, setShowRichTextEditorFormatting] = useState(false);
     const onRenderRichTextEditorIcon = useCallback((isHover) => (React.createElement(Icon, { iconName: isHover || showRichTextEditorFormatting ? 'RichTextEditorButtonIconFilled' : 'RichTextEditorButtonIcon', className: richTextFormatButtonIconStyle(theme, !disabled && (isHover || showRichTextEditorFormatting)) })), [disabled, showRichTextEditorFormatting, theme]);
@@ -54,11 +54,11 @@ export const RichTextInputBoxComponent = (props) => {
     const useHorizontalLayout = useMemo(() => {
         return (!isHorizontalLayoutDisabled &&
             !showRichTextEditorFormatting &&
-            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ !hasFiles);
+            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ !hasAttachments);
     }, [
         isHorizontalLayoutDisabled,
         showRichTextEditorFormatting,
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ hasFiles
+        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ hasAttachments
     ]);
     return (React.createElement("div", { className: richTextBorderBoxStyle({
             theme: theme,
@@ -68,8 +68,8 @@ export const RichTextInputBoxComponent = (props) => {
             React.createElement(Stack, { grow: true, className: inputBoxRichTextStackStyle },
                 React.createElement(Stack.Item, { className: inputBoxRichTextStackItemStyle },
                     React.createElement(RichTextEditor, { initialContent: initialContent, placeholderText: placeholderText, onChange: onChange, onKeyDown: onKeyDown, ref: editorComponentRef, strings: strings, showRichTextEditorFormatting: showRichTextEditorFormatting, styles: richTextEditorStyle })),
-                /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ onRenderFileUploads &&
-                    onRenderFileUploads()),
+                /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ onRenderAttachmentUploads &&
+                    onRenderAttachmentUploads()),
             actionButtons)));
 };
 //# sourceMappingURL=RichTextInputBoxComponent.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RichTextInputBoxComponent.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextInputBoxComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { ReactNode, useCallback, useMemo, useState } from 'react';\nimport { BaseCustomStyles } from '../../types';\nimport { RichTextEditor, RichTextEditorComponentRef, RichTextEditorStyleProps } from './RichTextEditor';\nimport { RichTextSendBoxStrings } from './RichTextSendBox';\nimport { useTheme } from '../../theming';\nimport { Icon, Stack } from '@fluentui/react';\nimport { InputBoxButton } from '../InputBoxButton';\nimport { isEnterKeyEventFromCompositionSession } from '../utils';\nimport {\n richTextActionButtonsDividerStyle,\n richTextActionButtonsStackStyle,\n richTextActionButtonsStyle,\n richTextFormatButtonIconStyle\n} from '../styles/RichTextEditor.styles';\nimport {\n inputBoxContentStackStyle,\n inputBoxRichTextStackItemStyle,\n inputBoxRichTextStackStyle,\n richTextBorderBoxStyle\n} from '../styles/RichTextInputBoxComponent.styles';\n\n/*\n @private\n /\nexport interface RichTextInputBoxComponentStylesProps extends BaseCustomStyles {}\n\n/\n @private\n /\nexport interface RichTextInputBoxComponentProps {\n placeholderText?: string;\n initialContent?: string;\n onChange: (newValue?: string) => void;\n onEnterKeyDown?: () => void;\n editorComponentRef: React.RefObject<RichTextEditorComponentRef>;\n strings: Partial<RichTextSendBoxStrings>;\n disabled: boolean;\n actionComponents: ReactNode;\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n onRenderFileUploads?: () => JSX.Element;\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n hasFiles?: boolean;\n // props for min and max height for the rich text editor\n // otherwise the editor will grow to fit the content\n richTextEditorStyleProps: (isExpanded: boolean) => RichTextEditorStyleProps;\n isHorizontalLayoutDisabled?: boolean;\n}\n\n/\n @private\n /\nexport const RichTextInputBoxComponent = (props: RichTextInputBoxComponentProps): JSX.Element => {\n const {\n placeholderText,\n initialContent,\n onChange,\n onEnterKeyDown,\n editorComponentRef,\n disabled,\n strings,\n actionComponents,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n onRenderFileUploads,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n hasFiles,\n richTextEditorStyleProps,\n isHorizontalLayoutDisabled = false\n } = props;\n const theme = useTheme();\n const [showRichTextEditorFormatting, setShowRichTextEditorFormatting] = useState(false);\n\n const onRenderRichTextEditorIcon = useCallback(\n (isHover: boolean) => (\n <Icon\n iconName={\n isHover \|\| showRichTextEditorFormatting ? 'RichTextEditorButtonIconFilled' : 'RichTextEditorButtonIcon'\n }\n className={richTextFormatButtonIconStyle(theme, !disabled && (isHover \|\| showRichTextEditorFormatting))}\n />\n ),\n [disabled, showRichTextEditorFormatting, theme]\n );\n\n const actionButtons = useMemo(() => {\n return (\n <Stack.Item align=\"end\" className={richTextActionButtonsStackStyle}>\n <Stack horizontal>\n <InputBoxButton\n onRenderIcon={onRenderRichTextEditorIcon}\n onClick={(e) => {\n setShowRichTextEditorFormatting(!showRichTextEditorFormatting);\n editorComponentRef.current?.focus();\n e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.\n }}\n ariaLabel={strings.richTextFormatButtonTooltip}\n tooltipContent={strings.richTextFormatButtonTooltip}\n className={richTextActionButtonsStyle}\n data-testId={'rich-text-input-box-format-button'}\n />\n <Icon iconName=\"RichTextDividerIcon\" className={richTextActionButtonsDividerStyle(theme)} />\n {actionComponents}\n </Stack>\n </Stack.Item>\n );\n }, [\n actionComponents,\n editorComponentRef,\n onRenderRichTextEditorIcon,\n showRichTextEditorFormatting,\n strings.richTextFormatButtonTooltip,\n theme\n ]);\n\n const richTextEditorStyle = useMemo(() => {\n return richTextEditorStyleProps(showRichTextEditorFormatting);\n }, [richTextEditorStyleProps, showRichTextEditorFormatting]);\n\n const onKeyDown = useCallback(\n (ev: React.KeyboardEvent<HTMLElement>) => {\n if (isEnterKeyEventFromCompositionSession(ev)) {\n return;\n }\n if (ev.key === 'Enter' && ev.shiftKey === false && !showRichTextEditorFormatting) {\n ev.preventDefault();\n onEnterKeyDown && onEnterKeyDown();\n }\n },\n [onEnterKeyDown, showRichTextEditorFormatting]\n );\n\n const useHorizontalLayout = useMemo(() => {\n return (\n !isHorizontalLayoutDisabled &&\n !showRichTextEditorFormatting &&\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) / !hasFiles\n );\n }, [\n isHorizontalLayoutDisabled,\n showRichTextEditorFormatting,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) / hasFiles\n ]);\n\n return (\n <div\n className={richTextBorderBoxStyle({\n theme: theme,\n disabled: !!disabled\n })}\n >\n {/ This layout is used for the compact view when formatting options are not shown /}\n <Stack\n grow\n horizontal={useHorizontalLayout}\n horizontalAlign={useHorizontalLayout ? 'end' : 'space-between'}\n className={inputBoxContentStackStyle}\n wrap={useHorizontalLayout}\n >\n {/ Fixes the issue when flex box can grow to be bigger than parent /}\n <Stack grow className={inputBoxRichTextStackStyle}>\n <Stack.Item className={inputBoxRichTextStackItemStyle}>\n <RichTextEditor\n initialContent={initialContent}\n placeholderText={placeholderText}\n onChange={onChange}\n onKeyDown={onKeyDown}\n ref={editorComponentRef}\n strings={strings}\n showRichTextEditorFormatting={showRichTextEditorFormatting}\n styles={richTextEditorStyle}\n />\n </Stack.Item>\n {\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ onRenderFileUploads &&\n onRenderFileUploads()\n }\n </Stack>\n {actionButtons}\n </Stack>\n </div>\n );\n};\n"]}
1	+ {"version":3,"file":"RichTextInputBoxComponent.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextInputBoxComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { ReactNode, useCallback, useMemo, useState } from 'react';\nimport { BaseCustomStyles } from '../../types';\nimport { RichTextEditor, RichTextEditorComponentRef, RichTextEditorStyleProps } from './RichTextEditor';\nimport { RichTextSendBoxStrings } from './RichTextSendBox';\nimport { useTheme } from '../../theming';\nimport { Icon, Stack } from '@fluentui/react';\nimport { InputBoxButton } from '../InputBoxButton';\nimport { isEnterKeyEventFromCompositionSession } from '../utils';\nimport {\n richTextActionButtonsDividerStyle,\n richTextActionButtonsStackStyle,\n richTextActionButtonsStyle,\n richTextFormatButtonIconStyle\n} from '../styles/RichTextEditor.styles';\nimport {\n inputBoxContentStackStyle,\n inputBoxRichTextStackItemStyle,\n inputBoxRichTextStackStyle,\n richTextBorderBoxStyle\n} from '../styles/RichTextInputBoxComponent.styles';\n\n/*\n @private\n /\nexport interface RichTextInputBoxComponentStylesProps extends BaseCustomStyles {}\n\n/\n @private\n /\nexport interface RichTextInputBoxComponentProps {\n placeholderText?: string;\n initialContent?: string;\n onChange: (newValue?: string) => void;\n onEnterKeyDown?: () => void;\n editorComponentRef: React.RefObject<RichTextEditorComponentRef>;\n strings: Partial<RichTextSendBoxStrings>;\n disabled: boolean;\n actionComponents: ReactNode;\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n onRenderAttachmentUploads?: () => JSX.Element;\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n hasAttachments?: boolean;\n // props for min and max height for the rich text editor\n // otherwise the editor will grow to fit the content\n richTextEditorStyleProps: (isExpanded: boolean) => RichTextEditorStyleProps;\n isHorizontalLayoutDisabled?: boolean;\n}\n\n/\n @private\n /\nexport const RichTextInputBoxComponent = (props: RichTextInputBoxComponentProps): JSX.Element => {\n const {\n placeholderText,\n initialContent,\n onChange,\n onEnterKeyDown,\n editorComponentRef,\n disabled,\n strings,\n actionComponents,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n onRenderAttachmentUploads,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n hasAttachments,\n richTextEditorStyleProps,\n isHorizontalLayoutDisabled = false\n } = props;\n const theme = useTheme();\n const [showRichTextEditorFormatting, setShowRichTextEditorFormatting] = useState(false);\n\n const onRenderRichTextEditorIcon = useCallback(\n (isHover: boolean) => (\n <Icon\n iconName={\n isHover \|\| showRichTextEditorFormatting ? 'RichTextEditorButtonIconFilled' : 'RichTextEditorButtonIcon'\n }\n className={richTextFormatButtonIconStyle(theme, !disabled && (isHover \|\| showRichTextEditorFormatting))}\n />\n ),\n [disabled, showRichTextEditorFormatting, theme]\n );\n\n const actionButtons = useMemo(() => {\n return (\n <Stack.Item align=\"end\" className={richTextActionButtonsStackStyle}>\n <Stack horizontal>\n <InputBoxButton\n onRenderIcon={onRenderRichTextEditorIcon}\n onClick={(e) => {\n setShowRichTextEditorFormatting(!showRichTextEditorFormatting);\n editorComponentRef.current?.focus();\n e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.\n }}\n ariaLabel={strings.richTextFormatButtonTooltip}\n tooltipContent={strings.richTextFormatButtonTooltip}\n className={richTextActionButtonsStyle}\n data-testId={'rich-text-input-box-format-button'}\n />\n <Icon iconName=\"RichTextDividerIcon\" className={richTextActionButtonsDividerStyle(theme)} />\n {actionComponents}\n </Stack>\n </Stack.Item>\n );\n }, [\n actionComponents,\n editorComponentRef,\n onRenderRichTextEditorIcon,\n showRichTextEditorFormatting,\n strings.richTextFormatButtonTooltip,\n theme\n ]);\n\n const richTextEditorStyle = useMemo(() => {\n return richTextEditorStyleProps(showRichTextEditorFormatting);\n }, [richTextEditorStyleProps, showRichTextEditorFormatting]);\n\n const onKeyDown = useCallback(\n (ev: React.KeyboardEvent<HTMLElement>) => {\n if (isEnterKeyEventFromCompositionSession(ev)) {\n return;\n }\n if (ev.key === 'Enter' && ev.shiftKey === false && !showRichTextEditorFormatting) {\n ev.preventDefault();\n onEnterKeyDown && onEnterKeyDown();\n }\n },\n [onEnterKeyDown, showRichTextEditorFormatting]\n );\n\n const useHorizontalLayout = useMemo(() => {\n return (\n !isHorizontalLayoutDisabled &&\n !showRichTextEditorFormatting &&\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) / !hasAttachments\n );\n }, [\n isHorizontalLayoutDisabled,\n showRichTextEditorFormatting,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) / hasAttachments\n ]);\n\n return (\n <div\n className={richTextBorderBoxStyle({\n theme: theme,\n disabled: !!disabled\n })}\n >\n {/ This layout is used for the compact view when formatting options are not shown /}\n <Stack\n grow\n horizontal={useHorizontalLayout}\n horizontalAlign={useHorizontalLayout ? 'end' : 'space-between'}\n className={inputBoxContentStackStyle}\n wrap={useHorizontalLayout}\n >\n {/ Fixes the issue when flex box can grow to be bigger than parent /}\n <Stack grow className={inputBoxRichTextStackStyle}>\n <Stack.Item className={inputBoxRichTextStackItemStyle}>\n <RichTextEditor\n initialContent={initialContent}\n placeholderText={placeholderText}\n onChange={onChange}\n onKeyDown={onKeyDown}\n ref={editorComponentRef}\n strings={strings}\n showRichTextEditorFormatting={showRichTextEditorFormatting}\n styles={richTextEditorStyle}\n />\n </Stack.Item>\n {\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ onRenderAttachmentUploads &&\n onRenderAttachmentUploads()\n }\n </Stack>\n {actionButtons}\n </Stack>\n </div>\n );\n};\n"]}

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { SendBoxStrings } from '../SendBox';
-import { ActiveFileUpload } from '../AttachmentUploadCards';
+import { AttachmentMetadata } from '../../types/Attachment';
 /**
  * Strings of {@link RichTextSendBox} that can be overridden.
  *
@@ -104,17 +104,17 @@ export interface RichTextSendBoxProps {
      */
     systemMessage?: string;
     /**
-     * Optional array of active file uploads where each object has attributes
-     * of a file upload like name, progress, errorMessage etc.
+     * Optional array of active attachment uploads where each object has attributes
+     * of a attachment upload like name, progress, errorMessage etc.
      * @beta
      */
-    activeFileUploads?: ActiveFileUpload[];
+    activeAttachmentUploads?: AttachmentMetadata[];
     /**
-     * Optional callback to remove the file upload before sending by clicking on
+     * Optional callback to remove the attachment upload before sending by clicking on
      * cancel icon.
      * @beta
      */
-    onCancelFileUpload?: (fileId: string) => void;
+    onCancelAttachmentUpload?: (attachmentId: string) => void;
     /**
      * Callback function used when the send button is clicked.
      */