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

package/dist/dist-cjs/communication-react/{index-X1fv8B3Q.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-202410090016';
+var telemetryVersion = '1.20.0-alpha-202410100016';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -7248,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);
@@ -8254,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
@@ -8677,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 = '';
@@ -8723,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);
                 }
@@ -8740,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) +
                     '"');
             }
         }
@@ -8750,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,
@@ -9559,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]);
@@ -10047,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);
@@ -11517,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;
 };
@@ -11593,6 +11596,9 @@ const scrollToBottomRichTextEditor = () => {
  */
 const removeLocalBlobs = (currentLocalBlobMap, removedInlineImages) => {
     removedInlineImages.forEach((image) => {
+        if (!image.id) {
+            return;
+        }
         removeSingleLocalBlob(currentLocalBlobMap, image.id);
     });
 };
@@ -11847,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)
@@ -12668,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);
             };
         }
@@ -12676,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);
@@ -12845,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);
@@ -14089,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);
@@ -14117,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);
@@ -14702,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,
@@ -14715,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)
@@ -14751,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,
@@ -15316,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-CJavB0fv.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.
@@ -15324,7 +15348,7 @@ const ChatMessageComponentAsRichTextEditBox = React.lazy(() => Promise.resolve()
  *
  * @conditional-compile-remove(rich-text-editor)
  */
-const loadChatMessageComponentAsRichTextEditBox = () => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-CJavB0fv.js'); });
+const loadChatMessageComponentAsRichTextEditBox = () => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-Dk_okMwX.js'); });
 /**
  * @private
  */
@@ -15863,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;
         }
     }
@@ -15948,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;
         }
     }
@@ -15957,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;
         }
     }
@@ -16631,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);
@@ -17325,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': {
@@ -17340,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
@@ -17368,7 +17375,7 @@ const reactionToolTipHostStyle = () => {
             display: 'flex',
             flexDirection: 'column',
             height: '100%',
-            width: '100%'
+            width: '2.75rem'
         }
     };
 };
@@ -17414,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.
@@ -18153,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
@@ -18356,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({
@@ -18387,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 });
@@ -18656,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
@@ -18672,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
@@ -18793,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,
@@ -18830,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';
             }
         });
     };
@@ -19249,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);
             }
         } }));
@@ -19493,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;
@@ -19975,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];
             });
         }
@@ -20759,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];
             }
         }
@@ -22851,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.
@@ -23308,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);
@@ -23322,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);
@@ -24043,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({
@@ -24065,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" },
@@ -24637,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;
@@ -24683,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) } },
@@ -29795,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-DopZRsd3.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.
@@ -29803,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-DopZRsd3.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper }));
+const loadRichTextSendBox = () => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-C36s6eLH.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper }));
 /**
  * @private
  */
@@ -44358,4 +44408,4 @@ exports.useTeamsCall = useTeamsCall;
 exports.useTeamsCallAdapter = useTeamsCallAdapter;
 exports.useTeamsCallAgent = useTeamsCallAgent;
 exports.useTheme = useTheme;
-//# sourceMappingURL=index-X1fv8B3Q.js.map
+//# sourceMappingURL=index-C548hWR1.js.map