npm - @azure/communication-react - Versions diffs - 1.22.0 → 1.23.0-alpha-202412190017 - Mend

@azure/communication-react 1.22.0 → 1.23.0-alpha-202412190017

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1271) hide show

package/dist/dist-esm/react-components/src/components/MeetingConferencePhoneInfo.js CHANGED Viewed

@@ -22,22 +22,16 @@ export const MeetingConferencePhoneInfoModal = (props) => {
         }
     }, [onDismissMeetingPhoneInfoSettings]);
     const PhoneInfoModalStyle = useMemo(() => themedPhoneInfoModalStyle(theme), [theme]);
-    return React.createElement(React.Fragment, null,
+    return (React.createElement(React.Fragment, null,
         React.createElement(Modal, { titleAriaId: strings === null || strings === void 0 ? void 0 : strings.meetingConferencePhoneInfoModalTitle, isOpen: showModal, onDismiss: onDismiss, isBlocking: true, styles: PhoneInfoModalStyle },
             React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center", className: titleContainerClassName },
                 React.createElement(Text, { role: "heading", "aria-level": 2, className: titleClassName }, strings === null || strings === void 0 ? void 0 : strings.meetingConferencePhoneInfoModalTitle),
-                React.createElement(IconButton, { iconProps: {
-                        iconName: 'Cancel'
-                    }, ariaLabel: strings === null || strings === void 0 ? void 0 : strings.meetingConferencePhoneInfoModalTitle, onClick: onDismiss, style: {
-                        color: theme.palette.black
-                    } })),
-            conferencePhoneInfoList.length === 0 && React.createElement(Stack, { horizontal: true },
-                React.createElement(Text, { className: stepTextStyle }, strings === null || strings === void 0 ? void 0 : strings.meetingConferencePhoneInfoModalNoPhoneAvailable)),
-            conferencePhoneInfoList.length > 0 && React.createElement(Stack, null,
+                React.createElement(IconButton, { iconProps: { iconName: 'Cancel' }, ariaLabel: strings === null || strings === void 0 ? void 0 : strings.meetingConferencePhoneInfoModalTitle, onClick: onDismiss, style: { color: theme.palette.black } })),
+            conferencePhoneInfoList.length === 0 && (React.createElement(Stack, { horizontal: true },
+                React.createElement(Text, { className: stepTextStyle }, strings === null || strings === void 0 ? void 0 : strings.meetingConferencePhoneInfoModalNoPhoneAvailable))),
+            conferencePhoneInfoList.length > 0 && (React.createElement(Stack, null,
                 React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", className: phoneInfoInctructionLine },
-                    React.createElement(Stack.Item, { style: {
-                            display: 'flex'
-                        } },
+                    React.createElement(Stack.Item, { style: { display: 'flex' } },
                         React.createElement(Stack, { horizontal: true, className: phoneInfoStep },
                             React.createElement(Stack, { className: infoConnectionLinkStyle(theme) }),
                             React.createElement(Stack.Item, { className: phoneInfoIcon(theme) },
@@ -45,19 +39,19 @@ export const MeetingConferencePhoneInfoModal = (props) => {
                                     React.createElement(Icon, { iconName: "JoinByPhoneDialStepIcon", className: phoneInfoIconStyle(theme) }))),
                             React.createElement(Stack.Item, null,
                                 React.createElement(Text, { className: stepTextStyle }, strings === null || strings === void 0 ? void 0 : strings.meetingConferencePhoneInfoModalDialIn)))),
-                    React.createElement(Stack.Item, { className: phoneInfoStep }, conferencePhoneInfoList.map((phoneNumber, index) => React.createElement(Stack.Item, { key: index },
+                    React.createElement(Stack.Item, { className: phoneInfoStep }, conferencePhoneInfoList.map((phoneNumber, index) => (React.createElement(Stack.Item, { key: index },
                         React.createElement(Text, { className: phoneInfoTextStyle },
                             _formatPhoneNumber(phoneNumber.phoneNumber, true),
                             ' ',
-                            phoneNumber.isTollFree ? strings.meetingConferencePhoneInfoModalTollFree : strings.meetingConferencePhoneInfoModalToll),
+                            phoneNumber.isTollFree
+                                ? strings.meetingConferencePhoneInfoModalTollFree
+                                : strings.meetingConferencePhoneInfoModalToll),
                         React.createElement("br", null),
                         React.createElement(Text, { className: phoneInfoTextStyle },
                             " ",
-                            formatPhoneNumberInfo(phoneNumber, strings)))))),
+                            formatPhoneNumberInfo(phoneNumber, strings))))))),
                 React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center", className: phoneInfoInctructionLine },
-                    React.createElement(Stack.Item, { style: {
-                            display: 'flex'
-                        } },
+                    React.createElement(Stack.Item, { style: { display: 'flex' } },
                         React.createElement(Stack, { horizontal: true },
                             React.createElement(Stack, { className: infoConnectionLinkStyle(theme) }),
                             React.createElement(Stack.Item, { className: phoneInfoIcon(theme) },
@@ -68,12 +62,10 @@ export const MeetingConferencePhoneInfoModal = (props) => {
                     React.createElement(Text, { className: phoneInfoTextStyle }, formatMeetingId((_a = conferencePhoneInfoList[0]) === null || _a === void 0 ? void 0 : _a.conferenceId))),
                 React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center" },
                     React.createElement(Stack, { horizontal: true },
-                        React.createElement(Stack.Item, { className: phoneInfoIcon(theme), style: {
-                                marginLeft: _pxToRem(2)
-                            } },
+                        React.createElement(Stack.Item, { className: phoneInfoIcon(theme), style: { marginLeft: _pxToRem(2) } },
                             React.createElement(Icon, { iconName: "JoinByPhoneWaitToBeAdmittedIcon", className: phoneInfoIconStyle(theme) })),
                         React.createElement(Stack.Item, null,
-                            React.createElement(Text, { className: stepTextStyle }, strings === null || strings === void 0 ? void 0 : strings.meetingConferencePhoneInfoModalWait)))))));
+                            React.createElement(Text, { className: stepTextStyle }, strings === null || strings === void 0 ? void 0 : strings.meetingConferencePhoneInfoModalWait)))))))));
 };
 /**
  * @internal
@@ -88,7 +80,7 @@ export const formatPhoneNumberLink = (phoneNumber) => {
  */
 export const formatPhoneNumberInfo = (phoneNumber, strings) => {
     const templateText = phoneNumber.country && phoneNumber.city ? strings === null || strings === void 0 ? void 0 : strings.meetingConferencePhoneInfoModalTollGeoData : '';
-    return (templateText === null || templateText === void 0 ? void 0 : templateText.replace('{country}', phoneNumber.country || '').replace('{city}', phoneNumber.city || '').trim()) || '';
+    return ((templateText === null || templateText === void 0 ? void 0 : templateText.replace('{country}', phoneNumber.country || '').replace('{city}', phoneNumber.city || '').trim()) || '');
 };
 /**
  * @internal

package/dist/dist-esm/react-components/src/components/MeetingConferencePhoneInfo.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MeetingConferencePhoneInfo.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/MeetingConferencePhoneInfo.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback } from 'react';\nimport { useMemo } from 'react';\nimport { IModalStyles, Modal, Stack, useTheme, Text, IconButton, Icon } from '@fluentui/react';\nimport { themedPhoneInfoModalStyle, titleClassName, titleContainerClassName, phoneInfoTextStyle, phoneInfoIcon, phoneInfoInctructionLine, phoneInfoStep, stepTextStyle, infoConnectionLinkStyle, phoneInfoIconStyle } from './styles/TeamsMeetingConferenceInfo';\nimport { _preventDismissOnEvent } from '@internal/acs-ui-common';\nimport { useLocale } from '../localization';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { _formatPhoneNumber } from './utils/formatPhoneNumber';\n\n/*\n strings for phone info modal\n * @public\n /\nexport interface MeetingConferencePhoneInfoModalStrings {\n /\n Header for the phone info modal\n /\n meetingConferencePhoneInfoModalTitle: string;\n /\n Phone number instruction\n /\n meetingConferencePhoneInfoModalDialIn: string;\n /\n Meeting ID instruction\n /\n meetingConferencePhoneInfoModalMeetingId: string;\n /\n Wait for phone connection\n /\n meetingConferencePhoneInfoModalWait: string;\n /\n Toll Free Phone Label\n /\n meetingConferencePhoneInfoModalTollFree: string;\n /\n Toll Phone Label\n /\n meetingConferencePhoneInfoModalToll: string;\n /\n Toll Phone Label without geo data\n /\n meetingConferencePhoneInfoModalTollGeoData: string;\n /\n No phone number available message\n /\n meetingConferencePhoneInfoModalNoPhoneAvailable: string;\n}\n\n/\n @public\n * MeetingConferencePhoneInfoModal Component Props.\n /\nexport interface MeetingConferencePhoneInfoModalProps {\n conferencePhoneInfoList: ConferencePhoneInfo[];\n showModal?: boolean;\n onDismissMeetingPhoneInfoSettings?: () => void;\n}\n\n/\n @public\n * a component for setting spoken languages\n /\nexport const MeetingConferencePhoneInfoModal = (props: MeetingConferencePhoneInfoModalProps): JSX.Element => {\n const {\n conferencePhoneInfoList,\n showModal,\n onDismissMeetingPhoneInfoSettings\n } = props;\n const theme = useTheme();\n const strings = useLocale().strings.meetingConferencePhoneInfo;\n const onDismiss = useCallback((): void => {\n if (onDismissMeetingPhoneInfoSettings) {\n onDismissMeetingPhoneInfoSettings();\n }\n }, [onDismissMeetingPhoneInfoSettings]);\n const PhoneInfoModalStyle: Partial<IModalStyles> = useMemo(() => themedPhoneInfoModalStyle(theme), [theme]);\n return <>\n <Modal titleAriaId={strings?.meetingConferencePhoneInfoModalTitle} isOpen={showModal} onDismiss={onDismiss} isBlocking={true} styles={PhoneInfoModalStyle}>\n <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\" className={titleContainerClassName}>\n <Text role=\"heading\" aria-level={2} className={titleClassName}>\n {strings?.meetingConferencePhoneInfoModalTitle}\n </Text>\n <IconButton iconProps={{\n iconName: 'Cancel'\n }} ariaLabel={strings?.meetingConferencePhoneInfoModalTitle} onClick={onDismiss} style={{\n color: theme.palette.black\n }} />\n </Stack>\n {conferencePhoneInfoList.length === 0 && <Stack horizontal>\n <Text className={stepTextStyle}>{strings?.meetingConferencePhoneInfoModalNoPhoneAvailable}</Text>\n </Stack>}\n {conferencePhoneInfoList.length > 0 && <Stack>\n <Stack horizontal horizontalAlign=\"space-between\" className={phoneInfoInctructionLine}>\n <Stack.Item style={{\n display: 'flex'\n }}>\n <Stack horizontal className={phoneInfoStep}>\n <Stack className={infoConnectionLinkStyle(theme)}></Stack>\n <Stack.Item className={phoneInfoIcon(theme)}>\n <Stack verticalAlign=\"center\" horizontalAlign=\"center\">\n <Icon iconName=\"JoinByPhoneDialStepIcon\" className={phoneInfoIconStyle(theme)} />\n </Stack>\n </Stack.Item>\n <Stack.Item>\n <Text className={stepTextStyle}>{strings?.meetingConferencePhoneInfoModalDialIn}</Text>\n </Stack.Item>\n </Stack>\n </Stack.Item>\n <Stack.Item className={phoneInfoStep}>\n {conferencePhoneInfoList.map((phoneNumber, index) => <Stack.Item key={index}>\n <Text className={phoneInfoTextStyle}>\n {_formatPhoneNumber(phoneNumber.phoneNumber, true)}{' '}\n {phoneNumber.isTollFree ? strings.meetingConferencePhoneInfoModalTollFree : strings.meetingConferencePhoneInfoModalToll}\n </Text>\n <br />\n <Text className={phoneInfoTextStyle}> {formatPhoneNumberInfo(phoneNumber, strings)}</Text>\n </Stack.Item>)}\n </Stack.Item>\n </Stack>\n <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\" className={phoneInfoInctructionLine}>\n <Stack.Item style={{\n display: 'flex'\n }}>\n <Stack horizontal>\n <Stack className={infoConnectionLinkStyle(theme)}></Stack>\n <Stack.Item className={phoneInfoIcon(theme)}>\n <Stack verticalAlign=\"center\" horizontalAlign=\"center\">\n <Icon iconName=\"JoinByPhoneConferenceIdIcon\" className={phoneInfoIconStyle(theme)} />\n </Stack>\n </Stack.Item>\n <Stack.Item>\n <Text className={stepTextStyle}>{strings?.meetingConferencePhoneInfoModalMeetingId}</Text>\n </Stack.Item>\n </Stack>\n </Stack.Item>\n <Text className={phoneInfoTextStyle}>{formatMeetingId(conferencePhoneInfoList[0]?.conferenceId)}</Text>\n </Stack>\n <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\">\n <Stack horizontal>\n <Stack.Item className={phoneInfoIcon(theme)} style={{\n marginLeft: _pxToRem(2)\n }}>\n <Icon iconName=\"JoinByPhoneWaitToBeAdmittedIcon\" className={phoneInfoIconStyle(theme)} />\n </Stack.Item>\n <Stack.Item>\n <Text className={stepTextStyle}>{strings?.meetingConferencePhoneInfoModalWait}</Text>\n </Stack.Item>\n </Stack>\n </Stack>\n </Stack>}\n </Modal>\n </>;\n};\n\n/\n @internal\n * format phone number link\n /\nexport const formatPhoneNumberLink = (phoneNumber: ConferencePhoneInfo): string => {\n return `tel:+${phoneNumber.phoneNumber},,${phoneNumber.conferenceId}#`;\n};\n\n/\n @internal\n * format phone number\n /\nexport const formatPhoneNumberInfo = (phoneNumber: ConferencePhoneInfo, strings: MeetingConferencePhoneInfoModalStrings \| undefined): string => {\n const templateText = phoneNumber.country && phoneNumber.city ? strings?.meetingConferencePhoneInfoModalTollGeoData : '';\n return templateText?.replace('{country}', phoneNumber.country \|\| '').replace('{city}', phoneNumber.city \|\| '').trim() \|\| '';\n};\n\n/\n @internal\n * format meeting id\n /\nexport const formatMeetingId = (meetingId?: string): string => {\n if (!meetingId) {\n return '';\n }\n if (meetingId?.length !== 9) {\n return meetingId;\n }\n return [meetingId.slice(0, 3), meetingId.slice(3, 6), meetingId.slice(6, 9)].join(' ') + '#';\n};\n\n/\n @public\n * Information for conference phone info\n */\nexport interface ConferencePhoneInfo {\n phoneNumber: string;\n conferenceId: string;\n isTollFree: boolean;\n country?: string;\n city?: string;\n}"]}
1	+ {"version":3,"file":"MeetingConferencePhoneInfo.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/MeetingConferencePhoneInfo.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback } from 'react';\nimport { useMemo } from 'react';\nimport { IModalStyles, Modal, Stack, useTheme, Text, IconButton, Icon } from '@fluentui/react';\n\nimport {\n themedPhoneInfoModalStyle,\n titleClassName,\n titleContainerClassName,\n phoneInfoTextStyle,\n phoneInfoIcon,\n phoneInfoInctructionLine,\n phoneInfoStep,\n stepTextStyle,\n infoConnectionLinkStyle,\n phoneInfoIconStyle\n} from './styles/TeamsMeetingConferenceInfo';\nimport { _preventDismissOnEvent } from '@internal/acs-ui-common';\nimport { useLocale } from '../localization';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { _formatPhoneNumber } from './utils/formatPhoneNumber';\n\n/*\n strings for phone info modal\n * @public\n /\nexport interface MeetingConferencePhoneInfoModalStrings {\n /\n Header for the phone info modal\n /\n meetingConferencePhoneInfoModalTitle: string;\n /\n Phone number instruction\n /\n meetingConferencePhoneInfoModalDialIn: string;\n /\n Meeting ID instruction\n /\n meetingConferencePhoneInfoModalMeetingId: string;\n /\n Wait for phone connection\n /\n meetingConferencePhoneInfoModalWait: string;\n /\n Toll Free Phone Label\n /\n meetingConferencePhoneInfoModalTollFree: string;\n /\n Toll Phone Label\n /\n meetingConferencePhoneInfoModalToll: string;\n /\n Toll Phone Label without geo data\n /\n meetingConferencePhoneInfoModalTollGeoData: string;\n /\n No phone number available message\n /\n meetingConferencePhoneInfoModalNoPhoneAvailable: string;\n}\n\n/\n @public\n * MeetingConferencePhoneInfoModal Component Props.\n /\nexport interface MeetingConferencePhoneInfoModalProps {\n conferencePhoneInfoList: ConferencePhoneInfo[];\n showModal?: boolean;\n onDismissMeetingPhoneInfoSettings?: () => void;\n}\n\n/\n @public\n * a component for setting spoken languages\n /\nexport const MeetingConferencePhoneInfoModal = (props: MeetingConferencePhoneInfoModalProps): JSX.Element => {\n const { conferencePhoneInfoList, showModal, onDismissMeetingPhoneInfoSettings } = props;\n\n const theme = useTheme();\n const strings = useLocale().strings.meetingConferencePhoneInfo;\n\n const onDismiss = useCallback((): void => {\n if (onDismissMeetingPhoneInfoSettings) {\n onDismissMeetingPhoneInfoSettings();\n }\n }, [onDismissMeetingPhoneInfoSettings]);\n\n const PhoneInfoModalStyle: Partial<IModalStyles> = useMemo(() => themedPhoneInfoModalStyle(theme), [theme]);\n\n return (\n <>\n <Modal\n titleAriaId={strings?.meetingConferencePhoneInfoModalTitle}\n isOpen={showModal}\n onDismiss={onDismiss}\n isBlocking={true}\n styles={PhoneInfoModalStyle}\n >\n <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\" className={titleContainerClassName}>\n <Text role=\"heading\" aria-level={2} className={titleClassName}>\n {strings?.meetingConferencePhoneInfoModalTitle}\n </Text>\n <IconButton\n iconProps={{ iconName: 'Cancel' }}\n ariaLabel={strings?.meetingConferencePhoneInfoModalTitle}\n onClick={onDismiss}\n style={{ color: theme.palette.black }}\n />\n </Stack>\n {conferencePhoneInfoList.length === 0 && (\n <Stack horizontal>\n <Text className={stepTextStyle}>{strings?.meetingConferencePhoneInfoModalNoPhoneAvailable}</Text>\n </Stack>\n )}\n {conferencePhoneInfoList.length > 0 && (\n <Stack>\n <Stack horizontal horizontalAlign=\"space-between\" className={phoneInfoInctructionLine}>\n <Stack.Item style={{ display: 'flex' }}>\n <Stack horizontal className={phoneInfoStep}>\n <Stack className={infoConnectionLinkStyle(theme)}></Stack>\n <Stack.Item className={phoneInfoIcon(theme)}>\n <Stack verticalAlign=\"center\" horizontalAlign=\"center\">\n <Icon iconName=\"JoinByPhoneDialStepIcon\" className={phoneInfoIconStyle(theme)} />\n </Stack>\n </Stack.Item>\n <Stack.Item>\n <Text className={stepTextStyle}>{strings?.meetingConferencePhoneInfoModalDialIn}</Text>\n </Stack.Item>\n </Stack>\n </Stack.Item>\n <Stack.Item className={phoneInfoStep}>\n {conferencePhoneInfoList.map((phoneNumber, index) => (\n <Stack.Item key={index}>\n <Text className={phoneInfoTextStyle}>\n {_formatPhoneNumber(phoneNumber.phoneNumber, true)}{' '}\n {phoneNumber.isTollFree\n ? strings.meetingConferencePhoneInfoModalTollFree\n : strings.meetingConferencePhoneInfoModalToll}\n </Text>\n <br />\n <Text className={phoneInfoTextStyle}> {formatPhoneNumberInfo(phoneNumber, strings)}</Text>\n </Stack.Item>\n ))}\n </Stack.Item>\n </Stack>\n <Stack\n horizontal\n horizontalAlign=\"space-between\"\n verticalAlign=\"center\"\n className={phoneInfoInctructionLine}\n >\n <Stack.Item style={{ display: 'flex' }}>\n <Stack horizontal>\n <Stack className={infoConnectionLinkStyle(theme)}></Stack>\n <Stack.Item className={phoneInfoIcon(theme)}>\n <Stack verticalAlign=\"center\" horizontalAlign=\"center\">\n <Icon iconName=\"JoinByPhoneConferenceIdIcon\" className={phoneInfoIconStyle(theme)} />\n </Stack>\n </Stack.Item>\n <Stack.Item>\n <Text className={stepTextStyle}>{strings?.meetingConferencePhoneInfoModalMeetingId}</Text>\n </Stack.Item>\n </Stack>\n </Stack.Item>\n <Text className={phoneInfoTextStyle}>{formatMeetingId(conferencePhoneInfoList[0]?.conferenceId)}</Text>\n </Stack>\n <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\">\n <Stack horizontal>\n <Stack.Item className={phoneInfoIcon(theme)} style={{ marginLeft: _pxToRem(2) }}>\n <Icon iconName=\"JoinByPhoneWaitToBeAdmittedIcon\" className={phoneInfoIconStyle(theme)} />\n </Stack.Item>\n <Stack.Item>\n <Text className={stepTextStyle}>{strings?.meetingConferencePhoneInfoModalWait}</Text>\n </Stack.Item>\n </Stack>\n </Stack>\n </Stack>\n )}\n </Modal>\n </>\n );\n};\n\n/\n @internal\n * format phone number link\n /\nexport const formatPhoneNumberLink = (phoneNumber: ConferencePhoneInfo): string => {\n return `tel:+${phoneNumber.phoneNumber},,${phoneNumber.conferenceId}#`;\n};\n\n/\n @internal\n * format phone number\n /\nexport const formatPhoneNumberInfo = (\n phoneNumber: ConferencePhoneInfo,\n strings: MeetingConferencePhoneInfoModalStrings \| undefined\n): string => {\n const templateText =\n phoneNumber.country && phoneNumber.city ? strings?.meetingConferencePhoneInfoModalTollGeoData : '';\n return (\n templateText\n ?.replace('{country}', phoneNumber.country \|\| '')\n .replace('{city}', phoneNumber.city \|\| '')\n .trim() \|\| ''\n );\n};\n\n/\n @internal\n * format meeting id\n /\nexport const formatMeetingId = (meetingId?: string): string => {\n if (!meetingId) {\n return '';\n }\n if (meetingId?.length !== 9) {\n return meetingId;\n }\n\n return [meetingId.slice(0, 3), meetingId.slice(3, 6), meetingId.slice(6, 9)].join(' ') + '#';\n};\n\n/\n @public\n * Information for conference phone info\n */\nexport interface ConferencePhoneInfo {\n phoneNumber: string;\n conferenceId: string;\n isTollFree: boolean;\n country?: string;\n city?: string;\n}\n"]}

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

@@ -56,20 +56,12 @@ export const MeetingReactionOverlay = (props) => {
         return () => currentObserver.disconnect();
     }, [videoTileRef]);
     if (overlayMode === 'grid-tiles') {
-        return React.createElement("div", { ref: videoTileRef, style: {
-                width: '100%',
-                height: '100%',
-                pointerEvents: 'none'
-            } },
-            React.createElement(ParticipantVideoTileOverlay, { emojiSize: emojiSizePx, reaction: reaction, reactionResources: reactionResources }));
+        return (React.createElement("div", { ref: videoTileRef, style: { width: '100%', height: '100%', pointerEvents: 'none' } },
+            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%',
-                pointerEvents: 'none'
-            } },
-            React.createElement(RemoteContentShareReactionOverlay, { hostDivHeight: divHeight, hostDivWidth: divWidth, reactionResources: reactionResources, localParticipant: localParticipant, remoteParticipants: remoteParticipants }));
+        return (React.createElement("div", { ref: videoTileRef, style: { width: '100%', height: '100%', pointerEvents: 'none' } },
+            React.createElement(RemoteContentShareReactionOverlay, { hostDivHeight: divHeight, hostDivWidth: divWidth, reactionResources: reactionResources, localParticipant: localParticipant, remoteParticipants: remoteParticipants })));
     }
     else {
         return React.createElement(React.Fragment, null);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"MeetingReactionOverlay.js","sourceRoot":"","sources":["~~../../../../../preprocess-dist/~~react-components/src/components/MeetingReactionOverlay.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;~~AAGlC~~,OAAO,KAAK,EAAE,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjE,OAAO,EAAE,2BAA2B,EAAE,MAAM,4CAA4C,CAAC;AACzF,OAAO,EAAE,iCAAiC,EAAE,MAAM,kDAAkD,CAAC;AAgCrG;;;GAGG;AACH,MAAM,yBAAyB,GAAG,EAAE,CAAC;AAErC;;;GAGG;AACH,MAAM,yBAAyB,GAAG,EAAE,CAAC;AAErC;;;GAGG;AACH,MAAM,oCAAoC,GAAG,CAAC,CAAC;AAE/C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAkC,EAAe,EAAE;IACxF,MAAM,~~EACJ~~,WAAW,~~EACX~~,QAAQ,~~EACR~~,iBAAiB,~~EACjB~~,gBAAgB,~~EAChB~~,kBAAkB,~~EACnB~~,GAAG,KAAK,CAAC;~~IACV~~,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAClD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC9C,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC5C,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;~~IAClD~~,MAAM,QAAQ,GAAG,MAAM,~~CAAC~~,IAAI,cAAc,CAAC,CAAC,OAAO,EAAQ,EAAE;;~~QAC3D~~,MAAM,OAAO,GAAG,MAAA,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,0CAAE,WAAW,CAAC;QAC3C,MAAM,KAAK,GAAG,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QACxD,MAAM,MAAM,GAAG,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QAC1D,MAAM,qBAAqB,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,oCAAoC,CAAC;QAC7F,yDAAyD;QACzD,IAAI,qBAAqB,KAAK,WAAW,EAAE,CAAC;YAC1C,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,qBAAqB,EAAE,yBAAyB,CAAC,EAAE,yBAAyB,CAAC,CAAC,CAAC;QAClH,CAAC;~~QACD~~,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;YACzB,YAAY,CAAC,MAAM,CAAC,CAAC;QACvB,CAAC;~~QACD~~,IAAI,KAAK,KAAK,QAAQ,EAAE,CAAC;YACvB,WAAW,CAAC,KAAK,CAAC,CAAC;QACrB,CAAC;IACH,CAAC,CAAC,~~CAAC~~,CAAC;~~IACJ~~,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,YAAY,CAAC,OAAO,EAAE,CAAC;YACzB,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QACjD,CAAC;QACD,MAAM,eAAe,GAAG,QAAQ,CAAC,OAAO,CAAC;QACzC,OAAO,GAAG,EAAE,CAAC,eAAe,CAAC,UAAU,EAAE,CAAC;IAC5C,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;~~IACnB~~,IAAI,WAAW,KAAK,YAAY,EAAE,CAAC;QACjC,OAAO,6BAAK,GAAG,EAAE,YAAY,EAAE,KAAK,EAAE~~;gBACpC~~,KAAK,EAAE,MAAM~~;gBACb~~,MAAM,EAAE,MAAM~~;gBACd~~,aAAa,EAAE,MAAM;~~aACtB;YACG~~,oBAAC,2BAA2B,~~IAAC~~,SAAS,EAAE,WAAW,~~EAAE~~,QAAQ,EAAE,QAAQ,~~EAAE~~,iBAAiB,EAAE,iBAAiB,~~GAAI~~,~~CAC7G~~,CAAC;~~IACX~~,CAAC;SAAM,IAAI,KAAK,CAAC,WAAW,KAAK,cAAc,IAAI,KAAK,CAAC,WAAW,KAAK,eAAe,EAAE,CAAC;QACzF,OAAO,6BAAK,GAAG,EAAE,YAAY,EAAE,KAAK,EAAE~~;gBACpC~~,KAAK,EAAE,MAAM~~;gBACb~~,MAAM,EAAE,MAAM~~;gBACd~~,aAAa,EAAE,MAAM;~~aACtB;YACG~~,oBAAC,iCAAiC,~~IAAC~~,aAAa,EAAE,SAAS,~~EAAE~~,YAAY,EAAE,QAAQ,~~EAAE~~,iBAAiB,EAAE,iBAAiB,~~EAAE~~,gBAAgB,EAAE,gBAAgB,~~EAAE~~,kBAAkB,EAAE,kBAAkB,~~GAAI~~,~~CACrM~~,CAAC;~~IACX~~,CAAC;SAAM,CAAC;QACN,OAAO,yCAAK,CAAC;IACf,CAAC;AACH,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { OverlayModeTypes, Reaction, ReactionResources, VideoGalleryLocalParticipant, VideoGalleryRemoteParticipant } from '../types';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\nimport { ParticipantVideoTileOverlay } from './VideoGallery/ParticipantVideoTileOverlay';\nimport { RemoteContentShareReactionOverlay } from './VideoGallery/RemoteContentShareReactionOverlay';\n\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/\n Emoji max size\n * @internal\n /\nconst DEFAULT_EMOJI_MAX_SIZE_PX = 70;\n\n/\n Emoji min size\n * @internal\n /\nconst DEFAULT_EMOJI_MIN_SIZE_PX = 32;\n\n/\n Emoji resize scale constant\n * @internal\n /\nconst REACTION_EMOJI_RESIZE_SCALE_CONSTANT = 3;\n\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 {\n overlayMode~~,\n~~ reaction~~,\n~~ reactionResources~~,\n~~ localParticipant~~,\n~~ remoteParticipants\n } = 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 const observer = useRef(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 if (height !== divHeight) {\n setDivHeight(height);\n }\n if (width !== divWidth) {\n setDivWidth(width);\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 if (overlayMode === 'grid-tiles') {\n return <div ref={videoTileRef} style={{\n width: '100%'~~,\n~~ height: '100%'~~,\n~~ pointerEvents: 'none'\n }}>\n <ParticipantVideoTileOverlay emojiSize={emojiSizePx} reaction={reaction} reactionResources={reactionResources} />\n </div~~>;\~~n } else if (props.overlayMode === 'screen-share' \|\| props.overlayMode === 'content-share') {\n return <div ref={videoTileRef} style={{\n width: '100%'~~,\n~~ height: '100%'~~,\n~~ pointerEvents: 'none'\n }}>\n <RemoteContentShareReactionOverlay hostDivHeight={divHeight} hostDivWidth={divWidth} reactionResources={reactionResources} localParticipant={localParticipant} remoteParticipants={remoteParticipants} />\n </div~~>;\~~n } else {\n return <></>;\n }\n};"]}
1	+ {"version":3,"file":"MeetingReactionOverlay.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/MeetingReactionOverlay.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AASlC,OAAO,KAAK,EAAE,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjE,OAAO,EAAE,2BAA2B,EAAE,MAAM,4CAA4C,CAAC;AACzF,OAAO,EAAE,iCAAiC,EAAE,MAAM,kDAAkD,CAAC;AAgCrG;;;GAGG;AACH,MAAM,yBAAyB,GAAG,EAAE,CAAC;AAErC;;;GAGG;AACH,MAAM,yBAAyB,GAAG,EAAE,CAAC;AAErC;;;GAGG;AACH,MAAM,oCAAoC,GAAG,CAAC,CAAC;AAE/C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAkC,EAAe,EAAE;IACxF,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,GAAG,KAAK,CAAC;IACjG,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAClD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC9C,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC5C,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAElD,MAAM,QAAQ,GAAG,MAAM,CACrB,IAAI,cAAc,CAAC,CAAC,OAAO,EAAQ,EAAE;;QACnC,MAAM,OAAO,GAAG,MAAA,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,0CAAE,WAAW,CAAC;QAC3C,MAAM,KAAK,GAAG,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QACxD,MAAM,MAAM,GAAG,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QAC1D,MAAM,qBAAqB,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,oCAAoC,CAAC;QAC7F,yDAAyD;QACzD,IAAI,qBAAqB,KAAK,WAAW,EAAE,CAAC;YAC1C,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,qBAAqB,EAAE,yBAAyB,CAAC,EAAE,yBAAyB,CAAC,CAAC,CAAC;QAClH,CAAC;QAED,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;YACzB,YAAY,CAAC,MAAM,CAAC,CAAC;QACvB,CAAC;QAED,IAAI,KAAK,KAAK,QAAQ,EAAE,CAAC;YACvB,WAAW,CAAC,KAAK,CAAC,CAAC;QACrB,CAAC;IACH,CAAC,CAAC,CACH,CAAC;IAEF,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,YAAY,CAAC,OAAO,EAAE,CAAC;YACzB,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QACjD,CAAC;QACD,MAAM,eAAe,GAAG,QAAQ,CAAC,OAAO,CAAC;QACzC,OAAO,GAAG,EAAE,CAAC,eAAe,CAAC,UAAU,EAAE,CAAC;IAC5C,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,IAAI,WAAW,KAAK,YAAY,EAAE,CAAC;QACjC,OAAO,CACL,6BAAK,GAAG,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,EAAE;YACrF,oBAAC,2BAA2B,IAC1B,SAAS,EAAE,WAAW,EACtB,QAAQ,EAAE,QAAQ,EAClB,iBAAiB,EAAE,iBAAiB,GACpC,CACE,CACP,CAAC;IACJ,CAAC;SAAM,IAAI,KAAK,CAAC,WAAW,KAAK,cAAc,IAAI,KAAK,CAAC,WAAW,KAAK,eAAe,EAAE,CAAC;QACzF,OAAO,CACL,6BAAK,GAAG,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,EAAE;YACrF,oBAAC,iCAAiC,IAChC,aAAa,EAAE,SAAS,EACxB,YAAY,EAAE,QAAQ,EACtB,iBAAiB,EAAE,iBAAiB,EACpC,gBAAgB,EAAE,gBAAgB,EAClC,kBAAkB,EAAE,kBAAkB,GACtC,CACE,CACP,CAAC;IACJ,CAAC;SAAM,CAAC;QACN,OAAO,yCAAK,CAAC;IACf,CAAC;AACH,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n OverlayModeTypes,\n Reaction,\n ReactionResources,\n VideoGalleryLocalParticipant,\n VideoGalleryRemoteParticipant\n} from '../types';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\nimport { ParticipantVideoTileOverlay } from './VideoGallery/ParticipantVideoTileOverlay';\nimport { RemoteContentShareReactionOverlay } from './VideoGallery/RemoteContentShareReactionOverlay';\n\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/\n Emoji max size\n * @internal\n /\nconst DEFAULT_EMOJI_MAX_SIZE_PX = 70;\n\n/\n Emoji min size\n * @internal\n /\nconst DEFAULT_EMOJI_MIN_SIZE_PX = 32;\n\n/\n Emoji resize scale constant\n * @internal\n /\nconst REACTION_EMOJI_RESIZE_SCALE_CONSTANT = 3;\n\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%', pointerEvents: 'none' }}>\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%', pointerEvents: 'none' }}>\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"]}

package/dist/dist-esm/react-components/src/components/MentionPopover.d.ts ADDED Viewed

@@ -0,0 +1,121 @@
+import React from 'react';
+/**
+ * Props for {@link _MentionPopover}.
+ *
+ * @internal
+ */
+export interface _MentionPopoverProps {
+    /**
+     * Array of mention suggestions used to populate the suggestion list
+     */
+    suggestions: Mention[];
+    /**
+     * Index of the currently focused suggestion, if any
+     */
+    activeSuggestionIndex?: number;
+    /**
+     * Optional string used as mention popover's title.
+     * @defaultValue `Suggestions`
+     */
+    title?: string;
+    /**
+     * Element to anchor the popover to.
+     */
+    target: React.RefObject<Element>;
+    /**
+     * When rendering the popover, where to position it relative to the target.
+     */
+    targetPositionOffset?: {
+        top: number;
+        left: number;
+    };
+    /**
+     * Where to display the suggestions relative to the target.
+     * @defaultValue `above`
+     */
+    location?: 'above' | 'below';
+    /**
+     * Callback called when a mention suggestion is selected.
+     */
+    onSuggestionSelected: (suggestion: Mention) => void;
+    /**
+     * Callback to invoke when the popover is dismissed
+     */
+    onDismiss?: () => void;
+    /**
+     * Optional callback to render an item of the mention suggestions list.
+     */
+    onRenderSuggestionItem?: (suggestion: Mention, onSuggestionSelected: (suggestion: Mention) => void, isActive: boolean) => JSX.Element;
+}
+/**
+ * Options to lookup suggestions in the mention scenario.
+ *
+ * @beta
+ */
+export interface MentionLookupOptions {
+    /**
+     * Optional string to set trigger keyword for mention a specific participant.
+     *
+     * @defaultValue `@`
+     */
+    trigger?: string;
+    /**
+     * Optional callback to fetch a list of mention suggestions base on the query.
+     */
+    onQueryUpdated: (query: string) => Promise<Mention[]>;
+    /**
+     * Optional callback to render an item of the mention suggestions list.
+     */
+    onRenderSuggestionItem?: (suggestion: Mention, onSuggestionSelected: (suggestion: Mention) => void, isActive: boolean) => JSX.Element;
+}
+/**
+ * Options to display suggestions in the mention scenario.
+ *
+ * @beta
+ */
+export interface MentionDisplayOptions {
+    /**
+     * Optional callback for customizing the mention renderer in a message thread.
+     */
+    onRenderMention?: (mention: Mention, defaultOnRender: (mention: Mention) => JSX.Element) => JSX.Element;
+}
+/**
+ * Options to lookup suggestions and display mentions in the mention scenario.
+ *
+ * @beta
+ */
+export type MentionOptions = {
+    lookupOptions?: MentionLookupOptions;
+    displayOptions?: MentionDisplayOptions;
+};
+/**
+ * Mention's state, as reflected in the UI.
+ *
+ * @beta
+ */
+export interface Mention {
+    /** ID of a mention */
+    id: string;
+    /** Display text of a mention */
+    displayText: string;
+    /** Optional React element to render an item icon of a mention suggestion */
+    icon?: JSX.Element;
+}
+/**
+ * Strings of {@link _MentionPopover} that can be overridden.
+ *
+ * @beta
+ */
+export interface MentionPopoverStrings {
+    /**
+     * Header text for MentionPopover
+     */
+    mentionPopoverHeader: string;
+}
+/**
+ * Component to render a pop-up of mention suggestions.
+ *
+ * @internal
+ */
+export declare const _MentionPopover: (props: _MentionPopoverProps) => JSX.Element;
+//# sourceMappingURL=MentionPopover.d.ts.map

package/dist/dist-esm/react-components/src/components/MentionPopover.js ADDED Viewed

@@ -0,0 +1,126 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React, { useEffect, useRef, useState, useCallback } from 'react';
+import { Persona, PersonaSize, Stack, mergeStyles, useTheme } from '@fluentui/react';
+import { mergeClasses } from '@fluentui/react-components';
+import { mentionPopoverContainerStyle, headerStyleThemed, suggestionItemStackStyle, suggestionItemWrapperStyle, useSuggestionListStyle } from './styles/MentionPopover.style';
+/* @conditional-compile-remove(mention) */
+import { useIdentifiers } from '../identifiers';
+import { useLocale } from '../localization';
+import { useDefaultStackStyles } from './styles/Stack.style';
+/**
+ * Component to render a pop-up of mention suggestions.
+ *
+ * @internal
+ */
+export const _MentionPopover = (props) => {
+    const { suggestions, activeSuggestionIndex, title, target, targetPositionOffset, onRenderSuggestionItem, onSuggestionSelected, onDismiss, location } = props;
+    const theme = useTheme();
+    /* @conditional-compile-remove(mention) */
+    const ids = useIdentifiers();
+    const localeStrings = useLocale().strings;
+    const popoverRef = useRef();
+    const suggestionsListRef = useRef(null);
+    const [position, setPosition] = useState();
+    const [hoveredSuggestion, setHoveredSuggestion] = useState(undefined);
+    const suggestionListStyle = useSuggestionListStyle();
+    const defaultStackStyles = useDefaultStackStyles();
+    const dismissPopoverWhenClickingOutside = useCallback((e) => {
+        const target = e.target;
+        if (popoverRef.current && !popoverRef.current.contains(target)) {
+            onDismiss && onDismiss();
+        }
+    }, [onDismiss]);
+    useEffect(() => {
+        if (suggestionsListRef.current && activeSuggestionIndex !== undefined && activeSuggestionIndex >= 0) {
+            const selectedItem = suggestionsListRef.current.children[activeSuggestionIndex];
+            if (selectedItem) {
+                selectedItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+            }
+        }
+    }, [activeSuggestionIndex]);
+    useEffect(() => {
+        window && window.addEventListener('click', dismissPopoverWhenClickingOutside);
+        return () => {
+            window && window.removeEventListener('click', dismissPopoverWhenClickingOutside);
+        };
+    }, [dismissPopoverWhenClickingOutside]);
+    // Determine popover position
+    useEffect(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const rect = (_a = target === null || target === void 0 ? void 0 : target.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        const maxWidth = 200;
+        const finalPosition = { maxWidth };
+        // Figure out whether it will fit horizontally
+        const leftOffset = (_b = targetPositionOffset === null || targetPositionOffset === void 0 ? void 0 : targetPositionOffset.left) !== null && _b !== void 0 ? _b : 0;
+        if (leftOffset + maxWidth > ((_c = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _c !== void 0 ? _c : 0)) {
+            finalPosition.right = ((_d = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _d !== void 0 ? _d : 0) - leftOffset;
+        }
+        else {
+            finalPosition.left = leftOffset;
+        }
+        // Offset between cursor and mention popover
+        const verticalOffset = 4;
+        if (location === 'below') {
+            finalPosition.top = ((_e = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _e !== void 0 ? _e : 0) + ((_f = targetPositionOffset === null || targetPositionOffset === void 0 ? void 0 : targetPositionOffset.top) !== null && _f !== void 0 ? _f : 0) + verticalOffset;
+        }
+        else {
+            // (location === 'above')
+            finalPosition.bottom = ((_g = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _g !== void 0 ? _g : 0) - ((_h = targetPositionOffset === null || targetPositionOffset === void 0 ? void 0 : targetPositionOffset.top) !== null && _h !== void 0 ? _h : 0) + verticalOffset;
+        }
+        setPosition(finalPosition);
+    }, [location, target, targetPositionOffset]);
+    const handleOnKeyDown = useCallback((e) => {
+        switch (e.key) {
+            case 'Escape':
+                onDismiss && onDismiss();
+                break;
+            default:
+                break;
+        }
+    }, [onDismiss]);
+    const personaRenderer = useCallback((displayName) => {
+        const avatarOptions = {
+            text: displayName.trim(),
+            size: PersonaSize.size24,
+            initialsColor: theme.palette.neutralLight,
+            initialsTextColor: theme.palette.neutralSecondary,
+            showOverflowTooltip: false,
+            showUnknownPersonaCoin: false
+        };
+        return React.createElement(Persona, Object.assign({}, avatarOptions));
+    }, [theme]);
+    const defaultOnRenderSuggestionItem = useCallback((suggestion, onSuggestionSelected, active) => {
+        return (React.createElement("div", { "data-is-focusable": true, "data-ui-id": ids.mentionSuggestionItem, key: suggestion.id, onClick: () => onSuggestionSelected(suggestion), onMouseEnter: () => setHoveredSuggestion(suggestion), onMouseLeave: () => setHoveredSuggestion(undefined), onKeyDown: (e) => {
+                handleOnKeyDown(e);
+            }, className: suggestionItemWrapperStyle(theme) },
+            React.createElement(Stack, { horizontal: true, className: suggestionItemStackStyle(theme, (hoveredSuggestion === null || hoveredSuggestion === void 0 ? void 0 : hoveredSuggestion.id) === suggestion.id, active) }, personaRenderer(suggestion.displayText))));
+    }, [
+        handleOnKeyDown,
+        theme,
+        /* @conditional-compile-remove(mention) */
+        ids,
+        hoveredSuggestion,
+        personaRenderer
+    ]);
+    const getHeaderTitle = useCallback(() => {
+        if (title) {
+            return title;
+        }
+        /* @conditional-compile-remove(mention) */
+        return localeStrings.mentionPopover.mentionPopoverHeader;
+        return '';
+    }, [localeStrings, title]);
+    return (React.createElement("div", { ref: popoverRef }, position && (React.createElement(Stack, { "data-testid": 'mention-suggestion-list-container', className: mergeStyles({
+            maxHeight: 212,
+            maxWidth: position.maxWidth
+        }, mentionPopoverContainerStyle(theme), Object.assign(Object.assign({}, position), { position: 'absolute' })) },
+        React.createElement(Stack.Item, { styles: headerStyleThemed(theme), "aria-label": title }, getHeaderTitle()),
+        React.createElement("div", { className: mergeClasses(defaultStackStyles.root, suggestionListStyle.root), "data-ui-id": ids.mentionSuggestionList, ref: suggestionsListRef }, suggestions.map((suggestion, index) => {
+            const active = index === activeSuggestionIndex;
+            return onRenderSuggestionItem
+                ? onRenderSuggestionItem(suggestion, onSuggestionSelected, active)
+                : defaultOnRenderSuggestionItem(suggestion, onSuggestionSelected, active);
+        }))))));
+};
+//# sourceMappingURL=MentionPopover.js.map

package/dist/dist-esm/react-components/src/components/MentionPopover.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"MentionPopover.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/MentionPopover.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\nimport { Persona, PersonaSize, Stack, mergeStyles, useTheme } from '@fluentui/react';\nimport { mergeClasses } from '@fluentui/react-components';\nimport {\n mentionPopoverContainerStyle,\n headerStyleThemed,\n suggestionItemStackStyle,\n suggestionItemWrapperStyle,\n useSuggestionListStyle\n} from './styles/MentionPopover.style';\n/* @conditional-compile-remove(mention) */\nimport { useIdentifiers } from '../identifiers';\nimport { useLocale } from '../localization';\nimport { useDefaultStackStyles } from './styles/Stack.style';\n\n/**\n * Props for {@link _MentionPopover}.\n *\n * @internal\n */\nexport interface _MentionPopoverProps {\n /**\n * Array of mention suggestions used to populate the suggestion list\n */\n suggestions: Mention[];\n /**\n * Index of the currently focused suggestion, if any\n */\n activeSuggestionIndex?: number;\n /**\n * Optional string used as mention popover's title.\n * @defaultValue `Suggestions`\n */\n title?: string;\n /**\n * Element to anchor the popover to.\n */\n target: React.RefObject<Element>;\n /**\n * When rendering the popover, where to position it relative to the target.\n */\n targetPositionOffset?: { top: number; left: number };\n /**\n * Where to display the suggestions relative to the target.\n * @defaultValue `above`\n */\n location?: 'above' | 'below';\n /**\n * Callback called when a mention suggestion is selected.\n */\n onSuggestionSelected: (suggestion: Mention) => void;\n /**\n * Callback to invoke when the popover is dismissed\n */\n onDismiss?: () => void;\n /**\n * Optional callback to render an item of the mention suggestions list.\n */\n onRenderSuggestionItem?: (\n suggestion: Mention,\n onSuggestionSelected: (suggestion: Mention) => void,\n isActive: boolean\n ) => JSX.Element;\n}\n\n/**\n * Options to lookup suggestions in the mention scenario.\n *\n * @beta\n */\nexport interface MentionLookupOptions {\n /**\n * Optional string to set trigger keyword for mention a specific participant.\n *\n * @defaultValue `@`\n */\n trigger?: string;\n /**\n * Optional callback to fetch a list of mention suggestions base on the query.\n */\n onQueryUpdated: (query: string) => Promise<Mention[]>;\n /**\n * Optional callback to render an item of the mention suggestions list.\n */\n onRenderSuggestionItem?: (\n suggestion: Mention,\n onSuggestionSelected: (suggestion: Mention) => void,\n isActive: boolean\n ) => JSX.Element;\n}\n\n/**\n * Options to display suggestions in the mention scenario.\n *\n * @beta\n */\nexport interface MentionDisplayOptions {\n /**\n * Optional callback for customizing the mention renderer in a message thread.\n */\n onRenderMention?: (mention: Mention, defaultOnRender: (mention: Mention) => JSX.Element) => JSX.Element;\n}\n\n/**\n * Options to lookup suggestions and display mentions in the mention scenario.\n *\n * @beta\n */\nexport type MentionOptions = {\n lookupOptions?: MentionLookupOptions;\n displayOptions?: MentionDisplayOptions;\n};\n\n/**\n * Mention's state, as reflected in the UI.\n *\n * @beta\n */\nexport interface Mention {\n /** ID of a mention */\n id: string;\n /** Display text of a mention */\n displayText: string;\n /** Optional React element to render an item icon of a mention suggestion */\n icon?: JSX.Element;\n}\n\n/**\n * Strings of {@link _MentionPopover} that can be overridden.\n *\n * @beta\n */\nexport interface MentionPopoverStrings {\n /**\n * Header text for MentionPopover\n */\n mentionPopoverHeader: string;\n}\n\n/**\n * Component to render a pop-up of mention suggestions.\n *\n * @internal\n */\nexport const _MentionPopover = (props: _MentionPopoverProps): JSX.Element => {\n interface Position {\n left?: number;\n right?: number;\n top?: number;\n bottom?: number;\n maxWidth?: number;\n }\n\n const {\n suggestions,\n activeSuggestionIndex,\n title,\n target,\n targetPositionOffset,\n onRenderSuggestionItem,\n onSuggestionSelected,\n onDismiss,\n location\n } = props;\n\n const theme = useTheme();\n /* @conditional-compile-remove(mention) */\n const ids = useIdentifiers();\n const localeStrings = useLocale().strings;\n const popoverRef = useRef() as React.MutableRefObject<HTMLDivElement>;\n const suggestionsListRef = useRef<HTMLDivElement>(null);\n\n const [position, setPosition] = useState<Position | undefined>();\n const [hoveredSuggestion, setHoveredSuggestion] = useState<Mention | undefined>(undefined);\n\n const suggestionListStyle = useSuggestionListStyle();\n const defaultStackStyles = useDefaultStackStyles();\n\n const dismissPopoverWhenClickingOutside = useCallback(\n (e: MouseEvent) => {\n const target = e.target as HTMLElement;\n if (popoverRef.current && !popoverRef.current.contains(target)) {\n onDismiss && onDismiss();\n }\n },\n [onDismiss]\n );\n\n useEffect(() => {\n if (suggestionsListRef.current && activeSuggestionIndex !== undefined && activeSuggestionIndex >= 0) {\n const selectedItem = suggestionsListRef.current.children[activeSuggestionIndex];\n if (selectedItem) {\n selectedItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n }\n }\n }, [activeSuggestionIndex]);\n\n useEffect(() => {\n window && window.addEventListener('click', dismissPopoverWhenClickingOutside);\n return () => {\n window && window.removeEventListener('click', dismissPopoverWhenClickingOutside);\n };\n }, [dismissPopoverWhenClickingOutside]);\n\n // Determine popover position\n useEffect(() => {\n const rect = target?.current?.getBoundingClientRect();\n const maxWidth = 200;\n const finalPosition: Position = { maxWidth };\n\n // Figure out whether it will fit horizontally\n const leftOffset = targetPositionOffset?.left ?? 0;\n if (leftOffset + maxWidth > (rect?.width ?? 0)) {\n finalPosition.right = (rect?.width ?? 0) - leftOffset;\n } else {\n finalPosition.left = leftOffset;\n }\n // Offset between cursor and mention popover\n const verticalOffset = 4;\n if (location === 'below') {\n finalPosition.top = (rect?.height ?? 0) + (targetPositionOffset?.top ?? 0) + verticalOffset;\n } else {\n // (location === 'above')\n finalPosition.bottom = (rect?.height ?? 0) - (targetPositionOffset?.top ?? 0) + verticalOffset;\n }\n setPosition(finalPosition);\n }, [location, target, targetPositionOffset]);\n\n const handleOnKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLDivElement>) => {\n switch (e.key) {\n case 'Escape':\n onDismiss && onDismiss();\n break;\n default:\n break;\n }\n },\n [onDismiss]\n );\n\n const personaRenderer = useCallback(\n (displayName: string): JSX.Element => {\n const avatarOptions = {\n text: displayName.trim(),\n size: PersonaSize.size24,\n initialsColor: theme.palette.neutralLight,\n initialsTextColor: theme.palette.neutralSecondary,\n showOverflowTooltip: false,\n showUnknownPersonaCoin: false\n };\n\n return <Persona {...avatarOptions} />;\n },\n [theme]\n );\n\n const defaultOnRenderSuggestionItem = useCallback(\n (suggestion: Mention, onSuggestionSelected: (suggestion: Mention) => void, active: boolean): JSX.Element => {\n return (\n <div\n data-is-focusable={true}\n /* @conditional-compile-remove(mention) */\n data-ui-id={ids.mentionSuggestionItem}\n key={suggestion.id}\n onClick={() => onSuggestionSelected(suggestion)}\n onMouseEnter={() => setHoveredSuggestion(suggestion)}\n onMouseLeave={() => setHoveredSuggestion(undefined)}\n onKeyDown={(e) => {\n handleOnKeyDown(e);\n }}\n className={suggestionItemWrapperStyle(theme)}\n >\n <Stack\n horizontal\n className={suggestionItemStackStyle(theme, hoveredSuggestion?.id === suggestion.id, active)}\n >\n {personaRenderer(suggestion.displayText)}\n </Stack>\n </div>\n );\n },\n [\n handleOnKeyDown,\n theme,\n /* @conditional-compile-remove(mention) */\n ids,\n hoveredSuggestion,\n personaRenderer\n ]\n );\n\n const getHeaderTitle = useCallback((): string => {\n if (title) {\n return title;\n }\n /* @conditional-compile-remove(mention) */\n return localeStrings.mentionPopover.mentionPopoverHeader;\n return '';\n }, [localeStrings, title]);\n\n return (\n <div ref={popoverRef}>\n {position && (\n <Stack\n data-testid={'mention-suggestion-list-container'}\n className={mergeStyles(\n {\n maxHeight: 212,\n maxWidth: position.maxWidth\n },\n mentionPopoverContainerStyle(theme),\n {\n ...position,\n position: 'absolute'\n }\n )}\n >\n <Stack.Item styles={headerStyleThemed(theme)} aria-label={title}>\n {getHeaderTitle()}\n </Stack.Item>\n {/* FluentUI v9 approach is used here instead of Stack because Stack doesn't have ref prop */}\n <div\n className={mergeClasses(defaultStackStyles.root, suggestionListStyle.root)}\n /* @conditional-compile-remove(mention) */\n data-ui-id={ids.mentionSuggestionList}\n ref={suggestionsListRef}\n >\n {suggestions.map((suggestion, index) => {\n const active = index === activeSuggestionIndex;\n return onRenderSuggestionItem\n ? onRenderSuggestionItem(suggestion, onSuggestionSelected, active)\n : defaultOnRenderSuggestionItem(suggestion, onSuggestionSelected, active);\n })}\n </div>\n </Stack>\n )}\n </div>\n );\n};\n"]}

package/dist/dist-esm/react-components/src/components/MessageStatusIcon.js CHANGED Viewed

@@ -10,9 +10,9 @@ import LiveMessage from './Announcer/LiveMessage';
  */
 export const MessageStatusIcon = (props) => {
     const { shouldAnnounce, iconName, iconClassName, ariaLabel } = props;
-    return React.createElement(React.Fragment, null,
+    return (React.createElement(React.Fragment, null,
         ariaLabel && shouldAnnounce && React.createElement(LiveMessage, { message: ariaLabel, ariaLive: "polite" }),
         React.createElement("div", null,
-            React.createElement(Icon, { role: 'status', "aria-live": shouldAnnounce ? 'polite' : 'off', "data-ui-id": 'chat-composite-message-status-icon', "aria-label": ariaLabel, iconName: iconName, className: iconClassName })));
+            React.createElement(Icon, { role: 'status', "aria-live": shouldAnnounce ? 'polite' : 'off', "data-ui-id": 'chat-composite-message-status-icon', "aria-label": ariaLabel, iconName: iconName, className: iconClassName }))));
 };
 //# sourceMappingURL=MessageStatusIcon.js.map

package/dist/dist-esm/react-components/src/components/MessageStatusIcon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MessageStatusIcon.js","sourceRoot":"","sources":["~~../../../../../preprocess-dist/~~react-components/src/components/MessageStatusIcon.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,WAAW,MAAM,yBAAyB,CAAC;AAclD;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;IAC9E,MAAM,~~EACJ~~,cAAc,~~EACd~~,QAAQ,~~EACR~~,aAAa,~~EACb~~,SAAS,~~EACV~~,GAAG,KAAK,CAAC;~~IACV~~,OAAO;~~QAEF~~,SAAS,IAAI,cAAc,IAAI,oBAAC,WAAW,IAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAC,QAAQ,GAAG;QACrF;YACE,oBAAC,IAAI,~~IAAC~~,IAAI,EAAE,QAAQ,~~eAKX~~,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,~~gBAAc~~,oCAAoC,~~gBAAc~~,SAAS,~~EAAE~~,QAAQ,EAAE,QAAQ,~~EAAE~~,SAAS,EAAE,aAAa,~~GAAI~~,~~CACjK~~,CACL,CAAC;~~AACR~~,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon } from '@fluentui/react';\nimport React from 'react';\nimport LiveMessage from './Announcer/LiveMessage';\n\n/*\n Props for {@link MessageStatusIndicatorInternal}.\n \n @internal\n /\nexport interface MessageStatusIconProps {\n shouldAnnounce: boolean;\n iconName: string;\n iconClassName: string;\n ariaLabel?: string;\n}\n\n/\n Component to display message status icon\n \n @internal\n /\nexport const MessageStatusIcon = (props: MessageStatusIconProps): JSX.Element => {\n const {\n shouldAnnounce~~,\n~~ iconName~~,\n~~ iconClassName~~,\n~~ ariaLabel\n } = props;\n return <>\n {/ live message is used here so that aria labels are announced on mobile */}\n {ariaLabel && shouldAnnounce && <LiveMessage message={ariaLabel} ariaLive=\"polite\" />}\n <div>\n <Icon role={'status'}\n // Role `status` is one of the live region roles and is used to notify screen readers of changes to the status of the message\n // it has aria-live prop set to `polite` by default.\n // By setting it to `off` value, we disable live updates when they aren't needed\n // and keep it available in the accessibility tree\n aria-live={shouldAnnounce ? 'polite' : 'off'} data-ui-id={'chat-composite-message-status-icon'} aria-label={ariaLabel} iconName={iconName} className={iconClassName} />\n </div>\n ~~</>;\~~n};"]}
1	+ {"version":3,"file":"MessageStatusIcon.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/MessageStatusIcon.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,WAAW,MAAM,yBAAyB,CAAC;AAclD;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;IAC9E,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAErE,OAAO,CACL;QAEG,SAAS,IAAI,cAAc,IAAI,oBAAC,WAAW,IAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAC,QAAQ,GAAG;QACrF;YACE,oBAAC,IAAI,IACH,IAAI,EAAE,QAAQ,eAKH,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,gBAChC,oCAAoC,gBACpC,SAAS,EACrB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,aAAa,GACxB,CACE,CACL,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon } from '@fluentui/react';\nimport React from 'react';\nimport LiveMessage from './Announcer/LiveMessage';\n\n/*\n Props for {@link MessageStatusIndicatorInternal}.\n \n @internal\n /\nexport interface MessageStatusIconProps {\n shouldAnnounce: boolean;\n iconName: string;\n iconClassName: string;\n ariaLabel?: string;\n}\n\n/\n Component to display message status icon\n \n @internal\n /\nexport const MessageStatusIcon = (props: MessageStatusIconProps): JSX.Element => {\n const { shouldAnnounce, iconName, iconClassName, ariaLabel } = props;\n\n return (\n <>\n {/ live message is used here so that aria labels are announced on mobile */}\n {ariaLabel && shouldAnnounce && <LiveMessage message={ariaLabel} ariaLive=\"polite\" />}\n <div>\n <Icon\n role={'status'}\n // Role `status` is one of the live region roles and is used to notify screen readers of changes to the status of the message\n // it has aria-live prop set to `polite` by default.\n // By setting it to `off` value, we disable live updates when they aren't needed\n // and keep it available in the accessibility tree\n aria-live={shouldAnnounce ? 'polite' : 'off'}\n data-ui-id={'chat-composite-message-status-icon'}\n aria-label={ariaLabel}\n iconName={iconName}\n className={iconClassName}\n />\n </div>\n </>\n );\n};\n"]}

package/dist/dist-esm/react-components/src/components/MessageStatusIndicator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MessageStatusIndicator.js","sourceRoot":"","sources":["~~../../../../../preprocess-dist/~~react-components/src/components/MessageStatusIndicator.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,8BAA8B,EAAuC,MAAM,kCAAkC,CAAC;AAsDvH;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAkC,EAAe,EAAE;IACxF,MAAM,aAAa,mCACd,KAAK,KACR,cAAc,EAAE,IAAI,GACrB,CAAC;~~IACF~~,OAAO,oBAAC,8BAA8B,oBAAK,aAAa,EAAmC,CAAC;AAC9F,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageStatus, _formatString } from '@internal/acs-ui-common';\nimport React from 'react';\nimport { BaseCustomStyles } from '../types';\nimport { MessageStatusIndicatorInternal, MessageStatusIndicatorInternalProps } from './MessageStatusIndicatorInternal';\n\n/*\n Strings of {@link MessageStatusIndicator} that can be overridden.\n \n @public\n /\nexport interface MessageStatusIndicatorStrings {\n /* Aria label to notify user when their message has been delivered. /\n deliveredAriaLabel?: string;\n /* Text to display in the delivered message icon tooltip. /\n deliveredTooltipText: string;\n /* Aria label to notify user when their message has been seen by others. /\n seenAriaLabel?: string;\n /* Text to display in the seen message icon tooltip if read number/ participant number is 1 /\n seenTooltipText: string;\n /* Text to display in the seen message icon tooltip if read number logic is working correctly (more than 1 read number and more than 1 particiants)/\n readByTooltipText?: string;\n /* Aria label to notify user when their message is being sent. /\n sendingAriaLabel?: string;\n /* Text to display in the sending message icon tooltip. /\n sendingTooltipText: string;\n /* Aria label to notify user when their message has failed to be sent. /\n failedToSendAriaLabel?: string;\n /* Text to display in the failed message icon tooltip. /\n failedToSendTooltipText: string;\n}\n\n/\n Props for {@link MessageStatusIndicator}.\n \n @public\n /\nexport interface MessageStatusIndicatorProps {\n /* Message status that determines the icon to display. /\n status?: MessageStatus;\n readCount?: number;\n onToggleToolTip?: (isToggled: boolean) => void;\n /* number of participants not including myself /\n remoteParticipantsCount?: number;\n /\n Allows users to pass an object containing custom CSS styles.\n * @Example\n * ```\n * <MessageStatus styles={{ root: { background: 'blue' } }} />\n * ```\n /\n styles?: BaseCustomStyles;\n /\n Optional strings to override in component\n /\n strings?: MessageStatusIndicatorStrings;\n}\n\n/\n Component to display the status of a sent message.\n \n Adds an icon and tooltip corresponding to the message status.\n \n @public\n */\nexport const MessageStatusIndicator = (props: MessageStatusIndicatorProps): JSX.Element => {\n const internalProps: MessageStatusIndicatorInternalProps = {\n ...props,\n shouldAnnounce: true\n };\n return <MessageStatusIndicatorInternal {...internalProps}></MessageStatusIndicatorInternal>;\n};"]}
1	+ {"version":3,"file":"MessageStatusIndicator.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/MessageStatusIndicator.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,8BAA8B,EAAuC,MAAM,kCAAkC,CAAC;AAsDvH;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAkC,EAAe,EAAE;IACxF,MAAM,aAAa,mCACd,KAAK,KACR,cAAc,EAAE,IAAI,GACrB,CAAC;IAEF,OAAO,oBAAC,8BAA8B,oBAAK,aAAa,EAAmC,CAAC;AAC9F,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageStatus, _formatString } from '@internal/acs-ui-common';\nimport React from 'react';\nimport { BaseCustomStyles } from '../types';\nimport { MessageStatusIndicatorInternal, MessageStatusIndicatorInternalProps } from './MessageStatusIndicatorInternal';\n\n/*\n Strings of {@link MessageStatusIndicator} that can be overridden.\n \n @public\n /\nexport interface MessageStatusIndicatorStrings {\n /* Aria label to notify user when their message has been delivered. /\n deliveredAriaLabel?: string;\n /* Text to display in the delivered message icon tooltip. /\n deliveredTooltipText: string;\n /* Aria label to notify user when their message has been seen by others. /\n seenAriaLabel?: string;\n /* Text to display in the seen message icon tooltip if read number/ participant number is 1 /\n seenTooltipText: string;\n /* Text to display in the seen message icon tooltip if read number logic is working correctly (more than 1 read number and more than 1 particiants)/\n readByTooltipText?: string;\n /* Aria label to notify user when their message is being sent. /\n sendingAriaLabel?: string;\n /* Text to display in the sending message icon tooltip. /\n sendingTooltipText: string;\n /* Aria label to notify user when their message has failed to be sent. /\n failedToSendAriaLabel?: string;\n /* Text to display in the failed message icon tooltip. /\n failedToSendTooltipText: string;\n}\n\n/\n Props for {@link MessageStatusIndicator}.\n \n @public\n /\nexport interface MessageStatusIndicatorProps {\n /* Message status that determines the icon to display. /\n status?: MessageStatus;\n readCount?: number;\n onToggleToolTip?: (isToggled: boolean) => void;\n /* number of participants not including myself /\n remoteParticipantsCount?: number;\n /\n Allows users to pass an object containing custom CSS styles.\n * @Example\n * ```\n * <MessageStatus styles={{ root: { background: 'blue' } }} />\n * ```\n /\n styles?: BaseCustomStyles;\n /\n Optional strings to override in component\n /\n strings?: MessageStatusIndicatorStrings;\n}\n\n/\n Component to display the status of a sent message.\n \n Adds an icon and tooltip corresponding to the message status.\n \n @public\n */\nexport const MessageStatusIndicator = (props: MessageStatusIndicatorProps): JSX.Element => {\n const internalProps: MessageStatusIndicatorInternalProps = {\n ...props,\n shouldAnnounce: true\n };\n\n return <MessageStatusIndicatorInternal {...internalProps}></MessageStatusIndicatorInternal>;\n};\n"]}