@azure/communication-react 1.14.0-alpha-202403130012 → 1.14.0-alpha-202403150012

package/dist/dist-esm/react-components/src/components/ImageOverlay.js

@@ -3,16 +3,18 @@
 /* @conditional-compile-remove(image-overlay) */
 import { DefaultButton, Icon, IconButton, Modal, Stack, mergeStyles } from '@fluentui/react';
 /* @conditional-compile-remove(image-overlay) */
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 /* @conditional-compile-remove(image-overlay) */
 import { bodyContainer, brokenImageStyle, cancelIcon, closeButtonStyles, controlBarContainerStyle, downloadButtonStyle, downloadIcon, downloadIconStyle, focusTrapZoneStyle, headerStyle, normalImageStyle, overlayStyles, scrollableContentStyle, smallDownloadButtonContainerStyle, themeProviderRootStyle, titleBarContainerStyle, titleStyle } from './styles/ImageOverlay.style';
 /* @conditional-compile-remove(image-overlay) */
 import { FluentThemeProvider } from '../theming/FluentThemeProvider';
 /* @conditional-compile-remove(image-overlay) */
 import { useLocale } from '../localization';
-/* @conditional-compile-remove(image-overlay) */
+/* @conditional-compile-remove(image-overlay-theme) */
 import { imageOverlayTheme } from '../theming';
 /* @conditional-compile-remove(image-overlay) */
+import { darkTheme } from '../theming';
+/* @conditional-compile-remove(image-overlay) */
 /**
  * Component to render a fullscreen modal for a selected image.
  *
@@ -23,18 +25,24 @@ export const ImageOverlay = (props) => {
     /* @conditional-compile-remove(image-overlay) */
     const localeStrings = useLocale().strings.imageOverlay;
     const [isImageLoaded, setIsImageLoaded] = useState(true);
-    const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(imageOverlayTheme);
+    /* @conditional-compile-remove(image-overlay) */
+    const overlayTheme = useMemo(() => {
+        /* @conditional-compile-remove(image-overlay-theme) */
+        return imageOverlayTheme;
+        return Object.assign(Object.assign({}, darkTheme), { semanticColors: Object.assign(Object.assign({}, darkTheme.semanticColors), { bodyBackground: 'rgba(0, 0, 0, 0.85)' }) });
+    }, []);
+    const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(overlayTheme);
     const renderHeaderBar = () => {
         return (React.createElement(Stack, { className: mergeStyles(headerStyle) },
             React.createElement(Stack, { className: mergeStyles(titleBarContainerStyle) },
                 titleIcon,
-                React.createElement(Stack.Item, { className: mergeStyles(titleStyle(imageOverlayTheme)), "aria-label": title || 'Image' }, title)),
+                React.createElement(Stack.Item, { className: mergeStyles(titleStyle(overlayTheme)), "aria-label": title || 'Image' }, title)),
             React.createElement(Stack, { className: mergeStyles(controlBarContainerStyle) },
                 onDownloadButtonClicked && (React.createElement(DefaultButton, { className: mergeStyles(downloadButtonStyle), 
                     /* @conditional-compile-remove(image-overlay) */
-                    text: localeStrings.downloadButtonLabel, onClick: () => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc), onRenderIcon: () => React.createElement(Icon, { iconName: downloadIcon.iconName, className: mergeStyles(downloadIconStyle) }), "aria-live": 'polite', "aria-label": localeStrings.downloadButtonLabel })),
-                onDownloadButtonClicked && (React.createElement(IconButton, { iconProps: downloadIcon, className: mergeStyles(smallDownloadButtonContainerStyle(imageOverlayTheme)), onClick: () => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc), "aria-label": localeStrings.downloadButtonLabel, "aria-live": 'polite' })),
-                React.createElement(IconButton, { iconProps: cancelIcon, className: mergeStyles(closeButtonStyles(imageOverlayTheme)), onClick: onDismiss, 
+                    text: localeStrings.downloadButtonLabel, onClick: () => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc), onRenderIcon: () => React.createElement(Icon, { iconName: downloadIcon.iconName, className: mergeStyles(downloadIconStyle) }), "aria-live": 'polite', "aria-label": localeStrings.downloadButtonLabel, disabled: imageSrc === '' })),
+                onDownloadButtonClicked && (React.createElement(IconButton, { iconProps: downloadIcon, className: mergeStyles(smallDownloadButtonContainerStyle(overlayTheme)), onClick: () => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc), "aria-label": localeStrings.downloadButtonLabel, "aria-live": 'polite', disabled: imageSrc === '' })),
+                React.createElement(IconButton, { iconProps: cancelIcon, className: mergeStyles(closeButtonStyles(overlayTheme)), onClick: onDismiss, 
                     /* @conditional-compile-remove(image-overlay) */
                     ariaLabel: localeStrings.dismissButtonAriaLabel, "aria-live": 'polite' }))));
     };
@@ -45,8 +53,8 @@ export const ImageOverlay = (props) => {
                 event.persist();
             } }))));
     };
-    return (React.createElement(Modal, { titleAriaId: title, isOpen: isOpen, onDismiss: onDismiss, overlay: { styles: Object.assign({}, overlayStyles(imageOverlayTheme)) }, styles: { main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle }, isDarkOverlay: true },
-        React.createElement(FluentThemeProvider, { fluentTheme: imageOverlayTheme, rootStyle: themeProviderRootStyle },
+    return (React.createElement(Modal, { titleAriaId: title, isOpen: isOpen, onDismiss: onDismiss, overlay: { styles: Object.assign({}, overlayStyles(overlayTheme)) }, styles: { main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle }, isDarkOverlay: true },
+        React.createElement(FluentThemeProvider, { fluentTheme: overlayTheme, rootStyle: themeProviderRootStyle },
             renderHeaderBar(),
             renderBodyWithLightDismiss())));
 };

package/dist/dist-esm/react-components/src/components/ImageOverlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageOverlay.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ImageOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(image-overlay) */\nimport { DefaultButton, Icon, IconButton, Modal, Stack, mergeStyles } from '@fluentui/react';\n/* @conditional-compile-remove(image-overlay) */\nimport React, { useState } from 'react';\n/* @conditional-compile-remove(image-overlay) */\nimport {\n  bodyContainer,\n  brokenImageStyle,\n  cancelIcon,\n  closeButtonStyles,\n  controlBarContainerStyle,\n  downloadButtonStyle,\n  downloadIcon,\n  downloadIconStyle,\n  focusTrapZoneStyle,\n  headerStyle,\n  normalImageStyle,\n  overlayStyles,\n  scrollableContentStyle,\n  smallDownloadButtonContainerStyle,\n  themeProviderRootStyle,\n  titleBarContainerStyle,\n  titleStyle\n} from './styles/ImageOverlay.style';\n/* @conditional-compile-remove(image-overlay) */\nimport { FluentThemeProvider } from '../theming/FluentThemeProvider';\n/* @conditional-compile-remove(image-overlay) */\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(image-overlay) */\nimport { imageOverlayTheme } from '../theming';\n\n/* @conditional-compile-remove(image-overlay) */\n/**\n * Props for {@link ImageOverlay}.\n *\n * @public\n */\nexport interface ImageOverlayProps {\n  /**\n   * Boolean that controls whether the modal is displayed.\n   */\n  isOpen: boolean;\n  /**\n   * Image source used to display the image in a large scale.\n   */\n  imageSrc: string;\n  /**\n   * Optional string used as a alt text for the image. @default 'image'\n   */\n  altText?: string;\n  /**\n   * Optional string used as the title of the image and displayed on the top left corner of the ImageOverlay.\n   */\n  title?: string;\n  /**\n   * Optional JSX element used as a title icon and displayed to the left of the title element.\n   */\n  titleIcon?: JSX.Element;\n  /**\n   * Callback to invoke when the ImageOverlay modal is dismissed\n   */\n  onDismiss: () => void;\n  /**\n   * Optional callback called when the download button is clicked. If not provided, the download button will not be rendered.\n   */\n  onDownloadButtonClicked?: (imageSrc: string) => void;\n}\n/* @conditional-compile-remove(image-overlay) */\n/**\n * Strings of {@link ImageOverlay} that can be overridden.\n *\n * @public\n */\nexport interface ImageOverlayStrings {\n  /**\n   * Download button label for ImageOverlay\n   */\n  downloadButtonLabel: string;\n  /**\n   * Dismiss button aria label for ImageOverlay\n   */\n  dismissButtonAriaLabel: string;\n}\n/* @conditional-compile-remove(image-overlay) */\n/**\n * Component to render a fullscreen modal for a selected image.\n *\n * @public\n */\nexport const ImageOverlay = (props: ImageOverlayProps): JSX.Element => {\n  const { isOpen, imageSrc, title, titleIcon, altText, onDownloadButtonClicked, onDismiss } = props;\n\n  /* @conditional-compile-remove(image-overlay) */\n  const localeStrings = useLocale().strings.imageOverlay;\n\n  const [isImageLoaded, setIsImageLoaded] = useState<boolean>(true);\n\n  const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(imageOverlayTheme);\n\n  const renderHeaderBar = (): JSX.Element => {\n    return (\n      <Stack className={mergeStyles(headerStyle)}>\n        <Stack className={mergeStyles(titleBarContainerStyle)}>\n          {titleIcon}\n          <Stack.Item className={mergeStyles(titleStyle(imageOverlayTheme))} aria-label={title || 'Image'}>\n            {title}\n          </Stack.Item>\n        </Stack>\n        <Stack className={mergeStyles(controlBarContainerStyle)}>\n          {onDownloadButtonClicked && (\n            <DefaultButton\n              className={mergeStyles(downloadButtonStyle)}\n              /* @conditional-compile-remove(image-overlay) */\n              text={localeStrings.downloadButtonLabel}\n              onClick={() => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc)}\n              onRenderIcon={() => <Icon iconName={downloadIcon.iconName} className={mergeStyles(downloadIconStyle)} />}\n              aria-live={'polite'}\n              /* @conditional-compile-remove(image-overlay) */\n              aria-label={localeStrings.downloadButtonLabel}\n            />\n          )}\n          {onDownloadButtonClicked && (\n            <IconButton\n              iconProps={downloadIcon}\n              className={mergeStyles(smallDownloadButtonContainerStyle(imageOverlayTheme))}\n              onClick={() => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc)}\n              /* @conditional-compile-remove(image-overlay) */\n              aria-label={localeStrings.downloadButtonLabel}\n              aria-live={'polite'}\n            />\n          )}\n          <IconButton\n            iconProps={cancelIcon}\n            className={mergeStyles(closeButtonStyles(imageOverlayTheme))}\n            onClick={onDismiss}\n            /* @conditional-compile-remove(image-overlay) */\n            ariaLabel={localeStrings.dismissButtonAriaLabel}\n            aria-live={'polite'}\n          />\n        </Stack>\n      </Stack>\n    );\n  };\n\n  const renderBodyWithLightDismiss = (): JSX.Element => {\n    return (\n      <Stack className={mergeStyles(bodyContainer)} onClick={() => props.onDismiss()}>\n        {imageSrc && (\n          <img\n            src={imageSrc}\n            className={mergeStyles(imageStyle)}\n            alt={altText || 'image'}\n            aria-label={'image-overlay-main-image'}\n            aria-live={'polite'}\n            onError={() => {\n              setIsImageLoaded(false);\n            }}\n            onClick={(event) => event.stopPropagation()}\n            onDoubleClick={(event) => {\n              event.persist();\n            }}\n          />\n        )}\n      </Stack>\n    );\n  };\n\n  return (\n    <Modal\n      titleAriaId={title}\n      isOpen={isOpen}\n      onDismiss={onDismiss}\n      overlay={{ styles: { ...overlayStyles(imageOverlayTheme) } }}\n      styles={{ main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle }}\n      isDarkOverlay={true}\n    >\n      <FluentThemeProvider fluentTheme={imageOverlayTheme} rootStyle={themeProviderRootStyle}>\n        {renderHeaderBar()}\n        {renderBodyWithLightDismiss()}\n      </FluentThemeProvider>\n    </Modal>\n  );\n};\n"]}
+{"version":3,"file":"ImageOverlay.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ImageOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(image-overlay) */\nimport { DefaultButton, Icon, IconButton, Modal, PartialTheme, Stack, mergeStyles } from '@fluentui/react';\n/* @conditional-compile-remove(image-overlay) */\nimport React, { useMemo, useState } from 'react';\n/* @conditional-compile-remove(image-overlay) */\nimport {\n  bodyContainer,\n  brokenImageStyle,\n  cancelIcon,\n  closeButtonStyles,\n  controlBarContainerStyle,\n  downloadButtonStyle,\n  downloadIcon,\n  downloadIconStyle,\n  focusTrapZoneStyle,\n  headerStyle,\n  normalImageStyle,\n  overlayStyles,\n  scrollableContentStyle,\n  smallDownloadButtonContainerStyle,\n  themeProviderRootStyle,\n  titleBarContainerStyle,\n  titleStyle\n} from './styles/ImageOverlay.style';\n/* @conditional-compile-remove(image-overlay) */\nimport { FluentThemeProvider } from '../theming/FluentThemeProvider';\n/* @conditional-compile-remove(image-overlay) */\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(image-overlay-theme) */\nimport { imageOverlayTheme } from '../theming';\n/* @conditional-compile-remove(image-overlay) */\nimport { darkTheme } from '../theming';\n\n/* @conditional-compile-remove(image-overlay) */\n/**\n * Props for {@link ImageOverlay}.\n *\n * @public\n */\nexport interface ImageOverlayProps {\n  /**\n   * Boolean that controls whether the modal is displayed.\n   */\n  isOpen: boolean;\n  /**\n   * Image source used to display the image in a large scale.\n   */\n  imageSrc: string;\n  /**\n   * Optional string used as a alt text for the image. @default 'image'\n   */\n  altText?: string;\n  /**\n   * Optional string used as the title of the image and displayed on the top left corner of the ImageOverlay.\n   */\n  title?: string;\n  /**\n   * Optional JSX element used as a title icon and displayed to the left of the title element.\n   */\n  titleIcon?: JSX.Element;\n  /**\n   * Callback to invoke when the ImageOverlay modal is dismissed\n   */\n  onDismiss: () => void;\n  /**\n   * Optional callback called when the download button is clicked. If not provided, the download button will not be rendered.\n   */\n  onDownloadButtonClicked?: (imageSrc: string) => void;\n}\n/* @conditional-compile-remove(image-overlay) */\n/**\n * Strings of {@link ImageOverlay} that can be overridden.\n *\n * @public\n */\nexport interface ImageOverlayStrings {\n  /**\n   * Download button label for ImageOverlay\n   */\n  downloadButtonLabel: string;\n  /**\n   * Dismiss button aria label for ImageOverlay\n   */\n  dismissButtonAriaLabel: string;\n}\n/* @conditional-compile-remove(image-overlay) */\n/**\n * Component to render a fullscreen modal for a selected image.\n *\n * @public\n */\nexport const ImageOverlay = (props: ImageOverlayProps): JSX.Element => {\n  const { isOpen, imageSrc, title, titleIcon, altText, onDownloadButtonClicked, onDismiss } = props;\n\n  /* @conditional-compile-remove(image-overlay) */\n  const localeStrings = useLocale().strings.imageOverlay;\n\n  const [isImageLoaded, setIsImageLoaded] = useState<boolean>(true);\n\n  /* @conditional-compile-remove(image-overlay) */\n  const overlayTheme = useMemo((): PartialTheme => {\n    /* @conditional-compile-remove(image-overlay-theme) */\n    return imageOverlayTheme;\n    return {\n      ...darkTheme,\n      semanticColors: {\n        ...darkTheme.semanticColors,\n        bodyBackground: 'rgba(0, 0, 0, 0.85)'\n      }\n    };\n  }, []);\n\n  const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(overlayTheme);\n\n  const renderHeaderBar = (): JSX.Element => {\n    return (\n      <Stack className={mergeStyles(headerStyle)}>\n        <Stack className={mergeStyles(titleBarContainerStyle)}>\n          {titleIcon}\n          <Stack.Item className={mergeStyles(titleStyle(overlayTheme))} aria-label={title || 'Image'}>\n            {title}\n          </Stack.Item>\n        </Stack>\n        <Stack className={mergeStyles(controlBarContainerStyle)}>\n          {onDownloadButtonClicked && (\n            <DefaultButton\n              className={mergeStyles(downloadButtonStyle)}\n              /* @conditional-compile-remove(image-overlay) */\n              text={localeStrings.downloadButtonLabel}\n              onClick={() => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc)}\n              onRenderIcon={() => <Icon iconName={downloadIcon.iconName} className={mergeStyles(downloadIconStyle)} />}\n              aria-live={'polite'}\n              /* @conditional-compile-remove(image-overlay) */\n              aria-label={localeStrings.downloadButtonLabel}\n              disabled={imageSrc === ''}\n            />\n          )}\n          {onDownloadButtonClicked && (\n            <IconButton\n              iconProps={downloadIcon}\n              className={mergeStyles(smallDownloadButtonContainerStyle(overlayTheme))}\n              onClick={() => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc)}\n              /* @conditional-compile-remove(image-overlay) */\n              aria-label={localeStrings.downloadButtonLabel}\n              aria-live={'polite'}\n              disabled={imageSrc === ''}\n            />\n          )}\n          <IconButton\n            iconProps={cancelIcon}\n            className={mergeStyles(closeButtonStyles(overlayTheme))}\n            onClick={onDismiss}\n            /* @conditional-compile-remove(image-overlay) */\n            ariaLabel={localeStrings.dismissButtonAriaLabel}\n            aria-live={'polite'}\n          />\n        </Stack>\n      </Stack>\n    );\n  };\n\n  const renderBodyWithLightDismiss = (): JSX.Element => {\n    return (\n      <Stack className={mergeStyles(bodyContainer)} onClick={() => props.onDismiss()}>\n        {imageSrc && (\n          <img\n            src={imageSrc}\n            className={mergeStyles(imageStyle)}\n            alt={altText || 'image'}\n            aria-label={'image-overlay-main-image'}\n            aria-live={'polite'}\n            onError={() => {\n              setIsImageLoaded(false);\n            }}\n            onClick={(event) => event.stopPropagation()}\n            onDoubleClick={(event) => {\n              event.persist();\n            }}\n          />\n        )}\n      </Stack>\n    );\n  };\n\n  return (\n    <Modal\n      titleAriaId={title}\n      isOpen={isOpen}\n      onDismiss={onDismiss}\n      overlay={{ styles: { ...overlayStyles(overlayTheme) } }}\n      styles={{ main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle }}\n      isDarkOverlay={true}\n    >\n      <FluentThemeProvider fluentTheme={overlayTheme} rootStyle={themeProviderRootStyle}>\n        {renderHeaderBar()}\n        {renderBodyWithLightDismiss()}\n      </FluentThemeProvider>\n    </Modal>\n  );\n};\n"]}

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

@@ -21,4 +21,16 @@ export declare const reactionEmojiMenuStyles: () => React.CSSProperties;
  * @private
  */
 export declare const reactionToolTipHostStyle: () => ITooltipHostStyles;
+/**
+ *
+ * @private
+ */
+export declare const mobileViewMenuItemStyle: () => React.CSSProperties;
+/**
+ * @param backgroundImage - the uri for the reaction emoji resource
+ * @param animationPlayState - the value is either 'running' or 'paused' based on the mouse hover event
+ *
+ * @private
+ */
+export declare const mobileViewEmojiStyles: (backgroundImage: string, animationPlayState: string) => React.CSSProperties;
 //# sourceMappingURL=ReactionButton.styles.d.ts.map

package/dist/dist-esm/react-components/src/components/styles/ReactionButton.styles.js

@@ -37,7 +37,7 @@ export const emojiStyles = (backgroundImage, animationPlayState) => {
         justifyContent: 'center',
         alignItems: 'center',
         backgroundPosition: 'center',
-        backgroundSize: `44px 2142px`,
+        backgroundSize: `2.75rem 133.875rem`,
         transition: 'opacity 2s',
         backgroundColor: 'transparent',
         transform: `${animationPlayState === 'running' ? 'scale(0.8)' : 'scale(0.6)'}`
@@ -54,8 +54,8 @@ export const reactionEmojiMenuStyles = () => {
         justifyContent: 'center',
         alignItems: 'center',
         flexDirection: 'row',
-        width: '220px',
-        height: '42px'
+        width: '13.75rem',
+        height: '2.625rem'
     };
 };
 /* @conditional-compile-remove(reaction) */
@@ -73,4 +73,48 @@ export const reactionToolTipHostStyle = () => {
         }
     };
 };
+/* @conditional-compile-remove(reaction) */
+/**
+ *
+ * @private
+ */
+export const mobileViewMenuItemStyle = () => {
+    return {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        flexDirection: 'row',
+        width: '100%',
+        height: '2.625rem'
+    };
+};
+/* @conditional-compile-remove(reaction) */
+/**
+ * @param backgroundImage - the uri for the reaction emoji resource
+ * @param animationPlayState - the value is either 'running' or 'paused' based on the mouse hover event
+ *
+ * @private
+ */
+export const mobileViewEmojiStyles = (backgroundImage, animationPlayState) => {
+    const imageResourceUrl = `url(${backgroundImage})`;
+    return {
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        width: '2.75rem',
+        backgroundImage: imageResourceUrl,
+        animationName: playFrames(),
+        animationDuration: '8.12s',
+        animationTimingFunction: `steps(102)`,
+        animationPlayState: animationPlayState,
+        animationIterationCount: 'infinite',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundPosition: 'center',
+        backgroundSize: `2.75rem 133.875rem`,
+        transition: 'opacity 2s',
+        backgroundColor: 'transparent',
+        transform: `${animationPlayState === 'running' ? 'scale(0.8)' : 'scale(0.6)'}`
+    };
+};
 //# sourceMappingURL=ReactionButton.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ReactionButton.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ReactionButton.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,2CAA2C;AAC3C,OAAO,EAAsB,SAAS,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAIjF,2CAA2C;AAC3C;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,eAAe,CAAC,GAAG,EAAE,CAC7C,SAAS,CAAC;IACR,IAAI,EAAE;QACJ,kBAAkB,EAAE,YAAY;KACjC;IACD,EAAE,EAAE;QACF,kBAAkB,EAAE,SAAS;KAC9B;CACF,CAAC,CACH,CAAC;AAEF,2CAA2C;AAC3C;;;;;GAKG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,eAAuB,EAAE,kBAA0B,EAAuB,EAAE;IACtG,MAAM,gBAAgB,GAAG,OAAO,eAAe,GAAG,CAAC;IACnD,OAAO;QACL,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;QACb,eAAe,EAAE,gBAAgB;QACjC,aAAa,EAAE,UAAU,EAAE;QAC3B,iBAAiB,EAAE,OAAO;QAC1B,uBAAuB,EAAE,YAAY;QACrC,kBAAkB,EAAE,kBAAkB;QACtC,uBAAuB,EAAE,UAAU;QACnC,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;QACpB,kBAAkB,EAAE,QAAQ;QAC5B,cAAc,EAAE,aAAa;QAC7B,UAAU,EAAE,YAAY;QACxB,eAAe,EAAE,aAAa;QAC9B,SAAS,EAAE,GAAG,kBAAkB,KAAK,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,EAAE;KAC/E,CAAC;AACJ,CAAC,CAAC;AAEF,2CAA2C;AAC3C;;;GAGG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAwB,EAAE;IAC/D,OAAO;QACL,OAAO,EAAE,MAAM;QACf,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;QACpB,aAAa,EAAE,KAAK;QACpB,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,MAAM;KACf,CAAC;AACJ,CAAC,CAAC;AAEF,2CAA2C;AAC3C;;;GAGG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAuB,EAAE;IAC/D,OAAO;QACL,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,QAAQ;YACvB,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,MAAM;SACd;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(reaction) */\nimport { ITooltipHostStyles, keyframes, memoizeFunction } from '@fluentui/react';\n/* @conditional-compile-remove(reaction) */\nimport React from 'react';\n\n/* @conditional-compile-remove(reaction) */\n/**\n * @private\n */\nexport const playFrames = memoizeFunction(() =>\n  keyframes({\n    from: {\n      backgroundPosition: '0px 8568px'\n    },\n    to: {\n      backgroundPosition: '0px 0px'\n    }\n  })\n);\n\n/* @conditional-compile-remove(reaction) */\n/**\n * @param backgroundImage - the uri for the reaction emoji resource\n * @param animationPlayState - the value is either 'running' or 'paused' based on the mouse hover event\n *\n * @private\n */\nexport const emojiStyles = (backgroundImage: string, animationPlayState: string): React.CSSProperties => {\n  const imageResourceUrl = `url(${backgroundImage})`;\n  return {\n    display: 'flex',\n    flexDirection: 'column',\n    height: '100%',\n    width: '100%',\n    backgroundImage: imageResourceUrl,\n    animationName: playFrames(),\n    animationDuration: '8.12s',\n    animationTimingFunction: `steps(102)`,\n    animationPlayState: animationPlayState,\n    animationIterationCount: 'infinite',\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundPosition: 'center',\n    backgroundSize: `44px 2142px`,\n    transition: 'opacity 2s',\n    backgroundColor: 'transparent',\n    transform: `${animationPlayState === 'running' ? 'scale(0.8)' : 'scale(0.6)'}`\n  };\n};\n\n/* @conditional-compile-remove(reaction) */\n/**\n *\n * @private\n */\nexport const reactionEmojiMenuStyles = (): React.CSSProperties => {\n  return {\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    flexDirection: 'row',\n    width: '220px',\n    height: '42px'\n  };\n};\n\n/* @conditional-compile-remove(reaction) */\n/**\n *\n * @private\n */\nexport const reactionToolTipHostStyle = (): ITooltipHostStyles => {\n  return {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      height: '100%',\n      width: '100%'\n    }\n  };\n};\n"]}
+{"version":3,"file":"ReactionButton.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ReactionButton.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(reaction) */\nimport { ITooltipHostStyles, keyframes, memoizeFunction } from '@fluentui/react';\n/* @conditional-compile-remove(reaction) */\nimport React from 'react';\n\n/* @conditional-compile-remove(reaction) */\n/**\n * @private\n */\nexport const playFrames = memoizeFunction(() =>\n  keyframes({\n    from: {\n      backgroundPosition: '0px 8568px'\n    },\n    to: {\n      backgroundPosition: '0px 0px'\n    }\n  })\n);\n\n/* @conditional-compile-remove(reaction) */\n/**\n * @param backgroundImage - the uri for the reaction emoji resource\n * @param animationPlayState - the value is either 'running' or 'paused' based on the mouse hover event\n *\n * @private\n */\nexport const emojiStyles = (backgroundImage: string, animationPlayState: string): React.CSSProperties => {\n  const imageResourceUrl = `url(${backgroundImage})`;\n  return {\n    display: 'flex',\n    flexDirection: 'column',\n    height: '100%',\n    width: '100%',\n    backgroundImage: imageResourceUrl,\n    animationName: playFrames(),\n    animationDuration: '8.12s',\n    animationTimingFunction: `steps(102)`,\n    animationPlayState: animationPlayState,\n    animationIterationCount: 'infinite',\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundPosition: 'center',\n    backgroundSize: `2.75rem 133.875rem`,\n    transition: 'opacity 2s',\n    backgroundColor: 'transparent',\n    transform: `${animationPlayState === 'running' ? 'scale(0.8)' : 'scale(0.6)'}`\n  };\n};\n\n/* @conditional-compile-remove(reaction) */\n/**\n *\n * @private\n */\nexport const reactionEmojiMenuStyles = (): React.CSSProperties => {\n  return {\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    flexDirection: 'row',\n    width: '13.75rem',\n    height: '2.625rem'\n  };\n};\n\n/* @conditional-compile-remove(reaction) */\n/**\n *\n * @private\n */\nexport const reactionToolTipHostStyle = (): ITooltipHostStyles => {\n  return {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      height: '100%',\n      width: '100%'\n    }\n  };\n};\n\n/* @conditional-compile-remove(reaction) */\n/**\n *\n * @private\n */\nexport const mobileViewMenuItemStyle = (): React.CSSProperties => {\n  return {\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    flexDirection: 'row',\n    width: '100%',\n    height: '2.625rem'\n  };\n};\n\n/* @conditional-compile-remove(reaction) */\n/**\n * @param backgroundImage - the uri for the reaction emoji resource\n * @param animationPlayState - the value is either 'running' or 'paused' based on the mouse hover event\n *\n * @private\n */\nexport const mobileViewEmojiStyles = (backgroundImage: string, animationPlayState: string): React.CSSProperties => {\n  const imageResourceUrl = `url(${backgroundImage})`;\n  return {\n    display: 'flex',\n    flexDirection: 'column',\n    height: '100%',\n    width: '2.75rem',\n    backgroundImage: imageResourceUrl,\n    animationName: playFrames(),\n    animationDuration: '8.12s',\n    animationTimingFunction: `steps(102)`,\n    animationPlayState: animationPlayState,\n    animationIterationCount: 'infinite',\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundPosition: 'center',\n    backgroundSize: `2.75rem 133.875rem`,\n    transition: 'opacity 2s',\n    backgroundColor: 'transparent',\n    transform: `${animationPlayState === 'running' ? 'scale(0.8)' : 'scale(0.6)'}`\n  };\n};\n"]}

package/dist/dist-esm/react-components/src/localization/locales/ar-SA/strings.json

@@ -7,7 +7,8 @@
         "mutedIconLabel": "تم كتم الصوت",
         "displayNamePlaceholder": "مشارك غير مسمى",
         "participantStateRinging": "يتم الآن الاتصال...",
-        "participantStateHold": "قيد الانتظار"
+        "participantStateHold": "قيد الانتظار",
+        "attendeeRole": "الحضور"
     },
     "ParticipantList": {
         "overflowParticipantCount": "+{overflowCount} من الأشخاص الإضافيين"
@@ -28,6 +29,23 @@
         "uploading": "جارٍ التحميل",
         "uploadCompleted": "اكتمل التحميل"
     },
+    "richTextSendBox": {
+        "placeholderText": "أدخل رسالة",
+        "textTooLong": "تجاوز طول الرسالة الحد الأقصى.",
+        "sendButtonAriaLabel": "إرسال رسالة",
+        "fileUploadsPendingError": "جارٍ التحميل... الرجاء الانتظار.",
+        "removeFile": "إزالة الملف",
+        "uploading": "يتم الآن التحميل",
+        "uploadCompleted": "اكتمل التحميل",
+        "boldTooltip": "غامق",
+        "italicTooltip": "مائل",
+        "underlineTooltip": "مسطّر",
+        "bulletListTooltip": "قائمة ذات تعداد نقطي",
+        "numberListTooltip": "قائمة مرقّمة",
+        "increaseIndentTooltip": "زيادة المسافة البادئة",
+        "decreaseIndentTooltip": "إنقاص المسافة البادئة",
+        "richTextFormatButtonTooltip": "تنسيق"
+    },
     "mentionPopover": {
         "mentionPopoverHeader": "الاقتراحات"
     },
@@ -125,6 +143,7 @@
     },
     "reactionButton": {
         "label": "تفاعل",
+        "ariaLabel": "زر \"تفاعل\"، إرسال تفاعل",
         "tooltipDisabledContent": "تم تعطيل إجراء التفاعل",
         "tooltipContent": "إرسال تفاعل",
         "likeReactionTooltipContent": "إعجاب",
@@ -224,7 +243,8 @@
         "addSpotlightVideoTileMenuLabel": "إضافة تسليط ضوء",
         "spotlightLimitReachedMenuTitle": "تم الوصول إلى الحد الأقصى لتسليط الضوء",
         "stopSpotlightVideoTileMenuLabel": "التوقف عن تسليط الضوء",
-        "stopSpotlightOnSelfVideoTileMenuLabel": "الخروج من وضع تسليط الضوء"
+        "stopSpotlightOnSelfVideoTileMenuLabel": "الخروج من وضع تسليط الضوء",
+        "attendeeRole": "الحضور"
     },
     "dialpad": {
         "placeholderText": "أدخل رقم الهاتف",
@@ -358,6 +378,5 @@
     "verticalGallery": {
         "leftNavButtonAriaLabel": "الصفحة السابقة",
         "rightNavButtonAriaLabel": "الصفحة التالية"
-    },
-    "AttendeeRole": "الحضور"
+    }
 }

package/dist/dist-esm/react-components/src/localization/locales/cs-CZ/strings.json

@@ -7,7 +7,8 @@
         "mutedIconLabel": "Ztlumeno",
         "displayNamePlaceholder": "Nepojmenovaný účastník",
         "participantStateRinging": "Volání…",
-        "participantStateHold": "Pozastavený hovor"
+        "participantStateHold": "Pozastavený hovor",
+        "attendeeRole": "Účastník"
     },
     "ParticipantList": {
         "overflowParticipantCount": "+{overflowCount} další(ch)"
@@ -28,6 +29,23 @@
         "uploading": "Nahrávání",
         "uploadCompleted": "Nahrávání se dokončilo"
     },
+    "richTextSendBox": {
+        "placeholderText": "Zadejte zprávu",
+        "textTooLong": "Délka vaší zprávy překračuje maximální limit.",
+        "sendButtonAriaLabel": "Poslat zprávu",
+        "fileUploadsPendingError": "Nahrávání… Počkejte prosím.",
+        "removeFile": "Odebrat soubor",
+        "uploading": "Nahrávání",
+        "uploadCompleted": "Nahrávání se dokončilo",
+        "boldTooltip": "Tučné",
+        "italicTooltip": "Kurzíva",
+        "underlineTooltip": "Podtržení",
+        "bulletListTooltip": "Seznam s odrážkami",
+        "numberListTooltip": "Číslovaný seznam",
+        "increaseIndentTooltip": "Zvětšit odsazení",
+        "decreaseIndentTooltip": "Zmenšit odsazení",
+        "richTextFormatButtonTooltip": "Formát"
+    },
     "mentionPopover": {
         "mentionPopoverHeader": "Návrhy"
     },
@@ -125,6 +143,7 @@
     },
     "reactionButton": {
         "label": "Reagovat",
+        "ariaLabel": "Tlačítko Reagovat, odeslat reakci",
         "tooltipDisabledContent": "Akce reakce je zakázaná",
         "tooltipContent": "Odeslání reakce",
         "likeReactionTooltipContent": "To se mi líbí",
@@ -224,7 +243,8 @@
         "addSpotlightVideoTileMenuLabel": "Přidat do hlavního výběru",
         "spotlightLimitReachedMenuTitle": "Dosáhlo se limitu hlavního výběru",
         "stopSpotlightVideoTileMenuLabel": "Zastavit přidávání do hlavního výběru",
-        "stopSpotlightOnSelfVideoTileMenuLabel": "Ukončit hlavní výběr"
+        "stopSpotlightOnSelfVideoTileMenuLabel": "Ukončit hlavní výběr",
+        "attendeeRole": "Účastník"
     },
     "dialpad": {
         "placeholderText": "Zadejte telefonní číslo",
@@ -358,6 +378,5 @@
     "verticalGallery": {
         "leftNavButtonAriaLabel": "předchozí stránka",
         "rightNavButtonAriaLabel": "další stránka"
-    },
-    "AttendeeRole": "Účastník"
+    }
 }

package/dist/dist-esm/react-components/src/localization/locales/de-DE/strings.json

@@ -7,7 +7,8 @@
         "mutedIconLabel": "Stumm geschaltet",
         "displayNamePlaceholder": "Teilnehmer ohne Namen",
         "participantStateRinging": "Anrufen...",
-        "participantStateHold": "In der Warteschleife"
+        "participantStateHold": "In der Warteschleife",
+        "attendeeRole": "Teilnehmer"
     },
     "ParticipantList": {
         "overflowParticipantCount": "+{overflowCount} weitere"
@@ -28,6 +29,23 @@
         "uploading": "Hochladen",
         "uploadCompleted": "Upload abgeschlossen"
     },
+    "richTextSendBox": {
+        "placeholderText": "Nachricht eingeben",
+        "textTooLong": "Ihre Nachrichtenlänge überschreitet den maximalen Grenzwert.",
+        "sendButtonAriaLabel": "Nachricht senden",
+        "fileUploadsPendingError": "Wird hochgeladen... Bitte warten.",
+        "removeFile": "Datei entfernen",
+        "uploading": "Wird hochgeladen",
+        "uploadCompleted": "Upload abgeschlossen",
+        "boldTooltip": "Fett",
+        "italicTooltip": "Kursiv",
+        "underlineTooltip": "Unterstreichen",
+        "bulletListTooltip": "Aufzählungsliste",
+        "numberListTooltip": "Nummerierte Liste",
+        "increaseIndentTooltip": "Einzug vergrößern",
+        "decreaseIndentTooltip": "Einzug verringern",
+        "richTextFormatButtonTooltip": "Formatieren"
+    },
     "mentionPopover": {
         "mentionPopoverHeader": "Vorschläge"
     },
@@ -125,6 +143,7 @@
     },
     "reactionButton": {
         "label": "Reagieren",
+        "ariaLabel": "Reaktionsschaltfläche, Reaktion senden",
         "tooltipDisabledContent": "Reaktionsaktion ist deaktiviert",
         "tooltipContent": "Reaktion senden",
         "likeReactionTooltipContent": "Gefällt mir",
@@ -224,7 +243,8 @@
         "addSpotlightVideoTileMenuLabel": "Spotlight hinzufügen",
         "spotlightLimitReachedMenuTitle": "Spotlight-Limit erreicht",
         "stopSpotlightVideoTileMenuLabel": "Spotlight beenden",
-        "stopSpotlightOnSelfVideoTileMenuLabel": "Spotlight beenden"
+        "stopSpotlightOnSelfVideoTileMenuLabel": "Spotlight beenden",
+        "attendeeRole": "Teilnehmer"
     },
     "dialpad": {
         "placeholderText": "Telefonnummer eingeben",
@@ -358,6 +378,5 @@
     "verticalGallery": {
         "leftNavButtonAriaLabel": "Vorherige Seite",
         "rightNavButtonAriaLabel": "Nächste Seite"
-    },
-    "AttendeeRole": "Teilnehmer"
+    }
 }

package/dist/dist-esm/react-components/src/localization/locales/en-GB/strings.json

@@ -7,7 +7,8 @@
         "mutedIconLabel": "Muted",
         "displayNamePlaceholder": "Unnamed participant",
         "participantStateRinging": "Calling...",
-        "participantStateHold": "On hold"
+        "participantStateHold": "On hold",
+        "attendeeRole": "Attendee"
     },
     "ParticipantList": {
         "overflowParticipantCount": "+{overflowCount} more"
@@ -28,6 +29,23 @@
         "uploading": "Uploading",
         "uploadCompleted": "Upload completed"
     },
+    "richTextSendBox": {
+        "placeholderText": "Enter a message",
+        "textTooLong": "Your message length is over the maximum limit.",
+        "sendButtonAriaLabel": "Send message",
+        "fileUploadsPendingError": "Uploading... Please wait.",
+        "removeFile": "Remove file",
+        "uploading": "Uploading",
+        "uploadCompleted": "Upload completed",
+        "boldTooltip": "Bold",
+        "italicTooltip": "Italic",
+        "underlineTooltip": "Underline",
+        "bulletListTooltip": "Bulleted list",
+        "numberListTooltip": "Numbered list",
+        "increaseIndentTooltip": "Increase indent",
+        "decreaseIndentTooltip": "Decrease indent",
+        "richTextFormatButtonTooltip": "Format"
+    },
     "mentionPopover": {
         "mentionPopoverHeader": "Suggestions"
     },
@@ -125,6 +143,7 @@
     },
     "reactionButton": {
         "label": "React",
+        "ariaLabel": "React Button, Send a reaction",
         "tooltipDisabledContent": "Reaction action is disabled",
         "tooltipContent": "Send a reaction",
         "likeReactionTooltipContent": "Like",
@@ -224,7 +243,8 @@
         "addSpotlightVideoTileMenuLabel": "Add spotlight",
         "spotlightLimitReachedMenuTitle": "Spotlight limit reached",
         "stopSpotlightVideoTileMenuLabel": "Stop spotlighting",
-        "stopSpotlightOnSelfVideoTileMenuLabel": "Exit spotlight"
+        "stopSpotlightOnSelfVideoTileMenuLabel": "Exit spotlight",
+        "attendeeRole": "Attendee"
     },
     "dialpad": {
         "placeholderText": "Enter phone number",
@@ -358,6 +378,5 @@
     "verticalGallery": {
         "leftNavButtonAriaLabel": "previous page",
         "rightNavButtonAriaLabel": "next page"
-    },
-    "AttendeeRole": "Attendee"
+    }
 }

package/dist/dist-esm/react-components/src/localization/locales/es-ES/strings.json

@@ -7,7 +7,8 @@
         "mutedIconLabel": "Silenciado",
         "displayNamePlaceholder": "Participante sin nombre",
         "participantStateRinging": "Llamando...",
-        "participantStateHold": "En espera"
+        "participantStateHold": "En espera",
+        "attendeeRole": "Asistente"
     },
     "ParticipantList": {
         "overflowParticipantCount": "+{overflowCount} más"
@@ -28,6 +29,23 @@
         "uploading": "Cargando",
         "uploadCompleted": "Carga completada"
     },
+    "richTextSendBox": {
+        "placeholderText": "Escribir un mensaje",
+        "textTooLong": "La longitud del mensaje supera el límite máximo.",
+        "sendButtonAriaLabel": "Enviar mensaje",
+        "fileUploadsPendingError": "Cargando... Espere.",
+        "removeFile": "Quitar archivo",
+        "uploading": "Cargando",
+        "uploadCompleted": "Carga completada",
+        "boldTooltip": "Negrita",
+        "italicTooltip": "Cursiva",
+        "underlineTooltip": "Subrayado",
+        "bulletListTooltip": "Lista con viñetas",
+        "numberListTooltip": "Lista numerada",
+        "increaseIndentTooltip": "Aumentar sangría",
+        "decreaseIndentTooltip": "Reducir sangría",
+        "richTextFormatButtonTooltip": "Formato"
+    },
     "mentionPopover": {
         "mentionPopoverHeader": "Sugerencias"
     },
@@ -125,6 +143,7 @@
     },
     "reactionButton": {
         "label": "Reaccionar",
+        "ariaLabel": "Botón Reaccionar, Enviar una reacción",
         "tooltipDisabledContent": "La acción de reacción está deshabilitada",
         "tooltipContent": "Enviar una reacción",
         "likeReactionTooltipContent": "Me gusta",
@@ -224,7 +243,8 @@
         "addSpotlightVideoTileMenuLabel": "Agregar primer plano",
         "spotlightLimitReachedMenuTitle": "Se alcanzó el límite de primer plano",
         "stopSpotlightVideoTileMenuLabel": "Dejar de poner en primer plano",
-        "stopSpotlightOnSelfVideoTileMenuLabel": "Primer plano"
+        "stopSpotlightOnSelfVideoTileMenuLabel": "Primer plano",
+        "attendeeRole": "Asistente"
     },
     "dialpad": {
         "placeholderText": "Introduzca el número de teléfono",
@@ -358,6 +378,5 @@
     "verticalGallery": {
         "leftNavButtonAriaLabel": "página anterior",
         "rightNavButtonAriaLabel": "página siguiente"
-    },
-    "AttendeeRole": "Asistente"
+    }
 }

package/dist/dist-esm/react-components/src/localization/locales/fi-FI/strings.json

@@ -7,7 +7,8 @@
         "mutedIconLabel": "Mykistetty",
         "displayNamePlaceholder": "Nimetön osallistuja",
         "participantStateRinging": "Soitetaan...",
-        "participantStateHold": "Pidossa"
+        "participantStateHold": "Pidossa",
+        "attendeeRole": "Osallistuja"
     },
     "ParticipantList": {
         "overflowParticipantCount": "+{overflowCount} lisää"
@@ -28,6 +29,23 @@
         "uploading": "Ladataan palvelimeen",
         "uploadCompleted": "Ladattu palvelimeen"
     },
+    "richTextSendBox": {
+        "placeholderText": "Kirjoita viesti",
+        "textTooLong": "Viestin pituus ylittää enimmäispituuden.",
+        "sendButtonAriaLabel": "Lähetä viesti",
+        "fileUploadsPendingError": "Ladataan... Odota.",
+        "removeFile": "Poista tiedosto",
+        "uploading": "Ladataan",
+        "uploadCompleted": "Lataus valmis",
+        "boldTooltip": "Lihavoi",
+        "italicTooltip": "Kursivointi",
+        "underlineTooltip": "Alleviivaa",
+        "bulletListTooltip": "Luettelomerkeillä varustettu luettelo",
+        "numberListTooltip": "Numeroitu luettelo",
+        "increaseIndentTooltip": "Suurenna sisennystä",
+        "decreaseIndentTooltip": "Pienennä sisennystä",
+        "richTextFormatButtonTooltip": "Muoto"
+    },
     "mentionPopover": {
         "mentionPopoverHeader": "Ehdotuksia"
     },
@@ -125,6 +143,7 @@
     },
     "reactionButton": {
         "label": "Reagoi",
+        "ariaLabel": "Reagoi-painike, lähetä reaktio",
         "tooltipDisabledContent": "Reaktiotoiminto on poistettu käytöstä",
         "tooltipContent": "Lähetä reaktio",
         "likeReactionTooltipContent": "Tykkää",
@@ -224,7 +243,8 @@
         "addSpotlightVideoTileMenuLabel": "Lisää valokeilaan",
         "spotlightLimitReachedMenuTitle": "Spotlight-raja saavutettu",
         "stopSpotlightVideoTileMenuLabel": "Poista valokeilasta",
-        "stopSpotlightOnSelfVideoTileMenuLabel": "Valokeila"
+        "stopSpotlightOnSelfVideoTileMenuLabel": "Valokeila",
+        "attendeeRole": "Osallistuja"
     },
     "dialpad": {
         "placeholderText": "Anna puhelinnumero",
@@ -358,6 +378,5 @@
     "verticalGallery": {
         "leftNavButtonAriaLabel": "edellinen sivu",
         "rightNavButtonAriaLabel": "seuraava sivu"
-    },
-    "AttendeeRole": "Osallistuja"
+    }
 }

package/dist/dist-esm/react-components/src/localization/locales/fr-FR/strings.json

@@ -7,7 +7,8 @@
         "mutedIconLabel": "Muet activé",
         "displayNamePlaceholder": "Participant sans nom",
         "participantStateRinging": "Appel en cours...",
-        "participantStateHold": "En attente"
+        "participantStateHold": "En attente",
+        "attendeeRole": "Participant"
     },
     "ParticipantList": {
         "overflowParticipantCount": "+{overflowCount} plus"
@@ -28,6 +29,23 @@
         "uploading": "Chargement",
         "uploadCompleted": "Téléchargement terminé"
     },
+    "richTextSendBox": {
+        "placeholderText": "Saisir un message",
+        "textTooLong": "La longueur de votre message dépasse la limite maximale.",
+        "sendButtonAriaLabel": "Envoyer un message",
+        "fileUploadsPendingError": "Chargement en cours... Veuillez patienter.",
+        "removeFile": "Supprimer le fichier",
+        "uploading": "Téléchargement",
+        "uploadCompleted": "Chargement terminé",
+        "boldTooltip": "Gras",
+        "italicTooltip": "Italique",
+        "underlineTooltip": "Souligner",
+        "bulletListTooltip": "Liste à puces",
+        "numberListTooltip": "Liste numérotée",
+        "increaseIndentTooltip": "Augmenter le retrait",
+        "decreaseIndentTooltip": "Réduire le retrait",
+        "richTextFormatButtonTooltip": "Format"
+    },
     "mentionPopover": {
         "mentionPopoverHeader": "Suggestions"
     },
@@ -125,6 +143,7 @@
     },
     "reactionButton": {
         "label": "Réagir",
+        "ariaLabel": "bouton React, envoyer une réaction",
         "tooltipDisabledContent": "L’action de réaction est désactivée",
         "tooltipContent": "Envoyer une réaction",
         "likeReactionTooltipContent": "J’aime",
@@ -224,7 +243,8 @@
         "addSpotlightVideoTileMenuLabel": "Ajouter la mise en évidence",
         "spotlightLimitReachedMenuTitle": "Limite Spotlight atteinte",
         "stopSpotlightVideoTileMenuLabel": "Arrêter la mise en évidence",
-        "stopSpotlightOnSelfVideoTileMenuLabel": "Quitter la mise en évidence"
+        "stopSpotlightOnSelfVideoTileMenuLabel": "Quitter la mise en évidence",
+        "attendeeRole": "Participant(e)"
     },
     "dialpad": {
         "placeholderText": "Entrer un numéro de téléphone",
@@ -358,6 +378,5 @@
     "verticalGallery": {
         "leftNavButtonAriaLabel": "page précédente",
         "rightNavButtonAriaLabel": "page suivante"
-    },
-    "AttendeeRole": "Participant"
+    }
 }