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

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

@@ -1,10 +1,11 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 import { DefaultButton, Icon, Stack, mergeStyles } from '@fluentui/react';
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useTheme } from '../theming';
 import { rootStyle, childrenContainerStyle, leftRightButtonStyles } from './styles/HorizontalGallery.styles';
 import { useIdentifiers } from '../identifiers';
+import { bucketize } from './utils/overFlowGalleriesUtils';
 /**
  * {@link HorizontalGallery} default children per page
  */
@@ -15,42 +16,46 @@ const DEFAULT_CHILDREN_PER_PAGE = 5;
  * @returns
  */
 export const HorizontalGallery = (props) => {
-    var _a, _b;
-    const { children, childrenPerPage = DEFAULT_CHILDREN_PER_PAGE, styles } = props;
+    var _a;
+    const { children, childrenPerPage = DEFAULT_CHILDREN_PER_PAGE, styles, onFetchTilesToRender } = props;
     const ids = useIdentifiers();
     const [page, setPage] = useState(0);
     const numberOfChildren = React.Children.count(children);
     const lastPage = Math.ceil(numberOfChildren / childrenPerPage) - 1;
-    const paginatedChildren = useMemo(() => {
-        return bucketize(React.Children.toArray(children), childrenPerPage);
-    }, [children, childrenPerPage]);
-    // If children per page is 0 or less return empty element
-    if (childrenPerPage <= 0) {
-        return React.createElement(React.Fragment, null);
-    }
+    const indexesArray = useMemo(() => {
+        return bucketize([...Array(numberOfChildren).keys()], childrenPerPage);
+    }, [numberOfChildren, childrenPerPage]);
+    useEffect(() => {
+        if (onFetchTilesToRender && indexesArray) {
+            onFetchTilesToRender(indexesArray[page]);
+        }
+    }, [indexesArray, onFetchTilesToRender, page]);
     const firstIndexOfCurrentPage = page * childrenPerPage;
     const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;
-    const childrenOnCurrentPage = paginatedChildren[clippedPage];
+    const childrenOnCurrentPage = useMemo(() => {
+        return indexesArray[clippedPage].map((index) => {
+            return 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 };
+    }, [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.horizontalGalleryLeftNavButton })),
-        React.createElement(Stack, { horizontal: true, className: mergeStyles(childrenContainerStyle, { '> *': (_b = props.styles) === null || _b === void 0 ? void 0 : _b.children }) }, childrenOnCurrentPage),
-        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.horizontalGalleryRightNavButton }))));
+        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));
+        })),
+        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));
 };
-function bucketize(arr, bucketSize) {
-    const bucketArray = [];
-    if (bucketSize <= 0) {
-        return bucketArray;
-    }
-    for (let i = 0; i < arr.length; i += bucketSize) {
-        bucketArray.push(arr.slice(i, i + bucketSize));
-    }
-    return bucketArray;
-}
 //# 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":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,aAAa,EAAE,IAAI,EAAU,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAClF,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,SAAS,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAC;AAC7G,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAEhD;;GAEG;AACH,MAAM,yBAAyB,GAAG,CAAC,CAAC;AA+BpC;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;;IAC9E,MAAM,EAAE,QAAQ,EAAE,eAAe,GAAG,yBAAyB,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAEhF,MAAM,GAAG,GAAG,cAAc,EAAE,CAAC;IAE7B,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEpC,MAAM,gBAAgB,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACxD,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,GAAG,eAAe,CAAC,GAAG,CAAC,CAAC;IAEnE,MAAM,iBAAiB,GAAwB,OAAO,CAAC,GAAG,EAAE;QAC1D,OAAO,SAAS,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,eAAe,CAAC,CAAC;IACtE,CAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAC;IAEhC,yDAAyD;IACzD,IAAI,eAAe,IAAI,CAAC,EAAE;QACxB,OAAO,yCAAK,CAAC;KACd;IAED,MAAM,uBAAuB,GAAG,IAAI,GAAG,eAAe,CAAC;IACvD,MAAM,WAAW,GAAG,uBAAuB,GAAG,gBAAgB,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IACrF,MAAM,qBAAqB,GAAG,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAE7D,MAAM,WAAW,GAAG,gBAAgB,GAAG,eAAe,CAAC;IACvD,MAAM,qBAAqB,GAAG,IAAI,KAAK,CAAC,CAAC;IACzC,MAAM,iBAAiB,GAAG,IAAI,KAAK,QAAQ,CAAC;IAE5C,OAAO,CACL,oBAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,WAAW,CAAC,SAAS,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,CAAC;QACpE,WAAW,IAAI,CACd,oBAAC,iCAAiC,IAChC,GAAG,EAAC,qBAAqB,EACzB,IAAI,EAAE,oBAAC,IAAI,IAAC,QAAQ,EAAC,6BAA6B,GAAG,EACrD,MAAM,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,cAAc,EAC9B,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,EACjE,QAAQ,EAAE,qBAAqB,EAC/B,UAAU,EAAE,GAAG,CAAC,8BAA8B,GAC9C,CACH;QACD,oBAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,WAAW,CAAC,sBAAsB,EAAE,EAAE,KAAK,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,QAAQ,EAAE,CAAC,IAChG,qBAAqB,CAChB;QACP,WAAW,IAAI,CACd,oBAAC,iCAAiC,IAChC,GAAG,EAAC,iBAAiB,EACrB,IAAI,EAAE,oBAAC,IAAI,IAAC,QAAQ,EAAC,8BAA8B,GAAG,EACtD,MAAM,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,EAC1B,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,EACpD,QAAQ,EAAE,iBAAiB,EAC3B,UAAU,EAAE,GAAG,CAAC,+BAA+B,GAC/C,CACH,CACK,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,iCAAiC,GAAG,CAAC,KAM1C,EAAe,EAAE;IAChB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,OAAO,CACL,oBAAC,aAAa,IACZ,SAAS,EAAE,WAAW,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,EAClE,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ,gBACZ,KAAK,CAAC,UAAU,IAE3B,KAAK,CAAC,IAAI,CACG,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,SAAS,SAAS,CAAI,GAAQ,EAAE,UAAkB;IAChD,MAAM,WAAW,GAAU,EAAE,CAAC;IAE9B,IAAI,UAAU,IAAI,CAAC,EAAE;QACnB,OAAO,WAAW,CAAC;KACpB;IAED,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,MAAM,EAAE,CAAC,IAAI,UAAU,EAAE;QAC/C,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC;KAChD;IAED,OAAO,WAAW,CAAC;AACrB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { DefaultButton, Icon, IStyle, Stack, mergeStyles } from '@fluentui/react';\nimport React, { useMemo, useState } from 'react';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles } from '../types';\nimport { rootStyle, childrenContainerStyle, leftRightButtonStyles } from './styles/HorizontalGallery.styles';\nimport { useIdentifiers } from '../identifiers';\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\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 } = 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 paginatedChildren: React.ReactNode[][] = useMemo(() => {\n    return bucketize(React.Children.toArray(children), childrenPerPage);\n  }, [children, childrenPerPage]);\n\n  // If children per page is 0 or less return empty element\n  if (childrenPerPage <= 0) {\n    return <></>;\n  }\n\n  const firstIndexOfCurrentPage = page * childrenPerPage;\n  const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;\n  const childrenOnCurrentPage = paginatedChildren[clippedPage];\n\n  const showButtons = numberOfChildren > childrenPerPage;\n  const disablePreviousButton = page === 0;\n  const disableNextButton = page === lastPage;\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.horizontalGalleryLeftNavButton}\n        />\n      )}\n      <Stack horizontal className={mergeStyles(childrenContainerStyle, { '> *': props.styles?.children })}>\n        {childrenOnCurrentPage}\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.horizontalGalleryRightNavButton}\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\nfunction bucketize<T>(arr: T[], bucketSize: number): T[][] {\n  const bucketArray: T[][] = [];\n\n  if (bucketSize <= 0) {\n    return bucketArray;\n  }\n\n  for (let i = 0; i < arr.length; i += bucketSize) {\n    bucketArray.push(arr.slice(i, i + bucketSize));\n  }\n\n  return bucketArray;\n}\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    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"]}

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

@@ -2,8 +2,11 @@
 import { IStyle } from '@fluentui/react';
 import { ComponentSlotStyle } from '@fluentui/react-northstar';
 import { BaseCustomStyles, ChatMessage, CustomMessage, SystemMessage, OnRenderAvatarCallback, Message, ReadReceiptsBySenderId } from '../types';
+import { BlockedMessage } from '../types';
 import { MessageStatusIndicatorProps } from './MessageStatusIndicator';
-import { FileDownloadHandler, FileMetadata } from './FileDownloadCards';
+import { FileDownloadHandler } from './FileDownloadCards';
+import { FileMetadata } from './FileDownloadCards';
+import { AttachmentDownloadResult } from './FileDownloadCards';
 /**
  * Fluent styles for {@link MessageThread}.
  *
@@ -28,6 +31,8 @@ export interface MessageThreadStyles extends BaseCustomStyles {
     chatMessageContainer?: ComponentSlotStyle;
     /** Styles for system message container. */
     systemMessageContainer?: ComponentSlotStyle;
+    /** Styles for blocked message container. */
+    blockedMessageContainer?: ComponentSlotStyle;
     /** Styles for message status indicator container. */
     messageStatusContainer?: (mine: boolean) => IStyle;
 }
@@ -91,6 +96,10 @@ export interface MessageThreadStrings {
     actionMenuMoreOptions?: string;
     /** String for download file button in file card */
     downloadFile: string;
+    /** String for policy violation message removal */
+    blockedWarningText: string;
+    /** String for policy violation message removal details link */
+    blockedWarningLinkText: string;
 }
 /**
  * Arguments for {@link MessageThreadProps.onRenderJumpToNewMessageButton}.
@@ -116,6 +125,11 @@ export declare type MessageRenderer = (props: MessageProps) => JSX.Element;
 export declare type UpdateMessageCallback = (messageId: string, content: string, metadata?: Record<string, string>, options?: {
     attachedFilesMetadata?: FileMetadata[];
 }) => Promise<void>;
+/**
+ * @public
+ * Callback function run when a message edit is cancelled.
+ */
+export declare type CancelEditCallback = (messageId: string) => void;
 /**
  * Props for {@link MessageThread}.
  *
@@ -127,9 +141,9 @@ export declare type MessageThreadProps = {
      */
     userId: string;
     /**
-     * Messages to render in message thread. A message can be of type `ChatMessage`, `SystemMessage` or `CustomMessage`.
+     * Messages to render in message thread. A message can be of type `ChatMessage`, `SystemMessage`, `BlockedMessage` or `CustomMessage`.
      */
-    messages: (ChatMessage | SystemMessage | CustomMessage)[];
+    messages: (ChatMessage | SystemMessage | CustomMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage)[];
     /**
      * number of participants in the thread
      */
@@ -216,6 +230,12 @@ export declare type MessageThreadProps = {
      * @beta
      */
     onRenderFileDownloads?: (userId: string, message: ChatMessage) => JSX.Element;
+    /**
+     * Optional callback to retrieve the inline image in a message.
+     * @param attachment - FileMetadata object we want to render
+     * @beta
+     */
+    onFetchAttachments?: (attachment: FileMetadata) => Promise<AttachmentDownloadResult[]>;
     /**
      * Optional callback to edit a message.
      *
@@ -224,6 +244,12 @@ export declare type MessageThreadProps = {
      *
      */
     onUpdateMessage?: UpdateMessageCallback;
+    /**
+     * Optional callback for when a message edit is cancelled.
+     *
+     * @param messageId - message id from chatClient
+     */
+    onCancelMessageEdit?: CancelEditCallback;
     /**
      * Optional callback to delete a message.
      *
@@ -234,10 +260,10 @@ export declare type MessageThreadProps = {
     /**
      * Optional callback to send a message.
      *
-     * @param messageId - message id from chatClient
+     * @param content - message body to send
      *
      */
-    onSendMessage?: (messageId: string) => Promise<void>;
+    onSendMessage?: (content: string) => Promise<void>;
     /**
     /**
      * Disable editing messages.
@@ -273,7 +299,7 @@ export declare type MessageThreadProps = {
  */
 export declare type MessageProps = {
     /**
-     * Message to render. It can type `ChatMessage` or `SystemMessage` or `CustomMessage`.
+     * Message to render. It can type `ChatMessage` or `SystemMessage`, `BlockedMessage` or `CustomMessage`.
      */
     message: Message;
     /**
@@ -305,6 +331,12 @@ export declare type MessageProps = {
      * @param content - new content of the message
      */
     onUpdateMessage?: UpdateMessageCallback;
+    /**
+     * Optional callback for when a message edit is cancelled.
+     *
+     * @param messageId - message id from chatClient
+     */
+    onCancelMessageEdit?: CancelEditCallback;
     /**
      * Optional callback to delete a message.
      *

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

@@ -12,6 +12,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Chat, Flex, Ref, mergeStyles as mergeNorthstarThemes } from '@fluentui/react-northstar';
 import { DownIconStyle, newMessageButtonContainerStyle, messageThreadContainerStyle, chatStyle, buttonWithIconStyles, newMessageButtonStyle, messageStatusContainerStyle, noMessageStatusStyle, defaultChatItemMessageContainer, defaultMyChatMessageContainer, defaultChatMessageContainer, gutterWithAvatar, gutterWithHiddenAvatar, FailedMyChatMessageContainer } from './styles/MessageThread.styles';
+/* @conditional-compile-remove(data-loss-prevention) */
+import { defaultBlockedMessageStyleContainer } from './styles/MessageThread.styles';
 import { Icon, mergeStyles, Persona, PersonaSize, PrimaryButton, Stack } from '@fluentui/react';
 import { LiveAnnouncer } from 'react-aria-live';
 import { delay } from './utils/delay';
@@ -21,7 +23,7 @@ import { SystemMessage as SystemMessageComponent } from './SystemMessage';
 import { ChatMessageComponent } from './ChatMessage/ChatMessageComponent';
 import { useLocale } from '../localization/LocalizationProvider';
 import { isNarrowWidth, _useContainerWidth } from './utils/responsive';
-import { getParticipantsWhoHaveReadMessage } from './utils/getParticipantsWhoHaveReadMessage';
+import getParticipantsWhoHaveReadMessage from './utils/getParticipantsWhoHaveReadMessage';
 import { useTheme } from '../theming';
 const isMessageSame = (first, second) => {
     return (first.messageId === second.messageId &&
@@ -109,51 +111,66 @@ const DefaultSystemMessage = (props) => {
     }
     return React.createElement(React.Fragment, null);
 };
-const memoizeAllMessages = memoizeFnAll((_messageKey, message, showMessageDate, showMessageStatus, onRenderAvatar, shouldOverlapAvatarAndMessage, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, _attached, statusToRender, participantCount, readCount, onRenderMessage, onUpdateMessage, onDeleteMessage, onSendMessage, disableEditing) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+const memoizeAllMessages = memoizeFnAll((_messageKey, message, showMessageDate, showMessageStatus, onRenderAvatar, shouldOverlapAvatarAndMessage, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, theme, _attached, statusToRender, participantCount, readCount, onRenderMessage, onUpdateMessage, onCancelMessageEdit, onDeleteMessage, onSendMessage, disableEditing) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const messageProps = {
         message,
         strings,
         showDate: showMessageDate,
         onUpdateMessage,
+        onCancelMessageEdit,
         onDeleteMessage,
         onSendMessage,
         disableEditing
     };
+    const chatMessageItemProps = (message, messageProps) => {
+        var _a, _b, _c;
+        const chatMessageComponent = onRenderMessage === undefined
+            ? defaultChatMessageRenderer(messageProps)
+            : onRenderMessage(messageProps, defaultChatMessageRenderer);
+        const personaOptions = {
+            hidePersonaDetails: true,
+            size: PersonaSize.size32,
+            text: message.senderDisplayName,
+            showOverflowTooltip: false
+        };
+        const chatItemMessageStyle = (message.mine ? styles === null || styles === void 0 ? void 0 : styles.myChatItemMessageContainer : styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer) ||
+            defaultChatItemMessageContainer(shouldOverlapAvatarAndMessage);
+        const chatGutterStyles = message.attached === 'top' || message.attached === false ? gutterWithAvatar : gutterWithHiddenAvatar;
+        return {
+            gutter: {
+                styles: chatGutterStyles,
+                content: message.mine ? ('') : onRenderAvatar ? (onRenderAvatar((_a = message.senderId) !== null && _a !== void 0 ? _a : '', personaOptions)) : (React.createElement(Persona, Object.assign({}, personaOptions)))
+            },
+            contentPosition: message.mine ? 'end' : 'start',
+            message: {
+                styles: chatItemMessageStyle,
+                content: (React.createElement(Flex, { hAlign: message.mine ? 'end' : undefined, vAlign: "end" },
+                    chatMessageComponent,
+                    React.createElement("div", { className: mergeStyles(messageStatusContainerStyle((_b = message.mine) !== null && _b !== void 0 ? _b : false), (styles === null || styles === void 0 ? void 0 : styles.messageStatusContainer) ? styles.messageStatusContainer((_c = message.mine) !== null && _c !== void 0 ? _c : false) : '') }, showMessageStatus && statusToRender ? (onRenderMessageStatus ? (onRenderMessageStatus({ status: statusToRender })) : (defaultStatusRenderer(message, statusToRender, participantCount !== null && participantCount !== void 0 ? participantCount : 0, readCount !== null && readCount !== void 0 ? readCount : 0))) : (React.createElement("div", { className: mergeStyles(noMessageStatusStyle) })))))
+            },
+            attached: message.attached,
+            key: _messageKey
+        };
+    };
+    /* @conditional-compile-remove(data-loss-prevention) */
+    // Similar logic as switch statement case 'chat', if statement for conditional compile (merge logic to switch case when stablize)
+    if (message.messageType === 'blocked') {
+        const myChatMessageStyle = message.status === 'failed'
+            ? (_b = (_a = styles === null || styles === void 0 ? void 0 : styles.failedMyChatMessageContainer) !== null && _a !== void 0 ? _a : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer) !== null && _b !== void 0 ? _b : FailedMyChatMessageContainer
+            : (_c = styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer) !== null && _c !== void 0 ? _c : defaultBlockedMessageStyleContainer(theme);
+        const blockedMessageStyle = (_d = styles === null || styles === void 0 ? void 0 : styles.blockedMessageContainer) !== null && _d !== void 0 ? _d : defaultBlockedMessageStyleContainer(theme);
+        messageProps.messageContainerStyle = message.mine ? myChatMessageStyle : blockedMessageStyle;
+        return chatMessageItemProps(message, messageProps);
+    }
     switch (message.messageType) {
         case 'chat': {
             const myChatMessageStyle = message.status === 'failed'
-                ? (_b = (_a = styles === null || styles === void 0 ? void 0 : styles.failedMyChatMessageContainer) !== null && _a !== void 0 ? _a : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer) !== null && _b !== void 0 ? _b : FailedMyChatMessageContainer
-                : (_c = styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer) !== null && _c !== void 0 ? _c : defaultMyChatMessageContainer;
-            const chatMessageStyle = (_d = styles === null || styles === void 0 ? void 0 : styles.chatMessageContainer) !== null && _d !== void 0 ? _d : defaultChatMessageContainer;
+                ? (_f = (_e = styles === null || styles === void 0 ? void 0 : styles.failedMyChatMessageContainer) !== null && _e !== void 0 ? _e : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer) !== null && _f !== void 0 ? _f : FailedMyChatMessageContainer
+                : (_g = styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer) !== null && _g !== void 0 ? _g : defaultMyChatMessageContainer;
+            const chatMessageStyle = (_h = styles === null || styles === void 0 ? void 0 : styles.chatMessageContainer) !== null && _h !== void 0 ? _h : defaultChatMessageContainer(theme);
             messageProps.messageContainerStyle = message.mine ? myChatMessageStyle : chatMessageStyle;
-            const chatMessageComponent = onRenderMessage === undefined
-                ? defaultChatMessageRenderer(messageProps)
-                : onRenderMessage(messageProps, defaultChatMessageRenderer);
-            const personaOptions = {
-                hidePersonaDetails: true,
-                size: PersonaSize.size32,
-                text: message.senderDisplayName,
-                showOverflowTooltip: false
-            };
-            const chatItemMessageStyle = (message.mine ? styles === null || styles === void 0 ? void 0 : styles.myChatItemMessageContainer : styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer) ||
-                defaultChatItemMessageContainer(shouldOverlapAvatarAndMessage);
-            const chatGutterStyles = message.attached === 'top' || message.attached === false ? gutterWithAvatar : gutterWithHiddenAvatar;
-            return {
-                gutter: {
-                    styles: chatGutterStyles,
-                    content: message.mine ? ('') : onRenderAvatar ? (onRenderAvatar((_e = message.senderId) !== null && _e !== void 0 ? _e : '', personaOptions)) : (React.createElement(Persona, Object.assign({}, personaOptions)))
-                },
-                contentPosition: message.mine ? 'end' : 'start',
-                message: {
-                    styles: chatItemMessageStyle,
-                    content: (React.createElement(Flex, { hAlign: message.mine ? 'end' : undefined, vAlign: "end" },
-                        chatMessageComponent,
-                        React.createElement("div", { className: mergeStyles(messageStatusContainerStyle((_f = message.mine) !== null && _f !== void 0 ? _f : false), (styles === null || styles === void 0 ? void 0 : styles.messageStatusContainer) ? styles.messageStatusContainer((_g = message.mine) !== null && _g !== void 0 ? _g : false) : '') }, showMessageStatus && statusToRender ? (onRenderMessageStatus ? (onRenderMessageStatus({ status: statusToRender })) : (defaultStatusRenderer(message, statusToRender, participantCount !== null && participantCount !== void 0 ? participantCount : 0, readCount !== null && readCount !== void 0 ? readCount : 0))) : (React.createElement("div", { className: mergeStyles(noMessageStatusStyle) })))))
-                },
-                attached: message.attached,
-                key: _messageKey
-            };
+            return chatMessageItemProps(message, messageProps);
         }
         case 'system': {
             messageProps.messageContainerStyle = styles === null || styles === void 0 ? void 0 : styles.systemMessageContainer;
@@ -195,9 +212,11 @@ const getLastChatMessageIdWithStatus = (messages, status) => {
  */
 export const MessageThread = (props) => {
     var _a;
-    const { messages: newMessages, userId, participantCount, readReceiptsBySenderId, styles, disableJumpToNewMessageButton = false, showMessageDate = false, showMessageStatus = false, numberOfChatMessagesToReload = 5, onMessageSeen, onRenderMessageStatus, onRenderAvatar, onLoadPreviousChatMessages, onRenderJumpToNewMessageButton, onRenderMessage, onUpdateMessage, onDeleteMessage, onSendMessage, 
+    const { messages: newMessages, userId, participantCount, readReceiptsBySenderId, styles, disableJumpToNewMessageButton = false, showMessageDate = false, showMessageStatus = false, numberOfChatMessagesToReload = 5, onMessageSeen, onRenderMessageStatus, onRenderAvatar, onLoadPreviousChatMessages, onRenderJumpToNewMessageButton, onRenderMessage, onUpdateMessage, onCancelMessageEdit, onDeleteMessage, onSendMessage, 
     /* @conditional-compile-remove(date-time-customization) */
-    onDisplayDateTimeString } = props;
+    onDisplayDateTimeString, 
+    /* @conditional-compile-remove(teams-inline-images) */
+    onFetchAttachments } = props;
     const onRenderFileDownloads = onRenderFileDownloadsTrampoline(props);
     const [messages, setMessages] = useState([]);
     // We need this state to wait for one tick and scroll to bottom after messages have been initialized.
@@ -214,7 +233,27 @@ export const MessageThread = (props) => {
     const [lastSendingChatMessage, setLastSendingChatMessage] = useState(undefined);
     // readCount and participantCount will only need to be updated on-fly when user hover on an indicator
     const [readCountForHoveredIndicator, setReadCountForHoveredIndicator] = useState(undefined);
+    /* @conditional-compile-remove(teams-inline-images) */
+    const [inlineAttachments, setInlineAttachments] = useState({});
+    /* @conditional-compile-remove(teams-inline-images) */
+    const onFetchInlineAttachment = useCallback((attachment) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!onFetchAttachments || attachment.id in inlineAttachments) {
+            return;
+        }
+        setInlineAttachments((prev) => (Object.assign(Object.assign({}, prev), { [attachment.id]: '' })));
+        const attachmentDownloadResult = yield onFetchAttachments(attachment);
+        if (attachmentDownloadResult[0]) {
+            setInlineAttachments((prev) => (Object.assign(Object.assign({}, prev), { [attachment.id]: attachmentDownloadResult[0].blobUrl })));
+        }
+    }), [inlineAttachments, onFetchAttachments]);
     const isAllChatMessagesLoadedRef = useRef(false);
+    // isAllChatMessagesLoadedRef needs to be updated every time when a new adapter is set in order to display correct data
+    // onLoadPreviousChatMessages is updated when a new adapter is set
+    useEffect(() => {
+        if (onLoadPreviousChatMessages) {
+            isAllChatMessagesLoadedRef.current = false;
+        }
+    }, [onLoadPreviousChatMessages]);
     const previousTopRef = useRef(-1);
     const previousHeightRef = useRef(-1);
     const messageIdSeenByMeRef = useRef('');
@@ -297,14 +336,19 @@ export const MessageThread = (props) => {
         if (!isLoadingChatMessagesRef.current) {
             if (onLoadPreviousChatMessages) {
                 isLoadingChatMessagesRef.current = true;
-                // Fetch message until scrollTop reach the threshold for fetching new message
-                while (!isAllChatMessagesLoadedRef.current &&
-                    chatScrollDivRef.current &&
-                    chatScrollDivRef.current.scrollTop <= 500) {
-                    isAllChatMessagesLoadedRef.current = yield onLoadPreviousChatMessages(numberOfChatMessagesToReload);
-                    yield delay(200);
+                try {
+                    // Fetch message until scrollTop reach the threshold for fetching new message
+                    while (!isAllChatMessagesLoadedRef.current &&
+                        chatScrollDivRef.current &&
+                        chatScrollDivRef.current.scrollTop <= 500) {
+                        isAllChatMessagesLoadedRef.current = yield onLoadPreviousChatMessages(numberOfChatMessagesToReload);
+                        yield delay(200);
+                    }
+                }
+                finally {
+                    // Set isLoadingChatMessagesRef to false after messages are fetched
+                    isLoadingChatMessagesRef.current = false;
                 }
-                isLoadingChatMessagesRef.current = false;
             }
         }
     }), [numberOfChatMessagesToReload, onLoadPreviousChatMessages]);
@@ -379,7 +423,7 @@ export const MessageThread = (props) => {
         setLastSendingChatMessage(getLastChatMessageIdWithStatus(newMessages, 'sending'));
     }, [newMessages]);
     /**
-     * This needs to run after messages are rendererd so we can manipulate the scroll bar.
+     * This needs to run after messages are rendered so we can manipulate the scroll bar.
      */
     useEffect(() => {
         // If user just sent the latest message then we assume we can move user to bottom of scroll.
@@ -406,12 +450,17 @@ export const MessageThread = (props) => {
     const strings = useMemo(() => (Object.assign(Object.assign({}, localeStrings), props.strings)), [localeStrings, props.strings]);
     // To rerender the defaultChatMessageRenderer if app running across days(every new day chat time stamp need to be regenerated)
     const defaultChatMessageRenderer = useCallback((messageProps) => {
-        if (messageProps.message.messageType === 'chat') {
+        if (messageProps.message.messageType === 'chat' ||
+            /* @conditional-compile-remove(data-loss-prevention) */ messageProps.message.messageType === 'blocked') {
             return (React.createElement(ChatMessageComponent, Object.assign({}, messageProps, { onRenderFileDownloads: onRenderFileDownloads, 
                 /* @conditional-compile-remove(file-sharing) */
                 strings: strings, message: messageProps.message, userId: props.userId, remoteParticipantsCount: participantCount ? participantCount - 1 : 0, inlineAcceptRejectEditButtons: !isNarrow, onRenderAvatar: onRenderAvatar, showMessageStatus: showMessageStatus, messageStatus: messageProps.message.status, onActionButtonClick: onActionButtonClickMemo, 
                 /* @conditional-compile-remove(date-time-customization) */
-                onDisplayDateTimeString: onDisplayDateTimeString })));
+                onDisplayDateTimeString: onDisplayDateTimeString, 
+                /* @conditional-compile-remove(teams-inline-images) */
+                onFetchAttachments: onFetchInlineAttachment, 
+                /* @conditional-compile-remove(teams-inline-images) */
+                attachmentsMap: inlineAttachments })));
         }
         return React.createElement(React.Fragment, null);
     }, [
@@ -425,7 +474,11 @@ export const MessageThread = (props) => {
         showMessageStatus,
         onActionButtonClickMemo,
         /* @conditional-compile-remove(date-time-customization) */
-        onDisplayDateTimeString
+        onDisplayDateTimeString,
+        /* @conditional-compile-remove(teams-inline-images) */
+        onFetchInlineAttachment,
+        /* @conditional-compile-remove(teams-inline-images) */
+        inlineAttachments
     ]);
     const defaultStatusRenderer = useCallback((message, status, participantCount, readCount) => {
         const onToggleToolTip = (isToggled) => {
@@ -440,12 +493,14 @@ export const MessageThread = (props) => {
             // -1 because participant count does not include myself
             remoteParticipantsCount: participantCount ? participantCount - 1 : 0 }));
     }, []);
+    const theme = useTheme();
     const messagesToDisplay = useMemo(() => memoizeAllMessages((memoizedMessageFn) => {
         return messages.map((message, index) => {
             let key = message.messageId;
             let statusToRender = undefined;
-            if (message.messageType === 'chat') {
-                if (!message.messageId || message.messageId === '') {
+            if (message.messageType === 'chat' ||
+                /* @conditional-compile-remove(data-loss-prevention) */ message.messageType === 'blocked') {
+                if ((!message.messageId || message.messageId === '') && 'clientMessageId' in message) {
                     key = message.clientMessageId;
                 }
                 if (showMessageStatus && message.mine) {
@@ -468,10 +523,13 @@ export const MessageThread = (props) => {
                     statusToRender = 'failed';
                 }
             }
-            return memoizedMessageFn(key !== null && key !== void 0 ? key : 'id_' + index, message, showMessageDate, showMessageStatus, onRenderAvatar, isNarrow, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, 
+            return memoizedMessageFn(key !== null && key !== void 0 ? key : 'id_' + index, message, showMessageDate, showMessageStatus, onRenderAvatar, isNarrow, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, theme, 
             // Temporary solution to make sure we re-render if attach attribute is changed.
             // The proper fix should be in selector.
-            message.messageType === 'chat' ? message.attached : undefined, statusToRender, participantCount, readCountForHoveredIndicator, onRenderMessage, onUpdateMessage, onDeleteMessage, onSendMessage, props.disableEditing);
+            message.messageType === 'chat' ||
+                /* @conditional-compile-remove(data-loss-prevention) */ message.messageType === 'blocked'
+                ? message.attached
+                : undefined, statusToRender, participantCount, readCountForHoveredIndicator, onRenderMessage, onUpdateMessage, onCancelMessageEdit, onDeleteMessage, onSendMessage, props.disableEditing);
         });
     }), [
         messages,
@@ -484,10 +542,12 @@ export const MessageThread = (props) => {
         defaultStatusRenderer,
         defaultChatMessageRenderer,
         strings,
+        theme,
         participantCount,
         readCountForHoveredIndicator,
         onRenderMessage,
         onUpdateMessage,
+        onCancelMessageEdit,
         onDeleteMessage,
         onSendMessage,
         lastSeenChatMessage,
@@ -495,7 +555,6 @@ export const MessageThread = (props) => {
         lastDeliveredChatMessage,
         props.disableEditing
     ]);
-    const theme = useTheme();
     const chatBody = useMemo(() => {
         var _a;
         return (React.createElement(LiveAnnouncer, null,