@azure/communication-react 1.14.1-alpha-202404020012 → 1.15.0-beta.1

package/dist/dist-esm/calling-stateful-client/src/PPTLiveSubscriber.d.ts

@@ -1,18 +0,0 @@
-import { CallContext } from './CallContext';
-import { CallIdRef } from './CallIdRef';
-import { CallCommon } from './BetaToStableTypes';
-/**
- * @private
- */
-export declare class PPTLiveSubscriber {
-    private _callIdRef;
-    private _context;
-    private _pptLive;
-    private _call;
-    constructor(callIdRef: CallIdRef, context: CallContext, call: CallCommon);
-    private subscribe;
-    unsubscribe: () => void;
-    private isAvailableChanged;
-    private checkAndUpdatePPTLiveParticipant;
-}
-//# sourceMappingURL=PPTLiveSubscriber.d.ts.map

package/dist/dist-esm/calling-stateful-client/src/PPTLiveSubscriber.js

@@ -1,49 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-/* @conditional-compile-remove(ppt-live) */
-import { Features } from '@azure/communication-calling';
-/* @conditional-compile-remove(ppt-live) */
-/**
- * @private
- */
-export class PPTLiveSubscriber {
-    constructor(callIdRef, context, call) {
-        this.subscribe = () => {
-            this._pptLive.on('isActiveChanged', this.isAvailableChanged);
-        };
-        this.unsubscribe = () => {
-            this._pptLive.off('isActiveChanged', this.isAvailableChanged);
-        };
-        this.isAvailableChanged = () => {
-            this._context.setCallPPTLiveActive(this._callIdRef.callId, this._pptLive.isActive);
-            this.checkAndUpdatePPTLiveParticipant();
-        };
-        this.checkAndUpdatePPTLiveParticipant = () => __awaiter(this, void 0, void 0, function* () {
-            if (this._pptLive.isActive) {
-                // TODO： need to refactor if Web Calling SDK has this logic ready
-                if (this._call.isScreenSharingOn) {
-                    yield this._call.stopScreenSharing();
-                }
-                this._context.setCallParticipantPPTLive(this._callIdRef.callId, this._pptLive.target);
-            }
-            else {
-                this._context.setCallParticipantPPTLive(this._callIdRef.callId, undefined);
-            }
-        });
-        this._callIdRef = callIdRef;
-        this._context = context;
-        this._pptLive = call.feature(Features.PPTLive);
-        this._call = call;
-        this.subscribe();
-    }
-}
-//# sourceMappingURL=PPTLiveSubscriber.js.map

package/dist/dist-esm/calling-stateful-client/src/PPTLiveSubscriber.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PPTLiveSubscriber.js","sourceRoot":"","sources":["../../../../../calling-stateful-client/src/PPTLiveSubscriber.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,2CAA2C;AAC3C,OAAO,EAAE,QAAQ,EAAsB,MAAM,8BAA8B,CAAC;AAS5E,2CAA2C;AAC3C;;GAEG;AACH,MAAM,OAAO,iBAAiB;IAM5B,YAAY,SAAoB,EAAE,OAAoB,EAAE,IAAgB;QAShE,cAAS,GAAG,GAAS,EAAE;YAC7B,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,iBAAiB,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAC/D,CAAC,CAAC;QAEK,gBAAW,GAAG,GAAS,EAAE;YAC9B,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,iBAAiB,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAChE,CAAC,CAAC;QAEM,uBAAkB,GAAG,GAAS,EAAE;YACtC,IAAI,CAAC,QAAQ,CAAC,oBAAoB,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;YACnF,IAAI,CAAC,gCAAgC,EAAE,CAAC;QAC1C,CAAC,CAAC;QAEM,qCAAgC,GAAG,GAAwB,EAAE;YACnE,IAAI,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;gBAC3B,iEAAiE;gBACjE,IAAI,IAAI,CAAC,KAAK,CAAC,iBAAiB,EAAE,CAAC;oBACjC,MAAM,IAAI,CAAC,KAAK,CAAC,iBAAiB,EAAE,CAAC;gBACvC,CAAC;gBACD,IAAI,CAAC,QAAQ,CAAC,yBAAyB,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;YACxF,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,QAAQ,CAAC,yBAAyB,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;YAC7E,CAAC;QACH,CAAC,CAAA,CAAC;QA/BA,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;QAC5B,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;QACxB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;QAC/C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAElB,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;CA0BF","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(ppt-live) */\nimport { Features, PPTLiveCallFeature } from '@azure/communication-calling';\n\n/* @conditional-compile-remove(ppt-live) */\nimport { CallContext } from './CallContext';\n/* @conditional-compile-remove(ppt-live) */\nimport { CallIdRef } from './CallIdRef';\n/* @conditional-compile-remove(ppt-live) */\nimport { CallCommon } from './BetaToStableTypes';\n\n/* @conditional-compile-remove(ppt-live) */\n/**\n * @private\n */\nexport class PPTLiveSubscriber {\n  private _callIdRef: CallIdRef;\n  private _context: CallContext;\n  private _pptLive: PPTLiveCallFeature;\n  private _call: CallCommon;\n\n  constructor(callIdRef: CallIdRef, context: CallContext, call: CallCommon) {\n    this._callIdRef = callIdRef;\n    this._context = context;\n    this._pptLive = call.feature(Features.PPTLive);\n    this._call = call;\n\n    this.subscribe();\n  }\n\n  private subscribe = (): void => {\n    this._pptLive.on('isActiveChanged', this.isAvailableChanged);\n  };\n\n  public unsubscribe = (): void => {\n    this._pptLive.off('isActiveChanged', this.isAvailableChanged);\n  };\n\n  private isAvailableChanged = (): void => {\n    this._context.setCallPPTLiveActive(this._callIdRef.callId, this._pptLive.isActive);\n    this.checkAndUpdatePPTLiveParticipant();\n  };\n\n  private checkAndUpdatePPTLiveParticipant = async (): Promise<void> => {\n    if (this._pptLive.isActive) {\n      // TODO： need to refactor if Web Calling SDK has this logic ready\n      if (this._call.isScreenSharingOn) {\n        await this._call.stopScreenSharing();\n      }\n      this._context.setCallParticipantPPTLive(this._callIdRef.callId, this._pptLive.target);\n    } else {\n      this._context.setCallParticipantPPTLive(this._callIdRef.callId, undefined);\n    }\n  };\n}\n"]}

package/dist/dist-esm/calling-stateful-client/src/ReactionSubscriber.d.ts

@@ -1,16 +0,0 @@
-import { ReactionCallFeature } from '@azure/communication-calling';
-import { CallContext } from './CallContext';
-import { CallIdRef } from './CallIdRef';
-/**
- * @private
- */
-export declare class ReactionSubscriber {
-    private _callIdRef;
-    private _context;
-    private _reaction;
-    constructor(callIdRef: CallIdRef, context: CallContext, reaction: ReactionCallFeature);
-    private subscribe;
-    unsubscribe: () => void;
-    private onReactionEvent;
-}
-//# sourceMappingURL=ReactionSubscriber.d.ts.map

package/dist/dist-esm/calling-stateful-client/src/ReactionSubscriber.js

@@ -1,24 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-/* @conditional-compile-remove(reaction) */
-/**
- * @private
- */
-export class ReactionSubscriber {
-    constructor(callIdRef, context, reaction) {
-        this.subscribe = () => {
-            this._reaction.on('reaction', this.onReactionEvent);
-        };
-        this.unsubscribe = () => {
-            this._reaction.off('reaction', this.onReactionEvent);
-        };
-        this.onReactionEvent = (event) => {
-            this._context.setReceivedReactionFromParticipant(this._callIdRef.callId, event.identifier, event.reactionMessage);
-        };
-        this._callIdRef = callIdRef;
-        this._context = context;
-        this._reaction = reaction;
-        this.subscribe();
-    }
-}
-//# sourceMappingURL=ReactionSubscriber.js.map

package/dist/dist-esm/calling-stateful-client/src/ReactionSubscriber.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ReactionSubscriber.js","sourceRoot":"","sources":["../../../../../calling-stateful-client/src/ReactionSubscriber.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAQlC,2CAA2C;AAC3C;;GAEG;AACH,MAAM,OAAO,kBAAkB;IAK7B,YAAY,SAAoB,EAAE,OAAoB,EAAE,QAA6B;QAQ7E,cAAS,GAAG,GAAS,EAAE;YAC7B,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QACtD,CAAC,CAAC;QAEK,gBAAW,GAAG,GAAS,EAAE;YAC9B,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QACvD,CAAC,CAAC;QAEM,oBAAe,GAAG,CAAC,KAAU,EAAQ,EAAE;YAC7C,IAAI,CAAC,QAAQ,CAAC,kCAAkC,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,KAAK,CAAC,UAAU,EAAE,KAAK,CAAC,eAAe,CAAC,CAAC;QACpH,CAAC,CAAC;QAjBA,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;QAC5B,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;QACxB,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;QAE1B,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;CAaF","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(reaction) */\nimport { ReactionCallFeature } from '@azure/communication-calling';\n/* @conditional-compile-remove(reaction) */\nimport { CallContext } from './CallContext';\n/* @conditional-compile-remove(reaction) */\nimport { CallIdRef } from './CallIdRef';\n/* @conditional-compile-remove(reaction) */\n/**\n * @private\n */\nexport class ReactionSubscriber {\n  private _callIdRef: CallIdRef;\n  private _context: CallContext;\n  private _reaction: ReactionCallFeature;\n\n  constructor(callIdRef: CallIdRef, context: CallContext, reaction: ReactionCallFeature) {\n    this._callIdRef = callIdRef;\n    this._context = context;\n    this._reaction = reaction;\n\n    this.subscribe();\n  }\n\n  private subscribe = (): void => {\n    this._reaction.on('reaction', this.onReactionEvent);\n  };\n\n  public unsubscribe = (): void => {\n    this._reaction.off('reaction', this.onReactionEvent);\n  };\n\n  private onReactionEvent = (event: any): void => {\n    this._context.setReceivedReactionFromParticipant(this._callIdRef.callId, event.identifier, event.reactionMessage);\n  };\n}\n"]}

package/dist/dist-esm/calling-stateful-client/src/SpotlightSubscriber.d.ts

@@ -1,16 +0,0 @@
-import { SpotlightCallFeature } from '@azure/communication-calling';
-import { CallContext } from './CallContext';
-import { CallIdRef } from './CallIdRef';
-/**
- * @private
- */
-export declare class SpotlightSubscriber {
-    private _callIdRef;
-    private _context;
-    private _spotlightFeature;
-    constructor(callIdRef: CallIdRef, context: CallContext, spotlight: SpotlightCallFeature);
-    private subscribe;
-    unsubscribe: () => void;
-    private spotlightChanged;
-}
-//# sourceMappingURL=SpotlightSubscriber.d.ts.map

package/dist/dist-esm/calling-stateful-client/src/SpotlightSubscriber.js

@@ -1,30 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-/* @conditional-compile-remove(spotlight) */
-/**
- * @private
- */
-export class SpotlightSubscriber {
-    constructor(callIdRef, context, spotlight) {
-        this.subscribe = () => {
-            this._spotlightFeature.on('spotlightChanged', this.spotlightChanged);
-        };
-        this.unsubscribe = () => {
-            this._spotlightFeature.off('spotlightChanged', this.spotlightChanged);
-        };
-        this.spotlightChanged = (args) => {
-            this._context.setSpotlight(this._callIdRef.callId, this._spotlightFeature.getSpotlightedParticipants(), this._spotlightFeature.maxParticipantsToSpotlight);
-            for (const addedParticipant of args.added) {
-                this._context.setParticipantSpotlighted(this._callIdRef.callId, addedParticipant);
-            }
-            for (const removedParticipant of args.removed) {
-                this._context.setParticipantNotSpotlighted(this._callIdRef.callId, removedParticipant);
-            }
-        };
-        this._callIdRef = callIdRef;
-        this._context = context;
-        this._spotlightFeature = spotlight;
-        this.subscribe();
-    }
-}
-//# sourceMappingURL=SpotlightSubscriber.js.map

package/dist/dist-esm/calling-stateful-client/src/SpotlightSubscriber.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SpotlightSubscriber.js","sourceRoot":"","sources":["../../../../../calling-stateful-client/src/SpotlightSubscriber.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AASlC,4CAA4C;AAC5C;;GAEG;AACH,MAAM,OAAO,mBAAmB;IAK9B,YAAY,SAAoB,EAAE,OAAoB,EAAE,SAA+B;QAQ/E,cAAS,GAAG,GAAS,EAAE;YAC7B,IAAI,CAAC,iBAAiB,CAAC,EAAE,CAAC,kBAAkB,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACvE,CAAC,CAAC;QAEK,gBAAW,GAAG,GAAS,EAAE;YAC9B,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,kBAAkB,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACxE,CAAC,CAAC;QAEM,qBAAgB,GAAG,CAAC,IAA4E,EAAQ,EAAE;YAChH,IAAI,CAAC,QAAQ,CAAC,YAAY,CACxB,IAAI,CAAC,UAAU,CAAC,MAAM,EACtB,IAAI,CAAC,iBAAiB,CAAC,0BAA0B,EAAE,EACnD,IAAI,CAAC,iBAAiB,CAAC,0BAA0B,CAClD,CAAC;YACF,KAAK,MAAM,gBAAgB,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;gBAC1C,IAAI,CAAC,QAAQ,CAAC,yBAAyB,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;YACpF,CAAC;YACD,KAAK,MAAM,kBAAkB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBAC9C,IAAI,CAAC,QAAQ,CAAC,4BAA4B,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;YACzF,CAAC;QACH,CAAC,CAAC;QA3BA,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;QAC5B,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;QACxB,IAAI,CAAC,iBAAiB,GAAG,SAAS,CAAC;QAEnC,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;CAuBF","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(spotlight) */\nimport { SpotlightCallFeature, SpotlightedParticipant } from '@azure/communication-calling';\n/* @conditional-compile-remove(spotlight) */\nimport { CallContext } from './CallContext';\n/* @conditional-compile-remove(spotlight) */\nimport { CallIdRef } from './CallIdRef';\n\n/* @conditional-compile-remove(spotlight) */\n/**\n * @private\n */\nexport class SpotlightSubscriber {\n  private _callIdRef: CallIdRef;\n  private _context: CallContext;\n  private _spotlightFeature: SpotlightCallFeature;\n\n  constructor(callIdRef: CallIdRef, context: CallContext, spotlight: SpotlightCallFeature) {\n    this._callIdRef = callIdRef;\n    this._context = context;\n    this._spotlightFeature = spotlight;\n\n    this.subscribe();\n  }\n\n  private subscribe = (): void => {\n    this._spotlightFeature.on('spotlightChanged', this.spotlightChanged);\n  };\n\n  public unsubscribe = (): void => {\n    this._spotlightFeature.off('spotlightChanged', this.spotlightChanged);\n  };\n\n  private spotlightChanged = (args: { added: SpotlightedParticipant[]; removed: SpotlightedParticipant[] }): void => {\n    this._context.setSpotlight(\n      this._callIdRef.callId,\n      this._spotlightFeature.getSpotlightedParticipants(),\n      this._spotlightFeature.maxParticipantsToSpotlight\n    );\n    for (const addedParticipant of args.added) {\n      this._context.setParticipantSpotlighted(this._callIdRef.callId, addedParticipant);\n    }\n    for (const removedParticipant of args.removed) {\n      this._context.setParticipantNotSpotlighted(this._callIdRef.callId, removedParticipant);\n    }\n  };\n}\n"]}

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponentAsRichTextEditBox.d.ts

@@ -1,18 +0,0 @@
-/// <reference types="react" />
-import { MessageThreadStrings } from '../MessageThread';
-import { ChatMessage } from '../../types';
-import { AttachmentMetadata } from '../../types/Attachment';
-/** @beta */
-export type ChatMessageComponentAsRichTextEditBoxProps = {
-    onCancel?: (messageId: string) => void;
-    onSubmit: (text: string, metadata?: Record<string, string>, options?: {
-        attachmentMetadata?: AttachmentMetadata[];
-    }) => void;
-    message: ChatMessage;
-    strings: MessageThreadStrings;
-};
-/**
- * @beta
- */
-export declare const ChatMessageComponentAsRichTextEditBox: (props: ChatMessageComponentAsRichTextEditBoxProps) => JSX.Element;
-//# sourceMappingURL=ChatMessageComponentAsRichTextEditBox.d.ts.map

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponentAsRichTextEditBox.js

@@ -1,102 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-import { mergeStyles, Stack } from '@fluentui/react';
-import { ChatMyMessage } from '@fluentui-contrib/react-chat';
-import { mergeClasses } from '@fluentui/react-components';
-import { _formatString } from "../../../../acs-ui-common/src";
-import { useTheme } from '../../theming/FluentThemeProvider';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { editBoxWidthStyles, richTextEditBoxActionButtonIcon } from '../styles/EditBox.styles';
-import { InputBoxButton } from '../InputBoxButton';
-import { useChatMyMessageStyles } from '../styles/MessageThread.styles';
-import { useChatMessageRichTextEditContainerStyles } from '../styles/ChatMessageComponent.styles';
-import { MAXIMUM_LENGTH_OF_MESSAGE } from '../utils/SendBoxUtils';
-import { getMessageState, onRenderCancelIcon, onRenderSubmitIcon } from '../utils/ChatMessageComponentAsEditBoxUtils';
-/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
-import { getMessageAttachedFilesMetadata } from '../utils/ChatMessageComponentAsEditBoxUtils';
-import { RichTextInputBoxComponent } from '../RichTextEditor/RichTextInputBoxComponent';
-import { editBoxRichTextEditorStyle, richTextActionButtonsStyle } from '../styles/RichTextEditor.styles';
-import { RichTextSendBoxErrors } from '../RichTextEditor/RichTextSendBoxErrors';
-import { useLocale } from '../../localization';
-/**
- * @beta
- */
-export const ChatMessageComponentAsRichTextEditBox = (props) => {
-    const { onCancel, onSubmit, strings, message } = props;
-    const [textValue, setTextValue] = useState(message.content || '');
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
-    const [attachmentMetadata, _] = React.useState(getMessageAttachedFilesMetadata(message));
-    const editTextFieldRef = React.useRef(null);
-    const theme = useTheme();
-    const messageState = getMessageState(textValue, 
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ attachmentMetadata !== null && attachmentMetadata !== void 0 ? attachmentMetadata : []);
-    const submitEnabled = messageState === 'OK';
-    const editContainerStyles = useChatMessageRichTextEditContainerStyles();
-    const chatMyMessageStyles = useChatMyMessageStyles();
-    const locale = useLocale().strings;
-    // TODO: Check if the focus is needed, if so use `focusOnInit` prop
-    // for Rooster component instead as this sets focus too early
-    useEffect(() => {
-        var _a;
-        (_a = editTextFieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, []);
-    const setText = (newValue) => {
-        setTextValue(newValue !== null && newValue !== void 0 ? newValue : '');
-    };
-    const textTooLongMessage = messageState === 'too long'
-        ? _formatString(strings.editBoxTextLimit, { limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}` })
-        : undefined;
-    const iconClassName = useCallback((isHover) => {
-        const color = isHover ? theme.palette.accent : theme.palette.neutralSecondary;
-        return mergeStyles(richTextEditBoxActionButtonIcon, { color });
-    }, [theme.palette.accent, theme.palette.neutralSecondary]);
-    const onRenderThemedCancelIcon = useCallback((isHover) => {
-        return onRenderCancelIcon(iconClassName(isHover));
-    }, [iconClassName]);
-    const onRenderThemedSubmitIcon = useCallback((isHover) => {
-        return onRenderSubmitIcon(iconClassName(isHover));
-    }, [iconClassName]);
-    const actionButtons = useMemo(() => {
-        return (React.createElement(Stack, { horizontal: true },
-            React.createElement(InputBoxButton, { className: richTextActionButtonsStyle, ariaLabel: strings.editBoxCancelButton, tooltipContent: strings.editBoxCancelButton, onRenderIcon: onRenderThemedCancelIcon, onClick: () => {
-                    onCancel && onCancel(message.messageId);
-                }, id: 'dismissIconWrapper' }),
-            React.createElement(InputBoxButton, { className: richTextActionButtonsStyle, ariaLabel: strings.editBoxSubmitButton, tooltipContent: strings.editBoxSubmitButton, onRenderIcon: onRenderThemedSubmitIcon, onClick: (e) => {
-                    submitEnabled &&
-                        onSubmit(textValue, message.metadata, 
-                        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ {
-                            attachmentMetadata
-                        });
-                    e.stopPropagation();
-                }, id: 'submitIconWrapper' })));
-    }, [
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ attachmentMetadata,
-        message.messageId,
-        message.metadata,
-        onCancel,
-        onRenderThemedCancelIcon,
-        onRenderThemedSubmitIcon,
-        onSubmit,
-        strings.editBoxCancelButton,
-        strings.editBoxSubmitButton,
-        submitEnabled,
-        textValue
-    ]);
-    const richTextLocaleStrings = useMemo(() => {
-        /* @conditional-compile-remove(rich-text-editor) */
-        return locale.richTextSendBox;
-        return locale.sendBox;
-    }, [/* @conditional-compile-remove(rich-text-editor) */ locale.richTextSendBox, locale.sendBox]);
-    const getContent = () => {
-        return (React.createElement(Stack, { className: mergeStyles(editBoxWidthStyles) },
-            React.createElement(RichTextSendBoxErrors, { textTooLongMessage: textTooLongMessage, systemMessage: message.failureReason }),
-            React.createElement(RichTextInputBoxComponent, { placeholderText: strings.editBoxPlaceholderText, onChange: setText, editorComponentRef: editTextFieldRef, initialContent: message.content, strings: richTextLocaleStrings, disabled: false, actionComponents: actionButtons, richTextEditorStyleProps: editBoxRichTextEditorStyle, isHorizontalLayoutDisabled: true })));
-    };
-    const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';
-    return (React.createElement(ChatMyMessage, { attached: attached, root: {
-            className: chatMyMessageStyles.root
-        }, body: {
-            className: mergeClasses(editContainerStyles.body, attached !== 'top' ? editContainerStyles.bodyAttached : undefined)
-        } }, getContent()));
-};
-//# sourceMappingURL=ChatMessageComponentAsRichTextEditBox.js.map

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponentAsRichTextEditBox.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ChatMessageComponentAsRichTextEditBox.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageComponentAsRichTextEditBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { ChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useTheme } from '../../theming/FluentThemeProvider';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { editBoxWidthStyles, richTextEditBoxActionButtonIcon } from '../styles/EditBox.styles';\nimport { InputBoxButton } from '../InputBoxButton';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { useChatMyMessageStyles } from '../styles/MessageThread.styles';\nimport { ChatMessage } from '../../types';\nimport { _AttachmentUploadCards } from '../AttachmentUploadCards';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { AttachmentMetadata } from '../../types/Attachment';\nimport { useChatMessageRichTextEditContainerStyles } from '../styles/ChatMessageComponent.styles';\nimport { MAXIMUM_LENGTH_OF_MESSAGE } from '../utils/SendBoxUtils';\nimport { getMessageState, onRenderCancelIcon, onRenderSubmitIcon } from '../utils/ChatMessageComponentAsEditBoxUtils';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { getMessageAttachedFilesMetadata } from '../utils/ChatMessageComponentAsEditBoxUtils';\nimport { RichTextEditorComponentRef } from '../RichTextEditor/RichTextEditor';\nimport { RichTextInputBoxComponent } from '../RichTextEditor/RichTextInputBoxComponent';\nimport { editBoxRichTextEditorStyle, richTextActionButtonsStyle } from '../styles/RichTextEditor.styles';\nimport { RichTextSendBoxErrors } from '../RichTextEditor/RichTextSendBoxErrors';\nimport { useLocale } from '../../localization';\n\n/** @beta */\nexport type ChatMessageComponentAsRichTextEditBoxProps = {\n  onCancel?: (messageId: string) => void;\n  onSubmit: (\n    text: string,\n    metadata?: Record<string, string>,\n    options?: {\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n      attachmentMetadata?: AttachmentMetadata[];\n    }\n  ) => void;\n  message: ChatMessage;\n  strings: MessageThreadStrings;\n};\n\n/**\n * @beta\n */\nexport const ChatMessageComponentAsRichTextEditBox = (\n  props: ChatMessageComponentAsRichTextEditBoxProps\n): JSX.Element => {\n  const { onCancel, onSubmit, strings, message } = props;\n\n  const [textValue, setTextValue] = useState<string>(message.content || '');\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  const [attachmentMetadata, _] = React.useState(getMessageAttachedFilesMetadata(message));\n  const editTextFieldRef = React.useRef<RichTextEditorComponentRef>(null);\n  const theme = useTheme();\n  const messageState = getMessageState(\n    textValue,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ attachmentMetadata ??\n      []\n  );\n  const submitEnabled = messageState === 'OK';\n\n  const editContainerStyles = useChatMessageRichTextEditContainerStyles();\n  const chatMyMessageStyles = useChatMyMessageStyles();\n  const locale = useLocale().strings;\n\n  // TODO: Check if the focus is needed, if so use `focusOnInit` prop\n  // for Rooster component instead as this sets focus too early\n  useEffect(() => {\n    editTextFieldRef.current?.focus();\n  }, []);\n\n  const setText = (newValue?: string): void => {\n    setTextValue(newValue ?? '');\n  };\n\n  const textTooLongMessage =\n    messageState === 'too long'\n      ? _formatString(strings.editBoxTextLimit, { limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}` })\n      : undefined;\n\n  const iconClassName = useCallback(\n    (isHover: boolean) => {\n      const color = isHover ? theme.palette.accent : theme.palette.neutralSecondary;\n      return mergeStyles(richTextEditBoxActionButtonIcon, { color });\n    },\n    [theme.palette.accent, theme.palette.neutralSecondary]\n  );\n\n  const onRenderThemedCancelIcon = useCallback(\n    (isHover: boolean) => {\n      return onRenderCancelIcon(iconClassName(isHover));\n    },\n    [iconClassName]\n  );\n\n  const onRenderThemedSubmitIcon = useCallback(\n    (isHover: boolean) => {\n      return onRenderSubmitIcon(iconClassName(isHover));\n    },\n    [iconClassName]\n  );\n\n  const actionButtons = useMemo(() => {\n    return (\n      <Stack horizontal>\n        <InputBoxButton\n          className={richTextActionButtonsStyle}\n          ariaLabel={strings.editBoxCancelButton}\n          tooltipContent={strings.editBoxCancelButton}\n          onRenderIcon={onRenderThemedCancelIcon}\n          onClick={() => {\n            onCancel && onCancel(message.messageId);\n          }}\n          id={'dismissIconWrapper'}\n        />\n        <InputBoxButton\n          className={richTextActionButtonsStyle}\n          ariaLabel={strings.editBoxSubmitButton}\n          tooltipContent={strings.editBoxSubmitButton}\n          onRenderIcon={onRenderThemedSubmitIcon}\n          onClick={(e) => {\n            submitEnabled &&\n              onSubmit(\n                textValue,\n                message.metadata,\n                /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ {\n                  attachmentMetadata\n                }\n              );\n            e.stopPropagation();\n          }}\n          id={'submitIconWrapper'}\n        />\n      </Stack>\n    );\n  }, [\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ attachmentMetadata,\n    message.messageId,\n    message.metadata,\n    onCancel,\n    onRenderThemedCancelIcon,\n    onRenderThemedSubmitIcon,\n    onSubmit,\n    strings.editBoxCancelButton,\n    strings.editBoxSubmitButton,\n    submitEnabled,\n    textValue\n  ]);\n  const richTextLocaleStrings = useMemo(() => {\n    /* @conditional-compile-remove(rich-text-editor) */\n    return locale.richTextSendBox;\n    return locale.sendBox;\n  }, [/* @conditional-compile-remove(rich-text-editor) */ locale.richTextSendBox, locale.sendBox]);\n\n  const getContent = (): JSX.Element => {\n    return (\n      <Stack className={mergeStyles(editBoxWidthStyles)}>\n        <RichTextSendBoxErrors textTooLongMessage={textTooLongMessage} systemMessage={message.failureReason} />\n        <RichTextInputBoxComponent\n          placeholderText={strings.editBoxPlaceholderText}\n          onChange={setText}\n          editorComponentRef={editTextFieldRef}\n          initialContent={message.content}\n          strings={richTextLocaleStrings}\n          disabled={false}\n          actionComponents={actionButtons}\n          richTextEditorStyleProps={editBoxRichTextEditorStyle}\n          isHorizontalLayoutDisabled={true}\n        />\n      </Stack>\n    );\n  };\n\n  const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n  return (\n    <ChatMyMessage\n      attached={attached}\n      root={{\n        className: chatMyMessageStyles.root\n      }}\n      body={{\n        className: mergeClasses(\n          editContainerStyles.body,\n          attached !== 'top' ? editContainerStyles.bodyAttached : undefined\n        )\n      }}\n    >\n      {getContent()}\n    </ChatMyMessage>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/Drawer/ReactionDrawerMenuItem.d.ts

@@ -1,29 +0,0 @@
-/// <reference types="react" />
-import { ReactionResources } from '../..';
-/**
- * Props for the ReactionMenuItem
- *
- * @internal
- */
-export interface _ReactionMenuItemProps {
-    /**
-     * Reaction resources to render for mobile button menus for reaction
-     */
-    reactionResources?: ReactionResources;
-    /**
-     * reaction click event from the call adapter.
-     */
-    onReactionClick?: (reaction: string) => Promise<void>;
-    /**
-     * Whether the menu item is disabled
-     * @defaultvalue false
-     */
-    disabled?: boolean;
-}
-/**
- * Maps the individual item in menuProps.items passed in the {@link DrawerMenu} into a UI component.
- *
- * @internal
- */
-export declare const _ReactionDrawerMenuItem: (props: _ReactionMenuItemProps) => JSX.Element;
-//# sourceMappingURL=ReactionDrawerMenuItem.d.ts.map

package/dist/dist-esm/react-components/src/components/Drawer/ReactionDrawerMenuItem.js

@@ -1,60 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-/* @conditional-compile-remove(reaction) */
-import { mergeStyles, Stack } from '@fluentui/react';
-/* @conditional-compile-remove(reaction) */
-import React from 'react';
-/* @conditional-compile-remove(reaction) */
-import { useTheme } from '../../theming/FluentThemeProvider';
-/* @conditional-compile-remove(reaction) */
-import { mobileViewEmojiStyles, mobileViewMenuItemStyle } from '../styles/ReactionButton.styles';
-/* @conditional-compile-remove(reaction) */
-import { IconButton } from '@fluentui/react';
-/* @conditional-compile-remove(reaction) */
-/**
- * Maps the individual item in menuProps.items passed in the {@link DrawerMenu} into a UI component.
- *
- * @internal
- */
-export const _ReactionDrawerMenuItem = (props) => {
-    var _a, _b, _c, _d, _e;
-    const theme = useTheme();
-    const resources = props.reactionResources;
-    const emojiResource = new Map([
-        ['like', (_a = resources === null || resources === void 0 ? void 0 : resources.likeReaction) === null || _a === void 0 ? void 0 : _a.url],
-        ['heart', (_b = resources === null || resources === void 0 ? void 0 : resources.heartReaction) === null || _b === void 0 ? void 0 : _b.url],
-        ['laugh', (_c = resources === null || resources === void 0 ? void 0 : resources.laughReaction) === null || _c === void 0 ? void 0 : _c.url],
-        ['applause', (_d = resources === null || resources === void 0 ? void 0 : resources.applauseReaction) === null || _d === void 0 ? void 0 : _d.url],
-        ['surprised', (_e = resources === null || resources === void 0 ? void 0 : resources.surprisedReaction) === null || _e === void 0 ? void 0 : _e.url]
-    ]);
-    const emojis = ['like', 'heart', 'laugh', 'applause', 'surprised'];
-    const borderRadius = useTheme().effects.roundedCorner4;
-    const modifiedFirstItemStyle = {
-        root: {
-            borderTopRightRadius: borderRadius,
-            borderTopLeftRadius: borderRadius,
-            marginTop: '12px'
-        }
-    };
-    return (React.createElement(Stack, { id: "reaction", role: "menuitem", horizontal: true, className: mergeStyles(drawerMenuItemRootStyles(theme.palette.neutralLight, theme.fonts.small), props.disabled ? disabledDrawerMenuItemRootStyles(theme.palette.neutralQuaternaryAlt) : undefined, modifiedFirstItemStyle.root) },
-        React.createElement("div", { style: mobileViewMenuItemStyle() }, emojis.map((emoji, index) => {
-            const resourceUrl = emojiResource.get(emoji.toString());
-            return (React.createElement(IconButton, { key: index, onClick: () => {
-                    var _a;
-                    (_a = props.onReactionClick) === null || _a === void 0 ? void 0 : _a.call(props, emoji);
-                }, style: mobileViewEmojiStyles(resourceUrl ? resourceUrl : '', 'running') }));
-        }))));
-};
-/* @conditional-compile-remove(reaction) */
-const drawerMenuItemRootStyles = (hoverBackground, fontSize) => (Object.assign(Object.assign({}, fontSize), { height: '3rem', lineHeight: '3rem', padding: '0rem 0.75rem', cursor: 'pointer', ':hover, :focus': {
-        background: hoverBackground
-    } }));
-/* @conditional-compile-remove(reaction) */
-const disabledDrawerMenuItemRootStyles = (background) => ({
-    pointerEvents: 'none',
-    background: background,
-    ':hover, :focus': {
-        background: background
-    }
-});
-//# sourceMappingURL=ReactionDrawerMenuItem.js.map

package/dist/dist-esm/react-components/src/components/Drawer/ReactionDrawerMenuItem.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ReactionDrawerMenuItem.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Drawer/ReactionDrawerMenuItem.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(reaction) */\nimport { IRawStyle, IStyle, mergeStyles, Stack } from '@fluentui/react';\n/* @conditional-compile-remove(reaction) */\nimport React from 'react';\n/* @conditional-compile-remove(reaction) */\nimport { useTheme } from '../../theming/FluentThemeProvider';\n/* @conditional-compile-remove(reaction) */\nimport { mobileViewEmojiStyles, mobileViewMenuItemStyle } from '../styles/ReactionButton.styles';\n/* @conditional-compile-remove(reaction) */\nimport { IconButton } from '@fluentui/react';\n/* @conditional-compile-remove(reaction) */\nimport { _DrawerMenuItemProps, ReactionResources } from '../..';\n\n/* @conditional-compile-remove(reaction) */\n/**\n * Props for the ReactionMenuItem\n *\n * @internal\n */\nexport interface _ReactionMenuItemProps {\n  /**\n   * Reaction resources to render for mobile button menus for reaction\n   */\n  reactionResources?: ReactionResources;\n  /**\n   * reaction click event from the call adapter.\n   */\n  onReactionClick?: (reaction: string) => Promise<void>;\n  /**\n   * Whether the menu item is disabled\n   * @defaultvalue false\n   */\n  disabled?: boolean;\n}\n\n/* @conditional-compile-remove(reaction) */\n/**\n * Maps the individual item in menuProps.items passed in the {@link DrawerMenu} into a UI component.\n *\n * @internal\n */\nexport const _ReactionDrawerMenuItem = (props: _ReactionMenuItemProps): JSX.Element => {\n  const theme = useTheme();\n  const resources = props.reactionResources;\n  const emojiResource: Map<string, string | undefined> = new Map([\n    ['like', resources?.likeReaction?.url],\n    ['heart', resources?.heartReaction?.url],\n    ['laugh', resources?.laughReaction?.url],\n    ['applause', resources?.applauseReaction?.url],\n    ['surprised', resources?.surprisedReaction?.url]\n  ]);\n  const emojis: string[] = ['like', 'heart', 'laugh', 'applause', 'surprised'];\n\n  const borderRadius = useTheme().effects.roundedCorner4;\n  const modifiedFirstItemStyle = {\n    root: {\n      borderTopRightRadius: borderRadius,\n      borderTopLeftRadius: borderRadius,\n      marginTop: '12px'\n    }\n  };\n\n  return (\n    <Stack\n      id=\"reaction\"\n      role=\"menuitem\"\n      horizontal\n      className={mergeStyles(\n        drawerMenuItemRootStyles(theme.palette.neutralLight, theme.fonts.small),\n        props.disabled ? disabledDrawerMenuItemRootStyles(theme.palette.neutralQuaternaryAlt) : undefined,\n        modifiedFirstItemStyle.root\n      )}\n    >\n      <div style={mobileViewMenuItemStyle()}>\n        {emojis.map((emoji, index) => {\n          const resourceUrl = emojiResource.get(emoji.toString());\n\n          return (\n            <IconButton\n              key={index}\n              onClick={() => {\n                props.onReactionClick?.(emoji);\n              }}\n              style={mobileViewEmojiStyles(resourceUrl ? resourceUrl : '', 'running')}\n            />\n          );\n        })}\n      </div>\n    </Stack>\n  );\n};\n\n/* @conditional-compile-remove(reaction) */\nconst drawerMenuItemRootStyles = (hoverBackground: string, fontSize: IRawStyle): IStyle => ({\n  ...fontSize,\n  height: '3rem',\n  lineHeight: '3rem',\n  padding: '0rem 0.75rem',\n  cursor: 'pointer',\n  ':hover, :focus': {\n    background: hoverBackground\n  }\n});\n\n/* @conditional-compile-remove(reaction) */\nconst disabledDrawerMenuItemRootStyles = (background: string): IStyle => ({\n  pointerEvents: 'none',\n  background: background,\n  ':hover, :focus': {\n    background: background\n  }\n});\n"]}

package/dist/dist-esm/react-components/src/components/MeetingReactionOverlay.d.ts

@@ -1,40 +0,0 @@
-/// <reference types="react" />
-import { OverlayModeTypes, Reaction, ReactionResources, VideoGalleryLocalParticipant, VideoGalleryRemoteParticipant } from '../types';
-/**
- * Reaction overlay component props
- *
- * Can be used with {@link VideoTile}.
- *
- * @internal
- */
-export interface MeetingReactionOverlayProps {
-    /**
-     * Reaction rendering overlay type. i.e. single reaction rendering on grid-tile, screen share mode overlay
-     */
-    overlayMode: OverlayModeTypes;
-    /**
-     * Received reaction when overlay mode is grid-tile
-     */
-    reaction?: Reaction;
-    /**
-     * Reactions resources' url and metadata.
-     */
-    reactionResources: ReactionResources;
-    /**
-     * Local participant's reaction event that comes from participant object.
-     */
-    localParticipant?: VideoGalleryLocalParticipant;
-    /**
-     * Remote participant's reaction event.
-     */
-    remoteParticipants?: VideoGalleryRemoteParticipant[];
-}
-/**
- * Reaction overlay component
- *
- * Can be used with {@link VideoTile}.
- *
- * @internal
- */
-export declare const MeetingReactionOverlay: (props: MeetingReactionOverlayProps) => JSX.Element;
-//# sourceMappingURL=MeetingReactionOverlay.d.ts.map

package/dist/dist-esm/react-components/src/components/MeetingReactionOverlay.js

@@ -1,77 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-/* @conditional-compile-remove(reaction) */
-import React, { useLayoutEffect, useRef, useState } from 'react';
-/* @conditional-compile-remove(reaction) */
-import { ParticipantVideoTileOverlay } from './VideoGallery/ParticipantVideoTileOverlay';
-/* @conditional-compile-remove(reaction) */
-import { RemoteContentShareReactionOverlay } from './VideoGallery/RemoteContentShareReactionOverlay';
-/* @conditional-compile-remove(reaction) */
-/**
- * Emoji max size
- * @internal
- */
-const DEFAULT_EMOJI_MAX_SIZE_PX = 100;
-/* @conditional-compile-remove(reaction) */
-/**
- * Emoji min size
- * @internal
- */
-const DEFAULT_EMOJI_MIN_SIZE_PX = 32;
-/* @conditional-compile-remove(reaction) */
-/**
- * Emoji resize scale constant
- * @internal
- */
-const REACTION_EMOJI_RESIZE_SCALE_CONSTANT = 3;
-/* @conditional-compile-remove(reaction) */
-/**
- * Reaction overlay component
- *
- * Can be used with {@link VideoTile}.
- *
- * @internal
- */
-export const MeetingReactionOverlay = (props) => {
-    const { overlayMode, reaction, reactionResources, localParticipant, remoteParticipants } = props;
-    const [emojiSizePx, setEmojiSizePx] = useState(0);
-    const [divHeight, setDivHeight] = useState(0);
-    const [divWidth, setDivWidth] = useState(0);
-    const videoTileRef = useRef(null);
-    const observer = useRef(new ResizeObserver((entries) => {
-        var _a;
-        const domRect = (_a = entries.at(0)) === null || _a === void 0 ? void 0 : _a.contentRect;
-        const width = domRect !== undefined ? domRect.width : 0;
-        const height = domRect !== undefined ? domRect.height : 0;
-        const reactionEmojiCalcSize = Math.min(width, height) / REACTION_EMOJI_RESIZE_SCALE_CONSTANT;
-        // we only want to set the persona size if it has changed
-        if (reactionEmojiCalcSize !== emojiSizePx) {
-            setEmojiSizePx(Math.max(Math.min(reactionEmojiCalcSize, DEFAULT_EMOJI_MAX_SIZE_PX), DEFAULT_EMOJI_MIN_SIZE_PX));
-        }
-        if (height !== divHeight) {
-            setDivHeight(height);
-        }
-        if (width !== divWidth) {
-            setDivWidth(width);
-        }
-    }));
-    useLayoutEffect(() => {
-        if (videoTileRef.current) {
-            observer.current.observe(videoTileRef.current);
-        }
-        const currentObserver = observer.current;
-        return () => currentObserver.disconnect();
-    }, [videoTileRef]);
-    if (overlayMode === 'grid-tiles') {
-        return (React.createElement("div", { ref: videoTileRef, style: { width: '100%', height: '100%' } },
-            React.createElement(ParticipantVideoTileOverlay, { emojiSize: emojiSizePx, reaction: reaction, reactionResources: reactionResources })));
-    }
-    else if (props.overlayMode === 'screen-share' || props.overlayMode === 'content-share') {
-        return (React.createElement("div", { ref: videoTileRef, style: { width: '100%', height: '100%' } },
-            React.createElement(RemoteContentShareReactionOverlay, { hostDivHeight: divHeight, hostDivWidth: divWidth, reactionResources: reactionResources, localParticipant: localParticipant, remoteParticipants: remoteParticipants })));
-    }
-    else {
-        return React.createElement(React.Fragment, null);
-    }
-};
-//# sourceMappingURL=MeetingReactionOverlay.js.map

package/dist/dist-esm/react-components/src/components/MeetingReactionOverlay.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MeetingReactionOverlay.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/MeetingReactionOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(reaction) */\nimport {\n  OverlayModeTypes,\n  Reaction,\n  ReactionResources,\n  VideoGalleryLocalParticipant,\n  VideoGalleryRemoteParticipant\n} from '../types';\n/* @conditional-compile-remove(reaction) */\nimport React, { useLayoutEffect, useRef, useState } from 'react';\n/* @conditional-compile-remove(reaction) */\nimport { ParticipantVideoTileOverlay } from './VideoGallery/ParticipantVideoTileOverlay';\n/* @conditional-compile-remove(reaction) */\nimport { RemoteContentShareReactionOverlay } from './VideoGallery/RemoteContentShareReactionOverlay';\n\n/* @conditional-compile-remove(reaction) */\n/**\n * Reaction overlay component props\n *\n * Can be used with {@link VideoTile}.\n *\n * @internal\n */\nexport interface MeetingReactionOverlayProps {\n  /**\n   * Reaction rendering overlay type. i.e. single reaction rendering on grid-tile, screen share mode overlay\n   */\n  overlayMode: OverlayModeTypes;\n  /**\n   * Received reaction when overlay mode is grid-tile\n   */\n  reaction?: Reaction;\n  /**\n   * Reactions resources' url and metadata.\n   */\n  reactionResources: ReactionResources;\n  /**\n   * Local participant's reaction event that comes from participant object.\n   */\n  localParticipant?: VideoGalleryLocalParticipant;\n  /**\n   * Remote participant's reaction event.\n   */\n  remoteParticipants?: VideoGalleryRemoteParticipant[];\n}\n\n/* @conditional-compile-remove(reaction) */\n/**\n * Emoji max size\n * @internal\n */\nconst DEFAULT_EMOJI_MAX_SIZE_PX = 100;\n/* @conditional-compile-remove(reaction) */\n/**\n * Emoji min size\n * @internal\n */\nconst DEFAULT_EMOJI_MIN_SIZE_PX = 32;\n/* @conditional-compile-remove(reaction) */\n/**\n * Emoji resize scale constant\n * @internal\n */\nconst REACTION_EMOJI_RESIZE_SCALE_CONSTANT = 3;\n\n/* @conditional-compile-remove(reaction) */\n/**\n * Reaction overlay component\n *\n * Can be used with {@link VideoTile}.\n *\n * @internal\n */\nexport const MeetingReactionOverlay = (props: MeetingReactionOverlayProps): JSX.Element => {\n  const { overlayMode, reaction, reactionResources, localParticipant, remoteParticipants } = props;\n  const [emojiSizePx, setEmojiSizePx] = useState(0);\n  const [divHeight, setDivHeight] = useState(0);\n  const [divWidth, setDivWidth] = useState(0);\n  const videoTileRef = useRef<HTMLDivElement>(null);\n\n  const observer = useRef(\n    new ResizeObserver((entries): void => {\n      const domRect = entries.at(0)?.contentRect;\n      const width = domRect !== undefined ? domRect.width : 0;\n      const height = domRect !== undefined ? domRect.height : 0;\n      const reactionEmojiCalcSize = Math.min(width, height) / REACTION_EMOJI_RESIZE_SCALE_CONSTANT;\n      // we only want to set the persona size if it has changed\n      if (reactionEmojiCalcSize !== emojiSizePx) {\n        setEmojiSizePx(Math.max(Math.min(reactionEmojiCalcSize, DEFAULT_EMOJI_MAX_SIZE_PX), DEFAULT_EMOJI_MIN_SIZE_PX));\n      }\n\n      if (height !== divHeight) {\n        setDivHeight(height);\n      }\n\n      if (width !== divWidth) {\n        setDivWidth(width);\n      }\n    })\n  );\n\n  useLayoutEffect(() => {\n    if (videoTileRef.current) {\n      observer.current.observe(videoTileRef.current);\n    }\n    const currentObserver = observer.current;\n    return () => currentObserver.disconnect();\n  }, [videoTileRef]);\n\n  if (overlayMode === 'grid-tiles') {\n    return (\n      <div ref={videoTileRef} style={{ width: '100%', height: '100%' }}>\n        <ParticipantVideoTileOverlay\n          emojiSize={emojiSizePx}\n          reaction={reaction}\n          reactionResources={reactionResources}\n        />\n      </div>\n    );\n  } else if (props.overlayMode === 'screen-share' || props.overlayMode === 'content-share') {\n    return (\n      <div ref={videoTileRef} style={{ width: '100%', height: '100%' }}>\n        <RemoteContentShareReactionOverlay\n          hostDivHeight={divHeight}\n          hostDivWidth={divWidth}\n          reactionResources={reactionResources}\n          localParticipant={localParticipant}\n          remoteParticipants={remoteParticipants}\n        />\n      </div>\n    );\n  } else {\n    return <></>;\n  }\n};\n"]}