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

@azure/communication-react 1.22.0-alpha-202412180017 → 1.22.0

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 (1294) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"IncomingCallNotification.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/IncomingCallNotification.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n DefaultButton,\n IButtonStyles,\n IconButton,\n IStackStyles,\n Persona,\n PersonaSize,\n PrimaryButton,\n Stack,\n Text,\n Theme,\n useTheme\n} from '@fluentui/react';\nimport { IContextualMenuProps } from '@fluentui/react';\nimport React from 'react';\nimport { useLocale } from '../localization';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/*\n Strings for the incoming call notification component.\n \n @public\n /\nexport interface IncomingCallNotificationStrings {\n /\n Placeholder CallerID for the incoming call notification.\n /\n incomingCallNotificationPlaceholderId?: string;\n /\n Placeholder Alert for the incoming call notification.\n /\n incomingCallNotificationPlaceholderAlert?: string;\n /\n Aria label for the accept with audio button in the incoming call notification.\n /\n incomingCallNoticicationAcceptWithAudioAriaLabel?: string;\n /\n Aria label for the accept with video button in the incoming call notification.\n /\n incomingCallNoticicationAcceptWithVideoAriaLabel?: string;\n /\n Aria label for the reject button in the incoming call notification.\n /\n incomingCallNoticicationRejectAriaLabel?: string;\n /\n Label for the accept button in the incoming call notification.\n /\n incomingCallNotificationAcceptButtonLabel?: string;\n /\n Label for the accept with video button in the incoming call notification.\n /\n incomingCallNotificationAccceptWithVideoButtonLabel?: string;\n /\n label for the reject button in the incoming call notification.\n /\n incomingCallNotificationRejectButtonLabel?: string;\n /\n Aria label for the incoming call dismiss button\n /\n incomingCallNotificationDismissButtonAriaLabel?: string;\n}\n\n/\n Styles for the incoming call notification component.\n \n @public\n /\nexport interface IncomingCallNotificationStyles {\n /\n Styles for the accept buttons.\n /\n acceptButton?: IButtonStyles;\n /\n Styles for the reject button.\n /\n rejectButton?: IButtonStyles;\n /\n Styles for the root container.\n /\n root?: IStackStyles;\n /\n Styles for the avatar container.\n /\n avatarContainer?: IStackStyles;\n}\n\n/\n Properties for the incoming call notification component.\n \n @public\n /\nexport interface IncomingCallNotificationProps {\n /\n Caller's Name\n /\n callerName?: string;\n /\n Alert Text\"\n /\n alertText?: string;\n /\n URL to the avatar image for the user\n /\n avatarImage?: string;\n /\n Size of the persona coin\n /\n personaSize?: number;\n /\n Callback to render the avatar\n /\n onRenderAvatar?: () => JSX.Element;\n /\n Callback to accept the call with audio\n /\n onAcceptWithAudio: () => void;\n /\n Callback to accept the call with Video\n /\n onAcceptWithVideo: () => void;\n /\n Callback to reject the call\n /\n onReject: () => void;\n /\n Callback when the notification is dismissed\n /\n onDismiss?: () => void;\n /\n Styles for the incoming call notification component.\n /\n styles?: IncomingCallNotificationStyles;\n /\n Strings for the incoming call notification component.\n /\n strings?: IncomingCallNotificationStrings;\n /\n Options for whether to show the accept with video button\n /\n acceptOptions: {\n showAcceptWithVideo: boolean;\n };\n}\n\n/\n A Notification component that is to be used to represent incoming calls to the end user.\n * Allows the user to accept or reject the incoming call.\n * @public\n */\nexport const IncomingCallNotification = (props: IncomingCallNotificationProps): JSX.Element => {\n const {\n callerName,\n alertText,\n avatarImage,\n onAcceptWithAudio,\n onAcceptWithVideo,\n onReject,\n onDismiss,\n personaSize,\n styles,\n strings,\n acceptOptions\n } = props;\n const theme = useTheme();\n\n const localeStrings = useLocale().strings.IncomingCallNotification;\n\n const formattedMessageString =\n localeStrings.incomingCallNotificationPlaceholderAlert && callerName\n ? _formatString(localeStrings.incomingCallNotificationPlaceholderAlert, { callerName: callerName })\n : callerName;\n\n const acceptManuOptions: IContextualMenuProps \| undefined = acceptOptions.showAcceptWithVideo\n ? {\n items: [\n {\n key: 'audio',\n text:\n strings?.incomingCallNotificationAcceptButtonLabel ??\n localeStrings.incomingCallNotificationAcceptButtonLabel,\n onClick: () => onAcceptWithAudio()\n },\n {\n key: 'video',\n text:\n strings?.incomingCallNotificationAccceptWithVideoButtonLabel ??\n localeStrings.incomingCallNotificationAccceptWithVideoButtonLabel,\n onClick: () => onAcceptWithVideo()\n }\n ]\n }\n : undefined;\n\n return (\n <Stack\n tokens={{ childrenGap: '0.5rem' }}\n verticalAlign=\"center\"\n styles={styles?.root ? styles.root : incomingCallToastStyle(theme)}\n >\n <Stack horizontal verticalAlign=\"center\" tokens={{ childrenGap: personaSize ? '0.5rem' : '0rem' }}>\n <Stack\n horizontalAlign=\"start\"\n styles={styles?.avatarContainer ? styles.avatarContainer : incomingCallToastAvatarContainerStyle}\n >\n <Persona\n imageUrl={avatarImage}\n text={callerName}\n size={PersonaSize.size24}\n coinSize={personaSize}\n hidePersonaDetails={true}\n aria-label={callerName}\n />\n </Stack>\n\n <Stack grow horizontalAlign=\"center\" style={{ alignItems: 'flex-start', fontFamily: 'Segoe UI' }}>\n <Text tabIndex={0} aria-live={'assertive'} aria-label={alertText ?? formattedMessageString}>\n {alertText ?? strings?.incomingCallNotificationPlaceholderAlert ?? formattedMessageString}\n </Text>\n </Stack>\n <IconButton\n ariaLabel={\n strings?.incomingCallNotificationDismissButtonAriaLabel ??\n localeStrings.incomingCallNotificationDismissButtonAriaLabel\n }\n iconProps={{ iconName: 'cancel' }}\n onClick={onDismiss}\n styles={dismissButtonStyle(theme)}\n />\n </Stack>\n\n <Stack horizontal horizontalAlign={'center'} tokens={{ childrenGap: '0.5rem' }}>\n <PrimaryButton\n styles={styles?.acceptButton ? styles.acceptButton : incomingCallAcceptButtonStyle(theme)}\n onClick={() => onAcceptWithAudio()}\n iconProps={{ iconName: 'IncomingCallNotificationAcceptIcon', style: { lineHeight: '1rem' } }}\n ariaLabel={\n strings?.incomingCallNoticicationAcceptWithAudioAriaLabel ??\n localeStrings.incomingCallNoticicationAcceptWithAudioAriaLabel\n }\n menuProps={acceptManuOptions}\n >\n {strings?.incomingCallNotificationAcceptButtonLabel ??\n localeStrings.incomingCallNotificationAcceptButtonLabel}\n </PrimaryButton>\n <DefaultButton\n styles={styles?.rejectButton ? styles.rejectButton : incomingCallRejectButtonStyle(theme)}\n onClick={() => onReject()}\n iconProps={{ iconName: 'IncomingCallNotificationRejectIcon' }}\n ariaLabel={\n strings?.incomingCallNoticicationRejectAriaLabel ?? localeStrings.incomingCallNoticicationRejectAriaLabel\n }\n >\n {strings?.incomingCallNotificationRejectButtonLabel ??\n localeStrings.incomingCallNotificationRejectButtonLabel}\n </DefaultButton>\n </Stack>\n </Stack>\n );\n};\n\nconst incomingCallToastStyle = (theme: Theme): IStackStyles => {\n return {\n root: {\n width: '20rem',\n background: theme.palette.white,\n opacity: 0.95,\n borderRadius: '0.5rem',\n boxShadow: theme.effects.elevation8,\n padding: '1rem'\n }\n };\n};\n\nconst incomingCallToastAvatarContainerStyle: IStackStyles = {\n root: {\n marginRight: '0.5rem'\n }\n};\n\nconst dismissButtonStyle = (theme: Theme): IButtonStyles => {\n return {\n root: {\n color: theme.palette.neutralPrimary,\n width: '1rem',\n height: '1rem'\n },\n rootHovered: {\n color: theme.palette.neutralDark\n }\n };\n};\n\nconst incomingCallAcceptButtonStyle = (theme: Theme): IButtonStyles => {\n return {\n root: {\n color: theme.palette.white,\n border: 'none',\n borderRadius: theme.effects.roundedCorner4,\n width: '100%',\n maxWidth: '8.875rem'\n },\n rootHovered: {\n color: theme.palette.white\n },\n icon: {\n height: '1.25rem'\n }\n };\n};\n\nconst incomingCallRejectButtonStyle = (theme: Theme): IButtonStyles => {\n return {\n root: {\n borderRadius: theme.effects.roundedCorner4,\n maxWidth: '8.875rem',\n width: '100%'\n },\n icon: {\n height: '1.25rem'\n }\n };\n};\n"]}
1	+ {"version":3,"file":"IncomingCallNotification.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/IncomingCallNotification.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, IButtonStyles, IconButton, IStackStyles, Persona, PersonaSize, PrimaryButton, Stack, Text, Theme, useTheme } from '@fluentui/react';\nimport { IContextualMenuProps } from '@fluentui/react';\nimport React from 'react';\nimport { useLocale } from '../localization';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/*\n Strings for the incoming call notification component.\n \n @public\n /\nexport interface IncomingCallNotificationStrings {\n /\n Placeholder CallerID for the incoming call notification.\n /\n incomingCallNotificationPlaceholderId?: string;\n /\n Placeholder Alert for the incoming call notification.\n /\n incomingCallNotificationPlaceholderAlert?: string;\n /\n Aria label for the accept with audio button in the incoming call notification.\n /\n incomingCallNoticicationAcceptWithAudioAriaLabel?: string;\n /\n Aria label for the accept with video button in the incoming call notification.\n /\n incomingCallNoticicationAcceptWithVideoAriaLabel?: string;\n /\n Aria label for the reject button in the incoming call notification.\n /\n incomingCallNoticicationRejectAriaLabel?: string;\n /\n Label for the accept button in the incoming call notification.\n /\n incomingCallNotificationAcceptButtonLabel?: string;\n /\n Label for the accept with video button in the incoming call notification.\n /\n incomingCallNotificationAccceptWithVideoButtonLabel?: string;\n /\n label for the reject button in the incoming call notification.\n /\n incomingCallNotificationRejectButtonLabel?: string;\n /\n Aria label for the incoming call dismiss button\n /\n incomingCallNotificationDismissButtonAriaLabel?: string;\n}\n\n/\n Styles for the incoming call notification component.\n \n @public\n /\nexport interface IncomingCallNotificationStyles {\n /\n Styles for the accept buttons.\n /\n acceptButton?: IButtonStyles;\n /\n Styles for the reject button.\n /\n rejectButton?: IButtonStyles;\n /\n Styles for the root container.\n /\n root?: IStackStyles;\n /\n Styles for the avatar container.\n /\n avatarContainer?: IStackStyles;\n}\n\n/\n Properties for the incoming call notification component.\n \n @public\n /\nexport interface IncomingCallNotificationProps {\n /\n Caller's Name\n /\n callerName?: string;\n /\n Alert Text\"\n /\n alertText?: string;\n /\n URL to the avatar image for the user\n /\n avatarImage?: string;\n /\n Size of the persona coin\n /\n personaSize?: number;\n /\n Callback to render the avatar\n /\n onRenderAvatar?: () => JSX.Element;\n /\n Callback to accept the call with audio\n /\n onAcceptWithAudio: () => void;\n /\n Callback to accept the call with Video\n /\n onAcceptWithVideo: () => void;\n /\n Callback to reject the call\n /\n onReject: () => void;\n /\n Callback when the notification is dismissed\n /\n onDismiss?: () => void;\n /\n Styles for the incoming call notification component.\n /\n styles?: IncomingCallNotificationStyles;\n /\n Strings for the incoming call notification component.\n /\n strings?: IncomingCallNotificationStrings;\n /\n Options for whether to show the accept with video button\n /\n acceptOptions: {\n showAcceptWithVideo: boolean;\n };\n}\n\n/\n A Notification component that is to be used to represent incoming calls to the end user.\n * Allows the user to accept or reject the incoming call.\n * @public\n */\nexport const IncomingCallNotification = (props: IncomingCallNotificationProps): JSX.Element => {\n const {\n callerName,\n alertText,\n avatarImage,\n onAcceptWithAudio,\n onAcceptWithVideo,\n onReject,\n onDismiss,\n personaSize,\n styles,\n strings,\n acceptOptions\n } = props;\n const theme = useTheme();\n const localeStrings = useLocale().strings.IncomingCallNotification;\n const formattedMessageString = localeStrings.incomingCallNotificationPlaceholderAlert && callerName ? _formatString(localeStrings.incomingCallNotificationPlaceholderAlert, {\n callerName: callerName\n }) : callerName;\n const acceptManuOptions: IContextualMenuProps \| undefined = acceptOptions.showAcceptWithVideo ? {\n items: [{\n key: 'audio',\n text: strings?.incomingCallNotificationAcceptButtonLabel ?? localeStrings.incomingCallNotificationAcceptButtonLabel,\n onClick: () => onAcceptWithAudio()\n }, {\n key: 'video',\n text: strings?.incomingCallNotificationAccceptWithVideoButtonLabel ?? localeStrings.incomingCallNotificationAccceptWithVideoButtonLabel,\n onClick: () => onAcceptWithVideo()\n }]\n } : undefined;\n return <Stack tokens={{\n childrenGap: '0.5rem'\n }} verticalAlign=\"center\" styles={styles?.root ? styles.root : incomingCallToastStyle(theme)}>\n <Stack horizontal verticalAlign=\"center\" tokens={{\n childrenGap: personaSize ? '0.5rem' : '0rem'\n }}>\n <Stack horizontalAlign=\"start\" styles={styles?.avatarContainer ? styles.avatarContainer : incomingCallToastAvatarContainerStyle}>\n <Persona imageUrl={avatarImage} text={callerName} size={PersonaSize.size24} coinSize={personaSize} hidePersonaDetails={true} aria-label={callerName} />\n </Stack>\n\n <Stack grow horizontalAlign=\"center\" style={{\n alignItems: 'flex-start',\n fontFamily: 'Segoe UI'\n }}>\n <Text tabIndex={0} aria-live={'assertive'} aria-label={alertText ?? formattedMessageString}>\n {alertText ?? strings?.incomingCallNotificationPlaceholderAlert ?? formattedMessageString}\n </Text>\n </Stack>\n <IconButton ariaLabel={strings?.incomingCallNotificationDismissButtonAriaLabel ?? localeStrings.incomingCallNotificationDismissButtonAriaLabel} iconProps={{\n iconName: 'cancel'\n }} onClick={onDismiss} styles={dismissButtonStyle(theme)} />\n </Stack>\n\n <Stack horizontal horizontalAlign={'center'} tokens={{\n childrenGap: '0.5rem'\n }}>\n <PrimaryButton styles={styles?.acceptButton ? styles.acceptButton : incomingCallAcceptButtonStyle(theme)} onClick={() => onAcceptWithAudio()} iconProps={{\n iconName: 'IncomingCallNotificationAcceptIcon',\n style: {\n lineHeight: '1rem'\n }\n }} ariaLabel={strings?.incomingCallNoticicationAcceptWithAudioAriaLabel ?? localeStrings.incomingCallNoticicationAcceptWithAudioAriaLabel} menuProps={acceptManuOptions}>\n {strings?.incomingCallNotificationAcceptButtonLabel ?? localeStrings.incomingCallNotificationAcceptButtonLabel}\n </PrimaryButton>\n <DefaultButton styles={styles?.rejectButton ? styles.rejectButton : incomingCallRejectButtonStyle(theme)} onClick={() => onReject()} iconProps={{\n iconName: 'IncomingCallNotificationRejectIcon'\n }} ariaLabel={strings?.incomingCallNoticicationRejectAriaLabel ?? localeStrings.incomingCallNoticicationRejectAriaLabel}>\n {strings?.incomingCallNotificationRejectButtonLabel ?? localeStrings.incomingCallNotificationRejectButtonLabel}\n </DefaultButton>\n </Stack>\n </Stack>;\n};\nconst incomingCallToastStyle = (theme: Theme): IStackStyles => {\n return {\n root: {\n width: '20rem',\n background: theme.palette.white,\n opacity: 0.95,\n borderRadius: '0.5rem',\n boxShadow: theme.effects.elevation8,\n padding: '1rem'\n }\n };\n};\nconst incomingCallToastAvatarContainerStyle: IStackStyles = {\n root: {\n marginRight: '0.5rem'\n }\n};\nconst dismissButtonStyle = (theme: Theme): IButtonStyles => {\n return {\n root: {\n color: theme.palette.neutralPrimary,\n width: '1rem',\n height: '1rem'\n },\n rootHovered: {\n color: theme.palette.neutralDark\n }\n };\n};\nconst incomingCallAcceptButtonStyle = (theme: Theme): IButtonStyles => {\n return {\n root: {\n color: theme.palette.white,\n border: 'none',\n borderRadius: theme.effects.roundedCorner4,\n width: '100%',\n maxWidth: '8.875rem'\n },\n rootHovered: {\n color: theme.palette.white\n },\n icon: {\n height: '1.25rem'\n }\n };\n};\nconst incomingCallRejectButtonStyle = (theme: Theme): IButtonStyles => {\n return {\n root: {\n borderRadius: theme.effects.roundedCorner4,\n maxWidth: '8.875rem',\n width: '100%'\n },\n icon: {\n height: '1.25rem'\n }\n };\n};"]}

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

@@ -11,10 +11,12 @@ import React from 'react';
  */
 export const IncomingCallStack = (props) => {
     const { activeIncomingCalls, removedIncomingCalls, onAcceptCall, onRejectCall, styles, strings, tabIndex } = props;
-    return (React.createElement(Stack, { tokens: { childrenGap: '0.25rem' }, role: 'group', tabIndex: tabIndex }, activeIncomingCalls
-        .filter((incomingCall) => !removedIncomingCalls.some((call) => call.id === incomingCall.id))
-        .map((incomingCall) => {
-        return (React.createElement(IncomingCallNotification, { key: incomingCall.id, callerName: incomingCall.callerInfo.displayName, onAcceptWithAudio: () => onAcceptCall(incomingCall.id), onAcceptWithVideo: () => onAcceptCall(incomingCall.id, true), onReject: () => onRejectCall(incomingCall.id), onDismiss: () => onRejectCall(incomingCall.id), styles: styles, strings: strings, acceptOptions: { showAcceptWithVideo: incomingCall.videoAvailable } }));
-    })));
+    return React.createElement(Stack, { tokens: {
+            childrenGap: '0.25rem'
+        }, role: 'group', tabIndex: tabIndex }, activeIncomingCalls.filter(incomingCall => !removedIncomingCalls.some(call => call.id === incomingCall.id)).map(incomingCall => {
+        return React.createElement(IncomingCallNotification, { key: incomingCall.id, callerName: incomingCall.callerInfo.displayName, onAcceptWithAudio: () => onAcceptCall(incomingCall.id), onAcceptWithVideo: () => onAcceptCall(incomingCall.id, true), onReject: () => onRejectCall(incomingCall.id), onDismiss: () => onRejectCall(incomingCall.id), styles: styles, strings: strings, acceptOptions: {
+                showAcceptWithVideo: incomingCall.videoAvailable
+            } });
+    }));
 };
 //# sourceMappingURL=IncomingCallStack.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"IncomingCallStack.js","sourceRoot":"","sources":["~~../../../../../../~~react-components/src/components/IncomingCallStack.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,KAAK,MAAM,OAAO,CAAC;AAkE1B;;;;;GAKG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;IAC9E,MAAM,~~EAAE~~,mBAAmB,~~EAAE~~,oBAAoB,~~EAAE~~,YAAY,~~EAAE~~,YAAY,~~EAAE~~,MAAM,~~EAAE~~,OAAO,~~EAAE~~,QAAQ,~~EAAE~~,GAAG,KAAK,CAAC;~~IACnH~~,OAAO,~~CACL,~~oBAAC,KAAK,IAAC,MAAM,EAAE,~~EAAE,~~WAAW,EAAE,SAAS,EAAE,~~EAAE,~~IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,~~IACzE~~,mBAAmB~~;SACjB~~,MAAM,CAAC,~~CAAC,~~YAAY,~~EAAE~~,EAAE,CAAC,CAAC,oBAAoB,CAAC,IAAI,CAAC,~~CAAC,~~IAAI,~~EAAE~~,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,YAAY,CAAC,EAAE,CAAC,CAAC~~;SAC3F~~,GAAG,CAAC,~~CAAC,~~YAAY,~~EAAE~~,EAAE;~~QACpB~~,OAAO,~~CACL,~~oBAAC,wBAAwB,~~IACvB~~,GAAG,EAAE,YAAY,CAAC,EAAE,~~EACpB~~,UAAU,EAAE,YAAY,CAAC,UAAU,CAAC,WAAW,~~EAC/C~~,iBAAiB,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC,~~EACtD~~,iBAAiB,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,EAAE,IAAI,CAAC,~~EAC5D~~,QAAQ,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC,~~EAC7C~~,SAAS,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC,~~EAC9C~~,MAAM,EAAE,MAAM,~~EACd~~,OAAO,EAAE,OAAO,~~EAChB~~,aAAa,EAAE,~~EAAE,~~mBAAmB,EAAE,YAAY,CAAC,cAAc,~~EAAE~~,~~GACzC,CAC7B,~~CAAC;~~IACJ~~,CAAC,CAAC,~~CACE~~,~~CACT,~~CAAC;~~AACJ~~,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IncomingCallNotification } from './IncomingCallNotification';\nimport { IncomingCallNotificationStyles, IncomingCallNotificationStrings } from './IncomingCallNotification';\nimport { Stack } from '@fluentui/react';\nimport React from 'react';\n\n/*\n Represents an active incoming call.\n * @public\n /\nexport interface IncomingCallStackCall {\n /\n Unique identifier for the incoming call.\n /\n id: string;\n /\n Information about the caller.\n /\n callerInfo: {\n /\n Display name of the caller.\n /\n displayName?: string;\n };\n /\n Whether or not the call is a voip capable call.\n /\n videoAvailable: boolean;\n}\n/\n Props for the IncomingCallManager component.\n * @public\n /\nexport interface IncomingCallStackProps {\n /\n List of incoming calls.\n /\n activeIncomingCalls: IncomingCallStackCall[];\n /\n List of incoming calls that have ended.\n /\n removedIncomingCalls: IncomingCallStackCall[];\n /\n Handler to accept the incoming call.\n * @param incomingCallId - Id of the incoming call to accept.\n * @param useVideo - Whether to accept with video.\n * @returns void\n /\n onAcceptCall: (incomingCallId: string, useVideo?: boolean) => void;\n /\n Handler to reject the incoming call.\n * @param incomingCallId - id of the incoming call to reject\n * @returns - void\n /\n onRejectCall: (incomingCallId: string) => void;\n /\n Styles for the incoming call notifications.\n /\n styles?: IncomingCallNotificationStyles;\n /\n Strings for the incoming call notifications.\n /\n strings?: IncomingCallNotificationStrings;\n /\n Tab index for the incoming Call stack, this will set the tab order of the\n * incoming call notifications in your application.\n /\n tabIndex?: number;\n}\n\n/\n Wrapper to manage multiple incoming calls\n * @param props - {@link IncomingCallManagerProps}\n * @returns\n * @public\n */\nexport const IncomingCallStack = (props: IncomingCallStackProps): JSX.Element => {\n const { activeIncomingCalls, removedIncomingCalls, onAcceptCall, onRejectCall, styles, strings, tabIndex } = props;\n return ~~(\n~~ <Stack tokens={{ childrenGap: '0.25rem' }} role={'group'} tabIndex={tabIndex}>\n {activeIncomingCalls\n .filter((incomingCall) => !removedIncomingCalls.some((call) => call.id === incomingCall.id))\n .map((incomingCall) => {\n return ~~(\n~~ <IncomingCallNotification\n key={incomingCall.id}\n callerName={incomingCall.callerInfo.displayName}\n onAcceptWithAudio={() => onAcceptCall(incomingCall.id)}\n onAcceptWithVideo={() => onAcceptCall(incomingCall.id, true)}\n onReject={() => onRejectCall(incomingCall.id)}\n onDismiss={() => onRejectCall(incomingCall.id)}\n styles={styles}\n strings={strings}\n acceptOptions={{ showAcceptWithVideo: incomingCall.videoAvailable }}\n ></IncomingCallNotification>\n ~~);\n~~ })}\n </Stack>\n ~~);\n~~}~~;\n~~"]}
1	+ {"version":3,"file":"IncomingCallStack.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/IncomingCallStack.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,KAAK,MAAM,OAAO,CAAC;AAkE1B;;;;;GAKG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;IAC9E,MAAM,EACJ,mBAAmB,EACnB,oBAAoB,EACpB,YAAY,EACZ,YAAY,EACZ,MAAM,EACN,OAAO,EACP,QAAQ,EACT,GAAG,KAAK,CAAC;IACV,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE;YACpB,WAAW,EAAE,SAAS;SACvB,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,IAC/B,mBAAmB,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,YAAY,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE;QAChI,OAAO,oBAAC,wBAAwB,IAAC,GAAG,EAAE,YAAY,CAAC,EAAE,EAAE,UAAU,EAAE,YAAY,CAAC,UAAU,CAAC,WAAW,EAAE,iBAAiB,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC,EAAE,iBAAiB,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE;gBAC5W,mBAAmB,EAAE,YAAY,CAAC,cAAc;aACjD,GAA6B,CAAC;IACjC,CAAC,CAAC,CACM,CAAC;AACb,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IncomingCallNotification } from './IncomingCallNotification';\nimport { IncomingCallNotificationStyles, IncomingCallNotificationStrings } from './IncomingCallNotification';\nimport { Stack } from '@fluentui/react';\nimport React from 'react';\n\n/*\n Represents an active incoming call.\n * @public\n /\nexport interface IncomingCallStackCall {\n /\n Unique identifier for the incoming call.\n /\n id: string;\n /\n Information about the caller.\n /\n callerInfo: {\n /\n Display name of the caller.\n /\n displayName?: string;\n };\n /\n Whether or not the call is a voip capable call.\n /\n videoAvailable: boolean;\n}\n/\n Props for the IncomingCallManager component.\n * @public\n /\nexport interface IncomingCallStackProps {\n /\n List of incoming calls.\n /\n activeIncomingCalls: IncomingCallStackCall[];\n /\n List of incoming calls that have ended.\n /\n removedIncomingCalls: IncomingCallStackCall[];\n /\n Handler to accept the incoming call.\n * @param incomingCallId - Id of the incoming call to accept.\n * @param useVideo - Whether to accept with video.\n * @returns void\n /\n onAcceptCall: (incomingCallId: string, useVideo?: boolean) => void;\n /\n Handler to reject the incoming call.\n * @param incomingCallId - id of the incoming call to reject\n * @returns - void\n /\n onRejectCall: (incomingCallId: string) => void;\n /\n Styles for the incoming call notifications.\n /\n styles?: IncomingCallNotificationStyles;\n /\n Strings for the incoming call notifications.\n /\n strings?: IncomingCallNotificationStrings;\n /\n Tab index for the incoming Call stack, this will set the tab order of the\n * incoming call notifications in your application.\n /\n tabIndex?: number;\n}\n\n/\n Wrapper to manage multiple incoming calls\n * @param props - {@link IncomingCallManagerProps}\n * @returns\n * @public\n */\nexport const IncomingCallStack = (props: IncomingCallStackProps): JSX.Element => {\n const {\n activeIncomingCalls,\n removedIncomingCalls,\n onAcceptCall,\n onRejectCall,\n styles,\n strings,\n tabIndex\n } = props;\n return <Stack tokens={{\n childrenGap: '0.25rem'\n }} role={'group'} tabIndex={tabIndex}>\n {activeIncomingCalls.filter(incomingCall => !removedIncomingCalls.some(call => call.id === incomingCall.id)).map(incomingCall => {\n return <IncomingCallNotification key={incomingCall.id} callerName={incomingCall.callerInfo.displayName} onAcceptWithAudio={() => onAcceptCall(incomingCall.id)} onAcceptWithVideo={() => onAcceptCall(incomingCall.id, true)} onReject={() => onRejectCall(incomingCall.id)} onDismiss={() => onRejectCall(incomingCall.id)} styles={styles} strings={strings} acceptOptions={{\n showAcceptWithVideo: incomingCall.videoAvailable\n }}></IncomingCallNotification>;\n })}\n </Stack>;\n};"]}

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

@@ -13,20 +13,27 @@ export const InputBoxButton = (props) => {
     const [isHover, setIsHover] = useState(false);
     const mergedButtonStyle = mergeStyles(inputBoxButtonStyle, className);
     const theme = useTheme();
-    const calloutStyle = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };
+    const calloutStyle = {
+        root: {
+            padding: 0
+        },
+        calloutMain: {
+            padding: '0.5rem'
+        }
+    };
     // Place callout with no gap between it and the button.
     const calloutProps = {
         gapSpace: 0,
         styles: calloutStyle,
         backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''
     };
-    return (React.createElement(TooltipHost, { hostClassName: inputBoxButtonTooltipStyle, content: tooltipContent, calloutProps: Object.assign({}, calloutProps) },
+    return React.createElement(TooltipHost, { hostClassName: inputBoxButtonTooltipStyle, content: tooltipContent, calloutProps: Object.assign({}, calloutProps) },
         React.createElement(IconButton, { className: mergedButtonStyle, ariaLabel: ariaLabel, onClick: onClick, id: id, onMouseEnter: () => {
                 setIsHover(true);
             }, onMouseLeave: () => {
                 setIsHover(false);
             },
             // VoiceOver fix: Avoid icon from stealing focus when IconButton is double-tapped to send message by wrapping with Stack with pointerEvents style to none
-            onRenderIcon: () => React.createElement(Stack, { className: iconWrapperStyle }, onRenderIcon(isHover)), "data-testid": dataTestId, "aria-expanded": ariaExpanded, disabled: disabled, allowDisabledFocus: true })));
+            onRenderIcon: () => React.createElement(Stack, { className: iconWrapperStyle }, onRenderIcon(isHover)), "data-testid": dataTestId, "aria-expanded": ariaExpanded, disabled: disabled, allowDisabledFocus: true }));
 };
 //# sourceMappingURL=InputBoxButton.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"InputBoxButton.js","sourceRoot":"","sources":["~~../../../../../../~~react-components/src/components/InputBoxButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAyB,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC/G,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;AAmBlH;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAA0B,EAAe,EAAE;IACxE,MAAM,EACJ,YAAY,EACZ,OAAO,EACP,SAAS,EACT,SAAS,EACT,EAAE,EACF,cAAc,EACd,aAAa,EAAE,UAAU,EACzB,QAAQ,EACR,YAAY,EACb,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,iBAAiB,GAAG,WAAW,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC;~~IAEtE~~,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,YAAY,GAAmC,~~EAAE,~~IAAI,EAAE,~~EAAE,~~OAAO,EAAE,CAAC,~~EAAE,EAAE,~~WAAW,EAAE,~~EAAE,~~OAAO,EAAE,QAAQ,~~EAAE,EAAE,~~CAAC;~~IAElH~~,uDAAuD;IACvD,MAAM,YAAY,GAAG;QACnB,QAAQ,EAAE,CAAC;QACX,MAAM,EAAE,YAAY;QACpB,eAAe,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;KACzE,CAAC;IACF,OAAO,~~CACL,~~oBAAC,WAAW,IAAC,aAAa,EAAE,0BAA0B,EAAE,OAAO,EAAE,cAAc,EAAE,YAAY,~~oBAAO~~,YAAY;~~QAC9G~~,oBAAC,UAAU,~~IACT~~,SAAS,EAAE,iBAAiB,~~EAC5B~~,SAAS,EAAE,SAAS,~~EACpB~~,OAAO,EAAE,OAAO,~~EAChB~~,EAAE,EAAE,EAAE,~~EACN~~,YAAY,EAAE,GAAG,EAAE;~~gBACjB~~,UAAU,CAAC,IAAI,CAAC,CAAC;YACnB,CAAC,~~EACD~~,YAAY,EAAE,GAAG,EAAE;~~gBACjB~~,UAAU,CAAC,KAAK,CAAC,CAAC;YACpB,CAAC;YACD,yJAAyJ;YACzJ,YAAY,EAAE,GAAG,EAAE,CAAC,oBAAC,KAAK,IAAC,SAAS,EAAE,gBAAgB,IAAG,YAAY,CAAC,OAAO,CAAC,CAAS,~~iBAC1E~~,UAAU,~~mBACR~~,YAAY,~~EAC3B~~,QAAQ,EAAE,QAAQ,~~EAClB~~,kBAAkB,EAAE,IAAI,~~GACxB~~,~~CACU~~,~~CACf,~~CAAC;~~AACJ~~,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ICalloutContentStyles, IconButton, Stack, TooltipHost, mergeStyles, useTheme } from '@fluentui/react';\nimport { useState } from 'react';\nimport { isDarkThemed } from '../theming/themeUtils';\nimport React from 'react';\nimport { iconWrapperStyle, inputBoxButtonStyle, inputBoxButtonTooltipStyle } from './styles/InputBoxButton.style';\n\n/*\n Props for displaying a send button besides the text input area.\n \n @private\n /\nexport type InputBoxButtonProps = {\n onRenderIcon: (isHover: boolean) => JSX.Element;\n onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n className?: string;\n id?: string;\n ariaLabel?: string;\n tooltipContent?: string;\n 'data-testId'?: string;\n disabled?: boolean;\n ariaExpanded?: boolean;\n};\n\n/\n @private\n */\nexport const InputBoxButton = (props: InputBoxButtonProps): JSX.Element => {\n const {\n onRenderIcon,\n onClick,\n ariaLabel,\n className,\n id,\n tooltipContent,\n 'data-testId': dataTestId,\n disabled,\n ariaExpanded\n } = props;\n const [isHover, setIsHover] = useState(false);\n const mergedButtonStyle = mergeStyles(inputBoxButtonStyle, className);\n\n const theme = useTheme();\n const calloutStyle: Partial<ICalloutContentStyles> = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };\n\n // Place callout with no gap between it and the button.\n const calloutProps = {\n gapSpace: 0,\n styles: calloutStyle,\n backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n };\n return ~~(\n~~ <TooltipHost hostClassName={inputBoxButtonTooltipStyle} content={tooltipContent} calloutProps={{ ...calloutProps }}>\n <IconButton\n className={mergedButtonStyle}\n ariaLabel={ariaLabel}\n onClick={onClick}\n id={id}\n onMouseEnter={() => {\n setIsHover(true);\n }}\n onMouseLeave={() => {\n setIsHover(false);\n }}\n // VoiceOver fix: Avoid icon from stealing focus when IconButton is double-tapped to send message by wrapping with Stack with pointerEvents style to none\n onRenderIcon={() => <Stack className={iconWrapperStyle}>{onRenderIcon(isHover)}</Stack>}\n data-testid={dataTestId}\n aria-expanded={ariaExpanded}\n disabled={disabled}\n allowDisabledFocus={true}\n />\n </TooltipHost>\n ~~);\n~~}~~;\n~~"]}
1	+ {"version":3,"file":"InputBoxButton.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/InputBoxButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAyB,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC/G,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;AAmBlH;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAA0B,EAAe,EAAE;IACxE,MAAM,EACJ,YAAY,EACZ,OAAO,EACP,SAAS,EACT,SAAS,EACT,EAAE,EACF,cAAc,EACd,aAAa,EAAE,UAAU,EACzB,QAAQ,EACR,YAAY,EACb,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,iBAAiB,GAAG,WAAW,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC;IACtE,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,YAAY,GAAmC;QACnD,IAAI,EAAE;YACJ,OAAO,EAAE,CAAC;SACX;QACD,WAAW,EAAE;YACX,OAAO,EAAE,QAAQ;SAClB;KACF,CAAC;IAEF,uDAAuD;IACvD,MAAM,YAAY,GAAG;QACnB,QAAQ,EAAE,CAAC;QACX,MAAM,EAAE,YAAY;QACpB,eAAe,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;KACzE,CAAC;IACF,OAAO,oBAAC,WAAW,IAAC,aAAa,EAAE,0BAA0B,EAAE,OAAO,EAAE,cAAc,EAAE,YAAY,oBAC/F,YAAY;QAEb,oBAAC,UAAU,IAAC,SAAS,EAAE,iBAAiB,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,YAAY,EAAE,GAAG,EAAE;gBAC7G,UAAU,CAAC,IAAI,CAAC,CAAC;YACnB,CAAC,EAAE,YAAY,EAAE,GAAG,EAAE;gBACpB,UAAU,CAAC,KAAK,CAAC,CAAC;YACpB,CAAC;YACD,yJAAyJ;YACzJ,YAAY,EAAE,GAAG,EAAE,CAAC,oBAAC,KAAK,IAAC,SAAS,EAAE,gBAAgB,IAAG,YAAY,CAAC,OAAO,CAAC,CAAS,iBAAe,UAAU,mBAAiB,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,kBAAkB,EAAE,IAAI,GAAI,CACjL,CAAC;AACnB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ICalloutContentStyles, IconButton, Stack, TooltipHost, mergeStyles, useTheme } from '@fluentui/react';\nimport { useState } from 'react';\nimport { isDarkThemed } from '../theming/themeUtils';\nimport React from 'react';\nimport { iconWrapperStyle, inputBoxButtonStyle, inputBoxButtonTooltipStyle } from './styles/InputBoxButton.style';\n\n/*\n Props for displaying a send button besides the text input area.\n \n @private\n /\nexport type InputBoxButtonProps = {\n onRenderIcon: (isHover: boolean) => JSX.Element;\n onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n className?: string;\n id?: string;\n ariaLabel?: string;\n tooltipContent?: string;\n 'data-testId'?: string;\n disabled?: boolean;\n ariaExpanded?: boolean;\n};\n\n/\n @private\n */\nexport const InputBoxButton = (props: InputBoxButtonProps): JSX.Element => {\n const {\n onRenderIcon,\n onClick,\n ariaLabel,\n className,\n id,\n tooltipContent,\n 'data-testId': dataTestId,\n disabled,\n ariaExpanded\n } = props;\n const [isHover, setIsHover] = useState(false);\n const mergedButtonStyle = mergeStyles(inputBoxButtonStyle, className);\n const theme = useTheme();\n const calloutStyle: Partial<ICalloutContentStyles> = {\n root: {\n padding: 0\n },\n calloutMain: {\n padding: '0.5rem'\n }\n };\n\n // Place callout with no gap between it and the button.\n const calloutProps = {\n gapSpace: 0,\n styles: calloutStyle,\n backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n };\n return <TooltipHost hostClassName={inputBoxButtonTooltipStyle} content={tooltipContent} calloutProps={{\n ...calloutProps\n }}>\n <IconButton className={mergedButtonStyle} ariaLabel={ariaLabel} onClick={onClick} id={id} onMouseEnter={() => {\n setIsHover(true);\n }} onMouseLeave={() => {\n setIsHover(false);\n }}\n // VoiceOver fix: Avoid icon from stealing focus when IconButton is double-tapped to send message by wrapping with Stack with pointerEvents style to none\n onRenderIcon={() => <Stack className={iconWrapperStyle}>{onRenderIcon(isHover)}</Stack>} data-testid={dataTestId} aria-expanded={ariaExpanded} disabled={disabled} allowDisabledFocus={true} />\n </TooltipHost>;\n};"]}

package/dist/dist-esm/react-components/src/components/InputBoxComponent.d.ts CHANGED Viewed

@@ -1,7 +1,6 @@
 import React, { ReactNode, FormEvent } from 'react';
 import { IStyle, ITextField } from '@fluentui/react';
 import { BaseCustomStyles } from '../types';
-import { MentionLookupOptions } from './MentionPopover';
 /**
  * @private
  */
@@ -30,7 +29,6 @@ type InputBoxComponentProps = {
     disabled?: boolean;
     styles?: InputBoxStylesProps;
     autoFocus?: 'sendBoxTextField';
-    mentionLookupOptions?: MentionLookupOptions;
 };
 /**
  * @private

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

@@ -4,8 +4,6 @@ import React, { useCallback } from 'react';
 import { Stack, TextField, mergeStyles, concatStyleSets } from '@fluentui/react';
 import { isEnterKeyEventFromCompositionSession } from './utils';
 import { inputBoxStyle, inputBoxWrapperStyle, textFieldStyle, textContainerStyle } from './styles/InputBoxComponent.style';
-/* @conditional-compile-remove(mention) */
-import { TextFieldWithMention } from './TextFieldWithMention/TextFieldWithMention';
 /**
  * @private
  */
@@ -52,31 +50,17 @@ export const InputBoxComponent = (props) => {
             errorMessage,
             onRenderSuffix: props.children ? onRenderChildren : undefined
         };
-        /* @conditional-compile-remove(mention) */
-        const textFieldWithMentionProps = {
-            textFieldProps: textFieldProps,
-            dataUiId: dataUiId,
-            textValue: textValue,
-            onChange: onChange,
-            onKeyDown: onKeyDown,
-            onEnterKeyDown: onEnterKeyDown,
-            textFieldRef: textFieldRef,
-            supportNewline: supportNewline,
-            mentionLookupOptions: props.mentionLookupOptions
-        };
-        /* @conditional-compile-remove(mention) */
-        if (props.mentionLookupOptions) {
-            return React.createElement(TextFieldWithMention, Object.assign({}, textFieldWithMentionProps));
-        }
-        return (React.createElement("div", { style: textFieldProps.errorMessage ? { padding: '0 0 5px 5px' } : undefined },
-            React.createElement(TextField, Object.assign({}, textFieldProps, { "data-ui-id": dataUiId, value: textValue, onChange: onChange, onKeyDown: onTextFieldKeyDown, onFocus: (e) => {
+        return React.createElement("div", { style: textFieldProps.errorMessage ? {
+                padding: '0 0 5px 5px'
+            } : undefined },
+            React.createElement(TextField, Object.assign({}, textFieldProps, { "data-ui-id": dataUiId, value: textValue, onChange: onChange, onKeyDown: onTextFieldKeyDown, onFocus: e => {
                     // Fix for setting the cursor to the correct position when multiline is true
                     // This approach should be reviewed during migration to FluentUI v9
                     e.currentTarget.value = '';
                     e.currentTarget.value = textValue;
-                } }))));
+                } })));
     };
-    return (React.createElement(Stack, { className: mergedRootStyle },
-        React.createElement("div", { className: mergedTextContainerStyle }, renderTextField())));
+    return React.createElement(Stack, { className: mergedRootStyle },
+        React.createElement("div", { className: mergedTextContainerStyle }, renderTextField()));
 };
 //# sourceMappingURL=InputBoxComponent.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"InputBoxComponent.js","sourceRoot":"","sources":["~~../../../../../../~~react-components/src/components/InputBoxComponent.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAwB,WAAW,EAAE,MAAM,OAAO,CAAC;~~AAEjE~~,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAsB,eAAe,EAAmB,MAAM,iBAAiB,CAAC;AAEtH,OAAO,EAAE,qCAAqC,EAAE,MAAM,SAAS,CAAC;~~AAEhE~~,OAAO,~~EACL~~,aAAa,~~EACb~~,oBAAoB,~~EACpB~~,cAAc,~~EACd~~,kBAAkB,~~EACnB~~,MAAM,kCAAkC,CAAC;~~AAI1C,0CAA0C;AAC1C,OAAO,EAAE,oBAAoB,EAA6B,MAAM,6CAA6C,CAAC;AAqC9G~~;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;IAC9E,MAAM,EACJ,MAAM,EACN,EAAE,EACF,YAAY,EAAE,QAAQ,EACtB,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,eAAe,EACf,SAAS,EACT,cAAc,EACd,cAAc,EACd,cAAc,EACd,YAAY,EACZ,QAAQ,EACR,QAAQ,EACT,GAAG,KAAK,CAAC;IACV,MAAM,eAAe,GAAG,WAAW,CAAC,oBAAoB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,CAAC;IACxE,MAAM,qBAAqB,GAAG,WAAW,CAAC,aAAa,EAAE,cAAc,CAAC,CAAC;~~IAEzE~~,MAAM,wBAAwB,GAAG,WAAW,CAAC,kBAAkB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,kBAAkB,CAAC,CAAC;IAC7F,MAAM,oBAAoB,GAAG,eAAe,CAAC,cAAc,EAAE;QAC3D,UAAU,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,SAAS;QAC7B,YAAY,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,aAAa;QACnC,MAAM,EAAE;YACN,eAAe,EAAE,aAAa;YAC9B,OAAO,EAAE,KAAK;SACf;KACF,CAAC,CAAC;~~IAEH~~,MAAM,kBAAkB,GAAG,WAAW,~~CACpC~~,CAAC,EAA+D,EAAE,EAAE;~~QAClE~~,IAAI,qCAAqC,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC;YAC1D,OAAO;QACT,CAAC;QACD,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,EAAE,CAAC,QAAQ,KAAK,KAAK,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC;YACrE,EAAE,CAAC,cAAc,EAAE,CAAC;YACpB,cAAc,IAAI,cAAc,EAAE,CAAC;QACrC,CAAC;QACD,SAAS,IAAI,SAAS,CAAC,EAAE,CAAC,CAAC;IAC7B,CAAC,~~EACD~~,CAAC,cAAc,EAAE,SAAS,EAAE,cAAc,CAAC,~~CAC5C~~,CAAC;~~IAEF~~,MAAM,gBAAgB,GAAG,GAAgB,EAAE;QACzC,OAAO,0CAAG,QAAQ,CAAI,CAAC;IACzB,CAAC,CAAC;~~IAEF~~,MAAM,eAAe,GAAG,GAAgB,EAAE;QACxC,MAAM,cAAc,GAAoB;YACtC,SAAS,EAAE,KAAK,CAAC,SAAS,KAAK,kBAAkB;YACjD,SAAS,EAAE,IAAI;YACf,gBAAgB,EAAE,IAAI;YACtB,QAAQ,EAAE,KAAK;YACf,SAAS,EAAE,KAAK;YAChB,YAAY,EAAE,YAAY;YAC1B,EAAE;YACF,cAAc,EAAE,qBAAqB;YACrC,WAAW,EAAE,eAAe;YAC5B,YAAY,EAAE,KAAK;YACnB,MAAM,EAAE,oBAAoB;YAC5B,QAAQ;YACR,YAAY;YACZ,cAAc,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS;SAC9D,CAAC;QAEF,0CAA0C;QAC1C,MAAM,yBAAyB,GAA8B;YAC3D,cAAc,EAAE,cAAc;YAC9B,QAAQ,EAAE,QAAQ;YAClB,SAAS,EAAE,SAAS;YACpB,QAAQ,EAAE,QAAQ;YAClB,SAAS,EAAE,SAAS;YACpB,cAAc,EAAE,cAAc;YAC9B,YAAY,EAAE,YAAY;YAC1B,cAAc,EAAE,cAAc;YAC9B,oBAAoB,EAAE,KAAK,CAAC,oBAAoB;SACjD,CAAC;QACF,~~0CAA0C;QAC1C,IAAI,KAAK,CAAC,oBAAoB,EAAE,CAAC;YAC/B,~~OAAO,~~oBAAC,oBAAoB,oBAAK,yBAAyB,EAAI,CAAC;QACjE,CAAC;QACD,OAAO,CACL,~~6BAAK,KAAK,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC,CAAC,~~EAAE,~~OAAO,EAAE,aAAa,~~EAAE,~~CAAC,CAAC,CAAC,SAAS;~~YAC9E~~,oBAAC,SAAS,~~oBACJ~~,cAAc,~~kBACN~~,QAAQ,~~EACpB~~,KAAK,EAAE,SAAS,~~EAChB~~,QAAQ,EAAE,QAAQ,~~EAClB~~,SAAS,EAAE,kBAAkB,~~EAC7B~~,OAAO,EAAE,CAAC,CAAC,EAAE~~,EAAE~~;~~oBACb~~,4EAA4E;oBAC5E,mEAAmE;oBACnE,CAAC,CAAC,aAAa,CAAC,KAAK,GAAG,EAAE,CAAC;oBAC3B,CAAC,CAAC,aAAa,CAAC,KAAK,GAAG,SAAS,CAAC;gBACpC,CAAC,~~IACD~~,~~CACE~~,~~CACP,~~CAAC;~~IACJ~~,CAAC,CAAC;~~IAEF~~,OAAO,~~CACL,~~oBAAC,KAAK,IAAC,SAAS,EAAE,eAAe;~~QAC/B~~,6BAAK,SAAS,EAAE,wBAAwB,IAAG,eAAe,EAAE,CAAO,CAC7D,~~CACT,~~CAAC;~~AACJ~~,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { ReactNode, FormEvent, useCallback } from 'react';\n\nimport { Stack, TextField, mergeStyles, IStyle, ITextField, concatStyleSets, ITextFieldProps } from '@fluentui/react';\nimport { BaseCustomStyles } from '../types';\nimport { isEnterKeyEventFromCompositionSession } from './utils';\n\nimport {\n inputBoxStyle~~,\n~~ inputBoxWrapperStyle~~,\n~~ textFieldStyle~~,\n~~ textContainerStyle\n} from './styles/InputBoxComponent.style';\n\n/* @conditional-compile-remove(mention) /\nimport { MentionLookupOptions } from './MentionPopover';\n/ @conditional-compile-remove(mention) /\nimport { TextFieldWithMention, TextFieldWithMentionProps } from './TextFieldWithMention/TextFieldWithMention';\n\n/\n @private\n /\nexport interface InputBoxStylesProps extends BaseCustomStyles {\n /* Styles for the text field. /\n textField?: IStyle;\n\n /* Styles for the system message; These styles will be ignored when a custom system message component is provided. /\n systemMessage?: IStyle;\n\n /* Styles for customizing the container of the text field /\n textFieldContainer?: IStyle;\n}\n\ntype InputBoxComponentProps = {\n children?: ReactNode;\n 'data-ui-id'?: string;\n id?: string;\n textValue: string; // This could be plain text or HTML.\n onChange: (event?: FormEvent<HTMLInputElement \| HTMLTextAreaElement>, newValue?: string) => void;\n textFieldRef?: React.RefObject<ITextField>;\n inputClassName?: string;\n placeholderText?: string;\n supportNewline?: boolean;\n maxLength: number;\n onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement \| HTMLTextAreaElement>) => void;\n onEnterKeyDown?: () => void;\n errorMessage?: string \| React.ReactElement;\n disabled?: boolean;\n styles?: InputBoxStylesProps;\n autoFocus?: 'sendBoxTextField';\n ~~/ @conditional-compile-remove(mention) /\n mentionLookupOptions?: MentionLookupOptions;\n~~};\n\n/\n @private\n /\nexport const InputBoxComponent = (props: InputBoxComponentProps): JSX.Element => {\n const {\n styles,\n id,\n 'data-ui-id': dataUiId,\n textValue,\n onChange,\n textFieldRef,\n placeholderText,\n onKeyDown,\n onEnterKeyDown,\n supportNewline,\n inputClassName,\n errorMessage,\n disabled,\n children\n } = props;\n const mergedRootStyle = mergeStyles(inputBoxWrapperStyle, styles?.root);\n const mergedInputFieldStyle = mergeStyles(inputBoxStyle, inputClassName);\n\n const mergedTextContainerStyle = mergeStyles(textContainerStyle, styles?.textFieldContainer);\n const mergedTextFieldStyle = concatStyleSets(textFieldStyle, {\n fieldGroup: styles?.textField,\n errorMessage: styles?.systemMessage,\n suffix: {\n backgroundColor: 'transparent',\n padding: '0 0'\n }\n });\n\n const onTextFieldKeyDown = useCallback(\n (ev: React.KeyboardEvent<HTMLInputElement \| HTMLTextAreaElement>) => {\n if (isEnterKeyEventFromCompositionSession(ev.nativeEvent)) {\n return;\n }\n if (ev.key === 'Enter' && (ev.shiftKey === false \|\| !supportNewline)) {\n ev.preventDefault();\n onEnterKeyDown && onEnterKeyDown();\n }\n onKeyDown && onKeyDown(ev);\n }~~,\n~~ [onEnterKeyDown, onKeyDown, supportNewline]\n );\n\n const onRenderChildren = (): JSX.Element => {\n return <>{children}</>;\n };\n\n const renderTextField = (): JSX.Element => {\n const textFieldProps: ITextFieldProps = {\n autoFocus: props.autoFocus === 'sendBoxTextField',\n multiline: true,\n autoAdjustHeight: true,\n multiple: false,\n resizable: false,\n componentRef: textFieldRef,\n id,\n inputClassName: mergedInputFieldStyle,\n placeholder: placeholderText,\n autoComplete: 'off',\n styles: mergedTextFieldStyle,\n disabled,\n errorMessage,\n onRenderSuffix: props.children ? onRenderChildren : undefined\n };\n\n / @conditional-compile-remove(mention) /\n const textFieldWithMentionProps: TextFieldWithMentionProps = {\n textFieldProps: textFieldProps,\n dataUiId: dataUiId,\n textValue: textValue,\n onChange: onChange,\n onKeyDown: onKeyDown,\n onEnterKeyDown: onEnterKeyDown,\n textFieldRef: textFieldRef,\n supportNewline: supportNewline,\n mentionLookupOptions: props.mentionLookupOptions\n };\n / @conditional-compile-remove(mention) */\n if (props.mentionLookupOptions) {\n return <~~TextFieldWithMention {...textFieldWithMentionProps} />;\n }\n return (\n <~~div style={textFieldProps.errorMessage ? { padding: '0 0 5px 5px' } : undefined}>\n <TextField\n {...textFieldProps}\n data-ui-id={dataUiId}\n value={textValue}\n onChange={onChange}\n onKeyDown={onTextFieldKeyDown}\n onFocus={(e) => {\n // Fix for setting the cursor to the correct position when multiline is true\n // This approach should be reviewed during migration to FluentUI v9\n e.currentTarget.value = '';\n e.currentTarget.value = textValue;\n }}\n />\n </div>\n ~~);\n~~ };\n\n return ~~(\n~~ <Stack className={mergedRootStyle}>\n <div className={mergedTextContainerStyle}>{renderTextField()}</div>\n </Stack>\n ~~);\n~~}~~;\n~~"]}
1	+ {"version":3,"file":"InputBoxComponent.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/InputBoxComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { ReactNode, FormEvent, useCallback } from 'react';\nimport { Stack, TextField, mergeStyles, IStyle, ITextField, concatStyleSets, ITextFieldProps } from '@fluentui/react';\nimport { BaseCustomStyles } from '../types';\nimport { isEnterKeyEventFromCompositionSession } from './utils';\nimport { inputBoxStyle, inputBoxWrapperStyle, textFieldStyle, textContainerStyle } from './styles/InputBoxComponent.style';\n/*\n @private\n /\nexport interface InputBoxStylesProps extends BaseCustomStyles {\n /* Styles for the text field. /\n textField?: IStyle;\n\n /* Styles for the system message; These styles will be ignored when a custom system message component is provided. /\n systemMessage?: IStyle;\n\n /* Styles for customizing the container of the text field /\n textFieldContainer?: IStyle;\n}\ntype InputBoxComponentProps = {\n children?: ReactNode;\n 'data-ui-id'?: string;\n id?: string;\n textValue: string; // This could be plain text or HTML.\n onChange: (event?: FormEvent<HTMLInputElement \| HTMLTextAreaElement>, newValue?: string) => void;\n textFieldRef?: React.RefObject<ITextField>;\n inputClassName?: string;\n placeholderText?: string;\n supportNewline?: boolean;\n maxLength: number;\n onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement \| HTMLTextAreaElement>) => void;\n onEnterKeyDown?: () => void;\n errorMessage?: string \| React.ReactElement;\n disabled?: boolean;\n styles?: InputBoxStylesProps;\n autoFocus?: 'sendBoxTextField';\n};\n\n/\n @private\n */\nexport const InputBoxComponent = (props: InputBoxComponentProps): JSX.Element => {\n const {\n styles,\n id,\n 'data-ui-id': dataUiId,\n textValue,\n onChange,\n textFieldRef,\n placeholderText,\n onKeyDown,\n onEnterKeyDown,\n supportNewline,\n inputClassName,\n errorMessage,\n disabled,\n children\n } = props;\n const mergedRootStyle = mergeStyles(inputBoxWrapperStyle, styles?.root);\n const mergedInputFieldStyle = mergeStyles(inputBoxStyle, inputClassName);\n const mergedTextContainerStyle = mergeStyles(textContainerStyle, styles?.textFieldContainer);\n const mergedTextFieldStyle = concatStyleSets(textFieldStyle, {\n fieldGroup: styles?.textField,\n errorMessage: styles?.systemMessage,\n suffix: {\n backgroundColor: 'transparent',\n padding: '0 0'\n }\n });\n const onTextFieldKeyDown = useCallback((ev: React.KeyboardEvent<HTMLInputElement \| HTMLTextAreaElement>) => {\n if (isEnterKeyEventFromCompositionSession(ev.nativeEvent)) {\n return;\n }\n if (ev.key === 'Enter' && (ev.shiftKey === false \|\| !supportNewline)) {\n ev.preventDefault();\n onEnterKeyDown && onEnterKeyDown();\n }\n onKeyDown && onKeyDown(ev);\n }, [onEnterKeyDown, onKeyDown, supportNewline]);\n const onRenderChildren = (): JSX.Element => {\n return <>{children}</>;\n };\n const renderTextField = (): JSX.Element => {\n const textFieldProps: ITextFieldProps = {\n autoFocus: props.autoFocus === 'sendBoxTextField',\n multiline: true,\n autoAdjustHeight: true,\n multiple: false,\n resizable: false,\n componentRef: textFieldRef,\n id,\n inputClassName: mergedInputFieldStyle,\n placeholder: placeholderText,\n autoComplete: 'off',\n styles: mergedTextFieldStyle,\n disabled,\n errorMessage,\n onRenderSuffix: props.children ? onRenderChildren : undefined\n };\n return <div style={textFieldProps.errorMessage ? {\n padding: '0 0 5px 5px'\n } : undefined}>\n <TextField {...textFieldProps} data-ui-id={dataUiId} value={textValue} onChange={onChange} onKeyDown={onTextFieldKeyDown} onFocus={e => {\n // Fix for setting the cursor to the correct position when multiline is true\n // This approach should be reviewed during migration to FluentUI v9\n e.currentTarget.value = '';\n e.currentTarget.value = textValue;\n }} />\n </div>;\n };\n return <Stack className={mergedRootStyle}>\n <div className={mergedTextContainerStyle}>{renderTextField()}</div>\n </Stack>;\n};"]}

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

@@ -35,15 +35,17 @@ export const LocalVideoCameraCycleButton = (props) => {
     }), [onSelectCamera]);
     const disabled = !!waitForCamera;
     const cameraLoadingString = useLocale().strings.cameraButton.tooltipVideoLoadingContent;
-    return (React.createElement(IconButton, { "data-ui-id": 'local-camera-switcher-button', styles: localVideoCameraCycleButtonStyles(theme, size), disabled: disabled, iconProps: { iconName: 'LocalCameraSwitch' }, ariaLabel: label, ariaDescription: disabled ? cameraLoadingString : ariaDescription, "aria-live": 'polite', onClick: () => {
+    return React.createElement(IconButton, { "data-ui-id": 'local-camera-switcher-button', styles: localVideoCameraCycleButtonStyles(theme, size), disabled: disabled, iconProps: {
+            iconName: 'LocalCameraSwitch'
+        }, ariaLabel: label, ariaDescription: disabled ? cameraLoadingString : ariaDescription, "aria-live": 'polite', onClick: () => {
             if (cameras && cameras.length > 1 && selectedCamera !== undefined) {
-                const index = cameras.findIndex((camera) => selectedCamera.id === camera.id);
+                const index = cameras.findIndex(camera => selectedCamera.id === camera.id);
                 const newCamera = cameras[(index + 1) % cameras.length];
                 if (!newCamera) {
                     throw new Error('Camera not found');
                 }
                 onChangeCameraClick(newCamera);
             }
-        } }));
+        } });
 };
 //# sourceMappingURL=LocalVideoCameraButton.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"LocalVideoCameraButton.js","sourceRoot":"","sources":["~~../../../../../../~~react-components/src/components/LocalVideoCameraButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,iCAAiC,EAAE,MAAM,8BAA8B,CAAC;AACjF,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAoB5C;;;GAGG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,KAAuC,EAAe,EAAE;IAClG,MAAM,~~EAAE~~,OAAO,~~EAAE~~,cAAc,~~EAAE~~,cAAc,~~EAAE~~,KAAK,~~EAAE~~,eAAe,~~EAAE~~,IAAI,~~EAAE~~,GAAG,KAAK,CAAC;~~IACxF~~,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;~~IAEzB~~,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,mBAAmB,GAAG,WAAW,~~CACrC~~,CAAO,MAAqB,EAAE,EAAE;~~QAC9B~~,yDAAyD;QACzD,IAAI,cAAc,EAAE,CAAC;YACnB,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACvB,IAAI,CAAC;gBACH,MAAM,cAAc,CAAC,MAAM,CAAC,CAAC;YAC/B,CAAC;oBAAS,CAAC;gBACT,gBAAgB,CAAC,KAAK,CAAC,CAAC;YAC1B,CAAC;QACH,CAAC;IACH,CAAC,CAAA,~~EACD~~,CAAC,cAAc,CAAC,~~CACjB~~,CAAC;~~IAEF~~,MAAM,QAAQ,GAAG,CAAC,CAAC,aAAa,CAAC;IACjC,MAAM,mBAAmB,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,0BAA0B,CAAC;~~IAExF~~,OAAO,~~CACL,~~oBAAC,UAAU,~~kBACG~~,8BAA8B,~~EAC1C~~,MAAM,EAAE,iCAAiC,CAAC,KAAK,EAAE,IAAI,CAAC,~~EACtD~~,QAAQ,EAAE,QAAQ,~~EAClB~~,SAAS,EAAE,~~EAAE,~~QAAQ,EAAE,mBAAmB,EAAE,~~EAC5C,~~SAAS,EAAE,KAAK,~~EAChB~~,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,eAAe,~~eACtD~~,QAAQ,~~EACnB~~,OAAO,EAAE,GAAG,EAAE;~~YACZ~~,IAAI,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,cAAc,KAAK,SAAS,EAAE,CAAC;gBAClE,MAAM,KAAK,GAAG,OAAO,CAAC,SAAS,CAAC,~~CAAC,~~MAAM,~~EAAE~~,EAAE,CAAC,cAAc,CAAC,EAAE,KAAK,MAAM,CAAC,EAAE,CAAC,CAAC;~~gBAC7E~~,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;gBACxD,IAAI,CAAC,SAAS,EAAE,CAAC;oBACf,MAAM,IAAI,KAAK,CAAC,kBAAkB,CAAC,CAAC;gBACtC,CAAC;gBACD,mBAAmB,CAAC,SAAS,CAAC,CAAC;YACjC,CAAC;QACH,CAAC,~~GACD~~,~~CACH,~~CAAC;~~AACJ~~,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IconButton, useTheme } from '@fluentui/react';\nimport React, { useCallback, useState } from 'react';\nimport { OptionsDevice } from './DevicesButton';\nimport { localVideoCameraCycleButtonStyles } from './styles/VideoGallery.styles';\nimport { useLocale } from '../localization';\n\n/*\n @public\n /\nexport interface LocalVideoCameraCycleButtonProps {\n /* Array of cameras available to the user. /\n cameras?: OptionsDevice[];\n /* Currently selected camera in the local video stream. /\n selectedCamera?: OptionsDevice;\n /* callback function to change video feed. /\n onSelectCamera?: (device: OptionsDevice) => Promise<void>;\n /* label for local video camera switcher /\n label?: string;\n /* description for local video camera switcher /\n ariaDescription?: string;\n /* control to enable large button mode /\n size?: 'small' \| 'large';\n}\n\n/\n local video tile camera cycle button - for use on mobile screens only.\n * @internal\n */\nexport const LocalVideoCameraCycleButton = (props: LocalVideoCameraCycleButtonProps): JSX.Element => {\n const { cameras, selectedCamera, onSelectCamera, label, ariaDescription, size } = props;\n const theme = useTheme();\n\n const [waitForCamera, setWaitForCamera] = useState(false);\n const onChangeCameraClick = useCallback(\n async (device: OptionsDevice) => {\n // Throttle changing camera to prevent too many callbacks\n if (onSelectCamera) {\n setWaitForCamera(true);\n try {\n await onSelectCamera(device);\n } finally {\n setWaitForCamera(false);\n }\n }\n }~~,\n~~ [onSelectCamera]\n );\n\n const disabled = !!waitForCamera;\n const cameraLoadingString = useLocale().strings.cameraButton.tooltipVideoLoadingContent;\n\n return ~~(\n~~ <IconButton\n data-ui-id={'local-camera-switcher-button'}\n styles={localVideoCameraCycleButtonStyles(theme, size)}\n disabled={disabled}\n iconProps={{ iconName: 'LocalCameraSwitch' }}\n ariaLabel={label}\n ariaDescription={disabled ? cameraLoadingString : ariaDescription}\n aria-live={'polite'}\n onClick={() => {\n if (cameras && cameras.length > 1 && selectedCamera !== undefined) {\n const index = cameras.findIndex((camera) => selectedCamera.id === camera.id);\n const newCamera = cameras[(index + 1) % cameras.length];\n if (!newCamera) {\n throw new Error('Camera not found');\n }\n onChangeCameraClick(newCamera);\n }\n }}\n ~~/>\n );\n~~}~~;\n~~"]}
1	+ {"version":3,"file":"LocalVideoCameraButton.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/LocalVideoCameraButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,iCAAiC,EAAE,MAAM,8BAA8B,CAAC;AACjF,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAoB5C;;;GAGG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,KAAuC,EAAe,EAAE;IAClG,MAAM,EACJ,OAAO,EACP,cAAc,EACd,cAAc,EACd,KAAK,EACL,eAAe,EACf,IAAI,EACL,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,mBAAmB,GAAG,WAAW,CAAC,CAAO,MAAqB,EAAE,EAAE;QACtE,yDAAyD;QACzD,IAAI,cAAc,EAAE,CAAC;YACnB,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACvB,IAAI,CAAC;gBACH,MAAM,cAAc,CAAC,MAAM,CAAC,CAAC;YAC/B,CAAC;oBAAS,CAAC;gBACT,gBAAgB,CAAC,KAAK,CAAC,CAAC;YAC1B,CAAC;QACH,CAAC;IACH,CAAC,CAAA,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IACrB,MAAM,QAAQ,GAAG,CAAC,CAAC,aAAa,CAAC;IACjC,MAAM,mBAAmB,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,0BAA0B,CAAC;IACxF,OAAO,oBAAC,UAAU,kBAAa,8BAA8B,EAAE,MAAM,EAAE,iCAAiC,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE;YACpJ,QAAQ,EAAE,mBAAmB;SAC9B,EAAE,SAAS,EAAE,KAAK,EAAE,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,eAAe,eAAa,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE;YACzH,IAAI,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,cAAc,KAAK,SAAS,EAAE,CAAC;gBAClE,MAAM,KAAK,GAAG,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,cAAc,CAAC,EAAE,KAAK,MAAM,CAAC,EAAE,CAAC,CAAC;gBAC3E,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;gBACxD,IAAI,CAAC,SAAS,EAAE,CAAC;oBACf,MAAM,IAAI,KAAK,CAAC,kBAAkB,CAAC,CAAC;gBACtC,CAAC;gBACD,mBAAmB,CAAC,SAAS,CAAC,CAAC;YACjC,CAAC;QACH,CAAC,GAAI,CAAC;AACR,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IconButton, useTheme } from '@fluentui/react';\nimport React, { useCallback, useState } from 'react';\nimport { OptionsDevice } from './DevicesButton';\nimport { localVideoCameraCycleButtonStyles } from './styles/VideoGallery.styles';\nimport { useLocale } from '../localization';\n\n/*\n @public\n /\nexport interface LocalVideoCameraCycleButtonProps {\n /* Array of cameras available to the user. /\n cameras?: OptionsDevice[];\n /* Currently selected camera in the local video stream. /\n selectedCamera?: OptionsDevice;\n /* callback function to change video feed. /\n onSelectCamera?: (device: OptionsDevice) => Promise<void>;\n /* label for local video camera switcher /\n label?: string;\n /* description for local video camera switcher /\n ariaDescription?: string;\n /* control to enable large button mode /\n size?: 'small' \| 'large';\n}\n\n/\n local video tile camera cycle button - for use on mobile screens only.\n * @internal\n */\nexport const LocalVideoCameraCycleButton = (props: LocalVideoCameraCycleButtonProps): JSX.Element => {\n const {\n cameras,\n selectedCamera,\n onSelectCamera,\n label,\n ariaDescription,\n size\n } = props;\n const theme = useTheme();\n const [waitForCamera, setWaitForCamera] = useState(false);\n const onChangeCameraClick = useCallback(async (device: OptionsDevice) => {\n // Throttle changing camera to prevent too many callbacks\n if (onSelectCamera) {\n setWaitForCamera(true);\n try {\n await onSelectCamera(device);\n } finally {\n setWaitForCamera(false);\n }\n }\n }, [onSelectCamera]);\n const disabled = !!waitForCamera;\n const cameraLoadingString = useLocale().strings.cameraButton.tooltipVideoLoadingContent;\n return <IconButton data-ui-id={'local-camera-switcher-button'} styles={localVideoCameraCycleButtonStyles(theme, size)} disabled={disabled} iconProps={{\n iconName: 'LocalCameraSwitch'\n }} ariaLabel={label} ariaDescription={disabled ? cameraLoadingString : ariaDescription} aria-live={'polite'} onClick={() => {\n if (cameras && cameras.length > 1 && selectedCamera !== undefined) {\n const index = cameras.findIndex(camera => selectedCamera.id === camera.id);\n const newCamera = cameras[(index + 1) % cameras.length];\n if (!newCamera) {\n throw new Error('Camera not found');\n }\n onChangeCameraClick(newCamera);\n }\n }} />;\n};"]}

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

@@ -30,18 +30,13 @@ export const _LocalVideoTile = React.memo((props) => {
         onDisposeLocalStreamView,
         renderElementExists: !!renderElement,
         scalingMode: localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.scalingMode
-    }), [
-        isAvailable,
-        localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.isMirrored,
-        localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.scalingMode,
-        onCreateLocalStreamView,
-        onDisposeLocalStreamView,
-        renderElement
-    ]);
+    }), [isAvailable, localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.isMirrored, localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.scalingMode, onCreateLocalStreamView, onDisposeLocalStreamView, renderElement]);
     // Handle creating, destroying and updating the video stream as necessary
     useLocalVideoStreamLifecycleMaintainer(localVideoStreamProps);
     const contextualMenuProps = useVideoTileContextualMenuProps({
-        participant: { userId: userId !== null && userId !== void 0 ? userId : '' },
+        participant: {
+            userId: userId !== null && userId !== void 0 ? userId : ''
+        },
         strings: Object.assign({}, strings),
         spotlightedParticipantUserIds,
         isSpotlighted,
@@ -83,52 +78,40 @@ export const _LocalVideoTile = React.memo((props) => {
             // Returning `undefined` results in the placeholder with avatar being shown
             return undefined;
         }
-        return (React.createElement(React.Fragment, null,
+        return React.createElement(React.Fragment, null,
             React.createElement(FloatingLocalCameraCycleButton, { showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview !== null && showCameraSwitcherInLocalPreview !== void 0 ? showCameraSwitcherInLocalPreview : false, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: localVideoCameraSwitcherLabel, localVideoSelectedDescription: localVideoSelectedDescription }),
             React.createElement(StreamMedia, { videoStreamElement: renderElement, isMirrored: true }),
-            props.participantsCount === 1 && !isScreenSharingOn && (React.createElement(Stack, { className: mergeStyles(videoContainerStyles, overlayStyles()) },
-                React.createElement(Spinner, { label: strings === null || strings === void 0 ? void 0 : strings.waitingScreenText, ariaLive: "assertive", role: "alert", labelPosition: "bottom", styles: loadSpinnerStyles(theme, true) })))));
-    }, [
-        localVideoCameraCycleButtonProps,
-        localVideoCameraSwitcherLabel,
-        localVideoSelectedDescription,
-        renderElement,
-        showCameraSwitcherInLocalPreview,
-        props.participantsCount,
-        strings === null || strings === void 0 ? void 0 : strings.waitingScreenText,
-        theme,
-        isScreenSharingOn
-    ]);
+            props.participantsCount === 1 && !isScreenSharingOn && React.createElement(Stack, { className: mergeStyles(videoContainerStyles, overlayStyles()) },
+                React.createElement(Spinner, { label: strings === null || strings === void 0 ? void 0 : strings.waitingScreenText, ariaLive: "assertive", role: "alert", labelPosition: "bottom", styles: loadSpinnerStyles(theme, true) })));
+    }, [localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription, renderElement, showCameraSwitcherInLocalPreview, props.participantsCount, strings === null || strings === void 0 ? void 0 : strings.waitingScreenText, theme, isScreenSharingOn]);
     const videoTileOverlay = useMemo(() => {
-        const reactionOverlay = reactionResources !== undefined ? (React.createElement(MeetingReactionOverlay, { overlayMode: "grid-tiles", reaction: reaction, reactionResources: reactionResources })) : undefined;
+        const reactionOverlay = reactionResources !== undefined ? React.createElement(MeetingReactionOverlay, { overlayMode: "grid-tiles", reaction: reaction, reactionResources: reactionResources }) : undefined;
         return reactionOverlay;
     }, [reaction, reactionResources]);
     const onRenderAvatarOneParticipant = useCallback(() => {
-        return (React.createElement(Stack, { className: mergeStyles(videoContainerStyles, overlayStylesTransparent()) },
-            React.createElement(Spinner, { label: strings === null || strings === void 0 ? void 0 : strings.waitingScreenText, ariaLive: "assertive", labelPosition: "bottom", role: "alert", styles: loadSpinnerStyles(theme, false) })));
+        return React.createElement(Stack, { className: mergeStyles(videoContainerStyles, overlayStylesTransparent()) },
+            React.createElement(Spinner, { label: strings === null || strings === void 0 ? void 0 : strings.waitingScreenText, ariaLive: "assertive", labelPosition: "bottom", role: "alert", styles: loadSpinnerStyles(theme, false) }));
     }, [strings === null || strings === void 0 ? void 0 : strings.waitingScreenText, theme]);
-    return (React.createElement(Stack, { "data-ui-id": "local-video-tile", className: mergeStyles({ width: '100%', height: '100%' }), onKeyDown: menuKind === 'drawer' ? onKeyDown : undefined },
-        React.createElement(VideoTile, Object.assign({ key: userId !== null && userId !== void 0 ? userId : 'local-video-tile', userId: userId, renderElement: renderVideoStreamElement, showLabel: showLabel, alwaysShowLabelBackground: alwaysShowLabelBackground, displayName: displayName, initialsName: initialsName, styles: videoTileStyles, onRenderPlaceholder: props.participantsCount === 1 && !isScreenSharingOn ? onRenderAvatarOneParticipant : onRenderAvatar, isMuted: isMuted, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, raisedHand: raisedHand, isSpotlighted: isSpotlighted }, videoTileContextualMenuProps, { onLongTouch: () => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))), overlay: videoTileOverlay }), drawerMenuItemProps.length > 0 && (React.createElement(Layer, { hostId: props.drawerMenuHostId },
+    return React.createElement(Stack, { "data-ui-id": "local-video-tile", className: mergeStyles({
+            width: '100%',
+            height: '100%'
+        }), onKeyDown: menuKind === 'drawer' ? onKeyDown : undefined },
+        React.createElement(VideoTile, Object.assign({ key: userId !== null && userId !== void 0 ? userId : 'local-video-tile', userId: userId, renderElement: renderVideoStreamElement, showLabel: showLabel, alwaysShowLabelBackground: alwaysShowLabelBackground, displayName: displayName, initialsName: initialsName, styles: videoTileStyles, onRenderPlaceholder: props.participantsCount === 1 && !isScreenSharingOn ? onRenderAvatarOneParticipant : onRenderAvatar, isMuted: isMuted, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, raisedHand: raisedHand, isSpotlighted: isSpotlighted }, videoTileContextualMenuProps, { onLongTouch: () => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))), overlay: videoTileOverlay }), drawerMenuItemProps.length > 0 && React.createElement(Layer, { hostId: props.drawerMenuHostId },
             React.createElement(Stack, { styles: drawerMenuWrapperStyles },
-                React.createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItemProps([]), items: drawerMenuItemProps })))))));
+                React.createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItemProps([]), items: drawerMenuItemProps })))));
 });
 const FloatingLocalCameraCycleButton = (props) => {
     const { showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription } = props;
-    const ariaDescription = (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.selectedCamera) &&
-        localVideoSelectedDescription &&
-        _formatString(localVideoSelectedDescription, {
-            cameraName: localVideoCameraCycleButtonProps.selectedCamera.name
-        });
-    return (React.createElement(Stack, { horizontalAlign: "end" }, showCameraSwitcherInLocalPreview &&
-        (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.cameras) !== undefined &&
-        (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.selectedCamera) !== undefined &&
-        (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.onSelectCamera) !== undefined && (React.createElement(LocalVideoCameraCycleButton, { cameras: localVideoCameraCycleButtonProps.cameras, selectedCamera: localVideoCameraCycleButtonProps.selectedCamera, onSelectCamera: localVideoCameraCycleButtonProps.onSelectCamera, label: localVideoCameraSwitcherLabel, ariaDescription: ariaDescription }))));
+    const ariaDescription = (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.selectedCamera) && localVideoSelectedDescription && _formatString(localVideoSelectedDescription, {
+        cameraName: localVideoCameraCycleButtonProps.selectedCamera.name
+    });
+    return React.createElement(Stack, { horizontalAlign: "end" }, showCameraSwitcherInLocalPreview && (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.cameras) !== undefined && (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.selectedCamera) !== undefined && (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.onSelectCamera) !== undefined && React.createElement(LocalVideoCameraCycleButton, { cameras: localVideoCameraCycleButtonProps.cameras, selectedCamera: localVideoCameraCycleButtonProps.selectedCamera, onSelectCamera: localVideoCameraCycleButtonProps.onSelectCamera, label: localVideoCameraSwitcherLabel, ariaDescription: ariaDescription }));
 };
 const convertContextualMenuItemsToDrawerMenuItemProps = (contextualMenuProps, onLightDismiss) => {
     if (!contextualMenuProps) {
         return [];
     }
-    return contextualMenuProps.items.map((item) => {
+    return contextualMenuProps.items.map(item => {
         return {
             itemKey: item.key,
             text: item.text,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"LocalVideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/LocalVideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, Stack, Spinner } from '@fluentui/react';\nimport { concatStyleSets, IContextualMenuProps, Layer } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useMemo } from 'react';\nimport { KeyboardEvent, useCallback } from 'react';\nimport { OnRenderAvatarCallback, VideoStreamOptions, CreateVideoStreamViewResult } from '../types';\nimport { Reaction } from '../types';\nimport { LocalVideoCameraCycleButton, LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\nimport { StreamMedia } from './StreamMedia';\nimport {\n useLocalVideoStreamLifecycleMaintainer,\n LocalVideoStreamLifecycleMaintainerProps\n} from './VideoGallery/useVideoStreamLifecycleMaintainer';\nimport { VideoTile, VideoTileStylesProps } from './VideoTile';\nimport { RaisedHand } from '../types';\nimport { useTheme } from '../theming';\nimport { ReactionResources } from '../types/ReactionTypes';\nimport { MeetingReactionOverlay } from './MeetingReactionOverlay';\nimport { useVideoTileContextualMenuProps } from './VideoGallery/useVideoTileContextualMenuProps';\nimport { VideoGalleryStrings } from './VideoGallery';\nimport { _DrawerMenu, _DrawerMenuItemProps } from './Drawer';\nimport { drawerMenuWrapperStyles } from './VideoGallery/styles/RemoteVideoTile.styles';\nimport {\n videoContainerStyles,\n overlayStyles,\n overlayStylesTransparent,\n loadSpinnerStyles\n} from './styles/VideoTile.styles';\n\n/*\n A memoized version of VideoTile for rendering local participant.\n \n @internal\n */\nexport const _LocalVideoTile = React.memo(\n (props: {\n userId?: string;\n onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void \| CreateVideoStreamViewResult>;\n onDisposeLocalStreamView?: () => void;\n isAvailable?: boolean;\n isMuted?: boolean;\n renderElement?: HTMLElement;\n displayName?: string;\n initialsName?: string;\n localVideoViewOptions?: VideoStreamOptions;\n onRenderAvatar?: OnRenderAvatarCallback;\n showLabel: boolean;\n alwaysShowLabelBackground?: boolean;\n showMuteIndicator?: boolean;\n showCameraSwitcherInLocalPreview?: boolean;\n localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n localVideoCameraSwitcherLabel?: string;\n localVideoSelectedDescription?: string;\n styles?: VideoTileStylesProps;\n personaMinSize?: number;\n raisedHand?: RaisedHand;\n reaction?: Reaction;\n spotlightedParticipantUserIds?: string[];\n isSpotlighted?: boolean;\n onStartSpotlight?: () => void;\n onStopSpotlight?: () => void;\n maxParticipantsToSpotlight?: number;\n menuKind?: 'contextual' \| 'drawer';\n drawerMenuHostId?: string;\n strings?: VideoGalleryStrings;\n reactionResources?: ReactionResources;\n participantsCount?: number;\n isScreenSharingOn?: boolean;\n }) => {\n const {\n isAvailable,\n isMuted,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n localVideoViewOptions,\n renderElement,\n userId,\n showLabel,\n alwaysShowLabelBackground,\n displayName,\n initialsName,\n onRenderAvatar,\n showMuteIndicator,\n styles,\n showCameraSwitcherInLocalPreview,\n localVideoCameraCycleButtonProps,\n localVideoCameraSwitcherLabel,\n localVideoSelectedDescription,\n raisedHand,\n reaction,\n isSpotlighted,\n spotlightedParticipantUserIds,\n onStartSpotlight,\n onStopSpotlight,\n maxParticipantsToSpotlight,\n menuKind,\n strings,\n reactionResources,\n isScreenSharingOn\n } = props;\n\n const theme = useTheme();\n\n const localVideoStreamProps: LocalVideoStreamLifecycleMaintainerProps = useMemo(\n () => ({\n isMirrored: localVideoViewOptions?.isMirrored,\n isStreamAvailable: isAvailable,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n renderElementExists: !!renderElement,\n scalingMode: localVideoViewOptions?.scalingMode\n }),\n [\n isAvailable,\n localVideoViewOptions?.isMirrored,\n localVideoViewOptions?.scalingMode,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n renderElement\n ]\n );\n\n // Handle creating, destroying and updating the video stream as necessary\n useLocalVideoStreamLifecycleMaintainer(localVideoStreamProps);\n\n const contextualMenuProps = useVideoTileContextualMenuProps({\n participant: { userId: userId ?? '' },\n strings: { ...strings },\n spotlightedParticipantUserIds,\n isSpotlighted,\n onStartSpotlight,\n onStopSpotlight,\n maxParticipantsToSpotlight,\n myUserId: userId\n });\n\n const videoTileContextualMenuProps = useMemo(() => {\n if (menuKind !== 'contextual' \|\| !contextualMenuProps) {\n return {};\n }\n return {\n contextualMenu: contextualMenuProps\n };\n return {};\n }, [contextualMenuProps, menuKind]);\n\n const videoTileStyles = useMemo(() => {\n if (isSpotlighted) {\n return concatStyleSets(\n {\n root: {\n outline: `0.25rem solid ${theme.palette.neutralTertiaryAlt}`,\n outlineOffset: '-0.25rem'\n }\n },\n styles\n );\n }\n return styles;\n }, [isSpotlighted, theme.palette.neutralTertiaryAlt, styles]);\n\n const [drawerMenuItemProps, setDrawerMenuItemProps] = React.useState<_DrawerMenuItemProps[]>([]);\n\n const onKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n setDrawerMenuItemProps(\n convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n );\n }\n },\n [setDrawerMenuItemProps, contextualMenuProps]\n );\n\n const renderVideoStreamElement = useMemo(() => {\n // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which\n // implies that, after their threshold, all streams have no child (blank video)\n if (!renderElement \|\| !renderElement.childElementCount) {\n // Returning `undefined` results in the placeholder with avatar being shown\n return undefined;\n }\n\n return (\n <>\n <FloatingLocalCameraCycleButton\n showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview ?? false}\n localVideoCameraCycleButtonProps={localVideoCameraCycleButtonProps}\n localVideoCameraSwitcherLabel={localVideoCameraSwitcherLabel}\n localVideoSelectedDescription={localVideoSelectedDescription}\n />\n <StreamMedia videoStreamElement={renderElement} isMirrored={true} />\n {props.participantsCount === 1 && !isScreenSharingOn && (\n <Stack className={mergeStyles(videoContainerStyles, overlayStyles())}>\n <Spinner\n label={strings?.waitingScreenText}\n ariaLive=\"assertive\"\n role=\"alert\"\n labelPosition=\"bottom\"\n styles={loadSpinnerStyles(theme, true)}\n />\n </Stack>\n )}\n </>\n );\n }, [\n localVideoCameraCycleButtonProps,\n localVideoCameraSwitcherLabel,\n localVideoSelectedDescription,\n renderElement,\n showCameraSwitcherInLocalPreview,\n props.participantsCount,\n strings?.waitingScreenText,\n theme,\n isScreenSharingOn\n ]);\n\n const videoTileOverlay = useMemo(() => {\n const reactionOverlay =\n reactionResources !== undefined ? (\n <MeetingReactionOverlay overlayMode=\"grid-tiles\" reaction={reaction} reactionResources={reactionResources} />\n ) : undefined;\n return reactionOverlay;\n }, [reaction, reactionResources]);\n\n const onRenderAvatarOneParticipant = useCallback(() => {\n return (\n <Stack className={mergeStyles(videoContainerStyles, overlayStylesTransparent())}>\n <Spinner\n label={strings?.waitingScreenText}\n ariaLive=\"assertive\"\n labelPosition=\"bottom\"\n role=\"alert\"\n styles={loadSpinnerStyles(theme, false)}\n />\n </Stack>\n );\n }, [strings?.waitingScreenText, theme]);\n\n return (\n <Stack\n data-ui-id=\"local-video-tile\"\n className={mergeStyles({ width: '100%', height: '100%' })}\n onKeyDown={menuKind === 'drawer' ? onKeyDown : undefined}\n >\n <VideoTile\n key={userId ?? 'local-video-tile'}\n userId={userId}\n renderElement={renderVideoStreamElement}\n showLabel={showLabel}\n alwaysShowLabelBackground={alwaysShowLabelBackground}\n displayName={displayName}\n initialsName={initialsName}\n styles={videoTileStyles}\n onRenderPlaceholder={\n props.participantsCount === 1 && !isScreenSharingOn ? onRenderAvatarOneParticipant : onRenderAvatar\n }\n isMuted={isMuted}\n showMuteIndicator={showMuteIndicator}\n personaMinSize={props.personaMinSize}\n raisedHand={raisedHand}\n isSpotlighted={isSpotlighted}\n {...videoTileContextualMenuProps}\n onLongTouch={() =>\n setDrawerMenuItemProps(\n convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n )\n }\n overlay={videoTileOverlay}\n >\n {drawerMenuItemProps.length > 0 && (\n <Layer hostId={props.drawerMenuHostId}>\n <Stack styles={drawerMenuWrapperStyles}>\n <_DrawerMenu onLightDismiss={() => setDrawerMenuItemProps([])} items={drawerMenuItemProps} />\n </Stack>\n </Layer>\n )}\n </VideoTile>\n </Stack>\n );\n }\n);\n\nconst FloatingLocalCameraCycleButton = (props: {\n showCameraSwitcherInLocalPreview: boolean;\n localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n localVideoCameraSwitcherLabel?: string;\n localVideoSelectedDescription?: string;\n}): JSX.Element => {\n const {\n showCameraSwitcherInLocalPreview,\n localVideoCameraCycleButtonProps,\n localVideoCameraSwitcherLabel,\n localVideoSelectedDescription\n } = props;\n const ariaDescription =\n localVideoCameraCycleButtonProps?.selectedCamera &&\n localVideoSelectedDescription &&\n _formatString(localVideoSelectedDescription, {\n cameraName: localVideoCameraCycleButtonProps.selectedCamera.name\n });\n return (\n <Stack horizontalAlign=\"end\">\n {showCameraSwitcherInLocalPreview &&\n localVideoCameraCycleButtonProps?.cameras !== undefined &&\n localVideoCameraCycleButtonProps?.selectedCamera !== undefined &&\n localVideoCameraCycleButtonProps?.onSelectCamera !== undefined && (\n <LocalVideoCameraCycleButton\n cameras={localVideoCameraCycleButtonProps.cameras}\n selectedCamera={localVideoCameraCycleButtonProps.selectedCamera}\n onSelectCamera={localVideoCameraCycleButtonProps.onSelectCamera}\n label={localVideoCameraSwitcherLabel}\n ariaDescription={ariaDescription}\n />\n )}\n </Stack>\n );\n};\n\nconst convertContextualMenuItemsToDrawerMenuItemProps = (\n contextualMenuProps?: IContextualMenuProps,\n onLightDismiss?: () => void\n): _DrawerMenuItemProps[] => {\n if (!contextualMenuProps) {\n return [];\n }\n return contextualMenuProps.items.map((item) => {\n return {\n itemKey: item.key,\n text: item.text,\n iconProps: item.iconProps,\n disabled: item.disabled,\n onItemClick: () => {\n item.onClick?.();\n onLightDismiss?.();\n }\n };\n });\n};\n"]}
1	+ {"version":3,"file":"LocalVideoTile.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/LocalVideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, Stack, Spinner } from '@fluentui/react';\nimport { concatStyleSets, IContextualMenuProps, Layer } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useMemo } from 'react';\nimport { KeyboardEvent, useCallback } from 'react';\nimport { OnRenderAvatarCallback, VideoStreamOptions, CreateVideoStreamViewResult } from '../types';\nimport { Reaction } from '../types';\nimport { LocalVideoCameraCycleButton, LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\nimport { StreamMedia } from './StreamMedia';\nimport { useLocalVideoStreamLifecycleMaintainer, LocalVideoStreamLifecycleMaintainerProps } from './VideoGallery/useVideoStreamLifecycleMaintainer';\nimport { VideoTile, VideoTileStylesProps } from './VideoTile';\nimport { RaisedHand } from '../types';\nimport { useTheme } from '../theming';\nimport { ReactionResources } from '../types/ReactionTypes';\nimport { MeetingReactionOverlay } from './MeetingReactionOverlay';\nimport { useVideoTileContextualMenuProps } from './VideoGallery/useVideoTileContextualMenuProps';\nimport { VideoGalleryStrings } from './VideoGallery';\nimport { _DrawerMenu, _DrawerMenuItemProps } from './Drawer';\nimport { drawerMenuWrapperStyles } from './VideoGallery/styles/RemoteVideoTile.styles';\nimport { videoContainerStyles, overlayStyles, overlayStylesTransparent, loadSpinnerStyles } from './styles/VideoTile.styles';\n\n/*\n A memoized version of VideoTile for rendering local participant.\n \n @internal\n */\nexport const _LocalVideoTile = React.memo((props: {\n userId?: string;\n onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void \| CreateVideoStreamViewResult>;\n onDisposeLocalStreamView?: () => void;\n isAvailable?: boolean;\n isMuted?: boolean;\n renderElement?: HTMLElement;\n displayName?: string;\n initialsName?: string;\n localVideoViewOptions?: VideoStreamOptions;\n onRenderAvatar?: OnRenderAvatarCallback;\n showLabel: boolean;\n alwaysShowLabelBackground?: boolean;\n showMuteIndicator?: boolean;\n showCameraSwitcherInLocalPreview?: boolean;\n localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n localVideoCameraSwitcherLabel?: string;\n localVideoSelectedDescription?: string;\n styles?: VideoTileStylesProps;\n personaMinSize?: number;\n raisedHand?: RaisedHand;\n reaction?: Reaction;\n spotlightedParticipantUserIds?: string[];\n isSpotlighted?: boolean;\n onStartSpotlight?: () => void;\n onStopSpotlight?: () => void;\n maxParticipantsToSpotlight?: number;\n menuKind?: 'contextual' \| 'drawer';\n drawerMenuHostId?: string;\n strings?: VideoGalleryStrings;\n reactionResources?: ReactionResources;\n participantsCount?: number;\n isScreenSharingOn?: boolean;\n}) => {\n const {\n isAvailable,\n isMuted,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n localVideoViewOptions,\n renderElement,\n userId,\n showLabel,\n alwaysShowLabelBackground,\n displayName,\n initialsName,\n onRenderAvatar,\n showMuteIndicator,\n styles,\n showCameraSwitcherInLocalPreview,\n localVideoCameraCycleButtonProps,\n localVideoCameraSwitcherLabel,\n localVideoSelectedDescription,\n raisedHand,\n reaction,\n isSpotlighted,\n spotlightedParticipantUserIds,\n onStartSpotlight,\n onStopSpotlight,\n maxParticipantsToSpotlight,\n menuKind,\n strings,\n reactionResources,\n isScreenSharingOn\n } = props;\n const theme = useTheme();\n const localVideoStreamProps: LocalVideoStreamLifecycleMaintainerProps = useMemo(() => ({\n isMirrored: localVideoViewOptions?.isMirrored,\n isStreamAvailable: isAvailable,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n renderElementExists: !!renderElement,\n scalingMode: localVideoViewOptions?.scalingMode\n }), [isAvailable, localVideoViewOptions?.isMirrored, localVideoViewOptions?.scalingMode, onCreateLocalStreamView, onDisposeLocalStreamView, renderElement]);\n\n // Handle creating, destroying and updating the video stream as necessary\n useLocalVideoStreamLifecycleMaintainer(localVideoStreamProps);\n const contextualMenuProps = useVideoTileContextualMenuProps({\n participant: {\n userId: userId ?? ''\n },\n strings: {\n ...strings\n },\n spotlightedParticipantUserIds,\n isSpotlighted,\n onStartSpotlight,\n onStopSpotlight,\n maxParticipantsToSpotlight,\n myUserId: userId\n });\n const videoTileContextualMenuProps = useMemo(() => {\n if (menuKind !== 'contextual' \|\| !contextualMenuProps) {\n return {};\n }\n return {\n contextualMenu: contextualMenuProps\n };\n return {};\n }, [contextualMenuProps, menuKind]);\n const videoTileStyles = useMemo(() => {\n if (isSpotlighted) {\n return concatStyleSets({\n root: {\n outline: `0.25rem solid ${theme.palette.neutralTertiaryAlt}`,\n outlineOffset: '-0.25rem'\n }\n }, styles);\n }\n return styles;\n }, [isSpotlighted, theme.palette.neutralTertiaryAlt, styles]);\n const [drawerMenuItemProps, setDrawerMenuItemProps] = React.useState<_DrawerMenuItemProps[]>([]);\n const onKeyDown = useCallback((e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([])));\n }\n }, [setDrawerMenuItemProps, contextualMenuProps]);\n const renderVideoStreamElement = useMemo(() => {\n // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which\n // implies that, after their threshold, all streams have no child (blank video)\n if (!renderElement \|\| !renderElement.childElementCount) {\n // Returning `undefined` results in the placeholder with avatar being shown\n return undefined;\n }\n return <>\n <FloatingLocalCameraCycleButton showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview ?? false} localVideoCameraCycleButtonProps={localVideoCameraCycleButtonProps} localVideoCameraSwitcherLabel={localVideoCameraSwitcherLabel} localVideoSelectedDescription={localVideoSelectedDescription} />\n <StreamMedia videoStreamElement={renderElement} isMirrored={true} />\n {props.participantsCount === 1 && !isScreenSharingOn && <Stack className={mergeStyles(videoContainerStyles, overlayStyles())}>\n <Spinner label={strings?.waitingScreenText} ariaLive=\"assertive\" role=\"alert\" labelPosition=\"bottom\" styles={loadSpinnerStyles(theme, true)} />\n </Stack>}\n </>;\n }, [localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription, renderElement, showCameraSwitcherInLocalPreview, props.participantsCount, strings?.waitingScreenText, theme, isScreenSharingOn]);\n const videoTileOverlay = useMemo(() => {\n const reactionOverlay = reactionResources !== undefined ? <MeetingReactionOverlay overlayMode=\"grid-tiles\" reaction={reaction} reactionResources={reactionResources} /> : undefined;\n return reactionOverlay;\n }, [reaction, reactionResources]);\n const onRenderAvatarOneParticipant = useCallback(() => {\n return <Stack className={mergeStyles(videoContainerStyles, overlayStylesTransparent())}>\n <Spinner label={strings?.waitingScreenText} ariaLive=\"assertive\" labelPosition=\"bottom\" role=\"alert\" styles={loadSpinnerStyles(theme, false)} />\n </Stack>;\n }, [strings?.waitingScreenText, theme]);\n return <Stack data-ui-id=\"local-video-tile\" className={mergeStyles({\n width: '100%',\n height: '100%'\n })} onKeyDown={menuKind === 'drawer' ? onKeyDown : undefined}>\n <VideoTile key={userId ?? 'local-video-tile'} userId={userId} renderElement={renderVideoStreamElement} showLabel={showLabel} alwaysShowLabelBackground={alwaysShowLabelBackground} displayName={displayName} initialsName={initialsName} styles={videoTileStyles} onRenderPlaceholder={props.participantsCount === 1 && !isScreenSharingOn ? onRenderAvatarOneParticipant : onRenderAvatar} isMuted={isMuted} showMuteIndicator={showMuteIndicator} personaMinSize={props.personaMinSize} raisedHand={raisedHand} isSpotlighted={isSpotlighted} {...videoTileContextualMenuProps} onLongTouch={() => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([])))} overlay={videoTileOverlay}>\n {drawerMenuItemProps.length > 0 && <Layer hostId={props.drawerMenuHostId}>\n <Stack styles={drawerMenuWrapperStyles}>\n <_DrawerMenu onLightDismiss={() => setDrawerMenuItemProps([])} items={drawerMenuItemProps} />\n </Stack>\n </Layer>}\n </VideoTile>\n </Stack>;\n});\nconst FloatingLocalCameraCycleButton = (props: {\n showCameraSwitcherInLocalPreview: boolean;\n localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n localVideoCameraSwitcherLabel?: string;\n localVideoSelectedDescription?: string;\n}): JSX.Element => {\n const {\n showCameraSwitcherInLocalPreview,\n localVideoCameraCycleButtonProps,\n localVideoCameraSwitcherLabel,\n localVideoSelectedDescription\n } = props;\n const ariaDescription = localVideoCameraCycleButtonProps?.selectedCamera && localVideoSelectedDescription && _formatString(localVideoSelectedDescription, {\n cameraName: localVideoCameraCycleButtonProps.selectedCamera.name\n });\n return <Stack horizontalAlign=\"end\">\n {showCameraSwitcherInLocalPreview && localVideoCameraCycleButtonProps?.cameras !== undefined && localVideoCameraCycleButtonProps?.selectedCamera !== undefined && localVideoCameraCycleButtonProps?.onSelectCamera !== undefined && <LocalVideoCameraCycleButton cameras={localVideoCameraCycleButtonProps.cameras} selectedCamera={localVideoCameraCycleButtonProps.selectedCamera} onSelectCamera={localVideoCameraCycleButtonProps.onSelectCamera} label={localVideoCameraSwitcherLabel} ariaDescription={ariaDescription} />}\n </Stack>;\n};\nconst convertContextualMenuItemsToDrawerMenuItemProps = (contextualMenuProps?: IContextualMenuProps, onLightDismiss?: () => void): _DrawerMenuItemProps[] => {\n if (!contextualMenuProps) {\n return [];\n }\n return contextualMenuProps.items.map(item => {\n return {\n itemKey: item.key,\n text: item.text,\n iconProps: item.iconProps,\n disabled: item.disabled,\n onItemClick: () => {\n item.onClick?.();\n onLightDismiss?.();\n }\n };\n });\n};"]}