@azure/communication-react 1.20.0-alpha-202410080015 → 1.20.0-alpha-202410100016

package/dist/dist-cjs/communication-react/{index-Bj4O6YVq.js → index-C548hWR1.js}

@@ -188,7 +188,7 @@ function getDefaultExportFromCjs (x) {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.20.0-alpha-202410080015';
+var telemetryVersion = '1.20.0-alpha-202410100016';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -2202,7 +2202,6 @@ function convertSdkCallToDeclarativeCall(call) {
             currentSpokenLanguage: '',
             isCaptionsFeatureActive: false,
             startCaptionsInProgress: false,
-            /* @conditional-compile-remove(acs-close-captions) */
             captionsKind: _isTeamsCall(call) ? 'TeamsCaptions' : 'Captions'
         },
         transfer: {
@@ -2257,7 +2256,6 @@ function convertFromSDKToDeclarativeVideoStreamRendererView(view) {
 function convertFromTeamsSDKToCaptionInfoState(caption) {
     return Object.assign({}, caption);
 }
-/* @conditional-compile-remove(acs-close-captions) */
 /**
  * @private
  */
@@ -3312,7 +3310,6 @@ let CallContext$2 = class CallContext {
             }
         });
     }
-    /* @conditional-compile-remove(acs-close-captions) */
     addCaption(callId, caption) {
         this.modifyState((draft) => {
             const call = draft.calls[this._callIdHistory.latestCallId(callId)];
@@ -3321,7 +3318,6 @@ let CallContext$2 = class CallContext {
             }
         });
     }
-    /* @conditional-compile-remove(acs-close-captions) */
     setCaptionsKind(callId, kind) {
         this.modifyState((draft) => {
             const call = draft.calls[this._callIdHistory.latestCallId(callId)];
@@ -3540,7 +3536,6 @@ class TeamsCaptionsSubscriber {
         this.subscribe();
     }
 }
-/* @conditional-compile-remove(acs-close-captions) */
 /**
  * @private
  */
@@ -3582,18 +3577,14 @@ class CaptionsSubscriber {
 class CaptionsFeatureSubscriber {
     constructor(callIdRef, context, captions) {
         this.subscribe = () => {
-            /* @conditional-compile-remove(acs-close-captions) */
             this._captions.on('CaptionsKindChanged', this.isCaptionsKindChanged);
         };
         this.unsubscribe = () => {
             var _a, _b;
-            /* @conditional-compile-remove(acs-close-captions) */
             this._captions.off('CaptionsKindChanged', this.isCaptionsKindChanged);
             (_a = this._TeamsCaptionsSubscriber) === null || _a === void 0 ? void 0 : _a.unsubscribe();
-            /* @conditional-compile-remove(acs-close-captions) */
             (_b = this._CaptionsSubscriber) === null || _b === void 0 ? void 0 : _b.unsubscribe();
         };
-        /* @conditional-compile-remove(acs-close-captions) */
         this.isCaptionsKindChanged = () => {
             var _a;
             this._context.setCaptionsKind(this._callIdRef.callId, this._captions.captions.kind);
@@ -3606,13 +3597,11 @@ class CaptionsFeatureSubscriber {
         this._callIdRef = callIdRef;
         this._context = context;
         this._captions = captions;
-        /* @conditional-compile-remove(acs-close-captions) */
         this._context.setCaptionsKind(this._callIdRef.callId, this._captions.captions.kind);
         if (this._captions.captions.kind === 'TeamsCaptions') {
             this._TeamsCaptionsSubscriber = new TeamsCaptionsSubscriber(this._callIdRef, this._context, this._captions.captions);
         }
         else {
-            /* @conditional-compile-remove(acs-close-captions) */
             this._CaptionsSubscriber = new CaptionsSubscriber(this._callIdRef, this._context, this._captions.captions);
         }
         this.subscribe();
@@ -5606,7 +5595,6 @@ class ProxyCallCommon {
                     if (args[0] === communicationCalling.Features.Captions) {
                         const captionsFeature = target.feature(communicationCalling.Features.Captions);
                         let proxyFeature;
-                        /* @conditional-compile-remove(acs-close-captions) */
                         if (captionsFeature.captions.kind === 'Captions') {
                             proxyFeature = new ProxyCaptions(this._context, target);
                             return {
@@ -5701,7 +5689,6 @@ class ProxyTeamsCaptions {
         }
     }
 }
-/* @conditional-compile-remove(acs-close-captions) */
 /**
  * @private
  */
@@ -7261,6 +7248,9 @@ const GridLayout = (props) => {
     const [currentHeight, setCurrentHeight] = React.useState(0);
     const containerRef = React.useRef(null);
     const observer = React.useRef(new ResizeObserver((entries) => {
+        if (!entries[0]) {
+            return;
+        }
         const { width, height } = entries[0].contentRect;
         setCurrentWidth(width);
         setCurrentHeight(height);
@@ -8267,7 +8257,7 @@ const updateHTML = (props) => {
     let changeNewEndIndex;
     for (let i = 0; i < tags.length; i++) {
         const tag = tags[i];
-        if (tag.plainTextBeginIndex === undefined) {
+        if ((tag === null || tag === void 0 ? void 0 : tag.plainTextBeginIndex) === undefined) {
             continue;
         }
         // all plain text indexes includes trigger length for the mention that shouldn't be included in
@@ -8690,7 +8680,7 @@ const getDisplayNameForMentionSuggestion = (suggestion, localeStrings) => {
  * @returns An array of tags and the plain text representation
  */
 const textToTagParser = (text, trigger) => {
-    var _a, _b;
+    var _a, _b, _c;
     const tags = []; // Tags passed back to the caller
     const tagParseStack = []; // Local stack to use while parsing
     let plainTextRepresentation = '';
@@ -8736,13 +8726,13 @@ const textToTagParser = (text, trigger) => {
                             trigger +
                             plainTextRepresentation.slice(currentOpenTag.plainTextBeginIndex);
                 }
+                const lastSubTag = (_a = currentOpenTag.subTags) === null || _a === void 0 ? void 0 : _a[currentOpenTag.subTags.length - 1];
                 if (!currentOpenTag.subTags) {
                     plainTextRepresentation += unEscapeHtmlCharacters(currentOpenTag.content);
                 }
-                else if (currentOpenTag.subTags.length > 0) {
+                else if (lastSubTag) {
                     // Add text after the last tag
-                    const lastSubTag = currentOpenTag.subTags[currentOpenTag.subTags.length - 1];
-                    const startOfRemainingText = ((_a = lastSubTag.closingTagIndex) !== null && _a !== void 0 ? _a : lastSubTag.openTagIndex) + lastSubTag.tagType.length + 3;
+                    const startOfRemainingText = ((_b = lastSubTag === null || lastSubTag === void 0 ? void 0 : lastSubTag.closingTagIndex) !== null && _b !== void 0 ? _b : lastSubTag.openTagIndex) + lastSubTag.tagType.length + 3;
                     const trailingText = currentOpenTag.content.substring(startOfRemainingText);
                     plainTextRepresentation += unEscapeHtmlCharacters(trailingText);
                 }
@@ -8753,7 +8743,7 @@ const textToTagParser = (text, trigger) => {
                 throw new Error('Unexpected close tag found. Got "' +
                     closeTagType +
                     '" but expected "' +
-                    ((_b = tagParseStack[tagParseStack.length - 1]) === null || _b === void 0 ? void 0 : _b.tagType) +
+                    ((_c = tagParseStack[tagParseStack.length - 1]) === null || _c === void 0 ? void 0 : _c.tagType) +
                     '"');
             }
         }
@@ -8763,11 +8753,10 @@ const textToTagParser = (text, trigger) => {
     return { tags, plainText: plainTextRepresentation };
 };
 const parseOpenTag = (tag, startIdx) => {
-    const tagType = tag
-        .substring(1, tag.length - 1)
-        .split(' ')[0]
-        .toLowerCase()
-        .replace('/', '');
+    var _a;
+    let tagType = tag.substring(1, tag.length - 1);
+    tagType = (_a = tagType.split(' ')[0]) !== null && _a !== void 0 ? _a : tagType;
+    tagType = tagType.toLowerCase().replace('/', '');
     return {
         tagType,
         openTagIndex: startIdx,
@@ -9572,7 +9561,7 @@ const TextFieldWithMention = (props) => {
             return undefined;
         }
         const currentMention = mentionSuggestions[activeSuggestionIndex !== null && activeSuggestionIndex !== void 0 ? activeSuggestionIndex : 0];
-        return (currentMention === null || currentMention === void 0 ? void 0 : currentMention.displayText.length) > 0
+        return currentMention && (currentMention === null || currentMention === void 0 ? void 0 : currentMention.displayText.length) > 0
             ? currentMention === null || currentMention === void 0 ? void 0 : currentMention.displayText
             : localeStrings.participantItem.displayNamePlaceholder;
     }, [activeSuggestionIndex, mentionSuggestions, localeStrings.participantItem.displayNamePlaceholder]);
@@ -10060,13 +10049,14 @@ const _AttachmentCard = (props) => {
 };
 const MappedMenuItems = (menuActions, attachment, handleOnClickError) => {
     const localeStrings = useLocaleAttachmentCardStringsTrampoline();
-    if (menuActions.length === 0) {
+    if (!menuActions[0]) {
         return React.createElement(React.Fragment, null);
     }
     return menuActions.length === 1 ? (React.createElement(react.TooltipHost, { content: menuActions[0].name },
         React.createElement(reactComponents.ToolbarButton, { "aria-label": menuActions[0].name, role: "button", icon: menuActions[0].icon, onClick: () => {
+                var _a;
                 try {
-                    menuActions[0].onClick(attachment);
+                    (_a = menuActions[0]) === null || _a === void 0 ? void 0 : _a.onClick(attachment);
                 }
                 catch (e) {
                     handleOnClickError === null || handleOnClickError === void 0 ? void 0 : handleOnClickError(e.message);
@@ -11530,7 +11520,7 @@ const getPreviousInlineImages = (content) => {
 const getRemovedInlineImages = (content, previousInlineImages) => {
     const document = new DOMParser().parseFromString(content !== null && content !== void 0 ? content : '', 'text/html');
     const currentContentIds = Array.from(document.querySelectorAll('img')).map((img) => img.id);
-    previousInlineImages = previousInlineImages === null || previousInlineImages === void 0 ? void 0 : previousInlineImages.filter((img) => !(currentContentIds === null || currentContentIds === void 0 ? void 0 : currentContentIds.includes(img.id)));
+    previousInlineImages = previousInlineImages === null || previousInlineImages === void 0 ? void 0 : previousInlineImages.filter((img) => !!img.id && !(currentContentIds === null || currentContentIds === void 0 ? void 0 : currentContentIds.includes(img.id)));
     const removedInlineImages = [...previousInlineImages];
     return removedInlineImages;
 };
@@ -11606,6 +11596,9 @@ const scrollToBottomRichTextEditor = () => {
  */
 const removeLocalBlobs = (currentLocalBlobMap, removedInlineImages) => {
     removedInlineImages.forEach((image) => {
+        if (!image.id) {
+            return;
+        }
         removeSingleLocalBlob(currentLocalBlobMap, image.id);
     });
 };
@@ -11860,6 +11853,9 @@ function createKey(row, column) {
  */
 function parseKey(key) {
     const [row, column] = key.split(',');
+    if (row === undefined || column === undefined) {
+        throw new Error('Invalid key format');
+    }
     return {
         row: parseInt(row),
         column: parseInt(column)
@@ -12681,7 +12677,12 @@ const RichTextEditor = React.forwardRef((props, ref) => {
         if (onInsertInlineImage) {
             copyPastePlugin.onInsertInlineImage = (imageAttributes) => {
                 const { id, src } = imageAttributes;
-                setInlineImageLocalBlobs(Object.assign(Object.assign({}, inlineImageLocalBlobs), { [id]: src }));
+                setInlineImageLocalBlobs((prev) => {
+                    if (!id || !src) {
+                        return prev;
+                    }
+                    return Object.assign(Object.assign({}, prev), { [id]: src });
+                });
                 onInsertInlineImage(imageAttributes);
             };
         }
@@ -12689,7 +12690,7 @@ const RichTextEditor = React.forwardRef((props, ref) => {
             copyPastePlugin.onInsertInlineImage = undefined;
         }
         undoRedoPlugin.onInsertInlineImage = onInsertInlineImage;
-    }, [copyPastePlugin, inlineImageLocalBlobs, onInsertInlineImage, undoRedoPlugin]);
+    }, [copyPastePlugin, onInsertInlineImage, undoRedoPlugin]);
     React.useEffect(() => {
         undoRedoPlugin.onUpdateContent = () => {
             onChangeContent(/* @conditional-compile-remove(rich-text-editor-image-upload) */ true);
@@ -12858,8 +12859,9 @@ const createEditorInitialModel = (initialContent, contentModel) => {
     }
 };
 const setSelectionAfterLastSegment = (model, block) => {
+    var _a;
     //selection marker should have the same format as the last segment if any
-    const format = block.segments.length > 0 ? block.segments[block.segments.length - 1].format : undefined;
+    const format = block.segments.length > 0 ? (_a = block.segments[block.segments.length - 1]) === null || _a === void 0 ? void 0 : _a.format : undefined;
     const marker = roosterjsContentModelDom.createSelectionMarker(format);
     block.segments.push(marker);
     roosterjsContentModelDom.setSelection(model, marker);
@@ -14102,6 +14104,9 @@ const delay = (delay) => {
 const _useContainerWidth = (containerRef) => {
     const [width, setWidth] = React.useState(undefined);
     const observer = React.useRef(new ResizeObserver((entries) => {
+        if (!entries[0]) {
+            return;
+        }
         const { width } = entries[0].contentRect;
         if (Number.isNaN(width)) {
             setWidth(0);
@@ -14130,6 +14135,9 @@ const _useContainerWidth = (containerRef) => {
 const _useContainerHeight = (containerRef) => {
     const [height, setHeight] = React.useState(undefined);
     const observer = React.useRef(new ResizeObserver((entries) => {
+        if (!entries[0]) {
+            return;
+        }
         const { height } = entries[0].contentRect;
         if (Number.isNaN(height)) {
             setHeight(0);
@@ -14715,7 +14723,7 @@ const processHtmlToReact = (props) => {
             if (domNode instanceof parse.Element && domNode.attribs) {
                 // Transform custom rendering of mentions
                 /* @conditional-compile-remove(mention) */
-                if (domNode.name === 'msft-mention') {
+                if (domNode.name === 'msft-mention' && domNode.attribs.id) {
                     const { id } = domNode.attribs;
                     const mention = {
                         id: id,
@@ -14728,7 +14736,9 @@ const processHtmlToReact = (props) => {
                 }
                 // Transform inline images
                 if (domNode.name && domNode.name === 'img' && domNode.attribs && domNode.attribs.id) {
-                    domNode.attribs['aria-label'] = domNode.attribs.name;
+                    if (domNode.attribs.name) {
+                        domNode.attribs['aria-label'] = domNode.attribs.name;
+                    }
                     const imgProps = parse.attributesToProps(domNode.attribs);
                     const inlineImageProps = { messageId: props.message.messageId, imageAttributes: imgProps };
                     return ((_c = props.inlineImageOptions) === null || _c === void 0 ? void 0 : _c.onRenderInlineImage)
@@ -14764,7 +14774,8 @@ const decodeEntities = (encodedString) => {
         // Find all matches of HTML entities defined in translate_re and
         // replace them with the corresponding character from the translate object.
         .replace(translate_re, function (match, entity) {
-        return translate[entity];
+        var _a;
+        return (_a = translate[entity]) !== null && _a !== void 0 ? _a : match;
     })
         // Find numeric entities (e.g., &#65;)
         // and replace them with the equivalent character using the String.fromCharCode method,
@@ -15329,7 +15340,7 @@ class _ErrorBoundary extends React.Component {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /* @conditional-compile-remove(rich-text-editor) */
-const ChatMessageComponentAsRichTextEditBox = React.lazy(() => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-BwIa2hTH.js'); }));
+const ChatMessageComponentAsRichTextEditBox = React.lazy(() => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-Dk_okMwX.js'); }));
 /**
  * @private
  * Use this function to load RoosterJS dependencies early in the lifecycle.
@@ -15337,7 +15348,7 @@ const ChatMessageComponentAsRichTextEditBox = React.lazy(() => Promise.resolve()
  *
  * @conditional-compile-remove(rich-text-editor)
  */
-const loadChatMessageComponentAsRichTextEditBox = () => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-BwIa2hTH.js'); });
+const loadChatMessageComponentAsRichTextEditBox = () => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-Dk_okMwX.js'); });
 /**
  * @private
  */
@@ -15876,7 +15887,7 @@ const isMessageSame = (first, second) => {
 const getLatestChatMessage = (messages) => {
     for (let i = messages.length - 1; i >= 0; i--) {
         const message = messages[i];
-        if (message.messageType === 'chat' && !!message.createdOn) {
+        if ((message === null || message === void 0 ? void 0 : message.messageType) === 'chat' && !!message.createdOn) {
             return message;
         }
     }
@@ -15961,7 +15972,7 @@ const memoizeAllMessages = memoizeFnAll((message, showMessageDate, showMessageSt
 const getLastChatMessageIdWithStatus = (messages, status) => {
     for (let i = messages.length - 1; i >= 0; i--) {
         const message = messages[i];
-        if (message.messageType === 'chat' && message.status === status && message.mine) {
+        if ((message === null || message === void 0 ? void 0 : message.messageType) === 'chat' && message.status === status && message.mine) {
             return message.messageId;
         }
     }
@@ -15970,7 +15981,7 @@ const getLastChatMessageIdWithStatus = (messages, status) => {
 const getLastChatMessageForCurrentUser = (messages) => {
     for (let i = messages.length - 1; i >= 0; i--) {
         const message = messages[i];
-        if (message.messageType === 'chat' && message.mine) {
+        if ((message === null || message === void 0 ? void 0 : message.messageType) === 'chat' && message.mine) {
             return message;
         }
     }
@@ -16644,7 +16655,7 @@ const ParticipantItem = (props) => {
     };
     const menuButton = React.useMemo(() => (React.createElement(react.Stack, { horizontal: true, horizontalAlign: "end", className: react.mergeStyles(menuButtonContainerStyle, { color: theme.palette.neutralPrimary }), title: strings.menuTitle, "data-ui-id": ids.participantItemMenuButton },
         React.createElement(react.Icon, { iconName: "ParticipantItemOptionsHovered", className: react.mergeStyles(iconStyles$3, !showMenuIcon ? displayNoneStyle : {}) }))), [theme.palette.neutralPrimary, strings.menuTitle, ids.participantItemMenuButton, showMenuIcon]);
-    return (React.createElement("div", { ref: containerRef, role: 'menuitem', "aria-disabled": (menuItems && menuItems.length > 0) || props.onClick ? false : true, "data-is-focusable": true, "data-ui-id": "participant-item", className: react.mergeStyles(participantItemContainerStyle({ clickable: !!menuItems && menuItems.length > 0 }, theme), styles === null || styles === void 0 ? void 0 : styles.root), onMouseEnter: () => setItemHovered(true), onMouseLeave: () => setItemHovered(false), onClick: () => {
+    return (React.createElement("div", { ref: containerRef, role: 'menuitem', "aria-expanded": !me ? !menuHidden : undefined, "aria-disabled": (menuItems && menuItems.length > 0) || props.onClick ? false : true, "data-is-focusable": true, "data-ui-id": "participant-item", className: react.mergeStyles(participantItemContainerStyle({ clickable: !!menuItems && menuItems.length > 0 }, theme), styles === null || styles === void 0 ? void 0 : styles.root), onMouseEnter: () => setItemHovered(true), onMouseLeave: () => setItemHovered(false), onClick: () => {
             if (!participantStateString) {
                 setItemHovered(true);
                 setMenuHidden(false);
@@ -17338,6 +17349,7 @@ const emojiStyles = (backgroundImage, frameCount) => {
         alignItems: 'center',
         backgroundSize: `2.75rem 133.875rem`,
         transition: 'opacity 2s',
+        minWidth: '2.75rem',
         backgroundColor: 'transparent',
         transform: 'scale(0.6)',
         ':hover': {
@@ -17353,24 +17365,6 @@ const emojiStyles = (backgroundImage, frameCount) => {
         }
     };
 };
-/**
- *
- * @private
- */
-const reactionEmojiMenuStyles = () => {
-    return {
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        flexDirection: 'row',
-        width: '13.75rem',
-        height: '2.625rem',
-        // Ensure that when one emoji is hovered, the other emojis are partially faded out
-        ':hover > :not(:hover)': {
-            opacity: '0.5'
-        }
-    };
-};
 /**
  *
  * @private
@@ -17381,7 +17375,7 @@ const reactionToolTipHostStyle = () => {
             display: 'flex',
             flexDirection: 'column',
             height: '100%',
-            width: '100%'
+            width: '2.75rem'
         }
     };
 };
@@ -17427,6 +17421,51 @@ const mobileViewEmojiStyles = (backgroundImage, animationPlayState) => {
         transform: `${'scale(0.8)' }`
     };
 };
+/**
+ * @private
+ */
+const reactionButtonStyles = (theme) => ({
+    rootChecked: {
+        background: theme.palette.themePrimary,
+        color: theme.palette.white
+    },
+    rootCheckedHovered: {
+        background: theme.palette.themePrimary,
+        color: theme.palette.white
+    },
+    labelChecked: { color: theme.palette.white }
+});
+/**
+ * @private
+ */
+const reactionItemButtonStyles = {
+    root: {
+        border: 'none',
+        height: '2.75rem',
+        width: '2.75rem'
+    }
+};
+/**
+ * @private
+ */
+const reactionButtonCalloutStyles = {
+    container: {},
+    root: {},
+    beak: {},
+    beakCurtain: {},
+    calloutMain: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexDirection: 'row',
+        width: '13.75rem',
+        height: '2.625rem',
+        // Ensure that when one emoji is hovered, the other emojis are partially faded out
+        ':hover > :not(:hover)': {
+            opacity: '0.5'
+        }
+    }
+};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -18166,6 +18205,9 @@ const VideoTile = (props) => {
     const callingPalette = theme.callingPalette;
     const isVideoRendered = !!renderElement;
     const observer = React.useRef(new ResizeObserver((entries) => {
+        if (!entries[0]) {
+            return;
+        }
         const { width, height } = entries[0].contentRect;
         const personaCalcSize = Math.min(width, height) / 3;
         // we only want to set the persona size if it has changed
@@ -18369,13 +18411,13 @@ const getOrganizedParticipants = (props) => {
         currentParticipants: previousGridParticipants,
         maxDominantSpeakers: maxGridParticipants
     }).slice(0, maxGridParticipants);
-    const dominantSpeakerToGrid = layout === 'speaker'
-        ? dominantSpeakers && dominantSpeakers[0]
-            ? newGridParticipants.filter((p) => p.userId === dominantSpeakers[0])
-            : [newGridParticipants[0]]
-        : [];
-    if (dominantSpeakerToGrid[0]) {
-        newGridParticipants = dominantSpeakerToGrid;
+    if (layout === 'speaker') {
+        if (dominantSpeakers === null || dominantSpeakers === void 0 ? void 0 : dominantSpeakers[0]) {
+            newGridParticipants = newGridParticipants.filter((p) => p.userId === dominantSpeakers[0]);
+        }
+        else {
+            newGridParticipants = newGridParticipants.slice(1);
+        }
     }
     const gridParticipantSet = new Set(newGridParticipants.map((p) => p.userId));
     const newOverflowGalleryParticipants = smartDominantSpeakerParticipants({
@@ -18400,21 +18442,18 @@ const getOrganizedParticipants = (props) => {
  */
 const useOrganizedParticipants = (props) => {
     var _a, _b;
-    // map remote participants by userId
-    const remoteParticipantMap = props.remoteParticipants.reduce((map, remoteParticipant) => {
-        map[remoteParticipant.userId] = remoteParticipant;
-        return map;
-    }, {});
     const spotlightedParticipantUserIds = (_a = props.spotlightedParticipantUserIds) !== null && _a !== void 0 ? _a : [];
     const pinnedParticipantUserIds = (_b = props.pinnedParticipantUserIds) !== null && _b !== void 0 ? _b : [];
-    // declare set of focused participant user ids as spotlighted participants user ids followed by
-    // pinned participants user ids which is deduplicated while maintaining order
-    const focusedParticipantUserIdSet = new Set(spotlightedParticipantUserIds.concat(pinnedParticipantUserIds).filter((p) => remoteParticipantMap[p]));
-    // get focused participants from map of remote participants in the order of the user ids
-    const focusedParticipants = [...focusedParticipantUserIdSet].map((p) => remoteParticipantMap[p]);
+    // Focussed participants are the participants that are either spotlighted or pinned. Ordered by spotlighted first and then pinned.
+    // A set is used to dedupe participants.
+    const focusedParticipantUserIdSet = new Set(spotlightedParticipantUserIds.concat(pinnedParticipantUserIds));
+    const focusedParticipants = [...focusedParticipantUserIdSet]
+        .map((userId) => props.remoteParticipants.find((p) => p.userId === userId))
+        .filter((p) => p !== undefined);
+    // Unfocused participants are the rest of the participants
+    const unfocusedParticipants = props.remoteParticipants.filter((p) => !focusedParticipantUserIdSet.has(p.userId));
     const currentGridParticipants = React.useRef([]);
     const currentOverflowGalleryParticipants = React.useRef([]);
-    const unfocusedParticipants = props.remoteParticipants.filter((p) => !focusedParticipantUserIdSet.has(p.userId));
     const organizedParticipantsArgs = Object.assign(Object.assign({}, props), { 
         // if there are focused participants then leave no room in the grid by setting maxGridParticipants to 0
         maxGridParticipants: focusedParticipants.length > 0 || props.isScreenShareActive ? 0 : props.maxGridParticipants, remoteParticipants: unfocusedParticipants, previousGridParticipants: currentGridParticipants.current, previousOverflowParticipants: currentOverflowGalleryParticipants.current });
@@ -18669,13 +18708,11 @@ function scaleStartPos(index) {
  * It is for the ease of testing and implementation.
  * @private
  */
-const ReactionStyleBuckets = [
-    {
-        sizeScale: 0.9,
-        heightMaxScale: 0.7 * 0.95,
-        opacityMax: 0.9
-    }
-];
+const ReactionStyleBucket = {
+    sizeScale: 0.9,
+    heightMaxScale: 0.7 * 0.95,
+    opacityMax: 0.9
+};
 /**
  * Return a style bucket based on the number of active sprites.
  * For example, the first three reactions should appear at maximum
@@ -18685,8 +18722,7 @@ const ReactionStyleBuckets = [
 function getReactionStyleBucket() {
     // Having dynamic emoji size on rendering animation impacts performance of the animation itself.
     // So we are choosing to use a fixed size for all cases.
-    const index = 0;
-    return ReactionStyleBuckets[index];
+    return ReactionStyleBucket;
 }
 /**
  * @private
@@ -18806,13 +18842,13 @@ const RemoteContentShareReactionOverlay = React.memo((props) => {
         return visibleReactionPosition.current.findIndex((item) => item === false);
     };
     const updateVisibleReactions = React.useCallback((reaction, userId) => {
-        var _a;
+        var _a, _b;
         const combinedKey = getCombinedKey(userId, reaction.reactionType, reaction.receivedOn);
         const alreadyHandled = ((_a = latestReceivedReaction.current[userId]) === null || _a === void 0 ? void 0 : _a.id) === combinedKey;
         if (alreadyHandled) {
             return;
         }
-        const activeCount = activeTypeCount.current[reaction.reactionType];
+        const activeCount = (_b = activeTypeCount.current[reaction.reactionType]) !== null && _b !== void 0 ? _b : 0;
         if (activeCount >= MAX_NUMBER_OF_EMOJIS / NUMBER_OF_EMOJI_TYPES) {
             latestReceivedReaction.current[userId] = {
                 id: combinedKey,
@@ -18843,8 +18879,9 @@ const RemoteContentShareReactionOverlay = React.memo((props) => {
         visibleReactionPosition.current[index] = false;
         activeTypeCount.current[reactionType] -= 1;
         Object.entries(latestReceivedReaction.current).forEach(([userId, reaction]) => {
-            if (reaction.id === id) {
-                latestReceivedReaction.current[userId].status = 'completedAnimating';
+            const userLastReaction = latestReceivedReaction.current[userId];
+            if (reaction.id === id && userLastReaction) {
+                userLastReaction.status = 'completedAnimating';
             }
         });
     };
@@ -19262,6 +19299,9 @@ const LocalVideoCameraCycleButton = (props) => {
             if (cameras && cameras.length > 1 && selectedCamera !== undefined) {
                 const index = cameras.findIndex((camera) => selectedCamera.id === camera.id);
                 const newCamera = cameras[(index + 1) % cameras.length];
+                if (!newCamera) {
+                    throw new Error('Camera not found');
+                }
                 onChangeCameraClick(newCamera);
             }
         } }));
@@ -19506,12 +19546,11 @@ const HorizontalGallery = (props) => {
     const firstIndexOfCurrentPage = page * childrenPerPage;
     const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;
     const childrenOnCurrentPage = React.useMemo(() => {
-        if (indexesArray && indexesArray[clippedPage] !== undefined) {
-            return indexesArray[clippedPage].map((index) => {
-                return React.Children.toArray(children)[index];
-            });
+        const indexes = indexesArray === null || indexesArray === void 0 ? void 0 : indexesArray[clippedPage];
+        if (!indexes) {
+            return [];
         }
-        return [];
+        return indexes.map((index) => React.Children.toArray(children)[index]);
     }, [indexesArray, clippedPage, children]);
     const showButtons = numberOfChildren > childrenPerPage;
     const disablePreviousButton = page === 0;
@@ -19988,8 +20027,9 @@ const VerticalGallery = (props) => {
     const firstIndexOfCurrentPage = (page - 1) * childrenPerPage;
     const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;
     const childrenOnCurrentPage = React.useMemo(() => {
+        var _a;
         if (indexesArray[0] !== undefined) {
-            return indexesArray[clippedPage - 1].map((index) => {
+            return (_a = indexesArray[clippedPage - 1]) === null || _a === void 0 ? void 0 : _a.map((index) => {
                 return React.Children.toArray(children)[index];
             });
         }
@@ -20772,11 +20812,12 @@ class DraggableZone extends React__namespace.Component {
      * @param touchList The TouchList to look for the stored identifier from dragStart
      */
     _findTouchInTouchList(touchList) {
+        var _a;
         if (this._touchId === undefined) {
             return;
         }
         for (let i = 0; i < touchList.length; i++) {
-            if (touchList[i].identifier === this._touchId) {
+            if (((_a = touchList[i]) === null || _a === void 0 ? void 0 : _a.identifier) === this._touchId) {
                 return touchList[i];
             }
         }
@@ -22864,41 +22905,34 @@ const ReactionButton = (props) => {
     ]);
     const calloutStyle = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };
     const calloutProps = {
-        gapSpace: 4,
         styles: calloutStyle,
         backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''
     };
-    const classname = react.mergeStyles(reactionEmojiMenuStyles());
-    const renderEmoji = (item, dismissMenu) => (React.createElement("div", { "data-ui-id": "reaction-sub-menu", className: classname }, emojis.map((emoji, index) => {
-        const resourceUrl = emojiResource.get(emoji);
-        const frameCount = props.reactionResources !== undefined ? getEmojiFrameCount(emoji, props.reactionResources) : 0;
-        const classname = react.mergeStyles(emojiStyles(resourceUrl ? resourceUrl : '', frameCount));
-        return (React.createElement(react.TooltipHost, { key: index, "data-ui-id": index, hidden: props.disableTooltip, content: emojiButtonTooltip.get(emoji), styles: reactionToolTipHostStyle(), calloutProps: Object.assign({}, calloutProps) },
-            React.createElement("div", { role: "menuitem", key: index, onClick: () => {
-                    props.onReactionClick(emoji);
-                    dismissMenu();
-                }, className: classname, "aria-label": emojiButtonTooltip.get(emoji) })));
-    })));
-    const emojiList = [
-        { key: 'reactions', itemType: react.ContextualMenuItemType.Normal, onRender: renderEmoji }
-    ];
-    return (React.createElement(ControlBarButton, Object.assign({}, props, { className: react.mergeStyles(styles, props.styles), menuProps: {
-            shouldFocusOnMount: true,
-            items: emojiList,
-            calloutProps: { preventDismissOnEvent: _preventDismissOnEvent }
-        }, onRenderIcon: (_f = props.onRenderIcon) !== null && _f !== void 0 ? _f : onRenderIcon, strings: strings, labelKey: (_g = props.labelKey) !== null && _g !== void 0 ? _g : 'reactionButtonLabel', onRenderMenuIcon: () => React.createElement("div", null), disabled: props.disabled, ariaLabel: strings.ariaLabel })));
+    const reactionButtonCalloutRef = React.useRef(null);
+    const reactionButtonRef = React.useRef(null);
+    const [calloutIsVisible, setCalloutIsVisible] = React.useState(false);
+    return (React.createElement(react.Stack, null,
+        calloutIsVisible && (React.createElement(react.Callout, { "data-ui-id": "reaction-sub-menu", isBeakVisible: false, styles: reactionButtonCalloutStyles, target: reactionButtonCalloutRef.current, onDismiss: () => {
+                var _a;
+                (_a = reactionButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                setCalloutIsVisible(false);
+            } },
+            React.createElement(react.FocusZone, { shouldFocusOnMount: true, style: { height: '100%' } },
+                React.createElement(react.Stack, { horizontal: true, style: { height: 'inherit' } }, emojis.map((emoji, index) => {
+                    const resourceUrl = emojiResource.get(emoji);
+                    const frameCount = props.reactionResources !== undefined ? getEmojiFrameCount(emoji, props.reactionResources) : 0;
+                    const classname = react.mergeStyles(emojiStyles(resourceUrl ? resourceUrl : '', frameCount));
+                    return (React.createElement(react.TooltipHost, { key: index, "data-ui-id": index, hidden: props.disableTooltip, content: emojiButtonTooltip.get(emoji), styles: reactionToolTipHostStyle(), calloutProps: Object.assign({}, calloutProps) },
+                        React.createElement(react.DefaultButton, { role: "menuitem", key: index, onClick: () => {
+                                var _a;
+                                props.onReactionClick(emoji);
+                                (_a = reactionButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                                setCalloutIsVisible(false);
+                            }, className: classname, styles: reactionItemButtonStyles, "aria-label": emojiButtonTooltip.get(emoji) })));
+                }))))),
+        React.createElement("div", { ref: reactionButtonCalloutRef },
+            React.createElement(ControlBarButton, Object.assign({}, props, { componentRef: reactionButtonRef, className: react.mergeStyles(styles, props.styles), onClick: () => setCalloutIsVisible(!calloutIsVisible), onRenderIcon: (_f = props.onRenderIcon) !== null && _f !== void 0 ? _f : onRenderIcon, strings: strings, split: true, labelKey: (_g = props.labelKey) !== null && _g !== void 0 ? _g : 'reactionButtonLabel', onRenderMenuIcon: () => React.createElement("div", null), disabled: props.disabled, ariaLabel: strings.ariaLabel })))));
 };
-const reactionButtonStyles = (theme) => ({
-    rootChecked: {
-        background: theme.palette.themePrimary,
-        color: react.DefaultPalette.white
-    },
-    rootCheckedHovered: {
-        background: theme.palette.themePrimary,
-        color: react.DefaultPalette.white
-    },
-    labelChecked: { color: react.DefaultPalette.white }
-});
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -23321,8 +23355,9 @@ const DialpadContainer = (props) => {
     }, [textFieldValue]);
     const onClickDialpad = (input, index) => {
         setText(plainTextValue + input);
-        if (onSendDtmfTone) {
-            onSendDtmfTone(DtmfTones[index]);
+        const tone = DtmfTones[index];
+        if (onSendDtmfTone && tone) {
+            onSendDtmfTone(tone);
         }
         if (onClickDialpadButton) {
             onClickDialpadButton(input, index);
@@ -23335,8 +23370,9 @@ const DialpadContainer = (props) => {
         else {
             setText(plainTextValue + input);
         }
-        if (onSendDtmfTone) {
-            onSendDtmfTone(DtmfTones[index]);
+        const tone = DtmfTones[index];
+        if (onSendDtmfTone && tone) {
+            onSendDtmfTone(tone);
         }
         if (onClickDialpadButton) {
             onClickDialpadButton(input, index);
@@ -24056,7 +24092,7 @@ const _VideoEffectsItem = (props) => {
  * @internal
  */
 const _VideoBackgroundEffectsPicker = (props) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     const [componentControlledSelectedEffectKey, setComponentControlledSelectedEffectKey] = React.useState(props.defaultSelectedEffectKey);
     // Warn the developer if they use the component in an incorrect controlled way.
     reactHooks.useWarnings({
@@ -24078,9 +24114,9 @@ const _VideoBackgroundEffectsPicker = (props) => {
     const itemsPerRow = (_b = props.itemsPerRow) !== null && _b !== void 0 ? _b : 3;
     const optionsByRow = itemsPerRow === 'wrap' ? [convertedOptions] : chunk(convertedOptions, itemsPerRow);
     // If the final row is not full, fill it with hidden items to ensure layout.
-    const fillCount = itemsPerRow === 'wrap' ? 0 : itemsPerRow - optionsByRow[optionsByRow.length - 1].length;
+    const fillCount = itemsPerRow === 'wrap' ? 0 : itemsPerRow - ((_d = (_c = optionsByRow[optionsByRow.length - 1]) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0);
     return (React.createElement(react.Stack, { tokens: { childrenGap: '0.5rem' } },
-        React.createElement(react.Label, { className: react.mergeStyles((_c = props.styles) === null || _c === void 0 ? void 0 : _c.label) }, props.label),
+        React.createElement(react.Label, { className: react.mergeStyles((_e = props.styles) === null || _e === void 0 ? void 0 : _e.label) }, props.label),
         optionsByRow.map((options, rowIndex) => {
             var _a;
             return (React.createElement(react.Stack, { className: react.mergeStyles((_a = props.styles) === null || _a === void 0 ? void 0 : _a.rowRoot), wrap: props.itemsPerRow === 'wrap', horizontal: true, key: rowIndex, tokens: { childrenGap: '0.5rem' }, "data-ui-id": "video-effects-picker-row" },
@@ -24650,6 +24686,7 @@ const infoConnectionLinkStyle$1 = (theme) => {
  * a component for setting spoken languages
  */
 const MeetingConferencePhoneInfoModal = (props) => {
+    var _a;
     const { conferencePhoneInfoList, showModal, onDismissMeetingPhoneInfoSettings } = props;
     const theme = react.useTheme();
     const strings = useLocale$1().strings.meetingConferencePhoneInfo;
@@ -24696,7 +24733,7 @@ const MeetingConferencePhoneInfoModal = (props) => {
                                     React.createElement(react.Icon, { iconName: "JoinByPhoneConferenceIdIcon", className: phoneInfoIconStyle$1(theme) }))),
                             React.createElement(react.Stack.Item, null,
                                 React.createElement(react.Text, { className: stepTextStyle }, strings === null || strings === void 0 ? void 0 : strings.meetingConferencePhoneInfoModalMeetingId)))),
-                    React.createElement(react.Text, { className: phoneInfoTextStyle$1 }, formatMeetingId(conferencePhoneInfoList[0].conferenceId))),
+                    React.createElement(react.Text, { className: phoneInfoTextStyle$1 }, formatMeetingId((_a = conferencePhoneInfoList[0]) === null || _a === void 0 ? void 0 : _a.conferenceId))),
                 React.createElement(react.Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center" },
                     React.createElement(react.Stack, { horizontal: true },
                         React.createElement(react.Stack.Item, { className: phoneInfoIcon$1(theme), style: { marginLeft: _pxToRem(2) } },
@@ -29808,7 +29845,7 @@ const AttachmentDownloadErrorBar = (props) => {
 /**
  * Wrapper for RichTextSendBox component to allow us to use usePropsFor with richTextSendBox with lazy loading
  */
-const RichTextSendBoxWrapper = React.lazy(() => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-CMAkkxJl.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper })));
+const RichTextSendBoxWrapper = React.lazy(() => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-C36s6eLH.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper })));
 /**
  * @private
  * Use this function to load RoosterJS dependencies early in the lifecycle.
@@ -29816,7 +29853,7 @@ const RichTextSendBoxWrapper = React.lazy(() => Promise.resolve().then(function
  *
 /* @conditional-compile-remove(rich-text-editor-composite-support)
  */
-const loadRichTextSendBox = () => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-CMAkkxJl.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper }));
+const loadRichTextSendBox = () => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-C36s6eLH.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper }));
 /**
  * @private
  */
@@ -31493,7 +31530,6 @@ const getEnvironmentInfo = (state) => state.environmentInfo;
  * @private
  */
 const getSelectedVideoEffect = (state) => state.selectedVideoBackgroundEffect;
-/* @conditional-compile-remove(acs-close-captions) */
 /** @private */
 const getCaptionsKind = (state) => {
     var _a;
@@ -33858,8 +33894,7 @@ const CommonCallControlBar = (props) => {
     const microphoneButtonIsEnabled = isEnabled$1(options === null || options === void 0 ? void 0 : options.microphoneButton);
     const cameraButtonIsEnabled = isEnabled$1(options === null || options === void 0 ? void 0 : options.cameraButton);
     const showExitSpotlightButton = (options === null || options === void 0 ? void 0 : options.exitSpotlightButton) !== false;
-    const showCaptionsButton = props.isCaptionsSupported &&
-        /* @conditional-compile-remove(acs-close-captions) */ isEnabled$1(options.captionsButton);
+    const showCaptionsButton = props.isCaptionsSupported && isEnabled$1(options.captionsButton);
     const showTeamsMeetingPhoneCallButton = isEnabled$1(options === null || options === void 0 ? void 0 : options.teamsMeetingPhoneCallButton);
     const showDesktopMoreButton = isEnabled$1(options === null || options === void 0 ? void 0 : options.moreButton) &&
         (isEnabled$1(options === null || options === void 0 ? void 0 : options.holdButton) || showCaptionsButton || props.onUserSetGalleryLayout);
@@ -34202,9 +34237,7 @@ const MoreDrawer = (props) => {
         onLightDismiss();
     }, [speakers, onSelectSpeaker, onLightDismiss]);
     const drawerSelectionOptions = inferCallWithChatControlOptions(props.callControls);
-    const showCaptionsButton = props.isCaptionsSupported &&
-        /* @conditional-compile-remove(acs-close-captions) */ drawerSelectionOptions !== false &&
-        /* @conditional-compile-remove(acs-close-captions) */ isEnabled(drawerSelectionOptions.captionsButton);
+    const showCaptionsButton = props.isCaptionsSupported && drawerSelectionOptions !== false && isEnabled(drawerSelectionOptions.captionsButton);
     if (props.reactionResources !== undefined) {
         drawerMenuItems.push({
             itemKey: 'reactions',
@@ -36642,7 +36675,7 @@ const MAX_PINNED_REMOTE_VIDEO_TILES = 4;
  * @private
  */
 const CallArrangement = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const containerClassName = React.useMemo(() => {
         return props.mobileView ? containerStyleMobile : containerStyleDesktop;
     }, [props.mobileView]);
@@ -36656,6 +36689,7 @@ const CallArrangement = (props) => {
     const isInLobby = _isInLobbyOrConnecting(useSelector$1(callStatusSelector).callStatus);
     const { updateSidePaneRenderer } = props;
     const isInLocalHold = useSelector$1(getPage) === 'hold';
+    const capabilities = useSelector$1(getCapabilites);
     const adapter = useAdapter();
     const [participantActioned, setParticipantActioned] = React.useState();
     const remoteParticipants = useSelector$1(getRemoteParticipants);
@@ -36743,22 +36777,22 @@ const CallArrangement = (props) => {
     }, [onPinParticipant, onUnpinParticipant, pinnedParticipants]);
     const { onStartLocalSpotlightWithPrompt, onStopLocalSpotlightWithPrompt } = useLocalSpotlightCallbacksWithPrompt(onStartLocalSpotlight, onStopLocalSpotlight, setIsPromptOpen, setPromptProps);
     const { onStartRemoteSpotlightWithPrompt, onStopRemoteSpotlightWithPrompt } = useRemoteSpotlightCallbacksWithPrompt(onStartRemoteSpotlight, onStopRemoteSpotlight, setIsPromptOpen, setPromptProps);
-    const canRemoveSpotlight = (_b = useSelector$1(getCapabilites)) === null || _b === void 0 ? void 0 : _b.removeParticipantsSpotlight.isPresent;
+    const canRemoveSpotlight = capabilities === null || capabilities === void 0 ? void 0 : capabilities.removeParticipantsSpotlight.isPresent;
     const stopAllSpotlight = React.useMemo(() => (canRemoveSpotlight ? () => adapter.stopAllSpotlight() : undefined), [canRemoveSpotlight, adapter]);
     const { stopAllSpotlightWithPrompt } = useStopAllSpotlightCallbackWithPrompt(stopAllSpotlight, setIsPromptOpen, setPromptProps);
     const onMuteParticipantPeoplePaneProps = React.useMemo(() => {
+        var _a, _b;
         /* @conditional-compile-remove(soft-mute) */
         return {
-            onMuteParticipant: ['Unknown', 'Organizer', 'Presenter', 'Co-organizer'].includes(role !== null && role !== void 0 ? role : '')
-                ? onMuteParticipant
-                : undefined,
-            onMuteAllRemoteParticipants: ['Unknown', 'Organizer', 'Presenter', 'Co-organizer'].includes(role !== null && role !== void 0 ? role : '')
+            onMuteParticipant: ((_a = capabilities === null || capabilities === void 0 ? void 0 : capabilities.muteOthers) === null || _a === void 0 ? void 0 : _a.isPresent) || role === 'Unknown' ? onMuteParticipant : undefined,
+            onMuteAllRemoteParticipants: ((_b = capabilities === null || capabilities === void 0 ? void 0 : capabilities.muteOthers) === null || _b === void 0 ? void 0 : _b.isPresent) || role === 'Unknown'
                 ? muteAllHandlers.onMuteAllRemoteParticipants
                 : undefined
         };
     }, [
         /* @conditional-compile-remove(soft-mute) */ onMuteParticipant,
         /* @conditional-compile-remove(soft-mute) */ role,
+        /* @conditional-compile-remove(soft-mute) */ capabilities === null || capabilities === void 0 ? void 0 : capabilities.muteOthers,
         /* @conditional-compile-remove(soft-mute) */ muteAllHandlers.onMuteAllRemoteParticipants
     ]);
     const spotlightPeoplePaneProps = React.useMemo(() => {
@@ -36846,14 +36880,10 @@ const CallArrangement = (props) => {
     if ((isVideoPaneOpen || !isCameraOn) && (props.errorBarProps || props.showErrorNotifications)) {
         filteredLatestErrorNotifications = filteredLatestErrorNotifications.filter((e) => e.type !== 'unableToStartVideoEffect');
     }
-    /* @conditional-compile-remove(acs-close-captions) */
     const isTeamsCaptions = useSelector$1(getCaptionsKind) === 'TeamsCaptions';
     const isTeamsMeeting = useSelector$1(getIsTeamsMeeting);
-    /* @conditional-compile-remove(acs-close-captions) */
     const isTeamsCall = useSelector$1(getIsTeamsCall);
-    const useTeamsCaptions = isTeamsMeeting ||
-        /* @conditional-compile-remove(acs-close-captions) */ isTeamsCall ||
-        /* @conditional-compile-remove(acs-close-captions) */ isTeamsCaptions;
+    const useTeamsCaptions = isTeamsMeeting || isTeamsCall || isTeamsCaptions;
     const hasJoinedCall = useSelector$1(getCallStatus) === 'Connected';
     const isCaptionsOn = useSelector$1(getCaptionsStatus);
     const minMaxDragPosition = useMinMaxDragPosition(props.modalLayerHostId);
@@ -36861,7 +36891,7 @@ const CallArrangement = (props) => {
     const galleryContainerStyles = React.useMemo(() => {
         var _a;
         return Object.assign(Object.assign({}, mediaGalleryContainerStyles$1), (((_a = props === null || props === void 0 ? void 0 : props.captionsOptions) === null || _a === void 0 ? void 0 : _a.height) === 'full' ? { root: { postion: 'absolute' } } : {}));
-    }, [(_c = props === null || props === void 0 ? void 0 : props.captionsOptions) === null || _c === void 0 ? void 0 : _c.height]);
+    }, [(_b = props === null || props === void 0 ? void 0 : props.captionsOptions) === null || _b === void 0 ? void 0 : _b.height]);
     if (isTeamsMeeting) {
         filteredLatestErrorNotifications
             .filter((notification) => notification.type === 'teamsMeetingCallNetworkQualityLow')
@@ -36874,8 +36904,8 @@ const CallArrangement = (props) => {
     const verticalControlBar = props.mobileView && containerWidth && containerHeight && containerWidth / containerHeight > 1 ? true : false;
     // Filter out shareScreen capability notifications if on mobile
     const filteredCapabilitesChangedNotifications = props.mobileView
-        ? (_d = props.capabilitiesChangedNotificationBarProps) === null || _d === void 0 ? void 0 : _d.capabilitiesChangedNotifications.filter((notification) => notification.capabilityName !== 'shareScreen')
-        : (_e = props.capabilitiesChangedNotificationBarProps) === null || _e === void 0 ? void 0 : _e.capabilitiesChangedNotifications;
+        ? (_c = props.capabilitiesChangedNotificationBarProps) === null || _c === void 0 ? void 0 : _c.capabilitiesChangedNotifications.filter((notification) => notification.capabilityName !== 'shareScreen')
+        : (_d = props.capabilitiesChangedNotificationBarProps) === null || _d === void 0 ? void 0 : _d.capabilitiesChangedNotifications;
     /* @conditional-compile-remove(breakout-rooms) */
     const notificationStackStrings = useCompositeStringsForNotificationStackStrings(locale);
     let latestNotifications = props.latestNotifications;
@@ -36889,14 +36919,12 @@ const CallArrangement = (props) => {
     return (React.createElement("div", { ref: containerRef, className: react.mergeStyles(containerDivStyles), id: props.id },
         React.createElement(react.Stack, { verticalFill: true, horizontalAlign: "stretch", className: containerClassName, "data-ui-id": props.dataUiId },
             React.createElement(react.Stack, { reversed: true, horizontal: verticalControlBar, grow: true, styles: callArrangementContainerStyles(verticalControlBar) },
-                ((_f = props.callControlProps) === null || _f === void 0 ? void 0 : _f.options) !== false && !isMobileWithActivePane && (React.createElement(react.Stack, { verticalAlign: 'center', className: react.mergeStyles({
+                ((_e = props.callControlProps) === null || _e === void 0 ? void 0 : _e.options) !== false && !isMobileWithActivePane && (React.createElement(react.Stack, { verticalAlign: 'center', className: react.mergeStyles({
                         zIndex: CONTROL_BAR_Z_INDEX,
                         padding: verticalControlBar ? '0.25rem' : 'unset'
-                    }) }, isLegacyCallControlEnabled((_g = props.callControlProps) === null || _g === void 0 ? void 0 : _g.options) ? (React.createElement(CallControls, Object.assign({}, props.callControlProps, { containerWidth: containerWidth, containerHeight: containerHeight, isMobile: props.mobileView, peopleButtonChecked: isPeoplePaneOpen, onPeopleButtonClicked: togglePeoplePane, displayVertical: verticalControlBar }))) : (React.createElement(CommonCallControlBar, Object.assign({}, props.callControlProps, { callControls: props.callControlProps.options, callAdapter: adapter, mobileView: props.mobileView, disableButtonsForLobbyPage: isInLobby, disableButtonsForHoldScreen: isInLocalHold, peopleButtonChecked: isPeoplePaneOpen, onPeopleButtonClicked: togglePeoplePane, onMoreButtonClicked: onMoreButtonClicked, isCaptionsSupported: (useTeamsCaptions && hasJoinedCall) ||
-                        /* @conditional-compile-remove(acs-close-captions) */ hasJoinedCall, useTeamsCaptions: useTeamsCaptions, isCaptionsOn: isCaptionsOn, onClickVideoEffects: onResolveVideoEffectDependency ? openVideoEffectsPane : undefined, displayVertical: verticalControlBar, onUserSetOverflowGalleryPositionChange: props.onUserSetOverflowGalleryPositionChange, onUserSetGalleryLayout: props.onUserSetGalleryLayoutChange, userSetGalleryLayout: props.userSetGalleryLayout, onSetDialpadPage: props.onSetDialpadPage, dtmfDialerPresent: props.dtmfDialerPresent, peopleButtonRef: peopleButtonRef, cameraButtonRef: cameraButtonRef, onStopLocalSpotlight: !hideSpotlightButtons && localParticipant.spotlight ? onStopLocalSpotlightWithPrompt : undefined, onToggleTeamsMeetingConferenceModal: toggleTeamsMeetingConferenceModal, teamsMeetingConferenceModalPresent: showTeamsMeetingConferenceModal }))))),
-                ((_h = props.callControlProps) === null || _h === void 0 ? void 0 : _h.options) !== false && showDrawer && (React.createElement(react.Stack, { styles: drawerContainerStylesValue },
-                    React.createElement(PreparedMoreDrawer, { callControls: props.callControlProps.options, onLightDismiss: closeDrawer, onPeopleButtonClicked: onMoreDrawerPeopleClicked, disableButtonsForHoldScreen: isInLocalHold, isCaptionsSupported: (useTeamsCaptions && hasJoinedCall) ||
-                            /* @conditional-compile-remove(acs-close-captions) */ hasJoinedCall, useTeamsCaptions: useTeamsCaptions, onUserSetGalleryLayout: props.onUserSetGalleryLayoutChange, userSetGalleryLayout: props.userSetGalleryLayout, onSetDialpadPage: props.onSetDialpadPage, dtmfDialerPresent: props.dtmfDialerPresent, reactionResources: reactionResources, onClickMeetingPhoneInfo: onMeetingPhoneInfoClicked }))),
+                    }) }, isLegacyCallControlEnabled((_f = props.callControlProps) === null || _f === void 0 ? void 0 : _f.options) ? (React.createElement(CallControls, Object.assign({}, props.callControlProps, { containerWidth: containerWidth, containerHeight: containerHeight, isMobile: props.mobileView, peopleButtonChecked: isPeoplePaneOpen, onPeopleButtonClicked: togglePeoplePane, displayVertical: verticalControlBar }))) : (React.createElement(CommonCallControlBar, Object.assign({}, props.callControlProps, { callControls: props.callControlProps.options, callAdapter: adapter, mobileView: props.mobileView, disableButtonsForLobbyPage: isInLobby, disableButtonsForHoldScreen: isInLocalHold, peopleButtonChecked: isPeoplePaneOpen, onPeopleButtonClicked: togglePeoplePane, onMoreButtonClicked: onMoreButtonClicked, isCaptionsSupported: (useTeamsCaptions && hasJoinedCall) || hasJoinedCall, useTeamsCaptions: useTeamsCaptions, isCaptionsOn: isCaptionsOn, onClickVideoEffects: onResolveVideoEffectDependency ? openVideoEffectsPane : undefined, displayVertical: verticalControlBar, onUserSetOverflowGalleryPositionChange: props.onUserSetOverflowGalleryPositionChange, onUserSetGalleryLayout: props.onUserSetGalleryLayoutChange, userSetGalleryLayout: props.userSetGalleryLayout, onSetDialpadPage: props.onSetDialpadPage, dtmfDialerPresent: props.dtmfDialerPresent, peopleButtonRef: peopleButtonRef, cameraButtonRef: cameraButtonRef, onStopLocalSpotlight: !hideSpotlightButtons && localParticipant.spotlight ? onStopLocalSpotlightWithPrompt : undefined, onToggleTeamsMeetingConferenceModal: toggleTeamsMeetingConferenceModal, teamsMeetingConferenceModalPresent: showTeamsMeetingConferenceModal }))))),
+                ((_g = props.callControlProps) === null || _g === void 0 ? void 0 : _g.options) !== false && showDrawer && (React.createElement(react.Stack, { styles: drawerContainerStylesValue },
+                    React.createElement(PreparedMoreDrawer, { callControls: props.callControlProps.options, onLightDismiss: closeDrawer, onPeopleButtonClicked: onMoreDrawerPeopleClicked, disableButtonsForHoldScreen: isInLocalHold, isCaptionsSupported: (useTeamsCaptions && hasJoinedCall) || hasJoinedCall, useTeamsCaptions: useTeamsCaptions, onUserSetGalleryLayout: props.onUserSetGalleryLayoutChange, userSetGalleryLayout: props.userSetGalleryLayout, onSetDialpadPage: props.onSetDialpadPage, dtmfDialerPresent: props.dtmfDialerPresent, reactionResources: reactionResources, onClickMeetingPhoneInfo: onMeetingPhoneInfoClicked }))),
                 React.createElement(react.Stack, { horizontal: true, grow: true },
                     React.createElement(react.Stack.Item, { style: callCompositeContainerCSS },
                         React.createElement(react.Stack.Item, { styles: callGalleryStyles, grow: true },
@@ -36918,7 +36946,7 @@ const CallArrangement = (props) => {
                     React.createElement(SidePane, { mobileView: props.mobileView, maxWidth: isVideoPaneOpen ? `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` : undefined, minWidth: isVideoPaneOpen ? `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` : undefined, updateSidePaneRenderer: props.updateSidePaneRenderer, onPeopleButtonClicked: props.mobileView && !shouldShowPeopleTabHeaderButton(props.callControlProps.options)
                             ? undefined
                             : togglePeoplePane, disablePeopleButton: typeof props.callControlProps.options !== 'boolean' &&
-                            isDisabled$4((_j = props.callControlProps.options) === null || _j === void 0 ? void 0 : _j.participantsButton), onChatButtonClicked: (_k = props.mobileChatTabHeader) === null || _k === void 0 ? void 0 : _k.onClick, disableChatButton: (_l = props.mobileChatTabHeader) === null || _l === void 0 ? void 0 : _l.disabled, showAddPeopleButton: !!props.callControlProps.callInvitationURL, ariaLabel: isVideoEffectsPaneOpen ? locale.strings.call.videoEffectsPaneAriaLabel : undefined }),
+                            isDisabled$4((_h = props.callControlProps.options) === null || _h === void 0 ? void 0 : _h.participantsButton), onChatButtonClicked: (_j = props.mobileChatTabHeader) === null || _j === void 0 ? void 0 : _j.onClick, disableChatButton: (_k = props.mobileChatTabHeader) === null || _k === void 0 ? void 0 : _k.disabled, showAddPeopleButton: !!props.callControlProps.callInvitationURL, ariaLabel: isVideoEffectsPaneOpen ? locale.strings.call.videoEffectsPaneAriaLabel : undefined }),
                     props.mobileView && (React.createElement(ModalLocalAndRemotePIP, { modalLayerHostId: props.modalLayerHostId, hidden: !isSidePaneOpen, styles: pipStyles, strings: modalStrings, minDragPosition: minMaxDragPosition.minDragPosition, maxDragPosition: minMaxDragPosition.maxDragPosition, onDismissSidePane: () => {
                             closePeoplePane();
                             if (props.onCloseChatPane) {
@@ -36981,6 +37009,8 @@ const MediaGallery = (props) => {
     const cameraSwitcherCallback = useHandlers();
     const announcerString = useParticipantChangedAnnouncement();
     const userRole = useSelector$1(getRole);
+    /* @conditional-compile-remove(soft-mute) */
+    const capabilities = useSelector$1(getCapabilites);
     const isRoomsCall = useSelector$1(getIsRoomsCall);
     const containerRef = React.useRef(null);
     const containerWidth = _useContainerWidth(containerRef);
@@ -37039,6 +37069,7 @@ const MediaGallery = (props) => {
             : undefined;
     }, [setPinnedParticipants, pinnedParticipants]);
     const VideoGalleryMemoized = React.useMemo(() => {
+        var _a;
         const layoutBasedOnUserSelection = () => {
             return props.localVideoTileOptions ? layoutBasedOnTilePosition : props.userSetGalleryLayout;
         };
@@ -37048,7 +37079,7 @@ const MediaGallery = (props) => {
                     ? '9:16'
                     : '16:9', pinnedParticipants: pinnedParticipants, onPinParticipant: onPinParticipant, onUnpinParticipant: onUnpinParticipant, reactionResources: reactionResources, onStartLocalSpotlight: hideSpotlightButtons ? undefined : onStartLocalSpotlightWithPrompt, onStopLocalSpotlight: hideSpotlightButtons ? undefined : onStopLocalSpotlightWithPrompt, onStartRemoteSpotlight: hideSpotlightButtons ? undefined : onStartRemoteSpotlightWithPrompt, onStopRemoteSpotlight: hideSpotlightButtons ? undefined : onStopRemoteSpotlightWithPrompt, 
             /* @conditional-compile-remove(soft-mute) */
-            onMuteParticipant: ['Unknown', 'Organizer', 'Presenter', 'Co-organizer'].includes(userRole !== null && userRole !== void 0 ? userRole : '')
+            onMuteParticipant: ((_a = capabilities === null || capabilities === void 0 ? void 0 : capabilities.muteOthers) === null || _a === void 0 ? void 0 : _a.isPresent) || userRole === 'Unknown'
                 ? videoGalleryProps.onMuteParticipant
                 : undefined })));
     }, [
@@ -37074,7 +37105,9 @@ const MediaGallery = (props) => {
         onStopLocalSpotlightWithPrompt,
         onStartRemoteSpotlightWithPrompt,
         onStopRemoteSpotlightWithPrompt,
-        layoutBasedOnTilePosition
+        layoutBasedOnTilePosition,
+        /* @conditional-compile-remove(soft-mute) */
+        capabilities === null || capabilities === void 0 ? void 0 : capabilities.muteOthers
     ]);
     return (React.createElement("div", { ref: containerRef, style: mediaGalleryContainerStyles },
         React.createElement(Announcer$1, { announcementString: announcerString, ariaLive: 'polite' }),
@@ -41089,15 +41122,10 @@ class AzureCommunicationCallAdapter {
             teamsCaptionsFeature.on('SpokenLanguageChanged', this.isSpokenLanguageChanged.bind(this));
         }
         else {
-            /* @conditional-compile-remove(acs-close-captions) */
             const acsCaptionsFeature = captionsFeature === null || captionsFeature === void 0 ? void 0 : captionsFeature.captions;
-            /* @conditional-compile-remove(acs-close-captions) */
             acsCaptionsFeature.on('CaptionsReceived', this.captionsReceived.bind(this));
-            /* @conditional-compile-remove(acs-close-captions) */
             acsCaptionsFeature.on('CaptionsActiveChanged', this.isCaptionsActiveChanged.bind(this));
-            /* @conditional-compile-remove(acs-close-captions) */
             acsCaptionsFeature.on('SpokenLanguageChanged', this.isSpokenLanguageChanged.bind(this));
-            /* @conditional-compile-remove(acs-close-captions) */
             captionsFeature === null || captionsFeature === void 0 ? void 0 : captionsFeature.on('CaptionsKindChanged', this.captionsKindChanged.bind(this));
         }
     }
@@ -41113,15 +41141,10 @@ class AzureCommunicationCallAdapter {
             teamsCaptionsFeature.off('SpokenLanguageChanged', this.isSpokenLanguageChanged.bind(this));
         }
         else {
-            /* @conditional-compile-remove(acs-close-captions) */
             const acsCaptionsFeature = captionsFeature === null || captionsFeature === void 0 ? void 0 : captionsFeature.captions;
-            /* @conditional-compile-remove(acs-close-captions) */
             acsCaptionsFeature.off('CaptionsReceived', this.captionsReceived.bind(this));
-            /* @conditional-compile-remove(acs-close-captions) */
             acsCaptionsFeature.off('CaptionsActiveChanged', this.isCaptionsActiveChanged.bind(this));
-            /* @conditional-compile-remove(acs-close-captions) */
             acsCaptionsFeature.off('SpokenLanguageChanged', this.isSpokenLanguageChanged.bind(this));
-            /* @conditional-compile-remove(acs-close-captions) */
             captionsFeature === null || captionsFeature === void 0 ? void 0 : captionsFeature.off('CaptionsKindChanged', this.captionsKindChanged.bind(this));
         }
     }
@@ -41168,7 +41191,6 @@ class AzureCommunicationCallAdapter {
             breakoutRoomsFeature.off('breakoutRoomsUpdated', this.breakoutRoomsUpdated.bind(this));
         }
     }
-    /* @conditional-compile-remove(acs-close-captions) */
     captionsKindChanged() {
         var _a;
         const captionsFeature = (_a = this.call) === null || _a === void 0 ? void 0 : _a.feature(communicationCalling.Features.Captions);
@@ -41201,7 +41223,6 @@ class AzureCommunicationCallAdapter {
     teamsCaptionsReceived(captionsInfo) {
         this.emitter.emit('captionsReceived', { captionsInfo });
     }
-    /* @conditional-compile-remove(acs-close-captions) */
     captionsReceived(captionsInfo) {
         this.emitter.emit('captionsReceived', { captionsInfo });
     }
@@ -44387,4 +44408,4 @@ exports.useTeamsCall = useTeamsCall;
 exports.useTeamsCallAdapter = useTeamsCallAdapter;
 exports.useTeamsCallAgent = useTeamsCallAgent;
 exports.useTheme = useTheme;
-//# sourceMappingURL=index-Bj4O6YVq.js.map
+//# sourceMappingURL=index-C548hWR1.js.map