@azure/communication-react 1.16.0-beta.1 → 1.17.0-alpha-202405150013

package/dist/dist-esm/react-composites/src/composites/ChatComposite/styles/Chat.styles.js

@@ -53,7 +53,7 @@ export const chatArea = mergeStyles({
 export const chatWrapper = mergeStyles({
     height: '100%',
     width: '100%',
-    overflow: 'hidden',
+    overflow: 'visible',
     zIndex: CHAT_CONTAINER_ZINDEX
 });
 /**
@@ -84,12 +84,8 @@ export const topicNameLabelStyle = mergeStyles({
  * @private
  */
 export const messageThreadChatCompositeStyles = memoizeFunction((background) => ({
-    root: {
-        maxWidth: `${CHAT_CONTAINER_MAX_WIDTH_REM}rem`
-    },
-    chatContainer: {
-        background: background
-    }
+    root: { maxWidth: `${CHAT_CONTAINER_MAX_WIDTH_REM}rem` },
+    chatContainer: { background: background }
 }));
 /**
  * @private

package/dist/dist-esm/react-composites/src/composites/ChatComposite/styles/Chat.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chat.styles.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/ChatComposite/styles/Chat.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,eAAe,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEvE,OAAO,EAAE,4BAA4B,EAAE,MAAM,wBAAwB,CAAC;AACtE,MAAM,4BAA4B,GAAG,KAAK,CAAC;AAC3C,MAAM,6BAA6B,GAAG,EAAE,CAAC;AAEzC;;;GAGG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,CAAC;AAEvC;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,WAAW,CAAC;IAClD,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,GAAG,6BAA6B,KAAK;IAChD,QAAQ,EAAE,GAAG,4BAA4B,KAAK;CAC/C,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,WAAW,CAAC;IACvC,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,QAAQ;IAClB,sBAAsB,EAAE;QACtB,KAAK,EAAE,QAAQ;QACf,MAAM,EAAE,QAAQ;KACjB;IACD,kCAAkC,EAAE;QAClC,UAAU,EAAE,qBAAqB;QACjC,YAAY,EAAE,QAAQ;KACvB;IACD,4BAA4B,EAAE;QAC5B,YAAY,EAAE,MAAM;QACpB,UAAU,EAAE,qBAAqB;KAClC;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,WAAW,CAAC;IAClC,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,MAAM;IAChB,QAAQ,EAAE,UAAU,CAAC,wFAAwF;CAC9G,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,WAAW,CAAC;IACrC,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,qBAAqB;CAC9B,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,WAAW,CAAC;IAClD,KAAK,EAAE,MAAM;IACb,WAAW,EAAE,QAAQ;IACrB,YAAY,EAAE,QAAQ;IACtB,sCAAsC,EAAE;QACtC,WAAW,EAAE,IAAI;QACjB,YAAY,EAAE,IAAI;KACnB;IACD,YAAY,EAAE,wBAAwB;CACvC,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,WAAW,CAAC;IAC7C,QAAQ,EAAE,QAAQ;IAClB,UAAU,EAAE,QAAQ;IACpB,UAAU,EAAE,GAAG;IACf,WAAW,EAAE,UAAU;IACvB,YAAY,EAAE,UAAU;IACxB,SAAS,EAAE,QAAQ;CACpB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,gCAAgC,GAAG,eAAe,CAAC,CAAC,UAAkB,EAAuB,EAAE,CAAC,CAAC;IAC5G,IAAI,EAAE;QACJ,QAAQ,EAAE,GAAG,4BAA4B,KAAK;KAC/C;IACD,aAAa,EAAE;QACb,UAAU,EAAE,UAAU;KACvB;CACF,CAAC,CAAC,CAAC;AAEJ;;GAEG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAW;IACpD,OAAO,EAAE,cAAc;CACxB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAW;IAC5C,QAAQ,EAAE,GAAG,4BAA4B,KAAK;IAC9C,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,QAAQ;CACpB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, memoizeFunction, mergeStyles } from '@fluentui/react';\nimport { MessageThreadStyles } from '@internal/react-components';\nimport { CHAT_CONTAINER_MIN_WIDTH_REM } from '../../common/constants';\nconst CHAT_CONTAINER_MAX_WIDTH_REM = 41.25;\nconst CHAT_CONTAINER_MIN_HEIGHT_REM = 13;\n\n/**\n * @private\n * z-index to ensure that chat container has lower z-index than participant pane\n */\nexport const CHAT_CONTAINER_ZINDEX = 1;\n\n/**\n * @private\n */\nexport const chatScreenContainerStyle = mergeStyles({\n  height: '100%',\n  width: '100%',\n  minHeight: `${CHAT_CONTAINER_MIN_HEIGHT_REM}rem`,\n  minWidth: `${CHAT_CONTAINER_MIN_WIDTH_REM}rem`\n});\n\n/**\n * @private\n */\nexport const chatContainer = mergeStyles({\n  height: '100%',\n  width: '100%',\n  overflow: 'hidden',\n  '*::-webkit-scrollbar': {\n    width: '0.3rem',\n    height: '0.3rem'\n  },\n  '.scroll::-webkit-scrollbar-track': {\n    background: 'rgba(150, 150, 150)',\n    borderRadius: '0.3rem'\n  },\n  '*::-webkit-scrollbar-thumb': {\n    borderRadius: '10px',\n    background: 'rgba(150, 150, 150)'\n  }\n});\n\n/**\n * @private\n */\nexport const chatArea = mergeStyles({\n  height: '100%',\n  width: '100%',\n  overflow: 'auto',\n  position: 'relative' // Ensure that the absolute children components are positioned relative to the chat area\n});\n\n/**\n * @private\n */\nexport const chatWrapper = mergeStyles({\n  height: '100%',\n  width: '100%',\n  overflow: 'hidden',\n  zIndex: CHAT_CONTAINER_ZINDEX\n});\n\n/**\n * @private\n */\nexport const chatHeaderContainerStyle = mergeStyles({\n  width: '100%',\n  paddingLeft: '1.5rem',\n  paddingRight: '1.5rem',\n  '@media screen and (max-width: 25rem)': {\n    paddingLeft: '5%',\n    paddingRight: '5%'\n  },\n  borderBottom: '0.063rem solid #DDDDDD'\n});\n\n/**\n * @private\n */\nexport const topicNameLabelStyle = mergeStyles({\n  fontSize: '1.1rem',\n  lineHeight: '2.5rem',\n  fontWeight: 600,\n  marginRight: '0.125rem',\n  textOverflow: 'ellipsis',\n  overflowY: 'hidden'\n});\n\n/**\n * @private\n */\nexport const messageThreadChatCompositeStyles = memoizeFunction((background: string): MessageThreadStyles => ({\n  root: {\n    maxWidth: `${CHAT_CONTAINER_MAX_WIDTH_REM}rem`\n  },\n  chatContainer: {\n    background: background\n  }\n}));\n\n/**\n * @private\n */\nexport const typingIndicatorContainerStyles: IStyle = {\n  padding: '0rem 0.25rem'\n};\n\n/**\n * @private\n */\nexport const sendboxContainerStyles: IStyle = {\n  maxWidth: `${CHAT_CONTAINER_MAX_WIDTH_REM}rem`,\n  width: '100%',\n  alignSelf: 'center'\n};"]}
+{"version":3,"file":"Chat.styles.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/ChatComposite/styles/Chat.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,eAAe,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEvE,OAAO,EAAE,4BAA4B,EAAE,MAAM,wBAAwB,CAAC;AAEtE,MAAM,4BAA4B,GAAG,KAAK,CAAC;AAC3C,MAAM,6BAA6B,GAAG,EAAE,CAAC;AAEzC;;;GAGG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,CAAC;AAEvC;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,WAAW,CAAC;IAClD,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,GAAG,6BAA6B,KAAK;IAChD,QAAQ,EAAE,GAAG,4BAA4B,KAAK;CAC/C,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,WAAW,CAAC;IACvC,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,QAAQ;IAElB,sBAAsB,EAAE;QACtB,KAAK,EAAE,QAAQ;QACf,MAAM,EAAE,QAAQ;KACjB;IACD,kCAAkC,EAAE;QAClC,UAAU,EAAE,qBAAqB;QACjC,YAAY,EAAE,QAAQ;KACvB;IACD,4BAA4B,EAAE;QAC5B,YAAY,EAAE,MAAM;QACpB,UAAU,EAAE,qBAAqB;KAClC;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,WAAW,CAAC;IAClC,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,MAAM;IAChB,QAAQ,EAAE,UAAU,CAAC,wFAAwF;CAC9G,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,WAAW,CAAC;IACrC,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,SAAS;IACnB,MAAM,EAAE,qBAAqB;CAC9B,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,WAAW,CAAC;IAClD,KAAK,EAAE,MAAM;IACb,WAAW,EAAE,QAAQ;IACrB,YAAY,EAAE,QAAQ;IACtB,sCAAsC,EAAE;QACtC,WAAW,EAAE,IAAI;QACjB,YAAY,EAAE,IAAI;KACnB;IACD,YAAY,EAAE,wBAAwB;CACvC,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,WAAW,CAAC;IAC7C,QAAQ,EAAE,QAAQ;IAClB,UAAU,EAAE,QAAQ;IACpB,UAAU,EAAE,GAAG;IACf,WAAW,EAAE,UAAU;IACvB,YAAY,EAAE,UAAU;IACxB,SAAS,EAAE,QAAQ;CACpB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,gCAAgC,GAAG,eAAe,CAC7D,CAAC,UAAkB,EAAuB,EAAE,CAAC,CAAC;IAC5C,IAAI,EAAE,EAAE,QAAQ,EAAE,GAAG,4BAA4B,KAAK,EAAE;IACxD,aAAa,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE;CAC1C,CAAC,CACH,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAW;IACpD,OAAO,EAAE,cAAc;CACxB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAW;IAC5C,QAAQ,EAAE,GAAG,4BAA4B,KAAK;IAC9C,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,QAAQ;CACpB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, memoizeFunction, mergeStyles } from '@fluentui/react';\nimport { MessageThreadStyles } from '@internal/react-components';\nimport { CHAT_CONTAINER_MIN_WIDTH_REM } from '../../common/constants';\n\nconst CHAT_CONTAINER_MAX_WIDTH_REM = 41.25;\nconst CHAT_CONTAINER_MIN_HEIGHT_REM = 13;\n\n/**\n * @private\n * z-index to ensure that chat container has lower z-index than participant pane\n */\nexport const CHAT_CONTAINER_ZINDEX = 1;\n\n/**\n * @private\n */\nexport const chatScreenContainerStyle = mergeStyles({\n  height: '100%',\n  width: '100%',\n  minHeight: `${CHAT_CONTAINER_MIN_HEIGHT_REM}rem`,\n  minWidth: `${CHAT_CONTAINER_MIN_WIDTH_REM}rem`\n});\n\n/**\n * @private\n */\nexport const chatContainer = mergeStyles({\n  height: '100%',\n  width: '100%',\n  overflow: 'hidden',\n\n  '*::-webkit-scrollbar': {\n    width: '0.3rem',\n    height: '0.3rem'\n  },\n  '.scroll::-webkit-scrollbar-track': {\n    background: 'rgba(150, 150, 150)',\n    borderRadius: '0.3rem'\n  },\n  '*::-webkit-scrollbar-thumb': {\n    borderRadius: '10px',\n    background: 'rgba(150, 150, 150)'\n  }\n});\n\n/**\n * @private\n */\nexport const chatArea = mergeStyles({\n  height: '100%',\n  width: '100%',\n  overflow: 'auto',\n  position: 'relative' // Ensure that the absolute children components are positioned relative to the chat area\n});\n\n/**\n * @private\n */\nexport const chatWrapper = mergeStyles({\n  height: '100%',\n  width: '100%',\n  overflow: 'visible',\n  zIndex: CHAT_CONTAINER_ZINDEX\n});\n\n/**\n * @private\n */\nexport const chatHeaderContainerStyle = mergeStyles({\n  width: '100%',\n  paddingLeft: '1.5rem',\n  paddingRight: '1.5rem',\n  '@media screen and (max-width: 25rem)': {\n    paddingLeft: '5%',\n    paddingRight: '5%'\n  },\n  borderBottom: '0.063rem solid #DDDDDD'\n});\n\n/**\n * @private\n */\nexport const topicNameLabelStyle = mergeStyles({\n  fontSize: '1.1rem',\n  lineHeight: '2.5rem',\n  fontWeight: 600,\n  marginRight: '0.125rem',\n  textOverflow: 'ellipsis',\n  overflowY: 'hidden'\n});\n\n/**\n * @private\n */\nexport const messageThreadChatCompositeStyles = memoizeFunction(\n  (background: string): MessageThreadStyles => ({\n    root: { maxWidth: `${CHAT_CONTAINER_MAX_WIDTH_REM}rem` },\n    chatContainer: { background: background }\n  })\n);\n\n/**\n * @private\n */\nexport const typingIndicatorContainerStyles: IStyle = {\n  padding: '0rem 0.25rem'\n};\n\n/**\n * @private\n */\nexport const sendboxContainerStyles: IStyle = {\n  maxWidth: `${CHAT_CONTAINER_MAX_WIDTH_REM}rem`,\n  width: '100%',\n  alignSelf: 'center'\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/common/AddPeopleButton.js

@@ -2,13 +2,15 @@
 // Licensed under the MIT License.
 import { concatStyleSets, DefaultButton, PrimaryButton, Stack, useTheme } from '@fluentui/react';
 import copy from 'copy-to-clipboard';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { CallWithChatCompositeIcon } from './icons';
 import { peoplePaneContainerTokens } from './styles/ParticipantContainer.styles';
 import { copyLinkButtonContainerStyles, copyLinkButtonStackStyles, copyLinkButtonStyles, linkIconStyles, themedCopyLinkButtonStyles } from './styles/PeoplePaneContent.styles';
 /* @conditional-compile-remove(PSTN-calls) */
 import { AddPeopleDropdown } from './AddPeopleDropdown';
 import { Announcer } from "../../../../react-components/src";
+import { useId } from '@fluentui/react-hooks';
+import { CalloutWithIcon } from './CalloutWithIcon';
 /** @private */
 export const AddPeopleButton = (props) => {
     const { inviteLink, mobileView, strings, participantList } = props;
@@ -28,40 +30,48 @@ export const AddPeopleButton = (props) => {
             setCopyInviteLinkAnnouncerStrings('');
         }, 3000);
     }, [strings.copyInviteLinkActionedAriaLabel]);
+    const dateInviteLinkCopied = useRef(undefined);
+    const [inviteLinkCopiedRecently, setInviteLinkCopiedRecently] = useState(false);
+    const onCopyInviteLink = useCallback(() => {
+        setInviteLinkCopiedRecently(true);
+        dateInviteLinkCopied.current = Date.now();
+        setTimeout(() => {
+            if (dateInviteLinkCopied.current && Date.now() - dateInviteLinkCopied.current >= 2000) {
+                setInviteLinkCopiedRecently(false);
+            }
+        }, 2000);
+    }, [setInviteLinkCopiedRecently, dateInviteLinkCopied]);
+    const calloutButtonId = useId('callout-button');
     /* @conditional-compile-remove(PSTN-calls) */
     if (mobileView) {
-        return React.createElement(AddPeopleDropdown, { strings: strings, mobileView: mobileView, inviteLink: inviteLink, onAddParticipant: props.onAddParticipant, alternateCallerId: props.alternateCallerId });
+        return (React.createElement(AddPeopleDropdown, { strings: strings, mobileView: mobileView, inviteLink: inviteLink, onAddParticipant: props.onAddParticipant, alternateCallerId: props.alternateCallerId, onCopyInviteLink: onCopyInviteLink, inviteLinkCopiedRecently: inviteLinkCopiedRecently }));
     }
     else {
-        return React.createElement(Stack, { tokens: peoplePaneContainerTokens, "data-ui-id": "people-pane-content", verticalFill: true },
-            React.createElement(AddPeopleDropdown, { strings: strings, mobileView: mobileView, inviteLink: inviteLink, onAddParticipant: props.onAddParticipant, alternateCallerId: props.alternateCallerId }),
-            React.createElement(Stack.Item, { grow: true, styles: {
-                    root: {
-                        overflowY: 'hidden'
-                    }
-                } }, participantList));
+        return (React.createElement(Stack, { tokens: peoplePaneContainerTokens, "data-ui-id": "people-pane-content", verticalFill: true },
+            React.createElement(AddPeopleDropdown, { strings: strings, mobileView: mobileView, inviteLink: inviteLink, onAddParticipant: props.onAddParticipant, alternateCallerId: props.alternateCallerId, onCopyInviteLink: onCopyInviteLink, inviteLinkCopiedRecently: inviteLinkCopiedRecently }),
+            React.createElement(Stack.Item, { grow: true, styles: { root: { overflowY: 'hidden' } } }, participantList)));
     }
     if (mobileView) {
-        return React.createElement(Stack, null, inviteLink && React.createElement(Stack.Item, { styles: copyLinkButtonContainerStyles },
+        return (React.createElement(Stack, null, inviteLink && (React.createElement(Stack.Item, { styles: copyLinkButtonContainerStyles },
             React.createElement(Announcer, { announcementString: copyInviteLinkAnnouncerStrings, ariaLive: 'polite' }),
-            React.createElement(PrimaryButton, { onClick: () => {
+            React.createElement(PrimaryButton, { id: calloutButtonId, onClick: () => {
                     copy(inviteLink !== null && inviteLink !== void 0 ? inviteLink : '');
                     toggleAnnouncerString();
-                }, styles: copyLinkButtonStylesThemed, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "Link", style: linkIconStyles }), text: strings.copyInviteLinkButtonLabel })));
+                    onCopyInviteLink();
+                }, styles: copyLinkButtonStylesThemed, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "Link", style: linkIconStyles }), text: strings.copyInviteLinkButtonLabel }),
+            inviteLinkCopiedRecently && (React.createElement(CalloutWithIcon, { targetId: calloutButtonId, text: strings.copyInviteLinkButtonActionedLabel, doNotLayer: true }))))));
     }
     else {
-        return React.createElement(Stack, { tokens: peoplePaneContainerTokens, "data-ui-id": "people-pane-content", verticalFill: true },
-            inviteLink && React.createElement(Stack, { styles: copyLinkButtonStackStyles },
+        return (React.createElement(Stack, { tokens: peoplePaneContainerTokens, "data-ui-id": "people-pane-content", verticalFill: true },
+            inviteLink && (React.createElement(Stack, { styles: copyLinkButtonStackStyles },
                 React.createElement(Announcer, { announcementString: copyInviteLinkAnnouncerStrings, ariaLive: 'polite' }),
-                React.createElement(DefaultButton, { text: strings.copyInviteLinkButtonLabel, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "Link", style: linkIconStyles }), onClick: () => {
+                React.createElement(DefaultButton, { id: calloutButtonId, text: strings.copyInviteLinkButtonLabel, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "Link", style: linkIconStyles }), onClick: () => {
                         copy(inviteLink !== null && inviteLink !== void 0 ? inviteLink : '');
                         toggleAnnouncerString();
-                    }, styles: copyLinkButtonStylesThemed })),
-            React.createElement(Stack.Item, { grow: true, styles: {
-                    root: {
-                        overflowY: 'hidden'
-                    }
-                } }, participantList));
+                        onCopyInviteLink();
+                    }, styles: copyLinkButtonStylesThemed }),
+                inviteLinkCopiedRecently && (React.createElement(CalloutWithIcon, { targetId: calloutButtonId, text: strings.copyInviteLinkButtonActionedLabel })))),
+            React.createElement(Stack.Item, { grow: true, styles: { root: { overflowY: 'hidden' } } }, participantList)));
     }
 };
 //# sourceMappingURL=AddPeopleButton.js.map

package/dist/dist-esm/react-composites/src/composites/common/AddPeopleButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddPeopleButton.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/AddPeopleButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets, DefaultButton, IButtonStyles, PrimaryButton, Stack, useTheme } from '@fluentui/react';\nimport copy from 'copy-to-clipboard';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { CallWithChatCompositeStrings } from '../../index-public';\n/* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\nimport { CallCompositeStrings } from '../../index-public';\nimport { CallWithChatCompositeIcon } from './icons';\nimport { peoplePaneContainerTokens } from './styles/ParticipantContainer.styles';\nimport { copyLinkButtonContainerStyles, copyLinkButtonStackStyles, copyLinkButtonStyles, linkIconStyles, themedCopyLinkButtonStyles } from './styles/PeoplePaneContent.styles';\n/* @conditional-compile-remove(PSTN-calls) */\nimport { AddPeopleDropdown } from './AddPeopleDropdown';\n/* @conditional-compile-remove(PSTN-calls) */\nimport { PhoneNumberIdentifier } from '@azure/communication-common';\n/* @conditional-compile-remove(PSTN-calls) */\nimport { AddPhoneNumberOptions } from '@azure/communication-calling';\nimport { Announcer } from '@internal/react-components';\n\n/** @private */\nexport interface AddPeopleButtonProps {\n  inviteLink?: string;\n  mobileView?: boolean;\n  participantList?: JSX.Element;\n  strings: CallWithChatCompositeStrings | /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */CallCompositeStrings;\n  /* @conditional-compile-remove(PSTN-calls) */\n  onAddParticipant: (participant: PhoneNumberIdentifier, options?: AddPhoneNumberOptions) => void;\n  alternateCallerId?: string;\n}\n\n/** @private */\nexport const AddPeopleButton = (props: AddPeopleButtonProps): JSX.Element => {\n  const {\n    inviteLink,\n    mobileView,\n    strings,\n    participantList\n  } = props;\n  const theme = useTheme();\n  const [copyInviteLinkAnnouncerStrings, setCopyInviteLinkAnnouncerStrings] = useState<string>('');\n  const copyLinkButtonStylesThemed = useMemo((): IButtonStyles => concatStyleSets(copyLinkButtonStyles, themedCopyLinkButtonStyles(mobileView, theme)), [mobileView, theme]);\n  /**\n   * sets the announcement string for when the link is copied.\n   */\n  const toggleAnnouncerString = useCallback(() => {\n    setCopyInviteLinkAnnouncerStrings(strings.copyInviteLinkActionedAriaLabel);\n    /**\n     * Clears the announcer string after the user clicks the\n     * copyInviteLink button allowing it to be re-announced.\n     */\n    setTimeout(() => {\n      setCopyInviteLinkAnnouncerStrings('');\n    }, 3000);\n  }, [strings.copyInviteLinkActionedAriaLabel]);\n\n  /* @conditional-compile-remove(PSTN-calls) */\n  if (mobileView) {\n    return <AddPeopleDropdown strings={strings} mobileView={mobileView} inviteLink={inviteLink} onAddParticipant={props.onAddParticipant} alternateCallerId={props.alternateCallerId} />;\n  } else {\n    return <Stack tokens={peoplePaneContainerTokens} data-ui-id=\"people-pane-content\" verticalFill>\n        <AddPeopleDropdown strings={strings} mobileView={mobileView} inviteLink={inviteLink} onAddParticipant={props.onAddParticipant} alternateCallerId={props.alternateCallerId} />\n        <Stack.Item grow styles={{\n        root: {\n          overflowY: 'hidden'\n        }\n      }}>\n          {participantList}\n        </Stack.Item>\n      </Stack>;\n  }\n  if (mobileView) {\n    return <Stack>\n        {inviteLink && <Stack.Item styles={copyLinkButtonContainerStyles}>\n            <Announcer announcementString={copyInviteLinkAnnouncerStrings} ariaLive={'polite'} />\n            <PrimaryButton onClick={() => {\n          copy(inviteLink ?? '');\n          toggleAnnouncerString();\n        }} styles={copyLinkButtonStylesThemed} onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"Link\" style={linkIconStyles} />} text={strings.copyInviteLinkButtonLabel} />\n          </Stack.Item>}\n      </Stack>;\n  } else {\n    return <Stack tokens={peoplePaneContainerTokens} data-ui-id=\"people-pane-content\" verticalFill>\n        {inviteLink && <Stack styles={copyLinkButtonStackStyles}>\n            <Announcer announcementString={copyInviteLinkAnnouncerStrings} ariaLive={'polite'} />\n            <DefaultButton text={strings.copyInviteLinkButtonLabel} onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"Link\" style={linkIconStyles} />} onClick={() => {\n          copy(inviteLink ?? '');\n          toggleAnnouncerString();\n        }} styles={copyLinkButtonStylesThemed} />\n          </Stack>}\n        <Stack.Item grow styles={{\n        root: {\n          overflowY: 'hidden'\n        }\n      }}>\n          {participantList}\n        </Stack.Item>\n      </Stack>;\n  }\n};"]}
+{"version":3,"file":"AddPeopleButton.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/AddPeopleButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets, DefaultButton, IButtonStyles, PrimaryButton, Stack, useTheme } from '@fluentui/react';\nimport copy from 'copy-to-clipboard';\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { CallWithChatCompositeStrings } from '../../index-public';\n/* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\nimport { CallCompositeStrings } from '../../index-public';\nimport { CallWithChatCompositeIcon } from './icons';\nimport { peoplePaneContainerTokens } from './styles/ParticipantContainer.styles';\nimport {\n  copyLinkButtonContainerStyles,\n  copyLinkButtonStackStyles,\n  copyLinkButtonStyles,\n  linkIconStyles,\n  themedCopyLinkButtonStyles\n} from './styles/PeoplePaneContent.styles';\n/* @conditional-compile-remove(PSTN-calls) */\nimport { AddPeopleDropdown } from './AddPeopleDropdown';\n/* @conditional-compile-remove(PSTN-calls) */\nimport { PhoneNumberIdentifier } from '@azure/communication-common';\n/* @conditional-compile-remove(PSTN-calls) */\nimport { AddPhoneNumberOptions } from '@azure/communication-calling';\nimport { Announcer } from '@internal/react-components';\nimport { useId } from '@fluentui/react-hooks';\nimport { CalloutWithIcon } from './CalloutWithIcon';\n\n/** @private */\nexport interface AddPeopleButtonProps {\n  inviteLink?: string;\n  mobileView?: boolean;\n  participantList?: JSX.Element;\n  strings:\n    | CallWithChatCompositeStrings\n    | /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */ CallCompositeStrings;\n  /* @conditional-compile-remove(PSTN-calls) */\n  onAddParticipant: (participant: PhoneNumberIdentifier, options?: AddPhoneNumberOptions) => void;\n  alternateCallerId?: string;\n}\n\n/** @private */\nexport const AddPeopleButton = (props: AddPeopleButtonProps): JSX.Element => {\n  const { inviteLink, mobileView, strings, participantList } = props;\n\n  const theme = useTheme();\n\n  const [copyInviteLinkAnnouncerStrings, setCopyInviteLinkAnnouncerStrings] = useState<string>('');\n\n  const copyLinkButtonStylesThemed = useMemo(\n    (): IButtonStyles => concatStyleSets(copyLinkButtonStyles, themedCopyLinkButtonStyles(mobileView, theme)),\n    [mobileView, theme]\n  );\n  /**\n   * sets the announcement string for when the link is copied.\n   */\n  const toggleAnnouncerString = useCallback(() => {\n    setCopyInviteLinkAnnouncerStrings(strings.copyInviteLinkActionedAriaLabel);\n    /**\n     * Clears the announcer string after the user clicks the\n     * copyInviteLink button allowing it to be re-announced.\n     */\n    setTimeout(() => {\n      setCopyInviteLinkAnnouncerStrings('');\n    }, 3000);\n  }, [strings.copyInviteLinkActionedAriaLabel]);\n\n  const dateInviteLinkCopied = useRef<number | undefined>(undefined);\n  const [inviteLinkCopiedRecently, setInviteLinkCopiedRecently] = useState(false);\n  const onCopyInviteLink = useCallback(() => {\n    setInviteLinkCopiedRecently(true);\n    dateInviteLinkCopied.current = Date.now();\n    setTimeout(() => {\n      if (dateInviteLinkCopied.current && Date.now() - dateInviteLinkCopied.current >= 2000) {\n        setInviteLinkCopiedRecently(false);\n      }\n    }, 2000);\n  }, [setInviteLinkCopiedRecently, dateInviteLinkCopied]);\n\n  const calloutButtonId = useId('callout-button');\n\n  /* @conditional-compile-remove(PSTN-calls) */\n  if (mobileView) {\n    return (\n      <AddPeopleDropdown\n        strings={strings}\n        mobileView={mobileView}\n        inviteLink={inviteLink}\n        onAddParticipant={props.onAddParticipant}\n        alternateCallerId={props.alternateCallerId}\n        onCopyInviteLink={onCopyInviteLink}\n        inviteLinkCopiedRecently={inviteLinkCopiedRecently}\n      />\n    );\n  } else {\n    return (\n      <Stack tokens={peoplePaneContainerTokens} data-ui-id=\"people-pane-content\" verticalFill>\n        <AddPeopleDropdown\n          strings={strings}\n          mobileView={mobileView}\n          inviteLink={inviteLink}\n          onAddParticipant={props.onAddParticipant}\n          alternateCallerId={props.alternateCallerId}\n          onCopyInviteLink={onCopyInviteLink}\n          inviteLinkCopiedRecently={inviteLinkCopiedRecently}\n        />\n        <Stack.Item grow styles={{ root: { overflowY: 'hidden' } }}>\n          {participantList}\n        </Stack.Item>\n      </Stack>\n    );\n  }\n\n  if (mobileView) {\n    return (\n      <Stack>\n        {inviteLink && (\n          <Stack.Item styles={copyLinkButtonContainerStyles}>\n            <Announcer announcementString={copyInviteLinkAnnouncerStrings} ariaLive={'polite'} />\n            <PrimaryButton\n              id={calloutButtonId}\n              onClick={() => {\n                copy(inviteLink ?? '');\n                toggleAnnouncerString();\n                onCopyInviteLink();\n              }}\n              styles={copyLinkButtonStylesThemed}\n              onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"Link\" style={linkIconStyles} />}\n              text={strings.copyInviteLinkButtonLabel}\n            />\n            {inviteLinkCopiedRecently && (\n              <CalloutWithIcon\n                targetId={calloutButtonId}\n                text={strings.copyInviteLinkButtonActionedLabel}\n                doNotLayer={true}\n              />\n            )}\n          </Stack.Item>\n        )}\n      </Stack>\n    );\n  } else {\n    return (\n      <Stack tokens={peoplePaneContainerTokens} data-ui-id=\"people-pane-content\" verticalFill>\n        {inviteLink && (\n          <Stack styles={copyLinkButtonStackStyles}>\n            <Announcer announcementString={copyInviteLinkAnnouncerStrings} ariaLive={'polite'} />\n            <DefaultButton\n              id={calloutButtonId}\n              text={strings.copyInviteLinkButtonLabel}\n              onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"Link\" style={linkIconStyles} />}\n              onClick={() => {\n                copy(inviteLink ?? '');\n                toggleAnnouncerString();\n                onCopyInviteLink();\n              }}\n              styles={copyLinkButtonStylesThemed}\n            />\n            {inviteLinkCopiedRecently && (\n              <CalloutWithIcon targetId={calloutButtonId} text={strings.copyInviteLinkButtonActionedLabel} />\n            )}\n          </Stack>\n        )}\n        <Stack.Item grow styles={{ root: { overflowY: 'hidden' } }}>\n          {participantList}\n        </Stack.Item>\n      </Stack>\n    );\n  }\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/common/AddPeopleDropdown.d.ts

@@ -5,6 +5,7 @@ import { AddPhoneNumberOptions } from '@azure/communication-calling';
 /** @private */
 export interface AddPeopleDropdownStrings extends CallingDialpadStrings {
     copyInviteLinkButtonLabel: string;
+    copyInviteLinkButtonActionedLabel: string;
     openDialpadButtonLabel: string;
     peoplePaneAddPeopleButtonLabel: string;
     copyInviteLinkActionedAriaLabel: string;
@@ -16,6 +17,8 @@ export interface AddPeopleDropdownProps {
     strings: AddPeopleDropdownStrings;
     onAddParticipant: (participant: PhoneNumberIdentifier, options?: AddPhoneNumberOptions) => void;
     alternateCallerId?: string;
+    onCopyInviteLink?: () => void;
+    inviteLinkCopiedRecently?: boolean;
 }
 /** @private */
 export declare const AddPeopleDropdown: (props: AddPeopleDropdownProps) => JSX.Element;

package/dist/dist-esm/react-composites/src/composites/common/AddPeopleDropdown.js

@@ -13,10 +13,12 @@ import { _preventDismissOnEvent as preventDismissOnEvent } from "../../../../acs
 import { copyLinkButtonContainerStyles, copyLinkButtonStackStyles } from './styles/PeoplePaneContent.styles';
 import { drawerContainerStyles } from '../CallComposite/styles/CallComposite.styles';
 import { convertContextualMenuItemToDrawerMenuItem } from './ConvertContextualMenuItemToDrawerMenuItem';
+import { useId } from '@fluentui/react-hooks';
+import { CalloutWithIcon } from './CalloutWithIcon';
 /** @private */
 export const AddPeopleDropdown = (props) => {
     const theme = useTheme();
-    const { inviteLink, strings, mobileView, onAddParticipant, alternateCallerId } = props;
+    const { inviteLink, strings, mobileView, onAddParticipant, alternateCallerId, onCopyInviteLink, inviteLinkCopiedRecently } = props;
     const [showDialpad, setShowDialpad] = useState(false);
     const [announcerStrings, setAnnouncerStrings] = useState();
     const menuStyleThemed = useMemo(() => themedMenuStyle(theme), [theme]);
@@ -38,16 +40,12 @@ export const AddPeopleDropdown = (props) => {
             menuProps.items.push({
                 key: 'InviteLinkKey',
                 text: strings.copyInviteLinkButtonLabel,
-                itemProps: {
-                    styles: copyLinkButtonStylesThemed
-                },
-                iconProps: {
-                    iconName: 'Link',
-                    style: iconStyles
-                },
+                itemProps: { styles: copyLinkButtonStylesThemed },
+                iconProps: { iconName: 'Link', style: iconStyles },
                 onClick: () => {
                     setAnnouncerStrings(strings.copyInviteLinkActionedAriaLabel);
                     copy(inviteLink);
+                    onCopyInviteLink === null || onCopyInviteLink === void 0 ? void 0 : onCopyInviteLink();
                 }
             });
         }
@@ -56,19 +54,23 @@ export const AddPeopleDropdown = (props) => {
             menuProps.items.push({
                 key: 'DialpadKey',
                 text: strings.openDialpadButtonLabel,
-                itemProps: {
-                    styles: copyLinkButtonStylesThemed
-                },
-                iconProps: {
-                    iconName: PeoplePaneOpenDialpadIconNameTrampoline(),
-                    style: iconStyles
-                },
+                itemProps: { styles: copyLinkButtonStylesThemed },
+                iconProps: { iconName: PeoplePaneOpenDialpadIconNameTrampoline(), style: iconStyles },
                 onClick: () => setShowDialpad(true),
                 'data-ui-id': 'call-dial-phone-number-button'
             });
         }
         return menuProps;
-    }, [menuStyleThemed, inviteLink, alternateCallerId, strings.copyInviteLinkButtonLabel, strings.copyInviteLinkActionedAriaLabel, strings.openDialpadButtonLabel, copyLinkButtonStylesThemed]);
+    }, [
+        menuStyleThemed,
+        inviteLink,
+        alternateCallerId,
+        strings.copyInviteLinkButtonLabel,
+        strings.copyInviteLinkActionedAriaLabel,
+        strings.openDialpadButtonLabel,
+        copyLinkButtonStylesThemed,
+        onCopyInviteLink
+    ]);
     const onDismissDialpad = () => {
         setShowDialpad(false);
     };
@@ -79,20 +81,23 @@ export const AddPeopleDropdown = (props) => {
             setAddPeopleDrawerMenuItems(drawerMenuItems);
         };
     }, [defaultMenuProps, setAddPeopleDrawerMenuItems]);
+    const calloutButtonId = useId('callout-button');
     if (mobileView) {
-        return React.createElement(Stack, null,
+        return (React.createElement(Stack, null,
             React.createElement(Announcer, { ariaLive: 'assertive', announcementString: announcerStrings }),
-            defaultMenuProps.items.length > 0 && React.createElement(Stack.Item, { styles: copyLinkButtonContainerStyles },
-                React.createElement(PrimaryButton, { onClick: setDrawerMenuItemsForAddPeople, styles: copyLinkButtonStylesThemed, onRenderIcon: () => PeoplePaneAddPersonIconTrampoline(), text: strings.peoplePaneAddPeopleButtonLabel, "data-ui-id": "call-add-people-button" })),
-            addPeopleDrawerMenuItems.length > 0 && React.createElement(Stack, { styles: drawerContainerStyles(), "data-ui-id": "call-add-people-dropdown" },
-                React.createElement(_DrawerMenu, { disableMaxHeight: true, onLightDismiss: () => setAddPeopleDrawerMenuItems([]), items: addPeopleDrawerMenuItems })),
-            alternateCallerId && React.createElement(CallingDialpad, { isMobile: true, strings: strings, showDialpad: showDialpad, onDismissDialpad: onDismissDialpad, onAddParticipant: onAddParticipant, alternateCallerId: alternateCallerId }));
+            defaultMenuProps.items.length > 0 && (React.createElement(Stack.Item, { styles: copyLinkButtonContainerStyles },
+                React.createElement(PrimaryButton, { id: calloutButtonId, onClick: setDrawerMenuItemsForAddPeople, styles: copyLinkButtonStylesThemed, onRenderIcon: () => PeoplePaneAddPersonIconTrampoline(), text: strings.peoplePaneAddPeopleButtonLabel, "data-ui-id": "call-add-people-button" }),
+                inviteLinkCopiedRecently && (React.createElement(CalloutWithIcon, { targetId: calloutButtonId, text: strings.copyInviteLinkButtonActionedLabel, doNotLayer: true })))),
+            addPeopleDrawerMenuItems.length > 0 && (React.createElement(Stack, { styles: drawerContainerStyles(), "data-ui-id": "call-add-people-dropdown" },
+                React.createElement(_DrawerMenu, { disableMaxHeight: true, onLightDismiss: () => setAddPeopleDrawerMenuItems([]), items: addPeopleDrawerMenuItems }))),
+            alternateCallerId && (React.createElement(CallingDialpad, { isMobile: true, strings: strings, showDialpad: showDialpad, onDismissDialpad: onDismissDialpad, onAddParticipant: onAddParticipant, alternateCallerId: alternateCallerId }))));
     }
-    return React.createElement(React.Fragment, null, React.createElement(Stack, null,
+    return (React.createElement(React.Fragment, null, React.createElement(Stack, null,
         React.createElement(Announcer, { ariaLive: 'assertive', announcementString: announcerStrings }),
-        alternateCallerId && React.createElement(CallingDialpad, { isMobile: false, strings: strings, showDialpad: showDialpad, onDismissDialpad: onDismissDialpad, onAddParticipant: onAddParticipant, alternateCallerId: alternateCallerId }),
-        defaultMenuProps.items.length > 0 && React.createElement(Stack, { styles: copyLinkButtonStackStyles },
-            React.createElement(DefaultButton, { onRenderIcon: () => PeoplePaneAddPersonIconTrampoline(), text: strings.peoplePaneAddPeopleButtonLabel, menuProps: defaultMenuProps, styles: copyLinkButtonStylesThemed, "data-ui-id": "call-add-people-button" }))));
+        alternateCallerId && (React.createElement(CallingDialpad, { isMobile: false, strings: strings, showDialpad: showDialpad, onDismissDialpad: onDismissDialpad, onAddParticipant: onAddParticipant, alternateCallerId: alternateCallerId })),
+        defaultMenuProps.items.length > 0 && (React.createElement(Stack, { styles: copyLinkButtonStackStyles },
+            React.createElement(DefaultButton, { id: calloutButtonId, onRenderIcon: () => PeoplePaneAddPersonIconTrampoline(), text: strings.peoplePaneAddPeopleButtonLabel, menuProps: defaultMenuProps, styles: copyLinkButtonStylesThemed, "data-ui-id": "call-add-people-button" }),
+            inviteLinkCopiedRecently && (React.createElement(CalloutWithIcon, { targetId: calloutButtonId, text: strings.copyInviteLinkButtonActionedLabel })))))));
 };
 function PeoplePaneOpenDialpadIconNameTrampoline() {
     /* @conditional-compile-remove(PSTN-calls) */

package/dist/dist-esm/react-composites/src/composites/common/AddPeopleDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddPeopleDropdown.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/AddPeopleDropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { DefaultButton, IContextualMenuItem, IContextualMenuProps, PrimaryButton, Stack, useTheme } from '@fluentui/react';\nimport { _DrawerMenu, _DrawerMenuItemProps, Announcer } from '@internal/react-components';\nimport copy from 'copy-to-clipboard';\nimport { useMemo, useState } from 'react';\n/* @conditional-compile-remove(PSTN-calls) */\nimport { CallWithChatCompositeIcon } from './icons';\nimport { iconStyles, themedCopyLinkButtonStyles, themedMenuStyle } from './AddPeopleDropdown.styles';\nimport { CallingDialpad } from './CallingDialpad';\nimport { CallingDialpadStrings } from './CallingDialpad';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\nimport { copyLinkButtonContainerStyles, copyLinkButtonStackStyles } from './styles/PeoplePaneContent.styles';\nimport { drawerContainerStyles } from '../CallComposite/styles/CallComposite.styles';\nimport { convertContextualMenuItemToDrawerMenuItem } from './ConvertContextualMenuItemToDrawerMenuItem';\nimport { PhoneNumberIdentifier } from '@azure/communication-common';\nimport { AddPhoneNumberOptions } from '@azure/communication-calling';\n\n/** @private */\nexport interface AddPeopleDropdownStrings extends CallingDialpadStrings {\n  copyInviteLinkButtonLabel: string;\n  openDialpadButtonLabel: string;\n  peoplePaneAddPeopleButtonLabel: string;\n  copyInviteLinkActionedAriaLabel: string;\n}\n\n/** @private */\nexport interface AddPeopleDropdownProps {\n  inviteLink?: string;\n  mobileView?: boolean;\n  strings: AddPeopleDropdownStrings;\n  onAddParticipant: (participant: PhoneNumberIdentifier, options?: AddPhoneNumberOptions) => void;\n  alternateCallerId?: string;\n}\n\n/** @private */\nexport const AddPeopleDropdown = (props: AddPeopleDropdownProps): JSX.Element => {\n  const theme = useTheme();\n  const {\n    inviteLink,\n    strings,\n    mobileView,\n    onAddParticipant,\n    alternateCallerId\n  } = props;\n  const [showDialpad, setShowDialpad] = useState(false);\n  const [announcerStrings, setAnnouncerStrings] = useState<string>();\n  const menuStyleThemed = useMemo(() => themedMenuStyle(theme), [theme]);\n  const copyLinkButtonStylesThemed = useMemo(() => themedCopyLinkButtonStyles(theme, mobileView), [mobileView, theme]);\n  const defaultMenuProps = useMemo((): IContextualMenuProps => {\n    const menuProps: IContextualMenuProps = {\n      styles: menuStyleThemed,\n      items: [],\n      useTargetWidth: true,\n      calloutProps: {\n        preventDismissOnEvent\n      },\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onMenuOpened(contextualMenu?) {\n        setAnnouncerStrings(undefined);\n      }\n    };\n    if (inviteLink) {\n      menuProps.items.push({\n        key: 'InviteLinkKey',\n        text: strings.copyInviteLinkButtonLabel,\n        itemProps: {\n          styles: copyLinkButtonStylesThemed\n        },\n        iconProps: {\n          iconName: 'Link',\n          style: iconStyles\n        },\n        onClick: () => {\n          setAnnouncerStrings(strings.copyInviteLinkActionedAriaLabel);\n          copy(inviteLink);\n        }\n      });\n    }\n\n    // only show the dialpad option when alternateCallerId is set\n    if (alternateCallerId) {\n      menuProps.items.push({\n        key: 'DialpadKey',\n        text: strings.openDialpadButtonLabel,\n        itemProps: {\n          styles: copyLinkButtonStylesThemed\n        },\n        iconProps: {\n          iconName: PeoplePaneOpenDialpadIconNameTrampoline(),\n          style: iconStyles\n        },\n        onClick: () => setShowDialpad(true),\n        'data-ui-id': 'call-dial-phone-number-button'\n      });\n    }\n    return menuProps;\n  }, [menuStyleThemed, inviteLink, alternateCallerId, strings.copyInviteLinkButtonLabel, strings.copyInviteLinkActionedAriaLabel, strings.openDialpadButtonLabel, copyLinkButtonStylesThemed]);\n  const onDismissDialpad = (): void => {\n    setShowDialpad(false);\n  };\n  const [addPeopleDrawerMenuItems, setAddPeopleDrawerMenuItems] = useState<_DrawerMenuItemProps[]>([]);\n  const setDrawerMenuItemsForAddPeople: () => void = useMemo(() => {\n    return () => {\n      const drawerMenuItems = defaultMenuProps.items.map((contextualMenu: IContextualMenuItem) => convertContextualMenuItemToDrawerMenuItem(contextualMenu, () => setAddPeopleDrawerMenuItems([])));\n      setAddPeopleDrawerMenuItems(drawerMenuItems);\n    };\n  }, [defaultMenuProps, setAddPeopleDrawerMenuItems]);\n  if (mobileView) {\n    return <Stack>\n        <Announcer ariaLive={'assertive'} announcementString={announcerStrings} />\n        {defaultMenuProps.items.length > 0 && <Stack.Item styles={copyLinkButtonContainerStyles}>\n            <PrimaryButton onClick={setDrawerMenuItemsForAddPeople} styles={copyLinkButtonStylesThemed} onRenderIcon={() => PeoplePaneAddPersonIconTrampoline()} text={strings.peoplePaneAddPeopleButtonLabel} data-ui-id=\"call-add-people-button\" />\n          </Stack.Item>}\n\n        {addPeopleDrawerMenuItems.length > 0 && <Stack styles={drawerContainerStyles()} data-ui-id=\"call-add-people-dropdown\">\n            <_DrawerMenu disableMaxHeight={true} onLightDismiss={() => setAddPeopleDrawerMenuItems([])} items={addPeopleDrawerMenuItems} />\n          </Stack>}\n        {alternateCallerId && <CallingDialpad isMobile={true} strings={strings} showDialpad={showDialpad} onDismissDialpad={onDismissDialpad} onAddParticipant={onAddParticipant} alternateCallerId={alternateCallerId} />}\n      </Stack>;\n  }\n  return <>\n      {<Stack>\n          <Announcer ariaLive={'assertive'} announcementString={announcerStrings} />\n          {alternateCallerId && <CallingDialpad isMobile={false} strings={strings} showDialpad={showDialpad} onDismissDialpad={onDismissDialpad} onAddParticipant={onAddParticipant} alternateCallerId={alternateCallerId} />}\n\n          {defaultMenuProps.items.length > 0 && <Stack styles={copyLinkButtonStackStyles}>\n              <DefaultButton onRenderIcon={() => PeoplePaneAddPersonIconTrampoline()} text={strings.peoplePaneAddPeopleButtonLabel} menuProps={defaultMenuProps} styles={copyLinkButtonStylesThemed} data-ui-id=\"call-add-people-button\" />\n            </Stack>}\n        </Stack>}\n    </>;\n};\nfunction PeoplePaneOpenDialpadIconNameTrampoline(): string {\n  /* @conditional-compile-remove(PSTN-calls) */\n  return 'PeoplePaneOpenDialpad';\n  return '';\n}\nfunction PeoplePaneAddPersonIconTrampoline(): JSX.Element {\n  /* @conditional-compile-remove(PSTN-calls) */\n  return <CallWithChatCompositeIcon iconName=\"PeoplePaneAddPerson\" />;\n  return <></>;\n}"]}
+{"version":3,"file":"AddPeopleDropdown.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/AddPeopleDropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport {\n  DefaultButton,\n  IContextualMenuItem,\n  IContextualMenuProps,\n  PrimaryButton,\n  Stack,\n  useTheme\n} from '@fluentui/react';\n\nimport { _DrawerMenu, _DrawerMenuItemProps, Announcer } from '@internal/react-components';\nimport copy from 'copy-to-clipboard';\nimport { useMemo, useState } from 'react';\n/* @conditional-compile-remove(PSTN-calls) */\nimport { CallWithChatCompositeIcon } from './icons';\nimport { iconStyles, themedCopyLinkButtonStyles, themedMenuStyle } from './AddPeopleDropdown.styles';\nimport { CallingDialpad } from './CallingDialpad';\nimport { CallingDialpadStrings } from './CallingDialpad';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\nimport { copyLinkButtonContainerStyles, copyLinkButtonStackStyles } from './styles/PeoplePaneContent.styles';\nimport { drawerContainerStyles } from '../CallComposite/styles/CallComposite.styles';\nimport { convertContextualMenuItemToDrawerMenuItem } from './ConvertContextualMenuItemToDrawerMenuItem';\nimport { PhoneNumberIdentifier } from '@azure/communication-common';\nimport { AddPhoneNumberOptions } from '@azure/communication-calling';\nimport { useId } from '@fluentui/react-hooks';\nimport { CalloutWithIcon } from './CalloutWithIcon';\n\n/** @private */\nexport interface AddPeopleDropdownStrings extends CallingDialpadStrings {\n  copyInviteLinkButtonLabel: string;\n  copyInviteLinkButtonActionedLabel: string;\n  openDialpadButtonLabel: string;\n  peoplePaneAddPeopleButtonLabel: string;\n  copyInviteLinkActionedAriaLabel: string;\n}\n\n/** @private */\nexport interface AddPeopleDropdownProps {\n  inviteLink?: string;\n  mobileView?: boolean;\n  strings: AddPeopleDropdownStrings;\n  onAddParticipant: (participant: PhoneNumberIdentifier, options?: AddPhoneNumberOptions) => void;\n  alternateCallerId?: string;\n  onCopyInviteLink?: () => void;\n  inviteLinkCopiedRecently?: boolean;\n}\n\n/** @private */\nexport const AddPeopleDropdown = (props: AddPeopleDropdownProps): JSX.Element => {\n  const theme = useTheme();\n\n  const {\n    inviteLink,\n    strings,\n    mobileView,\n    onAddParticipant,\n    alternateCallerId,\n    onCopyInviteLink,\n    inviteLinkCopiedRecently\n  } = props;\n\n  const [showDialpad, setShowDialpad] = useState(false);\n\n  const [announcerStrings, setAnnouncerStrings] = useState<string>();\n\n  const menuStyleThemed = useMemo(() => themedMenuStyle(theme), [theme]);\n\n  const copyLinkButtonStylesThemed = useMemo(() => themedCopyLinkButtonStyles(theme, mobileView), [mobileView, theme]);\n\n  const defaultMenuProps = useMemo((): IContextualMenuProps => {\n    const menuProps: IContextualMenuProps = {\n      styles: menuStyleThemed,\n      items: [],\n      useTargetWidth: true,\n      calloutProps: {\n        preventDismissOnEvent\n      },\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onMenuOpened(contextualMenu?) {\n        setAnnouncerStrings(undefined);\n      }\n    };\n\n    if (inviteLink) {\n      menuProps.items.push({\n        key: 'InviteLinkKey',\n        text: strings.copyInviteLinkButtonLabel,\n        itemProps: { styles: copyLinkButtonStylesThemed },\n        iconProps: { iconName: 'Link', style: iconStyles },\n        onClick: () => {\n          setAnnouncerStrings(strings.copyInviteLinkActionedAriaLabel);\n          copy(inviteLink);\n          onCopyInviteLink?.();\n        }\n      });\n    }\n\n    // only show the dialpad option when alternateCallerId is set\n    if (alternateCallerId) {\n      menuProps.items.push({\n        key: 'DialpadKey',\n        text: strings.openDialpadButtonLabel,\n        itemProps: { styles: copyLinkButtonStylesThemed },\n        iconProps: { iconName: PeoplePaneOpenDialpadIconNameTrampoline(), style: iconStyles },\n        onClick: () => setShowDialpad(true),\n        'data-ui-id': 'call-dial-phone-number-button'\n      });\n    }\n\n    return menuProps;\n  }, [\n    menuStyleThemed,\n    inviteLink,\n    alternateCallerId,\n    strings.copyInviteLinkButtonLabel,\n    strings.copyInviteLinkActionedAriaLabel,\n    strings.openDialpadButtonLabel,\n    copyLinkButtonStylesThemed,\n    onCopyInviteLink\n  ]);\n\n  const onDismissDialpad = (): void => {\n    setShowDialpad(false);\n  };\n\n  const [addPeopleDrawerMenuItems, setAddPeopleDrawerMenuItems] = useState<_DrawerMenuItemProps[]>([]);\n\n  const setDrawerMenuItemsForAddPeople: () => void = useMemo(() => {\n    return () => {\n      const drawerMenuItems = defaultMenuProps.items.map((contextualMenu: IContextualMenuItem) =>\n        convertContextualMenuItemToDrawerMenuItem(contextualMenu, () => setAddPeopleDrawerMenuItems([]))\n      );\n      setAddPeopleDrawerMenuItems(drawerMenuItems);\n    };\n  }, [defaultMenuProps, setAddPeopleDrawerMenuItems]);\n\n  const calloutButtonId = useId('callout-button');\n\n  if (mobileView) {\n    return (\n      <Stack>\n        <Announcer ariaLive={'assertive'} announcementString={announcerStrings} />\n        {defaultMenuProps.items.length > 0 && (\n          <Stack.Item styles={copyLinkButtonContainerStyles}>\n            <PrimaryButton\n              id={calloutButtonId}\n              onClick={setDrawerMenuItemsForAddPeople}\n              styles={copyLinkButtonStylesThemed}\n              onRenderIcon={() => PeoplePaneAddPersonIconTrampoline()}\n              text={strings.peoplePaneAddPeopleButtonLabel}\n              data-ui-id=\"call-add-people-button\"\n            />\n            {inviteLinkCopiedRecently && (\n              <CalloutWithIcon\n                targetId={calloutButtonId}\n                text={strings.copyInviteLinkButtonActionedLabel}\n                doNotLayer={true}\n              />\n            )}\n          </Stack.Item>\n        )}\n\n        {addPeopleDrawerMenuItems.length > 0 && (\n          <Stack styles={drawerContainerStyles()} data-ui-id=\"call-add-people-dropdown\">\n            <_DrawerMenu\n              disableMaxHeight={true}\n              onLightDismiss={() => setAddPeopleDrawerMenuItems([])}\n              items={addPeopleDrawerMenuItems}\n            />\n          </Stack>\n        )}\n        {alternateCallerId && (\n          <CallingDialpad\n            isMobile={true}\n            strings={strings}\n            showDialpad={showDialpad}\n            onDismissDialpad={onDismissDialpad}\n            onAddParticipant={onAddParticipant}\n            alternateCallerId={alternateCallerId}\n          />\n        )}\n      </Stack>\n    );\n  }\n\n  return (\n    <>\n      {\n        <Stack>\n          <Announcer ariaLive={'assertive'} announcementString={announcerStrings} />\n          {alternateCallerId && (\n            <CallingDialpad\n              isMobile={false}\n              strings={strings}\n              showDialpad={showDialpad}\n              onDismissDialpad={onDismissDialpad}\n              onAddParticipant={onAddParticipant}\n              alternateCallerId={alternateCallerId}\n            />\n          )}\n\n          {defaultMenuProps.items.length > 0 && (\n            <Stack styles={copyLinkButtonStackStyles}>\n              <DefaultButton\n                id={calloutButtonId}\n                onRenderIcon={() => PeoplePaneAddPersonIconTrampoline()}\n                text={strings.peoplePaneAddPeopleButtonLabel}\n                menuProps={defaultMenuProps}\n                styles={copyLinkButtonStylesThemed}\n                data-ui-id=\"call-add-people-button\"\n              />\n              {inviteLinkCopiedRecently && (\n                <CalloutWithIcon targetId={calloutButtonId} text={strings.copyInviteLinkButtonActionedLabel} />\n              )}\n            </Stack>\n          )}\n        </Stack>\n      }\n    </>\n  );\n};\n\nfunction PeoplePaneOpenDialpadIconNameTrampoline(): string {\n  /* @conditional-compile-remove(PSTN-calls) */\n  return 'PeoplePaneOpenDialpad';\n\n  return '';\n}\n\nfunction PeoplePaneAddPersonIconTrampoline(): JSX.Element {\n  /* @conditional-compile-remove(PSTN-calls) */\n  return <CallWithChatCompositeIcon iconName=\"PeoplePaneAddPerson\" />;\n\n  return <></>;\n}\n"]}

package/dist/dist-esm/react-composites/src/composites/common/AddPeopleDropdown.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddPeopleDropdown.styles.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/AddPeopleDropdown.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,KAAY,EAAE,UAAoB,EAA0B,EAAE,CAAC,CAAC;IACzG,IAAI,EAAE;QACJ,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;QACzC,YAAY,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc;QACtF,KAAK,EAAE,MAAM;KACd;IACD,aAAa,EAAE;QACb,OAAO,EAAE,UAAU;KACpB;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAAY,EAAkC,EAAE,CAAC,CAAC;IAChF,IAAI,EAAE;QACJ,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;KAC3C;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,6EAA6E;IAC7E,UAAU,EAAE,GAAG;IACf,KAAK,EAAE,UAAU;CAClB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IButtonStyles, IContextualMenuStyles, Theme } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const themedCopyLinkButtonStyles = (theme: Theme, mobileView?: boolean): Partial<IButtonStyles> => ({\n  root: {\n    minHeight: mobileView ? '3rem' : '2.5rem',\n    borderRadius: mobileView ? theme.effects.roundedCorner6 : theme.effects.roundedCorner4,\n    width: '100%'\n  },\n  textContainer: {\n    display: 'contents'\n  }\n});\n\n/**\n * @private\n */\nexport const themedMenuStyle = (theme: Theme): Partial<IContextualMenuStyles> => ({\n  root: {\n    borderRadius: theme.effects.roundedCorner6\n  }\n});\n\n/**\n * @private\n */\nexport const iconStyles = {\n  // overwrite default line height which results in icons having different size\n  lineHeight: '0',\n  width: '1.125rem'\n};"]}
+{"version":3,"file":"AddPeopleDropdown.styles.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/AddPeopleDropdown.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,KAAY,EAAE,UAAoB,EAA0B,EAAE,CAAC,CAAC;IACzG,IAAI,EAAE;QACJ,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;QACzC,YAAY,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc;QACtF,KAAK,EAAE,MAAM;KACd;IACD,aAAa,EAAE;QACb,OAAO,EAAE,UAAU;KACpB;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAAY,EAAkC,EAAE,CAAC,CAAC;IAChF,IAAI,EAAE;QACJ,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;KAC3C;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,6EAA6E;IAC7E,UAAU,EAAE,GAAG;IACf,KAAK,EAAE,UAAU;CAClB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IButtonStyles, IContextualMenuStyles, Theme } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const themedCopyLinkButtonStyles = (theme: Theme, mobileView?: boolean): Partial<IButtonStyles> => ({\n  root: {\n    minHeight: mobileView ? '3rem' : '2.5rem',\n    borderRadius: mobileView ? theme.effects.roundedCorner6 : theme.effects.roundedCorner4,\n    width: '100%'\n  },\n  textContainer: {\n    display: 'contents'\n  }\n});\n\n/**\n * @private\n */\nexport const themedMenuStyle = (theme: Theme): Partial<IContextualMenuStyles> => ({\n  root: {\n    borderRadius: theme.effects.roundedCorner6\n  }\n});\n\n/**\n * @private\n */\nexport const iconStyles = {\n  // overwrite default line height which results in icons having different size\n  lineHeight: '0',\n  width: '1.125rem'\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/common/AudioProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"AudioProvider.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/AudioProvider.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAUzD;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAe,EAAE;IAC5E,MAAM,EACJ,YAAY,EACZ,QAAQ,EACT,GAAG,KAAK,CAAC;IACV,MAAM,cAAc,GAAG,QAAQ,EAAE,CAAC;IAClC,IAAI,cAAc,EAAE,CAAC;QACnB,OAAO,0CAAG,QAAQ,CAAI,CAAC;IACzB,CAAC;IACD,OAAO,oBAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,IAAG,KAAK,CAAC,QAAQ,CAA4B,CAAC;AACpG,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,eAAe,GAAG,aAAa,CAAe,IAAI,YAAY,EAAE,CAAC,CAAC;AAExE;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAiB,EAAE,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useContext, createContext } from 'react';\n\n/**\n * @private\n */\nexport interface ACSAudioProviderProps {\n  audioContext: AudioContext;\n  children: JSX.Element;\n}\n\n/**\n *\n * @param props\n * @returns\n */\nexport const ACSAudioProvider = (props: ACSAudioProviderProps): JSX.Element => {\n  const {\n    audioContext,\n    children\n  } = props;\n  const alreadyWrapped = useAudio();\n  if (alreadyWrapped) {\n    return <>{children}</>;\n  }\n  return <ACSAudioContext.Provider value={audioContext}>{props.children}</ACSAudioContext.Provider>;\n};\n\n/**\n * @private\n */\nconst ACSAudioContext = createContext<AudioContext>(new AudioContext());\n\n/**\n * @private\n */\nexport const useAudio = (): AudioContext => useContext(ACSAudioContext);"]}
+{"version":3,"file":"AudioProvider.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/AudioProvider.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAUzD;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAe,EAAE;IAC5E,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACzC,MAAM,cAAc,GAAG,QAAQ,EAAE,CAAC;IAClC,IAAI,cAAc,EAAE,CAAC;QACnB,OAAO,0CAAG,QAAQ,CAAI,CAAC;IACzB,CAAC;IACD,OAAO,oBAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,IAAG,KAAK,CAAC,QAAQ,CAA4B,CAAC;AACpG,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,eAAe,GAAG,aAAa,CAAe,IAAI,YAAY,EAAE,CAAC,CAAC;AAExE;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAiB,EAAE,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useContext, createContext } from 'react';\n\n/**\n * @private\n */\nexport interface ACSAudioProviderProps {\n  audioContext: AudioContext;\n  children: JSX.Element;\n}\n\n/**\n *\n * @param props\n * @returns\n */\nexport const ACSAudioProvider = (props: ACSAudioProviderProps): JSX.Element => {\n  const { audioContext, children } = props;\n  const alreadyWrapped = useAudio();\n  if (alreadyWrapped) {\n    return <>{children}</>;\n  }\n  return <ACSAudioContext.Provider value={audioContext}>{props.children}</ACSAudioContext.Provider>;\n};\n\n/**\n * @private\n */\nconst ACSAudioContext = createContext<AudioContext>(new AudioContext());\n\n/**\n * @private\n */\nexport const useAudio = (): AudioContext => useContext(ACSAudioContext);\n"]}

package/dist/dist-esm/react-composites/src/composites/common/AvatarPersona.js

@@ -46,12 +46,17 @@ export const AvatarPersona = (props) => {
         });
         mergeStyles(activePersona, props.styles);
     }
-    return React.createElement(Persona, Object.assign({}, props, { className: activePersona, text: (_a = data === null || data === void 0 ? void 0 : data.text) !== null && _a !== void 0 ? _a : text, imageUrl: (_b = data === null || data === void 0 ? void 0 : data.imageUrl) !== null && _b !== void 0 ? _b : imageUrl, imageInitials: (_c = data === null || data === void 0 ? void 0 : data.imageInitials) !== null && _c !== void 0 ? _c : imageInitials, initialsColor: (_d = data === null || data === void 0 ? void 0 : data.initialsColor) !== null && _d !== void 0 ? _d : initialsColor, initialsTextColor: (_f = (_e = data === null || data === void 0 ? void 0 : data.initialsTextColor) !== null && _e !== void 0 ? _e : initialsTextColor) !== null && _f !== void 0 ? _f : 'white', 
+    return (React.createElement(Persona, Object.assign({}, props, { className: activePersona, text: (_a = data === null || data === void 0 ? void 0 : data.text) !== null && _a !== void 0 ? _a : text, imageUrl: (_b = data === null || data === void 0 ? void 0 : data.imageUrl) !== null && _b !== void 0 ? _b : imageUrl, imageInitials: (_c = data === null || data === void 0 ? void 0 : data.imageInitials) !== null && _c !== void 0 ? _c : imageInitials, initialsColor: (_d = data === null || data === void 0 ? void 0 : data.initialsColor) !== null && _d !== void 0 ? _d : initialsColor, initialsTextColor: (_f = (_e = data === null || data === void 0 ? void 0 : data.initialsTextColor) !== null && _e !== void 0 ? _e : initialsTextColor) !== null && _f !== void 0 ? _f : 'white', 
         // default disable tooltip unless specified
         showOverflowTooltip: showOverflowTooltip !== null && showOverflowTooltip !== void 0 ? showOverflowTooltip : false, 
-        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ showUnknownPersonaCoin: (_h = (_g = data === null || data === void 0 ? void 0 : data.showUnknownPersonaCoin) !== null && _g !== void 0 ? _g : props.showUnknownPersonaCoin) !== null && _h !== void 0 ? _h : false }));
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+        showUnknownPersonaCoin: (_h = (_g = data === null || data === void 0 ? void 0 : data.showUnknownPersonaCoin) !== null && _g !== void 0 ? _g : props.showUnknownPersonaCoin) !== null && _h !== void 0 ? _h : false })));
 };
 const avatarDeepDifferenceCheck = (currentData, newData) => {
-    return (currentData === null || currentData === void 0 ? void 0 : currentData.text) !== (newData === null || newData === void 0 ? void 0 : newData.text) || (currentData === null || currentData === void 0 ? void 0 : currentData.imageUrl) !== (newData === null || newData === void 0 ? void 0 : newData.imageUrl) || (currentData === null || currentData === void 0 ? void 0 : currentData.initialsColor) !== (newData === null || newData === void 0 ? void 0 : newData.initialsColor) || (currentData === null || currentData === void 0 ? void 0 : currentData.imageInitials) !== (newData === null || newData === void 0 ? void 0 : newData.imageInitials) || (currentData === null || currentData === void 0 ? void 0 : currentData.initialsTextColor) !== (newData === null || newData === void 0 ? void 0 : newData.initialsTextColor);
+    return ((currentData === null || currentData === void 0 ? void 0 : currentData.text) !== (newData === null || newData === void 0 ? void 0 : newData.text) ||
+        (currentData === null || currentData === void 0 ? void 0 : currentData.imageUrl) !== (newData === null || newData === void 0 ? void 0 : newData.imageUrl) ||
+        (currentData === null || currentData === void 0 ? void 0 : currentData.initialsColor) !== (newData === null || newData === void 0 ? void 0 : newData.initialsColor) ||
+        (currentData === null || currentData === void 0 ? void 0 : currentData.imageInitials) !== (newData === null || newData === void 0 ? void 0 : newData.imageInitials) ||
+        (currentData === null || currentData === void 0 ? void 0 : currentData.initialsTextColor) !== (newData === null || newData === void 0 ? void 0 : newData.initialsTextColor));
 };
 //# sourceMappingURL=AvatarPersona.js.map

package/dist/dist-esm/react-composites/src/composites/common/AvatarPersona.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarPersona.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/AvatarPersona.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IPersonaProps, Persona, PersonaInitialsColor } from '@fluentui/react';\nimport React, { useEffect, useState } from 'react';\nimport { mergeStyles } from '@fluentui/react';\n\n/**\n * Custom data attributes for displaying avatar for a user.\n *\n * @public\n */\nexport type AvatarPersonaData = {\n  /**\n   * Primary text to display, usually the name of the person.\n   */\n  text?: string;\n  /**\n   * Image URL to use, should be a square aspect ratio and big enough to fit in the image area.\n   */\n  imageUrl?: string;\n  /**\n   * The user's initials to display in the image area when there is no image.\n   * @defaultvalue Derived from `text`\n   */\n  imageInitials?: string;\n  /**\n   * The background color when the user's initials are displayed.\n   * @defaultvalue Derived from `text`\n   */\n  initialsColor?: PersonaInitialsColor | string;\n  /**\n   * The text color when the user's initials are displayed\n   * @defaultvalue `white`\n   */\n  initialsTextColor?: string;\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  /**\n   * If true, show the special coin for unknown persona.\n   * It has '?' in place of initials, with static font and background colors\n   */\n  showUnknownPersonaCoin?: boolean;\n};\n\n/**\n * Callback function used to provide custom data to build an avatar for a user.\n *\n * @public\n */\nexport type AvatarPersonaDataCallback = (userId: string) => Promise<AvatarPersonaData>;\n\n/**\n * @private\n */\nexport interface AvatarPersonaProps extends IPersonaProps {\n  /**\n   * Azure Communicator user ID.\n   */\n  userId?: string;\n  /**\n   * A function that returns a Promise that resolves to the data to be displayed.\n   */\n  dataProvider?: AvatarPersonaDataCallback;\n  /**\n   * Allow to show colored border around persona coin, but isActive is what shows it.\n   */\n  allowActiveBorder?: boolean;\n}\n\n/**\n * An Avatar component made using the `Persona` component.\n * It allows you to specify a `userId` and a `dataProvider` to retrieve the `AvatarPersonaData`.\n * Read more about `Persona` component at https://developer.microsoft.com/fluentui#/controls/web/persona\n *\n * @private\n */\nexport const AvatarPersona = (props: AvatarPersonaProps): JSX.Element => {\n  const {\n    userId,\n    dataProvider,\n    text,\n    imageUrl,\n    imageInitials,\n    initialsColor,\n    initialsTextColor,\n    showOverflowTooltip\n  } = props;\n  const [data, setData] = useState<AvatarPersonaData | undefined>();\n  useEffect(() => {\n    (async () => {\n      if (dataProvider && userId) {\n        const newData = await dataProvider(userId);\n        if (avatarDeepDifferenceCheck(data, newData)) {\n          setData(newData);\n        }\n      }\n    })();\n  }, [data, dataProvider, userId]);\n  let activePersona = '';\n  if (props.allowActiveBorder) {\n    // Display a border for raised handed participants in participant list\n    activePersona = mergeStyles({\n      border: 'solid 2px',\n      borderColor: 'transparent',\n      borderRadius: '50%',\n      padding: '2px',\n      boxSizing: 'content-box',\n      margin: '-4px'\n    });\n    mergeStyles(activePersona, props.styles);\n  }\n  return <Persona {...props} className={activePersona} text={data?.text ?? text} imageUrl={data?.imageUrl ?? imageUrl} imageInitials={data?.imageInitials ?? imageInitials} initialsColor={data?.initialsColor ?? initialsColor} initialsTextColor={data?.initialsTextColor ?? initialsTextColor ?? 'white'}\n  // default disable tooltip unless specified\n  showOverflowTooltip={showOverflowTooltip ?? false}\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ showUnknownPersonaCoin={data?.showUnknownPersonaCoin ?? props.showUnknownPersonaCoin ?? false} />;\n};\nconst avatarDeepDifferenceCheck = (currentData?: AvatarPersonaData, newData?: AvatarPersonaData): boolean => {\n  return currentData?.text !== newData?.text || currentData?.imageUrl !== newData?.imageUrl || currentData?.initialsColor !== newData?.initialsColor || currentData?.imageInitials !== newData?.imageInitials || currentData?.initialsTextColor !== newData?.initialsTextColor;\n};"]}
+{"version":3,"file":"AvatarPersona.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/AvatarPersona.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,EAAiB,OAAO,EAAwB,MAAM,iBAAiB,CAAC;AAC/E,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAiE9C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAe,EAAE;;IACtE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,GAClH,KAAK,CAAC;IAER,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,EAAiC,CAAC;IAElE,SAAS,CAAC,GAAG,EAAE;QACb,CAAC,GAAS,EAAE;YACV,IAAI,YAAY,IAAI,MAAM,EAAE,CAAC;gBAC3B,MAAM,OAAO,GAAG,MAAM,YAAY,CAAC,MAAM,CAAC,CAAC;gBAC3C,IAAI,yBAAyB,CAAC,IAAI,EAAE,OAAO,CAAC,EAAE,CAAC;oBAC7C,OAAO,CAAC,OAAO,CAAC,CAAC;gBACnB,CAAC;YACH,CAAC;QACH,CAAC,CAAA,CAAC,EAAE,CAAC;IACP,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC;IAEjC,IAAI,aAAa,GAAG,EAAE,CAAC;IAEvB,IAAI,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC5B,sEAAsE;QACtE,aAAa,GAAG,WAAW,CAAC;YAC1B,MAAM,EAAE,WAAW;YACnB,WAAW,EAAE,aAAa;YAC1B,YAAY,EAAE,KAAK;YACnB,OAAO,EAAE,KAAK;YACd,SAAS,EAAE,aAAa;YACxB,MAAM,EAAE,MAAM;SACf,CAAC,CAAC;QAEH,WAAW,CAAC,aAAa,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC3C,CAAC;IAED,OAAO,CACL,oBAAC,OAAO,oBACF,KAAK,IACT,SAAS,EAAE,aAAa,EACxB,IAAI,EAAE,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,mCAAI,IAAI,EACxB,QAAQ,EAAE,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ,mCAAI,QAAQ,EACpC,aAAa,EAAE,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,aAAa,mCAAI,aAAa,EACnD,aAAa,EAAE,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,aAAa,mCAAI,aAAa,EACnD,iBAAiB,EAAE,MAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,iBAAiB,mCAAI,iBAAiB,mCAAI,OAAO;QAC1E,2CAA2C;QAC3C,mBAAmB,EAAE,mBAAmB,aAAnB,mBAAmB,cAAnB,mBAAmB,GAAI,KAAK;QACjD,6CAA6C,CAAC,mDAAmD;QACjG,sBAAsB,EAAE,MAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,sBAAsB,mCAAI,KAAK,CAAC,sBAAsB,mCAAI,KAAK,IAC7F,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,yBAAyB,GAAG,CAAC,WAA+B,EAAE,OAA2B,EAAW,EAAE;IAC1G,OAAO,CACL,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,OAAK,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,CAAA;QACnC,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,QAAQ,OAAK,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CAAA;QAC3C,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,aAAa,OAAK,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,CAAA;QACrD,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,aAAa,OAAK,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,CAAA;QACrD,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,iBAAiB,OAAK,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,iBAAiB,CAAA,CAC9D,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IPersonaProps, Persona, PersonaInitialsColor } from '@fluentui/react';\nimport React, { useEffect, useState } from 'react';\nimport { mergeStyles } from '@fluentui/react';\n\n/**\n * Custom data attributes for displaying avatar for a user.\n *\n * @public\n */\nexport type AvatarPersonaData = {\n  /**\n   * Primary text to display, usually the name of the person.\n   */\n  text?: string;\n  /**\n   * Image URL to use, should be a square aspect ratio and big enough to fit in the image area.\n   */\n  imageUrl?: string;\n  /**\n   * The user's initials to display in the image area when there is no image.\n   * @defaultvalue Derived from `text`\n   */\n  imageInitials?: string;\n  /**\n   * The background color when the user's initials are displayed.\n   * @defaultvalue Derived from `text`\n   */\n  initialsColor?: PersonaInitialsColor | string;\n  /**\n   * The text color when the user's initials are displayed\n   * @defaultvalue `white`\n   */\n  initialsTextColor?: string;\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  /**\n   * If true, show the special coin for unknown persona.\n   * It has '?' in place of initials, with static font and background colors\n   */\n  showUnknownPersonaCoin?: boolean;\n};\n\n/**\n * Callback function used to provide custom data to build an avatar for a user.\n *\n * @public\n */\nexport type AvatarPersonaDataCallback = (userId: string) => Promise<AvatarPersonaData>;\n\n/**\n * @private\n */\nexport interface AvatarPersonaProps extends IPersonaProps {\n  /**\n   * Azure Communicator user ID.\n   */\n  userId?: string;\n  /**\n   * A function that returns a Promise that resolves to the data to be displayed.\n   */\n  dataProvider?: AvatarPersonaDataCallback;\n  /**\n   * Allow to show colored border around persona coin, but isActive is what shows it.\n   */\n\n  allowActiveBorder?: boolean;\n}\n\n/**\n * An Avatar component made using the `Persona` component.\n * It allows you to specify a `userId` and a `dataProvider` to retrieve the `AvatarPersonaData`.\n * Read more about `Persona` component at https://developer.microsoft.com/fluentui#/controls/web/persona\n *\n * @private\n */\nexport const AvatarPersona = (props: AvatarPersonaProps): JSX.Element => {\n  const { userId, dataProvider, text, imageUrl, imageInitials, initialsColor, initialsTextColor, showOverflowTooltip } =\n    props;\n\n  const [data, setData] = useState<AvatarPersonaData | undefined>();\n\n  useEffect(() => {\n    (async () => {\n      if (dataProvider && userId) {\n        const newData = await dataProvider(userId);\n        if (avatarDeepDifferenceCheck(data, newData)) {\n          setData(newData);\n        }\n      }\n    })();\n  }, [data, dataProvider, userId]);\n\n  let activePersona = '';\n\n  if (props.allowActiveBorder) {\n    // Display a border for raised handed participants in participant list\n    activePersona = mergeStyles({\n      border: 'solid 2px',\n      borderColor: 'transparent',\n      borderRadius: '50%',\n      padding: '2px',\n      boxSizing: 'content-box',\n      margin: '-4px'\n    });\n\n    mergeStyles(activePersona, props.styles);\n  }\n\n  return (\n    <Persona\n      {...props}\n      className={activePersona}\n      text={data?.text ?? text}\n      imageUrl={data?.imageUrl ?? imageUrl}\n      imageInitials={data?.imageInitials ?? imageInitials}\n      initialsColor={data?.initialsColor ?? initialsColor}\n      initialsTextColor={data?.initialsTextColor ?? initialsTextColor ?? 'white'}\n      // default disable tooltip unless specified\n      showOverflowTooltip={showOverflowTooltip ?? false}\n      /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n      showUnknownPersonaCoin={data?.showUnknownPersonaCoin ?? props.showUnknownPersonaCoin ?? false}\n    />\n  );\n};\n\nconst avatarDeepDifferenceCheck = (currentData?: AvatarPersonaData, newData?: AvatarPersonaData): boolean => {\n  return (\n    currentData?.text !== newData?.text ||\n    currentData?.imageUrl !== newData?.imageUrl ||\n    currentData?.initialsColor !== newData?.initialsColor ||\n    currentData?.imageInitials !== newData?.imageInitials ||\n    currentData?.initialsTextColor !== newData?.initialsTextColor\n  );\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/common/BaseComposite.js

@@ -40,29 +40,20 @@ export const BaseProvider = (props) => {
      * We register the default icon mappings merged with custom icons provided through props
      * to ensure all icons render correctly.
      */
-    registerIcons({
-        icons: Object.assign(Object.assign({}, iconsToRegister), props.icons)
-    });
+    registerIcons({ icons: Object.assign(Object.assign({}, iconsToRegister), props.icons) });
     /**
      * We need to create one context for the AudioProvider to ensure that we only have one instance of the AudioContext.
      */
     const compositeAudioContext = new AudioContext();
     // we use Customizer to override default LayerHost injected to <body />
     // which stop polluting global dom tree and increase compatibility with react-full-screen
-    const CompositeElement = React.createElement(FluentThemeProvider, { fluentTheme: fluentTheme, rtl: rtl },
+    const CompositeElement = (React.createElement(FluentThemeProvider, { fluentTheme: fluentTheme, rtl: rtl },
         React.createElement("meta", { name: "viewport", content: "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" }),
-        React.createElement(Customizer, { scopedSettings: {
-                Layer: {
-                    hostId: globalLayerHostId
-                }
-            } },
+        React.createElement(Customizer, { scopedSettings: { Layer: { hostId: globalLayerHostId } } },
             React.createElement(ACSAudioProvider, { audioContext: compositeAudioContext },
                 React.createElement(WithBackgroundColor, null, props.children))),
-        React.createElement(LayerHost, { id: globalLayerHostId, className: mergeStyles(globalLayerHostStyle) }));
-    const localizedElement = locale ? LocalizationProvider({
-        locale,
-        children: CompositeElement
-    }) : CompositeElement;
+        React.createElement(LayerHost, { id: globalLayerHostId, className: mergeStyles(globalLayerHostStyle) })));
+    const localizedElement = locale ? LocalizationProvider({ locale, children: CompositeElement }) : CompositeElement;
     return React.createElement(BaseContext.Provider, { value: true }, localizedElement);
 };
 /**

package/dist/dist-esm/react-composites/src/composites/common/BaseComposite.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseComposite.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/BaseComposite.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Customizer, LayerHost, mergeStyles, PartialTheme, registerIcons, Stack, Theme, useTheme } from '@fluentui/react';\nimport { FluentThemeProvider, ParticipantMenuItemsCallback } from '@internal/react-components';\nimport React, { createContext, useContext } from 'react';\nimport { CompositeLocale, LocalizationProvider } from '../localization';\nimport { AvatarPersonaDataCallback } from './AvatarPersona';\nimport { CallCompositeIcons, CallWithChatCompositeIcons, ChatCompositeIcons, DEFAULT_COMPOSITE_ICONS } from './icons';\nimport { globalLayerHostStyle } from './styles/GlobalHostLayer.styles';\nimport { useId } from '@fluentui/react-hooks';\nimport { ACSAudioProvider } from './AudioProvider';\n/**\n * Properties common to all composites exported from this library.\n *\n * @public\n */\nexport interface BaseCompositeProps<TIcons extends Record<string, JSX.Element>> {\n  /**\n   * Fluent theme for the composite.\n   *\n   * @defaultValue light theme\n   */\n  fluentTheme?: PartialTheme | Theme;\n  /**\n   * Custom Icon override for the composite.\n   * A JSX element can be provided to override the default icon.\n   */\n  icons?: TIcons;\n  /**\n   * Locale for the composite.\n   *\n   * @defaultValue English (US)\n   */\n  locale?: CompositeLocale;\n  /**\n   * Whether composite is displayed right-to-left.\n   *\n   * @defaultValue false\n   */\n  rtl?: boolean;\n  /**\n   * A callback function that can be used to provide custom data to Avatars rendered\n   * in Composite.\n   *\n   * This will not affect the displayName shown in the composite.\n   * The displayName throughout the composite will be what is provided to the adapter when the adapter is created.\n   * will be what is provided to the adapter when the adapter is created.\n   */\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n\n  /**\n   * A callback function that can be used to provide custom menu items for a participant in\n   * participant list.\n   */\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n}\n\n/**\n * A base provider {@link React.Context} to wrap components with other required providers\n * (e.g. icons, FluentThemeProvider, LocalizationProvider).\n *\n * Required providers are only wrapped once, with all other instances only passing children.\n *\n * @private\n */\nexport const BaseProvider = (props: BaseCompositeProps<CallCompositeIcons | ChatCompositeIcons | CallWithChatCompositeIcons> & {\n  children: React.ReactNode;\n}): JSX.Element => {\n  const {\n    fluentTheme,\n    rtl,\n    locale\n  } = props;\n  const globalLayerHostId = useId('composite-global-hostId');\n\n  /**\n   * Pass only the children if we previously registered icons, and have previously wrapped the children in\n   * FluentThemeProvider and LocalizationProvider\n   */\n  const alreadyWrapped = useBase();\n  if (alreadyWrapped) {\n    return <>{props.children}</>;\n  }\n\n  /**\n   * Before registering fluent icons, we should check DEFAULT_COMPOSITE_ICONS and strip out the key value pairs where value is undefined\n   */\n  const iconsToRegister: {\n    [key: string]: JSX.Element;\n  } = {};\n  Object.entries(DEFAULT_COMPOSITE_ICONS).forEach(([key, value]) => {\n    if (value) {\n      iconsToRegister[key] = value;\n    }\n  });\n\n  /**\n   * We register the default icon mappings merged with custom icons provided through props\n   * to ensure all icons render correctly.\n   */\n  registerIcons({\n    icons: {\n      ...iconsToRegister,\n      ...props.icons\n    }\n  });\n\n  /**\n   * We need to create one context for the AudioProvider to ensure that we only have one instance of the AudioContext.\n   */\n  const compositeAudioContext = new AudioContext();\n  // we use Customizer to override default LayerHost injected to <body />\n  // which stop polluting global dom tree and increase compatibility with react-full-screen\n  const CompositeElement = <FluentThemeProvider fluentTheme={fluentTheme} rtl={rtl}>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0\" />\n      <Customizer scopedSettings={{\n      Layer: {\n        hostId: globalLayerHostId\n      }\n    }}>\n        <ACSAudioProvider audioContext={compositeAudioContext}>\n          <WithBackgroundColor>{props.children}</WithBackgroundColor>\n        </ACSAudioProvider>\n      </Customizer>\n      <LayerHost id={globalLayerHostId} className={mergeStyles(globalLayerHostStyle)} />\n    </FluentThemeProvider>;\n  const localizedElement = locale ? LocalizationProvider({\n    locale,\n    children: CompositeElement\n  }) : CompositeElement;\n  return <BaseContext.Provider value={true}>{localizedElement}</BaseContext.Provider>;\n};\n\n/**\n * @private\n */\nconst BaseContext = createContext<boolean>(false);\n\n/**\n * @private\n */\nconst useBase = (): boolean => useContext(BaseContext);\n\n/**\n * @private\n * Provides a wrapper with a background color to ensure that composites always have a background color.\n * This is necessary to ensure that composites are not transparent,\n * and the background color of it's parent elements doesn't show through the composite.\n */\nconst WithBackgroundColor = (props: {\n  children: React.ReactNode;\n}): JSX.Element => {\n  const {\n    children\n  } = props;\n  const theme = useTheme();\n  const className = mergeStyles({\n    background: theme.semanticColors.bodyBackground,\n    height: '100%',\n    width: '100%',\n    position: 'relative'\n  });\n  return <Stack className={className}>{children}</Stack>;\n};"]}
+{"version":3,"file":"BaseComposite.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/BaseComposite.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  Customizer,\n  LayerHost,\n  mergeStyles,\n  PartialTheme,\n  registerIcons,\n  Stack,\n  Theme,\n  useTheme\n} from '@fluentui/react';\nimport { FluentThemeProvider, ParticipantMenuItemsCallback } from '@internal/react-components';\nimport React, { createContext, useContext } from 'react';\nimport { CompositeLocale, LocalizationProvider } from '../localization';\nimport { AvatarPersonaDataCallback } from './AvatarPersona';\nimport { CallCompositeIcons, CallWithChatCompositeIcons, ChatCompositeIcons, DEFAULT_COMPOSITE_ICONS } from './icons';\nimport { globalLayerHostStyle } from './styles/GlobalHostLayer.styles';\nimport { useId } from '@fluentui/react-hooks';\nimport { ACSAudioProvider } from './AudioProvider';\n/**\n * Properties common to all composites exported from this library.\n *\n * @public\n */\nexport interface BaseCompositeProps<TIcons extends Record<string, JSX.Element>> {\n  /**\n   * Fluent theme for the composite.\n   *\n   * @defaultValue light theme\n   */\n  fluentTheme?: PartialTheme | Theme;\n  /**\n   * Custom Icon override for the composite.\n   * A JSX element can be provided to override the default icon.\n   */\n  icons?: TIcons;\n  /**\n   * Locale for the composite.\n   *\n   * @defaultValue English (US)\n   */\n  locale?: CompositeLocale;\n  /**\n   * Whether composite is displayed right-to-left.\n   *\n   * @defaultValue false\n   */\n  rtl?: boolean;\n  /**\n   * A callback function that can be used to provide custom data to Avatars rendered\n   * in Composite.\n   *\n   * This will not affect the displayName shown in the composite.\n   * The displayName throughout the composite will be what is provided to the adapter when the adapter is created.\n   * will be what is provided to the adapter when the adapter is created.\n   */\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n\n  /**\n   * A callback function that can be used to provide custom menu items for a participant in\n   * participant list.\n   */\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n}\n\n/**\n * A base provider {@link React.Context} to wrap components with other required providers\n * (e.g. icons, FluentThemeProvider, LocalizationProvider).\n *\n * Required providers are only wrapped once, with all other instances only passing children.\n *\n * @private\n */\nexport const BaseProvider = (\n  props: BaseCompositeProps<CallCompositeIcons | ChatCompositeIcons | CallWithChatCompositeIcons> & {\n    children: React.ReactNode;\n  }\n): JSX.Element => {\n  const { fluentTheme, rtl, locale } = props;\n\n  const globalLayerHostId = useId('composite-global-hostId');\n\n  /**\n   * Pass only the children if we previously registered icons, and have previously wrapped the children in\n   * FluentThemeProvider and LocalizationProvider\n   */\n  const alreadyWrapped = useBase();\n  if (alreadyWrapped) {\n    return <>{props.children}</>;\n  }\n\n  /**\n   * Before registering fluent icons, we should check DEFAULT_COMPOSITE_ICONS and strip out the key value pairs where value is undefined\n   */\n  const iconsToRegister: { [key: string]: JSX.Element } = {};\n  Object.entries(DEFAULT_COMPOSITE_ICONS).forEach(([key, value]) => {\n    if (value) {\n      iconsToRegister[key] = value;\n    }\n  });\n\n  /**\n   * We register the default icon mappings merged with custom icons provided through props\n   * to ensure all icons render correctly.\n   */\n  registerIcons({ icons: { ...iconsToRegister, ...props.icons } });\n\n  /**\n   * We need to create one context for the AudioProvider to ensure that we only have one instance of the AudioContext.\n   */\n  const compositeAudioContext = new AudioContext();\n  // we use Customizer to override default LayerHost injected to <body />\n  // which stop polluting global dom tree and increase compatibility with react-full-screen\n  const CompositeElement = (\n    <FluentThemeProvider fluentTheme={fluentTheme} rtl={rtl}>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0\" />\n      <Customizer scopedSettings={{ Layer: { hostId: globalLayerHostId } }}>\n        <ACSAudioProvider audioContext={compositeAudioContext}>\n          <WithBackgroundColor>{props.children}</WithBackgroundColor>\n        </ACSAudioProvider>\n      </Customizer>\n      <LayerHost id={globalLayerHostId} className={mergeStyles(globalLayerHostStyle)} />\n    </FluentThemeProvider>\n  );\n  const localizedElement = locale ? LocalizationProvider({ locale, children: CompositeElement }) : CompositeElement;\n  return <BaseContext.Provider value={true}>{localizedElement}</BaseContext.Provider>;\n};\n\n/**\n * @private\n */\nconst BaseContext = createContext<boolean>(false);\n\n/**\n * @private\n */\nconst useBase = (): boolean => useContext(BaseContext);\n\n/**\n * @private\n * Provides a wrapper with a background color to ensure that composites always have a background color.\n * This is necessary to ensure that composites are not transparent,\n * and the background color of it's parent elements doesn't show through the composite.\n */\nconst WithBackgroundColor = (props: { children: React.ReactNode }): JSX.Element => {\n  const { children } = props;\n  const theme = useTheme();\n  const className = mergeStyles({\n    background: theme.semanticColors.bodyBackground,\n    height: '100%',\n    width: '100%',\n    position: 'relative'\n  });\n  return <Stack className={className}>{children}</Stack>;\n};\n"]}