@azure/communication-react 1.20.0 → 1.21.0-alpha-202410180016

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

@@ -1 +1 @@
-{"version":3,"file":"HoldButton.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/HoldButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAC7E,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAwCjE;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAe,EAAE;IAChE,MAAM,EACJ,YAAY,EACZ,OAAO,EACR,GAAG,KAAK,CAAC;IACV,MAAM,gBAAgB,GAAG,GAAgB,EAAE;QACzC,OAAO,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,gBAAgB,GAAG,CAAC;IACxF,CAAC,CAAC;IACF,MAAM,kBAAkB,GAAG,GAAgB,EAAE;QAC3C,OAAO,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,YAAY,GAAG,CAAC;IACpF,CAAC,CAAC;IACF,OAAO,oBAAC,gBAAgB,oBAAK,KAAK,IAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,KAAK,CAAC,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,eAAe,EAAE,gBAAgB,IAAI,CAAC;AAC1K,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport React from 'react';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\n\n/**\n *@public\n */\nexport interface HoldButtonProps extends ControlBarButtonProps {\n  /**\n   * Utility property for using this component with communication react handlers\n   * Holds the call or resumes it based on call state.\n   */\n  onToggleHold: () => Promise<void>;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: HoldButtonStrings;\n}\n\n/**\n * Strings for the hold button labels\n * @public\n */\nexport interface HoldButtonStrings {\n  /**\n   * Label for when action is to resume call.\n   */\n  onLabel?: string;\n  /**\n   * Label for when action is to hold call.\n   */\n  offLabel?: string;\n  /**\n   * Content for when button is checked\n   */\n  tooltipOnContent?: string;\n  /**\n   * Content for when button is unchecked\n   */\n  tooltipOffContent?: string;\n}\n\n/**\n * a button to hold or resume a ongoing call.\n *\n * Can be used with {@link ControlBar}\n *\n * @param props - properties for the hold button.\n * @returns\n * @public\n */\nexport const HoldButton = (props: HoldButtonProps): JSX.Element => {\n  const {\n    onToggleHold,\n    strings\n  } = props;\n  const onRenderHoldIcon = (): JSX.Element => {\n    return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"HoldCallButton\" />;\n  };\n  const onRenderResumeIcon = (): JSX.Element => {\n    return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ResumeCall\" />;\n  };\n  return <ControlBarButton {...props} strings={strings} onClick={onToggleHold ?? props.onClick} onRenderOnIcon={onRenderResumeIcon} onRenderOffIcon={onRenderHoldIcon} />;\n};"]}
+{"version":3,"file":"HoldButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/HoldButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAC7E,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAwCjE;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAe,EAAE;IAChE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAExC,MAAM,gBAAgB,GAAG,GAAgB,EAAE;QACzC,OAAO,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,gBAAgB,GAAG,CAAC;IACxF,CAAC,CAAC;IACF,MAAM,kBAAkB,GAAG,GAAgB,EAAE;QAC3C,OAAO,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,YAAY,GAAG,CAAC;IACpF,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,gBAAgB,oBACX,KAAK,IACT,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,KAAK,CAAC,OAAO,EACtC,cAAc,EAAE,kBAAkB,EAClC,eAAe,EAAE,gBAAgB,IACjC,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport React from 'react';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\n\n/**\n *@public\n */\nexport interface HoldButtonProps extends ControlBarButtonProps {\n  /**\n   * Utility property for using this component with communication react handlers\n   * Holds the call or resumes it based on call state.\n   */\n  onToggleHold: () => Promise<void>;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: HoldButtonStrings;\n}\n\n/**\n * Strings for the hold button labels\n * @public\n */\nexport interface HoldButtonStrings {\n  /**\n   * Label for when action is to resume call.\n   */\n  onLabel?: string;\n  /**\n   * Label for when action is to hold call.\n   */\n  offLabel?: string;\n  /**\n   * Content for when button is checked\n   */\n  tooltipOnContent?: string;\n  /**\n   * Content for when button is unchecked\n   */\n  tooltipOffContent?: string;\n}\n\n/**\n * a button to hold or resume a ongoing call.\n *\n * Can be used with {@link ControlBar}\n *\n * @param props - properties for the hold button.\n * @returns\n * @public\n */\nexport const HoldButton = (props: HoldButtonProps): JSX.Element => {\n  const { onToggleHold, strings } = props;\n\n  const onRenderHoldIcon = (): JSX.Element => {\n    return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"HoldCallButton\" />;\n  };\n  const onRenderResumeIcon = (): JSX.Element => {\n    return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ResumeCall\" />;\n  };\n\n  return (\n    <ControlBarButton\n      {...props}\n      strings={strings}\n      onClick={onToggleHold ?? props.onClick}\n      onRenderOnIcon={onRenderResumeIcon}\n      onRenderOffIcon={onRenderHoldIcon}\n    />\n  );\n};\n"]}

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

@@ -38,29 +38,27 @@ export const HorizontalGallery = (props) => {
         if (!indexes) {
             return [];
         }
-        return indexes.map(index => React.Children.toArray(children)[index]);
+        return indexes.map((index) => React.Children.toArray(children)[index]);
     }, [indexesArray, clippedPage, children]);
     const showButtons = numberOfChildren > childrenPerPage;
     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":["../../../../../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    const indexes = indexesArray?.[clippedPage];\n    if (!indexes) {\n      return [];\n    }\n    return indexes.map(index => React.Children.toArray(children)[index]);\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};"]}
+{"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    const indexes = indexesArray?.[clippedPage];\n    if (!indexes) {\n      return [];\n    }\n    return indexes.map((index) => React.Children.toArray(children)[index]);\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"]}

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

@@ -5,6 +5,8 @@ import React, { useMemo, useState } from 'react';
 import { bodyContainer, brokenImageStyle, cancelIcon, closeButtonStyles, controlBarContainerStyle, downloadButtonStyle, downloadIcon, downloadIconStyle, focusTrapZoneStyle, headerStyle, normalImageStyle, overlayStyles, scrollableContentStyle, smallDownloadButtonContainerStyle, themeProviderRootStyle, titleBarContainerStyle, titleStyle } from './styles/ImageOverlay.style';
 import { FluentThemeProvider } from '../theming/FluentThemeProvider';
 import { useLocale } from '../localization';
+/* @conditional-compile-remove(image-overlay-theme) */
+import { imageOverlayTheme } from '../theming';
 import { darkTheme } from '../theming';
 /**
  * Component to render a fullscreen modal for a selected image.
@@ -16,34 +18,31 @@ export const ImageOverlay = (props) => {
     const localeStrings = useLocale().strings.imageOverlay;
     const [isImageLoaded, setIsImageLoaded] = useState(true);
     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), role: "heading", "aria-label": title || 'Image', "aria-level": 2 },
+        return (React.createElement(Stack, { className: mergeStyles(headerStyle), role: "heading", "aria-label": title || 'Image', "aria-level": 2 },
             React.createElement(Stack, { className: mergeStyles(titleBarContainerStyle) },
                 titleIcon,
                 React.createElement(Stack.Item, { className: mergeStyles(titleStyle(overlayTheme)) }, title)),
             React.createElement(Stack, { className: mergeStyles(controlBarContainerStyle) },
-                onDownloadButtonClicked && React.createElement(DefaultButton, { className: mergeStyles(downloadButtonStyle), 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, "aria-label": localeStrings.dismissButtonAriaLabel, "aria-live": 'polite' })));
+                onDownloadButtonClicked && (React.createElement(DefaultButton, { className: mergeStyles(downloadButtonStyle), 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, "aria-label": localeStrings.dismissButtonAriaLabel, "aria-live": 'polite' }))));
     };
     const renderBodyWithLightDismiss = () => {
-        return React.createElement(Stack, { className: mergeStyles(bodyContainer), onClick: () => props.onDismiss() }, imageSrc && React.createElement("img", { src: imageSrc, className: mergeStyles(imageStyle), alt: altText || 'image', "aria-label": 'image-overlay-main-image', "data-ui-id": 'image-overlay-main-image', "aria-live": 'polite', onError: () => {
+        return (React.createElement(Stack, { className: mergeStyles(bodyContainer), onClick: () => props.onDismiss() }, imageSrc && (React.createElement("img", { src: imageSrc, className: mergeStyles(imageStyle), alt: altText || 'image', "aria-label": 'image-overlay-main-image', "data-ui-id": 'image-overlay-main-image', "aria-live": 'polite', onError: () => {
                 setIsImageLoaded(false);
-            }, onClick: event => event.stopPropagation(), onDoubleClick: event => {
+            }, onClick: (event) => event.stopPropagation(), onDoubleClick: (event) => {
                 event.persist();
-            } }));
+            } }))));
     };
-    return React.createElement(Modal, { titleAriaId: title, isOpen: isOpen, onDismiss: onDismiss, overlay: {
-            styles: Object.assign({}, overlayStyles(overlayTheme))
-        }, styles: {
-            main: focusTrapZoneStyle,
-            scrollableContent: scrollableContentStyle
-        }, isDarkOverlay: true },
+    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()));
+            renderBodyWithLightDismiss())));
 };
 //# sourceMappingURL=ImageOverlay.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ImageOverlay.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ImageOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, Icon, IconButton, Modal, PartialTheme, Stack, mergeStyles } from '@fluentui/react';\nimport React, { useMemo, useState } from 'react';\nimport { bodyContainer, brokenImageStyle, cancelIcon, closeButtonStyles, controlBarContainerStyle, downloadButtonStyle, downloadIcon, downloadIconStyle, focusTrapZoneStyle, headerStyle, normalImageStyle, overlayStyles, scrollableContentStyle, smallDownloadButtonContainerStyle, themeProviderRootStyle, titleBarContainerStyle, titleStyle } from './styles/ImageOverlay.style';\nimport { FluentThemeProvider } from '../theming/FluentThemeProvider';\nimport { useLocale } from '../localization';\nimport { darkTheme } from '../theming';\n\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/**\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/**\n * Component to render a fullscreen modal for a selected image.\n *\n * @public\n */\nexport const ImageOverlay = (props: ImageOverlayProps): JSX.Element => {\n  const {\n    isOpen,\n    imageSrc,\n    title,\n    titleIcon,\n    altText,\n    onDownloadButtonClicked,\n    onDismiss\n  } = props;\n  const localeStrings = useLocale().strings.imageOverlay;\n  const [isImageLoaded, setIsImageLoaded] = useState<boolean>(true);\n  const overlayTheme = useMemo((): PartialTheme => {\n    return {\n      ...darkTheme,\n      semanticColors: {\n        ...darkTheme.semanticColors,\n        bodyBackground: 'rgba(0, 0, 0, 0.85)'\n      }\n    };\n  }, []);\n  const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(overlayTheme);\n  const renderHeaderBar = (): JSX.Element => {\n    return <Stack className={mergeStyles(headerStyle)} role=\"heading\" aria-label={title || 'Image'} aria-level={2}>\n        <Stack className={mergeStyles(titleBarContainerStyle)}>\n          {titleIcon}\n          <Stack.Item className={mergeStyles(titleStyle(overlayTheme))}>{title}</Stack.Item>\n        </Stack>\n        <Stack className={mergeStyles(controlBarContainerStyle)}>\n          {onDownloadButtonClicked && <DefaultButton className={mergeStyles(downloadButtonStyle)} text={localeStrings.downloadButtonLabel} onClick={() => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc)} onRenderIcon={() => <Icon iconName={downloadIcon.iconName} className={mergeStyles(downloadIconStyle)} />} aria-live={'polite'} aria-label={localeStrings.downloadButtonLabel} disabled={imageSrc === ''} />}\n          {onDownloadButtonClicked && <IconButton iconProps={downloadIcon} className={mergeStyles(smallDownloadButtonContainerStyle(overlayTheme))} onClick={() => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc)} aria-label={localeStrings.downloadButtonLabel} aria-live={'polite'} disabled={imageSrc === ''} />}\n          <IconButton iconProps={cancelIcon} className={mergeStyles(closeButtonStyles(overlayTheme))} onClick={onDismiss} aria-label={localeStrings.dismissButtonAriaLabel} aria-live={'polite'} />\n        </Stack>\n      </Stack>;\n  };\n  const renderBodyWithLightDismiss = (): JSX.Element => {\n    return <Stack className={mergeStyles(bodyContainer)} onClick={() => props.onDismiss()}>\n        {imageSrc && <img src={imageSrc} className={mergeStyles(imageStyle)} alt={altText || 'image'} aria-label={'image-overlay-main-image'} data-ui-id={'image-overlay-main-image'} aria-live={'polite'} onError={() => {\n        setIsImageLoaded(false);\n      }} onClick={event => event.stopPropagation()} onDoubleClick={event => {\n        event.persist();\n      }} />}\n      </Stack>;\n  };\n  return <Modal titleAriaId={title} isOpen={isOpen} onDismiss={onDismiss} overlay={{\n    styles: {\n      ...overlayStyles(overlayTheme)\n    }\n  }} styles={{\n    main: focusTrapZoneStyle,\n    scrollableContent: scrollableContentStyle\n  }} isDarkOverlay={true}>\n      <FluentThemeProvider fluentTheme={overlayTheme} rootStyle={themeProviderRootStyle}>\n        {renderHeaderBar()}\n        {renderBodyWithLightDismiss()}\n      </FluentThemeProvider>\n    </Modal>;\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\nimport { DefaultButton, Icon, IconButton, Modal, PartialTheme, Stack, mergeStyles } from '@fluentui/react';\nimport React, { useMemo, useState } from 'react';\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';\nimport { FluentThemeProvider } from '../theming/FluentThemeProvider';\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(image-overlay-theme) */\nimport { imageOverlayTheme } from '../theming';\nimport { darkTheme } from '../theming';\n\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/**\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/**\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  const localeStrings = useLocale().strings.imageOverlay;\n\n  const [isImageLoaded, setIsImageLoaded] = useState<boolean>(true);\n\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)} role=\"heading\" aria-label={title || 'Image'} aria-level={2}>\n        <Stack className={mergeStyles(titleBarContainerStyle)}>\n          {titleIcon}\n          <Stack.Item className={mergeStyles(titleStyle(overlayTheme))}>{title}</Stack.Item>\n        </Stack>\n        <Stack className={mergeStyles(controlBarContainerStyle)}>\n          {onDownloadButtonClicked && (\n            <DefaultButton\n              className={mergeStyles(downloadButtonStyle)}\n              text={localeStrings.downloadButtonLabel}\n              onClick={() => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc)}\n              onRenderIcon={() => <Icon iconName={downloadIcon.iconName} className={mergeStyles(downloadIconStyle)} />}\n              aria-live={'polite'}\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              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            aria-label={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            data-ui-id={'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/IncomingCallNotification.js

@@ -14,48 +14,35 @@ export const IncomingCallNotification = (props) => {
     const { callerName, alertText, avatarImage, onAcceptWithAudio, onAcceptWithVideo, onReject, onDismiss, personaSize, styles, strings, acceptOptions } = props;
     const theme = useTheme();
     const localeStrings = useLocale().strings.IncomingCallNotification;
-    const formattedMessageString = localeStrings.incomingCallNotificationPlaceholderAlert && callerName ? _formatString(localeStrings.incomingCallNotificationPlaceholderAlert, {
-        callerName: callerName
-    }) : callerName;
-    const acceptManuOptions = acceptOptions.showAcceptWithVideo ? {
-        items: [{
-                key: 'audio',
-                text: (_a = strings === null || strings === void 0 ? void 0 : strings.incomingCallNotificationAcceptButtonLabel) !== null && _a !== void 0 ? _a : localeStrings.incomingCallNotificationAcceptButtonLabel,
-                onClick: () => onAcceptWithAudio()
-            }, {
-                key: 'video',
-                text: (_b = strings === null || strings === void 0 ? void 0 : strings.incomingCallNotificationAccceptWithVideoButtonLabel) !== null && _b !== void 0 ? _b : localeStrings.incomingCallNotificationAccceptWithVideoButtonLabel,
-                onClick: () => onAcceptWithVideo()
-            }]
-    } : undefined;
-    return React.createElement(Stack, { tokens: {
-            childrenGap: '0.5rem'
-        }, verticalAlign: "center", styles: (styles === null || styles === void 0 ? void 0 : styles.root) ? styles.root : incomingCallToastStyle(theme) },
-        React.createElement(Stack, { horizontal: true, verticalAlign: "center", tokens: {
-                childrenGap: personaSize ? '0.5rem' : '0rem'
-            } },
+    const formattedMessageString = localeStrings.incomingCallNotificationPlaceholderAlert && callerName
+        ? _formatString(localeStrings.incomingCallNotificationPlaceholderAlert, { callerName: callerName })
+        : callerName;
+    const acceptManuOptions = acceptOptions.showAcceptWithVideo
+        ? {
+            items: [
+                {
+                    key: 'audio',
+                    text: (_a = strings === null || strings === void 0 ? void 0 : strings.incomingCallNotificationAcceptButtonLabel) !== null && _a !== void 0 ? _a : localeStrings.incomingCallNotificationAcceptButtonLabel,
+                    onClick: () => onAcceptWithAudio()
+                },
+                {
+                    key: 'video',
+                    text: (_b = strings === null || strings === void 0 ? void 0 : strings.incomingCallNotificationAccceptWithVideoButtonLabel) !== null && _b !== void 0 ? _b : localeStrings.incomingCallNotificationAccceptWithVideoButtonLabel,
+                    onClick: () => onAcceptWithVideo()
+                }
+            ]
+        }
+        : undefined;
+    return (React.createElement(Stack, { tokens: { childrenGap: '0.5rem' }, verticalAlign: "center", styles: (styles === null || styles === void 0 ? void 0 : styles.root) ? styles.root : incomingCallToastStyle(theme) },
+        React.createElement(Stack, { horizontal: true, verticalAlign: "center", tokens: { childrenGap: personaSize ? '0.5rem' : '0rem' } },
             React.createElement(Stack, { horizontalAlign: "start", styles: (styles === null || styles === void 0 ? void 0 : styles.avatarContainer) ? styles.avatarContainer : incomingCallToastAvatarContainerStyle },
                 React.createElement(Persona, { imageUrl: avatarImage, text: callerName, size: PersonaSize.size24, coinSize: personaSize, hidePersonaDetails: true, "aria-label": callerName })),
-            React.createElement(Stack, { grow: true, horizontalAlign: "center", style: {
-                    alignItems: 'flex-start',
-                    fontFamily: 'Segoe UI'
-                } },
+            React.createElement(Stack, { grow: true, horizontalAlign: "center", style: { alignItems: 'flex-start', fontFamily: 'Segoe UI' } },
                 React.createElement(Text, { tabIndex: 0, "aria-live": 'assertive', "aria-label": alertText !== null && alertText !== void 0 ? alertText : formattedMessageString }, (_c = alertText !== null && alertText !== void 0 ? alertText : strings === null || strings === void 0 ? void 0 : strings.incomingCallNotificationPlaceholderAlert) !== null && _c !== void 0 ? _c : formattedMessageString)),
-            React.createElement(IconButton, { ariaLabel: (_d = strings === null || strings === void 0 ? void 0 : strings.incomingCallNotificationDismissButtonAriaLabel) !== null && _d !== void 0 ? _d : localeStrings.incomingCallNotificationDismissButtonAriaLabel, iconProps: {
-                    iconName: 'cancel'
-                }, onClick: onDismiss, styles: dismissButtonStyle(theme) })),
-        React.createElement(Stack, { horizontal: true, horizontalAlign: 'center', tokens: {
-                childrenGap: '0.5rem'
-            } },
-            React.createElement(PrimaryButton, { styles: (styles === null || styles === void 0 ? void 0 : styles.acceptButton) ? styles.acceptButton : incomingCallAcceptButtonStyle(theme), onClick: () => onAcceptWithAudio(), iconProps: {
-                    iconName: 'IncomingCallNotificationAcceptIcon',
-                    style: {
-                        lineHeight: '1rem'
-                    }
-                }, ariaLabel: (_e = strings === null || strings === void 0 ? void 0 : strings.incomingCallNoticicationAcceptWithAudioAriaLabel) !== null && _e !== void 0 ? _e : localeStrings.incomingCallNoticicationAcceptWithAudioAriaLabel, menuProps: acceptManuOptions }, (_f = strings === null || strings === void 0 ? void 0 : strings.incomingCallNotificationAcceptButtonLabel) !== null && _f !== void 0 ? _f : localeStrings.incomingCallNotificationAcceptButtonLabel),
-            React.createElement(DefaultButton, { styles: (styles === null || styles === void 0 ? void 0 : styles.rejectButton) ? styles.rejectButton : incomingCallRejectButtonStyle(theme), onClick: () => onReject(), iconProps: {
-                    iconName: 'IncomingCallNotificationRejectIcon'
-                }, ariaLabel: (_g = strings === null || strings === void 0 ? void 0 : strings.incomingCallNoticicationRejectAriaLabel) !== null && _g !== void 0 ? _g : localeStrings.incomingCallNoticicationRejectAriaLabel }, (_h = strings === null || strings === void 0 ? void 0 : strings.incomingCallNotificationRejectButtonLabel) !== null && _h !== void 0 ? _h : localeStrings.incomingCallNotificationRejectButtonLabel)));
+            React.createElement(IconButton, { ariaLabel: (_d = strings === null || strings === void 0 ? void 0 : strings.incomingCallNotificationDismissButtonAriaLabel) !== null && _d !== void 0 ? _d : localeStrings.incomingCallNotificationDismissButtonAriaLabel, iconProps: { iconName: 'cancel' }, onClick: onDismiss, styles: dismissButtonStyle(theme) })),
+        React.createElement(Stack, { horizontal: true, horizontalAlign: 'center', tokens: { childrenGap: '0.5rem' } },
+            React.createElement(PrimaryButton, { styles: (styles === null || styles === void 0 ? void 0 : styles.acceptButton) ? styles.acceptButton : incomingCallAcceptButtonStyle(theme), onClick: () => onAcceptWithAudio(), iconProps: { iconName: 'IncomingCallNotificationAcceptIcon', style: { lineHeight: '1rem' } }, ariaLabel: (_e = strings === null || strings === void 0 ? void 0 : strings.incomingCallNoticicationAcceptWithAudioAriaLabel) !== null && _e !== void 0 ? _e : localeStrings.incomingCallNoticicationAcceptWithAudioAriaLabel, menuProps: acceptManuOptions }, (_f = strings === null || strings === void 0 ? void 0 : strings.incomingCallNotificationAcceptButtonLabel) !== null && _f !== void 0 ? _f : localeStrings.incomingCallNotificationAcceptButtonLabel),
+            React.createElement(DefaultButton, { styles: (styles === null || styles === void 0 ? void 0 : styles.rejectButton) ? styles.rejectButton : incomingCallRejectButtonStyle(theme), onClick: () => onReject(), iconProps: { iconName: 'IncomingCallNotificationRejectIcon' }, ariaLabel: (_g = strings === null || strings === void 0 ? void 0 : strings.incomingCallNoticicationRejectAriaLabel) !== null && _g !== void 0 ? _g : localeStrings.incomingCallNoticicationRejectAriaLabel }, (_h = strings === null || strings === void 0 ? void 0 : strings.incomingCallNotificationRejectButtonLabel) !== null && _h !== void 0 ? _h : localeStrings.incomingCallNotificationRejectButtonLabel))));
 };
 const incomingCallToastStyle = (theme) => {
     return {

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

@@ -1 +1 @@
-{"version":3,"file":"IncomingCallNotification.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/IncomingCallNotification.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, IButtonStyles, IconButton, IStackStyles, Persona, PersonaSize, PrimaryButton, Stack, Text, Theme, useTheme } from '@fluentui/react';\nimport { IContextualMenuProps } from '@fluentui/react';\nimport React from 'react';\nimport { useLocale } from '../localization';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/**\n * Strings for the incoming call notification component.\n *\n * @public\n */\nexport interface IncomingCallNotificationStrings {\n  /**\n   * Placeholder CallerID for the incoming call notification.\n   */\n  incomingCallNotificationPlaceholderId?: string;\n  /**\n   * Placeholder Alert for the incoming call notification.\n   */\n  incomingCallNotificationPlaceholderAlert?: string;\n  /**\n   * Aria label for the accept with audio button in the incoming call notification.\n   */\n  incomingCallNoticicationAcceptWithAudioAriaLabel?: string;\n  /**\n   * Aria label for the accept with video button in the incoming call notification.\n   */\n  incomingCallNoticicationAcceptWithVideoAriaLabel?: string;\n  /**\n   * Aria label for the reject button in the incoming call notification.\n   */\n  incomingCallNoticicationRejectAriaLabel?: string;\n  /**\n   * Label for the accept button in the incoming call notification.\n   */\n  incomingCallNotificationAcceptButtonLabel?: string;\n  /**\n   * Label for the accept with video button in the incoming call notification.\n   */\n  incomingCallNotificationAccceptWithVideoButtonLabel?: string;\n  /**\n   * label for the reject button in the incoming call notification.\n   */\n  incomingCallNotificationRejectButtonLabel?: string;\n  /**\n   * Aria label for the incoming call dismiss button\n   */\n  incomingCallNotificationDismissButtonAriaLabel?: string;\n}\n\n/**\n * Styles for the incoming call notification component.\n *\n * @public\n */\nexport interface IncomingCallNotificationStyles {\n  /**\n   * Styles for the accept buttons.\n   */\n  acceptButton?: IButtonStyles;\n  /**\n   * Styles for the reject button.\n   */\n  rejectButton?: IButtonStyles;\n  /**\n   * Styles for the root container.\n   */\n  root?: IStackStyles;\n  /**\n   * Styles for the avatar container.\n   */\n  avatarContainer?: IStackStyles;\n}\n\n/**\n * Properties for the incoming call notification component.\n *\n * @public\n */\nexport interface IncomingCallNotificationProps {\n  /**\n   * Caller's Name\n   */\n  callerName?: string;\n  /**\n   * Alert Text\"\n   */\n  alertText?: string;\n  /**\n   * URL to the avatar image for the user\n   */\n  avatarImage?: string;\n  /**\n   * Size of the persona coin\n   */\n  personaSize?: number;\n  /**\n   * Callback to render the avatar\n   */\n  onRenderAvatar?: () => JSX.Element;\n  /**\n   * Callback to accept the call with audio\n   */\n  onAcceptWithAudio: () => void;\n  /**\n   * Callback to accept the call with Video\n   */\n  onAcceptWithVideo: () => void;\n  /**\n   * Callback to reject the call\n   */\n  onReject: () => void;\n  /**\n   * Callback when the notification is dismissed\n   */\n  onDismiss?: () => void;\n  /**\n   * Styles for the incoming call notification component.\n   */\n  styles?: IncomingCallNotificationStyles;\n  /**\n   * Strings for the incoming call notification component.\n   */\n  strings?: IncomingCallNotificationStrings;\n  /**\n   * Options for whether to show the accept with video button\n   */\n  acceptOptions: {\n    showAcceptWithVideo: boolean;\n  };\n}\n\n/**\n * A Notification component that is to be used to represent incoming calls to the end user.\n * Allows the user to accept or reject the incoming call.\n * @public\n */\nexport const IncomingCallNotification = (props: IncomingCallNotificationProps): JSX.Element => {\n  const {\n    callerName,\n    alertText,\n    avatarImage,\n    onAcceptWithAudio,\n    onAcceptWithVideo,\n    onReject,\n    onDismiss,\n    personaSize,\n    styles,\n    strings,\n    acceptOptions\n  } = props;\n  const theme = useTheme();\n  const localeStrings = useLocale().strings.IncomingCallNotification;\n  const formattedMessageString = localeStrings.incomingCallNotificationPlaceholderAlert && callerName ? _formatString(localeStrings.incomingCallNotificationPlaceholderAlert, {\n    callerName: callerName\n  }) : callerName;\n  const acceptManuOptions: IContextualMenuProps | undefined = acceptOptions.showAcceptWithVideo ? {\n    items: [{\n      key: 'audio',\n      text: strings?.incomingCallNotificationAcceptButtonLabel ?? localeStrings.incomingCallNotificationAcceptButtonLabel,\n      onClick: () => onAcceptWithAudio()\n    }, {\n      key: 'video',\n      text: strings?.incomingCallNotificationAccceptWithVideoButtonLabel ?? localeStrings.incomingCallNotificationAccceptWithVideoButtonLabel,\n      onClick: () => onAcceptWithVideo()\n    }]\n  } : undefined;\n  return <Stack tokens={{\n    childrenGap: '0.5rem'\n  }} verticalAlign=\"center\" styles={styles?.root ? styles.root : incomingCallToastStyle(theme)}>\n      <Stack horizontal verticalAlign=\"center\" tokens={{\n      childrenGap: personaSize ? '0.5rem' : '0rem'\n    }}>\n        <Stack horizontalAlign=\"start\" styles={styles?.avatarContainer ? styles.avatarContainer : incomingCallToastAvatarContainerStyle}>\n          <Persona imageUrl={avatarImage} text={callerName} size={PersonaSize.size24} coinSize={personaSize} hidePersonaDetails={true} aria-label={callerName} />\n        </Stack>\n\n        <Stack grow horizontalAlign=\"center\" style={{\n        alignItems: 'flex-start',\n        fontFamily: 'Segoe UI'\n      }}>\n          <Text tabIndex={0} aria-live={'assertive'} aria-label={alertText ?? formattedMessageString}>\n            {alertText ?? strings?.incomingCallNotificationPlaceholderAlert ?? formattedMessageString}\n          </Text>\n        </Stack>\n        <IconButton ariaLabel={strings?.incomingCallNotificationDismissButtonAriaLabel ?? localeStrings.incomingCallNotificationDismissButtonAriaLabel} iconProps={{\n        iconName: 'cancel'\n      }} onClick={onDismiss} styles={dismissButtonStyle(theme)} />\n      </Stack>\n\n      <Stack horizontal horizontalAlign={'center'} tokens={{\n      childrenGap: '0.5rem'\n    }}>\n        <PrimaryButton styles={styles?.acceptButton ? styles.acceptButton : incomingCallAcceptButtonStyle(theme)} onClick={() => onAcceptWithAudio()} iconProps={{\n        iconName: 'IncomingCallNotificationAcceptIcon',\n        style: {\n          lineHeight: '1rem'\n        }\n      }} ariaLabel={strings?.incomingCallNoticicationAcceptWithAudioAriaLabel ?? localeStrings.incomingCallNoticicationAcceptWithAudioAriaLabel} menuProps={acceptManuOptions}>\n          {strings?.incomingCallNotificationAcceptButtonLabel ?? localeStrings.incomingCallNotificationAcceptButtonLabel}\n        </PrimaryButton>\n        <DefaultButton styles={styles?.rejectButton ? styles.rejectButton : incomingCallRejectButtonStyle(theme)} onClick={() => onReject()} iconProps={{\n        iconName: 'IncomingCallNotificationRejectIcon'\n      }} ariaLabel={strings?.incomingCallNoticicationRejectAriaLabel ?? localeStrings.incomingCallNoticicationRejectAriaLabel}>\n          {strings?.incomingCallNotificationRejectButtonLabel ?? localeStrings.incomingCallNotificationRejectButtonLabel}\n        </DefaultButton>\n      </Stack>\n    </Stack>;\n};\nconst incomingCallToastStyle = (theme: Theme): IStackStyles => {\n  return {\n    root: {\n      width: '20rem',\n      background: theme.palette.white,\n      opacity: 0.95,\n      borderRadius: '0.5rem',\n      boxShadow: theme.effects.elevation8,\n      padding: '1rem'\n    }\n  };\n};\nconst incomingCallToastAvatarContainerStyle: IStackStyles = {\n  root: {\n    marginRight: '0.5rem'\n  }\n};\nconst dismissButtonStyle = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      color: theme.palette.neutralPrimary,\n      width: '1rem',\n      height: '1rem'\n    },\n    rootHovered: {\n      color: theme.palette.neutralDark\n    }\n  };\n};\nconst incomingCallAcceptButtonStyle = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      color: theme.palette.white,\n      border: 'none',\n      borderRadius: theme.effects.roundedCorner4,\n      width: '100%',\n      maxWidth: '8.875rem'\n    },\n    rootHovered: {\n      color: theme.palette.white\n    },\n    icon: {\n      height: '1.25rem'\n    }\n  };\n};\nconst incomingCallRejectButtonStyle = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      borderRadius: theme.effects.roundedCorner4,\n      maxWidth: '8.875rem',\n      width: '100%'\n    },\n    icon: {\n      height: '1.25rem'\n    }\n  };\n};"]}
+{"version":3,"file":"IncomingCallNotification.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/IncomingCallNotification.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  DefaultButton,\n  IButtonStyles,\n  IconButton,\n  IStackStyles,\n  Persona,\n  PersonaSize,\n  PrimaryButton,\n  Stack,\n  Text,\n  Theme,\n  useTheme\n} from '@fluentui/react';\nimport { IContextualMenuProps } from '@fluentui/react';\nimport React from 'react';\nimport { useLocale } from '../localization';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/**\n * Strings for the incoming call notification component.\n *\n * @public\n */\nexport interface IncomingCallNotificationStrings {\n  /**\n   * Placeholder CallerID for the incoming call notification.\n   */\n  incomingCallNotificationPlaceholderId?: string;\n  /**\n   * Placeholder Alert for the incoming call notification.\n   */\n  incomingCallNotificationPlaceholderAlert?: string;\n  /**\n   * Aria label for the accept with audio button in the incoming call notification.\n   */\n  incomingCallNoticicationAcceptWithAudioAriaLabel?: string;\n  /**\n   * Aria label for the accept with video button in the incoming call notification.\n   */\n  incomingCallNoticicationAcceptWithVideoAriaLabel?: string;\n  /**\n   * Aria label for the reject button in the incoming call notification.\n   */\n  incomingCallNoticicationRejectAriaLabel?: string;\n  /**\n   * Label for the accept button in the incoming call notification.\n   */\n  incomingCallNotificationAcceptButtonLabel?: string;\n  /**\n   * Label for the accept with video button in the incoming call notification.\n   */\n  incomingCallNotificationAccceptWithVideoButtonLabel?: string;\n  /**\n   * label for the reject button in the incoming call notification.\n   */\n  incomingCallNotificationRejectButtonLabel?: string;\n  /**\n   * Aria label for the incoming call dismiss button\n   */\n  incomingCallNotificationDismissButtonAriaLabel?: string;\n}\n\n/**\n * Styles for the incoming call notification component.\n *\n * @public\n */\nexport interface IncomingCallNotificationStyles {\n  /**\n   * Styles for the accept buttons.\n   */\n  acceptButton?: IButtonStyles;\n  /**\n   * Styles for the reject button.\n   */\n  rejectButton?: IButtonStyles;\n  /**\n   * Styles for the root container.\n   */\n  root?: IStackStyles;\n  /**\n   * Styles for the avatar container.\n   */\n  avatarContainer?: IStackStyles;\n}\n\n/**\n * Properties for the incoming call notification component.\n *\n * @public\n */\nexport interface IncomingCallNotificationProps {\n  /**\n   * Caller's Name\n   */\n  callerName?: string;\n  /**\n   * Alert Text\"\n   */\n  alertText?: string;\n  /**\n   * URL to the avatar image for the user\n   */\n  avatarImage?: string;\n  /**\n   * Size of the persona coin\n   */\n  personaSize?: number;\n  /**\n   * Callback to render the avatar\n   */\n  onRenderAvatar?: () => JSX.Element;\n  /**\n   * Callback to accept the call with audio\n   */\n  onAcceptWithAudio: () => void;\n  /**\n   * Callback to accept the call with Video\n   */\n  onAcceptWithVideo: () => void;\n  /**\n   * Callback to reject the call\n   */\n  onReject: () => void;\n  /**\n   * Callback when the notification is dismissed\n   */\n  onDismiss?: () => void;\n  /**\n   * Styles for the incoming call notification component.\n   */\n  styles?: IncomingCallNotificationStyles;\n  /**\n   * Strings for the incoming call notification component.\n   */\n  strings?: IncomingCallNotificationStrings;\n  /**\n   * Options for whether to show the accept with video button\n   */\n  acceptOptions: {\n    showAcceptWithVideo: boolean;\n  };\n}\n\n/**\n * A Notification component that is to be used to represent incoming calls to the end user.\n * Allows the user to accept or reject the incoming call.\n * @public\n */\nexport const IncomingCallNotification = (props: IncomingCallNotificationProps): JSX.Element => {\n  const {\n    callerName,\n    alertText,\n    avatarImage,\n    onAcceptWithAudio,\n    onAcceptWithVideo,\n    onReject,\n    onDismiss,\n    personaSize,\n    styles,\n    strings,\n    acceptOptions\n  } = props;\n  const theme = useTheme();\n\n  const localeStrings = useLocale().strings.IncomingCallNotification;\n\n  const formattedMessageString =\n    localeStrings.incomingCallNotificationPlaceholderAlert && callerName\n      ? _formatString(localeStrings.incomingCallNotificationPlaceholderAlert, { callerName: callerName })\n      : callerName;\n\n  const acceptManuOptions: IContextualMenuProps | undefined = acceptOptions.showAcceptWithVideo\n    ? {\n        items: [\n          {\n            key: 'audio',\n            text:\n              strings?.incomingCallNotificationAcceptButtonLabel ??\n              localeStrings.incomingCallNotificationAcceptButtonLabel,\n            onClick: () => onAcceptWithAudio()\n          },\n          {\n            key: 'video',\n            text:\n              strings?.incomingCallNotificationAccceptWithVideoButtonLabel ??\n              localeStrings.incomingCallNotificationAccceptWithVideoButtonLabel,\n            onClick: () => onAcceptWithVideo()\n          }\n        ]\n      }\n    : undefined;\n\n  return (\n    <Stack\n      tokens={{ childrenGap: '0.5rem' }}\n      verticalAlign=\"center\"\n      styles={styles?.root ? styles.root : incomingCallToastStyle(theme)}\n    >\n      <Stack horizontal verticalAlign=\"center\" tokens={{ childrenGap: personaSize ? '0.5rem' : '0rem' }}>\n        <Stack\n          horizontalAlign=\"start\"\n          styles={styles?.avatarContainer ? styles.avatarContainer : incomingCallToastAvatarContainerStyle}\n        >\n          <Persona\n            imageUrl={avatarImage}\n            text={callerName}\n            size={PersonaSize.size24}\n            coinSize={personaSize}\n            hidePersonaDetails={true}\n            aria-label={callerName}\n          />\n        </Stack>\n\n        <Stack grow horizontalAlign=\"center\" style={{ alignItems: 'flex-start', fontFamily: 'Segoe UI' }}>\n          <Text tabIndex={0} aria-live={'assertive'} aria-label={alertText ?? formattedMessageString}>\n            {alertText ?? strings?.incomingCallNotificationPlaceholderAlert ?? formattedMessageString}\n          </Text>\n        </Stack>\n        <IconButton\n          ariaLabel={\n            strings?.incomingCallNotificationDismissButtonAriaLabel ??\n            localeStrings.incomingCallNotificationDismissButtonAriaLabel\n          }\n          iconProps={{ iconName: 'cancel' }}\n          onClick={onDismiss}\n          styles={dismissButtonStyle(theme)}\n        />\n      </Stack>\n\n      <Stack horizontal horizontalAlign={'center'} tokens={{ childrenGap: '0.5rem' }}>\n        <PrimaryButton\n          styles={styles?.acceptButton ? styles.acceptButton : incomingCallAcceptButtonStyle(theme)}\n          onClick={() => onAcceptWithAudio()}\n          iconProps={{ iconName: 'IncomingCallNotificationAcceptIcon', style: { lineHeight: '1rem' } }}\n          ariaLabel={\n            strings?.incomingCallNoticicationAcceptWithAudioAriaLabel ??\n            localeStrings.incomingCallNoticicationAcceptWithAudioAriaLabel\n          }\n          menuProps={acceptManuOptions}\n        >\n          {strings?.incomingCallNotificationAcceptButtonLabel ??\n            localeStrings.incomingCallNotificationAcceptButtonLabel}\n        </PrimaryButton>\n        <DefaultButton\n          styles={styles?.rejectButton ? styles.rejectButton : incomingCallRejectButtonStyle(theme)}\n          onClick={() => onReject()}\n          iconProps={{ iconName: 'IncomingCallNotificationRejectIcon' }}\n          ariaLabel={\n            strings?.incomingCallNoticicationRejectAriaLabel ?? localeStrings.incomingCallNoticicationRejectAriaLabel\n          }\n        >\n          {strings?.incomingCallNotificationRejectButtonLabel ??\n            localeStrings.incomingCallNotificationRejectButtonLabel}\n        </DefaultButton>\n      </Stack>\n    </Stack>\n  );\n};\n\nconst incomingCallToastStyle = (theme: Theme): IStackStyles => {\n  return {\n    root: {\n      width: '20rem',\n      background: theme.palette.white,\n      opacity: 0.95,\n      borderRadius: '0.5rem',\n      boxShadow: theme.effects.elevation8,\n      padding: '1rem'\n    }\n  };\n};\n\nconst incomingCallToastAvatarContainerStyle: IStackStyles = {\n  root: {\n    marginRight: '0.5rem'\n  }\n};\n\nconst dismissButtonStyle = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      color: theme.palette.neutralPrimary,\n      width: '1rem',\n      height: '1rem'\n    },\n    rootHovered: {\n      color: theme.palette.neutralDark\n    }\n  };\n};\n\nconst incomingCallAcceptButtonStyle = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      color: theme.palette.white,\n      border: 'none',\n      borderRadius: theme.effects.roundedCorner4,\n      width: '100%',\n      maxWidth: '8.875rem'\n    },\n    rootHovered: {\n      color: theme.palette.white\n    },\n    icon: {\n      height: '1.25rem'\n    }\n  };\n};\n\nconst incomingCallRejectButtonStyle = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      borderRadius: theme.effects.roundedCorner4,\n      maxWidth: '8.875rem',\n      width: '100%'\n    },\n    icon: {\n      height: '1.25rem'\n    }\n  };\n};\n"]}

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

@@ -11,12 +11,10 @@ import React from 'react';
  */
 export const IncomingCallStack = (props) => {
     const { activeIncomingCalls, removedIncomingCalls, onAcceptCall, onRejectCall, styles, strings, tabIndex } = props;
-    return React.createElement(Stack, { tokens: {
-            childrenGap: '0.25rem'
-        }, role: 'group', tabIndex: tabIndex }, activeIncomingCalls.filter(incomingCall => !removedIncomingCalls.some(call => call.id === incomingCall.id)).map(incomingCall => {
-        return React.createElement(IncomingCallNotification, { key: incomingCall.id, callerName: incomingCall.callerInfo.displayName, onAcceptWithAudio: () => onAcceptCall(incomingCall.id), onAcceptWithVideo: () => onAcceptCall(incomingCall.id, true), onReject: () => onRejectCall(incomingCall.id), onDismiss: () => onRejectCall(incomingCall.id), styles: styles, strings: strings, acceptOptions: {
-                showAcceptWithVideo: incomingCall.videoAvailable
-            } });
-    }));
+    return (React.createElement(Stack, { tokens: { childrenGap: '0.25rem' }, role: 'group', tabIndex: tabIndex }, activeIncomingCalls
+        .filter((incomingCall) => !removedIncomingCalls.some((call) => call.id === incomingCall.id))
+        .map((incomingCall) => {
+        return (React.createElement(IncomingCallNotification, { key: incomingCall.id, callerName: incomingCall.callerInfo.displayName, onAcceptWithAudio: () => onAcceptCall(incomingCall.id), onAcceptWithVideo: () => onAcceptCall(incomingCall.id, true), onReject: () => onRejectCall(incomingCall.id), onDismiss: () => onRejectCall(incomingCall.id), styles: styles, strings: strings, acceptOptions: { showAcceptWithVideo: incomingCall.videoAvailable } }));
+    })));
 };
 //# sourceMappingURL=IncomingCallStack.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"IncomingCallStack.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/IncomingCallStack.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,KAAK,MAAM,OAAO,CAAC;AAkE1B;;;;;GAKG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;IAC9E,MAAM,EACJ,mBAAmB,EACnB,oBAAoB,EACpB,YAAY,EACZ,YAAY,EACZ,MAAM,EACN,OAAO,EACP,QAAQ,EACT,GAAG,KAAK,CAAC;IACV,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE;YACpB,WAAW,EAAE,SAAS;SACvB,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,IAC/B,mBAAmB,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,YAAY,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE;QAChI,OAAO,oBAAC,wBAAwB,IAAC,GAAG,EAAE,YAAY,CAAC,EAAE,EAAE,UAAU,EAAE,YAAY,CAAC,UAAU,CAAC,WAAW,EAAE,iBAAiB,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC,EAAE,iBAAiB,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE;gBAC5W,mBAAmB,EAAE,YAAY,CAAC,cAAc;aACjD,GAA6B,CAAC;IACjC,CAAC,CAAC,CACM,CAAC;AACb,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IncomingCallNotification } from './IncomingCallNotification';\nimport { IncomingCallNotificationStyles, IncomingCallNotificationStrings } from './IncomingCallNotification';\nimport { Stack } from '@fluentui/react';\nimport React from 'react';\n\n/**\n * Represents an active incoming call.\n * @public\n */\nexport interface IncomingCallStackCall {\n  /**\n   * Unique identifier for the incoming call.\n   */\n  id: string;\n  /**\n   * Information about the caller.\n   */\n  callerInfo: {\n    /**\n     * Display name of the caller.\n     */\n    displayName?: string;\n  };\n  /**\n   * Whether or not the call is a voip capable call.\n   */\n  videoAvailable: boolean;\n}\n/**\n * Props for the IncomingCallManager component.\n * @public\n */\nexport interface IncomingCallStackProps {\n  /**\n   * List of incoming calls.\n   */\n  activeIncomingCalls: IncomingCallStackCall[];\n  /**\n   * List of incoming calls that have ended.\n   */\n  removedIncomingCalls: IncomingCallStackCall[];\n  /**\n   * Handler to accept the incoming call.\n   * @param incomingCallId - Id of the incoming call to accept.\n   * @param useVideo - Whether to accept with video.\n   * @returns void\n   */\n  onAcceptCall: (incomingCallId: string, useVideo?: boolean) => void;\n  /**\n   * Handler to reject the incoming call.\n   * @param incomingCallId - id of the incoming call to reject\n   * @returns - void\n   */\n  onRejectCall: (incomingCallId: string) => void;\n  /**\n   * Styles for the incoming call notifications.\n   */\n  styles?: IncomingCallNotificationStyles;\n  /**\n   * Strings for the incoming call notifications.\n   */\n  strings?: IncomingCallNotificationStrings;\n  /**\n   * Tab index for the incoming Call stack, this will set the tab order of the\n   * incoming call notifications in your application.\n   */\n  tabIndex?: number;\n}\n\n/**\n * Wrapper to manage multiple incoming calls\n * @param props - {@link IncomingCallManagerProps}\n * @returns\n * @public\n */\nexport const IncomingCallStack = (props: IncomingCallStackProps): JSX.Element => {\n  const {\n    activeIncomingCalls,\n    removedIncomingCalls,\n    onAcceptCall,\n    onRejectCall,\n    styles,\n    strings,\n    tabIndex\n  } = props;\n  return <Stack tokens={{\n    childrenGap: '0.25rem'\n  }} role={'group'} tabIndex={tabIndex}>\n      {activeIncomingCalls.filter(incomingCall => !removedIncomingCalls.some(call => call.id === incomingCall.id)).map(incomingCall => {\n      return <IncomingCallNotification key={incomingCall.id} callerName={incomingCall.callerInfo.displayName} onAcceptWithAudio={() => onAcceptCall(incomingCall.id)} onAcceptWithVideo={() => onAcceptCall(incomingCall.id, true)} onReject={() => onRejectCall(incomingCall.id)} onDismiss={() => onRejectCall(incomingCall.id)} styles={styles} strings={strings} acceptOptions={{\n        showAcceptWithVideo: incomingCall.videoAvailable\n      }}></IncomingCallNotification>;\n    })}\n    </Stack>;\n};"]}
+{"version":3,"file":"IncomingCallStack.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/IncomingCallStack.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,KAAK,MAAM,OAAO,CAAC;AAkE1B;;;;;GAKG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;IAC9E,MAAM,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACnH,OAAO,CACL,oBAAC,KAAK,IAAC,MAAM,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,IACzE,mBAAmB;SACjB,MAAM,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,YAAY,CAAC,EAAE,CAAC,CAAC;SAC3F,GAAG,CAAC,CAAC,YAAY,EAAE,EAAE;QACpB,OAAO,CACL,oBAAC,wBAAwB,IACvB,GAAG,EAAE,YAAY,CAAC,EAAE,EACpB,UAAU,EAAE,YAAY,CAAC,UAAU,CAAC,WAAW,EAC/C,iBAAiB,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC,EACtD,iBAAiB,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,EAAE,IAAI,CAAC,EAC5D,QAAQ,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC,EAC7C,SAAS,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC,EAC9C,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,EAAE,mBAAmB,EAAE,YAAY,CAAC,cAAc,EAAE,GACzC,CAC7B,CAAC;IACJ,CAAC,CAAC,CACE,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IncomingCallNotification } from './IncomingCallNotification';\nimport { IncomingCallNotificationStyles, IncomingCallNotificationStrings } from './IncomingCallNotification';\nimport { Stack } from '@fluentui/react';\nimport React from 'react';\n\n/**\n * Represents an active incoming call.\n * @public\n */\nexport interface IncomingCallStackCall {\n  /**\n   * Unique identifier for the incoming call.\n   */\n  id: string;\n  /**\n   * Information about the caller.\n   */\n  callerInfo: {\n    /**\n     * Display name of the caller.\n     */\n    displayName?: string;\n  };\n  /**\n   * Whether or not the call is a voip capable call.\n   */\n  videoAvailable: boolean;\n}\n/**\n * Props for the IncomingCallManager component.\n * @public\n */\nexport interface IncomingCallStackProps {\n  /**\n   * List of incoming calls.\n   */\n  activeIncomingCalls: IncomingCallStackCall[];\n  /**\n   * List of incoming calls that have ended.\n   */\n  removedIncomingCalls: IncomingCallStackCall[];\n  /**\n   * Handler to accept the incoming call.\n   * @param incomingCallId - Id of the incoming call to accept.\n   * @param useVideo - Whether to accept with video.\n   * @returns void\n   */\n  onAcceptCall: (incomingCallId: string, useVideo?: boolean) => void;\n  /**\n   * Handler to reject the incoming call.\n   * @param incomingCallId - id of the incoming call to reject\n   * @returns - void\n   */\n  onRejectCall: (incomingCallId: string) => void;\n  /**\n   * Styles for the incoming call notifications.\n   */\n  styles?: IncomingCallNotificationStyles;\n  /**\n   * Strings for the incoming call notifications.\n   */\n  strings?: IncomingCallNotificationStrings;\n  /**\n   * Tab index for the incoming Call stack, this will set the tab order of the\n   * incoming call notifications in your application.\n   */\n  tabIndex?: number;\n}\n\n/**\n * Wrapper to manage multiple incoming calls\n * @param props - {@link IncomingCallManagerProps}\n * @returns\n * @public\n */\nexport const IncomingCallStack = (props: IncomingCallStackProps): JSX.Element => {\n  const { activeIncomingCalls, removedIncomingCalls, onAcceptCall, onRejectCall, styles, strings, tabIndex } = props;\n  return (\n    <Stack tokens={{ childrenGap: '0.25rem' }} role={'group'} tabIndex={tabIndex}>\n      {activeIncomingCalls\n        .filter((incomingCall) => !removedIncomingCalls.some((call) => call.id === incomingCall.id))\n        .map((incomingCall) => {\n          return (\n            <IncomingCallNotification\n              key={incomingCall.id}\n              callerName={incomingCall.callerInfo.displayName}\n              onAcceptWithAudio={() => onAcceptCall(incomingCall.id)}\n              onAcceptWithVideo={() => onAcceptCall(incomingCall.id, true)}\n              onReject={() => onRejectCall(incomingCall.id)}\n              onDismiss={() => onRejectCall(incomingCall.id)}\n              styles={styles}\n              strings={strings}\n              acceptOptions={{ showAcceptWithVideo: incomingCall.videoAvailable }}\n            ></IncomingCallNotification>\n          );\n        })}\n    </Stack>\n  );\n};\n"]}

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

@@ -13,27 +13,20 @@ export const InputBoxButton = (props) => {
     const [isHover, setIsHover] = useState(false);
     const mergedButtonStyle = mergeStyles(inputBoxButtonStyle, 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: inputBoxButtonTooltipStyle, content: tooltipContent, calloutProps: Object.assign({}, calloutProps) },
+    return (React.createElement(TooltipHost, { hostClassName: inputBoxButtonTooltipStyle, content: tooltipContent, calloutProps: Object.assign({}, calloutProps) },
         React.createElement(IconButton, { className: mergedButtonStyle, ariaLabel: ariaLabel, onClick: onClick, id: id, onMouseEnter: () => {
                 setIsHover(true);
             }, onMouseLeave: () => {
                 setIsHover(false);
             }, 
             // 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)), "data-testid": dataTestId, "aria-expanded": ariaExpanded, disabled: disabled, allowDisabledFocus: true }));
+            onRenderIcon: () => React.createElement(Stack, { className: iconWrapperStyle }, onRenderIcon(isHover)), "data-testid": dataTestId, "aria-expanded": ariaExpanded, disabled: disabled, allowDisabledFocus: true })));
 };
 //# sourceMappingURL=InputBoxButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InputBoxButton.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/InputBoxButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAyB,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC/G,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;AAmBlH;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAA0B,EAAe,EAAE;IACxE,MAAM,EACJ,YAAY,EACZ,OAAO,EACP,SAAS,EACT,SAAS,EACT,EAAE,EACF,cAAc,EACd,aAAa,EAAE,UAAU,EACzB,QAAQ,EACR,YAAY,EACb,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,iBAAiB,GAAG,WAAW,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC;IACtE,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,YAAY,GAAmC;QACnD,IAAI,EAAE;YACJ,OAAO,EAAE,CAAC;SACX;QACD,WAAW,EAAE;YACX,OAAO,EAAE,QAAQ;SAClB;KACF,CAAC;IAEF,uDAAuD;IACvD,MAAM,YAAY,GAAG;QACnB,QAAQ,EAAE,CAAC;QACX,MAAM,EAAE,YAAY;QACpB,eAAe,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;KACzE,CAAC;IACF,OAAO,oBAAC,WAAW,IAAC,aAAa,EAAE,0BAA0B,EAAE,OAAO,EAAE,cAAc,EAAE,YAAY,oBAC/F,YAAY;QAEb,oBAAC,UAAU,IAAC,SAAS,EAAE,iBAAiB,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,YAAY,EAAE,GAAG,EAAE;gBAC7G,UAAU,CAAC,IAAI,CAAC,CAAC;YACnB,CAAC,EAAE,YAAY,EAAE,GAAG,EAAE;gBACpB,UAAU,CAAC,KAAK,CAAC,CAAC;YACpB,CAAC;YACD,yJAAyJ;YACzJ,YAAY,EAAE,GAAG,EAAE,CAAC,oBAAC,KAAK,IAAC,SAAS,EAAE,gBAAgB,IAAG,YAAY,CAAC,OAAO,CAAC,CAAS,iBAAe,UAAU,mBAAiB,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,kBAAkB,EAAE,IAAI,GAAI,CACjL,CAAC;AACnB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ICalloutContentStyles, IconButton, Stack, TooltipHost, mergeStyles, useTheme } from '@fluentui/react';\nimport { useState } from 'react';\nimport { isDarkThemed } from '../theming/themeUtils';\nimport React from 'react';\nimport { iconWrapperStyle, inputBoxButtonStyle, inputBoxButtonTooltipStyle } from './styles/InputBoxButton.style';\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  'data-testId'?: string;\n  disabled?: boolean;\n  ariaExpanded?: boolean;\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    'data-testId': dataTestId,\n    disabled,\n    ariaExpanded\n  } = props;\n  const [isHover, setIsHover] = useState(false);\n  const mergedButtonStyle = mergeStyles(inputBoxButtonStyle, 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={inputBoxButtonTooltipStyle} 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>} data-testid={dataTestId} aria-expanded={ariaExpanded} disabled={disabled} allowDisabledFocus={true} />\n    </TooltipHost>;\n};"]}
+{"version":3,"file":"InputBoxButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/InputBoxButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAyB,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC/G,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;AAmBlH;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAA0B,EAAe,EAAE;IACxE,MAAM,EACJ,YAAY,EACZ,OAAO,EACP,SAAS,EACT,SAAS,EACT,EAAE,EACF,cAAc,EACd,aAAa,EAAE,UAAU,EACzB,QAAQ,EACR,YAAY,EACb,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,iBAAiB,GAAG,WAAW,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC;IAEtE,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,YAAY,GAAmC,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,CAAC;IAElH,uDAAuD;IACvD,MAAM,YAAY,GAAG;QACnB,QAAQ,EAAE,CAAC;QACX,MAAM,EAAE,YAAY;QACpB,eAAe,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;KACzE,CAAC;IACF,OAAO,CACL,oBAAC,WAAW,IAAC,aAAa,EAAE,0BAA0B,EAAE,OAAO,EAAE,cAAc,EAAE,YAAY,oBAAO,YAAY;QAC9G,oBAAC,UAAU,IACT,SAAS,EAAE,iBAAiB,EAC5B,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,EAAE,EAAE,EAAE,EACN,YAAY,EAAE,GAAG,EAAE;gBACjB,UAAU,CAAC,IAAI,CAAC,CAAC;YACnB,CAAC,EACD,YAAY,EAAE,GAAG,EAAE;gBACjB,UAAU,CAAC,KAAK,CAAC,CAAC;YACpB,CAAC;YACD,yJAAyJ;YACzJ,YAAY,EAAE,GAAG,EAAE,CAAC,oBAAC,KAAK,IAAC,SAAS,EAAE,gBAAgB,IAAG,YAAY,CAAC,OAAO,CAAC,CAAS,iBAC1E,UAAU,mBACR,YAAY,EAC3B,QAAQ,EAAE,QAAQ,EAClB,kBAAkB,EAAE,IAAI,GACxB,CACU,CACf,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ICalloutContentStyles, IconButton, Stack, TooltipHost, mergeStyles, useTheme } from '@fluentui/react';\nimport { useState } from 'react';\nimport { isDarkThemed } from '../theming/themeUtils';\nimport React from 'react';\nimport { iconWrapperStyle, inputBoxButtonStyle, inputBoxButtonTooltipStyle } from './styles/InputBoxButton.style';\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  'data-testId'?: string;\n  disabled?: boolean;\n  ariaExpanded?: boolean;\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    'data-testId': dataTestId,\n    disabled,\n    ariaExpanded\n  } = props;\n  const [isHover, setIsHover] = useState(false);\n  const mergedButtonStyle = mergeStyles(inputBoxButtonStyle, 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={inputBoxButtonTooltipStyle} 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        // 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        data-testid={dataTestId}\n        aria-expanded={ariaExpanded}\n        disabled={disabled}\n        allowDisabledFocus={true}\n      />\n    </TooltipHost>\n  );\n};\n"]}

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

@@ -1,6 +1,7 @@
 import React, { ReactNode, FormEvent } from 'react';
 import { IStyle, ITextField } from '@fluentui/react';
 import { BaseCustomStyles } from '../types';
+import { MentionLookupOptions } from './MentionPopover';
 /**
  * @private
  */
@@ -29,6 +30,7 @@ type InputBoxComponentProps = {
     disabled?: boolean;
     styles?: InputBoxStylesProps;
     autoFocus?: 'sendBoxTextField';
+    mentionLookupOptions?: MentionLookupOptions;
 };
 /**
  * @private

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

@@ -4,6 +4,8 @@ import React, { useCallback } from 'react';
 import { Stack, TextField, mergeStyles, concatStyleSets } from '@fluentui/react';
 import { isEnterKeyEventFromCompositionSession } from './utils';
 import { inputBoxStyle, inputBoxWrapperStyle, textFieldStyle, textContainerStyle } from './styles/InputBoxComponent.style';
+/* @conditional-compile-remove(mention) */
+import { TextFieldWithMention } from './TextFieldWithMention/TextFieldWithMention';
 /**
  * @private
  */
@@ -50,17 +52,31 @@ export const InputBoxComponent = (props) => {
             errorMessage,
             onRenderSuffix: props.children ? onRenderChildren : undefined
         };
-        return React.createElement("div", { style: textFieldProps.errorMessage ? {
-                padding: '0 0 5px 5px'
-            } : undefined },
-            React.createElement(TextField, Object.assign({}, textFieldProps, { "data-ui-id": dataUiId, value: textValue, onChange: onChange, onKeyDown: onTextFieldKeyDown, onFocus: e => {
+        /* @conditional-compile-remove(mention) */
+        const textFieldWithMentionProps = {
+            textFieldProps: textFieldProps,
+            dataUiId: dataUiId,
+            textValue: textValue,
+            onChange: onChange,
+            onKeyDown: onKeyDown,
+            onEnterKeyDown: onEnterKeyDown,
+            textFieldRef: textFieldRef,
+            supportNewline: supportNewline,
+            mentionLookupOptions: props.mentionLookupOptions
+        };
+        /* @conditional-compile-remove(mention) */
+        if (props.mentionLookupOptions) {
+            return React.createElement(TextFieldWithMention, Object.assign({}, textFieldWithMentionProps));
+        }
+        return (React.createElement("div", { style: textFieldProps.errorMessage ? { padding: '0 0 5px 5px' } : undefined },
+            React.createElement(TextField, Object.assign({}, textFieldProps, { "data-ui-id": dataUiId, value: textValue, onChange: onChange, onKeyDown: onTextFieldKeyDown, onFocus: (e) => {
                     // Fix for setting the cursor to the correct position when multiline is true
                     // This approach should be reviewed during migration to FluentUI v9
                     e.currentTarget.value = '';
                     e.currentTarget.value = textValue;
-                } })));
+                } }))));
     };
-    return React.createElement(Stack, { className: mergedRootStyle },
-        React.createElement("div", { className: mergedTextContainerStyle }, renderTextField()));
+    return (React.createElement(Stack, { className: mergedRootStyle },
+        React.createElement("div", { className: mergedTextContainerStyle }, renderTextField())));
 };
 //# sourceMappingURL=InputBoxComponent.js.map