@azure/communication-react 1.4.2-alpha-202211050017.0 → 1.4.2-alpha-202211090017.0

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

@@ -202,7 +202,7 @@ const _toCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.4.2-alpha-202211050017.0';
+var telemetryVersion = '1.4.2-alpha-202211090017.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -219,6 +219,16 @@ const sanitize = (version) => {
 };
 /**
  * Application ID to be included in telemetry data from the UI library.
+ * Template: acXYYY/<version>
+ * Where:
+ * - X describes a platform, [r: web, i: iOS, a: Android]
+ * - YYY describes what's running on this platform (optional, currently unused by this library):
+ *    Y[0] is high-level artifact,
+ *      [0: undefined, 1: AzureCommunicationLibrary, 2: ACS SampleApp]
+ *    Y[1] is specific implementation,
+ *      [0: undefined, 1: Call Composite, 2: Chat Composite, 3: CallWithChatComposite, 4: UI Components]
+ *    Y[2] is reserved for implementation details,
+ *      [0: undefined]
  *
  * @internal
  */
@@ -8500,7 +8510,6 @@ const messageBarStyle = (theme, errorType) => ({
     innerText: {
         paddingTop: errorType === react.MessageBarType.warning ? '0.15rem' : '0.1rem',
         lineHeight: 'none',
-        color: theme.palette.black,
         alignSelf: 'center',
         whiteSpace: 'normal'
     },
@@ -8516,16 +8525,6 @@ const messageBarStyle = (theme, errorType) => ({
         paddingTop: '0.8rem'
     }
 });
-/**
- * @private
- */
-const linkStyle = (theme) => ({
-    root: {
-        span: {
-            color: theme.palette.black
-        }
-    }
-});
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -8551,14 +8550,14 @@ const _TroubleshootingGuideErrorBar = (props) => {
         const devicePermissionErrorBar = (React__default['default'].createElement("div", null,
             strings[error.type],
             ' ',
-            onPermissionsTroubleshootingClick && (React__default['default'].createElement(react.Link, { styles: linkStyle(theme), onClick: () => {
+            onPermissionsTroubleshootingClick && (React__default['default'].createElement(react.Link, { onClick: () => {
                     onPermissionsTroubleshootingClick(permissionsState);
                 }, underline: true },
                 React__default['default'].createElement("span", null, troubleshootingGuideStrings.devicePermissionLinkText)))));
         const networkErrorBar = (React__default['default'].createElement("div", null,
             strings[error.type],
             ' ',
-            onNetworkingTroubleshootingClick && (React__default['default'].createElement(react.Link, { styles: linkStyle(theme), onClick: onNetworkingTroubleshootingClick, underline: true },
+            onNetworkingTroubleshootingClick && (React__default['default'].createElement(react.Link, { onClick: onNetworkingTroubleshootingClick, underline: true },
                 React__default['default'].createElement("span", null, troubleshootingGuideStrings.networkTroubleshootingLinkText)))));
         return (React__default['default'].createElement(react.MessageBar, Object.assign({}, props, { styles: messageBarStyle(theme, messageBarType(error.type)), key: error.type, messageBarType: messageBarType(error.type), messageBarIconProps: messageBarIconProps(error.type), actions: React__default['default'].createElement(react.MessageBarButton, { text: troubleshootingGuideStrings.dismissButtonText, styles: dismissButtonStyle(theme), onClick: () => {
                     setDismissedErrors(dismissError(dismissedErrors, error));
@@ -15062,7 +15061,7 @@ const ParticipantListWithHeading = (props) => {
     }), [theme.palette.neutralSecondary, theme.fonts.smallPlus.fontSize, props.isMobile]);
     return (React__default['default'].createElement(react.Stack, { className: participantListStack },
         React__default['default'].createElement(react.Stack.Item, { styles: subheadingStyleThemed }, title),
-        React__default['default'].createElement(react.FocusZone, { className: participantListContainerStyle },
+        React__default['default'].createElement(react.FocusZone, { className: participantListContainerStyle, shouldFocusOnMount: true },
             React__default['default'].createElement(ParticipantList, Object.assign({}, participantListProps, { styles: props.isMobile ? participantListMobileStyle : participantListStyle, onRenderAvatar: (userId, options) => (React__default['default'].createElement(React__default['default'].Fragment, null,
                     React__default['default'].createElement(AvatarPersona, Object.assign({ "data-ui-id": "chat-composite-participant-custom-avatar", userId: userId }, options, { hidePersonaDetails: !!(options === null || options === void 0 ? void 0 : options.text) }, { dataProvider: onFetchAvatarPersonaData })),
                     (options === null || options === void 0 ? void 0 : options.text) && (React__default['default'].createElement(react.Text, { nowrap: true, styles: displayNameStyles }, options === null || options === void 0 ? void 0 : options.text)))), onFetchParticipantMenuItems: onFetchParticipantMenuItems, showParticipantOverflowTooltip: !props.isMobile })))));
@@ -16131,9 +16130,9 @@ const controlBarStyles = react.memoizeFunction((background) => ({ root: { backgr
  */
 const CallControls = (props) => {
     const options = React.useMemo(() => (typeof props.options === 'boolean' ? {} : props.options), [props.options]);
-    /* @conditional-compile-remove(one-to-n-calling) */
+    /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
     const localeStrings = useLocale();
-    /* @conditional-compile-remove(one-to-n-calling) */
+    /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
     const peopleButtonStrings = React.useMemo(() => ({
         label: localeStrings.strings.call.peopleButtonLabel,
         tooltipOffContent: localeStrings.strings.call.peopleButtonTooltipOpen,
@@ -17226,7 +17225,7 @@ const CallPane = (props) => {
     const localeStrings = useLocale();
     // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
     const getStrings = () => {
-        /* @conditional-compile-remove(one-to-n-calling) */
+        /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
         return localeStrings.strings.call;
     };
     const strings = getStrings();
@@ -17316,23 +17315,23 @@ const CallArrangement = (props) => {
     const containerRef = React.useRef(null);
     const containerWidth = _useContainerWidth(containerRef);
     const containerHeight = _useContainerHeight(containerRef);
-    /* @conditional-compile-remove(one-to-n-calling) */
+    /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
     const adapter = useAdapter();
-    /* @conditional-compile-remove(one-to-n-calling) */
+    /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
     const { activePane, closePane, openPeoplePane, togglePeoplePane } = useSidePaneState();
-    /* @conditional-compile-remove(one-to-n-calling) */
+    /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
     const isMobileWithActivePane = props.mobileView && activePane;
-    /* @conditional-compile-remove(one-to-n-calling) */
+    /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
     const callCompositeContainerCSS = React.useMemo(() => {
         return { display: isMobileWithActivePane ? 'none' : 'flex' };
     }, [isMobileWithActivePane]);
     // To be removed once feature is out of beta, replace with callCompositeContainerCSS
     // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
     const callCompositeContainerFlex = () => {
-        /* @conditional-compile-remove(one-to-n-calling) */
+        /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
         return callCompositeContainerCSS;
     };
-    /* @conditional-compile-remove(one-to-n-calling) */
+    /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
     const callPaneContent = React.useCallback(() => {
         var _a;
         if (adapter && activePane === 'people') {
@@ -17373,16 +17372,18 @@ const CallArrangement = (props) => {
                     canUnmute && !!props.mutedNotificationProps && React__default['default'].createElement(MutedNotification, Object.assign({}, props.mutedNotificationProps))),
                 React__default['default'].createElement(react.Stack.Item, { grow: true, style: callCompositeContainerFlex() },
                     React__default['default'].createElement(react.Stack.Item, { styles: callGalleryStyles, grow: true }, props.onRenderGalleryContent && (React__default['default'].createElement(react.Stack, { verticalFill: true, styles: mediaGalleryContainerStyles }, props.onRenderGalleryContent())))),
+                /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
                 callPaneContent()),
             ((_b = props.callControlProps) === null || _b === void 0 ? void 0 : _b.options) !== false &&
-                /* @conditional-compile-remove(one-to-n-calling) */ !isMobileWithActivePane && (React__default['default'].createElement(react.Stack.Item, { className: callControlsContainerStyles },
+                /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
+                !isMobileWithActivePane && (React__default['default'].createElement(react.Stack.Item, { className: callControlsContainerStyles },
                 React__default['default'].createElement(CallControls, Object.assign({}, props.callControlProps, { containerWidth: containerWidth, containerHeight: containerHeight, isMobile: props.mobileView, 
                     /* @conditional-compile-remove(one-to-n-calling) */
                     peopleButtonChecked: activePane === 'people', 
                     /* @conditional-compile-remove(one-to-n-calling) */
                     onPeopleButtonClicked: togglePeoplePane })))))));
 };
-/* @conditional-compile-remove(one-to-n-calling) */
+/* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
 const showShowPeopleTabHeaderButton$1 = (callControls) => {
     if (callControls === undefined || callControls === true) {
         return true;
@@ -18766,12 +18767,12 @@ const MainScreen = (props) => {
             break;
         case 'lobby':
             pageElement = (React__default['default'].createElement(LobbyPage, { mobileView: props.mobileView, 
-                /* @conditional-compile-remove(one-to-n-calling) */
+                /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
                 modalLayerHostId: props.modalLayerHostId, options: props.options }));
             break;
         case 'call':
             pageElement = (React__default['default'].createElement(CallPage, { onRenderAvatar: onRenderAvatar, callInvitationURL: callInvitationUrl, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItems, mobileView: props.mobileView, 
-                /* @conditional-compile-remove(one-to-n-calling) */
+                /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
                 modalLayerHostId: props.modalLayerHostId, options: props.options }));
             break;
         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
@@ -18826,7 +18827,7 @@ const CallComposite = (props) => {
         /* @conditional-compile-remove(call-readiness) */ options === null || options === void 0 ? void 0 : options.callReadinessOptedIn
     ]);
     const mobileView = formFactor === 'mobile';
-    /* @conditional-compile-remove(one-to-n-calling) */
+    /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
     const modalLayerHostId = reactHooks.useId('modalLayerhost');
     const mainScreenContainerClassName = React.useMemo(() => {
         return mobileView ? mainScreenContainerStyleMobile : mainScreenContainerStyleDesktop;
@@ -18835,7 +18836,7 @@ const CallComposite = (props) => {
         React__default['default'].createElement(BaseProvider, Object.assign({}, props),
             React__default['default'].createElement(CallAdapterProvider, { adapter: adapter },
                 React__default['default'].createElement(MainScreen, { callInvitationUrl: callInvitationUrl, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItems, mobileView: mobileView, 
-                    /* @conditional-compile-remove(one-to-n-calling) */
+                    /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
                     modalLayerHostId: modalLayerHostId, options: options, 
                     /* @conditional-compile-remove(rooms) */
                     roleHint: roleHint }),
@@ -18847,7 +18848,7 @@ const CallComposite = (props) => {
                 // Warning: this is fragile and works because the call arrangement page is only rendered after the call has connected and thus this
                 // LayerHost will be guaranteed to have rendered (and subsequently mounted in the DOM). This ensures the DOM element will be available
                 // before the call to `document.getElementById(modalLayerHostId)` is made.
-                /* @conditional-compile-remove(one-to-n-calling) */
+                /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
                 mobileView && React__default['default'].createElement(react.LayerHost, { id: modalLayerHostId, className: react.mergeStyles(modalLayerHostStyle) })))));
 };
 const holdPageTrampoline = () => {
@@ -20593,7 +20594,7 @@ const CallWithChatPane = (props) => {
             React__default['default'].createElement(react.Stack, { horizontal: true, styles: scrollableContainer },
                 React__default['default'].createElement(react.Stack.Item, { verticalFill: true, styles: scrollableContainerContents },
                     React__default['default'].createElement(react.Stack, { styles: props.activePane === 'chat' ? availableSpaceStyles : hiddenStyles }, chatContent),
-                    React__default['default'].createElement(react.Stack, { styles: props.activePane === 'people' ? availableSpaceStyles : hiddenStyles }, peopleContent)))),
+                    props.activePane === 'people' && peopleContent))),
         props.mobileView && (React__default['default'].createElement(CallAdapterProvider, { adapter: props.callAdapter },
             React__default['default'].createElement(ModalLocalAndRemotePIP, { modalLayerHostId: props.modalLayerHostId, hidden: hidden, styles: pipStyles, minDragPosition: minMaxDragPosition.minDragPosition, maxDragPosition: minMaxDragPosition.maxDragPosition }))),
         drawerMenuItems.length > 0 && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStyles() },