@azure/communication-react 1.7.0-alpha-202308030014 → 1.7.0-alpha-202308050013

package/dist/communication-react.d.ts

@@ -57,7 +57,12 @@ import { IContextualMenuProps } from '@fluentui/react';
 import { IContextualMenuStyles } from '@fluentui/react';
 import { ILinkStyles } from '@fluentui/react';
 import { IMessageBarProps } from '@fluentui/react';
+import { IModalStyleProps } from '@fluentui/react';
+import { IModalStyles } from '@fluentui/react';
 import { IncomingCall } from '@azure/communication-calling';
+import { IOverlayStyleProps } from '@fluentui/react';
+import { IOverlayStyles } from '@fluentui/react';
+import { IPersonaProps } from '@fluentui/react';
 import { IPersonaStyleProps } from '@fluentui/react';
 import { IPersonaStyles } from '@fluentui/react';
 import { IRawStyle } from '@fluentui/react';
@@ -93,6 +98,7 @@ import { ScalingMode } from '@azure/communication-calling';
 import { SendMessageOptions } from '@azure/communication-chat';
 import { StartCallOptions } from '@azure/communication-calling';
 import { StartCaptionsOptions } from '@azure/communication-calling';
+import { SyntheticEvent } from 'react';
 import { TeamsCall } from '@azure/communication-calling';
 import { TeamsCallAgent } from '@azure/communication-calling';
 import { TeamsMeetingLinkLocator } from '@azure/communication-calling';
@@ -6574,6 +6580,103 @@ export declare interface ImageFileMetadata extends BaseFileMetadata {
     previewUrl?: string;
 }
 
+/**
+ * Component to render a fullscreen modal for a selected image.
+ *
+ * @beta
+ */
+export declare const ImageGallery: (props: ImageGalleryProps) => JSX.Element;
+
+/**
+ * Props for {@link ImageGallery}.
+ *
+ * @beta
+ */
+export declare interface ImageGalleryImageProps {
+    /** Image Url used to display the image in a large scale. */
+    imageUrl: string;
+    /** String used as a file name when downloading this image to user's local device. */
+    saveAsName: string;
+    /** Optional string used as a alt text for the image. @default 'image' */
+    altText?: string;
+    /** Optional string used as the title of the image and displayed on the top left corner of the ImageGallery. */
+    title?: string;
+    /** Optional JSX element used as a title icon and displayed to the left of the title element. */
+    titleIcon?: JSX.Element;
+}
+
+/**
+ * Props for {@link ImageGallery}.
+ *
+ * @beta
+ */
+export declare interface ImageGalleryProps {
+    /**
+     * Array of images used to populate the ImageGallery
+     */
+    images: Array<ImageGalleryImageProps>;
+    /**
+     * Callback to invoke when the ImageGallery modal is dismissed
+     */
+    onDismiss: () => void;
+    /**
+     * Callback called when the download button is clicked.
+     */
+    onImageDownloadButtonClicked: (imageUrl: string, saveAsName: string) => void;
+    /**
+     * Callback called when there's an error loading the image.
+     */
+    onError?: (event: SyntheticEvent<HTMLImageElement, Event>) => void;
+    /** Optional id property provided on a LayerHost that this Layer should render within.
+     *  If an id is not provided, we will render the Layer content in a fixed position element rendered at the end of the document.
+     */
+    modalLayerHostId?: string;
+    /**
+     * Indicating which index of the images array to start with.
+     */
+    startIndex?: number;
+    /**
+     * Allows users to pass in an object contains custom CSS styles.
+     * @Example
+     * ```
+     * <ImageGallery styles={{ image: { background: 'blue' } }} />
+     * ```
+     */
+    styles?: ImageGalleryStylesProps;
+}
+
+/**
+ * Fluent styles for {@link ImageGallery}.
+ *
+ * @beta
+ */
+export declare interface ImageGalleryStylesProps extends BaseCustomStyles {
+    /** Styles for the ImageGallery Modal. */
+    modal?: IStyleFunctionOrObject<IModalStyleProps, IModalStyles>;
+    /** Styles for the ImageGallery Modal overlay. */
+    overlay?: IStyleFunctionOrObject<IOverlayStyleProps, IOverlayStyles>;
+    /** Styles for the ImageGallery header bar. */
+    header?: IStyle;
+    /** Styles for the ImageGallery titleBar container. */
+    titleBarContainer?: IStyle;
+    /** styles for the title label */
+    title?: IStyle;
+    /** Styles for the ImageGallery controlBar container. */
+    controlBarContainer?: IStyle;
+    /** Styles for the download button. */
+    downloadButton?: IStyle;
+    /** Styles for the icon within the download button. */
+    downloadButtonIcon?: IStyle;
+    /** Styles for the small download button when screen width is smaller than 25 rem. */
+    smallDownloadButton?: IStyle;
+    /** Styles for the close modal icon. */
+    closeIcon?: IStyle;
+    /** Styles for the image container. */
+    imageContainer?: IStyle;
+    /** Styles for the image. */
+    image?: IStyle;
+}
+
 /**
  * @beta
  * This contains a readonly array that returns all the active `incomingCalls`.
@@ -7276,6 +7379,11 @@ export declare type MessageThreadProps = {
      * @beta
      */
     mentionOptions?: MentionOptions;
+    /**
+     * Optional callback called when an inline image is clicked.
+     * @beta
+     */
+    onInlineImageClicked?: (attachment: FileMetadata, onRenderTitleIcon?: (personaProps?: IPersonaProps) => JSX.Element) => Promise<void>;
 };
 
 /**