@azure/communication-react 1.11.0-alpha-202312100013 → 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-202312100013';
+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'
 });
 /**
@@ -13360,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
         },
@@ -14204,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'
 };
@@ -17133,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
@@ -17142,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
@@ -17980,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'
@@ -20953,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
@@ -21007,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' }));
                     }
@@ -21021,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; }
             }
@@ -22066,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; }
                 }
@@ -23046,7 +23050,7 @@ 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 })))));
@@ -28241,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'
     }
 };
@@ -28737,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',
@@ -28931,7 +28935,7 @@ const panelStyles = {
     content: {
         display: 'flex',
         flexBasis: '100%',
-        paddingLeft: '0rem',
+        paddingLeft: '0rem', // remove default padding
         paddingRight: '0rem' // remove default padding
     },
     commands: {
@@ -28952,7 +28956,7 @@ const panelFocusProps = {
  */
 const logoStyles = (shape) => ({
     root: {
-        overflow: 'initial',
+        overflow: 'initial', // prevent the image being clipped
         display: 'flex',
         justifyContent: 'center'
     },
@@ -29118,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%'
 });
@@ -29211,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'
             }
         }
@@ -31141,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();
@@ -31253,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', () => {
@@ -32672,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',