@azure/communication-react 1.3.2-alpha-202207240017.0 → 1.3.2-alpha-202207260015.0

package/dist/communication-react.d.ts

@@ -255,7 +255,7 @@ export declare type AzureCommunicationCallAdapterArgs = {
     displayName: string;
     credential: CommunicationTokenCredential;
     locator: CallAdapterLocator;
-    alternativeCallerId?: string;
+    alternateCallerId?: string;
 };
 
 /**
@@ -269,6 +269,7 @@ export declare type AzureCommunicationCallWithChatAdapterArgs = {
     displayName: string;
     credential: CommunicationTokenCredential;
     locator: CallAndChatLocator | TeamsMeetingLinkLocator;
+    alternateCallerId?: string;
 };
 
 /**
@@ -501,7 +502,7 @@ export declare type CallAdapterClientState = {
     /**
      * Azure communications Phone number to make PSTN calls with.
      */
-    alternativeCallerId?: string;
+    alternateCallerId?: string;
 };
 
 /**
@@ -852,9 +853,11 @@ export declare interface CallClientState {
      */
     latestErrors: CallErrors;
     /**
-     * Stores an ACS aquired phone number for making PSTN calls.
+     * A phone number in E.164 format that will be used to represent callers identity.
+     * For example, using the alternateCallerId to add a participant using PSTN, this number will
+     * be used as the caller id in the PSTN call.
      */
-    alternativeCallerId?: string;
+    alternateCallerId?: string;
 }
 
 /**
@@ -3379,7 +3382,7 @@ export declare interface ControlBarProps {
  *
  * @public
  */
-export declare const createAzureCommunicationCallAdapter: ({ userId, displayName, credential, locator, alternativeCallerId }: AzureCommunicationCallAdapterArgs) => Promise<CallAdapter>;
+export declare const createAzureCommunicationCallAdapter: ({ userId, displayName, credential, locator, alternateCallerId }: AzureCommunicationCallAdapterArgs) => Promise<CallAdapter>;
 
 /**
  * Create a {@link CallAdapter} using the provided {@link StatefulCallClient}.
@@ -3397,7 +3400,7 @@ export declare const createAzureCommunicationCallAdapterFromClient: (callClient:
  *
  * @public
  */
-export declare const createAzureCommunicationCallWithChatAdapter: ({ userId, displayName, credential, endpoint, locator }: AzureCommunicationCallWithChatAdapterArgs) => Promise<CallWithChatAdapter>;
+export declare const createAzureCommunicationCallWithChatAdapter: ({ userId, displayName, credential, endpoint, locator, alternateCallerId }: AzureCommunicationCallWithChatAdapterArgs) => Promise<CallWithChatAdapter>;
 
 /**
  * Create a {@link CallWithChatAdapter} using the provided {@link StatefulChatClient} and {@link StatefulCallClient}.
@@ -6455,7 +6458,7 @@ export declare type StatefulCallClientArgs = {
      *
      * This is not a cached value from the headless calling client.
      */
-    alternativeCallerId?: string;
+    alternateCallerId?: string;
 };
 
 /**

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

@@ -170,20 +170,21 @@ const fromFlatCommunicationIdentifier = (id) => {
         // The prefix is preserved for this variant of the identifier.
         return { communicationUserId: id };
     }
-    if (id.startsWith(PHONE_NUMBER_PREFIX)) {
-        return { phoneNumber: id.substr(PHONE_NUMBER_PREFIX.length) };
+    if (id.startsWith(PHONE_NUMBER_PREFIX) || id.startsWith('+')) {
+        const isPhoneNumber = id.startsWith(PHONE_NUMBER_PREFIX) ? id.replace(PHONE_NUMBER_PREFIX, '') : id;
+        return { phoneNumber: isPhoneNumber };
     }
     if (id.startsWith(TEAMS_USER_PREFIX)) {
-        return { microsoftTeamsUserId: id.substr(TEAMS_USER_PREFIX.length) };
+        return { microsoftTeamsUserId: id.replace(TEAMS_USER_PREFIX, '') };
     }
     if (id.startsWith(TEAMS_DOD_PREFIX)) {
-        return { microsoftTeamsUserId: id.substr(TEAMS_DOD_PREFIX.length), cloud: 'dod' };
+        return { microsoftTeamsUserId: id.replace(TEAMS_DOD_PREFIX, ''), cloud: 'dod' };
     }
     if (id.startsWith(TEAMS_GCCH_PREFIX)) {
-        return { microsoftTeamsUserId: id.substr(TEAMS_GCCH_PREFIX.length), cloud: 'gcch' };
+        return { microsoftTeamsUserId: id.replace(TEAMS_GCCH_PREFIX, ''), cloud: 'gcch' };
     }
     if (id.startsWith(TEAMS_VISITOR_PREFIX)) {
-        return { microsoftTeamsUserId: id.substr(TEAMS_VISITOR_PREFIX.length), isAnonymous: true };
+        return { microsoftTeamsUserId: id.replace(TEAMS_VISITOR_PREFIX, ''), isAnonymous: true };
     }
     return { id };
 };
@@ -191,7 +192,7 @@ const fromFlatCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.3.2-alpha-202207240017.0';
+var telemetryVersion = '1.3.2-alpha-202207260015.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -2711,7 +2712,9 @@ const defaultChatItemMessageContainer = (overlapAvatarAndMessage) => {
 const defaultMyChatMessageContainer = {
     maxWidth: '100%',
     minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,
-    marginLeft: '0rem'
+    marginLeft: '0rem',
+    // This makes message bubble show border in high contrast mode making each message distinguishable
+    border: '1px solid transparent'
 };
 /**
  * @private
@@ -2732,7 +2735,9 @@ const defaultChatMessageContainer = {
         // Deal with awkward padding seen in messages from Teams.
         // For more info see https://github.com/Azure/communication-ui-library/pull/1507
         marginBlock: '0.125rem'
-    }
+    },
+    // This makes message bubble show border in high contrast mode making each message distinguishable
+    border: '1px solid transparent'
 };
 /**
  * @private
@@ -6218,7 +6223,7 @@ const VideoGallery = (props) => {
 /**
  * @private
  */
-const controlBarStyles = {
+const controlBarStyles$1 = {
     horizontal: {
         flexFlow: 'row nowrap'
     },
@@ -6649,8 +6654,8 @@ const ControlBar = (props) => {
     const { styles, layout } = props;
     const theme = useTheme();
     const controlBarClassName = React.useMemo(() => {
-        const controlBarStyle = controlBarStyles[layout !== null && layout !== void 0 ? layout : 'horizontal'];
-        // if theme is dark and layout is floating then use palette.neutralQuaternaryAlt as background, otherwise use palette.white
+        const controlBarStyle = controlBarStyles$1[layout !== null && layout !== void 0 ? layout : 'horizontal'];
+        // if theme is dark and layout is floating then use palette.neutralQuaternaryAlt as background, otherwise use theme.palette.white
         const backgroundStyle = {
             background: isDarkThemed(theme) && (layout === null || layout === void 0 ? void 0 : layout.startsWith('floating')) ? theme.palette.neutralQuaternaryAlt : theme.palette.white
         };
@@ -9258,7 +9263,7 @@ const MAX_CALL_HISTORY_LENGTH = 10;
  */
 class CallContext$1 {
     constructor(userId, maxListeners = 50, 
-    /* @conditional-compile-remove(PSTN-calls) */ alternativeCallerId) {
+    /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId) {
         this._callIdHistory = new CallIdHistory();
         this._logger = logger.createClientLogger('communication-react:calling-context');
         this._state = {
@@ -9275,7 +9280,7 @@ class CallContext$1 {
             },
             callAgent: undefined,
             userId: userId,
-            /* @conditional-compile-remove(PSTN-calls) */ alternativeCallerId: alternativeCallerId,
+            /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId: alternateCallerId,
             latestErrors: {}
         };
         this._emitter = new EventEmitter__default['default']();
@@ -11306,7 +11311,7 @@ class ProxyCallClient {
 const createStatefulCallClient = (args, options) => {
     callingStatefulLogger.info(`Creating calling stateful client using library version: ${_getApplicationId()}`);
     return createStatefulCallClientWithDeps(new communicationCalling.CallClient(withTelemetryTag(options === null || options === void 0 ? void 0 : options.callClientOptions)), new CallContext$1(communicationCommon.getIdentifierKind(args.userId), options === null || options === void 0 ? void 0 : options.maxStateChangeListeners, 
-    /* @conditional-compile-remove(PSTN-calls) */ args.alternativeCallerId), new InternalCallContext());
+    /* @conditional-compile-remove(PSTN-calls) */ args.alternateCallerId), new InternalCallContext());
 };
 /**
  * Package-internal version of createStatefulCallClient that allows dependency injection.
@@ -13369,7 +13374,8 @@ const BaseProvider = (props) => {
     // which stop polluting global dom tree and increase compatibility with react-full-screen
     const CompositeElement = (React__default['default'].createElement(FluentThemeProvider, { fluentTheme: fluentTheme, rtl: rtl },
         React__default['default'].createElement("meta", { name: "viewport", content: "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" }),
-        React__default['default'].createElement(react.Customizer, { scopedSettings: { Layer: { hostId: globalLayerHostId } } }, props.children),
+        React__default['default'].createElement(react.Customizer, { scopedSettings: { Layer: { hostId: globalLayerHostId } } },
+            React__default['default'].createElement(WithBackgroundColor, null, props.children)),
         React__default['default'].createElement(react.LayerHost, { id: globalLayerHostId, className: react.mergeStyles(globalLayerHostStyle) })));
     const localizedElement = locale ? LocalizationProvider({ locale, children: CompositeElement }) : CompositeElement;
     return React__default['default'].createElement(BaseContext.Provider, { value: true }, localizedElement);
@@ -13382,6 +13388,23 @@ const BaseContext = React.createContext(false);
  * @private
  */
 const useBase = () => React.useContext(BaseContext);
+/**
+ * @private
+ * Provides a wrapper with a background color to ensure that composites always have a background color.
+ * This is necessary to ensure that composites are not transparent,
+ * and the background color of it's parent elements doesn't show through the composite.
+ */
+const WithBackgroundColor = (props) => {
+    const { children } = props;
+    const theme = react.useTheme();
+    const className = react.mergeStyles({
+        background: theme.semanticColors.bodyBackground,
+        height: '100%',
+        width: '100%',
+        position: 'relative'
+    });
+    return React__default['default'].createElement(react.Stack, { className: className }, children);
+};
 
 // Copyright (c) Microsoft Corporation.
 const ChatAdapterContext = React.createContext(undefined);
@@ -14586,11 +14609,14 @@ const isDisabled = (option) => {
 };
 
 // Copyright (c) Microsoft Corporation.
+// Enforce a background color on control bar to ensure it matches the composite background color.
+const controlBarStyles = react.memoizeFunction((background) => ({ root: { background: background } }));
 /**
  * @private
  */
 const CallControls = (props) => {
     const options = React.useMemo(() => (typeof props.options === 'boolean' ? {} : props.options), [props.options]);
+    const theme = react.useTheme();
     /* @conditional-compile-remove(control-bar-button-injection) */
     const customButtons = React.useMemo(() => generateCustomControlBarButtons(onFetchCustomButtonPropsTrampoline$1(options), options === null || options === void 0 ? void 0 : options.displayType), [options]);
     // when props.options is false then we want to hide the whole control bar.
@@ -14599,7 +14625,7 @@ const CallControls = (props) => {
     }
     return (React__default['default'].createElement(react.Stack, { horizontalAlign: "center" },
         React__default['default'].createElement(react.Stack.Item, null,
-            React__default['default'].createElement(ControlBar, { layout: "horizontal" },
+            React__default['default'].createElement(ControlBar, { layout: "horizontal", styles: controlBarStyles(theme.semanticColors.bodyBackground) },
                 isEnabled$2(options === null || options === void 0 ? void 0 : options.microphoneButton) && React__default['default'].createElement(Microphone, { displayType: options === null || options === void 0 ? void 0 : options.displayType }),
                 isEnabled$2(options === null || options === void 0 ? void 0 : options.cameraButton) && React__default['default'].createElement(Camera, { displayType: options === null || options === void 0 ? void 0 : options.displayType }),
                 isEnabled$2(options === null || options === void 0 ? void 0 : options.screenShareButton) && (React__default['default'].createElement(ScreenShare, { option: options === null || options === void 0 ? void 0 : options.screenShareButton, displayType: options === null || options === void 0 ? void 0 : options.displayType })),
@@ -15848,7 +15874,8 @@ class CallContext {
             call: undefined,
             page: 'configuration',
             latestErrors: clientState.latestErrors,
-            isTeamsCall
+            isTeamsCall,
+            /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId: clientState.alternateCallerId
         };
     }
     onStateChange(handler) {
@@ -16026,7 +16053,7 @@ class AzureCommunicationCallAdapter {
         /* @conditional-compile-remove(teams-adhoc-call) */
         /* @conditional-compile-remove(PSTN-calls) */
         if (isOutboundCall(this.locator)) {
-            const phoneNumber = this.getState().alternativeCallerId;
+            const phoneNumber = this.getState().alternateCallerId;
             return this.startCall(this.locator.participantIDs, {
                 alternateCallerId: phoneNumber ? { phoneNumber: phoneNumber } : undefined
             });
@@ -16190,7 +16217,7 @@ class AzureCommunicationCallAdapter {
             const backendId = fromFlatCommunicationIdentifier(participant);
             if (communicationCommon.isPhoneNumberIdentifier(backendId)) {
                 if ((options === null || options === void 0 ? void 0 : options.alternateCallerId) === undefined) {
-                    throw new Error('unable to start call, PSTN user present with no alternativeCallerID.');
+                    throw new Error('unable to start call, PSTN user present with no alternateCallerId.');
                 }
                 return backendId;
             }
@@ -16345,10 +16372,10 @@ class AzureCommunicationCallAdapter {
  * @public
  */
 const createAzureCommunicationCallAdapter = ({ userId, displayName, credential, locator, 
-/* @conditional-compile-remove(PSTN-calls) */ alternativeCallerId }) => __awaiter$5(void 0, void 0, void 0, function* () {
+/* @conditional-compile-remove(PSTN-calls) */ alternateCallerId }) => __awaiter$5(void 0, void 0, void 0, function* () {
     const callClient = createStatefulCallClient({
         userId,
-        /* @conditional-compile-remove(PSTN-calls) */ alternativeCallerId
+        /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId
     });
     const callAgent = yield callClient.createCallAgent(credential, {
         displayName
@@ -16390,7 +16417,7 @@ afterCreate,
  * This is useful for clean up tasks, e.g., leaving any ongoing calls.
  */
 beforeDispose) => {
-    const { credential, displayName, locator, userId } = args;
+    const { credential, displayName, locator, userId, /*@conditional-compile-remove(PSTN-calls) */ alternateCallerId } = args;
     // State update needed to rerender the parent component when a new adapter is created.
     const [adapter, setAdapter] = React.useState(undefined);
     // Ref needed for cleanup to access the old adapter created asynchronously.
@@ -16424,7 +16451,8 @@ beforeDispose) => {
                 credential,
                 displayName,
                 locator,
-                userId
+                userId,
+                /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId
             });
             if (afterCreateRef.current) {
                 newAdapter = yield afterCreateRef.current(newAdapter);
@@ -16434,7 +16462,16 @@ beforeDispose) => {
         }))();
     }, 
     // Explicitly list all arguments so that caller doesn't have to memoize the `args` object.
-    [adapterRef, afterCreateRef, beforeDisposeRef, credential, displayName, locator, userId]);
+    [
+        adapterRef,
+        afterCreateRef,
+        /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId,
+        beforeDisposeRef,
+        credential,
+        displayName,
+        locator,
+        userId
+    ]);
     // Dispose any existing adapter when the component unmounts.
     React.useEffect(() => {
         return () => {
@@ -16734,7 +16771,15 @@ const CallWithChatControlBar = (props) => {
         label: callWithChatStrings.moreDrawerButtonLabel,
         tooltipContent: callWithChatStrings.moreDrawerButtonTooltip
     }), [callWithChatStrings]);
-    const centerContainerStyles = React.useMemo(() => (!props.mobileView ? desktopControlBarStyles : undefined), [props.mobileView]);
+    const centerContainerStyles = React.useMemo(() => {
+        const styles = !props.mobileView ? desktopControlBarStyles : {};
+        return react.mergeStyleSets(styles, {
+            root: {
+                // Enforce a background color on control bar to ensure it matches the composite background color.
+                background: theme.semanticColors.bodyBackground
+            }
+        });
+    }, [props.mobileView, theme.semanticColors.bodyBackground]);
     const screenShareButtonStyles = React.useMemo(() => (!props.mobileView ? getDesktopScreenShareButtonStyles(theme) : undefined), [props.mobileView, theme]);
     const commonButtonStyles = React.useMemo(() => (!props.mobileView ? getDesktopCommonButtonStyles(theme) : undefined), [props.mobileView, theme]);
     const endCallButtonStyles = React.useMemo(() => (!props.mobileView ? getDesktopEndCallButtonStyles(theme) : undefined), [props.mobileView, theme]);
@@ -17146,7 +17191,7 @@ const inferCallWithChatControlOptions = (callWithChatControls) => {
 const MoreDrawer = (props) => {
     var _a, _b, _c, _d, _e;
     const drawerMenuItems = [];
-    const { speakers, onSelectSpeaker } = props;
+    const { speakers, onSelectSpeaker, onLightDismiss } = props;
     const onSpeakerItemClick = React.useCallback((_ev, itemKey) => {
         const selected = speakers === null || speakers === void 0 ? void 0 : speakers.find((speaker) => speaker.id === itemKey);
         if (selected) {
@@ -17154,7 +17199,8 @@ const MoreDrawer = (props) => {
             // But this is a known issue in our state.
             onSelectSpeaker(selected);
         }
-    }, [speakers, onSelectSpeaker]);
+        onLightDismiss();
+    }, [speakers, onSelectSpeaker, onLightDismiss]);
     const drawerSelectionOptions = inferCallWithChatControlOptions(props.callControls);
     if (props.speakers && props.speakers.length > 0) {
         drawerMenuItems.push({
@@ -17183,7 +17229,8 @@ const MoreDrawer = (props) => {
             // But this is a known issue in our state.
             onSelectMicrophone(selected);
         }
-    }, [microphones, onSelectMicrophone]);
+        onLightDismiss();
+    }, [microphones, onSelectMicrophone, onLightDismiss]);
     if (props.microphones && props.microphones.length > 0) {
         // Set props as Microphone if speakers can be enumerated else set as Audio Device
         const speakersAvailable = props.speakers && props.speakers.length > 0;
@@ -18504,13 +18551,15 @@ class AzureCommunicationCallWithChatAdapter {
  *
  * @public
  */
-const createAzureCommunicationCallWithChatAdapter = ({ userId, displayName, credential, endpoint, locator }) => __awaiter(void 0, void 0, void 0, function* () {
+const createAzureCommunicationCallWithChatAdapter = ({ userId, displayName, credential, endpoint, locator, 
+/* @conditional-compile-remove(PSTN-calls) */ alternateCallerId }) => __awaiter(void 0, void 0, void 0, function* () {
     const callAdapterLocator = isTeamsMeetingLinkLocator(locator) ? locator : locator.callLocator;
     const createCallAdapterPromise = createAzureCommunicationCallAdapter({
         userId,
         displayName,
         credential,
-        locator: callAdapterLocator
+        locator: callAdapterLocator,
+        /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId
     });
     const threadId = isTeamsMeetingLinkLocator(locator)
         ? getChatThreadFromTeamsLink(locator.meetingLink)
@@ -18559,7 +18608,8 @@ afterCreate,
  * This is useful for clean up tasks, e.g., leaving any ongoing calls.
  */
 beforeDispose) => {
-    const { credential, displayName, endpoint, locator, userId } = args;
+    const { credential, displayName, endpoint, locator, userId, 
+    /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId } = args;
     // State update needed to rerender the parent component when a new adapter is created.
     const [adapter, setAdapter] = React.useState(undefined);
     // Ref needed for cleanup to access the old adapter created asynchronously.
@@ -18594,7 +18644,8 @@ beforeDispose) => {
                 displayName,
                 endpoint,
                 locator,
-                userId
+                userId,
+                /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId
             });
             if (afterCreateRef.current) {
                 newAdapter = yield afterCreateRef.current(newAdapter);
@@ -18604,7 +18655,17 @@ beforeDispose) => {
         }))();
     }, 
     // Explicitly list all arguments so that caller doesn't have to memoize the `args` object.
-    [adapterRef, afterCreateRef, beforeDisposeRef, credential, displayName, endpoint, locator, userId]);
+    [
+        adapterRef,
+        afterCreateRef,
+        /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId,
+        beforeDisposeRef,
+        credential,
+        displayName,
+        endpoint,
+        locator,
+        userId
+    ]);
     // Dispose any existing adapter when the component unmounts.
     React.useEffect(() => {
         return () => {