@azure/communication-react 1.5.1-beta.3 → 1.5.1-beta.5

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

@@ -33,7 +33,7 @@ export const HorizontalGallery = (props) => {
     const firstIndexOfCurrentPage = page * childrenPerPage;
     const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;
     const childrenOnCurrentPage = useMemo(() => {
-        return indexesArray[clippedPage].map((index) => {
+        return indexesArray[clippedPage].map(index => {
             return React.Children.toArray(children)[index];
         });
     }, [indexesArray, clippedPage, children]);
@@ -41,21 +41,23 @@ export const HorizontalGallery = (props) => {
     const disablePreviousButton = page === 0;
     const disableNextButton = page === lastPage;
     const childrenStyles = useMemo(() => {
-        return { root: styles === null || styles === void 0 ? void 0 : styles.children };
+        return {
+            root: styles === null || styles === void 0 ? void 0 : styles.children
+        };
     }, [styles === null || styles === void 0 ? void 0 : styles.children]);
     // If children per page is 0 or less return empty element
     if (childrenPerPage <= 0) {
         return React.createElement(React.Fragment, null);
     }
-    return (React.createElement(Stack, { horizontal: true, className: mergeStyles(rootStyle, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root) },
-        showButtons && (React.createElement(HorizontalGalleryNavigationButton, { key: "previous-nav-button", icon: React.createElement(Icon, { iconName: "HorizontalGalleryLeftButton" }), styles: styles === null || styles === void 0 ? void 0 : styles.previousButton, onClick: () => setPage(Math.max(0, Math.min(lastPage, page - 1))), disabled: disablePreviousButton, identifier: ids.overflowGalleryLeftNavButton })),
+    return React.createElement(Stack, { horizontal: true, className: mergeStyles(rootStyle, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root) },
+        showButtons && React.createElement(HorizontalGalleryNavigationButton, { key: "previous-nav-button", icon: React.createElement(Icon, { iconName: "HorizontalGalleryLeftButton" }), styles: styles === null || styles === void 0 ? void 0 : styles.previousButton, onClick: () => setPage(Math.max(0, Math.min(lastPage, page - 1))), disabled: disablePreviousButton, identifier: ids.overflowGalleryLeftNavButton }),
         React.createElement(Stack, { horizontal: true, className: mergeStyles(childrenContainerStyle) }, childrenOnCurrentPage.map((child, i) => {
-            return (React.createElement(Stack.Item, { styles: childrenStyles, key: i, "data-ui-id": ids.horizontalGalleryVideoTile }, child));
+            return React.createElement(Stack.Item, { styles: childrenStyles, key: i, "data-ui-id": ids.horizontalGalleryVideoTile }, child);
         })),
-        showButtons && (React.createElement(HorizontalGalleryNavigationButton, { key: "next-nav-button", icon: React.createElement(Icon, { iconName: "HorizontalGalleryRightButton" }), styles: styles === null || styles === void 0 ? void 0 : styles.nextButton, onClick: () => setPage(Math.min(lastPage, page + 1)), disabled: disableNextButton, identifier: ids.overflowGalleryRightNavButton }))));
+        showButtons && React.createElement(HorizontalGalleryNavigationButton, { key: "next-nav-button", icon: React.createElement(Icon, { iconName: "HorizontalGalleryRightButton" }), styles: styles === null || styles === void 0 ? void 0 : styles.nextButton, onClick: () => setPage(Math.min(lastPage, page + 1)), disabled: disableNextButton, identifier: ids.overflowGalleryRightNavButton }));
 };
 const HorizontalGalleryNavigationButton = (props) => {
     const theme = useTheme();
-    return (React.createElement(DefaultButton, { className: mergeStyles(leftRightButtonStyles(theme), props.styles), onClick: props.onClick, disabled: props.disabled, "data-ui-id": props.identifier }, props.icon));
+    return React.createElement(DefaultButton, { className: mergeStyles(leftRightButtonStyles(theme), props.styles), onClick: props.onClick, disabled: props.disabled, "data-ui-id": props.identifier }, props.icon);
 };
 //# sourceMappingURL=HorizontalGallery.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/HorizontalGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { DefaultButton, Icon, IStyle, Stack, mergeStyles } from '@fluentui/react';\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles } from '../types';\nimport { rootStyle, childrenContainerStyle, leftRightButtonStyles } from './styles/HorizontalGallery.styles';\nimport { useIdentifiers } from '../identifiers';\nimport { bucketize } from './utils/overFlowGalleriesUtils';\n\n/**\n * {@link HorizontalGallery} default children per page\n */\nconst DEFAULT_CHILDREN_PER_PAGE = 5;\n\n/**\n * {@link HorizontalGallery} Component Styles.\n * @public\n */\nexport interface HorizontalGalleryStyles extends BaseCustomStyles {\n  /** Styles for each child of {@link HorizontalGallery} */\n  children?: IStyle;\n  /** Styles for navigation button to go to previous page */\n  previousButton?: IStyle;\n  /** Styles for navigation button to go to next page */\n  nextButton?: IStyle;\n}\n\n/**\n * {@link HorizontalGallery} Component Props.\n */\nexport interface HorizontalGalleryProps {\n  children: React.ReactNode;\n  /**\n   * Styles for HorizontalGallery\n   */\n  styles?: HorizontalGalleryStyles;\n  /**\n   * Children shown per page\n   * @defaultValue 5\n   */\n  childrenPerPage?: number;\n  /**\n   * helper function to choose which tiles to give video to.\n   */\n  onFetchTilesToRender?: (indexes: number[]) => void;\n}\n\n/**\n * Renders a horizontal gallery that parents children horizontally. Handles pagination based on the childrenPerPage prop.\n * @param props - HorizontalGalleryProps {@link @azure/communication-react#HorizontalGalleryProps}\n * @returns\n */\nexport const HorizontalGallery = (props: HorizontalGalleryProps): JSX.Element => {\n  const { children, childrenPerPage = DEFAULT_CHILDREN_PER_PAGE, styles, onFetchTilesToRender } = props;\n\n  const ids = useIdentifiers();\n\n  const [page, setPage] = useState(0);\n\n  const numberOfChildren = React.Children.count(children);\n  const lastPage = Math.ceil(numberOfChildren / childrenPerPage) - 1;\n\n  const indexesArray: number[][] = useMemo(() => {\n    return bucketize([...Array(numberOfChildren).keys()], childrenPerPage);\n  }, [numberOfChildren, childrenPerPage]);\n\n  useEffect(() => {\n    if (onFetchTilesToRender && indexesArray) {\n      onFetchTilesToRender(indexesArray[page]);\n    }\n  }, [indexesArray, onFetchTilesToRender, page]);\n\n  const firstIndexOfCurrentPage = page * childrenPerPage;\n  const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;\n\n  const childrenOnCurrentPage = useMemo(() => {\n    return indexesArray[clippedPage].map((index) => {\n      return React.Children.toArray(children)[index];\n    });\n  }, [indexesArray, clippedPage, children]);\n\n  const showButtons = numberOfChildren > childrenPerPage;\n  const disablePreviousButton = page === 0;\n  const disableNextButton = page === lastPage;\n\n  const childrenStyles = useMemo(() => {\n    return { root: styles?.children };\n  }, [styles?.children]);\n\n  // If children per page is 0 or less return empty element\n  if (childrenPerPage <= 0) {\n    return <></>;\n  }\n\n  return (\n    <Stack horizontal className={mergeStyles(rootStyle, props.styles?.root)}>\n      {showButtons && (\n        <HorizontalGalleryNavigationButton\n          key=\"previous-nav-button\"\n          icon={<Icon iconName=\"HorizontalGalleryLeftButton\" />}\n          styles={styles?.previousButton}\n          onClick={() => setPage(Math.max(0, Math.min(lastPage, page - 1)))}\n          disabled={disablePreviousButton}\n          identifier={ids.overflowGalleryLeftNavButton}\n        />\n      )}\n      <Stack horizontal className={mergeStyles(childrenContainerStyle)}>\n        {childrenOnCurrentPage.map((child, i) => {\n          return (\n            <Stack.Item styles={childrenStyles} key={i} data-ui-id={ids.horizontalGalleryVideoTile}>\n              {child}\n            </Stack.Item>\n          );\n        })}\n      </Stack>\n      {showButtons && (\n        <HorizontalGalleryNavigationButton\n          key=\"next-nav-button\"\n          icon={<Icon iconName=\"HorizontalGalleryRightButton\" />}\n          styles={styles?.nextButton}\n          onClick={() => setPage(Math.min(lastPage, page + 1))}\n          disabled={disableNextButton}\n          identifier={ids.overflowGalleryRightNavButton}\n        />\n      )}\n    </Stack>\n  );\n};\n\nconst HorizontalGalleryNavigationButton = (props: {\n  icon: JSX.Element;\n  styles: IStyle;\n  onClick?: () => void;\n  disabled?: boolean;\n  identifier?: string;\n}): JSX.Element => {\n  const theme = useTheme();\n  return (\n    <DefaultButton\n      className={mergeStyles(leftRightButtonStyles(theme), props.styles)}\n      onClick={props.onClick}\n      disabled={props.disabled}\n      data-ui-id={props.identifier}\n    >\n      {props.icon}\n    </DefaultButton>\n  );\n};\n"]}
+{"version":3,"file":"HorizontalGallery.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/HorizontalGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { DefaultButton, Icon, IStyle, Stack, mergeStyles } from '@fluentui/react';\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles } from '../types';\nimport { rootStyle, childrenContainerStyle, leftRightButtonStyles } from './styles/HorizontalGallery.styles';\nimport { useIdentifiers } from '../identifiers';\nimport { bucketize } from './utils/overFlowGalleriesUtils';\n\n/**\n * {@link HorizontalGallery} default children per page\n */\nconst DEFAULT_CHILDREN_PER_PAGE = 5;\n\n/**\n * {@link HorizontalGallery} Component Styles.\n * @public\n */\nexport interface HorizontalGalleryStyles extends BaseCustomStyles {\n  /** Styles for each child of {@link HorizontalGallery} */\n  children?: IStyle;\n  /** Styles for navigation button to go to previous page */\n  previousButton?: IStyle;\n  /** Styles for navigation button to go to next page */\n  nextButton?: IStyle;\n}\n\n/**\n * {@link HorizontalGallery} Component Props.\n */\nexport interface HorizontalGalleryProps {\n  children: React.ReactNode;\n  /**\n   * Styles for HorizontalGallery\n   */\n  styles?: HorizontalGalleryStyles;\n  /**\n   * Children shown per page\n   * @defaultValue 5\n   */\n  childrenPerPage?: number;\n  /**\n   * helper function to choose which tiles to give video to.\n   */\n  onFetchTilesToRender?: (indexes: number[]) => void;\n}\n\n/**\n * Renders a horizontal gallery that parents children horizontally. Handles pagination based on the childrenPerPage prop.\n * @param props - HorizontalGalleryProps {@link @azure/communication-react#HorizontalGalleryProps}\n * @returns\n */\nexport const HorizontalGallery = (props: HorizontalGalleryProps): JSX.Element => {\n  const {\n    children,\n    childrenPerPage = DEFAULT_CHILDREN_PER_PAGE,\n    styles,\n    onFetchTilesToRender\n  } = props;\n  const ids = useIdentifiers();\n  const [page, setPage] = useState(0);\n  const numberOfChildren = React.Children.count(children);\n  const lastPage = Math.ceil(numberOfChildren / childrenPerPage) - 1;\n  const indexesArray: number[][] = useMemo(() => {\n    return bucketize([...Array(numberOfChildren).keys()], childrenPerPage);\n  }, [numberOfChildren, childrenPerPage]);\n  useEffect(() => {\n    if (onFetchTilesToRender && indexesArray) {\n      onFetchTilesToRender(indexesArray[page]);\n    }\n  }, [indexesArray, onFetchTilesToRender, page]);\n  const firstIndexOfCurrentPage = page * childrenPerPage;\n  const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;\n  const childrenOnCurrentPage = useMemo(() => {\n    return indexesArray[clippedPage].map(index => {\n      return React.Children.toArray(children)[index];\n    });\n  }, [indexesArray, clippedPage, children]);\n  const showButtons = numberOfChildren > childrenPerPage;\n  const disablePreviousButton = page === 0;\n  const disableNextButton = page === lastPage;\n  const childrenStyles = useMemo(() => {\n    return {\n      root: styles?.children\n    };\n  }, [styles?.children]);\n\n  // If children per page is 0 or less return empty element\n  if (childrenPerPage <= 0) {\n    return <></>;\n  }\n  return <Stack horizontal className={mergeStyles(rootStyle, props.styles?.root)}>\n      {showButtons && <HorizontalGalleryNavigationButton key=\"previous-nav-button\" icon={<Icon iconName=\"HorizontalGalleryLeftButton\" />} styles={styles?.previousButton} onClick={() => setPage(Math.max(0, Math.min(lastPage, page - 1)))} disabled={disablePreviousButton} identifier={ids.overflowGalleryLeftNavButton} />}\n      <Stack horizontal className={mergeStyles(childrenContainerStyle)}>\n        {childrenOnCurrentPage.map((child, i) => {\n        return <Stack.Item styles={childrenStyles} key={i} data-ui-id={ids.horizontalGalleryVideoTile}>\n              {child}\n            </Stack.Item>;\n      })}\n      </Stack>\n      {showButtons && <HorizontalGalleryNavigationButton key=\"next-nav-button\" icon={<Icon iconName=\"HorizontalGalleryRightButton\" />} styles={styles?.nextButton} onClick={() => setPage(Math.min(lastPage, page + 1))} disabled={disableNextButton} identifier={ids.overflowGalleryRightNavButton} />}\n    </Stack>;\n};\nconst HorizontalGalleryNavigationButton = (props: {\n  icon: JSX.Element;\n  styles: IStyle;\n  onClick?: () => void;\n  disabled?: boolean;\n  identifier?: string;\n}): JSX.Element => {\n  const theme = useTheme();\n  return <DefaultButton className={mergeStyles(leftRightButtonStyles(theme), props.styles)} onClick={props.onClick} disabled={props.disabled} data-ui-id={props.identifier}>\n      {props.icon}\n    </DefaultButton>;\n};"]}

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

@@ -21,7 +21,7 @@ declare type InputBoxComponentProps = {
     'data-ui-id'?: string;
     id?: string;
     textValue: string;
-    onChange: (event: FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string | undefined) => void;
+    onChange: (event?: FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => void;
     textFieldRef?: React.RefObject<ITextField>;
     inputClassName?: string;
     placeholderText?: string;

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

@@ -1,8 +1,8 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useRef } from 'react';
 import { Stack, TextField, mergeStyles, concatStyleSets, IconButton, TooltipHost } from '@fluentui/react';
-import { inputBoxStyle, inputBoxWrapperStyle, inputButtonStyle, textFieldStyle, textContainerStyle, inlineButtonsContainerStyle, newLineButtonsContainerStyle, inputBoxNewLineSpaceAffordance, inputButtonTooltipStyle } from './styles/InputBoxComponent.style';
+import { inputBoxStyle, inputBoxWrapperStyle, inputButtonStyle, textFieldStyle, textContainerStyle, newLineButtonsContainerStyle, inputBoxNewLineSpaceAffordance, inputButtonTooltipStyle, iconWrapperStyle } from './styles/InputBoxComponent.style';
 import { isDarkThemed } from '../theming/themeUtils';
 import { useTheme } from '../theming';
 /**
@@ -10,28 +10,55 @@ import { useTheme } from '../theming';
  */
 export const InputBoxComponent = (props) => {
     const { styles, id, 'data-ui-id': dataUiId, textValue, onChange, textFieldRef, placeholderText, onKeyDown, onEnterKeyDown, supportNewline, inputClassName, errorMessage, disabled, children } = props;
+    const inputBoxRef = useRef(null);
     const mergedRootStyle = mergeStyles(inputBoxWrapperStyle, styles === null || styles === void 0 ? void 0 : styles.root);
     const mergedTextFiledStyle = mergeStyles(inputBoxStyle, inputClassName, props.inlineChildren ? {} : inputBoxNewLineSpaceAffordance);
     const mergedTextContainerStyle = mergeStyles(textContainerStyle, styles === null || styles === void 0 ? void 0 : styles.textFieldContainer);
     const mergedTextFieldStyle = concatStyleSets(textFieldStyle, {
         fieldGroup: styles === null || styles === void 0 ? void 0 : styles.textField,
-        errorMessage: styles === null || styles === void 0 ? void 0 : styles.systemMessage
+        errorMessage: styles === null || styles === void 0 ? void 0 : styles.systemMessage,
+        suffix: {
+            backgroundColor: 'transparent',
+            // Remove empty space in the suffix area when adding newline-style buttons
+            display: props.inlineChildren ? 'flex' : 'contents',
+            padding: '0 0.25rem'
+        }
     });
-    const onTexFieldKeyDown = useCallback((ev) => {
+    const mergedChildrenStyle = mergeStyles(props.inlineChildren ? {} : newLineButtonsContainerStyle);
+    const onTextFieldKeyDown = useCallback((ev) => {
+        // shouldHandleOnMouseDownDuringSelect should be set to false after the last mouse down event.
+        // it shouldn't be updated in onMouseUp
+        // as onMouseUp can be triggered before or after onSelect event
+        // because its order depends on mouse events not selection.
         // Uses KeyCode 229 and which code 229 to determine if the press of the enter key is from a composition session or not (Safari only)
         if (ev.nativeEvent.isComposing || ev.nativeEvent.keyCode === 229 || ev.nativeEvent.which === 229) {
             return;
         }
+        if (ev.key === 'ArrowUp') {
+            ev.preventDefault();
+        }
+        else if (ev.key === 'ArrowDown') {
+            ev.preventDefault();
+        }
         if (ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline)) {
             ev.preventDefault();
+            // If we are looking up a mention, select the focused suggestion
             onEnterKeyDown && onEnterKeyDown();
         }
         onKeyDown && onKeyDown(ev);
     }, [onEnterKeyDown, onKeyDown, supportNewline]);
-    return (React.createElement(Stack, { className: mergedRootStyle },
+    const onRenderChildren = () => {
+        return React.createElement(Stack, { horizontal: true, className: mergedChildrenStyle }, children);
+    };
+    const getInputFieldTextValue = () => {
+        return textValue;
+    };
+    return React.createElement(Stack, { className: mergedRootStyle },
         React.createElement("div", { className: mergedTextContainerStyle },
-            React.createElement(TextField, { autoFocus: props.autoFocus === 'sendBoxTextField', "data-ui-id": dataUiId, multiline: true, autoAdjustHeight: true, multiple: false, resizable: false, componentRef: textFieldRef, id: id, inputClassName: mergedTextFiledStyle, placeholder: placeholderText, value: textValue, onChange: onChange, autoComplete: "off", onKeyDown: onTexFieldKeyDown, styles: mergedTextFieldStyle, disabled: disabled, errorMessage: errorMessage }),
-            React.createElement(Stack, { horizontal: true, className: mergeStyles(props.inlineChildren ? inlineButtonsContainerStyle : newLineButtonsContainerStyle) }, children))));
+            React.createElement(TextField, { autoFocus: props.autoFocus === 'sendBoxTextField', "data-ui-id": dataUiId, multiline: true, autoAdjustHeight: true, multiple: false, resizable: false, componentRef: textFieldRef, id: id, inputClassName: mergedTextFiledStyle, placeholder: placeholderText, value: getInputFieldTextValue(), onChange: (e, newValue) => {
+                    // Remove when switching to react 17+, currently needed because of https://legacy.reactjs.org/docs/legacy-event-pooling.html
+                    onChange(e, newValue);
+                }, autoComplete: "off", onKeyDown: onTextFieldKeyDown, styles: mergedTextFieldStyle, disabled: disabled, errorMessage: errorMessage, onRenderSuffix: onRenderChildren, elementRef: inputBoxRef })));
 };
 /**
  * @private
@@ -41,18 +68,27 @@ export const InputBoxButton = (props) => {
     const [isHover, setIsHover] = useState(false);
     const mergedButtonStyle = mergeStyles(inputButtonStyle, className);
     const theme = useTheme();
-    const calloutStyle = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };
+    const calloutStyle = {
+        root: {
+            padding: 0
+        },
+        calloutMain: {
+            padding: '0.5rem'
+        }
+    };
     // Place callout with no gap between it and the button.
     const calloutProps = {
         gapSpace: 0,
         styles: calloutStyle,
         backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''
     };
-    return (React.createElement(TooltipHost, { hostClassName: inputButtonTooltipStyle, content: tooltipContent, calloutProps: Object.assign({}, calloutProps) },
+    return React.createElement(TooltipHost, { hostClassName: inputButtonTooltipStyle, content: tooltipContent, calloutProps: Object.assign({}, calloutProps) },
         React.createElement(IconButton, { className: mergedButtonStyle, ariaLabel: ariaLabel, onClick: onClick, id: id, onMouseEnter: () => {
                 setIsHover(true);
             }, onMouseLeave: () => {
                 setIsHover(false);
-            }, onRenderIcon: () => onRenderIcon(isHover) })));
+            }, 
+            // VoiceOver fix: Avoid icon from stealing focus when IconButton is double-tapped to send message by wrapping with Stack with pointerEvents style to none
+            onRenderIcon: () => React.createElement(Stack, { className: iconWrapperStyle }, onRenderIcon(isHover)) }));
 };
 //# sourceMappingURL=InputBoxComponent.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InputBoxComponent.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/InputBoxComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useState, ReactNode, FormEvent, useCallback } from 'react';\nimport {\n  Stack,\n  TextField,\n  mergeStyles,\n  IStyle,\n  ITextField,\n  concatStyleSets,\n  IconButton,\n  TooltipHost,\n  ICalloutContentStyles\n} from '@fluentui/react';\nimport { BaseCustomStyles } from '../types';\nimport {\n  inputBoxStyle,\n  inputBoxWrapperStyle,\n  inputButtonStyle,\n  textFieldStyle,\n  textContainerStyle,\n  inlineButtonsContainerStyle,\n  newLineButtonsContainerStyle,\n  inputBoxNewLineSpaceAffordance,\n  inputButtonTooltipStyle\n} from './styles/InputBoxComponent.style';\n\nimport { isDarkThemed } from '../theming/themeUtils';\nimport { useTheme } from '../theming';\n\n/**\n * @private\n */\nexport interface InputBoxStylesProps extends BaseCustomStyles {\n  /** Styles for the text field. */\n  textField?: IStyle;\n\n  /** Styles for the system message; These styles will be ignored when a custom system message component is provided. */\n  systemMessage?: IStyle;\n\n  /** Styles for customizing the container of the text field */\n  textFieldContainer?: IStyle;\n}\n\ntype InputBoxComponentProps = {\n  children: ReactNode;\n  /**\n   * Inline child elements passed in. Setting to false will mean they are on a new line.\n   */\n  inlineChildren: boolean;\n  'data-ui-id'?: string;\n  id?: string;\n  textValue: string;\n  onChange: (event: FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string | undefined) => void;\n  textFieldRef?: React.RefObject<ITextField>;\n  inputClassName?: string;\n  placeholderText?: string;\n  supportNewline?: boolean;\n  maxLength: number;\n  onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;\n  onEnterKeyDown?: () => void;\n  errorMessage?: string | React.ReactElement;\n  disabled?: boolean;\n  styles?: InputBoxStylesProps;\n  autoFocus?: 'sendBoxTextField';\n};\n\n/**\n * @private\n */\nexport const InputBoxComponent = (props: InputBoxComponentProps): JSX.Element => {\n  const {\n    styles,\n    id,\n    'data-ui-id': dataUiId,\n    textValue,\n    onChange,\n    textFieldRef,\n    placeholderText,\n    onKeyDown,\n    onEnterKeyDown,\n    supportNewline,\n    inputClassName,\n    errorMessage,\n    disabled,\n    children\n  } = props;\n\n  const mergedRootStyle = mergeStyles(inputBoxWrapperStyle, styles?.root);\n  const mergedTextFiledStyle = mergeStyles(\n    inputBoxStyle,\n    inputClassName,\n    props.inlineChildren ? {} : inputBoxNewLineSpaceAffordance\n  );\n\n  const mergedTextContainerStyle = mergeStyles(textContainerStyle, styles?.textFieldContainer);\n  const mergedTextFieldStyle = concatStyleSets(textFieldStyle, {\n    fieldGroup: styles?.textField,\n    errorMessage: styles?.systemMessage\n  });\n\n  const onTexFieldKeyDown = useCallback(\n    (ev: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n      // Uses KeyCode 229 and which code 229 to determine if the press of the enter key is from a composition session or not (Safari only)\n      if (ev.nativeEvent.isComposing || ev.nativeEvent.keyCode === 229 || ev.nativeEvent.which === 229) {\n        return;\n      }\n      if (ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline)) {\n        ev.preventDefault();\n        onEnterKeyDown && onEnterKeyDown();\n      }\n      onKeyDown && onKeyDown(ev);\n    },\n    [onEnterKeyDown, onKeyDown, supportNewline]\n  );\n\n  return (\n    <Stack className={mergedRootStyle}>\n      <div className={mergedTextContainerStyle}>\n        <TextField\n          autoFocus={props.autoFocus === 'sendBoxTextField'}\n          data-ui-id={dataUiId}\n          multiline\n          autoAdjustHeight\n          multiple={false}\n          resizable={false}\n          componentRef={textFieldRef}\n          id={id}\n          inputClassName={mergedTextFiledStyle}\n          placeholder={placeholderText}\n          value={textValue}\n          onChange={onChange}\n          autoComplete=\"off\"\n          onKeyDown={onTexFieldKeyDown}\n          styles={mergedTextFieldStyle}\n          disabled={disabled}\n          errorMessage={errorMessage}\n        />\n        <Stack\n          horizontal\n          className={mergeStyles(props.inlineChildren ? inlineButtonsContainerStyle : newLineButtonsContainerStyle)}\n        >\n          {children}\n        </Stack>\n      </div>\n    </Stack>\n  );\n};\n\n/**\n * Props for displaying a send button besides the text input area.\n *\n * @private\n */\nexport type InputBoxButtonProps = {\n  onRenderIcon: (isHover: boolean) => JSX.Element;\n  onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n  className?: string;\n  id?: string;\n  ariaLabel?: string;\n  tooltipContent?: string;\n};\n\n/**\n * @private\n */\nexport const InputBoxButton = (props: InputBoxButtonProps): JSX.Element => {\n  const { onRenderIcon, onClick, ariaLabel, className, id, tooltipContent } = props;\n  const [isHover, setIsHover] = useState(false);\n  const mergedButtonStyle = mergeStyles(inputButtonStyle, className);\n\n  const theme = useTheme();\n  const calloutStyle: Partial<ICalloutContentStyles> = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };\n\n  // Place callout with no gap between it and the button.\n  const calloutProps = {\n    gapSpace: 0,\n    styles: calloutStyle,\n    backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n  };\n  return (\n    <TooltipHost hostClassName={inputButtonTooltipStyle} content={tooltipContent} calloutProps={{ ...calloutProps }}>\n      <IconButton\n        className={mergedButtonStyle}\n        ariaLabel={ariaLabel}\n        onClick={onClick}\n        id={id}\n        onMouseEnter={() => {\n          setIsHover(true);\n        }}\n        onMouseLeave={() => {\n          setIsHover(false);\n        }}\n        onRenderIcon={() => onRenderIcon(isHover)}\n      />\n    </TooltipHost>\n  );\n};\n"]}
+{"version":3,"file":"InputBoxComponent.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/InputBoxComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useState, ReactNode, FormEvent, useCallback, useRef } from 'react';\nimport { Stack, TextField, mergeStyles, IStyle, ITextField, concatStyleSets, IconButton, TooltipHost, ICalloutContentStyles } from '@fluentui/react';\nimport { BaseCustomStyles } from '../types';\nimport { inputBoxStyle, inputBoxWrapperStyle, inputButtonStyle, textFieldStyle, textContainerStyle, newLineButtonsContainerStyle, inputBoxNewLineSpaceAffordance, inputButtonTooltipStyle, iconWrapperStyle } from './styles/InputBoxComponent.style';\nimport { isDarkThemed } from '../theming/themeUtils';\nimport { useTheme } from '../theming';\n/**\n * @private\n */\nexport interface InputBoxStylesProps extends BaseCustomStyles {\n  /** Styles for the text field. */\n  textField?: IStyle;\n\n  /** Styles for the system message; These styles will be ignored when a custom system message component is provided. */\n  systemMessage?: IStyle;\n\n  /** Styles for customizing the container of the text field */\n  textFieldContainer?: IStyle;\n}\ntype InputBoxComponentProps = {\n  children: ReactNode;\n  /**\n   * Inline child elements passed in. Setting to false will mean they are on a new line.\n   */\n  inlineChildren: boolean;\n  'data-ui-id'?: string;\n  id?: string;\n  textValue: string; // This could be plain text or HTML.\n  onChange: (event?: FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => void;\n  textFieldRef?: React.RefObject<ITextField>;\n  inputClassName?: string;\n  placeholderText?: string;\n  supportNewline?: boolean;\n  maxLength: number;\n  onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;\n  onEnterKeyDown?: () => void;\n  errorMessage?: string | React.ReactElement;\n  disabled?: boolean;\n  styles?: InputBoxStylesProps;\n  autoFocus?: 'sendBoxTextField';\n};\n\n/**\n * @private\n */\nexport const InputBoxComponent = (props: InputBoxComponentProps): JSX.Element => {\n  const {\n    styles,\n    id,\n    'data-ui-id': dataUiId,\n    textValue,\n    onChange,\n    textFieldRef,\n    placeholderText,\n    onKeyDown,\n    onEnterKeyDown,\n    supportNewline,\n    inputClassName,\n    errorMessage,\n    disabled,\n    children\n  } = props;\n  const inputBoxRef = useRef<HTMLDivElement>(null);\n  const mergedRootStyle = mergeStyles(inputBoxWrapperStyle, styles?.root);\n  const mergedTextFiledStyle = mergeStyles(inputBoxStyle, inputClassName, props.inlineChildren ? {} : inputBoxNewLineSpaceAffordance);\n  const mergedTextContainerStyle = mergeStyles(textContainerStyle, styles?.textFieldContainer);\n  const mergedTextFieldStyle = concatStyleSets(textFieldStyle, {\n    fieldGroup: styles?.textField,\n    errorMessage: styles?.systemMessage,\n    suffix: {\n      backgroundColor: 'transparent',\n      // Remove empty space in the suffix area when adding newline-style buttons\n      display: props.inlineChildren ? 'flex' : 'contents',\n      padding: '0 0.25rem'\n    }\n  });\n  const mergedChildrenStyle = mergeStyles(props.inlineChildren ? {} : newLineButtonsContainerStyle);\n  const onTextFieldKeyDown = useCallback((ev: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n    // shouldHandleOnMouseDownDuringSelect should be set to false after the last mouse down event.\n    // it shouldn't be updated in onMouseUp\n    // as onMouseUp can be triggered before or after onSelect event\n    // because its order depends on mouse events not selection.\n    // Uses KeyCode 229 and which code 229 to determine if the press of the enter key is from a composition session or not (Safari only)\n    if (ev.nativeEvent.isComposing || ev.nativeEvent.keyCode === 229 || ev.nativeEvent.which === 229) {\n      return;\n    }\n    if (ev.key === 'ArrowUp') {\n      ev.preventDefault();\n    } else if (ev.key === 'ArrowDown') {\n      ev.preventDefault();\n    }\n    if (ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline)) {\n      ev.preventDefault();\n\n      // If we are looking up a mention, select the focused suggestion\n      onEnterKeyDown && onEnterKeyDown();\n    }\n    onKeyDown && onKeyDown(ev);\n  }, [onEnterKeyDown, onKeyDown, supportNewline]);\n  const onRenderChildren = (): JSX.Element => {\n    return <Stack horizontal className={mergedChildrenStyle}>\n        {children}\n      </Stack>;\n  };\n  const getInputFieldTextValue = (): string => {\n    return textValue;\n  };\n  return <Stack className={mergedRootStyle}>\n      <div className={mergedTextContainerStyle}>\n        {}\n        <TextField autoFocus={props.autoFocus === 'sendBoxTextField'} data-ui-id={dataUiId} multiline autoAdjustHeight multiple={false} resizable={false} componentRef={textFieldRef} id={id} inputClassName={mergedTextFiledStyle} placeholder={placeholderText} value={getInputFieldTextValue()} onChange={(e, newValue) => {\n        // Remove when switching to react 17+, currently needed because of https://legacy.reactjs.org/docs/legacy-event-pooling.html\n        onChange(e, newValue);\n      }} autoComplete=\"off\" onKeyDown={onTextFieldKeyDown} styles={mergedTextFieldStyle} disabled={disabled} errorMessage={errorMessage} onRenderSuffix={onRenderChildren} elementRef={inputBoxRef} />\n      </div>\n    </Stack>;\n};\n\n/**\n * Props for displaying a send button besides the text input area.\n *\n * @private\n */\nexport type InputBoxButtonProps = {\n  onRenderIcon: (isHover: boolean) => JSX.Element;\n  onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n  className?: string;\n  id?: string;\n  ariaLabel?: string;\n  tooltipContent?: string;\n};\n\n/**\n * @private\n */\nexport const InputBoxButton = (props: InputBoxButtonProps): JSX.Element => {\n  const {\n    onRenderIcon,\n    onClick,\n    ariaLabel,\n    className,\n    id,\n    tooltipContent\n  } = props;\n  const [isHover, setIsHover] = useState(false);\n  const mergedButtonStyle = mergeStyles(inputButtonStyle, className);\n  const theme = useTheme();\n  const calloutStyle: Partial<ICalloutContentStyles> = {\n    root: {\n      padding: 0\n    },\n    calloutMain: {\n      padding: '0.5rem'\n    }\n  };\n\n  // Place callout with no gap between it and the button.\n  const calloutProps = {\n    gapSpace: 0,\n    styles: calloutStyle,\n    backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n  };\n  return <TooltipHost hostClassName={inputButtonTooltipStyle} content={tooltipContent} calloutProps={{\n    ...calloutProps\n  }}>\n      <IconButton className={mergedButtonStyle} ariaLabel={ariaLabel} onClick={onClick} id={id} onMouseEnter={() => {\n      setIsHover(true);\n    }} onMouseLeave={() => {\n      setIsHover(false);\n    }}\n    // VoiceOver fix: Avoid icon from stealing focus when IconButton is double-tapped to send message by wrapping with Stack with pointerEvents style to none\n    onRenderIcon={() => <Stack className={iconWrapperStyle}>{onRenderIcon(isHover)}</Stack>} />\n    </TooltipHost>;\n};"]}

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

@@ -10,14 +10,16 @@ import { localVideoCameraCycleButtonStyles } from './styles/VideoGallery.styles'
 export const LocalVideoCameraCycleButton = (props) => {
     const { cameras, selectedCamera, onSelectCamera, label, ariaDescription } = props;
     const theme = useTheme();
-    return (React.createElement(IconButton, { "data-ui-id": 'local-camera-switcher-button', styles: localVideoCameraCycleButtonStyles(theme), iconProps: { iconName: 'LocalCameraSwitch' }, ariaLabel: label, ariaDescription: ariaDescription, "aria-live": 'polite', onClick: () => {
+    return React.createElement(IconButton, { "data-ui-id": 'local-camera-switcher-button', styles: localVideoCameraCycleButtonStyles(theme), iconProps: {
+            iconName: 'LocalCameraSwitch'
+        }, ariaLabel: label, ariaDescription: ariaDescription, "aria-live": 'polite', onClick: () => {
             if (cameras && cameras.length > 1 && selectedCamera !== undefined) {
-                const index = cameras.findIndex((camera) => selectedCamera.id === camera.id);
+                const index = cameras.findIndex(camera => selectedCamera.id === camera.id);
                 const newCamera = cameras[(index + 1) % cameras.length];
                 if (onSelectCamera !== undefined) {
                     onSelectCamera(newCamera);
                 }
             }
-        } }));
+        } });
 };
 //# sourceMappingURL=LocalVideoCameraButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LocalVideoCameraButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/LocalVideoCameraButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,iCAAiC,EAAE,MAAM,8BAA8B,CAAC;AAkBjF;;;GAGG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,KAAuC,EAAe,EAAE;IAClG,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,KAAK,EAAE,eAAe,EAAE,GAAG,KAAK,CAAC;IAClF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,OAAO,CACL,oBAAC,UAAU,kBACG,8BAA8B,EAC1C,MAAM,EAAE,iCAAiC,CAAC,KAAK,CAAC,EAChD,SAAS,EAAE,EAAE,QAAQ,EAAE,mBAAmB,EAAE,EAC5C,SAAS,EAAE,KAAK,EAChB,eAAe,EAAE,eAAe,eACrB,QAAQ,EACnB,OAAO,EAAE,GAAG,EAAE;YACZ,IAAI,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,cAAc,KAAK,SAAS,EAAE;gBACjE,MAAM,KAAK,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,cAAc,CAAC,EAAE,KAAK,MAAM,CAAC,EAAE,CAAC,CAAC;gBAC7E,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;gBACxD,IAAI,cAAc,KAAK,SAAS,EAAE;oBAChC,cAAc,CAAC,SAAS,CAAC,CAAC;iBAC3B;aACF;QACH,CAAC,GACD,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IconButton, useTheme } from '@fluentui/react';\nimport React from 'react';\nimport { OptionsDevice } from './DevicesButton';\nimport { localVideoCameraCycleButtonStyles } from './styles/VideoGallery.styles';\n\n/**\n * @public\n */\nexport interface LocalVideoCameraCycleButtonProps {\n  /** Array of cameras available to the user. */\n  cameras?: OptionsDevice[];\n  /** Currently selected camera in the local video stream. */\n  selectedCamera?: OptionsDevice;\n  /** callback function to change video feed. */\n  onSelectCamera?: (device: OptionsDevice) => Promise<void>;\n  /** label for local video camera switcher */\n  label?: string;\n  /** description for local video camera switcher */\n  ariaDescription?: string;\n}\n\n/**\n * local video tile camera cycle button - for use on mobile screens only.\n * @internal\n */\nexport const LocalVideoCameraCycleButton = (props: LocalVideoCameraCycleButtonProps): JSX.Element => {\n  const { cameras, selectedCamera, onSelectCamera, label, ariaDescription } = props;\n  const theme = useTheme();\n\n  return (\n    <IconButton\n      data-ui-id={'local-camera-switcher-button'}\n      styles={localVideoCameraCycleButtonStyles(theme)}\n      iconProps={{ iconName: 'LocalCameraSwitch' }}\n      ariaLabel={label}\n      ariaDescription={ariaDescription}\n      aria-live={'polite'}\n      onClick={() => {\n        if (cameras && cameras.length > 1 && selectedCamera !== undefined) {\n          const index = cameras.findIndex((camera) => selectedCamera.id === camera.id);\n          const newCamera = cameras[(index + 1) % cameras.length];\n          if (onSelectCamera !== undefined) {\n            onSelectCamera(newCamera);\n          }\n        }\n      }}\n    />\n  );\n};\n"]}
+{"version":3,"file":"LocalVideoCameraButton.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/LocalVideoCameraButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,iCAAiC,EAAE,MAAM,8BAA8B,CAAC;AAkBjF;;;GAGG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,KAAuC,EAAe,EAAE;IAClG,MAAM,EACJ,OAAO,EACP,cAAc,EACd,cAAc,EACd,KAAK,EACL,eAAe,EAChB,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,OAAO,oBAAC,UAAU,kBAAa,8BAA8B,EAAE,MAAM,EAAE,iCAAiC,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE;YAC1H,QAAQ,EAAE,mBAAmB;SAC9B,EAAE,SAAS,EAAE,KAAK,EAAE,eAAe,EAAE,eAAe,eAAa,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE;YACxF,IAAI,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,cAAc,KAAK,SAAS,EAAE;gBACjE,MAAM,KAAK,GAAG,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,cAAc,CAAC,EAAE,KAAK,MAAM,CAAC,EAAE,CAAC,CAAC;gBAC3E,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;gBACxD,IAAI,cAAc,KAAK,SAAS,EAAE;oBAChC,cAAc,CAAC,SAAS,CAAC,CAAC;iBAC3B;aACF;QACH,CAAC,GAAI,CAAC;AACR,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IconButton, useTheme } from '@fluentui/react';\nimport React from 'react';\nimport { OptionsDevice } from './DevicesButton';\nimport { localVideoCameraCycleButtonStyles } from './styles/VideoGallery.styles';\n\n/**\n * @public\n */\nexport interface LocalVideoCameraCycleButtonProps {\n  /** Array of cameras available to the user. */\n  cameras?: OptionsDevice[];\n  /** Currently selected camera in the local video stream. */\n  selectedCamera?: OptionsDevice;\n  /** callback function to change video feed. */\n  onSelectCamera?: (device: OptionsDevice) => Promise<void>;\n  /** label for local video camera switcher */\n  label?: string;\n  /** description for local video camera switcher */\n  ariaDescription?: string;\n}\n\n/**\n * local video tile camera cycle button - for use on mobile screens only.\n * @internal\n */\nexport const LocalVideoCameraCycleButton = (props: LocalVideoCameraCycleButtonProps): JSX.Element => {\n  const {\n    cameras,\n    selectedCamera,\n    onSelectCamera,\n    label,\n    ariaDescription\n  } = props;\n  const theme = useTheme();\n  return <IconButton data-ui-id={'local-camera-switcher-button'} styles={localVideoCameraCycleButtonStyles(theme)} iconProps={{\n    iconName: 'LocalCameraSwitch'\n  }} ariaLabel={label} ariaDescription={ariaDescription} aria-live={'polite'} onClick={() => {\n    if (cameras && cameras.length > 1 && selectedCamera !== undefined) {\n      const index = cameras.findIndex(camera => selectedCamera.id === camera.id);\n      const newCamera = cameras[(index + 1) % cameras.length];\n      if (onSelectCamera !== undefined) {\n        onSelectCamera(newCamera);\n      }\n    }\n  }} />;\n};"]}

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

@@ -21,14 +21,7 @@ export const _LocalVideoTile = React.memo((props) => {
         onDisposeLocalStreamView,
         renderElementExists: !!renderElement,
         scalingMode: localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.scalingMode
-    }), [
-        isAvailable,
-        localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.isMirrored,
-        localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.scalingMode,
-        onCreateLocalStreamView,
-        onDisposeLocalStreamView,
-        renderElement
-    ]);
+    }), [isAvailable, localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.isMirrored, localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.scalingMode, onCreateLocalStreamView, onDisposeLocalStreamView, renderElement]);
     // Handle creating, destroying and updating the video stream as necessary
     useLocalVideoStreamLifecycleMaintainer(localVideoStreamProps);
     const renderVideoStreamElement = useMemo(() => {
@@ -38,28 +31,17 @@ export const _LocalVideoTile = React.memo((props) => {
             // Returning `undefined` results in the placeholder with avatar being shown
             return undefined;
         }
-        return (React.createElement(React.Fragment, null,
+        return React.createElement(React.Fragment, null,
             React.createElement(FloatingLocalCameraCycleButton, { showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview !== null && showCameraSwitcherInLocalPreview !== void 0 ? showCameraSwitcherInLocalPreview : false, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: localVideoCameraSwitcherLabel, localVideoSelectedDescription: localVideoSelectedDescription }),
-            React.createElement(StreamMedia, { videoStreamElement: renderElement, isMirrored: true })));
-    }, [
-        localVideoCameraCycleButtonProps,
-        localVideoCameraSwitcherLabel,
-        localVideoSelectedDescription,
-        renderElement,
-        showCameraSwitcherInLocalPreview
-    ]);
-    return (React.createElement(VideoTile, { key: userId !== null && userId !== void 0 ? userId : 'local-video-tile', userId: userId, renderElement: renderVideoStreamElement, showLabel: showLabel, displayName: displayName, initialsName: initialsName, styles: styles, onRenderPlaceholder: onRenderAvatar, isMuted: isMuted, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize }));
+            React.createElement(StreamMedia, { videoStreamElement: renderElement, isMirrored: true }));
+    }, [localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription, renderElement, showCameraSwitcherInLocalPreview]);
+    return React.createElement(VideoTile, { key: userId !== null && userId !== void 0 ? userId : 'local-video-tile', userId: userId, renderElement: renderVideoStreamElement, showLabel: showLabel, displayName: displayName, initialsName: initialsName, styles: styles, onRenderPlaceholder: onRenderAvatar, isMuted: isMuted, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize });
 });
 const FloatingLocalCameraCycleButton = (props) => {
     const { showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription } = props;
-    const ariaDescription = (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.selectedCamera) &&
-        localVideoSelectedDescription &&
-        _formatString(localVideoSelectedDescription, {
-            cameraName: localVideoCameraCycleButtonProps.selectedCamera.name
-        });
-    return (React.createElement(Stack, { horizontalAlign: "end" }, showCameraSwitcherInLocalPreview &&
-        (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.cameras) !== undefined &&
-        (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.selectedCamera) !== undefined &&
-        (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.onSelectCamera) !== undefined && (React.createElement(LocalVideoCameraCycleButton, { cameras: localVideoCameraCycleButtonProps.cameras, selectedCamera: localVideoCameraCycleButtonProps.selectedCamera, onSelectCamera: localVideoCameraCycleButtonProps.onSelectCamera, label: localVideoCameraSwitcherLabel, ariaDescription: ariaDescription }))));
+    const ariaDescription = (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.selectedCamera) && localVideoSelectedDescription && _formatString(localVideoSelectedDescription, {
+        cameraName: localVideoCameraCycleButtonProps.selectedCamera.name
+    });
+    return React.createElement(Stack, { horizontalAlign: "end" }, showCameraSwitcherInLocalPreview && (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.cameras) !== undefined && (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.selectedCamera) !== undefined && (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.onSelectCamera) !== undefined && React.createElement(LocalVideoCameraCycleButton, { cameras: localVideoCameraCycleButtonProps.cameras, selectedCamera: localVideoCameraCycleButtonProps.selectedCamera, onSelectCamera: localVideoCameraCycleButtonProps.onSelectCamera, label: localVideoCameraSwitcherLabel, ariaDescription: ariaDescription }));
 };
 //# sourceMappingURL=LocalVideoTile.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LocalVideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/LocalVideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { Stack } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useMemo } from 'react';\nimport { OnRenderAvatarCallback, VideoStreamOptions, CreateVideoStreamViewResult } from '../types';\nimport { LocalVideoCameraCycleButton, LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\nimport { StreamMedia } from './StreamMedia';\nimport {\n  useLocalVideoStreamLifecycleMaintainer,\n  LocalVideoStreamLifecycleMaintainerProps\n} from './VideoGallery/useVideoStreamLifecycleMaintainer';\nimport { VideoTile, VideoTileStylesProps } from './VideoTile';\n\n/**\n * A memoized version of VideoTile for rendering local participant.\n *\n * @internal\n */\nexport const _LocalVideoTile = React.memo(\n  (props: {\n    userId?: string;\n    onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n    onDisposeLocalStreamView?: () => void;\n    isAvailable?: boolean;\n    isMuted?: boolean;\n    renderElement?: HTMLElement;\n    displayName?: string;\n    initialsName?: string;\n    localVideoViewOptions?: VideoStreamOptions;\n    onRenderAvatar?: OnRenderAvatarCallback;\n    showLabel: boolean;\n    showMuteIndicator?: boolean;\n    showCameraSwitcherInLocalPreview?: boolean;\n    localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n    localVideoCameraSwitcherLabel?: string;\n    localVideoSelectedDescription?: string;\n    styles?: VideoTileStylesProps;\n    personaMinSize?: number;\n  }) => {\n    const {\n      isAvailable,\n      isMuted,\n      onCreateLocalStreamView,\n      onDisposeLocalStreamView,\n      localVideoViewOptions,\n      renderElement,\n      userId,\n      showLabel,\n      displayName,\n      initialsName,\n      onRenderAvatar,\n      showMuteIndicator,\n      styles,\n      showCameraSwitcherInLocalPreview,\n      localVideoCameraCycleButtonProps,\n      localVideoCameraSwitcherLabel,\n      localVideoSelectedDescription\n    } = props;\n\n    const localVideoStreamProps: LocalVideoStreamLifecycleMaintainerProps = useMemo(\n      () => ({\n        isMirrored: localVideoViewOptions?.isMirrored,\n        isStreamAvailable: isAvailable,\n        onCreateLocalStreamView,\n        onDisposeLocalStreamView,\n        renderElementExists: !!renderElement,\n        scalingMode: localVideoViewOptions?.scalingMode\n      }),\n      [\n        isAvailable,\n        localVideoViewOptions?.isMirrored,\n        localVideoViewOptions?.scalingMode,\n        onCreateLocalStreamView,\n        onDisposeLocalStreamView,\n        renderElement\n      ]\n    );\n\n    // Handle creating, destroying and updating the video stream as necessary\n    useLocalVideoStreamLifecycleMaintainer(localVideoStreamProps);\n\n    const renderVideoStreamElement = useMemo(() => {\n      // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which\n      // implies that, after their threshold, all streams have no child (blank video)\n      if (!renderElement || !renderElement.childElementCount) {\n        // Returning `undefined` results in the placeholder with avatar being shown\n        return undefined;\n      }\n\n      return (\n        <>\n          <FloatingLocalCameraCycleButton\n            showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview ?? false}\n            localVideoCameraCycleButtonProps={localVideoCameraCycleButtonProps}\n            localVideoCameraSwitcherLabel={localVideoCameraSwitcherLabel}\n            localVideoSelectedDescription={localVideoSelectedDescription}\n          />\n          <StreamMedia videoStreamElement={renderElement} isMirrored={true} />\n        </>\n      );\n    }, [\n      localVideoCameraCycleButtonProps,\n      localVideoCameraSwitcherLabel,\n      localVideoSelectedDescription,\n      renderElement,\n      showCameraSwitcherInLocalPreview\n    ]);\n\n    return (\n      <VideoTile\n        key={userId ?? 'local-video-tile'}\n        userId={userId}\n        renderElement={renderVideoStreamElement}\n        showLabel={showLabel}\n        displayName={displayName}\n        initialsName={initialsName}\n        styles={styles}\n        onRenderPlaceholder={onRenderAvatar}\n        isMuted={isMuted}\n        showMuteIndicator={showMuteIndicator}\n        personaMinSize={props.personaMinSize}\n      />\n    );\n  }\n);\n\nconst FloatingLocalCameraCycleButton = (props: {\n  showCameraSwitcherInLocalPreview: boolean;\n  localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n  localVideoCameraSwitcherLabel?: string;\n  localVideoSelectedDescription?: string;\n}): JSX.Element => {\n  const {\n    showCameraSwitcherInLocalPreview,\n    localVideoCameraCycleButtonProps,\n    localVideoCameraSwitcherLabel,\n    localVideoSelectedDescription\n  } = props;\n  const ariaDescription =\n    localVideoCameraCycleButtonProps?.selectedCamera &&\n    localVideoSelectedDescription &&\n    _formatString(localVideoSelectedDescription, {\n      cameraName: localVideoCameraCycleButtonProps.selectedCamera.name\n    });\n  return (\n    <Stack horizontalAlign=\"end\">\n      {showCameraSwitcherInLocalPreview &&\n        localVideoCameraCycleButtonProps?.cameras !== undefined &&\n        localVideoCameraCycleButtonProps?.selectedCamera !== undefined &&\n        localVideoCameraCycleButtonProps?.onSelectCamera !== undefined && (\n          <LocalVideoCameraCycleButton\n            cameras={localVideoCameraCycleButtonProps.cameras}\n            selectedCamera={localVideoCameraCycleButtonProps.selectedCamera}\n            onSelectCamera={localVideoCameraCycleButtonProps.onSelectCamera}\n            label={localVideoCameraSwitcherLabel}\n            ariaDescription={ariaDescription}\n          />\n        )}\n    </Stack>\n  );\n};\n\"../../../acs-ui-common/src\""]}
+{"version":3,"file":"LocalVideoTile.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/LocalVideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { Stack } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useMemo } from 'react';\nimport { OnRenderAvatarCallback, VideoStreamOptions, CreateVideoStreamViewResult } from '../types';\nimport { LocalVideoCameraCycleButton, LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\nimport { StreamMedia } from './StreamMedia';\nimport { useLocalVideoStreamLifecycleMaintainer, LocalVideoStreamLifecycleMaintainerProps } from './VideoGallery/useVideoStreamLifecycleMaintainer';\nimport { VideoTile, VideoTileStylesProps } from './VideoTile';\n\n/**\n * A memoized version of VideoTile for rendering local participant.\n *\n * @internal\n */\nexport const _LocalVideoTile = React.memo((props: {\n  userId?: string;\n  onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  onDisposeLocalStreamView?: () => void;\n  isAvailable?: boolean;\n  isMuted?: boolean;\n  renderElement?: HTMLElement;\n  displayName?: string;\n  initialsName?: string;\n  localVideoViewOptions?: VideoStreamOptions;\n  onRenderAvatar?: OnRenderAvatarCallback;\n  showLabel: boolean;\n  showMuteIndicator?: boolean;\n  showCameraSwitcherInLocalPreview?: boolean;\n  localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n  localVideoCameraSwitcherLabel?: string;\n  localVideoSelectedDescription?: string;\n  styles?: VideoTileStylesProps;\n  personaMinSize?: number;\n}) => {\n  const {\n    isAvailable,\n    isMuted,\n    onCreateLocalStreamView,\n    onDisposeLocalStreamView,\n    localVideoViewOptions,\n    renderElement,\n    userId,\n    showLabel,\n    displayName,\n    initialsName,\n    onRenderAvatar,\n    showMuteIndicator,\n    styles,\n    showCameraSwitcherInLocalPreview,\n    localVideoCameraCycleButtonProps,\n    localVideoCameraSwitcherLabel,\n    localVideoSelectedDescription\n  } = props;\n  const localVideoStreamProps: LocalVideoStreamLifecycleMaintainerProps = useMemo(() => ({\n    isMirrored: localVideoViewOptions?.isMirrored,\n    isStreamAvailable: isAvailable,\n    onCreateLocalStreamView,\n    onDisposeLocalStreamView,\n    renderElementExists: !!renderElement,\n    scalingMode: localVideoViewOptions?.scalingMode\n  }), [isAvailable, localVideoViewOptions?.isMirrored, localVideoViewOptions?.scalingMode, onCreateLocalStreamView, onDisposeLocalStreamView, renderElement]);\n\n  // Handle creating, destroying and updating the video stream as necessary\n  useLocalVideoStreamLifecycleMaintainer(localVideoStreamProps);\n  const renderVideoStreamElement = useMemo(() => {\n    // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which\n    // implies that, after their threshold, all streams have no child (blank video)\n    if (!renderElement || !renderElement.childElementCount) {\n      // Returning `undefined` results in the placeholder with avatar being shown\n      return undefined;\n    }\n    return <>\n          <FloatingLocalCameraCycleButton showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview ?? false} localVideoCameraCycleButtonProps={localVideoCameraCycleButtonProps} localVideoCameraSwitcherLabel={localVideoCameraSwitcherLabel} localVideoSelectedDescription={localVideoSelectedDescription} />\n          <StreamMedia videoStreamElement={renderElement} isMirrored={true} />\n        </>;\n  }, [localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription, renderElement, showCameraSwitcherInLocalPreview]);\n  return <VideoTile key={userId ?? 'local-video-tile'} userId={userId} renderElement={renderVideoStreamElement} showLabel={showLabel} displayName={displayName} initialsName={initialsName} styles={styles} onRenderPlaceholder={onRenderAvatar} isMuted={isMuted} showMuteIndicator={showMuteIndicator} personaMinSize={props.personaMinSize} />;\n});\nconst FloatingLocalCameraCycleButton = (props: {\n  showCameraSwitcherInLocalPreview: boolean;\n  localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n  localVideoCameraSwitcherLabel?: string;\n  localVideoSelectedDescription?: string;\n}): JSX.Element => {\n  const {\n    showCameraSwitcherInLocalPreview,\n    localVideoCameraCycleButtonProps,\n    localVideoCameraSwitcherLabel,\n    localVideoSelectedDescription\n  } = props;\n  const ariaDescription = localVideoCameraCycleButtonProps?.selectedCamera && localVideoSelectedDescription && _formatString(localVideoSelectedDescription, {\n    cameraName: localVideoCameraCycleButtonProps.selectedCamera.name\n  });\n  return <Stack horizontalAlign=\"end\">\n      {showCameraSwitcherInLocalPreview && localVideoCameraCycleButtonProps?.cameras !== undefined && localVideoCameraCycleButtonProps?.selectedCamera !== undefined && localVideoCameraCycleButtonProps?.onSelectCamera !== undefined && <LocalVideoCameraCycleButton cameras={localVideoCameraCycleButtonProps.cameras} selectedCamera={localVideoCameraCycleButtonProps.selectedCamera} onSelectCamera={localVideoCameraCycleButtonProps.onSelectCamera} label={localVideoCameraSwitcherLabel} ariaDescription={ariaDescription} />}\n    </Stack>;\n};\"../../../acs-ui-common/src\""]}

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

@@ -3,11 +3,11 @@
 import { Icon, mergeStyles, TooltipHost } from '@fluentui/react';
 import { _formatString } from "../../../acs-ui-common/src";
 import React, { useState } from 'react';
-import { LiveMessage } from 'react-aria-live';
 import { useLocale } from '../localization';
 import { useTheme } from '../theming';
 import { isDarkThemed } from '../theming/themeUtils';
 import { MessageStatusIndicatorErrorIconStyle, MessageStatusIndicatorIconStyle } from './styles/MessageStatusIndicator.styles';
+import LiveMessage from './Announcer/LiveMessage';
 /**
  * Component to display the status of a sent message.
  *
@@ -21,7 +21,14 @@ export const MessageStatusIndicator = (props) => {
     const [isTooltipToggled, setIsTooltipToggled] = useState(false);
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
     const theme = useTheme();
-    const calloutStyle = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };
+    const calloutStyle = {
+        root: {
+            padding: 0
+        },
+        calloutMain: {
+            padding: '0.5rem'
+        }
+    };
     // Place callout with no gap between it and the button.
     const calloutProps = {
         gapSpace: 0,
@@ -30,41 +37,43 @@ export const MessageStatusIndicator = (props) => {
     };
     switch (status) {
         case 'failed':
-            return (React.createElement(TooltipHost, { content: strings.failedToSendTooltipText, "data-ui-id": "chat-composite-message-tooltip", calloutProps: Object.assign({}, calloutProps), styles: hostStyles },
-                strings.failedToSendAriaLabel && (
-                // live message is used here and in the following tooltips so that aria labels are announced on mobile
-                React.createElement(LiveMessage, { message: strings.failedToSendAriaLabel, "aria-live": "polite" })),
-                React.createElement(Icon, { role: "status", "data-ui-id": "chat-composite-message-status-icon", "aria-label": strings.failedToSendAriaLabel, iconName: "MessageFailed", className: mergeStyles(MessageStatusIndicatorErrorIconStyle, { color: theme.palette.redDark }, styles === null || styles === void 0 ? void 0 : styles.root) })));
+            return React.createElement(TooltipHost, { content: strings.failedToSendTooltipText, "data-ui-id": "chat-composite-message-tooltip", calloutProps: Object.assign({}, calloutProps), styles: hostStyles },
+                strings.failedToSendAriaLabel &&
+                    // live message is used here and in the following tooltips so that aria labels are announced on mobile
+                    React.createElement(LiveMessage, { message: strings.failedToSendAriaLabel, ariaLive: "polite" }),
+                React.createElement(Icon, { role: "status", "data-ui-id": "chat-composite-message-status-icon", "aria-label": strings.failedToSendAriaLabel, iconName: "MessageFailed", className: mergeStyles(MessageStatusIndicatorErrorIconStyle, {
+                        color: theme.palette.redDark
+                    }, styles === null || styles === void 0 ? void 0 : styles.root) }));
         case 'sending':
-            return (React.createElement(TooltipHost, { content: strings.sendingTooltipText, "data-ui-id": "chat-composite-message-tooltip", calloutProps: Object.assign({}, calloutProps), styles: hostStyles },
-                strings.sendingAriaLabel && React.createElement(LiveMessage, { message: strings.sendingAriaLabel, "aria-live": "polite" }),
-                React.createElement(Icon, { role: "status", "data-ui-id": "chat-composite-message-status-icon", "aria-label": strings.sendingAriaLabel, iconName: "MessageSending", className: mergeStyles(MessageStatusIndicatorIconStyle, { color: theme.palette.themePrimary }, styles === null || styles === void 0 ? void 0 : styles.root) })));
+            return React.createElement(TooltipHost, { content: strings.sendingTooltipText, "data-ui-id": "chat-composite-message-tooltip", calloutProps: Object.assign({}, calloutProps), styles: hostStyles },
+                strings.sendingAriaLabel && React.createElement(LiveMessage, { message: strings.sendingAriaLabel, ariaLive: "polite" }),
+                React.createElement(Icon, { role: "status", "data-ui-id": "chat-composite-message-status-icon", "aria-label": strings.sendingAriaLabel, iconName: "MessageSending", className: mergeStyles(MessageStatusIndicatorIconStyle, {
+                        color: theme.palette.themePrimary
+                    }, styles === null || styles === void 0 ? void 0 : styles.root) }));
         case 'seen':
-            return (React.createElement(TooltipHost, { calloutProps: Object.assign({}, calloutProps), "data-ui-id": "chat-composite-message-tooltip", styles: hostStyles, content: 
+            return React.createElement(TooltipHost, { calloutProps: Object.assign({}, calloutProps), "data-ui-id": "chat-composite-message-tooltip", styles: hostStyles, content: 
                 // when it's just 1 to 1 texting, we don't need to know who has read the message, just show message as 'seen'
                 // when readcount is 0, we have a bug, show 'seen' to cover up as a fall back
                 // when participant count is 0, we have a bug, show 'seen' to cover up as a fall back
-                readCount === 0 ||
-                    (remoteParticipantsCount && remoteParticipantsCount <= 1) ||
-                    !readCount ||
-                    !remoteParticipantsCount ||
-                    strings.readByTooltipText === undefined
-                    ? strings.seenTooltipText
-                    : _formatString(strings.readByTooltipText, {
-                        messageThreadReadCount: `${readCount}`,
-                        remoteParticipantsCount: `${remoteParticipantsCount}`
-                    }), onTooltipToggle: () => {
+                readCount === 0 || remoteParticipantsCount && remoteParticipantsCount <= 1 || !readCount || !remoteParticipantsCount || strings.readByTooltipText === undefined ? strings.seenTooltipText : _formatString(strings.readByTooltipText, {
+                    messageThreadReadCount: `${readCount}`,
+                    remoteParticipantsCount: `${remoteParticipantsCount}`
+                }), onTooltipToggle: () => {
                     if (onToggleToolTip) {
                         onToggleToolTip(!isTooltipToggled);
                         setIsTooltipToggled(!isTooltipToggled);
                     }
                 } },
-                strings.seenAriaLabel && React.createElement(LiveMessage, { message: strings.seenAriaLabel, "aria-live": "polite" }),
-                React.createElement(Icon, { "data-ui-id": "chat-composite-message-status-icon", role: "status", "aria-label": strings.seenAriaLabel, iconName: "MessageSeen", className: mergeStyles({ color: theme.palette.themePrimary }, styles === null || styles === void 0 ? void 0 : styles.root) })));
+                strings.seenAriaLabel && React.createElement(LiveMessage, { message: strings.seenAriaLabel, ariaLive: "polite" }),
+                React.createElement(Icon, { "data-ui-id": "chat-composite-message-status-icon", role: "status", "aria-label": strings.seenAriaLabel, iconName: "MessageSeen", className: mergeStyles({
+                        color: theme.palette.themePrimary
+                    }, styles === null || styles === void 0 ? void 0 : styles.root) }));
         case 'delivered':
-            return (React.createElement(TooltipHost, { calloutProps: Object.assign({}, calloutProps), content: strings.deliveredTooltipText, "data-ui-id": "chat-composite-message-tooltip", styles: hostStyles },
-                strings.deliveredAriaLabel && React.createElement(LiveMessage, { message: strings.deliveredAriaLabel, "aria-live": "polite" }),
-                React.createElement(Icon, { role: "status", "data-ui-id": "chat-composite-message-status-icon", "aria-label": strings.deliveredAriaLabel, iconName: "MessageDelivered", className: mergeStyles(MessageStatusIndicatorIconStyle, { color: theme.palette.themePrimary }, styles === null || styles === void 0 ? void 0 : styles.root) })));
+            return React.createElement(TooltipHost, { calloutProps: Object.assign({}, calloutProps), content: strings.deliveredTooltipText, "data-ui-id": "chat-composite-message-tooltip", styles: hostStyles },
+                strings.deliveredAriaLabel && React.createElement(LiveMessage, { message: strings.deliveredAriaLabel, ariaLive: "polite" }),
+                React.createElement(Icon, { role: "status", "data-ui-id": "chat-composite-message-status-icon", "aria-label": strings.deliveredAriaLabel, iconName: "MessageDelivered", className: mergeStyles(MessageStatusIndicatorIconStyle, {
+                        color: theme.palette.themePrimary
+                    }, styles === null || styles === void 0 ? void 0 : styles.root) }));
         default:
             return React.createElement(React.Fragment, null);
     }
@@ -72,5 +81,9 @@ export const MessageStatusIndicator = (props) => {
 // The TooltipHost root uses display: inline by default.
 // To prevent sizing issues or tooltip positioning issues, we override to inline-block.
 // For more details see "Icon Button with Tooltip" on https://developer.microsoft.com/en-us/fluentui#/controls/web/button
-const hostStyles = { root: { display: 'inline-block' } };
+const hostStyles = {
+    root: {
+        display: 'inline-block'
+    }
+};
 //# sourceMappingURL=MessageStatusIndicator.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MessageStatusIndicator.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/MessageStatusIndicator.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { ICalloutContentStyles, Icon, ITooltipHostStyles, mergeStyles, TooltipHost } from '@fluentui/react';\nimport { MessageStatus, _formatString } from '@internal/acs-ui-common';\nimport React, { useState } from 'react';\nimport { LiveMessage } from 'react-aria-live';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { isDarkThemed } from '../theming/themeUtils';\nimport { BaseCustomStyles } from '../types';\nimport {\n  MessageStatusIndicatorErrorIconStyle,\n  MessageStatusIndicatorIconStyle\n} from './styles/MessageStatusIndicator.styles';\n\n/**\n * Strings of {@link MessageStatusIndicator} that can be overridden.\n *\n * @public\n */\nexport interface MessageStatusIndicatorStrings {\n  /** Aria label to notify user when their message has been delivered. */\n  deliveredAriaLabel?: string;\n  /** Text to display in the delivered message icon tooltip. */\n  deliveredTooltipText: string;\n  /** Aria label to notify user when their message has been seen by others. */\n  seenAriaLabel?: string;\n  /** Text to display in the seen message icon tooltip if read number/ participant number is 1 */\n  seenTooltipText: string;\n  /** Text to display in the seen message icon tooltip if read number logic is working correctly (more than 1 read number and more than 1 particiants)*/\n  readByTooltipText?: string;\n  /** Aria label to notify user when their message is being sent. */\n  sendingAriaLabel?: string;\n  /** Text to display in the sending message icon tooltip. */\n  sendingTooltipText: string;\n  /** Aria label to notify user when their message has failed to be sent. */\n  failedToSendAriaLabel?: string;\n  /** Text to display in the failed message icon tooltip. */\n  failedToSendTooltipText: string;\n}\n\n/**\n * Props for {@link MessageStatusIndicator}.\n *\n * @public\n */\nexport interface MessageStatusIndicatorProps {\n  /** Message status that determines the icon to display. */\n  status?: MessageStatus;\n  readCount?: number;\n  onToggleToolTip?: (isToggled: boolean) => void;\n  /** number of participants not including myself */\n  remoteParticipantsCount?: number;\n  /**\n   * Allows users to pass an object containing custom CSS styles.\n   * @Example\n   * ```\n   * <MessageStatus styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: BaseCustomStyles;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: MessageStatusIndicatorStrings;\n}\n\n/**\n * Component to display the status of a sent message.\n *\n * Adds an icon and tooltip corresponding to the message status.\n *\n * @public\n */\nexport const MessageStatusIndicator = (props: MessageStatusIndicatorProps): JSX.Element => {\n  const { status, styles, remoteParticipantsCount, onToggleToolTip, readCount } = props;\n  const localeStrings = useLocale().strings.messageStatusIndicator;\n  const [isTooltipToggled, setIsTooltipToggled] = useState<boolean>(false);\n  const strings = { ...localeStrings, ...props.strings };\n  const theme = useTheme();\n\n  const calloutStyle: Partial<ICalloutContentStyles> = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };\n\n  // Place callout with no gap between it and the button.\n  const calloutProps = {\n    gapSpace: 0,\n    styles: calloutStyle,\n    backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n  };\n\n  switch (status) {\n    case 'failed':\n      return (\n        <TooltipHost\n          content={strings.failedToSendTooltipText}\n          data-ui-id=\"chat-composite-message-tooltip\"\n          calloutProps={{ ...calloutProps }}\n          styles={hostStyles}\n        >\n          {strings.failedToSendAriaLabel && (\n            // live message is used here and in the following tooltips so that aria labels are announced on mobile\n            <LiveMessage message={strings.failedToSendAriaLabel} aria-live=\"polite\" />\n          )}\n          <Icon\n            role=\"status\"\n            data-ui-id=\"chat-composite-message-status-icon\"\n            aria-label={strings.failedToSendAriaLabel}\n            iconName=\"MessageFailed\"\n            className={mergeStyles(\n              MessageStatusIndicatorErrorIconStyle,\n              { color: theme.palette.redDark },\n              styles?.root\n            )}\n          />\n        </TooltipHost>\n      );\n    case 'sending':\n      return (\n        <TooltipHost\n          content={strings.sendingTooltipText}\n          data-ui-id=\"chat-composite-message-tooltip\"\n          calloutProps={{ ...calloutProps }}\n          styles={hostStyles}\n        >\n          {strings.sendingAriaLabel && <LiveMessage message={strings.sendingAriaLabel} aria-live=\"polite\" />}\n\n          <Icon\n            role=\"status\"\n            data-ui-id=\"chat-composite-message-status-icon\"\n            aria-label={strings.sendingAriaLabel}\n            iconName=\"MessageSending\"\n            className={mergeStyles(\n              MessageStatusIndicatorIconStyle,\n              { color: theme.palette.themePrimary },\n              styles?.root\n            )}\n          />\n        </TooltipHost>\n      );\n    case 'seen':\n      return (\n        <TooltipHost\n          calloutProps={{ ...calloutProps }}\n          data-ui-id=\"chat-composite-message-tooltip\"\n          styles={hostStyles}\n          content={\n            // when it's just 1 to 1 texting, we don't need to know who has read the message, just show message as 'seen'\n            // when readcount is 0, we have a bug, show 'seen' to cover up as a fall back\n            // when participant count is 0, we have a bug, show 'seen' to cover up as a fall back\n            readCount === 0 ||\n            (remoteParticipantsCount && remoteParticipantsCount <= 1) ||\n            !readCount ||\n            !remoteParticipantsCount ||\n            strings.readByTooltipText === undefined\n              ? strings.seenTooltipText\n              : _formatString(strings.readByTooltipText, {\n                  messageThreadReadCount: `${readCount}`,\n                  remoteParticipantsCount: `${remoteParticipantsCount}`\n                })\n          }\n          onTooltipToggle={() => {\n            if (onToggleToolTip) {\n              onToggleToolTip(!isTooltipToggled);\n              setIsTooltipToggled(!isTooltipToggled);\n            }\n          }}\n        >\n          {strings.seenAriaLabel && <LiveMessage message={strings.seenAriaLabel} aria-live=\"polite\" />}\n\n          <Icon\n            data-ui-id=\"chat-composite-message-status-icon\"\n            role=\"status\"\n            aria-label={strings.seenAriaLabel}\n            iconName=\"MessageSeen\"\n            className={mergeStyles({ color: theme.palette.themePrimary }, styles?.root)}\n          />\n        </TooltipHost>\n      );\n    case 'delivered':\n      return (\n        <TooltipHost\n          calloutProps={{ ...calloutProps }}\n          content={strings.deliveredTooltipText}\n          data-ui-id=\"chat-composite-message-tooltip\"\n          styles={hostStyles}\n        >\n          {strings.deliveredAriaLabel && <LiveMessage message={strings.deliveredAriaLabel} aria-live=\"polite\" />}\n          <Icon\n            role=\"status\"\n            data-ui-id=\"chat-composite-message-status-icon\"\n            aria-label={strings.deliveredAriaLabel}\n            iconName=\"MessageDelivered\"\n            className={mergeStyles(\n              MessageStatusIndicatorIconStyle,\n              { color: theme.palette.themePrimary },\n              styles?.root\n            )}\n          />\n        </TooltipHost>\n      );\n    default:\n      return <></>;\n  }\n};\n\n// The TooltipHost root uses display: inline by default.\n// To prevent sizing issues or tooltip positioning issues, we override to inline-block.\n// For more details see \"Icon Button with Tooltip\" on https://developer.microsoft.com/en-us/fluentui#/controls/web/button\nconst hostStyles: Partial<ITooltipHostStyles> = { root: { display: 'inline-block' } };\n\"../../../acs-ui-common/src\""]}
+{"version":3,"file":"MessageStatusIndicator.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/MessageStatusIndicator.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { ICalloutContentStyles, Icon, ITooltipHostStyles, mergeStyles, TooltipHost } from '@fluentui/react';\nimport { MessageStatus, _formatString } from '@internal/acs-ui-common';\nimport React, { useState } from 'react';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { isDarkThemed } from '../theming/themeUtils';\nimport { BaseCustomStyles } from '../types';\nimport { MessageStatusIndicatorErrorIconStyle, MessageStatusIndicatorIconStyle } from './styles/MessageStatusIndicator.styles';\nimport LiveMessage from './Announcer/LiveMessage';\n\n/**\n * Strings of {@link MessageStatusIndicator} that can be overridden.\n *\n * @public\n */\nexport interface MessageStatusIndicatorStrings {\n  /** Aria label to notify user when their message has been delivered. */\n  deliveredAriaLabel?: string;\n  /** Text to display in the delivered message icon tooltip. */\n  deliveredTooltipText: string;\n  /** Aria label to notify user when their message has been seen by others. */\n  seenAriaLabel?: string;\n  /** Text to display in the seen message icon tooltip if read number/ participant number is 1 */\n  seenTooltipText: string;\n  /** Text to display in the seen message icon tooltip if read number logic is working correctly (more than 1 read number and more than 1 particiants)*/\n  readByTooltipText?: string;\n  /** Aria label to notify user when their message is being sent. */\n  sendingAriaLabel?: string;\n  /** Text to display in the sending message icon tooltip. */\n  sendingTooltipText: string;\n  /** Aria label to notify user when their message has failed to be sent. */\n  failedToSendAriaLabel?: string;\n  /** Text to display in the failed message icon tooltip. */\n  failedToSendTooltipText: string;\n}\n\n/**\n * Props for {@link MessageStatusIndicator}.\n *\n * @public\n */\nexport interface MessageStatusIndicatorProps {\n  /** Message status that determines the icon to display. */\n  status?: MessageStatus;\n  readCount?: number;\n  onToggleToolTip?: (isToggled: boolean) => void;\n  /** number of participants not including myself */\n  remoteParticipantsCount?: number;\n  /**\n   * Allows users to pass an object containing custom CSS styles.\n   * @Example\n   * ```\n   * <MessageStatus styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: BaseCustomStyles;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: MessageStatusIndicatorStrings;\n}\n\n/**\n * Component to display the status of a sent message.\n *\n * Adds an icon and tooltip corresponding to the message status.\n *\n * @public\n */\nexport const MessageStatusIndicator = (props: MessageStatusIndicatorProps): JSX.Element => {\n  const {\n    status,\n    styles,\n    remoteParticipantsCount,\n    onToggleToolTip,\n    readCount\n  } = props;\n  const localeStrings = useLocale().strings.messageStatusIndicator;\n  const [isTooltipToggled, setIsTooltipToggled] = useState<boolean>(false);\n  const strings = {\n    ...localeStrings,\n    ...props.strings\n  };\n  const theme = useTheme();\n  const calloutStyle: Partial<ICalloutContentStyles> = {\n    root: {\n      padding: 0\n    },\n    calloutMain: {\n      padding: '0.5rem'\n    }\n  };\n\n  // Place callout with no gap between it and the button.\n  const calloutProps = {\n    gapSpace: 0,\n    styles: calloutStyle,\n    backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n  };\n  switch (status) {\n    case 'failed':\n      return <TooltipHost content={strings.failedToSendTooltipText} data-ui-id=\"chat-composite-message-tooltip\" calloutProps={{\n        ...calloutProps\n      }} styles={hostStyles}>\n          {strings.failedToSendAriaLabel &&\n        // live message is used here and in the following tooltips so that aria labels are announced on mobile\n        <LiveMessage message={strings.failedToSendAriaLabel} ariaLive=\"polite\" />}\n          <Icon role=\"status\" data-ui-id=\"chat-composite-message-status-icon\" aria-label={strings.failedToSendAriaLabel} iconName=\"MessageFailed\" className={mergeStyles(MessageStatusIndicatorErrorIconStyle, {\n          color: theme.palette.redDark\n        }, styles?.root)} />\n        </TooltipHost>;\n    case 'sending':\n      return <TooltipHost content={strings.sendingTooltipText} data-ui-id=\"chat-composite-message-tooltip\" calloutProps={{\n        ...calloutProps\n      }} styles={hostStyles}>\n          {strings.sendingAriaLabel && <LiveMessage message={strings.sendingAriaLabel} ariaLive=\"polite\" />}\n\n          <Icon role=\"status\" data-ui-id=\"chat-composite-message-status-icon\" aria-label={strings.sendingAriaLabel} iconName=\"MessageSending\" className={mergeStyles(MessageStatusIndicatorIconStyle, {\n          color: theme.palette.themePrimary\n        }, styles?.root)} />\n        </TooltipHost>;\n    case 'seen':\n      return <TooltipHost calloutProps={{\n        ...calloutProps\n      }} data-ui-id=\"chat-composite-message-tooltip\" styles={hostStyles} content={\n      // when it's just 1 to 1 texting, we don't need to know who has read the message, just show message as 'seen'\n      // when readcount is 0, we have a bug, show 'seen' to cover up as a fall back\n      // when participant count is 0, we have a bug, show 'seen' to cover up as a fall back\n      readCount === 0 || remoteParticipantsCount && remoteParticipantsCount <= 1 || !readCount || !remoteParticipantsCount || strings.readByTooltipText === undefined ? strings.seenTooltipText : _formatString(strings.readByTooltipText, {\n        messageThreadReadCount: `${readCount}`,\n        remoteParticipantsCount: `${remoteParticipantsCount}`\n      })} onTooltipToggle={() => {\n        if (onToggleToolTip) {\n          onToggleToolTip(!isTooltipToggled);\n          setIsTooltipToggled(!isTooltipToggled);\n        }\n      }}>\n          {strings.seenAriaLabel && <LiveMessage message={strings.seenAriaLabel} ariaLive=\"polite\" />}\n\n          <Icon data-ui-id=\"chat-composite-message-status-icon\" role=\"status\" aria-label={strings.seenAriaLabel} iconName=\"MessageSeen\" className={mergeStyles({\n          color: theme.palette.themePrimary\n        }, styles?.root)} />\n        </TooltipHost>;\n    case 'delivered':\n      return <TooltipHost calloutProps={{\n        ...calloutProps\n      }} content={strings.deliveredTooltipText} data-ui-id=\"chat-composite-message-tooltip\" styles={hostStyles}>\n          {strings.deliveredAriaLabel && <LiveMessage message={strings.deliveredAriaLabel} ariaLive=\"polite\" />}\n          <Icon role=\"status\" data-ui-id=\"chat-composite-message-status-icon\" aria-label={strings.deliveredAriaLabel} iconName=\"MessageDelivered\" className={mergeStyles(MessageStatusIndicatorIconStyle, {\n          color: theme.palette.themePrimary\n        }, styles?.root)} />\n        </TooltipHost>;\n    default:\n      return <></>;\n  }\n};\n\n// The TooltipHost root uses display: inline by default.\n// To prevent sizing issues or tooltip positioning issues, we override to inline-block.\n// For more details see \"Icon Button with Tooltip\" on https://developer.microsoft.com/en-us/fluentui#/controls/web/button\nconst hostStyles: Partial<ITooltipHostStyles> = {\n  root: {\n    display: 'inline-block'\n  }\n};\"../../../acs-ui-common/src\""]}