npm - @azure/communication-react - Versions diffs - 1.13.0-alpha-202402230012 → 1.13.0-alpha-202402240011 - Mend

@azure/communication-react 1.13.0-alpha-202402230012 → 1.13.0-alpha-202402240011

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

package/dist/dist-esm/react-components/src/components/RTE/RTERibbonButtons.js ADDED Viewed

@@ -0,0 +1,86 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { KnownRibbonButtonKey, getButtons } from 'roosterjs-react';
+import { ribbonButtonStyle, ribbonDividerStyle } from '../styles/RichTextEditor.styles';
+const dividerRibbonButton = (theme) => {
+    return {
+        key: 'Divider',
+        iconName: 'RTEDividerIcon',
+        unlocalizedText: '',
+        onClick: () => { },
+        isDisabled: () => true,
+        commandBarProperties: {
+            buttonStyles: ribbonDividerStyle(theme)
+        }
+    };
+};
+const boldButton = (theme) => {
+    return createKnownRibbonButton(KnownRibbonButtonKey.Bold, theme, 'RTEBoldButtonIcon');
+};
+const italicButton = (theme) => {
+    return createKnownRibbonButton(KnownRibbonButtonKey.Italic, theme, 'RTEItalicButtonIcon');
+};
+const underlineButton = (theme) => {
+    return createKnownRibbonButton(KnownRibbonButtonKey.Underline, theme, 'RTEUnderlineButtonIcon');
+};
+const bulletListButton = (theme) => {
+    return createKnownRibbonButton(KnownRibbonButtonKey.BulletedList, theme, 'RTEBulletListButtonIcon');
+};
+const numberListButton = (theme) => {
+    return createKnownRibbonButton(KnownRibbonButtonKey.NumberedList, theme, 'RTEtNumberListButtonIcon');
+};
+const indentIncreaseButton = (theme) => {
+    return createKnownRibbonButton(KnownRibbonButtonKey.IncreaseIndent, theme, 'RTEIndentIncreaseButtonIcon');
+};
+const indentDecreaseButton = (theme) => {
+    return createKnownRibbonButton(KnownRibbonButtonKey.DecreaseIndent, theme, 'RTEIndentDecreaseButtonIcon');
+};
+const createKnownRibbonButton = (key, theme, icon) => {
+    var _a;
+    const buttons = getButtons([key]);
+    if (buttons.length > 0) {
+        const button = buttons[0];
+        // AllButtonStringKeys is a union of all the string keys of all the buttons
+        const result = buttons[0];
+        button.iconName = icon;
+        button.commandBarProperties = Object.assign(Object.assign({}, button.commandBarProperties), { buttonStyles: Object.assign(Object.assign({}, (_a = button.commandBarProperties) === null || _a === void 0 ? void 0 : _a.buttonStyles), ribbonButtonStyle(theme)) });
+        return result;
+    }
+    return undefined;
+};
+/**
+ * @private
+ */
+export const ribbonButtons = (theme) => {
+    const buttons = [];
+    [
+        boldButton(theme),
+        italicButton(theme),
+        underlineButton(theme),
+        dividerRibbonButton(theme),
+        bulletListButton(theme),
+        numberListButton(theme),
+        indentIncreaseButton(theme),
+        indentDecreaseButton(theme)
+    ].forEach((item) => {
+        if (item !== undefined) {
+            buttons.push(item);
+        }
+    });
+    return buttons;
+};
+/**
+ * @private
+ */
+export const ribbonButtonsStrings = (strings) => {
+    return {
+        buttonNameBold: strings.boldTooltip,
+        buttonNameItalic: strings.italicTooltip,
+        buttonNameUnderline: strings.underlineTooltip,
+        buttonNameBulletedList: strings.bulletListTooltip,
+        buttonNameNumberedList: strings.numberListTooltip,
+        buttonNameIncreaseIndent: strings.increaseIndentTooltip,
+        buttonNameDecreaseIndent: strings.decreaseIndentTooltip
+    };
+};
+//# sourceMappingURL=RTERibbonButtons.js.map

package/dist/dist-esm/react-components/src/components/RTE/RTERibbonButtons.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"RTERibbonButtons.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RTE/RTERibbonButtons.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Theme } from '@fluentui/react';\nimport { KnownRibbonButtonKey, LocalizedStrings, RibbonButton, getButtons } from 'roosterjs-react';\nimport { ribbonButtonStyle, ribbonDividerStyle } from '../styles/RichTextEditor.styles';\nimport { RichTextSendBoxStrings } from './RTESendBox';\n\nconst dividerRibbonButton = (theme: Theme): RibbonButton<string> => {\n return {\n key: 'Divider',\n iconName: 'RTEDividerIcon',\n unlocalizedText: '',\n onClick: () => {},\n isDisabled: () => true,\n commandBarProperties: {\n buttonStyles: ribbonDividerStyle(theme)\n }\n };\n};\n\nconst boldButton = (theme: Theme): RibbonButton<string> | undefined => {\n return createKnownRibbonButton(KnownRibbonButtonKey.Bold, theme, 'RTEBoldButtonIcon');\n};\n\nconst italicButton = (theme: Theme): RibbonButton<string> | undefined => {\n return createKnownRibbonButton(KnownRibbonButtonKey.Italic, theme, 'RTEItalicButtonIcon');\n};\n\nconst underlineButton = (theme: Theme): RibbonButton<string> | undefined => {\n return createKnownRibbonButton(KnownRibbonButtonKey.Underline, theme, 'RTEUnderlineButtonIcon');\n};\n\nconst bulletListButton = (theme: Theme): RibbonButton<string> | undefined => {\n return createKnownRibbonButton(KnownRibbonButtonKey.BulletedList, theme, 'RTEBulletListButtonIcon');\n};\n\nconst numberListButton = (theme: Theme): RibbonButton<string> | undefined => {\n return createKnownRibbonButton(KnownRibbonButtonKey.NumberedList, theme, 'RTEtNumberListButtonIcon');\n};\n\nconst indentIncreaseButton = (theme: Theme): RibbonButton<string> | undefined => {\n return createKnownRibbonButton(KnownRibbonButtonKey.IncreaseIndent, theme, 'RTEIndentIncreaseButtonIcon');\n};\n\nconst indentDecreaseButton = (theme: Theme): RibbonButton<string> | undefined => {\n return createKnownRibbonButton(KnownRibbonButtonKey.DecreaseIndent, theme, 'RTEIndentDecreaseButtonIcon');\n};\n\nconst createKnownRibbonButton = (\n key: KnownRibbonButtonKey,\n theme: Theme,\n icon: string\n): RibbonButton<string> | undefined => {\n const buttons = getButtons([key]);\n if (buttons.length > 0) {\n const button = buttons[0];\n // AllButtonStringKeys is a union of all the string keys of all the buttons\n const result = buttons[0] as RibbonButton<typeof button.key>;\n button.iconName = icon;\n button.commandBarProperties = {\n ...button.commandBarProperties,\n buttonStyles: {\n ...button.commandBarProperties?.buttonStyles,\n ...ribbonButtonStyle(theme)\n }\n };\n return result;\n }\n return undefined;\n};\n\n/**\n * @private\n */\nexport const ribbonButtons = (theme: Theme): RibbonButton<string>[] => {\n const buttons: RibbonButton<string>[] = [];\n [\n boldButton(theme),\n italicButton(theme),\n underlineButton(theme),\n dividerRibbonButton(theme),\n bulletListButton(theme),\n numberListButton(theme),\n indentIncreaseButton(theme),\n indentDecreaseButton(theme)\n ].forEach((item) => {\n if (item !== undefined) {\n buttons.push(item);\n }\n });\n\n return buttons;\n};\n\n/**\n * @private\n */\nexport const ribbonButtonsStrings = (strings: Partial<RichTextSendBoxStrings>): LocalizedStrings<string> => {\n return {\n buttonNameBold: strings.boldTooltip,\n buttonNameItalic: strings.italicTooltip,\n buttonNameUnderline: strings.underlineTooltip,\n buttonNameBulletedList: strings.bulletListTooltip,\n buttonNameNumberedList: strings.numberListTooltip,\n buttonNameIncreaseIndent: strings.increaseIndentTooltip,\n buttonNameDecreaseIndent: strings.decreaseIndentTooltip\n };\n};\n"]}

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

@@ -2,11 +2,46 @@
 import { SendBoxStrings } from '../SendBox';
 import { ActiveFileUpload } from '../FileUploadCards';
 /**
- * Props for {@link RTESendBox}.
+ * Strings of {@link RichTextSendBox} that can be overridden.
  *
  * @beta
  */
-export interface RTESendBoxProps {
+export interface RichTextSendBoxStrings extends SendBoxStrings {
+    /**
+     * Tooltip text for the bold button.
+     */
+    boldTooltip: string;
+    /**
+     * Tooltip text for the italic button.
+     */
+    italicTooltip: string;
+    /**
+     * Tooltip text for the underline button.
+     */
+    underlineTooltip: string;
+    /**
+     * Tooltip text for the bullet list button.
+     */
+    bulletListTooltip: string;
+    /**
+     * Tooltip text for the number list button.
+     */
+    numberListTooltip: string;
+    /**
+     * Tooltip text for the increase indent button.
+     */
+    increaseIndentTooltip: string;
+    /**
+     * Tooltip text for the decrease indent button.
+     */
+    decreaseIndentTooltip: string;
+}
+/**
+ * Props for {@link RichTextSendBox}.
+ *
+ * @beta
+ */
+export interface RichTextSendBoxProps {
     /**
      * Optional boolean to disable text box
      * @defaultValue false
@@ -15,7 +50,7 @@ export interface RTESendBoxProps {
     /**
      * Optional strings to override in component
      */
-    strings?: Partial<SendBoxStrings>;
+    strings?: Partial<RichTextSendBoxStrings>;
     /**
      * Optional text for system message above the text box
      */
@@ -49,5 +84,5 @@ export interface RTESendBoxProps {
  *
  * @beta
  */
-export declare const RTESendBox: (props: RTESendBoxProps) => JSX.Element;
+export declare const RichTextSendBox: (props: RichTextSendBoxProps) => JSX.Element;
 //# sourceMappingURL=RTESendBox.d.ts.map

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

@@ -15,12 +15,17 @@ import { hasCompletedFileUploads } from '../utils/SendBoxUtils';
  *
  * @beta
  */
-export const RTESendBox = (props) => {
+export const RichTextSendBox = (props) => {
     const { disabled = false, systemMessage, onSendMessage,
     /* @conditional-compile-remove(file-sharing) */
     activeFileUploads } = props;
     const theme = useTheme();
-    const localeStrings = useLocale().strings.sendBox;
+    const locale = useLocale();
+    const localeStrings = useMemo(() => {
+        /* @conditional-compile-remove(rich-text-editor) */
+        return locale.strings.richTextSendBox;
+        return locale.strings.sendBox;
+    }, [/* @conditional-compile-remove(rich-text-editor) */ locale.strings.richTextSendBox, locale.strings.sendBox]);
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
     const [contentValue, setContentValue] = useState('');
     const [contentValueOverflow, setContentValueOverflow] = useState(false);
@@ -28,13 +33,13 @@ export const RTESendBox = (props) => {
     const [fileUploadsPendingError, setFileUploadsPendingError] = useState(undefined);
     const editorComponentRef = useRef(null);
     const contentTooLongMessage = useMemo(() => (contentValueOverflow ? strings.textTooLong : undefined), [contentValueOverflow, strings.textTooLong]);
-    const setContent = (newValue) => {
+    const setContent = useCallback((newValue) => {
         if (newValue === undefined) {
             return;
         }
         setContentValueOverflow(exceedsMaxAllowedLength(newValue.length));
         setContentValue(newValue);
-    };
+    }, []);
     const sendMessageOnClick = () => {
         var _a;
         if (disabled || contentValueOverflow) {
@@ -106,7 +111,7 @@ export const RTESendBox = (props) => {
                 hasErrorMessage: false,
                 disabled: !!disabled
             }) },
-            React.createElement(RTEInputBoxComponent, { placeholderText: strings.placeholderText, content: contentValue, onChange: setContent, editorComponentRef: editorComponentRef })),
+            React.createElement(RTEInputBoxComponent, { placeholderText: strings.placeholderText, content: contentValue, onChange: setContent, editorComponentRef: editorComponentRef, strings: strings })),
         React.createElement(Stack.Item, { align: "end" },
             React.createElement(InputBoxButton, { onRenderIcon: onRenderSendIcon, onClick: (e) => {
                     sendMessageOnClick();

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RTESendBox.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RTE/RTESendBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { RTEInputBoxComponent } from './RTEInputBoxComponent';\nimport { Icon, Stack, useTheme } from '@fluentui/react';\nimport { useLocale } from '../../localization';\nimport { SendBoxStrings } from '../SendBox';\nimport { borderAndBoxShadowStyle, sendButtonStyle, sendIconStyle } from '../styles/SendBox.styles';\nimport { InputBoxButton } from '../InputBoxButton';\nimport { RTESendBoxErrors, RTESendBoxErrorsProps } from './RTESendBoxErrors';\n/* @conditional-compile-remove(file-sharing) /\nimport { ActiveFileUpload } from '../FileUploadCards';\n/ @conditional-compile-remove(file-sharing) /\nimport { SendBoxErrorBarError } from '../SendBoxErrorBar';\nimport { exceedsMaxAllowedLength, sanitizeText } from '../utils/SendBoxUtils';\n/ @conditional-compile-remove(file-sharing) /\nimport { hasCompletedFileUploads } from '../utils/SendBoxUtils';\nimport { RichTextEditorComponentRef } from './RichTextEditor';\n\n/\n Props for {@link RTESendBox}.\n \n @beta\n /\nexport interface RTESendBoxProps {\n /\n Optional boolean to disable text box\n * @defaultValue false\n /\n disabled?: boolean;\n /\n Optional strings to override in component\n /\n strings?: Partial<SendBoxStrings>;\n /\n Optional text for system message above the text box\n /\n systemMessage?: string;\n / @conditional-compile-remove(file-sharing) /\n /\n Optional callback to render uploaded files in the SendBox. The sendBox will expand\n * vertically to accommodate the uploaded files. File uploads will\n * be rendered below the text area in sendBox.\n * @beta\n /\n onRenderFileUploads?: () => JSX.Element;\n / @conditional-compile-remove(file-sharing) /\n /\n Optional array of active file uploads where each object has attributes\n * of a file upload like name, progress, errorMessage etc.\n * @beta\n /\n activeFileUploads?: ActiveFileUpload[];\n / @conditional-compile-remove(file-sharing) /\n /\n Optional callback to remove the file upload before sending by clicking on\n * cancel icon.\n * @beta\n /\n onCancelFileUpload?: (fileId: string) => void;\n /\n Callback function used when the send button is clicked.\n /\n onSendMessage: (content: string) => Promise<void>;\n}\n\n/\n A component to render SendBox with Rich Text Editor support.\n \n @beta\n /\nexport const RTESendBox = (props: RTESendBoxProps): JSX.Element => {\n const {\n disabled = false,\n systemMessage,\n onSendMessage,\n / @conditional-compile-remove(file-sharing) /\n activeFileUploads\n } = props;\n\n const theme = useTheme();\n const localeStrings = useLocale().strings.sendBox;\n const strings = { ...localeStrings, ...props.strings };\n\n const [contentValue, setContentValue] = useState('');\n const [contentValueOverflow, setContentValueOverflow] = useState(false);\n / @conditional-compile-remove(file-sharing) /\n const [fileUploadsPendingError, setFileUploadsPendingError] = useState<SendBoxErrorBarError \| undefined>(undefined);\n const editorComponentRef = useRef<RichTextEditorComponentRef>(null);\n\n const contentTooLongMessage = useMemo(\n () => (contentValueOverflow ? strings.textTooLong : undefined),\n [contentValueOverflow, strings.textTooLong]\n );\n\n const setContent = (newValue?: string): void => {\n if (newValue === undefined) {\n return;\n }\n\n setContentValueOverflow(exceedsMaxAllowedLength(newValue.length));\n setContentValue(newValue);\n };\n\n const sendMessageOnClick = (): void => {\n if (disabled \|\| contentValueOverflow) {\n return;\n }\n // Don't send message until all files have been uploaded successfully\n / @conditional-compile-remove(file-sharing) /\n setFileUploadsPendingError(undefined);\n\n // if (hasIncompleteFileUploads(activeFileUploads)) {\n // setFileUploadsPendingError({ message: strings.fileUploadsPendingError, timestamp: Date.now() });\n // return;\n // }\n\n const message = contentValue;\n // we don't want to send empty messages including spaces, newlines, tabs\n // Message can be empty if there is a valid file upload\n if (\n sanitizeText(message).length > 0 \|\|\n / @conditional-compile-remove(file-sharing) / hasCompletedFileUploads(activeFileUploads)\n ) {\n onSendMessage(message);\n setContentValue('');\n }\n editorComponentRef.current?.focus();\n };\n\n const hasErrorMessage = useMemo(() => {\n return (\n !!systemMessage \|\|\n !!contentTooLongMessage \|\|\n / @conditional-compile-remove(file-sharing) /\n !!fileUploadsPendingError \|\|\n / @conditional-compile-remove(file-sharing) /\n !!activeFileUploads?.filter((fileUpload) => fileUpload.error).pop()?.error\n );\n }, [\n / @conditional-compile-remove(file-sharing) /\n activeFileUploads,\n contentTooLongMessage,\n / @conditional-compile-remove(file-sharing) /\n fileUploadsPendingError,\n systemMessage\n ]);\n\n const onRenderSendIcon = useCallback(\n (isHover: boolean) => (\n <Icon\n iconName={isHover && contentValue ? 'SendBoxSendHovered' : 'SendBoxSend'}\n className={sendIconStyle({\n theme,\n hasText: !!contentValue,\n / @conditional-compile-remove(file-sharing) /\n hasFile: false,\n hasErrorMessage: hasErrorMessage\n })}\n />\n ),\n [contentValue, hasErrorMessage, theme]\n );\n\n const sendBoxErrorsProps: RTESendBoxErrorsProps = useMemo(() => {\n return {\n / @conditional-compile-remove(file-sharing) /\n fileUploadsPendingError: fileUploadsPendingError,\n / @conditional-compile-remove(file-sharing) /\n fileUploadError: activeFileUploads?.filter((fileUpload) => fileUpload.error).pop()?.error,\n systemMessage: systemMessage,\n textTooLongMessage: contentTooLongMessage\n };\n }, [\n / @conditional-compile-remove(file-sharing) /\n activeFileUploads,\n contentTooLongMessage,\n / @conditional-compile-remove(file-sharing) /\n fileUploadsPendingError,\n systemMessage\n ]);\n\n return (\n <Stack>\n <RTESendBoxErrors {...sendBoxErrorsProps} />\n <div\n className={borderAndBoxShadowStyle({\n theme: theme,\n // should always be false as we don't want to show the border when there is an error\n hasErrorMessage: false,\n disabled: !!disabled\n })}\n >\n <RTEInputBoxComponent\n placeholderText={strings.placeholderText}\n content={contentValue}\n onChange={setContent}\n editorComponentRef={editorComponentRef}\n />\n {/ File Upload */}\n </div>\n <Stack.Item align=\"end\">\n <InputBoxButton\n onRenderIcon={onRenderSendIcon}\n onClick={(e) => {\n sendMessageOnClick();\n e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.\n }}\n className={sendButtonStyle}\n ariaLabel={localeStrings.sendButtonAriaLabel}\n tooltipContent={localeStrings.sendButtonAriaLabel}\n />\n </Stack.Item>\n </Stack>\n );\n};\n"]}
1	+ {"version":3,"file":"RTESendBox.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RTE/RTESendBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { RTEInputBoxComponent } from './RTEInputBoxComponent';\nimport { Icon, Stack, useTheme } from '@fluentui/react';\nimport { useLocale } from '../../localization';\nimport { SendBoxStrings } from '../SendBox';\nimport { borderAndBoxShadowStyle, sendButtonStyle, sendIconStyle } from '../styles/SendBox.styles';\nimport { InputBoxButton } from '../InputBoxButton';\nimport { RTESendBoxErrors, RTESendBoxErrorsProps } from './RTESendBoxErrors';\n/* @conditional-compile-remove(file-sharing) /\nimport { ActiveFileUpload } from '../FileUploadCards';\n/ @conditional-compile-remove(file-sharing) /\nimport { SendBoxErrorBarError } from '../SendBoxErrorBar';\nimport { exceedsMaxAllowedLength, sanitizeText } from '../utils/SendBoxUtils';\n/ @conditional-compile-remove(file-sharing) /\nimport { hasCompletedFileUploads } from '../utils/SendBoxUtils';\nimport { RichTextEditorComponentRef } from './RichTextEditor';\n\n/\n Strings of {@link RichTextSendBox} that can be overridden.\n \n @beta\n /\nexport interface RichTextSendBoxStrings extends SendBoxStrings {\n /\n Tooltip text for the bold button.\n /\n boldTooltip: string;\n /\n Tooltip text for the italic button.\n /\n italicTooltip: string;\n /\n Tooltip text for the underline button.\n /\n underlineTooltip: string;\n /\n Tooltip text for the bullet list button.\n /\n bulletListTooltip: string;\n /\n Tooltip text for the number list button.\n /\n numberListTooltip: string;\n /\n Tooltip text for the increase indent button.\n /\n increaseIndentTooltip: string;\n /\n Tooltip text for the decrease indent button.\n /\n decreaseIndentTooltip: string;\n}\n\n/\n Props for {@link RichTextSendBox}.\n \n @beta\n /\nexport interface RichTextSendBoxProps {\n /\n Optional boolean to disable text box\n * @defaultValue false\n /\n disabled?: boolean;\n /\n Optional strings to override in component\n /\n strings?: Partial<RichTextSendBoxStrings>;\n /\n Optional text for system message above the text box\n /\n systemMessage?: string;\n / @conditional-compile-remove(file-sharing) /\n /\n Optional callback to render uploaded files in the SendBox. The sendBox will expand\n * vertically to accommodate the uploaded files. File uploads will\n * be rendered below the text area in sendBox.\n * @beta\n /\n onRenderFileUploads?: () => JSX.Element;\n / @conditional-compile-remove(file-sharing) /\n /\n Optional array of active file uploads where each object has attributes\n * of a file upload like name, progress, errorMessage etc.\n * @beta\n /\n activeFileUploads?: ActiveFileUpload[];\n / @conditional-compile-remove(file-sharing) /\n /\n Optional callback to remove the file upload before sending by clicking on\n * cancel icon.\n * @beta\n /\n onCancelFileUpload?: (fileId: string) => void;\n /\n Callback function used when the send button is clicked.\n /\n onSendMessage: (content: string) => Promise<void>;\n}\n\n/\n A component to render SendBox with Rich Text Editor support.\n \n @beta\n /\nexport const RichTextSendBox = (props: RichTextSendBoxProps): JSX.Element => {\n const {\n disabled = false,\n systemMessage,\n onSendMessage,\n / @conditional-compile-remove(file-sharing) /\n activeFileUploads\n } = props;\n\n const theme = useTheme();\n const locale = useLocale();\n\n const localeStrings = useMemo(() => {\n / @conditional-compile-remove(rich-text-editor) /\n return locale.strings.richTextSendBox;\n return locale.strings.sendBox;\n }, [/ @conditional-compile-remove(rich-text-editor) / locale.strings.richTextSendBox, locale.strings.sendBox]);\n\n const strings = { ...localeStrings, ...props.strings };\n\n const [contentValue, setContentValue] = useState('');\n const [contentValueOverflow, setContentValueOverflow] = useState(false);\n / @conditional-compile-remove(file-sharing) /\n const [fileUploadsPendingError, setFileUploadsPendingError] = useState<SendBoxErrorBarError \| undefined>(undefined);\n const editorComponentRef = useRef<RichTextEditorComponentRef>(null);\n\n const contentTooLongMessage = useMemo(\n () => (contentValueOverflow ? strings.textTooLong : undefined),\n [contentValueOverflow, strings.textTooLong]\n );\n\n const setContent = useCallback((newValue?: string): void => {\n if (newValue === undefined) {\n return;\n }\n\n setContentValueOverflow(exceedsMaxAllowedLength(newValue.length));\n setContentValue(newValue);\n }, []);\n\n const sendMessageOnClick = (): void => {\n if (disabled \|\| contentValueOverflow) {\n return;\n }\n // Don't send message until all files have been uploaded successfully\n / @conditional-compile-remove(file-sharing) /\n setFileUploadsPendingError(undefined);\n\n // if (hasIncompleteFileUploads(activeFileUploads)) {\n // setFileUploadsPendingError({ message: strings.fileUploadsPendingError, timestamp: Date.now() });\n // return;\n // }\n\n const message = contentValue;\n // we don't want to send empty messages including spaces, newlines, tabs\n // Message can be empty if there is a valid file upload\n if (\n sanitizeText(message).length > 0 \|\|\n / @conditional-compile-remove(file-sharing) / hasCompletedFileUploads(activeFileUploads)\n ) {\n onSendMessage(message);\n setContentValue('');\n }\n editorComponentRef.current?.focus();\n };\n\n const hasErrorMessage = useMemo(() => {\n return (\n !!systemMessage \|\|\n !!contentTooLongMessage \|\|\n / @conditional-compile-remove(file-sharing) /\n !!fileUploadsPendingError \|\|\n / @conditional-compile-remove(file-sharing) /\n !!activeFileUploads?.filter((fileUpload) => fileUpload.error).pop()?.error\n );\n }, [\n / @conditional-compile-remove(file-sharing) /\n activeFileUploads,\n contentTooLongMessage,\n / @conditional-compile-remove(file-sharing) /\n fileUploadsPendingError,\n systemMessage\n ]);\n\n const onRenderSendIcon = useCallback(\n (isHover: boolean) => (\n <Icon\n iconName={isHover && contentValue ? 'SendBoxSendHovered' : 'SendBoxSend'}\n className={sendIconStyle({\n theme,\n hasText: !!contentValue,\n / @conditional-compile-remove(file-sharing) /\n hasFile: false,\n hasErrorMessage: hasErrorMessage\n })}\n />\n ),\n [contentValue, hasErrorMessage, theme]\n );\n\n const sendBoxErrorsProps: RTESendBoxErrorsProps = useMemo(() => {\n return {\n / @conditional-compile-remove(file-sharing) /\n fileUploadsPendingError: fileUploadsPendingError,\n / @conditional-compile-remove(file-sharing) /\n fileUploadError: activeFileUploads?.filter((fileUpload) => fileUpload.error).pop()?.error,\n systemMessage: systemMessage,\n textTooLongMessage: contentTooLongMessage\n };\n }, [\n / @conditional-compile-remove(file-sharing) /\n activeFileUploads,\n contentTooLongMessage,\n / @conditional-compile-remove(file-sharing) /\n fileUploadsPendingError,\n systemMessage\n ]);\n\n return (\n <Stack>\n <RTESendBoxErrors {...sendBoxErrorsProps} />\n <div\n className={borderAndBoxShadowStyle({\n theme: theme,\n // should always be false as we don't want to show the border when there is an error\n hasErrorMessage: false,\n disabled: !!disabled\n })}\n >\n <RTEInputBoxComponent\n placeholderText={strings.placeholderText}\n content={contentValue}\n onChange={setContent}\n editorComponentRef={editorComponentRef}\n strings={strings}\n />\n {/ File Upload */}\n </div>\n <Stack.Item align=\"end\">\n <InputBoxButton\n onRenderIcon={onRenderSendIcon}\n onClick={(e) => {\n sendMessageOnClick();\n e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.\n }}\n className={sendButtonStyle}\n ariaLabel={localeStrings.sendButtonAriaLabel}\n tooltipContent={localeStrings.sendButtonAriaLabel}\n />\n </Stack.Item>\n </Stack>\n );\n};\n"]}

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { RichTextSendBoxStrings } from './RTESendBox';
 /**
  * Props for {@link RichTextEditor}.
  *
@@ -8,6 +9,7 @@ export interface RichTextEditorProps {
     content?: string;
     onChange: (newValue?: string) => void;
     placeholderText?: string;
+    strings: Partial<RichTextSendBoxStrings>;
 }
 /**
  * Props for {@link RichTextEditor}.

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

@@ -1,18 +1,23 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-import React, { useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { ContentEdit, Watermark } from 'roosterjs-editor-plugins';
 import { Editor } from 'roosterjs-editor-core';
-import { Rooster, createUpdateContentPlugin, UpdateMode } from 'roosterjs-react';
-import { richTextEditorStyle } from '../styles/RichTextEditor.styles';
+import { Rooster, createUpdateContentPlugin, UpdateMode, createRibbonPlugin, Ribbon } from 'roosterjs-react';
+import { ribbonButtonStyle, ribbonStyle, richTextEditorStyle } from '../styles/RichTextEditor.styles';
+import { useTheme } from '@fluentui/react';
+import { ribbonButtons, ribbonButtonsStrings } from './RTERibbonButtons';
+import { isDarkThemed } from '../../theming/themeUtils';
 /**
  * A component to wrap RoosterJS Rich Text Editor.
  *
  * @beta
  */
 export const RichTextEditor = React.forwardRef((props, ref) => {
-    const { content, onChange, placeholderText } = props;
+    const { content, onChange, placeholderText, strings } = props;
     const editor = useRef(null);
+    const [divComponent, setDivComponent] = useState(null);
+    const theme = useTheme();
     useImperativeHandle(ref, () => {
         return {
             focus() {
@@ -28,22 +33,49 @@ export const RichTextEditor = React.forwardRef((props, ref) => {
             (_b = editor.current) === null || _b === void 0 ? void 0 : _b.setContent(content || '');
         }
     }, [content]);
-    const editorCreator = useMemo(() => {
-        return (div) => {
-            const contentEdit = new ContentEdit();
-            const placeholderPlugin = new Watermark(placeholderText || '');
-            const updateContentPlugin = createUpdateContentPlugin(UpdateMode.OnContentChangedEvent | UpdateMode.OnUserInput, (content) => {
-                onChange && onChange(content);
-            });
-            const options = {
-                plugins: [placeholderPlugin, contentEdit, updateContentPlugin],
-                imageSelectionBorderColor: 'blue'
-            };
-            editor.current = new Editor(div, options);
-            return editor.current;
-        };
-    }, [onChange, placeholderText]);
+    useEffect(() => {
+        if (divComponent !== null && theme.palette.neutralPrimary !== undefined) {
+            // Adjust color prop for the div component when theme is updated
+            // because doNotAdjustEditorColor is set for Rooster
+            divComponent.style.color = theme.palette.neutralPrimary;
+        }
+    }, [divComponent, theme]);
+    const ribbonPlugin = React.useMemo(() => {
+        return createRibbonPlugin();
+    }, []);
+    const editorCreator = useCallback((div, options) => {
+        editor.current = new Editor(div, options);
+        setDivComponent(div);
+        // Remove the background color of the editor
+        div.style.backgroundColor = 'transparent';
+        return editor.current;
+    }, []);
+    const plugins = useMemo(() => {
+        const contentEdit = new ContentEdit();
+        const placeholderPlugin = new Watermark(placeholderText || '');
+        const updateContentPlugin = createUpdateContentPlugin(UpdateMode.OnContentChangedEvent | UpdateMode.OnUserInput, (content) => {
+            onChange && onChange(content);
+        });
+        return [contentEdit, placeholderPlugin, updateContentPlugin, ribbonPlugin];
+    }, [onChange, placeholderText, ribbonPlugin]);
+    const ribbon = useMemo(() => {
+        const buttons = ribbonButtons(theme);
+        return (
+        //TODO: Add localization for watermark plugin https://github.com/microsoft/roosterjs/issues/2430
+        React.createElement(Ribbon, { styles: ribbonStyle(), buttons: buttons, plugin: ribbonPlugin, overflowButtonProps: {
+                styles: ribbonButtonStyle(theme),
+                menuProps: {
+                    items: [], // CommandBar will determine items rendered in overflow
+                    isBeakVisible: false
+                }
+            }, strings: ribbonButtonsStrings(strings) }));
+    }, [strings, ribbonPlugin, theme]);
     return (React.createElement("div", null,
-        React.createElement(Rooster, { className: richTextEditorStyle, editorCreator: editorCreator })));
+        ribbon,
+        React.createElement(Rooster, { inDarkMode: isDarkThemed(theme), plugins: plugins, className: richTextEditorStyle, editorCreator: editorCreator,
+            // TODO: confirm the color during inline images implementation
+            imageSelectionBorderColor: 'blue',
+            // doNotAdjustEditorColor is used to fix the default background color for Rooster component
+            doNotAdjustEditorColor: true })));
 });
 //# sourceMappingURL=RichTextEditor.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RichTextEditor.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RTE/RichTextEditor.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,mBAAmB,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;~~AAC/E~~,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAE/C,OAAO,EAAE,OAAO,EAAE,yBAAyB,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;~~AACjF~~,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;~~AAqBtE~~;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAAkD,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC7G,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,GAAG,KAAK,CAAC;~~IACrD~~,MAAM,MAAM,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;~~IAE5C~~,mBAAmB,CACjB,GAAG,EACH,GAAG,EAAE;QACH,OAAO;YACL,KAAK;gBACH,IAAI,MAAM,CAAC,OAAO,EAAE,CAAC;oBACnB,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;gBACzB,CAAC;YACH,CAAC;SACF,CAAC;IACJ,CAAC,EACD,EAAE,CACH,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;;QACb,IAAI,OAAO,MAAK,MAAA,MAAM,CAAC,OAAO,0CAAE,UAAU,EAAE,CAAA,EAAE,CAAC;YAC7C,MAAA,MAAM,CAAC,OAAO,0CAAE,UAAU,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC;QAC5C,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,~~aAAa~~,GAAG,OAAO,CAAC,GAAG,EAAE;~~QACjC~~,OAAO,CAAC,GAAmB,EAAE,EAAE;~~YAC7B~~,MAAM,WAAW,GAAG,IAAI,WAAW,EAAE,CAAC;~~YACtC~~,MAAM,iBAAiB,GAAG,IAAI,SAAS,CAAC,eAAe,IAAI,EAAE,CAAC,CAAC;~~YAC~~/D,MAAM,mBAAmB,GAAG,yBAAyB,CACnD,UAAU,CAAC,qBAAqB,GAAG,UAAU,CAAC,WAAW,EACzD,CAAC,OAAe,EAAE,EAAE;~~gBAClB~~,QAAQ,IAAI,QAAQ,CAAC,OAAO,CAAC,CAAC;~~YAChC~~,CAAC,CACF,CAAC;~~YAEF~~,~~MAAM,~~OAAO,~~GAAkB;gBAC7B~~,~~OAAO~~,EAAE,~~CAAC,~~iBAAiB,EAAE,~~WAAW~~,EAAE,~~mBAAmB~~,CAAC;~~gBAC9D~~,~~yBAAyB~~,EAAE,~~MAAM;aAClC~~,CAAC;~~YAEF~~,MAAM,~~CAAC~~,OAAO,GAAG,~~IAAI~~,MAAM,~~CAAC~~,GAAG,~~EAAE~~,~~OAAO~~,CAAC,CAAC;~~YAC1C~~,OAAO,MAAM,~~CAAC~~,OAAO,CAAC;~~QACxB~~,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,~~QAAQ~~,EAAE,~~eAAe~~,CAAC,CAAC,CAAC;~~IAEhC~~,OAAO,CACL;~~QACE~~,oBAAC,OAAO,~~IAAC~~,SAAS,EAAE,mBAAmB,~~EAAE~~,aAAa,EAAE,aAAa,~~GAAI~~,~~CACrE~~,CACP,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport React, { useEffect, useImperativeHandle, useMemo, useRef } from 'react';\nimport { ContentEdit, Watermark } from 'roosterjs-editor-plugins';\nimport { Editor } from 'roosterjs-editor-core';\nimport { EditorOptions, IEditor } from 'roosterjs-editor-types-compatible';\nimport { Rooster, createUpdateContentPlugin, UpdateMode } from 'roosterjs-react';\nimport { richTextEditorStyle } from '../styles/RichTextEditor.styles';\n/*\n Props for {@link RichTextEditor}.\n \n @beta\n /\nexport interface RichTextEditorProps {\n content?: string;\n onChange: (newValue?: string) => void;\n placeholderText?: string;\n}\n\n/\n Props for {@link RichTextEditor}.\n \n @beta\n /\nexport interface RichTextEditorComponentRef {\n focus: () => void;\n}\n\n/\n A component to wrap RoosterJS Rich Text Editor.\n \n @beta\n */\nexport const RichTextEditor = React.forwardRef<RichTextEditorComponentRef, RichTextEditorProps>((props, ref) => {\n const { content, onChange, placeholderText } = props;\n const editor = useRef<IEditor \| null>(null);\n\n useImperativeHandle(\n ref,\n () => {\n return {\n focus() {\n if (editor.current) {\n editor.current.focus();\n }\n }\n };\n },\n []\n );\n\n useEffect(() => {\n if (content !== editor.current?.getContent()) {\n editor.current?.setContent(content \|\| '');\n }\n }, [content]);\n\n const ~~editorCreator~~ = useMemo(() => {\n return (div: HTMLDivElement) => {\n const contentEdit = new ContentEdit();\n const placeholderPlugin = new Watermark(placeholderText \|\| '');\n const updateContentPlugin = createUpdateContentPlugin(\n UpdateMode.OnContentChangedEvent \| UpdateMode.OnUserInput,\n (content: string) => {\n onChange && onChange(content);\n }\n );\n\n const ~~options~~: ~~EditorOptions~~ = {\n ~~plugins~~: [~~placeholderPlugin~~, ~~contentEdit,~~ ~~updateContentPlugin],\~~n ~~imageSelectionBorderColor~~: ~~'blue'~~\n };\n\n ~~editor.current~~ = ~~new Editor~~(~~div, options~~);\n ~~return editor.current;\~~n };\n }, [~~onChange~~, ~~placeholderText~~]);\n\n return (\n <div>\n <Rooster className={richTextEditorStyle} editorCreator={editorCreator} />\n </div>\n );\n});\n"]}
1	+ {"version":3,"file":"RichTextEditor.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RTE/RichTextEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport { ContentEdit, Watermark } from 'roosterjs-editor-plugins';\nimport { Editor } from 'roosterjs-editor-core';\nimport type { EditorOptions, IEditor } from 'roosterjs-editor-types-compatible';\nimport { Rooster, createUpdateContentPlugin, UpdateMode, createRibbonPlugin, Ribbon } from 'roosterjs-react';\nimport { ribbonButtonStyle, ribbonStyle, richTextEditorStyle } from '../styles/RichTextEditor.styles';\nimport { useTheme } from '@fluentui/react';\nimport { ribbonButtons, ribbonButtonsStrings } from './RTERibbonButtons';\nimport { RichTextSendBoxStrings } from './RTESendBox';\nimport { isDarkThemed } from '../../theming/themeUtils';\n\n/*\n Props for {@link RichTextEditor}.\n \n @beta\n /\nexport interface RichTextEditorProps {\n content?: string;\n onChange: (newValue?: string) => void;\n placeholderText?: string;\n strings: Partial<RichTextSendBoxStrings>;\n}\n\n/\n Props for {@link RichTextEditor}.\n \n @beta\n /\nexport interface RichTextEditorComponentRef {\n focus: () => void;\n}\n\n/\n A component to wrap RoosterJS Rich Text Editor.\n \n @beta\n */\nexport const RichTextEditor = React.forwardRef<RichTextEditorComponentRef, RichTextEditorProps>((props, ref) => {\n const { content, onChange, placeholderText, strings } = props;\n const editor = useRef<IEditor \| null>(null);\n const [divComponent, setDivComponent] = useState<HTMLDivElement \| null>(null);\n const theme = useTheme();\n useImperativeHandle(\n ref,\n () => {\n return {\n focus() {\n if (editor.current) {\n editor.current.focus();\n }\n }\n };\n },\n []\n );\n\n useEffect(() => {\n if (content !== editor.current?.getContent()) {\n editor.current?.setContent(content \|\| '');\n }\n }, [content]);\n\n useEffect(() => {\n if (divComponent !== null && theme.palette.neutralPrimary !== undefined) {\n // Adjust color prop for the div component when theme is updated\n // because doNotAdjustEditorColor is set for Rooster\n divComponent.style.color = theme.palette.neutralPrimary;\n }\n }, [divComponent, theme]);\n\n const ribbonPlugin = React.useMemo(() => {\n return createRibbonPlugin();\n }, []);\n\n const editorCreator = useCallback((div: HTMLDivElement, options: EditorOptions) => {\n editor.current = new Editor(div, options);\n setDivComponent(div);\n // Remove the background color of the editor\n div.style.backgroundColor = 'transparent';\n return editor.current;\n }, []);\n\n const plugins = useMemo(() => {\n const contentEdit = new ContentEdit();\n const placeholderPlugin = new Watermark(placeholderText \|\| '');\n const updateContentPlugin = createUpdateContentPlugin(\n UpdateMode.OnContentChangedEvent \| UpdateMode.OnUserInput,\n (content: string) => {\n onChange && onChange(content);\n }\n );\n return [contentEdit, placeholderPlugin, updateContentPlugin, ribbonPlugin];\n }, [onChange, placeholderText, ribbonPlugin]);\n\n const ribbon = useMemo(() => {\n const buttons = ribbonButtons(theme);\n\n return (\n //TODO: Add localization for watermark plugin https://github.com/microsoft/roosterjs/issues/2430\n <Ribbon\n styles={ribbonStyle()}\n buttons={buttons}\n plugin={ribbonPlugin}\n overflowButtonProps={{\n styles: ribbonButtonStyle(theme),\n menuProps: {\n items: [], // CommandBar will determine items rendered in overflow\n isBeakVisible: false\n }\n }}\n strings={ribbonButtonsStrings(strings)}\n />\n );\n }, [strings, ribbonPlugin, theme]);\n\n return (\n <div>\n {ribbon}\n <Rooster\n inDarkMode={isDarkThemed(theme)}\n plugins={plugins}\n className={richTextEditorStyle}\n editorCreator={editorCreator}\n // TODO: confirm the color during inline images implementation\n imageSelectionBorderColor={'blue'}\n // doNotAdjustEditorColor is used to fix the default background color for Rooster component\n doNotAdjustEditorColor={true}\n />\n </div>\n );\n});\n"]}

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

@@ -14,7 +14,7 @@ export interface ReactionButtonProps extends ControlBarButtonProps {
     /**
      * Click event to send reaction to meeting
      */
-    onReactionClicked: (reaction: string) => Promise<void>;
+    onReactionClick: (reaction: string) => Promise<void>;
     /**
      * Reaction resource locator and parameters
      */

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

@@ -55,7 +55,7 @@ export const ReactionButton = (props) => {
         const resourceUrl = emojiResource.get(emoji);
         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.onReactionClicked(emoji);
+                    props.onReactionClick(emoji);
                     setIsHoveredMap((prevMap) => {
                         return new Map(prevMap).set(emoji, false);
                     });

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 onReactionClicked: (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 /* 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.onReactionClicked(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 />\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, { 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 /* 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 />\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/RemoteVideoTile.d.ts CHANGED Viewed

@@ -23,7 +23,7 @@ export declare const _RemoteVideoTile: React.MemoExoticComponent<(props: {
     showMuteIndicator?: boolean | undefined;
     showLabel?: boolean | undefined;
     personaMinSize?: number | undefined;
-    strings?: VideoGalleryStrings | undefined;
+    strings: VideoGalleryStrings;
     participantState?: ParticipantState | undefined;
     menuKind?: "contextual" | "drawer" | undefined;
     drawerMenuHostId?: string | undefined;

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

@@ -11,8 +11,6 @@ import { useVideoTileContextualMenuProps } from './VideoGallery/useVideoTileCont
 import { VideoTile } from './VideoTile';
 /* @conditional-compile-remove(hide-attendee-name) */
 import { _formatString } from "../../../acs-ui-common/src";
-/* @conditional-compile-remove(hide-attendee-name) */
-import { useLocale } from '../localization';
 /**
  * A memoized version of VideoTile for rendering remote participants. React.memo is used for a performance
  * boost by memoizing the same rendered component to avoid rerendering a VideoTile when its position in the
@@ -21,7 +19,7 @@ import { useLocale } from '../localization';
  * @internal
  */
 export const _RemoteVideoTile = React.memo((props) => {
-    var _a;
+    var _a, _b;
     const { isAvailable, isReceiving = true, // default to true to prevent any breaking change
     isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, renderElement, userId, onRenderAvatar, showMuteIndicator, remoteParticipant, participantState, menuKind, isPinned, onPinParticipant, onUnpinParticipant,
     /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds,
@@ -93,9 +91,9 @@ export const _RemoteVideoTile = React.memo((props) => {
             setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([])));
         }
     }, [setDrawerMenuItemProps, contextualMenuProps]);
-    let displayName = remoteParticipant.displayName || (strings === null || strings === void 0 ? void 0 : strings.displayNamePlaceholder);
+    let displayName = remoteParticipant.displayName || strings.displayNamePlaceholder;
     /* @conditional-compile-remove(hide-attendee-name) */
-    const attendeeRoleString = useLocale().strings.AttendeeRole;
+    const attendeeRoleString = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.attendeeRole;
     /* @conditional-compile-remove(hide-attendee-name) */
     const formatDisplayName = () => {
         if (displayName && attendeeRoleString) {
@@ -106,7 +104,7 @@ export const _RemoteVideoTile = React.memo((props) => {
     /* @conditional-compile-remove(hide-attendee-name) */
     displayName = formatDisplayName();
     return (React.createElement(Stack, { tabIndex: menuKind === 'drawer' ? 0 : undefined, onKeyDown: menuKind === 'drawer' ? onKeyDown : undefined, style: remoteVideoTileWrapperStyle },
-        React.createElement(VideoTile, Object.assign({ key: userId, userId: userId, initialsName: (_a = remoteParticipant.displayName) !== null && _a !== void 0 ? _a : '', renderElement: renderVideoStreamElement, displayName: displayName, onRenderPlaceholder: onRenderAvatar, isMuted: remoteParticipant.isMuted,
+        React.createElement(VideoTile, Object.assign({ key: userId, userId: userId, initialsName: (_b = remoteParticipant.displayName) !== null && _b !== void 0 ? _b : '', renderElement: renderVideoStreamElement, displayName: displayName, onRenderPlaceholder: onRenderAvatar, isMuted: remoteParticipant.isMuted,
             /* @conditional-compile-remove(raise-hand) */
             raisedHand: remoteParticipant.raisedHand,
             /* @conditional-compile-remove(reaction) */