@azure/communication-react 1.27.0-alpha-202505130018 → 1.27.0-alpha-202505140018

package/dist/dist-cjs/communication-react/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BHKNAQgT.js');
+var index = require('./index-Qeoq3j5U.js');
 require('react');
 require('@fluentui/react');
 require('@fluentui/react-components');

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js

@@ -2,5 +2,5 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-module.exports = '1.27.0-alpha-202505130018';
+module.exports = '1.27.0-alpha-202505140018';
 //# sourceMappingURL=telemetryVersion.js.map

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map

@@ -1 +1 @@
-{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.27.0-alpha-202505130018';\n"]}
+{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.27.0-alpha-202505140018';\n"]}

package/dist/dist-esm/acs-ui-javascript-loaders/src/callCompositeLoader.d.ts

@@ -9,16 +9,38 @@ import { AzureCommunicationCallAdapterOptions, CallAdapter, CallAdapterLocator,
  *
  * @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
  * function will load the CallComposite into the provided HTML element. The best use case for this

package/dist/dist-esm/acs-ui-javascript-loaders/src/callCompositeLoader.js

@@ -26,7 +26,7 @@ import { initializeIcons } from '@fluentui/react';
 export const loadCallComposite = function (loaderArgs, htmlElement) {
     return __awaiter(this, void 0, void 0, function* () {
         initializeIcons();
-        const { userId, credential, displayName, locator, callAdapterOptions, callCompositeOptions, baseCompositeProps, formFactor } = loaderArgs;
+        const { userId, credential, displayName, locator, callAdapterOptions, callCompositeOptions, formFactor, fluentTheme, icons, onFetchAvatarPersonaData, onFetchParticipantMenuItems, rtl, locale } = loaderArgs;
         const adapter = yield createAzureCommunicationCallAdapter({
             userId,
             displayName: displayName !== null && displayName !== void 0 ? displayName : 'anonymous',
@@ -37,7 +37,17 @@ export const loadCallComposite = function (loaderArgs, htmlElement) {
         if (!htmlElement) {
             throw new Error('Failed to find the root element');
         }
-        createRoot(htmlElement).render(React.createElement(CallComposite, Object.assign(Object.assign({}, baseCompositeProps), { options: callCompositeOptions, adapter, formFactor }), null));
+        createRoot(htmlElement).render(React.createElement(CallComposite, {
+            options: callCompositeOptions,
+            adapter,
+            formFactor,
+            fluentTheme,
+            icons,
+            locale,
+            onFetchAvatarPersonaData,
+            onFetchParticipantMenuItems,
+            rtl
+        }, null));
         return adapter;
     });
 };

package/dist/dist-esm/acs-ui-javascript-loaders/src/callCompositeLoader.js.map

@@ -1 +1 @@
-{"version":3,"file":"callCompositeLoader.js","sourceRoot":"","sources":["../../../../../acs-ui-javascript-loaders/src/callCompositeLoader.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC;AACnC,iBAAiB,CAAC,YAAY,CAAC,CAAC;AAEhC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EACL,aAAa,EACb,mCAAmC,EAOpC,gDAAmC;AACpC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAsBlD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,UAC/B,UAAoC,EACpC,WAAwB;;QAExB,eAAe,EAAE,CAAC;QAClB,MAAM,EACJ,MAAM,EACN,UAAU,EACV,WAAW,EACX,OAAO,EACP,kBAAkB,EAClB,oBAAoB,EACpB,kBAAkB,EAClB,UAAU,EACX,GAAG,UAAU,CAAC;QACf,MAAM,OAAO,GAAG,MAAM,mCAAmC,CAAC;YACxD,MAAM;YACN,WAAW,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,WAAW;YACvC,UAAU;YACV,OAAO;YACP,OAAO,EAAE,kBAAkB;SAC5B,CAAC,CAAC;QAEH,IAAI,CAAC,WAAW,EAAE,CAAC;YACjB,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAC;QACrD,CAAC;QAED,UAAU,CAAC,WAAW,CAAC,CAAC,MAAM,CAC5B,KAAK,CAAC,aAAa,CACjB,aAAa,kCACR,kBAAkB,KAAE,OAAO,EAAE,oBAAoB,EAAE,OAAO,EAAE,UAAU,KAC3E,IAAI,CACL,CACF,CAAC;QACF,OAAO,OAAO,CAAC;IACjB,CAAC;CAAA,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { parseReactVersion } from './utils';\n\nconst reactVersion = React.version;\nparseReactVersion(reactVersion);\n\nimport { createRoot } from 'react-dom/client';\nimport { CommunicationTokenCredential, CommunicationUserIdentifier } from '@azure/communication-common';\nimport {\n  CallComposite,\n  createAzureCommunicationCallAdapter,\n  AzureCommunicationCallAdapterOptions,\n  CallAdapter,\n  CallAdapterLocator,\n  CallCompositeOptions,\n  BaseCompositeProps,\n  CallCompositeIcons\n} from '@internal/react-composites';\nimport { initializeIcons } from '@fluentui/react';\n\n/**\n * Props for the OutboundCallComposite that you can use in your application.\n *\n * Contains two options bags:\n * - adapterOptions: Options for the {@link AzureCommunicationCallAdapter}\n * - callCompositeOptions: Options for the {@link CallComposite} {@link CallCompositeOptions}\n *\n * @public\n */\nexport type CallCompositeLoaderProps = {\n  userId: CommunicationUserIdentifier;\n  credential: CommunicationTokenCredential;\n  displayName: string;\n  locator: CallAdapterLocator;\n  callAdapterOptions?: AzureCommunicationCallAdapterOptions;\n  callCompositeOptions?: CallCompositeOptions;\n  baseCompositeProps?: BaseCompositeProps<CallCompositeIcons>;\n  formFactor?: 'mobile' | 'desktop';\n};\n\n/**\n * Loader function for the CallComposite that you can use in your application. This\n * function will load the CallComposite into the provided HTML element. The best use case for this\n * is in a Node ui framework that is not React based.\n *\n * @public\n */\nexport const loadCallComposite = async function (\n  loaderArgs: CallCompositeLoaderProps,\n  htmlElement: HTMLElement\n): Promise<CallAdapter | undefined> {\n  initializeIcons();\n  const {\n    userId,\n    credential,\n    displayName,\n    locator,\n    callAdapterOptions,\n    callCompositeOptions,\n    baseCompositeProps,\n    formFactor\n  } = loaderArgs;\n  const adapter = await createAzureCommunicationCallAdapter({\n    userId,\n    displayName: displayName ?? 'anonymous',\n    credential,\n    locator,\n    options: callAdapterOptions\n  });\n\n  if (!htmlElement) {\n    throw new Error('Failed to find the root element');\n  }\n\n  createRoot(htmlElement).render(\n    React.createElement(\n      CallComposite,\n      { ...baseCompositeProps, options: callCompositeOptions, adapter, formFactor },\n      null\n    )\n  );\n  return adapter;\n};\n"]}
+{"version":3,"file":"callCompositeLoader.js","sourceRoot":"","sources":["../../../../../acs-ui-javascript-loaders/src/callCompositeLoader.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC;AACnC,iBAAiB,CAAC,YAAY,CAAC,CAAC;AAEhC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EACL,aAAa,EACb,mCAAmC,EAOpC,gDAAmC;AACpC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AA4ClD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,UAC/B,UAAoC,EACpC,WAAwB;;QAExB,eAAe,EAAE,CAAC;QAClB,MAAM,EACJ,MAAM,EACN,UAAU,EACV,WAAW,EACX,OAAO,EACP,kBAAkB,EAClB,oBAAoB,EACpB,UAAU,EACV,WAAW,EACX,KAAK,EACL,wBAAwB,EACxB,2BAA2B,EAC3B,GAAG,EACH,MAAM,EACP,GAAG,UAAU,CAAC;QACf,MAAM,OAAO,GAAG,MAAM,mCAAmC,CAAC;YACxD,MAAM;YACN,WAAW,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,WAAW;YACvC,UAAU;YACV,OAAO;YACP,OAAO,EAAE,kBAAkB;SAC5B,CAAC,CAAC;QAEH,IAAI,CAAC,WAAW,EAAE,CAAC;YACjB,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAC;QACrD,CAAC;QAED,UAAU,CAAC,WAAW,CAAC,CAAC,MAAM,CAC5B,KAAK,CAAC,aAAa,CACjB,aAAa,EACb;YACE,OAAO,EAAE,oBAAoB;YAC7B,OAAO;YACP,UAAU;YACV,WAAW;YACX,KAAK;YACL,MAAM;YACN,wBAAwB;YACxB,2BAA2B;YAC3B,GAAG;SACJ,EACD,IAAI,CACL,CACF,CAAC;QACF,OAAO,OAAO,CAAC;IACjB,CAAC;CAAA,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { parseReactVersion } from './utils';\n\nconst reactVersion = React.version;\nparseReactVersion(reactVersion);\n\nimport { createRoot } from 'react-dom/client';\nimport { CommunicationTokenCredential, CommunicationUserIdentifier } from '@azure/communication-common';\nimport {\n  CallComposite,\n  createAzureCommunicationCallAdapter,\n  AzureCommunicationCallAdapterOptions,\n  CallAdapter,\n  CallAdapterLocator,\n  CallCompositeOptions,\n  BaseCompositeProps,\n  CallCompositeIcons\n} from '@internal/react-composites';\nimport { initializeIcons } from '@fluentui/react';\n\n/**\n * Props for the OutboundCallComposite that you can use in your application.\n *\n * Contains two options bags:\n * - adapterOptions: Options for the {@link AzureCommunicationCallAdapter}\n * - callCompositeOptions: Options for the {@link CallComposite} {@link CallCompositeOptions}\n *\n * @public\n */\nexport interface CallCompositeLoaderProps extends Partial<BaseCompositeProps<CallCompositeIcons>> {\n  /**\n   * UserId for the local user.\n   */\n  userId: CommunicationUserIdentifier;\n  /**\n   * CommunicationTokenCredential for the local user.\n   */\n  credential: CommunicationTokenCredential;\n  /**\n   * Display name for the local user.\n   */\n  displayName: string;\n  /**\n   * locator for the call\n   */\n  locator: CallAdapterLocator;\n  /**\n   * Options for the {@link AzureCommunicationCallAdapter}\n   * This is used to configure the call adapter.\n   */\n  callAdapterOptions?: AzureCommunicationCallAdapterOptions;\n  /**\n   * Options for the {@link CallComposite} {@link CallCompositeOptions}\n   * This is used to configure the call composite.\n   */\n  callCompositeOptions?: CallCompositeOptions;\n  /**\n   * Device form factor for the composite.\n   */\n  formFactor?: 'mobile' | 'desktop';\n}\n\n/**\n * Loader function for the CallComposite that you can use in your application. This\n * function will load the CallComposite into the provided HTML element. The best use case for this\n * is in a Node ui framework that is not React based.\n *\n * @public\n */\nexport const loadCallComposite = async function (\n  loaderArgs: CallCompositeLoaderProps,\n  htmlElement: HTMLElement\n): Promise<CallAdapter | undefined> {\n  initializeIcons();\n  const {\n    userId,\n    credential,\n    displayName,\n    locator,\n    callAdapterOptions,\n    callCompositeOptions,\n    formFactor,\n    fluentTheme,\n    icons,\n    onFetchAvatarPersonaData,\n    onFetchParticipantMenuItems,\n    rtl,\n    locale\n  } = loaderArgs;\n  const adapter = await createAzureCommunicationCallAdapter({\n    userId,\n    displayName: displayName ?? 'anonymous',\n    credential,\n    locator,\n    options: callAdapterOptions\n  });\n\n  if (!htmlElement) {\n    throw new Error('Failed to find the root element');\n  }\n\n  createRoot(htmlElement).render(\n    React.createElement(\n      CallComposite,\n      {\n        options: callCompositeOptions,\n        adapter,\n        formFactor,\n        fluentTheme,\n        icons,\n        locale,\n        onFetchAvatarPersonaData,\n        onFetchParticipantMenuItems,\n        rtl\n      },\n      null\n    )\n  );\n  return adapter;\n};\n"]}

package/dist/dist-esm/acs-ui-javascript-loaders/src/callWithChatCompositeLoader.d.ts

@@ -8,17 +8,43 @@ import { CallWithChatAdapter, CallAndChatLocator, CallWithChatCompositeOptions,
  * - 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
  * function will load the CallWithChatComposite into the provided HTML element.

package/dist/dist-esm/acs-ui-javascript-loaders/src/callWithChatCompositeLoader.js

@@ -26,7 +26,7 @@ import { initializeIcons } from '@fluentui/react';
 export const loadCallWithChatComposite = function (loaderArgs, htmlElement) {
     return __awaiter(this, void 0, void 0, function* () {
         initializeIcons();
-        const { userId, credential, displayName, endpoint, locator, callAdapterOptions, callWithChatCompositeOptions, baseCompositeProps, formFactor } = loaderArgs;
+        const { userId, credential, displayName, endpoint, locator, callAdapterOptions, callWithChatCompositeOptions, formFactor, fluentTheme, locale, icons, onFetchAvatarPersonaData, onFetchParticipantMenuItems, rtl } = loaderArgs;
         const adapter = yield createAzureCommunicationCallWithChatAdapter({
             userId,
             displayName: displayName !== null && displayName !== void 0 ? displayName : 'anonymous',
@@ -38,7 +38,17 @@ export const loadCallWithChatComposite = function (loaderArgs, htmlElement) {
         if (!htmlElement) {
             throw new Error('Failed to find the root element');
         }
-        createRoot(htmlElement).render(React.createElement(CallWithChatComposite, Object.assign(Object.assign({}, baseCompositeProps), { options: callWithChatCompositeOptions, adapter, formFactor }), null));
+        createRoot(htmlElement).render(React.createElement(CallWithChatComposite, {
+            options: callWithChatCompositeOptions,
+            adapter,
+            formFactor,
+            fluentTheme,
+            icons,
+            locale,
+            onFetchAvatarPersonaData,
+            onFetchParticipantMenuItems,
+            rtl
+        }, null));
         return adapter;
     });
 };

package/dist/dist-esm/acs-ui-javascript-loaders/src/callWithChatCompositeLoader.js.map

@@ -1 +1 @@
-{"version":3,"file":"callWithChatCompositeLoader.js","sourceRoot":"","sources":["../../../../../acs-ui-javascript-loaders/src/callWithChatCompositeLoader.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC;AACnC,iBAAiB,CAAC,YAAY,CAAC,CAAC;AAEhC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAIL,2CAA2C,EAC3C,qBAAqB,EAItB,gDAAmC;AACpC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAsBlD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,UACvC,UAA4C,EAC5C,WAAwB;;QAExB,eAAe,EAAE,CAAC;QAClB,MAAM,EACJ,MAAM,EACN,UAAU,EACV,WAAW,EACX,QAAQ,EACR,OAAO,EACP,kBAAkB,EAClB,4BAA4B,EAC5B,kBAAkB,EAClB,UAAU,EACX,GAAG,UAAU,CAAC;QACf,MAAM,OAAO,GAAG,MAAM,2CAA2C,CAAC;YAChE,MAAM;YACN,WAAW,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,WAAW;YACvC,UAAU;YACV,QAAQ,EAAE,QAAQ;YAClB,OAAO,EAAE,OAAO;YAChB,kBAAkB;SACnB,CAAC,CAAC;QAEH,IAAI,CAAC,WAAW,EAAE,CAAC;YACjB,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAC;QACrD,CAAC;QAED,UAAU,CAAC,WAAW,CAAC,CAAC,MAAM,CAC5B,KAAK,CAAC,aAAa,CACjB,qBAAqB,kCAChB,kBAAkB,KAAE,OAAO,EAAE,4BAA4B,EAAE,OAAO,EAAE,UAAU,KACnF,IAAI,CACL,CACF,CAAC;QACF,OAAO,OAAO,CAAC;IACjB,CAAC;CAAA,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { parseReactVersion } from './utils';\n\nconst reactVersion = React.version;\nparseReactVersion(reactVersion);\n\nimport { createRoot } from 'react-dom/client';\nimport { CommunicationTokenCredential, CommunicationUserIdentifier } from '@azure/communication-common';\nimport {\n  CallWithChatAdapter,\n  CallAndChatLocator,\n  CallWithChatCompositeOptions,\n  createAzureCommunicationCallWithChatAdapter,\n  CallWithChatComposite,\n  AzureCommunicationCallAdapterOptions,\n  BaseCompositeProps,\n  CallWithChatCompositeIcons\n} from '@internal/react-composites';\nimport { initializeIcons } from '@fluentui/react';\n\n/**\n * Props for the CallWithChatComposite that you can use in your application.\n *\n * Contains two options bags:\n * - adapterOptions: Options for the {@link AzureCommunicationCallAdapterOptions}\n * - callCompositeOptions: Options for the {@link CallWithChatComposite} {@link CallWithChatCompositeOptions}\n * @public\n */\nexport type CallWithChatCompositeLoaderProps = {\n  userId: CommunicationUserIdentifier;\n  credential: CommunicationTokenCredential;\n  displayName: string;\n  endpoint: string;\n  locator: CallAndChatLocator;\n  callAdapterOptions?: AzureCommunicationCallAdapterOptions;\n  callWithChatCompositeOptions?: CallWithChatCompositeOptions;\n  baseCompositeProps?: BaseCompositeProps<CallWithChatCompositeIcons>;\n  formFactor?: 'mobile' | 'desktop';\n};\n\n/**\n * Props for the CallWithChatComposite that you can use in your application. This\n * function will load the CallWithChatComposite into the provided HTML element.\n * The best use case for this is in a Node UI framework that is not React based.\n *\n * @public\n */\nexport const loadCallWithChatComposite = async function (\n  loaderArgs: CallWithChatCompositeLoaderProps,\n  htmlElement: HTMLElement\n): Promise<CallWithChatAdapter | undefined> {\n  initializeIcons();\n  const {\n    userId,\n    credential,\n    displayName,\n    endpoint,\n    locator,\n    callAdapterOptions,\n    callWithChatCompositeOptions,\n    baseCompositeProps,\n    formFactor\n  } = loaderArgs;\n  const adapter = await createAzureCommunicationCallWithChatAdapter({\n    userId,\n    displayName: displayName ?? 'anonymous',\n    credential,\n    endpoint: endpoint,\n    locator: locator,\n    callAdapterOptions\n  });\n\n  if (!htmlElement) {\n    throw new Error('Failed to find the root element');\n  }\n\n  createRoot(htmlElement).render(\n    React.createElement(\n      CallWithChatComposite,\n      { ...baseCompositeProps, options: callWithChatCompositeOptions, adapter, formFactor },\n      null\n    )\n  );\n  return adapter;\n};\n"]}
+{"version":3,"file":"callWithChatCompositeLoader.js","sourceRoot":"","sources":["../../../../../acs-ui-javascript-loaders/src/callWithChatCompositeLoader.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC;AACnC,iBAAiB,CAAC,YAAY,CAAC,CAAC;AAEhC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAIL,2CAA2C,EAC3C,qBAAqB,EAItB,gDAAmC;AACpC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAgDlD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,UACvC,UAA4C,EAC5C,WAAwB;;QAExB,eAAe,EAAE,CAAC;QAClB,MAAM,EACJ,MAAM,EACN,UAAU,EACV,WAAW,EACX,QAAQ,EACR,OAAO,EACP,kBAAkB,EAClB,4BAA4B,EAC5B,UAAU,EACV,WAAW,EACX,MAAM,EACN,KAAK,EACL,wBAAwB,EACxB,2BAA2B,EAC3B,GAAG,EACJ,GAAG,UAAU,CAAC;QACf,MAAM,OAAO,GAAG,MAAM,2CAA2C,CAAC;YAChE,MAAM;YACN,WAAW,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,WAAW;YACvC,UAAU;YACV,QAAQ,EAAE,QAAQ;YAClB,OAAO,EAAE,OAAO;YAChB,kBAAkB;SACnB,CAAC,CAAC;QAEH,IAAI,CAAC,WAAW,EAAE,CAAC;YACjB,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAC;QACrD,CAAC;QAED,UAAU,CAAC,WAAW,CAAC,CAAC,MAAM,CAC5B,KAAK,CAAC,aAAa,CACjB,qBAAqB,EACrB;YACE,OAAO,EAAE,4BAA4B;YACrC,OAAO;YACP,UAAU;YACV,WAAW;YACX,KAAK;YACL,MAAM;YACN,wBAAwB;YACxB,2BAA2B;YAC3B,GAAG;SACJ,EACD,IAAI,CACL,CACF,CAAC;QACF,OAAO,OAAO,CAAC;IACjB,CAAC;CAAA,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { parseReactVersion } from './utils';\n\nconst reactVersion = React.version;\nparseReactVersion(reactVersion);\n\nimport { createRoot } from 'react-dom/client';\nimport { CommunicationTokenCredential, CommunicationUserIdentifier } from '@azure/communication-common';\nimport {\n  CallWithChatAdapter,\n  CallAndChatLocator,\n  CallWithChatCompositeOptions,\n  createAzureCommunicationCallWithChatAdapter,\n  CallWithChatComposite,\n  AzureCommunicationCallAdapterOptions,\n  BaseCompositeProps,\n  CallWithChatCompositeIcons\n} from '@internal/react-composites';\nimport { initializeIcons } from '@fluentui/react';\n\n/**\n * Props for the CallWithChatComposite that you can use in your application.\n *\n * Contains two options bags:\n * - adapterOptions: Options for the {@link AzureCommunicationCallAdapterOptions}\n * - callCompositeOptions: Options for the {@link CallWithChatComposite} {@link CallWithChatCompositeOptions}\n * @public\n */\nexport interface CallWithChatCompositeLoaderProps extends Partial<BaseCompositeProps<CallWithChatCompositeIcons>> {\n  /**\n   * UserId for the local user.\n   */\n  userId: CommunicationUserIdentifier;\n  /**\n   * CommunicationTokenCredential for the local user.\n   */\n  credential: CommunicationTokenCredential;\n  /**\n   * Display name for the local user.\n   */\n  displayName: string;\n  /**\n   * Azure communication service endpoint. This used for the token and joining the chat thread.\n   */\n  endpoint: string;\n  /**\n   * Locator for the call and the chat thread.\n   * This is used to join the call and the chat thread.\n   */\n  locator: CallAndChatLocator;\n  /**\n   * Options for the {@link AzureCommunicationCallAdapterOptions}\n   * This is used to configure the call adapter.\n   */\n  callAdapterOptions?: AzureCommunicationCallAdapterOptions;\n  /**\n   * Options for the {@link CallWithChatComposite} {@link CallWithChatCompositeOptions}\n   * This is used to configure the call composite.\n   */\n  callWithChatCompositeOptions?: CallWithChatCompositeOptions;\n  /**\n   * Device form factor for the composite.\n   */\n  formFactor?: 'mobile' | 'desktop';\n}\n\n/**\n * Props for the CallWithChatComposite that you can use in your application. This\n * function will load the CallWithChatComposite into the provided HTML element.\n * The best use case for this is in a Node UI framework that is not React based.\n *\n * @public\n */\nexport const loadCallWithChatComposite = async function (\n  loaderArgs: CallWithChatCompositeLoaderProps,\n  htmlElement: HTMLElement\n): Promise<CallWithChatAdapter | undefined> {\n  initializeIcons();\n  const {\n    userId,\n    credential,\n    displayName,\n    endpoint,\n    locator,\n    callAdapterOptions,\n    callWithChatCompositeOptions,\n    formFactor,\n    fluentTheme,\n    locale,\n    icons,\n    onFetchAvatarPersonaData,\n    onFetchParticipantMenuItems,\n    rtl\n  } = loaderArgs;\n  const adapter = await createAzureCommunicationCallWithChatAdapter({\n    userId,\n    displayName: displayName ?? 'anonymous',\n    credential,\n    endpoint: endpoint,\n    locator: locator,\n    callAdapterOptions\n  });\n\n  if (!htmlElement) {\n    throw new Error('Failed to find the root element');\n  }\n\n  createRoot(htmlElement).render(\n    React.createElement(\n      CallWithChatComposite,\n      {\n        options: callWithChatCompositeOptions,\n        adapter,\n        formFactor,\n        fluentTheme,\n        icons,\n        locale,\n        onFetchAvatarPersonaData,\n        onFetchParticipantMenuItems,\n        rtl\n      },\n      null\n    )\n  );\n  return adapter;\n};\n"]}

package/dist/dist-esm/acs-ui-javascript-loaders/src/chatCompositeLoader.d.ts

@@ -5,15 +5,33 @@ import { BaseCompositeProps, ChatAdapter, ChatCompositeIcons, ChatCompositeOptio
  * 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
  * function will load the ChatComposite into the provided HTML element.

package/dist/dist-esm/acs-ui-javascript-loaders/src/chatCompositeLoader.js

@@ -26,7 +26,7 @@ import { initializeIcons } from '@fluentui/react';
 export const loadChatComposite = function (loaderArgs, htmlElement) {
     return __awaiter(this, void 0, void 0, function* () {
         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 = yield createAzureCommunicationChatAdapter({
             endpoint,
             userId,
@@ -37,7 +37,16 @@ export const loadChatComposite = function (loaderArgs, htmlElement) {
         if (!htmlElement) {
             throw new Error('Failed to find the root element');
         }
-        createRoot(htmlElement).render(React.createElement(ChatComposite, Object.assign(Object.assign({}, baseCompositeProps), { options: chatCompositeOptions, adapter }), null));
+        createRoot(htmlElement).render(React.createElement(ChatComposite, {
+            options: chatCompositeOptions,
+            adapter,
+            fluentTheme,
+            icons,
+            locale,
+            onFetchAvatarPersonaData,
+            onFetchParticipantMenuItems,
+            rtl
+        }, null));
         return adapter;
     });
 };

package/dist/dist-esm/acs-ui-javascript-loaders/src/chatCompositeLoader.js.map

@@ -1 +1 @@
-{"version":3,"file":"chatCompositeLoader.js","sourceRoot":"","sources":["../../../../../acs-ui-javascript-loaders/src/chatCompositeLoader.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC;AACnC,iBAAiB,CAAC,YAAY,CAAC,CAAC;AAEhC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAGL,aAAa,EAGb,mCAAmC,EACpC,gDAAmC;AACpC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAiBlD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,UAC/B,UAAoC,EACpC,WAAwB;;QAExB,eAAe,EAAE,CAAC;QAClB,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,GAAG,UAAU,CAAC;QACrH,MAAM,OAAO,GAAG,MAAM,mCAAmC,CAAC;YACxD,QAAQ;YACR,MAAM;YACN,WAAW,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,WAAW;YACvC,UAAU;YACV,QAAQ;SACT,CAAC,CAAC;QAEH,IAAI,CAAC,WAAW,EAAE,CAAC;YACjB,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAC;QACrD,CAAC;QAED,UAAU,CAAC,WAAW,CAAC,CAAC,MAAM,CAC5B,KAAK,CAAC,aAAa,CAAC,aAAa,kCAAO,kBAAkB,KAAE,OAAO,EAAE,oBAAoB,EAAE,OAAO,KAAI,IAAI,CAAC,CAC5G,CAAC;QACF,OAAO,OAAO,CAAC;IACjB,CAAC;CAAA,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { parseReactVersion } from './utils';\n\nconst reactVersion = React.version;\nparseReactVersion(reactVersion);\n\nimport { createRoot } from 'react-dom/client';\nimport { CommunicationTokenCredential, CommunicationUserIdentifier } from '@azure/communication-common';\nimport {\n  BaseCompositeProps,\n  ChatAdapter,\n  ChatComposite,\n  ChatCompositeIcons,\n  ChatCompositeOptions,\n  createAzureCommunicationChatAdapter\n} from '@internal/react-composites';\nimport { initializeIcons } from '@fluentui/react';\n\n/**\n * Props for the ChatComposite that you can use in your application. Contains the\n * options for the {@link ChatComposite} {@link ChatCompositeOptions}.\n * @public\n */\nexport type ChatCompositeLoaderProps = {\n  userId: CommunicationUserIdentifier;\n  credential: CommunicationTokenCredential;\n  displayName?: string;\n  endpoint: string;\n  threadId: string;\n  chatCompositeOptions?: ChatCompositeOptions;\n  baseCompositeProps?: BaseCompositeProps<ChatCompositeIcons>;\n};\n\n/**\n * Loader function for the ChatComposite that you can use in your application. This\n * function will load the ChatComposite into the provided HTML element.\n * The best use case for this is in a Node UI framework that is not React based.\n *\n * @public\n */\nexport const loadChatComposite = async function (\n  loaderArgs: ChatCompositeLoaderProps,\n  htmlElement: HTMLElement\n): Promise<ChatAdapter | undefined> {\n  initializeIcons();\n  const { userId, credential, endpoint, threadId, displayName, chatCompositeOptions, baseCompositeProps } = loaderArgs;\n  const adapter = await createAzureCommunicationChatAdapter({\n    endpoint,\n    userId,\n    displayName: displayName ?? 'anonymous',\n    credential,\n    threadId\n  });\n\n  if (!htmlElement) {\n    throw new Error('Failed to find the root element');\n  }\n\n  createRoot(htmlElement).render(\n    React.createElement(ChatComposite, { ...baseCompositeProps, options: chatCompositeOptions, adapter }, null)\n  );\n  return adapter;\n};\n"]}
+{"version":3,"file":"chatCompositeLoader.js","sourceRoot":"","sources":["../../../../../acs-ui-javascript-loaders/src/chatCompositeLoader.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC;AACnC,iBAAiB,CAAC,YAAY,CAAC,CAAC;AAEhC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAGL,aAAa,EAGb,mCAAmC,EACpC,gDAAmC;AACpC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAmClD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,UAC/B,UAAoC,EACpC,WAAwB;;QAExB,eAAe,EAAE,CAAC;QAClB,MAAM,EACJ,MAAM,EACN,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,oBAAoB,EACpB,WAAW,EACX,MAAM,EACN,KAAK,EACL,wBAAwB,EACxB,2BAA2B,EAC3B,GAAG,EACJ,GAAG,UAAU,CAAC;QACf,MAAM,OAAO,GAAG,MAAM,mCAAmC,CAAC;YACxD,QAAQ;YACR,MAAM;YACN,WAAW,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,WAAW;YACvC,UAAU;YACV,QAAQ;SACT,CAAC,CAAC;QAEH,IAAI,CAAC,WAAW,EAAE,CAAC;YACjB,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAC;QACrD,CAAC;QAED,UAAU,CAAC,WAAW,CAAC,CAAC,MAAM,CAC5B,KAAK,CAAC,aAAa,CACjB,aAAa,EACb;YACE,OAAO,EAAE,oBAAoB;YAC7B,OAAO;YACP,WAAW;YACX,KAAK;YACL,MAAM;YACN,wBAAwB;YACxB,2BAA2B;YAC3B,GAAG;SACJ,EACD,IAAI,CACL,CACF,CAAC;QACF,OAAO,OAAO,CAAC;IACjB,CAAC;CAAA,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { parseReactVersion } from './utils';\n\nconst reactVersion = React.version;\nparseReactVersion(reactVersion);\n\nimport { createRoot } from 'react-dom/client';\nimport { CommunicationTokenCredential, CommunicationUserIdentifier } from '@azure/communication-common';\nimport {\n  BaseCompositeProps,\n  ChatAdapter,\n  ChatComposite,\n  ChatCompositeIcons,\n  ChatCompositeOptions,\n  createAzureCommunicationChatAdapter\n} from '@internal/react-composites';\nimport { initializeIcons } from '@fluentui/react';\n\n/**\n * Props for the ChatComposite that you can use in your application. Contains the\n * options for the {@link ChatComposite} {@link ChatCompositeOptions}.\n * @public\n */\nexport interface ChatCompositeLoaderProps extends Partial<BaseCompositeProps<ChatCompositeIcons>> {\n  /**\n   * UserId for the local user.\n   */\n  userId: CommunicationUserIdentifier;\n  /**\n   * CommunicationTokenCredential for the local user.\n   */\n  credential: CommunicationTokenCredential;\n  /**\n   * Display name for the local user.\n   */\n  displayName?: string;\n  /**\n   * Communication service endpoint. This is used for the token and joining the chat thread.\n   */\n  endpoint: string;\n  /**\n   * Communication threadId for the chat thread.\n   */\n  threadId: string;\n  /**\n   * Options for the {@link AzureCommunicationChatAdapter}\n   * This is used to configure the chat adapter.\n   */\n  chatCompositeOptions?: ChatCompositeOptions;\n}\n\n/**\n * Loader function for the ChatComposite that you can use in your application. This\n * function will load the ChatComposite into the provided HTML element.\n * The best use case for this is in a Node UI framework that is not React based.\n *\n * @public\n */\nexport const loadChatComposite = async function (\n  loaderArgs: ChatCompositeLoaderProps,\n  htmlElement: HTMLElement\n): Promise<ChatAdapter | undefined> {\n  initializeIcons();\n  const {\n    userId,\n    credential,\n    endpoint,\n    threadId,\n    displayName,\n    chatCompositeOptions,\n    fluentTheme,\n    locale,\n    icons,\n    onFetchAvatarPersonaData,\n    onFetchParticipantMenuItems,\n    rtl\n  } = loaderArgs;\n  const adapter = await createAzureCommunicationChatAdapter({\n    endpoint,\n    userId,\n    displayName: displayName ?? 'anonymous',\n    credential,\n    threadId\n  });\n\n  if (!htmlElement) {\n    throw new Error('Failed to find the root element');\n  }\n\n  createRoot(htmlElement).render(\n    React.createElement(\n      ChatComposite,\n      {\n        options: chatCompositeOptions,\n        adapter,\n        fluentTheme,\n        icons,\n        locale,\n        onFetchAvatarPersonaData,\n        onFetchParticipantMenuItems,\n        rtl\n      },\n      null\n    )\n  );\n  return adapter;\n};\n"]}

package/dist/dist-esm/acs-ui-javascript-loaders/src/outboundCallCompositeLoader.d.ts

@@ -9,15 +9,40 @@ import { CallCompositeOptions, StartCallIdentifier, AzureCommunicationCallAdapte
  *
  * @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
  * function will load the CallComposite into the provided HTML element to make outbound calls.

package/dist/dist-esm/acs-ui-javascript-loaders/src/outboundCallCompositeLoader.js.map

@@ -1 +1 @@
-{"version":3,"file":"outboundCallCompositeLoader.js","sourceRoot":"","sources":["../../../../../acs-ui-javascript-loaders/src/outboundCallCompositeLoader.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC;AACnC,iBAAiB,CAAC,YAAY,CAAC,CAAC;AAEhC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAAE,+BAA+B,EAAE,gCAAgC;AAC1E,OAAO,EACL,aAAa,EACb,mCAAmC,EAOpC,gDAAmC;AACpC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAqBlD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,UACvC,UAA4C,EAC5C,WAAwB;;;QAExB,eAAe,EAAE,CAAC;QAClB,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,aAAa,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,GAAG,UAAU,CAAC;QAChH,MAAM,sBAAsB,GAC1B,OAAO,aAAa,CAAC,CAAC,CAAC,KAAK,QAAQ;YAClC,CAAC,CAAE,aAA0B,CAAC,GAAG,CAAC,CAAC,MAAc,EAAE,EAAE;gBACjD,OAAO,+BAA+B,CAAC,MAAM,CAAC,CAAC;YACjD,CAAC,CAAC;YACJ,CAAC,CAAC,SAAS,CAAC;QAEhB,MAAM,OAAO,GAAG,MAAM,mCAAmC,CAAC;YACxD,MAAM;YACN,WAAW,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,WAAW;YACvC,UAAU;YACV,aAAa,EAAE,MAAC,sBAAgD,mCAAK,aAAuC;YAC5G,OAAO,EAAE,kBAAkB;SAC5B,CAAC,CAAC;QAEH,IAAI,CAAC,WAAW,EAAE,CAAC;YACjB,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAC;QACrD,CAAC;QAED,UAAU,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,aAAa,EAAE,EAAE,OAAO,EAAE,oBAAoB,EAAE,OAAO,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC;QACrH,OAAO,OAAO,CAAC;IACjB,CAAC;CAAA,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { parseReactVersion } from './utils';\n\nconst reactVersion = React.version;\nparseReactVersion(reactVersion);\n\nimport { createRoot } from 'react-dom/client';\nimport { CommunicationTokenCredential, CommunicationUserIdentifier } from '@azure/communication-common';\nimport { fromFlatCommunicationIdentifier } from '@internal/acs-ui-common';\nimport {\n  CallComposite,\n  createAzureCommunicationCallAdapter,\n  CallCompositeOptions,\n  StartCallIdentifier,\n  AzureCommunicationCallAdapterOptions,\n  CallAdapter,\n  BaseCompositeProps,\n  CallCompositeIcons\n} from '@internal/react-composites';\nimport { initializeIcons } from '@fluentui/react';\n\n/**\n * Props for the OutboundCallComposite that you can use in your application.\n *\n * Contains two options bags:\n * - adapterOptions: Options for the {@link AzureCommunicationCallAdapter}\n * - callCompositeOptions: Options for the {@link CallComposite} {@link CallCompositeOptions}\n *\n * @public\n */\nexport type OutboundCallCompositeLoaderProps = {\n  userId: CommunicationUserIdentifier;\n  credential: CommunicationTokenCredential;\n  displayName: string;\n  targetCallees: string[] | StartCallIdentifier[];\n  callAdapterOptions?: AzureCommunicationCallAdapterOptions;\n  baseCompositeProps?: BaseCompositeProps<CallCompositeIcons>;\n  callCompositeOptions?: CallCompositeOptions;\n};\n\n/**\n * Loader function for the OutboundCallComposite that you can use in your application. This\n * function will load the CallComposite into the provided HTML element to make outbound calls.\n * The best use case for this is in a Node UI framework that is not React based.\n *\n * @public\n */\nexport const loadOutboundCallComposite = async function (\n  loaderArgs: OutboundCallCompositeLoaderProps,\n  htmlElement: HTMLElement\n): Promise<CallAdapter | undefined> {\n  initializeIcons();\n  const { userId, credential, displayName, targetCallees, callAdapterOptions, callCompositeOptions } = loaderArgs;\n  const formattedTargetCallees =\n    typeof targetCallees[0] === 'string'\n      ? (targetCallees as string[]).map((callee: string) => {\n          return fromFlatCommunicationIdentifier(callee);\n        })\n      : undefined;\n\n  const adapter = await createAzureCommunicationCallAdapter({\n    userId,\n    displayName: displayName ?? 'anonymous',\n    credential,\n    targetCallees: (formattedTargetCallees as StartCallIdentifier[]) ?? (targetCallees as StartCallIdentifier[]),\n    options: callAdapterOptions\n  });\n\n  if (!htmlElement) {\n    throw new Error('Failed to find the root element');\n  }\n\n  createRoot(htmlElement).render(React.createElement(CallComposite, { options: callCompositeOptions, adapter }, null));\n  return adapter;\n};\n"]}
+{"version":3,"file":"outboundCallCompositeLoader.js","sourceRoot":"","sources":["../../../../../acs-ui-javascript-loaders/src/outboundCallCompositeLoader.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC;AACnC,iBAAiB,CAAC,YAAY,CAAC,CAAC;AAEhC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAAE,+BAA+B,EAAE,gCAAgC;AAC1E,OAAO,EACL,aAAa,EACb,mCAAmC,EAOpC,gDAAmC;AACpC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AA8ClD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,UACvC,UAA4C,EAC5C,WAAwB;;;QAExB,eAAe,EAAE,CAAC;QAClB,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,aAAa,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,GAAG,UAAU,CAAC;QAChH,MAAM,sBAAsB,GAC1B,OAAO,aAAa,CAAC,CAAC,CAAC,KAAK,QAAQ;YAClC,CAAC,CAAE,aAA0B,CAAC,GAAG,CAAC,CAAC,MAAc,EAAE,EAAE;gBACjD,OAAO,+BAA+B,CAAC,MAAM,CAAC,CAAC;YACjD,CAAC,CAAC;YACJ,CAAC,CAAC,SAAS,CAAC;QAEhB,MAAM,OAAO,GAAG,MAAM,mCAAmC,CAAC;YACxD,MAAM;YACN,WAAW,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,WAAW;YACvC,UAAU;YACV,aAAa,EAAE,MAAC,sBAAgD,mCAAK,aAAuC;YAC5G,OAAO,EAAE,kBAAkB;SAC5B,CAAC,CAAC;QAEH,IAAI,CAAC,WAAW,EAAE,CAAC;YACjB,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAC;QACrD,CAAC;QAED,UAAU,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,aAAa,EAAE,EAAE,OAAO,EAAE,oBAAoB,EAAE,OAAO,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC;QACrH,OAAO,OAAO,CAAC;IACjB,CAAC;CAAA,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { parseReactVersion } from './utils';\n\nconst reactVersion = React.version;\nparseReactVersion(reactVersion);\n\nimport { createRoot } from 'react-dom/client';\nimport { CommunicationTokenCredential, CommunicationUserIdentifier } from '@azure/communication-common';\nimport { fromFlatCommunicationIdentifier } from '@internal/acs-ui-common';\nimport {\n  CallComposite,\n  createAzureCommunicationCallAdapter,\n  CallCompositeOptions,\n  StartCallIdentifier,\n  AzureCommunicationCallAdapterOptions,\n  CallAdapter,\n  BaseCompositeProps,\n  CallCompositeIcons\n} from '@internal/react-composites';\nimport { initializeIcons } from '@fluentui/react';\n\n/**\n * Props for the OutboundCallComposite that you can use in your application.\n *\n * Contains two options bags:\n * - adapterOptions: Options for the {@link AzureCommunicationCallAdapter}\n * - callCompositeOptions: Options for the {@link CallComposite} {@link CallCompositeOptions}\n *\n * @public\n */\nexport interface OutboundCallCompositeLoaderProps extends Partial<BaseCompositeProps<CallCompositeIcons>> {\n  /**\n   * UserId for the local user.\n   */\n  userId: CommunicationUserIdentifier;\n  /**\n   * CommunicationTokenCredential for the local user.\n   */\n  credential: CommunicationTokenCredential;\n  /**\n   * Display name for the local user.\n   */\n  displayName: string;\n  /**\n   * Participants that will be called.\n   * This can be a list of either {@link CommunicationUserIdentifier} or string identifiers.\n   */\n  targetCallees: string[] | StartCallIdentifier[];\n  /**\n   * Options for the {@link AzureCommunicationCallAdapter}\n   * This is used to configure the call adapter.\n   */\n  callAdapterOptions?: AzureCommunicationCallAdapterOptions;\n  /**\n   * Options for the {@link CallComposite} {@link CallCompositeOptions}\n   * This is used to configure the call composite.\n   */\n  callCompositeOptions?: CallCompositeOptions;\n  /**\n   * Device form factor for the composite.\n   * This is used to configure the call composite.\n   */\n  formFactor?: 'mobile' | 'desktop';\n}\n\n/**\n * Loader function for the OutboundCallComposite that you can use in your application. This\n * function will load the CallComposite into the provided HTML element to make outbound calls.\n * The best use case for this is in a Node UI framework that is not React based.\n *\n * @public\n */\nexport const loadOutboundCallComposite = async function (\n  loaderArgs: OutboundCallCompositeLoaderProps,\n  htmlElement: HTMLElement\n): Promise<CallAdapter | undefined> {\n  initializeIcons();\n  const { userId, credential, displayName, targetCallees, callAdapterOptions, callCompositeOptions } = loaderArgs;\n  const formattedTargetCallees =\n    typeof targetCallees[0] === 'string'\n      ? (targetCallees as string[]).map((callee: string) => {\n          return fromFlatCommunicationIdentifier(callee);\n        })\n      : undefined;\n\n  const adapter = await createAzureCommunicationCallAdapter({\n    userId,\n    displayName: displayName ?? 'anonymous',\n    credential,\n    targetCallees: (formattedTargetCallees as StartCallIdentifier[]) ?? (targetCallees as StartCallIdentifier[]),\n    options: callAdapterOptions\n  });\n\n  if (!htmlElement) {\n    throw new Error('Failed to find the root element');\n  }\n\n  createRoot(htmlElement).render(React.createElement(CallComposite, { options: callCompositeOptions, adapter }, null));\n  return adapter;\n};\n"]}

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

@@ -103,24 +103,22 @@ export const CaptionsBanner = (props) => {
             .filter((caption) => caption)
             .map((caption) => {
             if ('message' in caption) {
-                return (React.createElement("li", { key: `RealTimeText - ${caption.id}`, className: captionContainerClassName, "data-is-focusable": true },
+                return (React.createElement("div", { key: `RealTimeText - ${caption.id}`, className: captionContainerClassName, "data-is-focusable": true },
                     React.createElement(RealTimeText, Object.assign({}, caption))));
             }
-            return (React.createElement("li", { key: `Captions - ${caption.id}`, className: captionContainerClassName, "data-is-focusable": true },
+            return (React.createElement("div", { key: `Captions - ${caption.id}`, className: captionContainerClassName, "data-is-focusable": true },
                 React.createElement(_Caption, Object.assign({}, caption, { onRenderAvatar: onRenderAvatar }))));
-            return React.createElement(React.Fragment, null);
         })));
     };
     return (React.createElement(React.Fragment, null, (startCaptionsInProgress || isCaptionsOn || isRealTimeTextOn) && (React.createElement(FocusZone, { shouldFocusOnMount: true, className: captionsContainerClassName, "data-ui-id": "captions-banner" },
         (isCaptionsOn || isRealTimeTextOn) && formFactor === 'compact' && (React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center", className: bannerTitleContainerClassName },
             React.createElement(Text, { className: titleClassName }, getTitle()),
             React.createElement(IconButton, { "data-ui-id": "captions-banner-expand-icon", iconProps: { iconName: expandBannerHeight ? 'MinimizeIcon' : 'ExpandIcon' }, ariaLabel: expandBannerHeight ? strings.minimizeButtonAriaLabel : strings.expandButtonAriaLabel, onClick: () => setExpandBannerHeight(!expandBannerHeight), styles: expandIconClassName(theme) }))),
-        (isCaptionsOn || isRealTimeTextOn) && (React.createElement("ul", { ref: captionsScrollDivRef, className: (captionsOptions === null || captionsOptions === void 0 ? void 0 : captionsOptions.height) === 'full'
+        (isCaptionsOn || isRealTimeTextOn) && (React.createElement("div", { ref: captionsScrollDivRef, className: (captionsOptions === null || captionsOptions === void 0 ? void 0 : captionsOptions.height) === 'full'
                 ? captionsBannerFullHeightClassName(theme)
                 : captionsBannerClassName(formFactor, expandBannerHeight), "data-ui-id": "captions-banner-inner", "data-is-focusable": true },
-            isRealTimeTextOn && (React.createElement("li", null,
-                React.createElement(Stack, { className: rttDisclosureBannerClassName() },
-                    React.createElement(_RTTDisclosureBanner, { strings: realTimeTextDisclosureBannerStrings })))),
+            isRealTimeTextOn && (React.createElement(Stack, { className: rttDisclosureBannerClassName() },
+                React.createElement(_RTTDisclosureBanner, { strings: realTimeTextDisclosureBannerStrings }))),
             captionsAndRealTimeText())),
         isRealTimeTextOn && onSendRealTimeText && (React.createElement(TextField, { styles: realTimeTextInputBoxStyles(theme), placeholder: strings.realTimeTextInputBoxDefaultText, value: textFieldValue, onKeyDown: handleKeyDown, onChange: (_, newValue) => {
                 setTextFieldValue(newValue || '');

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

@@ -1 +1 @@
-{"version":3,"file":"CaptionsBanner.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/CaptionsBanner.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { Stack, FocusZone, Spinner, useTheme } from '@fluentui/react';\nimport { TextField } from '@fluentui/react';\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\nimport { useMemo } from 'react';\nimport { _Caption } from './Caption';\nimport {\n  captionContainerClassName,\n  captionsBannerClassName,\n  captionsBannerFullHeightClassName,\n  captionsContainerClassName,\n  loadingBannerFullHeightStyles,\n  loadingBannerStyles\n} from './styles/Captions.style';\nimport { rttDisclosureBannerClassName } from './styles/Captions.style';\nimport { OnRenderAvatarCallback } from '../types';\nimport { useLocale } from '../localization';\nimport { RealTimeText } from './RealTimeText';\nimport { _RTTDisclosureBanner } from './RTTDisclosureBanner';\nimport { sortCaptionsAndRealTimeTexts } from './utils/sortCaptionsAndRealTimeTexts';\nimport {\n  expandIconClassName,\n  bannerTitleContainerClassName,\n  realTimeTextInputBoxStyles\n} from './styles/Captions.style';\nimport { titleClassName } from './styles/CaptionsSettingsModal.styles';\nimport { Text, IconButton } from '@fluentui/react';\n\n/**\n * @public\n * information required for each line of caption\n */\nexport type CaptionsInformation = {\n  /**\n   * unique id for each caption\n   */\n  id: string;\n  /**\n   * speaker's display name\n   */\n  displayName: string;\n  /**\n   * content of the caption\n   */\n  captionText: string;\n  /**\n   * id of the speaker\n   */\n  userId?: string;\n  /**\n   * timestamp when the caption was created\n   * Please note that this value is essential for determining the order of captions and real time text messages\n   * If you are using both captions and real time text, please ensure that the createdTimeStamp is populated\n   */\n  createdTimeStamp?: Date;\n};\n\n/**\n * @public\n * information required for each line of real time text\n */\nexport type RealTimeTextInformation = {\n  /**\n   * The id of the real time text.\n   */\n  id: number;\n  /**\n   * sender's display name\n   */\n  displayName: string;\n  /**\n   * id of the sender\n   */\n  userId?: string;\n  /**\n   * The real time text message.\n   */\n  message: string;\n  /**\n   * if the real time text received is partial\n   */\n  isTyping: boolean;\n  /**\n   * timestamp when the real time text was finalized\n   */\n  finalizedTimeStamp: Date;\n  /**\n   * If message originated from the local participant\n   * default value is false\n   */\n  isMe?: boolean;\n};\n/**\n * @public\n * strings for captions banner\n */\nexport interface CaptionsBannerStrings {\n  /**\n   * Spinner text for captions banner\n   */\n  captionsBannerSpinnerText?: string;\n\n  /**\n   * Default text for RTT input text box\n   */\n  realTimeTextInputBoxDefaultText?: string;\n\n  /**\n   * Error message for RTT input text box when the size exceeds the limit 2000\n   */\n  realTimeTextInputErrorMessage?: string;\n\n  /**\n   * Real time text disclosure banner title\n   */\n  realTimeTextBannerTitle?: string;\n\n  /**\n   * Real time text disclosure banner content\n   */\n  realTimeTextBannerContent?: string;\n\n  /**\n   * Real time text disclosure banner link label\n   */\n  realTimeTextBannerLinkLabel?: string;\n\n  /**\n   * Title for the container when only captions is enabled\n   */\n  captionsOnlyContainerTitle?: string;\n  /**\n   * Title for the container when only real time text is enabled\n   */\n  realTimeTextOnlyContainerTitle?: string;\n  /**\n   * Title for the container when both captions and real time text is enabled\n   */\n  captionsAndRealTimeTextContainerTitle?: string;\n  /**\n   * Expand button aria label\n   */\n  expandButtonAriaLabel?: string;\n  /**\n   * Minimize button aria label\n   */\n  minimizeButtonAriaLabel?: string;\n}\n\n/**\n * @public\n * CaptionsBanner Component Props.\n */\nexport interface CaptionsBannerProps {\n  /**\n   * Array of captions to be displayed\n   */\n  captions: CaptionsInformation[];\n  /**\n   * Array of finalized and partial real time text messages\n   */\n  realTimeTexts?: {\n    completedMessages?: RealTimeTextInformation[];\n    currentInProgress?: RealTimeTextInformation[];\n    myInProgress?: RealTimeTextInformation;\n  };\n  /**\n   * Flag to indicate if captions are on\n   */\n  isCaptionsOn?: boolean;\n\n  /**\n   * Flag to indicate if real time text is on\n   */\n  isRealTimeTextOn?: boolean;\n  /**\n   * Flag to indicate if captions are being started\n   * This is used to show spinner while captions are being started\n   */\n  startCaptionsInProgress?: boolean;\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /**\n   * Optional strings for the component\n   */\n  strings?: CaptionsBannerStrings;\n  /**\n   * Optional form factor for the component.\n   * @defaultValue 'default'\n   */\n  formFactor?: 'default' | 'compact';\n  /**\n   * Optional options for the component.\n   */\n  captionsOptions?: {\n    height: 'full' | 'default';\n  };\n\n  /**\n   * Optional callback to send real time text.\n   */\n  onSendRealTimeText?: (text: string, isFinalized: boolean) => Promise<void>;\n\n  /**\n   * Latest local real time text\n   */\n  latestLocalRealTimeText?: RealTimeTextInformation;\n}\n\nconst SCROLL_OFFSET_ALLOWANCE = 20;\n\n/**\n * @public\n * A component for displaying a CaptionsBanner with user icon, displayName and captions text.\n */\nexport const CaptionsBanner = (props: CaptionsBannerProps): JSX.Element => {\n  const {\n    captions,\n    realTimeTexts,\n    isCaptionsOn,\n    startCaptionsInProgress,\n    onRenderAvatar,\n    formFactor = 'default',\n    captionsOptions,\n    isRealTimeTextOn,\n    onSendRealTimeText,\n    latestLocalRealTimeText\n  } = props;\n  const localeStrings = useLocale().strings.captionsBanner;\n  const strings = { ...localeStrings, ...props.strings };\n  const captionsScrollDivRef = useRef<HTMLUListElement>(null);\n  const [isAtBottomOfScroll, setIsAtBottomOfScroll] = useState<boolean>(true);\n  const theme = useTheme();\n\n  const [expandBannerHeight, setExpandBannerHeight] = useState<boolean>(false);\n\n  const getTitle = (): string => {\n    if (isCaptionsOn && isRealTimeTextOn) {\n      return strings.captionsAndRealTimeTextContainerTitle ?? '';\n    } else if (isCaptionsOn) {\n      return strings.captionsOnlyContainerTitle ?? '';\n    } else if (isRealTimeTextOn) {\n      return strings.realTimeTextOnlyContainerTitle ?? '';\n    }\n    return '';\n  };\n\n  // merge realtimetexts and captions into one array based on timestamp\n  // Combine captions and realTimeTexts into one list\n  const combinedList: (CaptionsInformation | RealTimeTextInformation)[] = useMemo(() => {\n    return sortCaptionsAndRealTimeTexts(captions, realTimeTexts?.completedMessages ?? []);\n  }, [captions, realTimeTexts?.completedMessages]);\n\n  const mergedCaptions: (CaptionsInformation | RealTimeTextInformation)[] = useMemo(() => {\n    return [...combinedList, ...(realTimeTexts?.currentInProgress ?? []), realTimeTexts?.myInProgress].slice(-50) as (\n      | CaptionsInformation\n      | RealTimeTextInformation\n    )[];\n  }, [combinedList, realTimeTexts]);\n\n  const scrollToBottom = (): void => {\n    if (captionsScrollDivRef.current) {\n      captionsScrollDivRef.current.scrollTop = captionsScrollDivRef.current.scrollHeight;\n    }\n  };\n\n  const handleScrollToTheBottom = useCallback((): void => {\n    if (!captionsScrollDivRef.current) {\n      return;\n    }\n    const atBottom =\n      Math.ceil(captionsScrollDivRef.current.scrollTop) >=\n      captionsScrollDivRef.current.scrollHeight - captionsScrollDivRef.current.clientHeight - SCROLL_OFFSET_ALLOWANCE;\n\n    setIsAtBottomOfScroll(atBottom);\n  }, []);\n\n  useEffect(() => {\n    const captionsScrollDiv = captionsScrollDivRef.current;\n    captionsScrollDiv?.addEventListener('scroll', handleScrollToTheBottom);\n\n    return () => {\n      captionsScrollDiv?.removeEventListener('scroll', handleScrollToTheBottom);\n    };\n  }, [handleScrollToTheBottom, isCaptionsOn, isRealTimeTextOn]);\n\n  useEffect(() => {\n    // only auto scroll to bottom is already is at bottom of scroll before new caption comes in\n    if (isAtBottomOfScroll) {\n      scrollToBottom();\n    }\n  }, [captions, realTimeTexts, isAtBottomOfScroll]);\n\n  const [textFieldValue, setTextFieldValue] = useState<string>('');\n\n  useEffect(() => {\n    // if the latest real time text sent by myself is final, clear the text field\n    if (latestLocalRealTimeText && !latestLocalRealTimeText.isTyping) {\n      setTextFieldValue('');\n    }\n  }, [latestLocalRealTimeText]);\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>): void => {\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      if (textFieldValue && onSendRealTimeText) {\n        onSendRealTimeText(textFieldValue, true);\n        setTextFieldValue('');\n      }\n    }\n  };\n\n  const realTimeTextDisclosureBannerStrings = {\n    bannerTitle: strings.realTimeTextBannerTitle ?? '',\n    bannerContent: strings.realTimeTextBannerContent ?? '',\n    bannerLinkLabel: strings.realTimeTextBannerLinkLabel ?? ''\n  };\n\n  const captionsAndRealTimeText = (): JSX.Element => {\n    return (\n      <>\n        {mergedCaptions\n          .filter((caption) => caption)\n          .map((caption) => {\n            if ('message' in caption) {\n              return (\n                <li key={`RealTimeText - ${caption.id}`} className={captionContainerClassName} data-is-focusable={true}>\n                  <RealTimeText {...(caption as RealTimeTextInformation)} />\n                </li>\n              );\n            }\n            return (\n              <li key={`Captions - ${caption.id}`} className={captionContainerClassName} data-is-focusable={true}>\n                <_Caption {...(caption as CaptionsInformation)} onRenderAvatar={onRenderAvatar} />\n              </li>\n            );\n            return <></>;\n          })}\n      </>\n    );\n  };\n\n  return (\n    <>\n      {(startCaptionsInProgress || isCaptionsOn || isRealTimeTextOn) && (\n        <FocusZone shouldFocusOnMount className={captionsContainerClassName} data-ui-id=\"captions-banner\">\n          {(isCaptionsOn || isRealTimeTextOn) && formFactor === 'compact' && (\n            <Stack\n              horizontal\n              horizontalAlign=\"space-between\"\n              verticalAlign=\"center\"\n              className={bannerTitleContainerClassName}\n            >\n              <Text className={titleClassName}>{getTitle()}</Text>\n              <IconButton\n                data-ui-id=\"captions-banner-expand-icon\"\n                iconProps={{ iconName: expandBannerHeight ? 'MinimizeIcon' : 'ExpandIcon' }}\n                ariaLabel={expandBannerHeight ? strings.minimizeButtonAriaLabel : strings.expandButtonAriaLabel}\n                onClick={() => setExpandBannerHeight(!expandBannerHeight)}\n                styles={expandIconClassName(theme)}\n              />\n            </Stack>\n          )}\n          {(isCaptionsOn || isRealTimeTextOn) && (\n            <ul\n              ref={captionsScrollDivRef}\n              className={\n                captionsOptions?.height === 'full'\n                  ? captionsBannerFullHeightClassName(theme)\n                  : captionsBannerClassName(formFactor, expandBannerHeight)\n              }\n              data-ui-id=\"captions-banner-inner\"\n              data-is-focusable={true}\n            >\n              {isRealTimeTextOn && (\n                <li>\n                  <Stack className={rttDisclosureBannerClassName()}>\n                    <_RTTDisclosureBanner strings={realTimeTextDisclosureBannerStrings} />\n                  </Stack>\n                </li>\n              )}\n              {captionsAndRealTimeText()}\n            </ul>\n          )}\n          {isRealTimeTextOn && onSendRealTimeText && (\n            <TextField\n              styles={realTimeTextInputBoxStyles(theme)}\n              placeholder={strings.realTimeTextInputBoxDefaultText}\n              value={textFieldValue}\n              onKeyDown={handleKeyDown}\n              onChange={(_, newValue) => {\n                setTextFieldValue(newValue || '');\n                onSendRealTimeText(newValue || '', false);\n              }}\n              maxLength={2000}\n              errorMessage={textFieldValue.length >= 2000 ? strings.realTimeTextInputErrorMessage : undefined}\n            />\n          )}\n          {!isCaptionsOn && !isRealTimeTextOn && (\n            <Stack\n              verticalAlign=\"center\"\n              styles={\n                captionsOptions?.height === 'full'\n                  ? loadingBannerFullHeightStyles(theme)\n                  : loadingBannerStyles(formFactor)\n              }\n              data-is-focusable={true}\n            >\n              <Spinner label={strings?.captionsBannerSpinnerText} ariaLive=\"assertive\" labelPosition=\"right\" />\n            </Stack>\n          )}\n        </FocusZone>\n      )}\n    </>\n  );\n};\n"]}
+{"version":3,"file":"CaptionsBanner.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/CaptionsBanner.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { Stack, FocusZone, Spinner, useTheme } from '@fluentui/react';\nimport { TextField } from '@fluentui/react';\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\nimport { useMemo } from 'react';\nimport { _Caption } from './Caption';\nimport {\n  captionContainerClassName,\n  captionsBannerClassName,\n  captionsBannerFullHeightClassName,\n  captionsContainerClassName,\n  loadingBannerFullHeightStyles,\n  loadingBannerStyles\n} from './styles/Captions.style';\nimport { rttDisclosureBannerClassName } from './styles/Captions.style';\nimport { OnRenderAvatarCallback } from '../types';\nimport { useLocale } from '../localization';\nimport { RealTimeText } from './RealTimeText';\nimport { _RTTDisclosureBanner } from './RTTDisclosureBanner';\nimport { sortCaptionsAndRealTimeTexts } from './utils/sortCaptionsAndRealTimeTexts';\nimport {\n  expandIconClassName,\n  bannerTitleContainerClassName,\n  realTimeTextInputBoxStyles\n} from './styles/Captions.style';\nimport { titleClassName } from './styles/CaptionsSettingsModal.styles';\nimport { Text, IconButton } from '@fluentui/react';\n\n/**\n * @public\n * information required for each line of caption\n */\nexport type CaptionsInformation = {\n  /**\n   * unique id for each caption\n   */\n  id: string;\n  /**\n   * speaker's display name\n   */\n  displayName: string;\n  /**\n   * content of the caption\n   */\n  captionText: string;\n  /**\n   * id of the speaker\n   */\n  userId?: string;\n  /**\n   * timestamp when the caption was created\n   * Please note that this value is essential for determining the order of captions and real time text messages\n   * If you are using both captions and real time text, please ensure that the createdTimeStamp is populated\n   */\n  createdTimeStamp?: Date;\n};\n\n/**\n * @public\n * information required for each line of real time text\n */\nexport type RealTimeTextInformation = {\n  /**\n   * The id of the real time text.\n   */\n  id: number;\n  /**\n   * sender's display name\n   */\n  displayName: string;\n  /**\n   * id of the sender\n   */\n  userId?: string;\n  /**\n   * The real time text message.\n   */\n  message: string;\n  /**\n   * if the real time text received is partial\n   */\n  isTyping: boolean;\n  /**\n   * timestamp when the real time text was finalized\n   */\n  finalizedTimeStamp: Date;\n  /**\n   * If message originated from the local participant\n   * default value is false\n   */\n  isMe?: boolean;\n};\n/**\n * @public\n * strings for captions banner\n */\nexport interface CaptionsBannerStrings {\n  /**\n   * Spinner text for captions banner\n   */\n  captionsBannerSpinnerText?: string;\n\n  /**\n   * Default text for RTT input text box\n   */\n  realTimeTextInputBoxDefaultText?: string;\n\n  /**\n   * Error message for RTT input text box when the size exceeds the limit 2000\n   */\n  realTimeTextInputErrorMessage?: string;\n\n  /**\n   * Real time text disclosure banner title\n   */\n  realTimeTextBannerTitle?: string;\n\n  /**\n   * Real time text disclosure banner content\n   */\n  realTimeTextBannerContent?: string;\n\n  /**\n   * Real time text disclosure banner link label\n   */\n  realTimeTextBannerLinkLabel?: string;\n\n  /**\n   * Title for the container when only captions is enabled\n   */\n  captionsOnlyContainerTitle?: string;\n  /**\n   * Title for the container when only real time text is enabled\n   */\n  realTimeTextOnlyContainerTitle?: string;\n  /**\n   * Title for the container when both captions and real time text is enabled\n   */\n  captionsAndRealTimeTextContainerTitle?: string;\n  /**\n   * Expand button aria label\n   */\n  expandButtonAriaLabel?: string;\n  /**\n   * Minimize button aria label\n   */\n  minimizeButtonAriaLabel?: string;\n}\n\n/**\n * @public\n * CaptionsBanner Component Props.\n */\nexport interface CaptionsBannerProps {\n  /**\n   * Array of captions to be displayed\n   */\n  captions: CaptionsInformation[];\n  /**\n   * Array of finalized and partial real time text messages\n   */\n  realTimeTexts?: {\n    completedMessages?: RealTimeTextInformation[];\n    currentInProgress?: RealTimeTextInformation[];\n    myInProgress?: RealTimeTextInformation;\n  };\n  /**\n   * Flag to indicate if captions are on\n   */\n  isCaptionsOn?: boolean;\n\n  /**\n   * Flag to indicate if real time text is on\n   */\n  isRealTimeTextOn?: boolean;\n  /**\n   * Flag to indicate if captions are being started\n   * This is used to show spinner while captions are being started\n   */\n  startCaptionsInProgress?: boolean;\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /**\n   * Optional strings for the component\n   */\n  strings?: CaptionsBannerStrings;\n  /**\n   * Optional form factor for the component.\n   * @defaultValue 'default'\n   */\n  formFactor?: 'default' | 'compact';\n  /**\n   * Optional options for the component.\n   */\n  captionsOptions?: {\n    height: 'full' | 'default';\n  };\n\n  /**\n   * Optional callback to send real time text.\n   */\n  onSendRealTimeText?: (text: string, isFinalized: boolean) => Promise<void>;\n\n  /**\n   * Latest local real time text\n   */\n  latestLocalRealTimeText?: RealTimeTextInformation;\n}\n\nconst SCROLL_OFFSET_ALLOWANCE = 20;\n\n/**\n * @public\n * A component for displaying a CaptionsBanner with user icon, displayName and captions text.\n */\nexport const CaptionsBanner = (props: CaptionsBannerProps): JSX.Element => {\n  const {\n    captions,\n    realTimeTexts,\n    isCaptionsOn,\n    startCaptionsInProgress,\n    onRenderAvatar,\n    formFactor = 'default',\n    captionsOptions,\n    isRealTimeTextOn,\n    onSendRealTimeText,\n    latestLocalRealTimeText\n  } = props;\n  const localeStrings = useLocale().strings.captionsBanner;\n  const strings = { ...localeStrings, ...props.strings };\n  const captionsScrollDivRef = useRef<HTMLDivElement>(null);\n  const [isAtBottomOfScroll, setIsAtBottomOfScroll] = useState<boolean>(true);\n  const theme = useTheme();\n\n  const [expandBannerHeight, setExpandBannerHeight] = useState<boolean>(false);\n\n  const getTitle = (): string => {\n    if (isCaptionsOn && isRealTimeTextOn) {\n      return strings.captionsAndRealTimeTextContainerTitle ?? '';\n    } else if (isCaptionsOn) {\n      return strings.captionsOnlyContainerTitle ?? '';\n    } else if (isRealTimeTextOn) {\n      return strings.realTimeTextOnlyContainerTitle ?? '';\n    }\n    return '';\n  };\n\n  // merge realtimetexts and captions into one array based on timestamp\n  // Combine captions and realTimeTexts into one list\n  const combinedList: (CaptionsInformation | RealTimeTextInformation)[] = useMemo(() => {\n    return sortCaptionsAndRealTimeTexts(captions, realTimeTexts?.completedMessages ?? []);\n  }, [captions, realTimeTexts?.completedMessages]);\n\n  const mergedCaptions: (CaptionsInformation | RealTimeTextInformation)[] = useMemo(() => {\n    return [...combinedList, ...(realTimeTexts?.currentInProgress ?? []), realTimeTexts?.myInProgress].slice(-50) as (\n      | CaptionsInformation\n      | RealTimeTextInformation\n    )[];\n  }, [combinedList, realTimeTexts]);\n\n  const scrollToBottom = (): void => {\n    if (captionsScrollDivRef.current) {\n      captionsScrollDivRef.current.scrollTop = captionsScrollDivRef.current.scrollHeight;\n    }\n  };\n\n  const handleScrollToTheBottom = useCallback((): void => {\n    if (!captionsScrollDivRef.current) {\n      return;\n    }\n    const atBottom =\n      Math.ceil(captionsScrollDivRef.current.scrollTop) >=\n      captionsScrollDivRef.current.scrollHeight - captionsScrollDivRef.current.clientHeight - SCROLL_OFFSET_ALLOWANCE;\n\n    setIsAtBottomOfScroll(atBottom);\n  }, []);\n\n  useEffect(() => {\n    const captionsScrollDiv = captionsScrollDivRef.current;\n    captionsScrollDiv?.addEventListener('scroll', handleScrollToTheBottom);\n\n    return () => {\n      captionsScrollDiv?.removeEventListener('scroll', handleScrollToTheBottom);\n    };\n  }, [handleScrollToTheBottom, isCaptionsOn, isRealTimeTextOn]);\n\n  useEffect(() => {\n    // only auto scroll to bottom is already is at bottom of scroll before new caption comes in\n    if (isAtBottomOfScroll) {\n      scrollToBottom();\n    }\n  }, [captions, realTimeTexts, isAtBottomOfScroll]);\n\n  const [textFieldValue, setTextFieldValue] = useState<string>('');\n\n  useEffect(() => {\n    // if the latest real time text sent by myself is final, clear the text field\n    if (latestLocalRealTimeText && !latestLocalRealTimeText.isTyping) {\n      setTextFieldValue('');\n    }\n  }, [latestLocalRealTimeText]);\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>): void => {\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      if (textFieldValue && onSendRealTimeText) {\n        onSendRealTimeText(textFieldValue, true);\n        setTextFieldValue('');\n      }\n    }\n  };\n\n  const realTimeTextDisclosureBannerStrings = {\n    bannerTitle: strings.realTimeTextBannerTitle ?? '',\n    bannerContent: strings.realTimeTextBannerContent ?? '',\n    bannerLinkLabel: strings.realTimeTextBannerLinkLabel ?? ''\n  };\n\n  const captionsAndRealTimeText = (): JSX.Element => {\n    return (\n      <>\n        {mergedCaptions\n          .filter((caption) => caption)\n          .map((caption) => {\n            if ('message' in caption) {\n              return (\n                <div\n                  key={`RealTimeText - ${caption.id}`}\n                  className={captionContainerClassName}\n                  data-is-focusable={true}\n                >\n                  <RealTimeText {...(caption as RealTimeTextInformation)} />\n                </div>\n              );\n            }\n            return (\n              <div key={`Captions - ${caption.id}`} className={captionContainerClassName} data-is-focusable={true}>\n                <_Caption {...(caption as CaptionsInformation)} onRenderAvatar={onRenderAvatar} />\n              </div>\n            );\n          })}\n      </>\n    );\n  };\n\n  return (\n    <>\n      {(startCaptionsInProgress || isCaptionsOn || isRealTimeTextOn) && (\n        <FocusZone shouldFocusOnMount className={captionsContainerClassName} data-ui-id=\"captions-banner\">\n          {(isCaptionsOn || isRealTimeTextOn) && formFactor === 'compact' && (\n            <Stack\n              horizontal\n              horizontalAlign=\"space-between\"\n              verticalAlign=\"center\"\n              className={bannerTitleContainerClassName}\n            >\n              <Text className={titleClassName}>{getTitle()}</Text>\n              <IconButton\n                data-ui-id=\"captions-banner-expand-icon\"\n                iconProps={{ iconName: expandBannerHeight ? 'MinimizeIcon' : 'ExpandIcon' }}\n                ariaLabel={expandBannerHeight ? strings.minimizeButtonAriaLabel : strings.expandButtonAriaLabel}\n                onClick={() => setExpandBannerHeight(!expandBannerHeight)}\n                styles={expandIconClassName(theme)}\n              />\n            </Stack>\n          )}\n          {(isCaptionsOn || isRealTimeTextOn) && (\n            <div\n              ref={captionsScrollDivRef}\n              className={\n                captionsOptions?.height === 'full'\n                  ? captionsBannerFullHeightClassName(theme)\n                  : captionsBannerClassName(formFactor, expandBannerHeight)\n              }\n              data-ui-id=\"captions-banner-inner\"\n              data-is-focusable={true}\n            >\n              {isRealTimeTextOn && (\n                <Stack className={rttDisclosureBannerClassName()}>\n                  <_RTTDisclosureBanner strings={realTimeTextDisclosureBannerStrings} />\n                </Stack>\n              )}\n              {captionsAndRealTimeText()}\n            </div>\n          )}\n          {isRealTimeTextOn && onSendRealTimeText && (\n            <TextField\n              styles={realTimeTextInputBoxStyles(theme)}\n              placeholder={strings.realTimeTextInputBoxDefaultText}\n              value={textFieldValue}\n              onKeyDown={handleKeyDown}\n              onChange={(_, newValue) => {\n                setTextFieldValue(newValue || '');\n                onSendRealTimeText(newValue || '', false);\n              }}\n              maxLength={2000}\n              errorMessage={textFieldValue.length >= 2000 ? strings.realTimeTextInputErrorMessage : undefined}\n            />\n          )}\n          {!isCaptionsOn && !isRealTimeTextOn && (\n            <Stack\n              verticalAlign=\"center\"\n              styles={\n                captionsOptions?.height === 'full'\n                  ? loadingBannerFullHeightStyles(theme)\n                  : loadingBannerStyles(formFactor)\n              }\n              data-is-focusable={true}\n            >\n              <Spinner label={strings?.captionsBannerSpinnerText} ariaLive=\"assertive\" labelPosition=\"right\" />\n            </Stack>\n          )}\n        </FocusZone>\n      )}\n    </>\n  );\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@azure/communication-react",
-  "version": "1.27.0-alpha-202505130018",
+  "version": "1.27.0-alpha-202505140018",
   "sideEffects": false,
   "description": "React library for building modern communication user experiences utilizing Azure Communication Services",
   "keywords": [