@azure/communication-react 1.11.0-alpha-202312090012 → 1.11.0-alpha-202312111717

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

@@ -170,7 +170,7 @@ function getDefaultExportFromCjs (x) {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.11.0-alpha-202312090012';
+var telemetryVersion = '1.11.0-alpha-202312111717';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -6299,7 +6299,7 @@ const inputBoxWrapperStyle = react.mergeStyles({
  */
 const inputBoxStyle = react.mergeStyles({
     overflow: 'auto',
-    minHeight: '2.25rem',
+    minHeight: '2.25rem', // prevents the input text box from being sized to 0px when the CallWithChatComposite chat pane is closed.
     maxHeight: '8.25rem',
     outline: 'red 5px',
     fontWeight: react.FontWeights.regular,
@@ -6856,7 +6856,7 @@ const updateHTML = (props) => {
                         tags: tag.subTags,
                         startIndex,
                         oldPlainTextEndIndex,
-                        change: '',
+                        change: '', // the part of the tag should be just deleted without processedChange update and change will be added after this tag
                         mentionTrigger
                     });
                     result += stringBefore + updatedContent.updatedHTML;
@@ -6892,7 +6892,7 @@ const updateHTML = (props) => {
                         htmlText,
                         oldPlainText,
                         lastProcessedHTMLIndex,
-                        processedChange: '',
+                        processedChange: '', // the part of mention should be just deleted without processedChange update
                         change,
                         tag,
                         closeTagIdx: closingTagInfo.closeTagIdx,
@@ -6916,7 +6916,7 @@ const updateHTML = (props) => {
                         tags: tag.subTags,
                         startIndex,
                         oldPlainTextEndIndex,
-                        change: processedChange,
+                        change: processedChange, // processedChange should be equal '' and the part of the tag should be deleted as the change was handled before this tag
                         mentionTrigger
                     });
                     processedChange = '';
@@ -8230,7 +8230,7 @@ const _FileCard = (props) => {
     });
     const progressIndicatorStyles = {
         itemProgress: {
-            padding: `${_pxToRem(progressBarThicknessPx - 1)} 0`,
+            padding: `${_pxToRem(progressBarThicknessPx - 1)} 0`, // item progress height won't apply without an explicit padding
             // To make the progress indicator border curve along the bottom of file card.
             borderRadius: `0 0 ${theme.effects.roundedCorner4} ${theme.effects.roundedCorner4}`
         },
@@ -8637,7 +8637,7 @@ const downloadButtonStyle = (theme) => {
         margin: '0 0.5rem',
         height: '32px',
         borderWidth: '1px',
-        fontSize: '0.875rem',
+        fontSize: '0.875rem', // 14px
         fontWeight: 600,
         padding: '0.38rem 0.75rem',
         borderRadius: '4px',
@@ -9027,10 +9027,10 @@ const useChatMessageStyles = reactComponents.makeStyles({
             left: '0',
             display: 'block'
         }, '& img': {
-            maxWidth: '100% !important',
+            maxWidth: '100% !important', // Add !important to make sure it won't be overridden by style defined in element
             height: 'auto !important'
         }, '& video': {
-            maxWidth: '100% !important',
+            maxWidth: '100% !important', // Add !important to make sure it won't be overridden by style defined in element
             height: 'auto !important'
         }, '& p': Object.assign({}, reactComponents.shorthands.marginBlock('0.125rem')), '& blockquote': Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ backgroundColor: reactComponents.tokens.colorBrandBackgroundInverted, clear: 'left', minHeight: '2.25rem', width: 'fit-content', marginTop: '7px', marginRight: '0px', marginLeft: '0px', marginBottom: '7px', paddingTop: '7px', paddingRight: '15px', paddingLeft: '15px', paddingBottom: '7px' }, reactComponents.shorthands.border('solid')), reactComponents.shorthands.borderRadius('4px')), reactComponents.shorthands.borderWidth('1px')), reactComponents.shorthands.borderColor(reactComponents.tokens.colorNeutralStroke1Selected)), { borderLeftWidth: '4px' }), '& table': Object.assign(Object.assign({ backgroundColor: reactComponents.tokens.colorBrandBackgroundInverted }, reactComponents.shorthands.borderColor(reactComponents.tokens.colorNeutralStroke1Selected)), { borderCollapse: 'collapse', tableLayout: 'auto', width: '100%', '& tr': Object.assign(Object.assign({}, reactComponents.shorthands.border('1px', 'solid', `${reactComponents.tokens.colorNeutralStroke1Selected}`)), { '& td': Object.assign(Object.assign({}, reactComponents.shorthands.border('1px', 'solid', `${reactComponents.tokens.colorNeutralStroke1Selected}`)), { wordBreak: 'normal', paddingTop: '0px', paddingRight: '5px' }) }) }) }),
     bodyWithoutAvatar: {
@@ -9828,7 +9828,7 @@ const menuItemIncreasedSizeStyles = {
  */
 const menuIconStyleSet = {
     root: {
-        height: 'calc(100% - 8px)',
+        height: 'calc(100% - 8px)', // Adjust for the pixel margin Fluent applies
         width: '1.25rem'
     }
 };
@@ -11563,7 +11563,7 @@ const MemoChatMessageComponentWrapper = React.memo((obj) => {
  * @private
  */
 const container = () => react.mergeStyles({
-    position: 'relative',
+    position: 'relative', // ensures child element's `position: absolute` is relative to this container
     display: 'contents'
 });
 /**
@@ -11588,8 +11588,8 @@ const loadSpinnerStyles = {
     circle: {
         maxHeight: '5rem',
         height: '50%',
-        width: 'unset',
-        aspectRatio: '1 / 1',
+        width: 'unset', // remove default width applied by fluent for spinners
+        aspectRatio: '1 / 1', // make height match width to ensure a circle shape
         borderWidth: '0.25em'
     }
 };
@@ -11720,7 +11720,7 @@ const iconContainerStyle$1 = {
  */
 const iconStyles$3 = react.mergeStyles({
     display: 'flex',
-    lineHeight: 0,
+    lineHeight: 0, // ensure the icon center is on the center line and not slightly above it
     alignItems: 'center'
 });
 /**
@@ -12080,6 +12080,8 @@ const onRenderParticipantDefault = (participant, strings, myUserId, onRenderAvat
     };
     /* @conditional-compile-remove(hide-attendee-name) */
     displayName = formatDisplayName();
+    /* @conditional-compile-remove(raise-hand) */
+    const callingPalette = theme.callingPalette;
     const onRenderIcon = (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.isScreenSharing) ||
         (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.isMuted) ||
         (
@@ -12101,7 +12103,11 @@ const onRenderParticipantDefault = (participant, strings, myUserId, onRenderAvat
                 callingParticipant.isMuted && (React.createElement(react.Icon, { iconName: "ParticipantItemMicOff", className: iconStyles$2, ariaLabel: strings.mutedIconLabel }))));
         }
         : () => null;
-    return (React.createElement(ParticipantItem, { styles: styles, key: participant.userId, userId: participant.userId, displayName: displayName, me: myUserId ? participant.userId === myUserId : false, menuItems: menuItems, presence: presence, onRenderIcon: onRenderIcon, onRenderAvatar: onRenderAvatar, onClick: () => onParticipantClick === null || onParticipantClick === void 0 ? void 0 : onParticipantClick(participant), showParticipantOverflowTooltip: showParticipantOverflowTooltip, 
+    /* @conditional-compile-remove(raise-hand) */
+    const onRenderAvatarWithRaiseHand = (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.raisedHand) && onRenderAvatar
+        ? (userId, options, defaultOnRender) => onRenderAvatar(userId, Object.assign(Object.assign({}, options), { styles: { root: { border: callingPalette.raiseHandGold } } }), defaultOnRender)
+        : onRenderAvatar;
+    return (React.createElement(ParticipantItem, { styles: styles, key: participant.userId, userId: participant.userId, displayName: displayName, me: myUserId ? participant.userId === myUserId : false, menuItems: menuItems, presence: presence, onRenderIcon: onRenderIcon, onRenderAvatar: onRenderAvatarWithRaiseHand, onClick: () => onParticipantClick === null || onParticipantClick === void 0 ? void 0 : onParticipantClick(participant), showParticipantOverflowTooltip: showParticipantOverflowTooltip, 
         /* @conditional-compile-remove(one-to-n-calling) */
         /* @conditional-compile-remove(PSTN-calls) */
         participantState: callingParticipant.state, ariaLabelledBy: participantAriaLabelledBy }));
@@ -13354,8 +13360,8 @@ const localVideoCameraCycleButtonStyles = (theme, size) => {
             height: size === 'large' ? _pxToRem(40) : _pxToRem(32),
             right: '0rem',
             top: '0rem',
-            color: '#FFFFFF',
-            zIndex: 2,
+            color: '#FFFFFF', // only shows up on running video feed to we want to force specific colours.
+            zIndex: 2, // shows the button directly over the local video feed.
             background: 'rgba(0,0,0,0.4)',
             borderRadius: theme.effects.roundedCorner2
         },
@@ -14198,7 +14204,7 @@ const childrenContainerStyle = (pageControlBarHeight) => {
  */
 const rootStyle = {
     height: '100%',
-    width: 'inherit',
+    width: 'inherit', // this needs to inherit its parent's width otherwise will collapse if there are no children.
     gap: `${VERTICAL_GALLERY_GAP}rem`,
     position: 'relative'
 };
@@ -17127,7 +17133,7 @@ const screenshareButtonStyles = (theme) => ({
     rootChecked: {
         background: theme.palette.themePrimary,
         color: react.DefaultPalette.white,
-        ':focus::after': { outlineColor: `${react.DefaultPalette.white} !important` },
+        ':focus::after': { outlineColor: `${react.DefaultPalette.white} !important` }, // added !important to avoid override by FluentUI button styles
         '@media (forced-colors: active)': {
             border: '1px solid',
             borderColor: theme.palette.black
@@ -17136,7 +17142,7 @@ const screenshareButtonStyles = (theme) => ({
     rootCheckedHovered: {
         background: theme.palette.themePrimary,
         color: react.DefaultPalette.white,
-        ':focus::after': { outlineColor: `${react.DefaultPalette.white} !important` },
+        ':focus::after': { outlineColor: `${react.DefaultPalette.white} !important` }, // added !important to avoid override by FluentUI button styles
         '@media (forced-colors: active)': {
             border: '1px solid',
             borderColor: theme.palette.black
@@ -17974,7 +17980,7 @@ const dismissButtonStyle = (theme) => ({
  */
 const messageBarStyle = (theme, errorType) => ({
     innerText: {
-        paddingTop: errorType === react.MessageBarType.warning ? '0.15rem' : '0.1rem',
+        paddingTop: errorType === react.MessageBarType.warning ? '0.15rem' : '0.1rem', // to move the inner text of the message bar down to be centered
         lineHeight: 'none',
         alignSelf: 'center',
         whiteSpace: 'normal'
@@ -20947,7 +20953,7 @@ class EventSubscriber {
                 type: this.convertEventType(event.type),
                 sender: event.sender,
                 senderDisplayName: event.senderDisplayName,
-                sequenceId: '',
+                sequenceId: '', // Note: there is a bug in chatMessageReceived event that it is missing sequenceId
                 createdOn: new Date(event.createdOn),
                 editedOn: 'editedOn' in event ? event.editedOn : undefined,
                 metadata: event.metadata
@@ -21001,12 +21007,14 @@ class EventSubscriber {
         // This is a temporary fix that no participant message is received for onChatMessageReceived event, which should be handled by JS SDK.
         // Without the temporary fix, there are missing 'participant joined' and 'participant left' system messages in the chat thread.
         this.fetchLastParticipantMessage = (threadId, actionType) => __awaiter$o(this, void 0, void 0, function* () {
-            var e_1, _a;
+            var _a, e_1, _b, _c;
             try {
-                for (var _b = __asyncValues$1(this.chatClient
+                for (var _d = true, _e = __asyncValues$1(this.chatClient
                     .getChatThreadClient(threadId)
-                    .listMessages({ startTime: new Date(Date.now() - maxSyncTimeInMs) })), _c; _c = yield _b.next(), !_c.done;) {
-                    const message = _c.value;
+                    .listMessages({ startTime: new Date(Date.now() - maxSyncTimeInMs) })), _f; _f = yield _e.next(), _a = _f.done, !_a; _d = true) {
+                    _c = _f.value;
+                    _d = false;
+                    const message = _c;
                     if (message.type === actionType) {
                         this.chatContext.setChatMessage(threadId, Object.assign(Object.assign({}, message), { status: 'delivered' }));
                     }
@@ -21015,7 +21023,7 @@ class EventSubscriber {
             catch (e_1_1) { e_1 = { error: e_1_1 }; }
             finally {
                 try {
-                    if (_c && !_c.done && (_a = _b.return)) yield _a.call(_b);
+                    if (!_d && !_a && (_b = _e.return)) yield _b.call(_e);
                 }
                 finally { if (e_1) throw e_1.error; }
             }
@@ -22060,23 +22068,25 @@ class AzureCommunicationChatAdapter {
         return __awaiter$k(this, void 0, void 0, function* () {
             // If get properties fails we dont want to try to get the participants after.
             yield this.asyncTeeErrorToEventEmitter(() => __awaiter$k(this, void 0, void 0, function* () {
-                var e_1, _a;
+                var _a, e_1, _b, _c;
                 yield this.chatThreadClient.getProperties();
                 try {
                     // Fetch all participants who joined before the local user.
-                    for (var _b = __asyncValues(this.chatThreadClient.listParticipants().byPage({
+                    for (var _d = true, _e = __asyncValues(this.chatThreadClient.listParticipants().byPage({
                         // Fetch 100 participants per page by default.
                         maxPageSize: 100
                         // eslint-disable-next-line curly
-                    })), _c; _c = yield _b.next(), !_c.done;) {
-                        const _page = _c.value;
+                    })), _f; _f = yield _e.next(), _a = _f.done, !_a; _d = true) {
+                        _c = _f.value;
+                        _d = false;
+                        const _page = _c;
                         ;
                     }
                 }
                 catch (e_1_1) { e_1 = { error: e_1_1 }; }
                 finally {
                     try {
-                        if (_c && !_c.done && (_a = _b.return)) yield _a.call(_b);
+                        if (!_d && !_a && (_b = _e.return)) yield _b.call(_e);
                     }
                     finally { if (e_1) throw e_1.error; }
                 }
@@ -22711,7 +22721,24 @@ const AvatarPersona = (props) => {
             }
         }))();
     }, [data, dataProvider, userId]);
-    return (React.createElement(react.Persona, Object.assign({}, props, { text: (_a = data === null || data === void 0 ? void 0 : data.text) !== null && _a !== void 0 ? _a : text, imageUrl: (_b = data === null || data === void 0 ? void 0 : data.imageUrl) !== null && _b !== void 0 ? _b : imageUrl, imageInitials: (_c = data === null || data === void 0 ? void 0 : data.imageInitials) !== null && _c !== void 0 ? _c : imageInitials, initialsColor: (_d = data === null || data === void 0 ? void 0 : data.initialsColor) !== null && _d !== void 0 ? _d : initialsColor, initialsTextColor: (_f = (_e = data === null || data === void 0 ? void 0 : data.initialsTextColor) !== null && _e !== void 0 ? _e : initialsTextColor) !== null && _f !== void 0 ? _f : 'white', 
+    /* @conditional-compile-remove(raise-hand) */
+    let activePersona = '';
+    /* @conditional-compile-remove(raise-hand) */
+    if (props.allowActiveBorder) {
+        // Display a border for raised handed participants in participant list
+        activePersona = react.mergeStyles({
+            border: 'solid 2px',
+            borderColor: 'transparent',
+            borderRadius: '50%',
+            padding: '2px',
+            boxSizing: 'content-box',
+            margin: '-4px'
+        });
+        react.mergeStyles(activePersona, props.styles);
+    }
+    return (React.createElement(react.Persona, Object.assign({}, props, { 
+        /* @conditional-compile-remove(raise-hand) */
+        className: activePersona, text: (_a = data === null || data === void 0 ? void 0 : data.text) !== null && _a !== void 0 ? _a : text, imageUrl: (_b = data === null || data === void 0 ? void 0 : data.imageUrl) !== null && _b !== void 0 ? _b : imageUrl, imageInitials: (_c = data === null || data === void 0 ? void 0 : data.imageInitials) !== null && _c !== void 0 ? _c : imageInitials, initialsColor: (_d = data === null || data === void 0 ? void 0 : data.initialsColor) !== null && _d !== void 0 ? _d : initialsColor, initialsTextColor: (_f = (_e = data === null || data === void 0 ? void 0 : data.initialsTextColor) !== null && _e !== void 0 ? _e : initialsTextColor) !== null && _f !== void 0 ? _f : 'white', 
         // default disable tooltip unless specified
         showOverflowTooltip: showOverflowTooltip !== null && showOverflowTooltip !== void 0 ? showOverflowTooltip : false, 
         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
@@ -23023,7 +23050,9 @@ const ParticipantListWithHeading = (props) => {
         /* @conditional-compile-remove(total-participant-count) */ totalParticipantCount)),
         React.createElement(react.FocusZone, { className: participantListContainerStyle, shouldFocusOnMount: true },
             React.createElement(ParticipantList$k, Object.assign({}, participantListProps, { styles: props.isMobile ? participantListMobileStyle : participantListStyle, onRenderAvatar: (userId, options) => (React.createElement(React.Fragment, null,
-                    React.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 })),
+                    React.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, 
+                        /* @conditional-compile-remove(raise-hand) */
+                        allowActiveBorder: true })),
                     (options === null || options === void 0 ? void 0 : options.text) && (React.createElement(react.Text, { nowrap: true, styles: displayNameStyles$1 }, options === null || options === void 0 ? void 0 : options.text)))), onFetchParticipantMenuItems: onFetchParticipantMenuItems, showParticipantOverflowTooltip: !props.isMobile, participantAriaLabelledBy: subheadingUniqueId })))));
 };
 const paneTitleTrampoline = (paneTitle, totalParticipantCount) => {
@@ -28216,7 +28245,7 @@ const createAnnouncementString = (direction, participants, strings) => {
 const VideoGalleryStyles = {
     root: {
         height: '100%',
-        minHeight: '10rem',
+        minHeight: '10rem', // space affordance to ensure media gallery is never collapsed
         minWidth: '6rem'
     }
 };
@@ -28712,7 +28741,7 @@ const configurationContainerStyle = (desktop, backgroundImageUrl) => ({
         padding: desktop ? '2rem 1rem 2rem 1rem' : '1rem 1rem 2rem 1rem',
         minWidth: desktop
             ? '25rem' // sum of min-width from children + ChildrenGap * (nb of children - 1) + padding * 2 = (11 + 11) + (2 * 1) + 0.5 * 2
-            : '16rem',
+            : '16rem', // from LocalPreview: ControlBar width + 0.5 * 2 for spacing + padding * 2 = 14 + 0.5 * 2 + 0.5 * 2
         minHeight: desktop
             ? '22rem' // max height of SelectionContainer + padding * 2 = 21 + 0.5 * 2
             : '13rem',
@@ -28906,7 +28935,7 @@ const panelStyles = {
     content: {
         display: 'flex',
         flexBasis: '100%',
-        paddingLeft: '0rem',
+        paddingLeft: '0rem', // remove default padding
         paddingRight: '0rem' // remove default padding
     },
     commands: {
@@ -28927,7 +28956,7 @@ const panelFocusProps = {
  */
 const logoStyles = (shape) => ({
     root: {
-        overflow: 'initial',
+        overflow: 'initial', // prevent the image being clipped
         display: 'flex',
         justifyContent: 'center'
     },
@@ -29093,7 +29122,7 @@ const videoCameraIconStyle = react.mergeStyles({
  */
 const buttonStyle = react.mergeStyles({
     fontWeight: 600,
-    fontSize: '0.875rem',
+    fontSize: '0.875rem', // 14px
     height: '2.75rem',
     width: '100%'
 });
@@ -29186,7 +29215,7 @@ const localPreviewButtonStyle = {
                 border: '1px solid !important' // we need bang important to override fluents colours
             },
             ':focus::after': {
-                border: 'unset !important',
+                border: 'unset !important', // we need bang important to override fluents colours
                 outline: 'unset !important'
             }
         }
@@ -31116,6 +31145,13 @@ const findLatestAcceptedTransfer = (acceptedTransfers) => {
  * @private
  */
 class AzureCommunicationCallAdapter {
+    get call() {
+        return this._call;
+    }
+    set call(newCall) {
+        this.resetDiagnosticsForwarder(newCall);
+        this._call = newCall;
+    }
     constructor(callClient, locator, callAgent, deviceManager, options) {
         var _a;
         this.participantSubscribers = new Map();
@@ -31228,13 +31264,6 @@ class AzureCommunicationCallAdapter {
             this.callAgent.on('callsUpdated', onTeamsCallsUpdated);
         }
     }
-    get call() {
-        return this._call;
-    }
-    set call(newCall) {
-        this.resetDiagnosticsForwarder(newCall);
-        this._call = newCall;
-    }
     // TODO: update this to include the 'selectedCameraChanged' when calling adds it to the device manager
     subscribeDeviceManagerEvents() {
         this.deviceManager.on('selectedMicrophoneChanged', () => {
@@ -32647,11 +32676,11 @@ const notificationIconPaddingREM = 0.225;
 const notificationSizeREM = 1;
 const notificationIconContainerStyles = react.memoizeFunction((theme) => ({
     root: {
-        borderRadius: `${notificationSizeREM}rem`,
+        borderRadius: `${notificationSizeREM}rem`, // Create a css circle. This should match the height.
         height: `${notificationSizeREM}rem`,
-        minWidth: `${notificationSizeREM}rem`,
+        minWidth: `${notificationSizeREM}rem`, // use min-width over width as we want to extend the width of the notification icon when contents is more than one character (e.g. 9+)
         background: theme.palette.themePrimary,
-        border: `0.0625rem solid white`,
+        border: `0.0625rem solid white`, // border should always be white
         padding: `${notificationIconPaddingREM}rem`,
         // positioning to place the badge within the button appropriately.
         position: 'absolute',