@azure/communication-react 1.5.1-alpha-202305050017 → 1.5.1-alpha-202305090013

package/dist/communication-react.d.ts

@@ -219,61 +219,6 @@ export declare type AreParamEqual<A extends (props: any) => JSX.Element | undefi
  */
 export declare type AreTypeEqual<A, B> = A extends B ? (B extends A ? true : false) : false;
 
-/**
- * Options to display suggestions in the at mention scenario.
- *
- * @beta
- */
-export declare interface AtMentionDisplayOptions {
-    /**
-     * Optional callback to override render of an mention in a message thread.
-     */
-    onRenderAtMentionSuggestion?: (suggestion: AtMentionSuggestion) => JSX.Element;
-}
-
-/**
- * Options to lookup suggestions in the at mention scenario.
- *
- * @beta
- */
-export declare interface AtMentionLookupOptions {
-    /**
-     * Optional string to set trigger keyword for mention a specific participant.
-     *
-     * @defaultValue `@`
-     */
-    trigger?: string;
-    /**
-     * Optional callback to fetch a list of at mention suggestions base on the query.
-     */
-    onQueryUpdated?: (query: string) => Promise<AtMentionSuggestion[]>;
-    /**
-     * Optional callback to render an item of the atMention suggestions list.
-     */
-    onRenderSuggestionItem?: (suggestion: AtMentionSuggestion, onSuggestionSelected?: (suggestion: AtMentionSuggestion) => void) => JSX.Element;
-}
-
-/**
- * Options to lookup suggestions and display mentions in the at mention scenario.
- *
- * @beta
- */
-export declare type AtMentionOptions = AtMentionLookupOptions & AtMentionDisplayOptions;
-
-/**
- * At mention suggestion's state, as reflected in the UI.
- *
- * @beta
- */
-export declare interface AtMentionSuggestion {
-    /** User ID of a mentioned participant or 'everyone' for an @everyone suggestion */
-    userId: string;
-    /** Type of an at mention suggestion */
-    suggestionType: string;
-    /** Display name of a mentioned participant */
-    displayName: string;
-}
-
 /**
  * @beta
  */
@@ -4298,6 +4243,8 @@ export declare interface ComponentStrings {
     typingIndicator: TypingIndicatorStrings;
     /** Strings for SendBox */
     sendBox: SendBoxStrings;
+    /** Strings for MentionPopover */
+    mentionPopover: MentionPopoverStrings;
     /** Strings for MessageStatusIndicator */
     messageStatusIndicator: MessageStatusIndicatorStrings;
     /** Strings for ErroBar */
@@ -6219,10 +6166,10 @@ export declare interface _Identifiers {
     verticalGalleryVideoTile: string;
     /** `data-ui-id` value for `VerticalGallery` Component's page counter */
     verticalGalleryPageCounter: string;
-    /** `data-ui-id` value for `AtMentionFlyout` Component's suggestion list */
-    atMentionSuggestionList: string;
-    /** `data-ui-id` value for `AtMentionFlyout` Component's suggestion list item */
-    atMentionSuggestionItem: string;
+    /** `data-ui-id` value for `MentionPopover` Component's suggestion list */
+    mentionSuggestionList: string;
+    /** `data-ui-id` value for `MentionPopover` Component's suggestion list item */
+    mentionSuggestionItem: string;
 }
 
 /**
@@ -6432,6 +6379,76 @@ export declare interface MediaDiagnosticsState {
     latest: LatestMediaDiagnostics;
 }
 
+/**
+ * Mention's state, as reflected in the UI.
+ *
+ * @beta
+ */
+export declare interface Mention {
+    /** ID of a mention */
+    id: string;
+    /** Display text of a mention */
+    displayText: string;
+    /** Optional React element to render an item icon of a mention suggestion */
+    icon?: JSX.Element;
+}
+
+/**
+ * Options to display suggestions in the mention scenario.
+ *
+ * @beta
+ */
+export declare interface MentionDisplayOptions {
+    /**
+     * Optional callback for customizing the mention renderer in a message thread.
+     */
+    onRenderMention?: (mention: Mention, defaultOnRender: (mention: Mention) => JSX.Element) => JSX.Element;
+}
+
+/**
+ * Options to lookup suggestions in the mention scenario.
+ *
+ * @beta
+ */
+export declare interface MentionLookupOptions {
+    /**
+     * Optional string to set trigger keyword for mention a specific participant.
+     *
+     * @defaultValue `@`
+     */
+    trigger?: string;
+    /**
+     * Optional callback to fetch a list of mention suggestions base on the query.
+     */
+    onQueryUpdated: (query: string) => Promise<Mention[]>;
+    /**
+     * Optional callback to render an item of the mention suggestions list.
+     */
+    onRenderSuggestionItem?: (suggestion: Mention, onSuggestionSelected: (suggestion: Mention) => void) => JSX.Element;
+}
+
+/**
+ * Options to lookup suggestions and display mentions in the mention scenario.
+ *
+ * @beta
+ */
+export declare type MentionOptions = {
+    lookupOptions?: MentionLookupOptions;
+    displayOptions?: MentionDisplayOptions;
+};
+
+/**
+ * Strings of {@link _MentionPopover} that can be overridden.
+ *
+ * @beta
+ */
+export declare interface MentionPopoverStrings {
+    /**
+     * Header text for MentionPopover
+     */
+    mentionPopoverHeader: string;
+}
+
 /**
  * Discriminated union of all messages.
  *
@@ -6806,10 +6823,10 @@ export declare type MessageThreadProps = {
      */
     onDisplayDateTimeString?: (messageDate: Date) => string;
     /**
-     * Optional props needed to lookup suggestions and display mentions in the at mention scenario.
+     * Optional props needed to lookup a mention query and display mentions
      * @beta
      */
-    atMentionOptions?: AtMentionOptions;
+    mentionOptions?: MentionOptions;
 };
 
 /**
@@ -7810,10 +7827,10 @@ export declare interface SendBoxProps {
      */
     onSendMessage?: (content: string) => Promise<void>;
     /**
-     * Optional props needed to lookup suggestions in the at mention scenario.
+     * Optional props needed to lookup suggestions in the mention scenario.
      * @beta
      */
-    atMentionLookupOptions?: AtMentionLookupOptions;
+    mentionLookupOptions?: MentionLookupOptions;
     /**
      * Optional callback called when user is typing
      */
@@ -7851,14 +7868,14 @@ export declare interface SendBoxProps {
      */
     autoFocus?: 'sendBoxTextField';
     /**
-     * Optional callback to render uploaded files in the SendBox. The sendbox will expand
-     * veritcally to accomodate the uploaded files. File uploads will
-     * be rendered below the text area in sendbox.
+     * Optional callback to render uploaded files in the SendBox. The sendBox will expand
+     * vertically to accommodate the uploaded files. File uploads will
+     * be rendered below the text area in sendBox.
      * @beta
      */
     onRenderFileUploads?: () => JSX.Element;
     /**
-     * Optional array of active file uploads where each object has attibutes
+     * Optional array of active file uploads where each object has attributes
      * of a file upload like name, progress, errorMessage etc.
      * @beta
      */