[Bugfix] update to use interface (#5836)

* update to use interface

* Change files

* add comments

* update API files

Author: dmceachernmsft

change-beta/@azure-communication-react-51d3293f-d29e-432c-bd77-abb3e7d6f3b4.json

@@ -0,0 +1,9 @@
+{
+  "type": "minor",
+  "area": "improvement",
+  "workstream": "JSloaders",
+  "comment": "Update props to extend off the base composite so customers can pass in theme and other options",
+  "packageName": "@azure/communication-react",
+  "email": "dmceachern@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-51d3293f-d29e-432c-bd77-abb3e7d6f3b4.json

@@ -0,0 +1,9 @@
+{
+  "type": "minor",
+  "area": "improvement",
+  "workstream": "JSloaders",
+  "comment": "Update props to extend off the base composite so customers can pass in theme and other options",
+  "packageName": "@azure/communication-react",
+  "email": "dmceachern@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/acs-ui-javascript-loaders/src/callCompositeLoader.ts

@@ -30,16 +30,38 @@ import { initializeIcons } from '@fluentui/react';
  *
  * @public
  */
-export type CallCompositeLoaderProps = {
+export interface CallCompositeLoaderProps extends Partial<BaseCompositeProps<CallCompositeIcons>> {
+  /**
+   * UserId for the local user.
+   */
   userId: CommunicationUserIdentifier;
+  /**
+   * CommunicationTokenCredential for the local user.
+   */
   credential: CommunicationTokenCredential;
+  /**
+   * Display name for the local user.
+   */
   displayName: string;
+  /**
+   * locator for the call
+   */
   locator: CallAdapterLocator;
+  /**
+   * Options for the {@link AzureCommunicationCallAdapter}
+   * This is used to configure the call adapter.
+   */
   callAdapterOptions?: AzureCommunicationCallAdapterOptions;
+  /**
+   * Options for the {@link CallComposite} {@link CallCompositeOptions}
+   * This is used to configure the call composite.
+   */
   callCompositeOptions?: CallCompositeOptions;
-  baseCompositeProps?: BaseCompositeProps<CallCompositeIcons>;
+  /**
+   * Device form factor for the composite.
+   */
   formFactor?: 'mobile' | 'desktop';
-};
+}
 
 /**
  * Loader function for the CallComposite that you can use in your application. This
@@ -60,8 +82,13 @@ export const loadCallComposite = async function (
     locator,
     callAdapterOptions,
     callCompositeOptions,
-    baseCompositeProps,
-    formFactor
+    formFactor,
+    fluentTheme,
+    icons,
+    onFetchAvatarPersonaData,
+    onFetchParticipantMenuItems,
+    rtl,
+    locale
   } = loaderArgs;
   const adapter = await createAzureCommunicationCallAdapter({
     userId,
@@ -78,7 +105,17 @@ export const loadCallComposite = async function (
   createRoot(htmlElement).render(
     React.createElement(
       CallComposite,
-      { ...baseCompositeProps, options: callCompositeOptions, adapter, formFactor },
+      {
+        options: callCompositeOptions,
+        adapter,
+        formFactor,
+        fluentTheme,
+        icons,
+        locale,
+        onFetchAvatarPersonaData,
+        onFetchParticipantMenuItems,
+        rtl
+      },
       null
     )
   );

packages/acs-ui-javascript-loaders/src/callWithChatCompositeLoader.ts

@@ -29,17 +29,43 @@ import { initializeIcons } from '@fluentui/react';
  * - callCompositeOptions: Options for the {@link CallWithChatComposite} {@link CallWithChatCompositeOptions}
  * @public
  */
-export type CallWithChatCompositeLoaderProps = {
+export interface CallWithChatCompositeLoaderProps extends Partial<BaseCompositeProps<CallWithChatCompositeIcons>> {
+  /**
+   * UserId for the local user.
+   */
   userId: CommunicationUserIdentifier;
+  /**
+   * CommunicationTokenCredential for the local user.
+   */
   credential: CommunicationTokenCredential;
+  /**
+   * Display name for the local user.
+   */
   displayName: string;
+  /**
+   * Azure communication service endpoint. This used for the token and joining the chat thread.
+   */
   endpoint: string;
+  /**
+   * Locator for the call and the chat thread.
+   * This is used to join the call and the chat thread.
+   */
   locator: CallAndChatLocator;
+  /**
+   * Options for the {@link AzureCommunicationCallAdapterOptions}
+   * This is used to configure the call adapter.
+   */
   callAdapterOptions?: AzureCommunicationCallAdapterOptions;
+  /**
+   * Options for the {@link CallWithChatComposite} {@link CallWithChatCompositeOptions}
+   * This is used to configure the call composite.
+   */
   callWithChatCompositeOptions?: CallWithChatCompositeOptions;
-  baseCompositeProps?: BaseCompositeProps<CallWithChatCompositeIcons>;
+  /**
+   * Device form factor for the composite.
+   */
   formFactor?: 'mobile' | 'desktop';
-};
+}
 
 /**
  * Props for the CallWithChatComposite that you can use in your application. This
@@ -61,8 +87,13 @@ export const loadCallWithChatComposite = async function (
     locator,
     callAdapterOptions,
     callWithChatCompositeOptions,
-    baseCompositeProps,
-    formFactor
+    formFactor,
+    fluentTheme,
+    locale,
+    icons,
+    onFetchAvatarPersonaData,
+    onFetchParticipantMenuItems,
+    rtl
   } = loaderArgs;
   const adapter = await createAzureCommunicationCallWithChatAdapter({
     userId,
@@ -80,7 +111,17 @@ export const loadCallWithChatComposite = async function (
   createRoot(htmlElement).render(
     React.createElement(
       CallWithChatComposite,
-      { ...baseCompositeProps, options: callWithChatCompositeOptions, adapter, formFactor },
+      {
+        options: callWithChatCompositeOptions,
+        adapter,
+        formFactor,
+        fluentTheme,
+        icons,
+        locale,
+        onFetchAvatarPersonaData,
+        onFetchParticipantMenuItems,
+        rtl
+      },
       null
     )
   );

packages/acs-ui-javascript-loaders/src/chatCompositeLoader.ts

@@ -24,15 +24,33 @@ import { initializeIcons } from '@fluentui/react';
  * options for the {@link ChatComposite} {@link ChatCompositeOptions}.
  * @public
  */
-export type ChatCompositeLoaderProps = {
+export interface ChatCompositeLoaderProps extends Partial<BaseCompositeProps<ChatCompositeIcons>> {
+  /**
+   * UserId for the local user.
+   */
   userId: CommunicationUserIdentifier;
+  /**
+   * CommunicationTokenCredential for the local user.
+   */
   credential: CommunicationTokenCredential;
+  /**
+   * Display name for the local user.
+   */
   displayName?: string;
+  /**
+   * Communication service endpoint. This is used for the token and joining the chat thread.
+   */
   endpoint: string;
+  /**
+   * Communication threadId for the chat thread.
+   */
   threadId: string;
+  /**
+   * Options for the {@link AzureCommunicationChatAdapter}
+   * This is used to configure the chat adapter.
+   */
   chatCompositeOptions?: ChatCompositeOptions;
-  baseCompositeProps?: BaseCompositeProps<ChatCompositeIcons>;
-};
+}
 
 /**
  * Loader function for the ChatComposite that you can use in your application. This
@@ -46,7 +64,20 @@ export const loadChatComposite = async function (
   htmlElement: HTMLElement
 ): Promise<ChatAdapter | undefined> {
   initializeIcons();
-  const { userId, credential, endpoint, threadId, displayName, chatCompositeOptions, baseCompositeProps } = loaderArgs;
+  const {
+    userId,
+    credential,
+    endpoint,
+    threadId,
+    displayName,
+    chatCompositeOptions,
+    fluentTheme,
+    locale,
+    icons,
+    onFetchAvatarPersonaData,
+    onFetchParticipantMenuItems,
+    rtl
+  } = loaderArgs;
   const adapter = await createAzureCommunicationChatAdapter({
     endpoint,
     userId,
@@ -60,7 +91,20 @@ export const loadChatComposite = async function (
   }
 
   createRoot(htmlElement).render(
-    React.createElement(ChatComposite, { ...baseCompositeProps, options: chatCompositeOptions, adapter }, null)
+    React.createElement(
+      ChatComposite,
+      {
+        options: chatCompositeOptions,
+        adapter,
+        fluentTheme,
+        icons,
+        locale,
+        onFetchAvatarPersonaData,
+        onFetchParticipantMenuItems,
+        rtl
+      },
+      null
+    )
   );
   return adapter;
 };

packages/acs-ui-javascript-loaders/src/outboundCallCompositeLoader.ts

@@ -31,15 +31,40 @@ import { initializeIcons } from '@fluentui/react';
  *
  * @public
  */
-export type OutboundCallCompositeLoaderProps = {
+export interface OutboundCallCompositeLoaderProps extends Partial<BaseCompositeProps<CallCompositeIcons>> {
+  /**
+   * UserId for the local user.
+   */
   userId: CommunicationUserIdentifier;
+  /**
+   * CommunicationTokenCredential for the local user.
+   */
   credential: CommunicationTokenCredential;
+  /**
+   * Display name for the local user.
+   */
   displayName: string;
+  /**
+   * Participants that will be called.
+   * This can be a list of either {@link CommunicationUserIdentifier} or string identifiers.
+   */
   targetCallees: string[] | StartCallIdentifier[];
+  /**
+   * Options for the {@link AzureCommunicationCallAdapter}
+   * This is used to configure the call adapter.
+   */
   callAdapterOptions?: AzureCommunicationCallAdapterOptions;
-  baseCompositeProps?: BaseCompositeProps<CallCompositeIcons>;
+  /**
+   * Options for the {@link CallComposite} {@link CallCompositeOptions}
+   * This is used to configure the call composite.
+   */
   callCompositeOptions?: CallCompositeOptions;
-};
+  /**
+   * Device form factor for the composite.
+   * This is used to configure the call composite.
+   */
+  formFactor?: 'mobile' | 'desktop';
+}
 
 /**
  * Loader function for the OutboundCallComposite that you can use in your application. This

packages/communication-react/review/beta/communication-react.api.md

@@ -746,16 +746,15 @@ export type CallCompositeIcons = {
 };
 
 // @public
-export type CallCompositeLoaderProps = {
-    userId: CommunicationUserIdentifier;
-    credential: CommunicationTokenCredential;
-    displayName: string;
-    locator: CallAdapterLocator;
+export interface CallCompositeLoaderProps extends Partial<BaseCompositeProps<CallCompositeIcons>> {
     callAdapterOptions?: AzureCommunicationCallAdapterOptions;
     callCompositeOptions?: CallCompositeOptions;
-    baseCompositeProps?: BaseCompositeProps<CallCompositeIcons>;
+    credential: CommunicationTokenCredential;
+    displayName: string;
     formFactor?: 'mobile' | 'desktop';
-};
+    locator: CallAdapterLocator;
+    userId: CommunicationUserIdentifier;
+}
 
 // @public
 export type CallCompositeOptions = {
@@ -1592,17 +1591,16 @@ export type CallWithChatCompositeIcons = {
 };
 
 // @public
-export type CallWithChatCompositeLoaderProps = {
-    userId: CommunicationUserIdentifier;
+export interface CallWithChatCompositeLoaderProps extends Partial<BaseCompositeProps<CallWithChatCompositeIcons>> {
+    callAdapterOptions?: AzureCommunicationCallAdapterOptions;
+    callWithChatCompositeOptions?: CallWithChatCompositeOptions;
     credential: CommunicationTokenCredential;
     displayName: string;
     endpoint: string;
-    locator: CallAndChatLocator;
-    callAdapterOptions?: AzureCommunicationCallAdapterOptions;
-    callWithChatCompositeOptions?: CallWithChatCompositeOptions;
-    baseCompositeProps?: BaseCompositeProps<CallWithChatCompositeIcons>;
     formFactor?: 'mobile' | 'desktop';
-};
+    locator: CallAndChatLocator;
+    userId: CommunicationUserIdentifier;
+}
 
 // @public
 export type CallWithChatCompositeOptions = {
@@ -2144,15 +2142,14 @@ export type ChatCompositeIcons = {
 };
 
 // @public
-export type ChatCompositeLoaderProps = {
-    userId: CommunicationUserIdentifier;
+export interface ChatCompositeLoaderProps extends Partial<BaseCompositeProps<ChatCompositeIcons>> {
+    chatCompositeOptions?: ChatCompositeOptions;
     credential: CommunicationTokenCredential;
     displayName?: string;
     endpoint: string;
     threadId: string;
-    chatCompositeOptions?: ChatCompositeOptions;
-    baseCompositeProps?: BaseCompositeProps<ChatCompositeIcons>;
-};
+    userId: CommunicationUserIdentifier;
+}
 
 // @public
 export type ChatCompositeOptions = {
@@ -4337,15 +4334,15 @@ export interface OptionsDevice {
 }
 
 // @public
-export type OutboundCallCompositeLoaderProps = {
-    userId: CommunicationUserIdentifier;
+export interface OutboundCallCompositeLoaderProps extends Partial<BaseCompositeProps<CallCompositeIcons>> {
+    callAdapterOptions?: AzureCommunicationCallAdapterOptions;
+    callCompositeOptions?: CallCompositeOptions;
     credential: CommunicationTokenCredential;
     displayName: string;
+    formFactor?: 'mobile' | 'desktop';
     targetCallees: string[] | StartCallIdentifier[];
-    callAdapterOptions?: AzureCommunicationCallAdapterOptions;
-    baseCompositeProps?: BaseCompositeProps<CallCompositeIcons>;
-    callCompositeOptions?: CallCompositeOptions;
-};
+    userId: CommunicationUserIdentifier;
+}
 
 // @public
 export type OverflowGalleryPosition = 'horizontalBottom' | 'verticalRight' | 'horizontalTop';