@azure/communication-react 1.13.0-beta.1 → 1.13.1-alpha-202402280012

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

@@ -2,7 +2,6 @@
 // Licensed under the MIT License.
 import { Layer, Stack } from '@fluentui/react';
 import React, { useMemo } from 'react';
-/* @conditional-compile-remove(pinned-participants) */
 import { useCallback } from 'react';
 import { _DrawerMenu } from './Drawer';
 import { StreamMedia } from './StreamMedia';
@@ -10,6 +9,8 @@ import { drawerMenuWrapperStyles, remoteVideoTileWrapperStyle } from './VideoGal
 import { useRemoteVideoStreamLifecycleMaintainer } from './VideoGallery/useVideoStreamLifecycleMaintainer';
 import { useVideoTileContextualMenuProps } from './VideoGallery/useVideoTileContextualMenuProps';
 import { VideoTile } from './VideoTile';
+/* @conditional-compile-remove(hide-attendee-name) */
+import { _formatString } from "../../../acs-ui-common/src";
 /**
  * A memoized version of VideoTile for rendering remote participants. React.memo is used for a performance
  * boost by memoizing the same rendered component to avoid rerendering a VideoTile when its position in the
@@ -18,10 +19,15 @@ import { VideoTile } from './VideoTile';
  * @internal
  */
 export const _RemoteVideoTile = React.memo((props) => {
-    var _a;
-    const { isAvailable, isReceiving = true, 
-    // default to true to prevent any breaking change
-    isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, renderElement, userId, onRenderAvatar, showMuteIndicator, remoteParticipant, participantState, menuKind, isPinned, onPinParticipant, onUnpinParticipant, onUpdateScalingMode, disablePinMenuItem, toggleAnnouncerString, strings } = props;
+    var _a, _b;
+    const { isAvailable, isReceiving = true, // default to true to prevent any breaking change
+    isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, renderElement, userId, onRenderAvatar, showMuteIndicator, remoteParticipant, participantState, menuKind, isPinned, onPinParticipant, onUnpinParticipant, 
+    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds, 
+    /* @conditional-compile-remove(spotlight) */ isSpotlighted, 
+    /* @conditional-compile-remove(spotlight) */ onStartSpotlight, 
+    /* @conditional-compile-remove(spotlight) */ onStopSpotlight, 
+    /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight, onUpdateScalingMode, disablePinMenuItem, toggleAnnouncerString, strings, 
+    /* @conditional-compile-remove(reaction) */ reactionResources } = props;
     const remoteVideoStreamProps = useMemo(() => ({
         isMirrored: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored,
         isScreenSharingOn,
@@ -32,26 +38,42 @@ export const _RemoteVideoTile = React.memo((props) => {
         remoteParticipantId: userId,
         renderElementExists: !!renderElement,
         scalingMode: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.scalingMode
-    }), [isAvailable, isReceiving, isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored, remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.scalingMode, renderElement, userId]);
+    }), [
+        isAvailable,
+        isReceiving,
+        isScreenSharingOn,
+        onCreateRemoteStreamView,
+        onDisposeRemoteStreamView,
+        remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored,
+        remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.scalingMode,
+        renderElement,
+        userId
+    ]);
     // Handle creating, destroying and updating the video stream as necessary
     const createVideoStreamResult = useRemoteVideoStreamLifecycleMaintainer(remoteVideoStreamProps);
     const contextualMenuProps = useVideoTileContextualMenuProps({
-        remoteParticipant,
+        participant: remoteParticipant,
         view: createVideoStreamResult === null || createVideoStreamResult === void 0 ? void 0 : createVideoStreamResult.view,
-        /* @conditional-compile-remove(pinned-participants) */
         strings: Object.assign({}, props.strings),
         isPinned,
         onPinParticipant,
         onUnpinParticipant,
         onUpdateScalingMode,
         disablePinMenuItem,
-        toggleAnnouncerString
+        toggleAnnouncerString,
+        /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds,
+        /* @conditional-compile-remove(spotlight) */ isSpotlighted,
+        /* @conditional-compile-remove(spotlight) */ onStartSpotlight,
+        /* @conditional-compile-remove(spotlight) */ onStopSpotlight,
+        /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight
     });
     const videoTileContextualMenuProps = useMemo(() => {
-        if (menuKind !== 'contextual') {
+        if (menuKind !== 'contextual' || !contextualMenuProps) {
             return {};
         }
-        return videoTileContextualMenuPropsTrampoline(contextualMenuProps);
+        return {
+            contextualMenu: contextualMenuProps
+        };
     }, [contextualMenuProps, menuKind]);
     const showLoadingIndicator = isAvailable && isReceiving === false && participantState !== 'Disconnected';
     const [drawerMenuItemProps, setDrawerMenuItemProps] = React.useState([]);
@@ -62,45 +84,47 @@ export const _RemoteVideoTile = React.memo((props) => {
             // Returning `undefined` results in the placeholder with avatar being shown
             return undefined;
         }
-        return React.createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: showLoadingIndicator ? 'loading' : 'none' });
+        return (React.createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: showLoadingIndicator ? 'loading' : 'none' }));
     }, [renderElement, showLoadingIndicator]);
-    /* @conditional-compile-remove(pinned-participants) */
     const onKeyDown = useCallback((e) => {
         if (e.key === 'Enter') {
             setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([])));
         }
     }, [setDrawerMenuItemProps, contextualMenuProps]);
-    let displayName = remoteParticipant.displayName || (strings === null || strings === void 0 ? void 0 : strings.displayNamePlaceholder);
-    return React.createElement(Stack
-    /* @conditional-compile-remove(pinned-participants) */ , { 
-        /* @conditional-compile-remove(pinned-participants) */ tabIndex: menuKind === 'drawer' ? 0 : undefined, 
-        /* @conditional-compile-remove(pinned-participants) */ onKeyDown: menuKind === 'drawer' ? onKeyDown : undefined, style: remoteVideoTileWrapperStyle },
-        React.createElement(VideoTile, Object.assign({ key: userId, userId: userId, initialsName: (_a = remoteParticipant.displayName) !== null && _a !== void 0 ? _a : '', renderElement: renderVideoStreamElement, displayName: displayName, onRenderPlaceholder: onRenderAvatar, isMuted: remoteParticipant.isMuted, 
-            /* @conditional-compile-remove(raise-hand) */ raisedHand: remoteParticipant.raisedHand, isSpeaking: remoteParticipant.isSpeaking, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, showLabel: props.showLabel, 
+    let displayName = remoteParticipant.displayName || strings.displayNamePlaceholder;
+    /* @conditional-compile-remove(hide-attendee-name) */
+    const attendeeRoleString = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.attendeeRole;
+    /* @conditional-compile-remove(hide-attendee-name) */
+    const formatDisplayName = () => {
+        if (displayName && attendeeRoleString) {
+            return _formatString(displayName, { AttendeeRole: attendeeRoleString });
+        }
+        return displayName;
+    };
+    /* @conditional-compile-remove(hide-attendee-name) */
+    displayName = formatDisplayName();
+    return (React.createElement(Stack, { tabIndex: menuKind === 'drawer' ? 0 : undefined, onKeyDown: menuKind === 'drawer' ? onKeyDown : undefined, style: remoteVideoTileWrapperStyle },
+        React.createElement(VideoTile, Object.assign({ key: userId, userId: userId, initialsName: (_b = remoteParticipant.displayName) !== null && _b !== void 0 ? _b : '', renderElement: renderVideoStreamElement, displayName: displayName, onRenderPlaceholder: onRenderAvatar, isMuted: remoteParticipant.isMuted, 
+            /* @conditional-compile-remove(raise-hand) */
+            raisedHand: remoteParticipant.raisedHand, 
+            /* @conditional-compile-remove(reaction) */
+            reaction: remoteParticipant.reaction, isSpeaking: remoteParticipant.isSpeaking, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, showLabel: props.showLabel, 
             /* @conditional-compile-remove(one-to-n-calling) */
-            /* @conditional-compile-remove(PSTN-calls) */ participantState: participantState }, videoTileContextualMenuProps, { 
-            /* @conditional-compile-remove(pinned-participants) */ isPinned: props.isPinned, 
-            /* @conditional-compile-remove(pinned-participants) */ onLongTouch: () => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))) })),
-        drawerMenuItemProps.length > 0 && React.createElement(Layer, { hostId: props.drawerMenuHostId },
+            /* @conditional-compile-remove(PSTN-calls) */
+            participantState: participantState }, videoTileContextualMenuProps, { isPinned: props.isPinned, onLongTouch: () => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))), 
+            /* @conditional-compile-remove(spotlight) */
+            isSpotlighted: isSpotlighted, 
+            /* @conditional-compile-remove(reaction) */
+            reactionResources: reactionResources })),
+        drawerMenuItemProps.length > 0 && (React.createElement(Layer, { hostId: props.drawerMenuHostId },
             React.createElement(Stack, { styles: drawerMenuWrapperStyles },
-                React.createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItemProps([]), items: drawerMenuItemProps, heading: remoteParticipant.displayName }))));
+                React.createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItemProps([]), items: drawerMenuItemProps, heading: remoteParticipant.displayName }))))));
 });
-const videoTileContextualMenuPropsTrampoline = (contextualMenuProps) => {
-    if (!contextualMenuProps) {
-        return {};
-    }
-    /* @conditional-compile-remove(pinned-participants) */
-    return {
-        contextualMenu: contextualMenuProps
-    };
-    return {};
-};
-/* @conditional-compile-remove(pinned-participants) */
 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/RemoteVideoTile.js.map

@@ -1 +1 @@
-{"version":3,"file":"RemoteVideoTile.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/RemoteVideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IContextualMenuProps, Layer, Stack } from '@fluentui/react';\nimport React, { useMemo } from 'react';\n/* @conditional-compile-remove(pinned-participants) */\nimport { KeyboardEvent, useCallback } from 'react';\nimport { CreateVideoStreamViewResult, OnRenderAvatarCallback, ParticipantState, VideoGalleryRemoteParticipant, VideoStreamOptions, ViewScalingMode } from '../types';\nimport { _DrawerMenu, _DrawerMenuItemProps } from './Drawer';\nimport { StreamMedia } from './StreamMedia';\nimport { VideoGalleryStrings } from './VideoGallery';\nimport { drawerMenuWrapperStyles, remoteVideoTileWrapperStyle } from './VideoGallery/styles/RemoteVideoTile.styles';\nimport { RemoteVideoStreamLifecycleMaintainerProps, useRemoteVideoStreamLifecycleMaintainer } from './VideoGallery/useVideoStreamLifecycleMaintainer';\nimport { useVideoTileContextualMenuProps } from './VideoGallery/useVideoTileContextualMenuProps';\nimport { VideoTile } from './VideoTile';\n/**\n * A memoized version of VideoTile for rendering remote participants. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering a VideoTile when its position in the\n * array changes causing a rerender in the parent component. https://reactjs.org/docs/react-api.html#reactmemo\n *\n * @internal\n */\nexport const _RemoteVideoTile = React.memo((props: {\n  userId: string;\n  remoteParticipant: VideoGalleryRemoteParticipant;\n  onCreateRemoteStreamView?: (userId: string, options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n  isAvailable?: boolean;\n  isReceiving?: boolean;\n  isScreenSharingOn?: boolean; // TODO: Remove this once onDisposeRemoteStreamView no longer disposes of screen share stream\n  renderElement?: HTMLElement;\n  remoteVideoViewOptions?: VideoStreamOptions;\n  onRenderAvatar?: OnRenderAvatarCallback;\n  showMuteIndicator?: boolean;\n  showLabel?: boolean;\n  personaMinSize?: number;\n  strings?: VideoGalleryStrings;\n  participantState?: ParticipantState;\n  menuKind?: 'contextual' | 'drawer';\n  drawerMenuHostId?: string;\n  onPinParticipant?: (userId: string) => void;\n  onUnpinParticipant?: (userId: string) => void;\n  onUpdateScalingMode?: (userId: string, scalingMode: ViewScalingMode) => void;\n  isPinned?: boolean;\n  disablePinMenuItem?: boolean;\n  toggleAnnouncerString?: (announcerString: string) => void;\n}) => {\n  const {\n    isAvailable,\n    isReceiving = true,\n    // default to true to prevent any breaking change\n    isScreenSharingOn,\n    onCreateRemoteStreamView,\n    onDisposeRemoteStreamView,\n    remoteVideoViewOptions,\n    renderElement,\n    userId,\n    onRenderAvatar,\n    showMuteIndicator,\n    remoteParticipant,\n    participantState,\n    menuKind,\n    isPinned,\n    onPinParticipant,\n    onUnpinParticipant,\n    onUpdateScalingMode,\n    disablePinMenuItem,\n    toggleAnnouncerString,\n    strings\n  } = props;\n  const remoteVideoStreamProps: RemoteVideoStreamLifecycleMaintainerProps = useMemo(() => ({\n    isMirrored: remoteVideoViewOptions?.isMirrored,\n    isScreenSharingOn,\n    isStreamAvailable: isAvailable,\n    isStreamReceiving: isReceiving,\n    onCreateRemoteStreamView,\n    onDisposeRemoteStreamView,\n    remoteParticipantId: userId,\n    renderElementExists: !!renderElement,\n    scalingMode: remoteVideoViewOptions?.scalingMode\n  }), [isAvailable, isReceiving, isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions?.isMirrored, remoteVideoViewOptions?.scalingMode, renderElement, userId]);\n\n  // Handle creating, destroying and updating the video stream as necessary\n  const createVideoStreamResult = useRemoteVideoStreamLifecycleMaintainer(remoteVideoStreamProps);\n  const contextualMenuProps = useVideoTileContextualMenuProps({\n    remoteParticipant,\n    view: createVideoStreamResult?.view,\n    /* @conditional-compile-remove(pinned-participants) */\n    strings: {\n      ...props.strings\n    },\n    isPinned,\n    onPinParticipant,\n    onUnpinParticipant,\n    onUpdateScalingMode,\n    disablePinMenuItem,\n    toggleAnnouncerString\n  });\n  const videoTileContextualMenuProps = useMemo(() => {\n    if (menuKind !== 'contextual') {\n      return {};\n    }\n    return videoTileContextualMenuPropsTrampoline(contextualMenuProps);\n  }, [contextualMenuProps, menuKind]);\n  const showLoadingIndicator = isAvailable && isReceiving === false && participantState !== 'Disconnected';\n  const [drawerMenuItemProps, setDrawerMenuItemProps] = React.useState<_DrawerMenuItemProps[]>([]);\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 <StreamMedia videoStreamElement={renderElement} loadingState={showLoadingIndicator ? 'loading' : 'none'} />;\n  }, [renderElement, showLoadingIndicator]);\n\n  /* @conditional-compile-remove(pinned-participants) */\n  const onKeyDown = useCallback((e: KeyboardEvent) => {\n    if (e.key === 'Enter') {\n      setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([])));\n    }\n  }, [setDrawerMenuItemProps, contextualMenuProps]);\n  let displayName = remoteParticipant.displayName || strings?.displayNamePlaceholder;\n  return <Stack\n  /* @conditional-compile-remove(pinned-participants) */ tabIndex={menuKind === 'drawer' ? 0 : undefined}\n  /* @conditional-compile-remove(pinned-participants) */ onKeyDown={menuKind === 'drawer' ? onKeyDown : undefined} style={remoteVideoTileWrapperStyle}>\n        <VideoTile key={userId} userId={userId} initialsName={remoteParticipant.displayName ?? ''} renderElement={renderVideoStreamElement} displayName={displayName} onRenderPlaceholder={onRenderAvatar} isMuted={remoteParticipant.isMuted}\n    /* @conditional-compile-remove(raise-hand) */ raisedHand={remoteParticipant.raisedHand} isSpeaking={remoteParticipant.isSpeaking} showMuteIndicator={showMuteIndicator} personaMinSize={props.personaMinSize} showLabel={props.showLabel}\n    /* @conditional-compile-remove(one-to-n-calling) */\n    /* @conditional-compile-remove(PSTN-calls) */ participantState={participantState} {...videoTileContextualMenuProps}\n    /* @conditional-compile-remove(pinned-participants) */ isPinned={props.isPinned}\n    /* @conditional-compile-remove(pinned-participants) */ onLongTouch={() => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([])))} />\n        {drawerMenuItemProps.length > 0 && <Layer hostId={props.drawerMenuHostId}>\n            <Stack styles={drawerMenuWrapperStyles}>\n              <_DrawerMenu onLightDismiss={() => setDrawerMenuItemProps([])} items={drawerMenuItemProps} heading={remoteParticipant.displayName} />\n            </Stack>\n          </Layer>}\n      </Stack>;\n});\nconst videoTileContextualMenuPropsTrampoline = (contextualMenuProps?: IContextualMenuProps): {\n  contextualMenu?: IContextualMenuProps;\n} => {\n  if (!contextualMenuProps) {\n    return {};\n  }\n  /* @conditional-compile-remove(pinned-participants) */\n  return {\n    contextualMenu: contextualMenuProps\n  };\n  return {};\n};\n\n/* @conditional-compile-remove(pinned-participants) */\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};"]}
+{"version":3,"file":"RemoteVideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/RemoteVideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IContextualMenuProps, Layer, Stack } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport { KeyboardEvent, useCallback } from 'react';\nimport {\n  CreateVideoStreamViewResult,\n  OnRenderAvatarCallback,\n  ParticipantState,\n  VideoGalleryRemoteParticipant,\n  VideoStreamOptions,\n  ViewScalingMode\n} from '../types';\nimport { _DrawerMenu, _DrawerMenuItemProps } from './Drawer';\nimport { StreamMedia } from './StreamMedia';\nimport { VideoGalleryStrings } from './VideoGallery';\nimport { drawerMenuWrapperStyles, remoteVideoTileWrapperStyle } from './VideoGallery/styles/RemoteVideoTile.styles';\nimport {\n  RemoteVideoStreamLifecycleMaintainerProps,\n  useRemoteVideoStreamLifecycleMaintainer\n} from './VideoGallery/useVideoStreamLifecycleMaintainer';\nimport { useVideoTileContextualMenuProps } from './VideoGallery/useVideoTileContextualMenuProps';\nimport { VideoTile } from './VideoTile';\n/* @conditional-compile-remove(hide-attendee-name) */\nimport { _formatString } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(reaction) */\nimport { ReactionResources } from '../types/ReactionTypes';\n\n/**\n * A memoized version of VideoTile for rendering remote participants. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering a VideoTile when its position in the\n * array changes causing a rerender in the parent component. https://reactjs.org/docs/react-api.html#reactmemo\n *\n * @internal\n */\nexport const _RemoteVideoTile = React.memo(\n  (props: {\n    userId: string;\n    remoteParticipant: VideoGalleryRemoteParticipant;\n    onCreateRemoteStreamView?: (\n      userId: string,\n      options?: VideoStreamOptions\n    ) => Promise<void | CreateVideoStreamViewResult>;\n    onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n    isAvailable?: boolean;\n    isReceiving?: boolean;\n    isScreenSharingOn?: boolean; // TODO: Remove this once onDisposeRemoteStreamView no longer disposes of screen share stream\n    renderElement?: HTMLElement;\n    remoteVideoViewOptions?: VideoStreamOptions;\n    onRenderAvatar?: OnRenderAvatarCallback;\n    showMuteIndicator?: boolean;\n    showLabel?: boolean;\n    personaMinSize?: number;\n    strings: VideoGalleryStrings;\n    participantState?: ParticipantState;\n    menuKind?: 'contextual' | 'drawer';\n    drawerMenuHostId?: string;\n    onPinParticipant?: (userId: string) => void;\n    onUnpinParticipant?: (userId: string) => void;\n    onUpdateScalingMode?: (userId: string, scalingMode: ViewScalingMode) => void;\n    isPinned?: boolean;\n    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds?: string[];\n    /* @conditional-compile-remove(spotlight) */ isSpotlighted?: boolean;\n    /* @conditional-compile-remove(spotlight) */ onStartSpotlight?: (userIds: string[]) => void;\n    /* @conditional-compile-remove(spotlight) */ onStopSpotlight?: (userIds: string[]) => void;\n    /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight?: number;\n    disablePinMenuItem?: boolean;\n    toggleAnnouncerString?: (announcerString: string) => void;\n    /* @conditional-compile-remove(reaction) */ reactionResources?: ReactionResources;\n  }) => {\n    const {\n      isAvailable,\n      isReceiving = true, // default to true to prevent any breaking change\n      isScreenSharingOn,\n      onCreateRemoteStreamView,\n      onDisposeRemoteStreamView,\n      remoteVideoViewOptions,\n      renderElement,\n      userId,\n      onRenderAvatar,\n      showMuteIndicator,\n      remoteParticipant,\n      participantState,\n      menuKind,\n      isPinned,\n      onPinParticipant,\n      onUnpinParticipant,\n      /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds,\n      /* @conditional-compile-remove(spotlight) */ isSpotlighted,\n      /* @conditional-compile-remove(spotlight) */ onStartSpotlight,\n      /* @conditional-compile-remove(spotlight) */ onStopSpotlight,\n      /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight,\n      onUpdateScalingMode,\n      disablePinMenuItem,\n      toggleAnnouncerString,\n      strings,\n      /* @conditional-compile-remove(reaction) */ reactionResources\n    } = props;\n\n    const remoteVideoStreamProps: RemoteVideoStreamLifecycleMaintainerProps = useMemo(\n      () => ({\n        isMirrored: remoteVideoViewOptions?.isMirrored,\n        isScreenSharingOn,\n        isStreamAvailable: isAvailable,\n        isStreamReceiving: isReceiving,\n        onCreateRemoteStreamView,\n        onDisposeRemoteStreamView,\n        remoteParticipantId: userId,\n        renderElementExists: !!renderElement,\n        scalingMode: remoteVideoViewOptions?.scalingMode\n      }),\n      [\n        isAvailable,\n        isReceiving,\n        isScreenSharingOn,\n        onCreateRemoteStreamView,\n        onDisposeRemoteStreamView,\n        remoteVideoViewOptions?.isMirrored,\n        remoteVideoViewOptions?.scalingMode,\n        renderElement,\n        userId\n      ]\n    );\n\n    // Handle creating, destroying and updating the video stream as necessary\n    const createVideoStreamResult = useRemoteVideoStreamLifecycleMaintainer(remoteVideoStreamProps);\n    const contextualMenuProps = useVideoTileContextualMenuProps({\n      participant: remoteParticipant,\n      view: createVideoStreamResult?.view,\n      strings: { ...props.strings },\n      isPinned,\n      onPinParticipant,\n      onUnpinParticipant,\n      onUpdateScalingMode,\n      disablePinMenuItem,\n      toggleAnnouncerString,\n      /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds,\n      /* @conditional-compile-remove(spotlight) */ isSpotlighted,\n      /* @conditional-compile-remove(spotlight) */ onStartSpotlight,\n      /* @conditional-compile-remove(spotlight) */ onStopSpotlight,\n      /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight\n    });\n\n    const videoTileContextualMenuProps = useMemo(() => {\n      if (menuKind !== 'contextual' || !contextualMenuProps) {\n        return {};\n      }\n      return {\n        contextualMenu: contextualMenuProps\n      };\n    }, [contextualMenuProps, menuKind]);\n\n    const showLoadingIndicator = isAvailable && isReceiving === false && participantState !== 'Disconnected';\n\n    const [drawerMenuItemProps, setDrawerMenuItemProps] = React.useState<_DrawerMenuItemProps[]>([]);\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        <StreamMedia videoStreamElement={renderElement} loadingState={showLoadingIndicator ? 'loading' : 'none'} />\n      );\n    }, [renderElement, showLoadingIndicator]);\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    let displayName = remoteParticipant.displayName || strings.displayNamePlaceholder;\n    /* @conditional-compile-remove(hide-attendee-name) */\n    const attendeeRoleString = props.strings?.attendeeRole;\n\n    /* @conditional-compile-remove(hide-attendee-name) */\n    const formatDisplayName = (): string => {\n      if (displayName && attendeeRoleString) {\n        return _formatString(displayName, { AttendeeRole: attendeeRoleString });\n      }\n      return displayName;\n    };\n\n    /* @conditional-compile-remove(hide-attendee-name) */\n    displayName = formatDisplayName();\n    return (\n      <Stack\n        tabIndex={menuKind === 'drawer' ? 0 : undefined}\n        onKeyDown={menuKind === 'drawer' ? onKeyDown : undefined}\n        style={remoteVideoTileWrapperStyle}\n      >\n        <VideoTile\n          key={userId}\n          userId={userId}\n          initialsName={remoteParticipant.displayName ?? ''}\n          renderElement={renderVideoStreamElement}\n          displayName={displayName}\n          onRenderPlaceholder={onRenderAvatar}\n          isMuted={remoteParticipant.isMuted}\n          /* @conditional-compile-remove(raise-hand) */\n          raisedHand={remoteParticipant.raisedHand}\n          /* @conditional-compile-remove(reaction) */\n          reaction={remoteParticipant.reaction}\n          isSpeaking={remoteParticipant.isSpeaking}\n          showMuteIndicator={showMuteIndicator}\n          personaMinSize={props.personaMinSize}\n          showLabel={props.showLabel}\n          /* @conditional-compile-remove(one-to-n-calling) */\n          /* @conditional-compile-remove(PSTN-calls) */\n          participantState={participantState}\n          {...videoTileContextualMenuProps}\n          isPinned={props.isPinned}\n          onLongTouch={() =>\n            setDrawerMenuItemProps(\n              convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n            )\n          }\n          /* @conditional-compile-remove(spotlight) */\n          isSpotlighted={isSpotlighted}\n          /* @conditional-compile-remove(reaction) */\n          reactionResources={reactionResources}\n        />\n        {drawerMenuItemProps.length > 0 && (\n          <Layer hostId={props.drawerMenuHostId}>\n            <Stack styles={drawerMenuWrapperStyles}>\n              <_DrawerMenu\n                onLightDismiss={() => setDrawerMenuItemProps([])}\n                items={drawerMenuItemProps}\n                heading={remoteParticipant.displayName}\n              />\n            </Stack>\n          </Layer>\n        )}\n      </Stack>\n    );\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"]}

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

@@ -22,7 +22,7 @@ export const ResponsiveHorizontalGallery = (props) => {
         buttonWidthRem
     });
     onChildrenPerPageChange === null || onChildrenPerPageChange === void 0 ? void 0 : onChildrenPerPageChange(childrenPerPage);
-    return React.createElement("div", { "data-ui-id": "responsive-horizontal-gallery", ref: containerRef, className: mergeStyles(props.containerStyles) },
-        React.createElement(HorizontalGallery, { childrenPerPage: childrenPerPage, styles: props.horizontalGalleryStyles, onFetchTilesToRender: onFetchTilesToRender }, props.children));
+    return (React.createElement("div", { "data-ui-id": "responsive-horizontal-gallery", ref: containerRef, className: mergeStyles(props.containerStyles) },
+        React.createElement(HorizontalGallery, { childrenPerPage: childrenPerPage, styles: props.horizontalGalleryStyles, onFetchTilesToRender: onFetchTilesToRender }, props.children)));
 };
 //# sourceMappingURL=ResponsiveHorizontalGallery.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveHorizontalGallery.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ResponsiveHorizontalGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAA2B,MAAM,qBAAqB,CAAC;AACjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,kCAAkC,EAAE,MAAM,2CAA2C,CAAC;AAE/F;;;GAGG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,KAS3C,EAAe,EAAE;IAChB,MAAM,EACJ,WAAW,EACX,cAAc,GAAG,CAAC,EAClB,oBAAoB,EACpB,uBAAuB,EACxB,GAAG,KAAK,CAAC;IACV,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,cAAc,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC;IACxD,MAAM,WAAW,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9G,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAChH,MAAM,eAAe,GAAG,kCAAkC,CAAC;QACzD,gBAAgB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC;QACtD,cAAc,EAAE,CAAC,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,CAAC,CAAC,GAAG,WAAW,GAAG,YAAY;QAClE,WAAW;QACX,cAAc;KACf,CAAC,CAAC;IACH,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAG,eAAe,CAAC,CAAC;IAC3C,OAAO,2CAAgB,+BAA+B,EAAC,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,CAAC,KAAK,CAAC,eAAe,CAAC;QACnH,oBAAC,iBAAiB,IAAC,eAAe,EAAE,eAAe,EAAE,MAAM,EAAE,KAAK,CAAC,uBAAuB,EAAE,oBAAoB,EAAE,oBAAoB,IACnI,KAAK,CAAC,QAAQ,CACG,CAChB,CAAC;AACX,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, mergeStyles } from '@fluentui/react';\nimport React, { useRef } from 'react';\nimport { HorizontalGallery, HorizontalGalleryStyles } from './HorizontalGallery';\nimport { _useContainerWidth } from './utils/responsive';\nimport { calculateHorizontalChildrenPerPage } from './VideoGallery/utils/OverflowGalleryUtils';\n\n/**\n * Wrapped HorizontalGallery that adjusts the number of items per page based on the\n * available width obtained from a ResizeObserver, width per child, gap width, and button width\n */\nexport const ResponsiveHorizontalGallery = (props: {\n  children: React.ReactNode;\n  containerStyles: IStyle;\n  horizontalGalleryStyles: HorizontalGalleryStyles;\n  gapWidthRem: number;\n  buttonWidthRem?: number;\n  onFetchTilesToRender?: (indexes: number[]) => void;\n  /** event to listen for children per page changes */\n  onChildrenPerPageChange?: (childrenPerPage: number) => void;\n}): JSX.Element => {\n  const {\n    gapWidthRem,\n    buttonWidthRem = 0,\n    onFetchTilesToRender,\n    onChildrenPerPageChange\n  } = props;\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerWidth = _useContainerWidth(containerRef);\n  const leftPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingLeft) : 0;\n  const rightPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingRight) : 0;\n  const childrenPerPage = calculateHorizontalChildrenPerPage({\n    numberOfChildren: React.Children.count(props.children),\n    containerWidth: (containerWidth ?? 0) - leftPadding - rightPadding,\n    gapWidthRem,\n    buttonWidthRem\n  });\n  onChildrenPerPageChange?.(childrenPerPage);\n  return <div data-ui-id=\"responsive-horizontal-gallery\" ref={containerRef} className={mergeStyles(props.containerStyles)}>\n      <HorizontalGallery childrenPerPage={childrenPerPage} styles={props.horizontalGalleryStyles} onFetchTilesToRender={onFetchTilesToRender}>\n        {props.children}\n      </HorizontalGallery>\n    </div>;\n};"]}
+{"version":3,"file":"ResponsiveHorizontalGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ResponsiveHorizontalGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAA2B,MAAM,qBAAqB,CAAC;AACjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,kCAAkC,EAAE,MAAM,2CAA2C,CAAC;AAE/F;;;GAGG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,KAS3C,EAAe,EAAE;IAChB,MAAM,EAAE,WAAW,EAAE,cAAc,GAAG,CAAC,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,GAAG,KAAK,CAAC;IACjG,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,cAAc,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAExD,MAAM,WAAW,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9G,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAEhH,MAAM,eAAe,GAAG,kCAAkC,CAAC;QACzD,gBAAgB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC;QACtD,cAAc,EAAE,CAAC,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,CAAC,CAAC,GAAG,WAAW,GAAG,YAAY;QAClE,WAAW;QACX,cAAc;KACf,CAAC,CAAC;IACH,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAG,eAAe,CAAC,CAAC;IAE3C,OAAO,CACL,2CAAgB,+BAA+B,EAAC,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,CAAC,KAAK,CAAC,eAAe,CAAC;QAC9G,oBAAC,iBAAiB,IAChB,eAAe,EAAE,eAAe,EAChC,MAAM,EAAE,KAAK,CAAC,uBAAuB,EACrC,oBAAoB,EAAE,oBAAoB,IAEzC,KAAK,CAAC,QAAQ,CACG,CAChB,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, mergeStyles } from '@fluentui/react';\nimport React, { useRef } from 'react';\nimport { HorizontalGallery, HorizontalGalleryStyles } from './HorizontalGallery';\nimport { _useContainerWidth } from './utils/responsive';\nimport { calculateHorizontalChildrenPerPage } from './VideoGallery/utils/OverflowGalleryUtils';\n\n/**\n * Wrapped HorizontalGallery that adjusts the number of items per page based on the\n * available width obtained from a ResizeObserver, width per child, gap width, and button width\n */\nexport const ResponsiveHorizontalGallery = (props: {\n  children: React.ReactNode;\n  containerStyles: IStyle;\n  horizontalGalleryStyles: HorizontalGalleryStyles;\n  gapWidthRem: number;\n  buttonWidthRem?: number;\n  onFetchTilesToRender?: (indexes: number[]) => void;\n  /** event to listen for children per page changes */\n  onChildrenPerPageChange?: (childrenPerPage: number) => void;\n}): JSX.Element => {\n  const { gapWidthRem, buttonWidthRem = 0, onFetchTilesToRender, onChildrenPerPageChange } = props;\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerWidth = _useContainerWidth(containerRef);\n\n  const leftPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingLeft) : 0;\n  const rightPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingRight) : 0;\n\n  const childrenPerPage = calculateHorizontalChildrenPerPage({\n    numberOfChildren: React.Children.count(props.children),\n    containerWidth: (containerWidth ?? 0) - leftPadding - rightPadding,\n    gapWidthRem,\n    buttonWidthRem\n  });\n  onChildrenPerPageChange?.(childrenPerPage);\n\n  return (\n    <div data-ui-id=\"responsive-horizontal-gallery\" ref={containerRef} className={mergeStyles(props.containerStyles)}>\n      <HorizontalGallery\n        childrenPerPage={childrenPerPage}\n        styles={props.horizontalGalleryStyles}\n        onFetchTilesToRender={onFetchTilesToRender}\n      >\n        {props.children}\n      </HorizontalGallery>\n    </div>\n  );\n};\n"]}

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

@@ -27,7 +27,7 @@ export const ResponsiveVerticalGallery = (props) => {
         isShort: isShort !== null && isShort !== void 0 ? isShort : false
     });
     onChildrenPerPageChange === null || onChildrenPerPageChange === void 0 ? void 0 : onChildrenPerPageChange(childrenPerPage);
-    return React.createElement("div", { "data-ui-id": "responsive-vertical-gallery", ref: containerRef, className: mergeStyles(containerStyles) },
-        React.createElement(VerticalGallery, { childrenPerPage: childrenPerPage, styles: verticalGalleryStyles, onFetchTilesToRender: onFetchTilesToRender }, children));
+    return (React.createElement("div", { "data-ui-id": "responsive-vertical-gallery", ref: containerRef, className: mergeStyles(containerStyles) },
+        React.createElement(VerticalGallery, { childrenPerPage: childrenPerPage, styles: verticalGalleryStyles, onFetchTilesToRender: onFetchTilesToRender }, children)));
 };
 //# sourceMappingURL=ResponsiveVerticalGallery.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveVerticalGallery.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ResponsiveVerticalGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEtD,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,eAAe,EAAyB,MAAM,mBAAmB,CAAC;AAC3E,OAAO,EAAE,gCAAgC,EAAE,MAAM,2CAA2C,CAAC;AA0B7F;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;;IAC9F,MAAM,EACJ,QAAQ,EACR,eAAe,EACf,qBAAqB,EACrB,YAAY,EACZ,mBAAmB,EACnB,OAAO,EACP,oBAAoB,EACpB,uBAAuB,EACxB,GAAG,KAAK,CAAC;IACV,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,eAAe,GAAG,mBAAmB,CAAC,YAAY,CAAC,CAAC;IAC1D,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5G,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAClH,MAAM,eAAe,GAAG,gCAAgC,CAAC;QACvD,gBAAgB,EAAE,MAAA,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,mCAAI,CAAC;QACrD,eAAe,EAAE,CAAC,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,CAAC,CAAC,GAAG,UAAU,GAAG,aAAa;QACpE,YAAY;QACZ,gBAAgB,EAAE,mBAAmB,aAAnB,mBAAmB,cAAnB,mBAAmB,GAAI,CAAC;QAC1C,OAAO,EAAE,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,KAAK;KAC1B,CAAC,CAAC;IACH,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAG,eAAe,CAAC,CAAC;IAC3C,OAAO,2CAAgB,6BAA6B,EAAC,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,CAAC,eAAe,CAAC;QAC3G,oBAAC,eAAe,IAAC,eAAe,EAAE,eAAe,EAAE,MAAM,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,oBAAoB,IACzH,QAAQ,CACO,CACd,CAAC;AACX,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, mergeStyles } from '@fluentui/react';\nimport { _convertRemToPx } from '@internal/acs-ui-common';\nimport React, { useRef } from 'react';\nimport { _useContainerHeight } from './utils/responsive';\nimport { VerticalGallery, VerticalGalleryStyles } from './VerticalGallery';\nimport { calculateVerticalChildrenPerPage } from './VideoGallery/utils/OverflowGalleryUtils';\n\n/**\n * Props for the Responsive wrapper of the VerticalGallery component\n *\n * @beta\n */\nexport interface ResponsiveVerticalGalleryProps {\n  /** Styles for the Children space container */\n  containerStyles: IStyle;\n  /** Styles for the VerticalGallery component */\n  verticalGalleryStyles: VerticalGalleryStyles;\n  /** Height of the gap in between the video tiles */\n  gapHeightRem: number;\n  /** Video tiles to be rendered in the Vertical Gallery */\n  children?: React.ReactNode;\n  /** Height of the control bar for navigating pages */\n  controlBarHeightRem?: number;\n  /** container is shorter than 480 px. */\n  isShort?: boolean;\n  /** Function to set which tiles to give video to in the children. */\n  onFetchTilesToRender?: (indexes: number[]) => void;\n  /** event to listen for children per page changes */\n  onChildrenPerPageChange?: (childrenPerPage: number) => void;\n}\n\n/**\n * Responsive container for the VerticalGallery Component. Performs calculations for number of children\n * for the VerticalGallery\n * @param props\n *\n * @beta\n */\nexport const ResponsiveVerticalGallery = (props: ResponsiveVerticalGalleryProps): JSX.Element => {\n  const {\n    children,\n    containerStyles,\n    verticalGalleryStyles,\n    gapHeightRem,\n    controlBarHeightRem,\n    isShort,\n    onFetchTilesToRender,\n    onChildrenPerPageChange\n  } = props;\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerHeight = _useContainerHeight(containerRef);\n  const topPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingTop) : 0;\n  const bottomPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingBottom) : 0;\n  const childrenPerPage = calculateVerticalChildrenPerPage({\n    numberOfChildren: React.Children.count(children) ?? 0,\n    containerHeight: (containerHeight ?? 0) - topPadding - bottomPadding,\n    gapHeightRem,\n    controlBarHeight: controlBarHeightRem ?? 2,\n    isShort: isShort ?? false\n  });\n  onChildrenPerPageChange?.(childrenPerPage);\n  return <div data-ui-id=\"responsive-vertical-gallery\" ref={containerRef} className={mergeStyles(containerStyles)}>\n      <VerticalGallery childrenPerPage={childrenPerPage} styles={verticalGalleryStyles} onFetchTilesToRender={onFetchTilesToRender}>\n        {children}\n      </VerticalGallery>\n    </div>;\n};"]}
+{"version":3,"file":"ResponsiveVerticalGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ResponsiveVerticalGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEtD,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,eAAe,EAAyB,MAAM,mBAAmB,CAAC;AAC3E,OAAO,EAAE,gCAAgC,EAAE,MAAM,2CAA2C,CAAC;AA0B7F;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;;IAC9F,MAAM,EACJ,QAAQ,EACR,eAAe,EACf,qBAAqB,EACrB,YAAY,EACZ,mBAAmB,EACnB,OAAO,EACP,oBAAoB,EACpB,uBAAuB,EACxB,GAAG,KAAK,CAAC;IACV,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,eAAe,GAAG,mBAAmB,CAAC,YAAY,CAAC,CAAC;IAE1D,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5G,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAElH,MAAM,eAAe,GAAG,gCAAgC,CAAC;QACvD,gBAAgB,EAAE,MAAA,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,mCAAI,CAAC;QACrD,eAAe,EAAE,CAAC,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,CAAC,CAAC,GAAG,UAAU,GAAG,aAAa;QACpE,YAAY;QACZ,gBAAgB,EAAE,mBAAmB,aAAnB,mBAAmB,cAAnB,mBAAmB,GAAI,CAAC;QAC1C,OAAO,EAAE,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,KAAK;KAC1B,CAAC,CAAC;IACH,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAG,eAAe,CAAC,CAAC;IAC3C,OAAO,CACL,2CAAgB,6BAA6B,EAAC,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,CAAC,eAAe,CAAC;QACtG,oBAAC,eAAe,IACd,eAAe,EAAE,eAAe,EAChC,MAAM,EAAE,qBAAqB,EAC7B,oBAAoB,EAAE,oBAAoB,IAEzC,QAAQ,CACO,CACd,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, mergeStyles } from '@fluentui/react';\nimport { _convertRemToPx } from '@internal/acs-ui-common';\nimport React, { useRef } from 'react';\nimport { _useContainerHeight } from './utils/responsive';\nimport { VerticalGallery, VerticalGalleryStyles } from './VerticalGallery';\nimport { calculateVerticalChildrenPerPage } from './VideoGallery/utils/OverflowGalleryUtils';\n\n/**\n * Props for the Responsive wrapper of the VerticalGallery component\n *\n * @beta\n */\nexport interface ResponsiveVerticalGalleryProps {\n  /** Styles for the Children space container */\n  containerStyles: IStyle;\n  /** Styles for the VerticalGallery component */\n  verticalGalleryStyles: VerticalGalleryStyles;\n  /** Height of the gap in between the video tiles */\n  gapHeightRem: number;\n  /** Video tiles to be rendered in the Vertical Gallery */\n  children?: React.ReactNode;\n  /** Height of the control bar for navigating pages */\n  controlBarHeightRem?: number;\n  /** container is shorter than 480 px. */\n  isShort?: boolean;\n  /** Function to set which tiles to give video to in the children. */\n  onFetchTilesToRender?: (indexes: number[]) => void;\n  /** event to listen for children per page changes */\n  onChildrenPerPageChange?: (childrenPerPage: number) => void;\n}\n\n/**\n * Responsive container for the VerticalGallery Component. Performs calculations for number of children\n * for the VerticalGallery\n * @param props\n *\n * @beta\n */\nexport const ResponsiveVerticalGallery = (props: ResponsiveVerticalGalleryProps): JSX.Element => {\n  const {\n    children,\n    containerStyles,\n    verticalGalleryStyles,\n    gapHeightRem,\n    controlBarHeightRem,\n    isShort,\n    onFetchTilesToRender,\n    onChildrenPerPageChange\n  } = props;\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerHeight = _useContainerHeight(containerRef);\n\n  const topPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingTop) : 0;\n  const bottomPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingBottom) : 0;\n\n  const childrenPerPage = calculateVerticalChildrenPerPage({\n    numberOfChildren: React.Children.count(children) ?? 0,\n    containerHeight: (containerHeight ?? 0) - topPadding - bottomPadding,\n    gapHeightRem,\n    controlBarHeight: controlBarHeightRem ?? 2,\n    isShort: isShort ?? false\n  });\n  onChildrenPerPageChange?.(childrenPerPage);\n  return (\n    <div data-ui-id=\"responsive-vertical-gallery\" ref={containerRef} className={mergeStyles(containerStyles)}>\n      <VerticalGallery\n        childrenPerPage={childrenPerPage}\n        styles={verticalGalleryStyles}\n        onFetchTilesToRender={onFetchTilesToRender}\n      >\n        {children}\n      </VerticalGallery>\n    </div>\n  );\n};\n"]}

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

@@ -18,18 +18,15 @@ export const ScreenShareButton = (props) => {
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
     const theme = useTheme();
     const styles = screenshareButtonStyles(theme);
-    const onRenderScreenShareOnIcon = () => React.createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "ControlButtonScreenShareStop" });
-    const onRenderScreenShareOffIcon = () => React.createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "ControlButtonScreenShareStart" });
-    return React.createElement(ControlBarButton, Object.assign({}, props, { className: mergeStyles(styles, props.styles), onClick: (_a = props.onToggleScreenShare) !== null && _a !== void 0 ? _a : props.onClick, onRenderOnIcon: (_b = props.onRenderOnIcon) !== null && _b !== void 0 ? _b : onRenderScreenShareOnIcon, onRenderOffIcon: (_c = props.onRenderOffIcon) !== null && _c !== void 0 ? _c : onRenderScreenShareOffIcon, strings: strings, labelKey: (_d = props.labelKey) !== null && _d !== void 0 ? _d : 'screenShareButtonLabel', disabled: props.disabled }));
+    const onRenderScreenShareOnIcon = () => (React.createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "ControlButtonScreenShareStop" }));
+    const onRenderScreenShareOffIcon = () => (React.createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "ControlButtonScreenShareStart" }));
+    return (React.createElement(ControlBarButton, Object.assign({}, props, { className: mergeStyles(styles, props.styles), onClick: (_a = props.onToggleScreenShare) !== null && _a !== void 0 ? _a : props.onClick, onRenderOnIcon: (_b = props.onRenderOnIcon) !== null && _b !== void 0 ? _b : onRenderScreenShareOnIcon, onRenderOffIcon: (_c = props.onRenderOffIcon) !== null && _c !== void 0 ? _c : onRenderScreenShareOffIcon, strings: strings, labelKey: (_d = props.labelKey) !== null && _d !== void 0 ? _d : 'screenShareButtonLabel', disabled: props.disabled })));
 };
 const screenshareButtonStyles = (theme) => ({
     rootChecked: {
         background: theme.palette.themePrimary,
         color: DefaultPalette.white,
-        ':focus::after': {
-            outlineColor: `${DefaultPalette.white} !important`
-        },
-        // added !important to avoid override by FluentUI button styles
+        ':focus::after': { outlineColor: `${DefaultPalette.white} !important` }, // added !important to avoid override by FluentUI button styles
         '@media (forced-colors: active)': {
             border: '1px solid',
             borderColor: theme.palette.black
@@ -38,17 +35,12 @@ const screenshareButtonStyles = (theme) => ({
     rootCheckedHovered: {
         background: theme.palette.themePrimary,
         color: DefaultPalette.white,
-        ':focus::after': {
-            outlineColor: `${DefaultPalette.white} !important`
-        },
-        // added !important to avoid override by FluentUI button styles
+        ':focus::after': { outlineColor: `${DefaultPalette.white} !important` }, // added !important to avoid override by FluentUI button styles
         '@media (forced-colors: active)': {
             border: '1px solid',
             borderColor: theme.palette.black
         }
     },
-    labelChecked: {
-        color: DefaultPalette.white
-    }
+    labelChecked: { color: DefaultPalette.white }
 });
 //# sourceMappingURL=ScreenShareButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScreenShareButton.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ScreenShareButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAiB,WAAW,EAAS,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC9F,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAsCjE;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;;IAC9E,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,iBAAiB,CAAC;IAC5D,MAAM,OAAO,mCACR,aAAa,GACb,KAAK,CAAC,OAAO,CACjB,CAAC;IACF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,MAAM,GAAG,uBAAuB,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,yBAAyB,GAAG,GAAgB,EAAE,CAAC,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,8BAA8B,GAAG,CAAC;IAClJ,MAAM,0BAA0B,GAAG,GAAgB,EAAE,CAAC,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,+BAA+B,GAAG,CAAC;IACpJ,OAAO,oBAAC,gBAAgB,oBAAK,KAAK,IAAE,SAAS,EAAE,WAAW,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,MAAA,KAAK,CAAC,mBAAmB,mCAAI,KAAK,CAAC,OAAO,EAAE,cAAc,EAAE,MAAA,KAAK,CAAC,cAAc,mCAAI,yBAAyB,EAAE,eAAe,EAAE,MAAA,KAAK,CAAC,eAAe,mCAAI,0BAA0B,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAA,KAAK,CAAC,QAAQ,mCAAI,wBAAwB,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,CAAC;AACvX,CAAC,CAAC;AACF,MAAM,uBAAuB,GAAG,CAAC,KAAY,EAAiB,EAAE,CAAC,CAAC;IAChE,WAAW,EAAE;QACX,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;QACtC,KAAK,EAAE,cAAc,CAAC,KAAK;QAC3B,eAAe,EAAE;YACf,YAAY,EAAE,GAAG,cAAc,CAAC,KAAK,aAAa;SACnD;QACD,+DAA+D;QAC/D,gCAAgC,EAAE;YAChC,MAAM,EAAE,WAAW;YACnB,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;SACjC;KACF;IACD,kBAAkB,EAAE;QAClB,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;QACtC,KAAK,EAAE,cAAc,CAAC,KAAK;QAC3B,eAAe,EAAE;YACf,YAAY,EAAE,GAAG,cAAc,CAAC,KAAK,aAAa;SACnD;QACD,+DAA+D;QAC/D,gCAAgC,EAAE;YAChC,MAAM,EAAE,WAAW;YACnB,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;SACjC;KACF;IACD,YAAY,EAAE;QACZ,KAAK,EAAE,cAAc,CAAC,KAAK;KAC5B;CACF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { useLocale } from '../localization';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport { DefaultPalette, IButtonStyles, mergeStyles, Theme, useTheme } from '@fluentui/react';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\n\n/**\n * Strings of {@link ScreenShareButton} that can be overridden.\n *\n * @public\n */\nexport interface ScreenShareButtonStrings {\n  /** Label when button is on. */\n  onLabel: string;\n  /** Label when button is off. */\n  offLabel: string;\n  /** * Tooltip content when the button is disabled. */\n  tooltipDisabledContent?: string;\n  /** Tooltip content when the button is on. */\n  tooltipOnContent?: string;\n  /** Tooltip content when the button is off. */\n  tooltipOffContent?: string;\n}\n\n/**\n * Props for {@link ScreenShareButton}.\n *\n * @public\n */\nexport interface ScreenShareButtonProps extends ControlBarButtonProps {\n  /**\n   * Utility property for using this component with `communication react eventHandlers`.\n   * Maps directly to the `onClick` property.\n   */\n  onToggleScreenShare?: () => Promise<void>;\n\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<ScreenShareButtonStrings>;\n}\n\n/**\n * A button to start / stop screen sharing.\n *\n * Can be used with {@link ControlBar}.\n *\n * @public\n */\nexport const ScreenShareButton = (props: ScreenShareButtonProps): JSX.Element => {\n  const localeStrings = useLocale().strings.screenShareButton;\n  const strings = {\n    ...localeStrings,\n    ...props.strings\n  };\n  const theme = useTheme();\n  const styles = screenshareButtonStyles(theme);\n  const onRenderScreenShareOnIcon = (): JSX.Element => <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ControlButtonScreenShareStop\" />;\n  const onRenderScreenShareOffIcon = (): JSX.Element => <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ControlButtonScreenShareStart\" />;\n  return <ControlBarButton {...props} className={mergeStyles(styles, props.styles)} onClick={props.onToggleScreenShare ?? props.onClick} onRenderOnIcon={props.onRenderOnIcon ?? onRenderScreenShareOnIcon} onRenderOffIcon={props.onRenderOffIcon ?? onRenderScreenShareOffIcon} strings={strings} labelKey={props.labelKey ?? 'screenShareButtonLabel'} disabled={props.disabled} />;\n};\nconst screenshareButtonStyles = (theme: Theme): IButtonStyles => ({\n  rootChecked: {\n    background: theme.palette.themePrimary,\n    color: DefaultPalette.white,\n    ':focus::after': {\n      outlineColor: `${DefaultPalette.white} !important`\n    },\n    // added !important to avoid override by FluentUI button styles\n    '@media (forced-colors: active)': {\n      border: '1px solid',\n      borderColor: theme.palette.black\n    }\n  },\n  rootCheckedHovered: {\n    background: theme.palette.themePrimary,\n    color: DefaultPalette.white,\n    ':focus::after': {\n      outlineColor: `${DefaultPalette.white} !important`\n    },\n    // added !important to avoid override by FluentUI button styles\n    '@media (forced-colors: active)': {\n      border: '1px solid',\n      borderColor: theme.palette.black\n    }\n  },\n  labelChecked: {\n    color: DefaultPalette.white\n  }\n});"]}
+{"version":3,"file":"ScreenShareButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ScreenShareButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAiB,WAAW,EAAS,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC9F,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAsCjE;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;;IAC9E,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,iBAAiB,CAAC;IAC5D,MAAM,OAAO,mCAAQ,aAAa,GAAK,KAAK,CAAC,OAAO,CAAE,CAAC;IAEvD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,MAAM,GAAG,uBAAuB,CAAC,KAAK,CAAC,CAAC;IAE9C,MAAM,yBAAyB,GAAG,GAAgB,EAAE,CAAC,CACnD,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,8BAA8B,GAAG,CAC7F,CAAC;IACF,MAAM,0BAA0B,GAAG,GAAgB,EAAE,CAAC,CACpD,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,+BAA+B,GAAG,CAC9F,CAAC;IAEF,OAAO,CACL,oBAAC,gBAAgB,oBACX,KAAK,IACT,SAAS,EAAE,WAAW,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,EAC5C,OAAO,EAAE,MAAA,KAAK,CAAC,mBAAmB,mCAAI,KAAK,CAAC,OAAO,EACnD,cAAc,EAAE,MAAA,KAAK,CAAC,cAAc,mCAAI,yBAAyB,EACjE,eAAe,EAAE,MAAA,KAAK,CAAC,eAAe,mCAAI,0BAA0B,EACpE,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,MAAA,KAAK,CAAC,QAAQ,mCAAI,wBAAwB,EACpD,QAAQ,EAAE,KAAK,CAAC,QAAQ,IACxB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,uBAAuB,GAAG,CAAC,KAAY,EAAiB,EAAE,CAAC,CAAC;IAChE,WAAW,EAAE;QACX,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;QACtC,KAAK,EAAE,cAAc,CAAC,KAAK;QAC3B,eAAe,EAAE,EAAE,YAAY,EAAE,GAAG,cAAc,CAAC,KAAK,aAAa,EAAE,EAAE,+DAA+D;QACxI,gCAAgC,EAAE;YAChC,MAAM,EAAE,WAAW;YACnB,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;SACjC;KACF;IACD,kBAAkB,EAAE;QAClB,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;QACtC,KAAK,EAAE,cAAc,CAAC,KAAK;QAC3B,eAAe,EAAE,EAAE,YAAY,EAAE,GAAG,cAAc,CAAC,KAAK,aAAa,EAAE,EAAE,+DAA+D;QACxI,gCAAgC,EAAE;YAChC,MAAM,EAAE,WAAW;YACnB,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;SACjC;KACF;IACD,YAAY,EAAE,EAAE,KAAK,EAAE,cAAc,CAAC,KAAK,EAAE;CAC9C,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { useLocale } from '../localization';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport { DefaultPalette, IButtonStyles, mergeStyles, Theme, useTheme } from '@fluentui/react';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\n\n/**\n * Strings of {@link ScreenShareButton} that can be overridden.\n *\n * @public\n */\nexport interface ScreenShareButtonStrings {\n  /** Label when button is on. */\n  onLabel: string;\n  /** Label when button is off. */\n  offLabel: string;\n  /** * Tooltip content when the button is disabled. */\n  tooltipDisabledContent?: string;\n  /** Tooltip content when the button is on. */\n  tooltipOnContent?: string;\n  /** Tooltip content when the button is off. */\n  tooltipOffContent?: string;\n}\n\n/**\n * Props for {@link ScreenShareButton}.\n *\n * @public\n */\nexport interface ScreenShareButtonProps extends ControlBarButtonProps {\n  /**\n   * Utility property for using this component with `communication react eventHandlers`.\n   * Maps directly to the `onClick` property.\n   */\n  onToggleScreenShare?: () => Promise<void>;\n\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<ScreenShareButtonStrings>;\n}\n\n/**\n * A button to start / stop screen sharing.\n *\n * Can be used with {@link ControlBar}.\n *\n * @public\n */\nexport const ScreenShareButton = (props: ScreenShareButtonProps): JSX.Element => {\n  const localeStrings = useLocale().strings.screenShareButton;\n  const strings = { ...localeStrings, ...props.strings };\n\n  const theme = useTheme();\n  const styles = screenshareButtonStyles(theme);\n\n  const onRenderScreenShareOnIcon = (): JSX.Element => (\n    <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ControlButtonScreenShareStop\" />\n  );\n  const onRenderScreenShareOffIcon = (): JSX.Element => (\n    <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ControlButtonScreenShareStart\" />\n  );\n\n  return (\n    <ControlBarButton\n      {...props}\n      className={mergeStyles(styles, props.styles)}\n      onClick={props.onToggleScreenShare ?? props.onClick}\n      onRenderOnIcon={props.onRenderOnIcon ?? onRenderScreenShareOnIcon}\n      onRenderOffIcon={props.onRenderOffIcon ?? onRenderScreenShareOffIcon}\n      strings={strings}\n      labelKey={props.labelKey ?? 'screenShareButtonLabel'}\n      disabled={props.disabled}\n    />\n  );\n};\n\nconst screenshareButtonStyles = (theme: Theme): IButtonStyles => ({\n  rootChecked: {\n    background: theme.palette.themePrimary,\n    color: DefaultPalette.white,\n    ':focus::after': { outlineColor: `${DefaultPalette.white} !important` }, // added !important to avoid override by FluentUI button styles\n    '@media (forced-colors: active)': {\n      border: '1px solid',\n      borderColor: theme.palette.black\n    }\n  },\n  rootCheckedHovered: {\n    background: theme.palette.themePrimary,\n    color: DefaultPalette.white,\n    ':focus::after': { outlineColor: `${DefaultPalette.white} !important` }, // added !important to avoid override by FluentUI button styles\n    '@media (forced-colors: active)': {\n      border: '1px solid',\n      borderColor: theme.palette.black\n    }\n  },\n  labelChecked: { color: DefaultPalette.white }\n});\n"]}

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

@@ -16,8 +16,7 @@ import { _FileUploadCards } from './FileUploadCards';
 import { fileUploadCardsStyles } from './styles/SendBox.styles';
 /* @conditional-compile-remove(file-sharing) */
 import { hasCompletedFileUploads, hasIncompleteFileUploads } from './utils/SendBoxUtils';
-const MAXIMUM_LENGTH_OF_MESSAGE = 8000;
-const EMPTY_MESSAGE_REGEX = /^\s*$/;
+import { MAXIMUM_LENGTH_OF_MESSAGE, exceedsMaxAllowedLength, sanitizeText } from './utils/SendBoxUtils';
 /**
  * Component for typing and sending messages.
  *
@@ -52,17 +51,15 @@ export const SendBox = (props) => {
         setFileUploadsPendingError(undefined);
         /* @conditional-compile-remove(file-sharing) */
         if (hasIncompleteFileUploads(activeFileUploads)) {
-            setFileUploadsPendingError({
-                message: strings.fileUploadsPendingError,
-                timestamp: Date.now()
-            });
+            setFileUploadsPendingError({ message: strings.fileUploadsPendingError, timestamp: Date.now() });
             return;
         }
         const message = textValue;
         // we don't want to send empty messages including spaces, newlines, tabs
         // Message can be empty if there is a valid file upload
-        if (!EMPTY_MESSAGE_REGEX.test(message) || /* @conditional-compile-remove(file-sharing) */ hasCompletedFileUploads(activeFileUploads)) {
-            onSendMessage && onSendMessage(sanitizeText(message));
+        if (sanitizeText(message).length > 0 ||
+            /* @conditional-compile-remove(file-sharing) */ hasCompletedFileUploads(activeFileUploads)) {
+            onSendMessage && onSendMessage(message);
             setTextValue('');
         }
         (_a = sendTextFieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
@@ -71,12 +68,7 @@ export const SendBox = (props) => {
         if (newValue === undefined) {
             return;
         }
-        if (newValue.length > MAXIMUM_LENGTH_OF_MESSAGE) {
-            setTextValueOverflow(true);
-        }
-        else {
-            setTextValueOverflow(false);
-        }
+        setTextValueOverflow(exceedsMaxAllowedLength(newValue.length));
         setTextValue(newValue);
     };
     const textTooLongMessage = textValueOverflow ? strings.textTooLong : undefined;
@@ -89,12 +81,18 @@ export const SendBox = (props) => {
         /* @conditional-compile-remove(file-sharing) */ hasFile: hasCompletedFileUploads(activeFileUploads),
         hasErrorMessage: !!errorMessage,
         customSendIconStyle: styles === null || styles === void 0 ? void 0 : styles.sendMessageIcon
-    }), [theme, textValue, /* @conditional-compile-remove(file-sharing) */ activeFileUploads, errorMessage, styles === null || styles === void 0 ? void 0 : styles.sendMessageIcon]);
-    const onRenderSendIcon = useCallback((isHover) => onRenderIcon ? onRenderIcon(isHover) : React.createElement(Icon, { iconName: isHover && textValue ? 'SendBoxSendHovered' : 'SendBoxSend', className: mergedSendIconStyle }), [mergedSendIconStyle, onRenderIcon, textValue]);
+    }), [
+        theme,
+        textValue,
+        /* @conditional-compile-remove(file-sharing) */ activeFileUploads,
+        errorMessage,
+        styles === null || styles === void 0 ? void 0 : styles.sendMessageIcon
+    ]);
+    const onRenderSendIcon = useCallback((isHover) => onRenderIcon ? (onRenderIcon(isHover)) : (React.createElement(Icon, { iconName: isHover && textValue ? 'SendBoxSendHovered' : 'SendBoxSend', className: mergedSendIconStyle })), [mergedSendIconStyle, onRenderIcon, textValue]);
     // Ensure that errors are cleared when there are no files in sendBox
     /* @conditional-compile-remove(file-sharing) */
     React.useEffect(() => {
-        if (!(activeFileUploads === null || activeFileUploads === void 0 ? void 0 : activeFileUploads.filter(upload => !upload.error).length)) {
+        if (!(activeFileUploads === null || activeFileUploads === void 0 ? void 0 : activeFileUploads.filter((upload) => !upload.error).length)) {
             setFileUploadsPendingError(undefined);
         }
     }, [activeFileUploads]);
@@ -103,25 +101,23 @@ export const SendBox = (props) => {
         var _a;
         return {
             fileUploadsPendingError: fileUploadsPendingError,
-            fileUploadError: (_a = activeFileUploads === null || activeFileUploads === void 0 ? void 0 : activeFileUploads.filter(fileUpload => fileUpload.error).pop()) === null || _a === void 0 ? void 0 : _a.error
+            fileUploadError: (_a = activeFileUploads === null || activeFileUploads === void 0 ? void 0 : activeFileUploads.filter((fileUpload) => fileUpload.error).pop()) === null || _a === void 0 ? void 0 : _a.error
         };
     }, [activeFileUploads, fileUploadsPendingError]);
     /* @conditional-compile-remove(file-sharing) */
     const onRenderFileUploads = useCallback(() => {
         var _a, _b, _c, _d, _e, _f;
-        if (!(activeFileUploads === null || activeFileUploads === void 0 ? void 0 : activeFileUploads.filter(upload => !upload.error).length)) {
+        if (!(activeFileUploads === null || activeFileUploads === void 0 ? void 0 : activeFileUploads.filter((upload) => !upload.error).length)) {
             return null;
         }
-        return props.onRenderFileUploads ? props.onRenderFileUploads() : React.createElement(Stack, { className: fileUploadCardsStyles },
+        return props.onRenderFileUploads ? (props.onRenderFileUploads()) : (React.createElement(Stack, { className: fileUploadCardsStyles },
             React.createElement(_FileUploadCards, { activeFileUploads: activeFileUploads, onCancelFileUpload: props.onCancelFileUpload, strings: {
                     removeFile: (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.removeFile) !== null && _b !== void 0 ? _b : localeStrings.removeFile,
                     uploading: (_d = (_c = props.strings) === null || _c === void 0 ? void 0 : _c.uploading) !== null && _d !== void 0 ? _d : localeStrings.uploading,
                     uploadCompleted: (_f = (_e = props.strings) === null || _e === void 0 ? void 0 : _e.uploadCompleted) !== null && _f !== void 0 ? _f : localeStrings.uploadCompleted
-                } }));
+                } })));
     }, [activeFileUploads, props, localeStrings]);
-    return React.createElement(Stack, { className: mergeStyles(sendBoxWrapperStyles, {
-            overflow: 'visible'
-        } // This is needed for the mention popup to be visible
+    return (React.createElement(Stack, { className: mergeStyles(sendBoxWrapperStyles, { overflow: 'visible' } // This is needed for the mention popup to be visible
         ) }, /* @conditional-compile-remove(file-sharing) */
         React.createElement(SendBoxErrors, Object.assign({}, sendBoxErrorsProps)),
         React.createElement(Stack, { className: borderAndBoxShadowStyle({
@@ -129,7 +125,7 @@ export const SendBox = (props) => {
                 hasErrorMessage: !!errorMessage,
                 disabled: !!disabled
             }) },
-            React.createElement(InputBoxComponent, { autoFocus: autoFocus, "data-ui-id": ids.sendboxTextField, disabled: disabled, errorMessage: onRenderSystemMessage ? onRenderSystemMessage(errorMessage) : errorMessage, textFieldRef: sendTextFieldRef, id: "sendbox", placeholderText: strings.placeholderText, textValue: textValue, onChange: (_, newValue) => setText(newValue), onKeyDown: ev => {
+            React.createElement(InputBoxComponent, { autoFocus: autoFocus, "data-ui-id": ids.sendboxTextField, disabled: disabled, errorMessage: onRenderSystemMessage ? onRenderSystemMessage(errorMessage) : errorMessage, textFieldRef: sendTextFieldRef, id: "sendbox", placeholderText: strings.placeholderText, textValue: textValue, onChange: (_, newValue) => setText(newValue), onKeyDown: (ev) => {
                     const keyWasSendingMessage = ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline);
                     if (!keyWasSendingMessage) {
                         onTyping === null || onTyping === void 0 ? void 0 : onTyping();
@@ -137,24 +133,15 @@ export const SendBox = (props) => {
                 }, onEnterKeyDown: () => {
                     sendMessageOnClick();
                 }, styles: mergedStyles, supportNewline: supportNewline, maxLength: MAXIMUM_LENGTH_OF_MESSAGE, 
-                /* @conditional-compile-remove(mention) */ mentionLookupOptions: mentionLookupOptions },
-                React.createElement(InputBoxButton, { onRenderIcon: onRenderSendIcon, onClick: e => {
+                /* @conditional-compile-remove(mention) */
+                mentionLookupOptions: mentionLookupOptions },
+                React.createElement(InputBoxButton, { onRenderIcon: onRenderSendIcon, onClick: (e) => {
                         if (!textValueOverflow) {
                             sendMessageOnClick();
                         }
                         e.stopPropagation();
-                    }, id: 'sendIconWrapper', className: mergedSendButtonStyle, ariaLabel: localeStrings.sendButtonAriaLabel, tooltipContent: localeStrings.sendButtonAriaLabel })), /* @conditional-compile-remove(file-sharing) */
-            onRenderFileUploads()));
-};
-/**
- * @private
- */
-const sanitizeText = (message) => {
-    if (EMPTY_MESSAGE_REGEX.test(message)) {
-        return '';
-    }
-    else {
-        return message;
-    }
+                    }, id: 'sendIconWrapper', className: mergedSendButtonStyle, ariaLabel: localeStrings.sendButtonAriaLabel, tooltipContent: localeStrings.sendButtonAriaLabel })),
+            /* @conditional-compile-remove(file-sharing) */
+            onRenderFileUploads())));
 };
 //# sourceMappingURL=SendBox.js.map