@azure/communication-react 1.11.0-alpha-202312100013 → 1.11.0-alpha-202312111717

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

@@ -1 +1 @@
-{"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';\n/* @conditional-compile-remove(pinned-participants) */\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(hide-attendee-name) */\nimport { useLocale } from '../localization';\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    disablePinMenuItem?: boolean;\n    toggleAnnouncerString?: (announcerString: string) => void;\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      onUpdateScalingMode,\n      disablePinMenuItem,\n      toggleAnnouncerString,\n      strings\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      remoteParticipant,\n      view: createVideoStreamResult?.view,\n      /* @conditional-compile-remove(pinned-participants) */\n      strings: { ...props.strings },\n      isPinned,\n      onPinParticipant,\n      onUnpinParticipant,\n      onUpdateScalingMode,\n      disablePinMenuItem,\n      toggleAnnouncerString\n    });\n\n    const videoTileContextualMenuProps = useMemo(() => {\n      if (menuKind !== 'contextual') {\n        return {};\n      }\n      return videoTileContextualMenuPropsTrampoline(contextualMenuProps);\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    /* @conditional-compile-remove(pinned-participants) */\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 = useLocale().strings.AttendeeRole;\n\n    /* @conditional-compile-remove(hide-attendee-name) */\n    const formatDisplayName = (): string | undefined => {\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        /* @conditional-compile-remove(pinned-participants) */\n        tabIndex={menuKind === 'drawer' ? 0 : undefined}\n        /* @conditional-compile-remove(pinned-participants) */\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          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          /* @conditional-compile-remove(pinned-participants) */\n          isPinned={props.isPinned}\n          /* @conditional-compile-remove(pinned-participants) */\n          onLongTouch={() =>\n            setDrawerMenuItemProps(\n              convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n            )\n          }\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 videoTileContextualMenuPropsTrampoline = (\n  contextualMenuProps?: IContextualMenuProps\n): { contextualMenu?: IContextualMenuProps } => {\n  if (!contextualMenuProps) {\n    return {};\n  }\n  /* @conditional-compile-remove(pinned-participants) */\n  return {\n    contextualMenu: contextualMenuProps\n  };\n\n  return {};\n};\n\n/* @conditional-compile-remove(pinned-participants) */\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\"../../../acs-ui-common/src\""]}
+{"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';\n/* @conditional-compile-remove(pinned-participants) */\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(hide-attendee-name) */\nimport { useLocale } from '../localization';\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    disablePinMenuItem?: boolean;\n    toggleAnnouncerString?: (announcerString: string) => void;\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      onUpdateScalingMode,\n      disablePinMenuItem,\n      toggleAnnouncerString,\n      strings\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      remoteParticipant,\n      view: createVideoStreamResult?.view,\n      /* @conditional-compile-remove(pinned-participants) */\n      strings: { ...props.strings },\n      isPinned,\n      onPinParticipant,\n      onUnpinParticipant,\n      onUpdateScalingMode,\n      disablePinMenuItem,\n      toggleAnnouncerString\n    });\n\n    const videoTileContextualMenuProps = useMemo(() => {\n      if (menuKind !== 'contextual') {\n        return {};\n      }\n      return videoTileContextualMenuPropsTrampoline(contextualMenuProps);\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    /* @conditional-compile-remove(pinned-participants) */\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 = useLocale().strings.AttendeeRole;\n\n    /* @conditional-compile-remove(hide-attendee-name) */\n    const formatDisplayName = (): string | undefined => {\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        /* @conditional-compile-remove(pinned-participants) */\n        tabIndex={menuKind === 'drawer' ? 0 : undefined}\n        /* @conditional-compile-remove(pinned-participants) */\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          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          /* @conditional-compile-remove(pinned-participants) */\n          isPinned={props.isPinned}\n          /* @conditional-compile-remove(pinned-participants) */\n          onLongTouch={() =>\n            setDrawerMenuItemProps(\n              convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n            )\n          }\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 videoTileContextualMenuPropsTrampoline = (\n  contextualMenuProps?: IContextualMenuProps\n): { contextualMenu?: IContextualMenuProps } => {\n  if (!contextualMenuProps) {\n    return {};\n  }\n  /* @conditional-compile-remove(pinned-participants) */\n  return {\n    contextualMenu: contextualMenuProps\n  };\n\n  return {};\n};\n\n/* @conditional-compile-remove(pinned-participants) */\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/ResponsiveVerticalGallery.js.map

@@ -1 +1 @@
-{"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\"../../../acs-ui-common/src\""]}
+{"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

@@ -26,7 +26,7 @@ const screenshareButtonStyles = (theme) => ({
     rootChecked: {
         background: theme.palette.themePrimary,
         color: DefaultPalette.white,
-        ':focus::after': { outlineColor: `${DefaultPalette.white} !important` },
+        ':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
@@ -35,7 +35,7 @@ const screenshareButtonStyles = (theme) => ({
     rootCheckedHovered: {
         background: theme.palette.themePrimary,
         color: DefaultPalette.white,
-        ':focus::after': { outlineColor: `${DefaultPalette.white} !important` },
+        ':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

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

@@ -1 +1 @@
-{"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;QACvE,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;QACvE,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"]}
+{"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.map

@@ -1 +1 @@
-{"version":3,"file":"SendBox.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/SendBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useState, useMemo, useCallback } from 'react';\nimport { IStyle, ITextField, mergeStyles, concatStyleSets, Icon, Stack } from '@fluentui/react';\nimport { sendButtonStyle, sendIconStyle, sendBoxWrapperStyles, borderAndBoxShadowStyle } from './styles/SendBox.styles';\nimport { BaseCustomStyles } from '../types';\nimport { useTheme } from '../theming';\nimport { useLocale } from '../localization';\nimport { useIdentifiers } from '../identifiers';\nimport { InputBoxButton, InputBoxComponent } from './InputBoxComponent';\nimport { SendBoxErrors } from './SendBoxErrors';\n/* @conditional-compile-remove(file-sharing) */\nimport { _FileUploadCards } from './FileUploadCards';\n/* @conditional-compile-remove(file-sharing) */\nimport { fileUploadCardsStyles } from './styles/SendBox.styles';\nimport { SendBoxErrorBarError } from './SendBoxErrorBar';\n/* @conditional-compile-remove(mention) */\nimport { MentionLookupOptions } from './MentionPopover';\n\nconst EMPTY_MESSAGE_REGEX = /^\\s*$/;\nconst MAXIMUM_LENGTH_OF_MESSAGE = 8000;\n\n/**\n * Fluent styles for {@link Sendbox}.\n *\n * @public\n */\nexport interface SendBoxStylesProps extends BaseCustomStyles {\n  /** Styles for the text field. */\n  textField?: IStyle;\n  /** styles for the text field container */\n  textFieldContainer?: IStyle;\n  /** Styles for the container of the send message icon. */\n  sendMessageIconContainer?: IStyle;\n  /** Styles for the send message icon; These styles will be ignored when a custom send message icon is provided. */\n  sendMessageIcon?: IStyle;\n  /** Styles for the system message; These styles will be ignored when a custom system message component is provided. */\n  systemMessage?: IStyle;\n}\n\n/**\n * Attributes required for SendBox to show file uploads like name, progress etc.\n * @beta\n */\nexport interface ActiveFileUpload {\n  /**\n   * Unique identifier for the file upload.\n   */\n  id: string;\n\n  /**\n   * File name to be rendered for uploaded file.\n   */\n  filename: string;\n\n  /**\n   * A number between 0 and 1 indicating the progress of the upload.\n   * This is unrelated to the `uploadComplete` property.\n   * It is only used to show the progress of the upload.\n   * Progress of 1 doesn't mark the upload as complete, set the `uploadComplete`\n   * property to true to mark the upload as complete.\n   */\n  progress: number;\n\n  /**\n   * Error to be displayed to the user if the upload fails.\n   */\n  error?: SendBoxErrorBarError;\n\n  /**\n   * `true` means that the upload is completed.\n   * This is independent of the upload `progress`.\n   */\n  uploadComplete?: boolean;\n}\n\n/**\n * Strings of {@link SendBox} that can be overridden.\n *\n * @public\n */\nexport interface SendBoxStrings {\n  /**\n   * Placeholder text in SendBox when there is no user input\n   */\n  placeholderText: string;\n  /**\n   * The warning message when send box text length is more than max limit\n   */\n  textTooLong: string;\n  /**\n   * Aria label for send message button\n   */\n  sendButtonAriaLabel: string;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Error message indicating that all file uploads are not complete.\n   */\n  fileUploadsPendingError: string;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Aria label to notify user when focus is on cancel file upload button.\n   */\n  removeFile: string;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Aria label to notify user file uploading starts.\n   */\n  uploading: string;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Aria label to notify user file is uploaded.\n   */\n  uploadCompleted: string;\n}\n\n/**\n * Props for {@link SendBox}.\n *\n * @public\n */\nexport interface SendBoxProps {\n  /**\n   * Optional boolean to disable text box\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Optional text for system message below text box\n   */\n  systemMessage?: string;\n  /**\n   * Optional override behavior on send button click\n   */\n  onSendMessage?: (content: string) => Promise<void>;\n  /* @conditional-compile-remove(mention) */\n  /**\n   * Optional props needed to lookup suggestions in the mention scenario.\n   * @beta\n   */\n  mentionLookupOptions?: MentionLookupOptions;\n\n  /**\n   * Optional callback called when user is typing\n   */\n  onTyping?: () => Promise<void>;\n  /**\n   * Optional callback to render system message below the SendBox.\n   * @defaultValue MessageBar\n   */\n  onRenderSystemMessage?: (systemMessage: string | undefined) => React.ReactElement;\n  /**\n   * Optional boolean to support new line in SendBox.\n   * @defaultValue false\n   */\n  supportNewline?: boolean;\n  /**\n   * Optional callback to render send button icon to the right of the SendBox.\n   * @defaultValue SendBoxSendHovered icon when mouse over icon and SendBoxSend icon otherwise\n   */\n  onRenderIcon?: (isHover: boolean) => JSX.Element;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <SendBox styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: SendBoxStylesProps;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<SendBoxStrings>;\n  /**\n   * enumerable to determine if the input box has focus on render or not.\n   * When undefined nothing has focus on render\n   */\n  autoFocus?: 'sendBoxTextField';\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Optional callback to render uploaded files in the SendBox. The sendBox will expand\n   * vertically to accommodate the uploaded files. File uploads will\n   * be rendered below the text area in sendBox.\n   * @beta\n   */\n  onRenderFileUploads?: () => JSX.Element;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Optional array of active file uploads where each object has attributes\n   * of a file upload like name, progress, errorMessage etc.\n   * @beta\n   */\n  activeFileUploads?: ActiveFileUpload[];\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Optional callback to remove the file upload before sending by clicking on\n   * cancel icon.\n   * @beta\n   */\n  onCancelFileUpload?: (fileId: string) => void;\n}\n\n/**\n * Component for typing and sending messages.\n *\n * Supports sending typing notification when user starts entering text.\n * Supports an optional message below the text input field.\n *\n * @public\n */\nexport const SendBox = (props: SendBoxProps): JSX.Element => {\n  const {\n    disabled,\n    systemMessage,\n    supportNewline,\n    onSendMessage,\n    onTyping,\n    onRenderIcon,\n    onRenderSystemMessage,\n    styles,\n    autoFocus,\n    /* @conditional-compile-remove(mention) */\n    mentionLookupOptions\n  } = props;\n  const theme = useTheme();\n  const localeStrings = useLocale().strings.sendBox;\n  const strings = { ...localeStrings, ...props.strings };\n  const ids = useIdentifiers();\n  const activeFileUploads = activeFileUploadsTrampoline(props);\n\n  const [textValue, setTextValue] = useState('');\n  const [textValueOverflow, setTextValueOverflow] = useState(false);\n\n  const sendTextFieldRef = React.useRef<ITextField>(null);\n\n  const [fileUploadsPendingError, setFileUploadsPendingError] = useState<SendBoxErrorBarError | undefined>(undefined);\n\n  const sendMessageOnClick = (): void => {\n    // don't send a message when disabled\n    if (disabled || textValueOverflow) {\n      return;\n    }\n\n    // Don't send message until all files have been uploaded successfully\n    setFileUploadsPendingError(undefined);\n\n    if (hasIncompleteFileUploads(props)) {\n      /* @conditional-compile-remove(file-sharing) */\n      setFileUploadsPendingError({ message: strings.fileUploadsPendingError, timestamp: Date.now() });\n      return;\n    }\n\n    const message = textValue;\n    // we don't want to send empty messages including spaces, newlines, tabs\n    // Message can be empty if there is a valid file upload\n    if (!EMPTY_MESSAGE_REGEX.test(message) || hasFile(props)) {\n      onSendMessage && onSendMessage(sanitizeText(message));\n      setTextValue('');\n    }\n    sendTextFieldRef.current?.focus();\n  };\n\n  const setText = (newValue?: string | undefined): void => {\n    if (newValue === undefined) {\n      return;\n    }\n\n    if (newValue.length > MAXIMUM_LENGTH_OF_MESSAGE) {\n      setTextValueOverflow(true);\n    } else {\n      setTextValueOverflow(false);\n    }\n    setTextValue(newValue);\n  };\n\n  const textTooLongMessage = textValueOverflow ? strings.textTooLong : undefined;\n  const errorMessage = systemMessage ?? textTooLongMessage;\n\n  const mergedSendButtonStyle = useMemo(\n    () => mergeStyles(sendButtonStyle, styles?.sendMessageIconContainer),\n    [styles?.sendMessageIconContainer]\n  );\n\n  const mergedStyles = useMemo(() => concatStyleSets(styles), [styles]);\n\n  const hasText = !!textValue;\n  const hasTextOrFile = hasText || hasFile(props);\n\n  const mergedSendIconStyle = useMemo(\n    () =>\n      mergeStyles(\n        sendIconStyle,\n        {\n          color: !!errorMessage || !hasTextOrFile ? theme.palette.neutralTertiary : theme.palette.themePrimary\n        },\n        styles?.sendMessageIcon\n      ),\n    [errorMessage, hasTextOrFile, theme, styles?.sendMessageIcon]\n  );\n\n  const onRenderSendIcon = useCallback(\n    (isHover: boolean) =>\n      onRenderIcon ? (\n        onRenderIcon(isHover)\n      ) : (\n        <Icon iconName={isHover && textValue ? 'SendBoxSendHovered' : 'SendBoxSend'} className={mergedSendIconStyle} />\n      ),\n    [mergedSendIconStyle, onRenderIcon, textValue]\n  );\n\n  // Ensure that errors are cleared when there are no files in sendBox\n  React.useEffect(() => {\n    if (!activeFileUploads?.filter((upload) => !upload.error).length) {\n      setFileUploadsPendingError(undefined);\n    }\n  }, [activeFileUploads]);\n\n  const sendBoxErrorsProps = useMemo(() => {\n    return {\n      fileUploadsPendingError: fileUploadsPendingError,\n      fileUploadError: activeFileUploads?.filter((fileUpload) => fileUpload.error).pop()?.error\n    };\n  }, [activeFileUploads, fileUploadsPendingError]);\n\n  /* @conditional-compile-remove(file-sharing) */\n  const onRenderFileUploads = useCallback(() => {\n    if (!activeFileUploads?.filter((upload) => !upload.error).length) {\n      return null;\n    }\n    return props.onRenderFileUploads ? (\n      props.onRenderFileUploads()\n    ) : (\n      <Stack className={fileUploadCardsStyles}>\n        <_FileUploadCards\n          activeFileUploads={activeFileUploads}\n          onCancelFileUpload={props.onCancelFileUpload}\n          strings={{\n            removeFile: props.strings?.removeFile ?? localeStrings.removeFile,\n            uploading: props.strings?.uploading ?? localeStrings.uploading,\n            uploadCompleted: props.strings?.uploadCompleted ?? localeStrings.uploadCompleted\n          }}\n        />\n      </Stack>\n    );\n  }, [activeFileUploads, props, localeStrings]);\n\n  return (\n    <Stack\n      className={mergeStyles(\n        sendBoxWrapperStyles,\n        { overflow: 'visible' } // This is needed for the mention popup to be visible\n      )}\n    >\n      <SendBoxErrors {...sendBoxErrorsProps} />\n      <Stack\n        className={mergeStyles(\n          borderAndBoxShadowStyle({\n            theme,\n            hasErrorMessage: !!errorMessage,\n            disabled: !!disabled\n          })\n        )}\n      >\n        <InputBoxComponent\n          autoFocus={autoFocus}\n          data-ui-id={ids.sendboxTextField}\n          disabled={disabled}\n          errorMessage={onRenderSystemMessage ? onRenderSystemMessage(errorMessage) : errorMessage}\n          textFieldRef={sendTextFieldRef}\n          id=\"sendbox\"\n          placeholderText={strings.placeholderText}\n          textValue={textValue}\n          onChange={(_, newValue) => setText(newValue)}\n          onKeyDown={(ev) => {\n            const keyWasSendingMessage = ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline);\n            if (!keyWasSendingMessage) {\n              onTyping?.();\n            }\n          }}\n          onEnterKeyDown={() => {\n            sendMessageOnClick();\n          }}\n          styles={mergedStyles}\n          supportNewline={supportNewline}\n          maxLength={MAXIMUM_LENGTH_OF_MESSAGE}\n          /* @conditional-compile-remove(mention) */\n          mentionLookupOptions={mentionLookupOptions}\n        >\n          <InputBoxButton\n            onRenderIcon={onRenderSendIcon}\n            onClick={(e) => {\n              if (!textValueOverflow) {\n                sendMessageOnClick();\n              }\n              e.stopPropagation();\n            }}\n            id={'sendIconWrapper'}\n            className={mergedSendButtonStyle}\n            ariaLabel={localeStrings.sendButtonAriaLabel}\n            tooltipContent={localeStrings.sendButtonAriaLabel}\n          />\n        </InputBoxComponent>\n        {\n          /* @conditional-compile-remove(file-sharing) */\n          onRenderFileUploads()\n        }\n      </Stack>\n    </Stack>\n  );\n};\n\n/**\n * @private\n */\nconst hasIncompleteFileUploads = (props: SendBoxProps): boolean => {\n  const activeFileUploads = activeFileUploadsTrampoline(props);\n  return !!(\n    activeFileUploads?.length &&\n    !activeFileUploads.filter((fileUpload) => !fileUpload.error).every((fileUpload) => fileUpload.uploadComplete)\n  );\n};\n\nconst hasFile = (props: SendBoxProps): boolean => {\n  const activeFileUploads = activeFileUploadsTrampoline(props);\n  return !!activeFileUploads?.find((file) => !file.error);\n  return false;\n};\n\nconst sanitizeText = (message: string): string => {\n  if (EMPTY_MESSAGE_REGEX.test(message)) {\n    return '';\n  } else {\n    return message;\n  }\n};\n\nconst activeFileUploadsTrampoline = (props: SendBoxProps): ActiveFileUpload[] | undefined => {\n  /* @conditional-compile-remove(file-sharing) */\n  return props.activeFileUploads;\n  return [];\n};\n"]}
+{"version":3,"file":"SendBox.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/SendBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useState, useMemo, useCallback } from 'react';\nimport { IStyle, ITextField, mergeStyles, concatStyleSets, Icon, Stack } from '@fluentui/react';\nimport { sendButtonStyle, sendIconStyle, sendBoxWrapperStyles, borderAndBoxShadowStyle } from './styles/SendBox.styles';\nimport { BaseCustomStyles } from '../types';\nimport { useTheme } from '../theming';\nimport { useLocale } from '../localization';\nimport { useIdentifiers } from '../identifiers';\nimport { InputBoxButton, InputBoxComponent } from './InputBoxComponent';\nimport { SendBoxErrors } from './SendBoxErrors';\n/* @conditional-compile-remove(file-sharing) */\nimport { _FileUploadCards } from './FileUploadCards';\n/* @conditional-compile-remove(file-sharing) */\nimport { fileUploadCardsStyles } from './styles/SendBox.styles';\nimport { SendBoxErrorBarError } from './SendBoxErrorBar';\n/* @conditional-compile-remove(mention) */\nimport { MentionLookupOptions } from './MentionPopover';\n\nconst EMPTY_MESSAGE_REGEX = /^\\s*$/;\nconst MAXIMUM_LENGTH_OF_MESSAGE = 8000;\n\n/**\n * Fluent styles for {@link Sendbox}.\n *\n * @public\n */\nexport interface SendBoxStylesProps extends BaseCustomStyles {\n  /** Styles for the text field. */\n  textField?: IStyle;\n  /** styles for the text field container */\n  textFieldContainer?: IStyle;\n  /** Styles for the container of the send message icon. */\n  sendMessageIconContainer?: IStyle;\n  /** Styles for the send message icon; These styles will be ignored when a custom send message icon is provided. */\n  sendMessageIcon?: IStyle;\n  /** Styles for the system message; These styles will be ignored when a custom system message component is provided. */\n  systemMessage?: IStyle;\n}\n\n/**\n * Attributes required for SendBox to show file uploads like name, progress etc.\n * @beta\n */\nexport interface ActiveFileUpload {\n  /**\n   * Unique identifier for the file upload.\n   */\n  id: string;\n\n  /**\n   * File name to be rendered for uploaded file.\n   */\n  filename: string;\n\n  /**\n   * A number between 0 and 1 indicating the progress of the upload.\n   * This is unrelated to the `uploadComplete` property.\n   * It is only used to show the progress of the upload.\n   * Progress of 1 doesn't mark the upload as complete, set the `uploadComplete`\n   * property to true to mark the upload as complete.\n   */\n  progress: number;\n\n  /**\n   * Error to be displayed to the user if the upload fails.\n   */\n  error?: SendBoxErrorBarError;\n\n  /**\n   * `true` means that the upload is completed.\n   * This is independent of the upload `progress`.\n   */\n  uploadComplete?: boolean;\n}\n\n/**\n * Strings of {@link SendBox} that can be overridden.\n *\n * @public\n */\nexport interface SendBoxStrings {\n  /**\n   * Placeholder text in SendBox when there is no user input\n   */\n  placeholderText: string;\n  /**\n   * The warning message when send box text length is more than max limit\n   */\n  textTooLong: string;\n  /**\n   * Aria label for send message button\n   */\n  sendButtonAriaLabel: string;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Error message indicating that all file uploads are not complete.\n   */\n  fileUploadsPendingError: string;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Aria label to notify user when focus is on cancel file upload button.\n   */\n  removeFile: string;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Aria label to notify user file uploading starts.\n   */\n  uploading: string;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Aria label to notify user file is uploaded.\n   */\n  uploadCompleted: string;\n}\n\n/**\n * Props for {@link SendBox}.\n *\n * @public\n */\nexport interface SendBoxProps {\n  /**\n   * Optional boolean to disable text box\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Optional text for system message below text box\n   */\n  systemMessage?: string;\n  /**\n   * Optional override behavior on send button click\n   */\n  onSendMessage?: (content: string) => Promise<void>;\n  /* @conditional-compile-remove(mention) */\n  /**\n   * Optional props needed to lookup suggestions in the mention scenario.\n   * @beta\n   */\n  mentionLookupOptions?: MentionLookupOptions;\n\n  /**\n   * Optional callback called when user is typing\n   */\n  onTyping?: () => Promise<void>;\n  /**\n   * Optional callback to render system message below the SendBox.\n   * @defaultValue MessageBar\n   */\n  onRenderSystemMessage?: (systemMessage: string | undefined) => React.ReactElement;\n  /**\n   * Optional boolean to support new line in SendBox.\n   * @defaultValue false\n   */\n  supportNewline?: boolean;\n  /**\n   * Optional callback to render send button icon to the right of the SendBox.\n   * @defaultValue SendBoxSendHovered icon when mouse over icon and SendBoxSend icon otherwise\n   */\n  onRenderIcon?: (isHover: boolean) => JSX.Element;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <SendBox styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: SendBoxStylesProps;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<SendBoxStrings>;\n  /**\n   * enumerable to determine if the input box has focus on render or not.\n   * When undefined nothing has focus on render\n   */\n  autoFocus?: 'sendBoxTextField';\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Optional callback to render uploaded files in the SendBox. The sendBox will expand\n   * vertically to accommodate the uploaded files. File uploads will\n   * be rendered below the text area in sendBox.\n   * @beta\n   */\n  onRenderFileUploads?: () => JSX.Element;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Optional array of active file uploads where each object has attributes\n   * of a file upload like name, progress, errorMessage etc.\n   * @beta\n   */\n  activeFileUploads?: ActiveFileUpload[];\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Optional callback to remove the file upload before sending by clicking on\n   * cancel icon.\n   * @beta\n   */\n  onCancelFileUpload?: (fileId: string) => void;\n}\n\n/**\n * Component for typing and sending messages.\n *\n * Supports sending typing notification when user starts entering text.\n * Supports an optional message below the text input field.\n *\n * @public\n */\nexport const SendBox = (props: SendBoxProps): JSX.Element => {\n  const {\n    disabled,\n    systemMessage,\n    supportNewline,\n    onSendMessage,\n    onTyping,\n    onRenderIcon,\n    onRenderSystemMessage,\n    styles,\n    autoFocus,\n    /* @conditional-compile-remove(mention) */\n    mentionLookupOptions\n  } = props;\n  const theme = useTheme();\n  const localeStrings = useLocale().strings.sendBox;\n  const strings = { ...localeStrings, ...props.strings };\n  const ids = useIdentifiers();\n  const activeFileUploads = activeFileUploadsTrampoline(props);\n\n  const [textValue, setTextValue] = useState('');\n  const [textValueOverflow, setTextValueOverflow] = useState(false);\n\n  const sendTextFieldRef = React.useRef<ITextField>(null);\n\n  const [fileUploadsPendingError, setFileUploadsPendingError] = useState<SendBoxErrorBarError | undefined>(undefined);\n\n  const sendMessageOnClick = (): void => {\n    // don't send a message when disabled\n    if (disabled || textValueOverflow) {\n      return;\n    }\n\n    // Don't send message until all files have been uploaded successfully\n    setFileUploadsPendingError(undefined);\n\n    if (hasIncompleteFileUploads(props)) {\n      /* @conditional-compile-remove(file-sharing) */\n      setFileUploadsPendingError({ message: strings.fileUploadsPendingError, timestamp: Date.now() });\n      return;\n    }\n\n    const message = textValue;\n    // we don't want to send empty messages including spaces, newlines, tabs\n    // Message can be empty if there is a valid file upload\n    if (!EMPTY_MESSAGE_REGEX.test(message) || hasFile(props)) {\n      onSendMessage && onSendMessage(sanitizeText(message));\n      setTextValue('');\n    }\n    sendTextFieldRef.current?.focus();\n  };\n\n  const setText = (newValue?: string | undefined): void => {\n    if (newValue === undefined) {\n      return;\n    }\n\n    if (newValue.length > MAXIMUM_LENGTH_OF_MESSAGE) {\n      setTextValueOverflow(true);\n    } else {\n      setTextValueOverflow(false);\n    }\n    setTextValue(newValue);\n  };\n\n  const textTooLongMessage = textValueOverflow ? strings.textTooLong : undefined;\n  const errorMessage = systemMessage ?? textTooLongMessage;\n\n  const mergedSendButtonStyle = useMemo(\n    () => mergeStyles(sendButtonStyle, styles?.sendMessageIconContainer),\n    [styles?.sendMessageIconContainer]\n  );\n\n  const mergedStyles = useMemo(() => concatStyleSets(styles), [styles]);\n\n  const hasText = !!textValue;\n  const hasTextOrFile = hasText || hasFile(props);\n\n  const mergedSendIconStyle = useMemo(\n    () =>\n      mergeStyles(\n        sendIconStyle,\n        {\n          color: !!errorMessage || !hasTextOrFile ? theme.palette.neutralTertiary : theme.palette.themePrimary\n        },\n        styles?.sendMessageIcon\n      ),\n    [errorMessage, hasTextOrFile, theme, styles?.sendMessageIcon]\n  );\n\n  const onRenderSendIcon = useCallback(\n    (isHover: boolean) =>\n      onRenderIcon ? (\n        onRenderIcon(isHover)\n      ) : (\n        <Icon iconName={isHover && textValue ? 'SendBoxSendHovered' : 'SendBoxSend'} className={mergedSendIconStyle} />\n      ),\n    [mergedSendIconStyle, onRenderIcon, textValue]\n  );\n\n  // Ensure that errors are cleared when there are no files in sendBox\n  React.useEffect(() => {\n    if (!activeFileUploads?.filter((upload) => !upload.error).length) {\n      setFileUploadsPendingError(undefined);\n    }\n  }, [activeFileUploads]);\n\n  const sendBoxErrorsProps = useMemo(() => {\n    return {\n      fileUploadsPendingError: fileUploadsPendingError,\n      fileUploadError: activeFileUploads?.filter((fileUpload) => fileUpload.error).pop()?.error\n    };\n  }, [activeFileUploads, fileUploadsPendingError]);\n\n  /* @conditional-compile-remove(file-sharing) */\n  const onRenderFileUploads = useCallback(() => {\n    if (!activeFileUploads?.filter((upload) => !upload.error).length) {\n      return null;\n    }\n    return props.onRenderFileUploads ? (\n      props.onRenderFileUploads()\n    ) : (\n      <Stack className={fileUploadCardsStyles}>\n        <_FileUploadCards\n          activeFileUploads={activeFileUploads}\n          onCancelFileUpload={props.onCancelFileUpload}\n          strings={{\n            removeFile: props.strings?.removeFile ?? localeStrings.removeFile,\n            uploading: props.strings?.uploading ?? localeStrings.uploading,\n            uploadCompleted: props.strings?.uploadCompleted ?? localeStrings.uploadCompleted\n          }}\n        />\n      </Stack>\n    );\n  }, [activeFileUploads, props, localeStrings]);\n\n  return (\n    <Stack\n      className={mergeStyles(\n        sendBoxWrapperStyles,\n        { overflow: 'visible' } // This is needed for the mention popup to be visible\n      )}\n    >\n      <SendBoxErrors {...sendBoxErrorsProps} />\n      <Stack\n        className={mergeStyles(\n          borderAndBoxShadowStyle({\n            theme,\n            hasErrorMessage: !!errorMessage,\n            disabled: !!disabled\n          })\n        )}\n      >\n        <InputBoxComponent\n          autoFocus={autoFocus}\n          data-ui-id={ids.sendboxTextField}\n          disabled={disabled}\n          errorMessage={onRenderSystemMessage ? onRenderSystemMessage(errorMessage) : errorMessage}\n          textFieldRef={sendTextFieldRef}\n          id=\"sendbox\"\n          placeholderText={strings.placeholderText}\n          textValue={textValue}\n          onChange={(_, newValue) => setText(newValue)}\n          onKeyDown={(ev) => {\n            const keyWasSendingMessage = ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline);\n            if (!keyWasSendingMessage) {\n              onTyping?.();\n            }\n          }}\n          onEnterKeyDown={() => {\n            sendMessageOnClick();\n          }}\n          styles={mergedStyles}\n          supportNewline={supportNewline}\n          maxLength={MAXIMUM_LENGTH_OF_MESSAGE}\n          /* @conditional-compile-remove(mention) */\n          mentionLookupOptions={mentionLookupOptions}\n        >\n          <InputBoxButton\n            onRenderIcon={onRenderSendIcon}\n            onClick={(e) => {\n              if (!textValueOverflow) {\n                sendMessageOnClick();\n              }\n              e.stopPropagation();\n            }}\n            id={'sendIconWrapper'}\n            className={mergedSendButtonStyle}\n            ariaLabel={localeStrings.sendButtonAriaLabel}\n            tooltipContent={localeStrings.sendButtonAriaLabel}\n          />\n        </InputBoxComponent>\n        {\n          /* @conditional-compile-remove(file-sharing) */\n          onRenderFileUploads()\n        }\n      </Stack>\n    </Stack>\n  );\n};\n\n/**\n * @private\n */\nconst hasIncompleteFileUploads = (props: SendBoxProps): boolean => {\n  const activeFileUploads = activeFileUploadsTrampoline(props);\n  return !!(\n    activeFileUploads?.length &&\n    !activeFileUploads.filter((fileUpload) => !fileUpload.error).every((fileUpload) => fileUpload.uploadComplete)\n  );\n};\n\nconst hasFile = (props: SendBoxProps): boolean => {\n  const activeFileUploads = activeFileUploadsTrampoline(props);\n  return !!activeFileUploads?.find((file) => !file.error);\n  return false;\n};\n\nconst sanitizeText = (message: string): string => {\n  if (EMPTY_MESSAGE_REGEX.test(message)) {\n    return '';\n  } else {\n    return message;\n  }\n};\n\nconst activeFileUploadsTrampoline = (props: SendBoxProps): ActiveFileUpload[] | undefined => {\n  /* @conditional-compile-remove(file-sharing) */\n  return props.activeFileUploads;\n  return [];\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"SendBoxErrorBar.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/SendBoxErrorBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAgCxC;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;IAC1E,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IACnD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC,CAAC;IACvE,sFAAsF;IACtF,8DAA8D;IAC9D,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,EAAO,CAAC;IAEvC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,eAAe,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC,CAAC;IAClC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,IAAI,cAAc,KAAK,SAAS,EAAE;YACzC,UAAU,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBACnC,eAAe,CAAC,SAAS,CAAC,CAAC;gBAC3B,SAAS,IAAI,SAAS,EAAE,CAAC;YAC3B,CAAC,EAAE,cAAc,CAAC,CAAC;SACpB;QACD,OAAO,GAAG,EAAE;YACV,UAAU,CAAC,OAAO,IAAI,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QACzD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,cAAc,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;IAEvC,IAAI,YAAY,EAAE;QAChB,OAAO,CACL;YACE,oBAAC,SAAS,IAAC,kBAAkB,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,GAAI;YACnE,oBAAC,UAAU,IACT,cAAc,EAAE,cAAc,CAAC,OAAO,EACtC,MAAM,EAAE;oBACN,aAAa,EAAE;wBACb,OAAO,EAAE,MAAM;qBAChB;iBACF,IAEA,YAAY,CACF,CACZ,CACJ,CAAC;KACH;SAAM;QACL,OAAO,yCAAK,CAAC;KACd;AACH,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageBar, MessageBarType } from '@fluentui/react';\nimport React, { useEffect } from 'react';\nimport { Announcer } from './Announcer';\n\n/**\n * @beta\n * Error to be displayed to the user in an error bar above sendbox.\n */\nexport interface SendBoxErrorBarError {\n  /** Error Message to be displayed */\n  message: string;\n  /**\n   * Unix Timestamp. Preferred generation using `Date.now()`\n   */\n  timestamp: number;\n}\n\n/**\n * @private\n */\nexport interface SendBoxErrorBarProps {\n  /** Error to render */\n  error?: SendBoxErrorBarError;\n  /**\n   * Automatically dismisses the error bar after the specified delay in ms.\n   * Example: `10 * 1000` would be 10 seconds\n   */\n  dismissAfterMs?: number;\n  /**\n   * Callback to invoke when the error bar is dismissed\n   */\n  onDismiss?: () => void;\n}\n\n/**\n * @private\n */\nexport const SendBoxErrorBar = (props: SendBoxErrorBarProps): JSX.Element => {\n  const { error, dismissAfterMs, onDismiss } = props;\n  const [errorMessage, setErrorMessage] = React.useState(error?.message);\n  // Using `any` because `NodeJS.Timeout` here will cause `declaration error` with jest.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const timeoutRef = React.useRef<any>();\n\n  React.useEffect(() => {\n    setErrorMessage(error?.message);\n  }, [error]);\n\n  useEffect(() => {\n    if (error && dismissAfterMs !== undefined) {\n      timeoutRef.current = setTimeout(() => {\n        setErrorMessage(undefined);\n        onDismiss && onDismiss();\n      }, dismissAfterMs);\n    }\n    return () => {\n      timeoutRef.current && clearTimeout(timeoutRef.current);\n    };\n  }, [dismissAfterMs, onDismiss, error]);\n\n  if (errorMessage) {\n    return (\n      <>\n        <Announcer announcementString={errorMessage} ariaLive={'polite'} />\n        <MessageBar\n          messageBarType={MessageBarType.warning}\n          styles={{\n            iconContainer: {\n              display: 'none'\n            }\n          }}\n        >\n          {errorMessage}\n        </MessageBar>\n      </>\n    );\n  } else {\n    return <></>;\n  }\n};\n"]}
+{"version":3,"file":"SendBoxErrorBar.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/SendBoxErrorBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAgCxC;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;IAC1E,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IACnD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC,CAAC;IACvE,sFAAsF;IACtF,8DAA8D;IAC9D,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,EAAO,CAAC;IAEvC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,eAAe,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC,CAAC;IAClC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,IAAI,cAAc,KAAK,SAAS,EAAE,CAAC;YAC1C,UAAU,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBACnC,eAAe,CAAC,SAAS,CAAC,CAAC;gBAC3B,SAAS,IAAI,SAAS,EAAE,CAAC;YAC3B,CAAC,EAAE,cAAc,CAAC,CAAC;QACrB,CAAC;QACD,OAAO,GAAG,EAAE;YACV,UAAU,CAAC,OAAO,IAAI,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QACzD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,cAAc,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;IAEvC,IAAI,YAAY,EAAE,CAAC;QACjB,OAAO,CACL;YACE,oBAAC,SAAS,IAAC,kBAAkB,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,GAAI;YACnE,oBAAC,UAAU,IACT,cAAc,EAAE,cAAc,CAAC,OAAO,EACtC,MAAM,EAAE;oBACN,aAAa,EAAE;wBACb,OAAO,EAAE,MAAM;qBAChB;iBACF,IAEA,YAAY,CACF,CACZ,CACJ,CAAC;IACJ,CAAC;SAAM,CAAC;QACN,OAAO,yCAAK,CAAC;IACf,CAAC;AACH,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageBar, MessageBarType } from '@fluentui/react';\nimport React, { useEffect } from 'react';\nimport { Announcer } from './Announcer';\n\n/**\n * @beta\n * Error to be displayed to the user in an error bar above sendbox.\n */\nexport interface SendBoxErrorBarError {\n  /** Error Message to be displayed */\n  message: string;\n  /**\n   * Unix Timestamp. Preferred generation using `Date.now()`\n   */\n  timestamp: number;\n}\n\n/**\n * @private\n */\nexport interface SendBoxErrorBarProps {\n  /** Error to render */\n  error?: SendBoxErrorBarError;\n  /**\n   * Automatically dismisses the error bar after the specified delay in ms.\n   * Example: `10 * 1000` would be 10 seconds\n   */\n  dismissAfterMs?: number;\n  /**\n   * Callback to invoke when the error bar is dismissed\n   */\n  onDismiss?: () => void;\n}\n\n/**\n * @private\n */\nexport const SendBoxErrorBar = (props: SendBoxErrorBarProps): JSX.Element => {\n  const { error, dismissAfterMs, onDismiss } = props;\n  const [errorMessage, setErrorMessage] = React.useState(error?.message);\n  // Using `any` because `NodeJS.Timeout` here will cause `declaration error` with jest.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const timeoutRef = React.useRef<any>();\n\n  React.useEffect(() => {\n    setErrorMessage(error?.message);\n  }, [error]);\n\n  useEffect(() => {\n    if (error && dismissAfterMs !== undefined) {\n      timeoutRef.current = setTimeout(() => {\n        setErrorMessage(undefined);\n        onDismiss && onDismiss();\n      }, dismissAfterMs);\n    }\n    return () => {\n      timeoutRef.current && clearTimeout(timeoutRef.current);\n    };\n  }, [dismissAfterMs, onDismiss, error]);\n\n  if (errorMessage) {\n    return (\n      <>\n        <Announcer announcementString={errorMessage} ariaLive={'polite'} />\n        <MessageBar\n          messageBarType={MessageBarType.warning}\n          styles={{\n            iconContainer: {\n              display: 'none'\n            }\n          }}\n        >\n          {errorMessage}\n        </MessageBar>\n      </>\n    );\n  } else {\n    return <></>;\n  }\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"SendBoxErrors.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/SendBoxErrors.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAwB,MAAM,mBAAmB,CAAC;AAU1E;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAe,EAAE;IACtE,MAAM,EAAE,eAAe,EAAE,uBAAuB,EAAE,GAAG,KAAK,CAAC;IAE3D,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACxC,IAAI,eAAe,IAAI,uBAAuB,EAAE;YAC9C,OAAO,eAAe,CAAC,SAAS,GAAG,uBAAuB,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,uBAAuB,CAAC;SAClH;QACD,OAAO,eAAe,IAAI,uBAAuB,CAAC;IACpD,CAAC,EAAE,CAAC,eAAe,EAAE,uBAAuB,CAAC,CAAC,CAAC;IAE/C,OAAO,oBAAC,eAAe,IAAC,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,EAAE,GAAG,IAAI,GAAI,CAAC;AAC/E,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { SendBoxErrorBar, SendBoxErrorBarError } from './SendBoxErrorBar';\n\n/**\n * @private\n */\nexport interface SendBoxErrorsProps {\n  fileUploadsPendingError?: SendBoxErrorBarError;\n  fileUploadError?: SendBoxErrorBarError;\n}\n\n/**\n * @private\n */\nexport const SendBoxErrors = (props: SendBoxErrorsProps): JSX.Element => {\n  const { fileUploadError, fileUploadsPendingError } = props;\n\n  const errorToDisplay = React.useMemo(() => {\n    if (fileUploadError && fileUploadsPendingError) {\n      return fileUploadError.timestamp > fileUploadsPendingError.timestamp ? fileUploadError : fileUploadsPendingError;\n    }\n    return fileUploadError || fileUploadsPendingError;\n  }, [fileUploadError, fileUploadsPendingError]);\n\n  return <SendBoxErrorBar error={errorToDisplay} dismissAfterMs={10 * 1000} />;\n};\n"]}
+{"version":3,"file":"SendBoxErrors.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/SendBoxErrors.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAwB,MAAM,mBAAmB,CAAC;AAU1E;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAe,EAAE;IACtE,MAAM,EAAE,eAAe,EAAE,uBAAuB,EAAE,GAAG,KAAK,CAAC;IAE3D,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACxC,IAAI,eAAe,IAAI,uBAAuB,EAAE,CAAC;YAC/C,OAAO,eAAe,CAAC,SAAS,GAAG,uBAAuB,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,uBAAuB,CAAC;QACnH,CAAC;QACD,OAAO,eAAe,IAAI,uBAAuB,CAAC;IACpD,CAAC,EAAE,CAAC,eAAe,EAAE,uBAAuB,CAAC,CAAC,CAAC;IAE/C,OAAO,oBAAC,eAAe,IAAC,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,EAAE,GAAG,IAAI,GAAI,CAAC;AAC/E,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { SendBoxErrorBar, SendBoxErrorBarError } from './SendBoxErrorBar';\n\n/**\n * @private\n */\nexport interface SendBoxErrorsProps {\n  fileUploadsPendingError?: SendBoxErrorBarError;\n  fileUploadError?: SendBoxErrorBarError;\n}\n\n/**\n * @private\n */\nexport const SendBoxErrors = (props: SendBoxErrorsProps): JSX.Element => {\n  const { fileUploadError, fileUploadsPendingError } = props;\n\n  const errorToDisplay = React.useMemo(() => {\n    if (fileUploadError && fileUploadsPendingError) {\n      return fileUploadError.timestamp > fileUploadsPendingError.timestamp ? fileUploadError : fileUploadsPendingError;\n    }\n    return fileUploadError || fileUploadsPendingError;\n  }, [fileUploadError, fileUploadsPendingError]);\n\n  return <SendBoxErrorBar error={errorToDisplay} dismissAfterMs={10 * 1000} />;\n};\n"]}

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

@@ -5,7 +5,7 @@ import { ControlBarButtonProps } from './ControlBarButton';
  *
  * @internal
  */
-export declare type _captionsOptions = {
+export type _captionsOptions = {
     spokenLanguage: string;
 };
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"StartCaptionsButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/StartCaptionsButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAC7E,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AA+DhD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAgC,EAAe,EAAE;IACpF,MAAM,EAAE,eAAe,EAAE,cAAc,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAEvG,MAAM,iBAAiB,GAAG,GAAgB,EAAE;QAC1C,iDAAiD;QACjD,OAAO,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,cAAc,GAAG,CAAC;QACpF,OAAO,yCAAK,CAAC;IACf,CAAC,CAAC;IACF,MAAM,eAAe,GAAG,GAAgB,EAAE;QACxC,iDAAiD;QACjD,OAAO,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,iBAAiB,GAAG,CAAC;QACvF,OAAO,yCAAK,CAAC;IACf,CAAC,CAAC;IAEF,MAAM,OAAO,GAAqB,OAAO,CAAC,GAAG,EAAE;QAC7C,OAAO,EAAE,cAAc,EAAE,qBAAqB,KAAK,EAAE,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,EAAE,CAAC;IAC1G,CAAC,EAAE,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAE5B,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExE,MAAM,qBAAqB,GAAG,WAAW,CAAC,GAAwB,EAAE;QAClE,IAAI,KAAK,CAAC,OAAO,EAAE;YACjB,cAAc,EAAE,CAAC;SAClB;aAAM;YACL,MAAM,eAAe,CAAC,OAAO,CAAC,CAAC;SAChC;IACH,CAAC,CAAA,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,OAAO,CAAC,CAAC,CAAC;IAE9D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,OAAO,IAAI,CAAC,oBAAoB,EAAE;YAC1C,4EAA4E;YAC5E,iIAAiI;YACjI,mBAAmB,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;YAC5C,6EAA6E;YAC7E,uBAAuB,CAAC,IAAI,CAAC,CAAC;SAC/B;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,mBAAmB,EAAE,OAAO,CAAC,cAAc,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAEvF,OAAO,CACL,oBAAC,gBAAgB,oBACX,KAAK,IACT,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,qBAAqB,aAArB,qBAAqB,cAArB,qBAAqB,GAAI,KAAK,CAAC,OAAO,EAC/C,cAAc,EAAE,iBAAiB,EACjC,eAAe,EAAE,eAAe,IAChC,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { defaultSpokenLanguage } from './utils';\n\n/**\n * options bag to start captions\n *\n * @internal\n */\nexport type _captionsOptions = {\n  spokenLanguage: string;\n};\n\n/**\n *@internal\n */\nexport interface _StartCaptionsButtonProps extends ControlBarButtonProps {\n  /**\n   * Utility property for using this component with communication react handlers\n   * Start captions based on captions state\n   */\n  onStartCaptions: (options?: _captionsOptions) => Promise<void>;\n  /**\n   * Utility property for using this component with communication react handlers\n   * Stop captions based on captions state\n   */\n  onStopCaptions: () => Promise<void>;\n  /**\n   * Utility property for using this component with communication react handlers\n   * set captions spoken language\n   */\n  onSetSpokenLanguage: (language: string) => Promise<void>;\n  /**\n   * Spoken language set for starting captions\n   */\n  currentSpokenLanguage: string;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: _StartCaptionsButtonStrings;\n}\n\n/**\n * Strings for the hold button labels\n * @internal\n */\nexport interface _StartCaptionsButtonStrings {\n  /**\n   * Label for when action is to start Captions\n   */\n  onLabel: string;\n  /**\n   * Label for when action is to stop Captions\n   */\n  offLabel: string;\n  /**\n   * Content for when button is checked, captions is on\n   */\n  tooltipOnContent: string;\n  /**\n   * Content for when button is unchecked, captions is off\n   */\n  tooltipOffContent: string;\n}\n\n/**\n * a button to start or stop captions\n *\n * Can be used with {@link ControlBar}\n *\n * @param props - properties for the start captions button.\n * @internal\n */\nexport const _StartCaptionsButton = (props: _StartCaptionsButtonProps): JSX.Element => {\n  const { onStartCaptions, onStopCaptions, onSetSpokenLanguage, currentSpokenLanguage, strings } = props;\n\n  const onRenderStartIcon = (): JSX.Element => {\n    /* @conditional-compile-remove(close-captions) */\n    return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"CaptionsIcon\" />;\n    return <></>;\n  };\n  const onRenderOffIcon = (): JSX.Element => {\n    /* @conditional-compile-remove(close-captions) */\n    return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"CaptionsOffIcon\" />;\n    return <></>;\n  };\n\n  const options: _captionsOptions = useMemo(() => {\n    return { spokenLanguage: currentSpokenLanguage === '' ? defaultSpokenLanguage : currentSpokenLanguage };\n  }, [currentSpokenLanguage]);\n\n  const [hasSetSpokenLanguage, setHasSetSpokenLanguage] = useState(false);\n\n  const onToggleStartCaptions = useCallback(async (): Promise<void> => {\n    if (props.checked) {\n      onStopCaptions();\n    } else {\n      await onStartCaptions(options);\n    }\n  }, [props.checked, onStartCaptions, onStopCaptions, options]);\n\n  useEffect(() => {\n    if (props.checked && !hasSetSpokenLanguage) {\n      // set spoken language when start captions with a spoken language specified.\n      // this is to fix the bug when a second user starts captions with a new spoken language, captions bot ignore that spoken language\n      onSetSpokenLanguage(options.spokenLanguage);\n      // we only need to call set spoken language once when first starting captions\n      setHasSetSpokenLanguage(true);\n    }\n  }, [props.checked, onSetSpokenLanguage, options.spokenLanguage, hasSetSpokenLanguage]);\n\n  return (\n    <ControlBarButton\n      {...props}\n      strings={strings}\n      onClick={onToggleStartCaptions ?? props.onClick}\n      onRenderOnIcon={onRenderStartIcon}\n      onRenderOffIcon={onRenderOffIcon}\n    />\n  );\n};\n"]}
+{"version":3,"file":"StartCaptionsButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/StartCaptionsButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAC7E,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AA+DhD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAgC,EAAe,EAAE;IACpF,MAAM,EAAE,eAAe,EAAE,cAAc,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAEvG,MAAM,iBAAiB,GAAG,GAAgB,EAAE;QAC1C,iDAAiD;QACjD,OAAO,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,cAAc,GAAG,CAAC;QACpF,OAAO,yCAAK,CAAC;IACf,CAAC,CAAC;IACF,MAAM,eAAe,GAAG,GAAgB,EAAE;QACxC,iDAAiD;QACjD,OAAO,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,iBAAiB,GAAG,CAAC;QACvF,OAAO,yCAAK,CAAC;IACf,CAAC,CAAC;IAEF,MAAM,OAAO,GAAqB,OAAO,CAAC,GAAG,EAAE;QAC7C,OAAO,EAAE,cAAc,EAAE,qBAAqB,KAAK,EAAE,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,EAAE,CAAC;IAC1G,CAAC,EAAE,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAE5B,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExE,MAAM,qBAAqB,GAAG,WAAW,CAAC,GAAwB,EAAE;QAClE,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;YAClB,cAAc,EAAE,CAAC;QACnB,CAAC;aAAM,CAAC;YACN,MAAM,eAAe,CAAC,OAAO,CAAC,CAAC;QACjC,CAAC;IACH,CAAC,CAAA,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,OAAO,CAAC,CAAC,CAAC;IAE9D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,OAAO,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC3C,4EAA4E;YAC5E,iIAAiI;YACjI,mBAAmB,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;YAC5C,6EAA6E;YAC7E,uBAAuB,CAAC,IAAI,CAAC,CAAC;QAChC,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,mBAAmB,EAAE,OAAO,CAAC,cAAc,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAEvF,OAAO,CACL,oBAAC,gBAAgB,oBACX,KAAK,IACT,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,qBAAqB,aAArB,qBAAqB,cAArB,qBAAqB,GAAI,KAAK,CAAC,OAAO,EAC/C,cAAc,EAAE,iBAAiB,EACjC,eAAe,EAAE,eAAe,IAChC,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { defaultSpokenLanguage } from './utils';\n\n/**\n * options bag to start captions\n *\n * @internal\n */\nexport type _captionsOptions = {\n  spokenLanguage: string;\n};\n\n/**\n *@internal\n */\nexport interface _StartCaptionsButtonProps extends ControlBarButtonProps {\n  /**\n   * Utility property for using this component with communication react handlers\n   * Start captions based on captions state\n   */\n  onStartCaptions: (options?: _captionsOptions) => Promise<void>;\n  /**\n   * Utility property for using this component with communication react handlers\n   * Stop captions based on captions state\n   */\n  onStopCaptions: () => Promise<void>;\n  /**\n   * Utility property for using this component with communication react handlers\n   * set captions spoken language\n   */\n  onSetSpokenLanguage: (language: string) => Promise<void>;\n  /**\n   * Spoken language set for starting captions\n   */\n  currentSpokenLanguage: string;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: _StartCaptionsButtonStrings;\n}\n\n/**\n * Strings for the hold button labels\n * @internal\n */\nexport interface _StartCaptionsButtonStrings {\n  /**\n   * Label for when action is to start Captions\n   */\n  onLabel: string;\n  /**\n   * Label for when action is to stop Captions\n   */\n  offLabel: string;\n  /**\n   * Content for when button is checked, captions is on\n   */\n  tooltipOnContent: string;\n  /**\n   * Content for when button is unchecked, captions is off\n   */\n  tooltipOffContent: string;\n}\n\n/**\n * a button to start or stop captions\n *\n * Can be used with {@link ControlBar}\n *\n * @param props - properties for the start captions button.\n * @internal\n */\nexport const _StartCaptionsButton = (props: _StartCaptionsButtonProps): JSX.Element => {\n  const { onStartCaptions, onStopCaptions, onSetSpokenLanguage, currentSpokenLanguage, strings } = props;\n\n  const onRenderStartIcon = (): JSX.Element => {\n    /* @conditional-compile-remove(close-captions) */\n    return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"CaptionsIcon\" />;\n    return <></>;\n  };\n  const onRenderOffIcon = (): JSX.Element => {\n    /* @conditional-compile-remove(close-captions) */\n    return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"CaptionsOffIcon\" />;\n    return <></>;\n  };\n\n  const options: _captionsOptions = useMemo(() => {\n    return { spokenLanguage: currentSpokenLanguage === '' ? defaultSpokenLanguage : currentSpokenLanguage };\n  }, [currentSpokenLanguage]);\n\n  const [hasSetSpokenLanguage, setHasSetSpokenLanguage] = useState(false);\n\n  const onToggleStartCaptions = useCallback(async (): Promise<void> => {\n    if (props.checked) {\n      onStopCaptions();\n    } else {\n      await onStartCaptions(options);\n    }\n  }, [props.checked, onStartCaptions, onStopCaptions, options]);\n\n  useEffect(() => {\n    if (props.checked && !hasSetSpokenLanguage) {\n      // set spoken language when start captions with a spoken language specified.\n      // this is to fix the bug when a second user starts captions with a new spoken language, captions bot ignore that spoken language\n      onSetSpokenLanguage(options.spokenLanguage);\n      // we only need to call set spoken language once when first starting captions\n      setHasSetSpokenLanguage(true);\n    }\n  }, [props.checked, onSetSpokenLanguage, options.spokenLanguage, hasSetSpokenLanguage]);\n\n  return (\n    <ControlBarButton\n      {...props}\n      strings={strings}\n      onClick={onToggleStartCaptions ?? props.onClick}\n      onRenderOnIcon={onRenderStartIcon}\n      onRenderOffIcon={onRenderOffIcon}\n    />\n  );\n};\n"]}

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

@@ -4,7 +4,7 @@ import { BaseCustomStyles } from '../types';
  * Whether the stream is loading or not.
  * @public
  */
-export declare type LoadingState = 'loading' | 'none';
+export type LoadingState = 'loading' | 'none';
 /**
  * Props for {@link StreamMedia}.
  *

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

@@ -1 +1 @@
-{"version":3,"file":"StreamMedia.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/StreamMedia.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EACL,uBAAuB,EACvB,cAAc,EACd,SAAS,EACT,uBAAuB,EACvB,iBAAiB,EAClB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AA+BtC;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAe,EAAE;IAClE,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACjD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,EAAE,YAAY,GAAG,MAAM,EAAE,GAAG,KAAK,CAAC;IAChF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,WAAW,CAAC,OAAO,CAAC;QACtC,IAAI,CAAC,SAAS,EAAE;YACd,OAAO;SACR;QAED,kHAAkH;QAClH,mHAAmH;QACnH,+BAA+B;QAC/B,SAAS,CAAC,SAAS,GAAG,EAAE,CAAC;QACzB,aAAa,CAAC,KAAK,CAAC,CAAC;QACrB,IAAI,kBAAkB,EAAE;YACtB,kBAAkB,CAAC,gBAAgB,CAAC,uBAAuB,EAAE,GAAG,EAAE;gBAChE,aAAa,CAAC,IAAI,CAAC,CAAC;YACtB,CAAC,CAAC,CAAC;YACH,kBAAkB,CAAC,gBAAgB,CAAC,uBAAuB,EAAE,GAAG,EAAE;gBAChE,aAAa,CAAC,KAAK,CAAC,CAAC;YACvB,CAAC,CAAC,CAAC;YACH,SAAS,CAAC,WAAW,CAAC,kBAAkB,CAAC,CAAC;SAC3C;QAED,OAAO,GAAG,EAAE;YACV,SAAS,CAAC,SAAS,GAAG,EAAE,CAAC;YACzB,aAAa,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAEzB,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE;QACzB,2CACa,wBAAwB,EACnC,SAAS,EAAE,WAAW,CACpB,UAAU,IAAI,UAAU,CAAC,CAAC,CAAC,uBAAuB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,EACjF,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CACb,EACD,GAAG,EAAE,WAAW,GAChB;QACD,YAAY,KAAK,SAAS,IAAI,CAC7B,6BAAK,SAAS,EAAE,uBAAuB,EAAE;YACvC,oBAAC,OAAO,kBAAY,8BAA8B,EAAC,MAAM,EAAE,iBAAiB,GAAI,CAC5E,CACP,CACG,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, Spinner } from '@fluentui/react';\nimport React, { useEffect, useRef, useState } from 'react';\nimport {\n  invertedVideoInPipStyle,\n  mediaContainer,\n  container,\n  loadingSpinnerContainer,\n  loadSpinnerStyles\n} from './styles/StreamMedia.styles';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles } from '../types';\n\n/**\n * Whether the stream is loading or not.\n * @public\n */\nexport type LoadingState = 'loading' | 'none';\n\n/**\n * Props for {@link StreamMedia}.\n *\n * @public\n */\nexport interface StreamMediaProps {\n  /** Video stream element to render. */\n  videoStreamElement: HTMLElement | null;\n  /** Decides whether to mirror the video or not. */\n  isMirrored?: boolean;\n  /** Whether the stream is loading data */\n  loadingState?: LoadingState;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <StreamMedia styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: BaseCustomStyles;\n}\n\n/**\n * Utility component to convert an HTMLElement with a video stream into a JSX element.\n *\n * Use to convert an HTMLElement returned by headless calling API into a component that can be rendered as a {@link VideoTile}.\n *\n * @public\n */\nexport const StreamMedia = (props: StreamMediaProps): JSX.Element => {\n  const containerEl = useRef<HTMLDivElement>(null);\n  const theme = useTheme();\n\n  const { isMirrored, videoStreamElement, styles, loadingState = 'none' } = props;\n  const [pipEnabled, setPipEnabled] = useState(false);\n\n  useEffect(() => {\n    const container = containerEl.current;\n    if (!container) {\n      return;\n    }\n\n    // If videoStreamElement changes, we clear the container to make sure we don't have duplicate, and replace it with\n    // the new videoStreamElement. If videoStreamElement is undefined nothing is appended and container should be empty\n    // and we don't render anyting.\n    container.innerHTML = '';\n    setPipEnabled(false);\n    if (videoStreamElement) {\n      videoStreamElement.addEventListener('enterpictureinpicture', () => {\n        setPipEnabled(true);\n      });\n      videoStreamElement.addEventListener('leavepictureinpicture', () => {\n        setPipEnabled(false);\n      });\n      container.appendChild(videoStreamElement);\n    }\n\n    return () => {\n      container.innerHTML = '';\n      setPipEnabled(false);\n    };\n  }, [videoStreamElement]);\n\n  return (\n    <div className={container()}>\n      <div\n        data-ui-id=\"stream-media-container\"\n        className={mergeStyles(\n          isMirrored && pipEnabled ? invertedVideoInPipStyle(theme) : mediaContainer(theme),\n          styles?.root\n        )}\n        ref={containerEl}\n      />\n      {loadingState === 'loading' && (\n        <div className={loadingSpinnerContainer()}>\n          <Spinner data-ui-id=\"stream-media-loading-spinner\" styles={loadSpinnerStyles} />\n        </div>\n      )}\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"StreamMedia.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/StreamMedia.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EACL,uBAAuB,EACvB,cAAc,EACd,SAAS,EACT,uBAAuB,EACvB,iBAAiB,EAClB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AA+BtC;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAe,EAAE;IAClE,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACjD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,EAAE,YAAY,GAAG,MAAM,EAAE,GAAG,KAAK,CAAC;IAChF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,WAAW,CAAC,OAAO,CAAC;QACtC,IAAI,CAAC,SAAS,EAAE,CAAC;YACf,OAAO;QACT,CAAC;QAED,kHAAkH;QAClH,mHAAmH;QACnH,+BAA+B;QAC/B,SAAS,CAAC,SAAS,GAAG,EAAE,CAAC;QACzB,aAAa,CAAC,KAAK,CAAC,CAAC;QACrB,IAAI,kBAAkB,EAAE,CAAC;YACvB,kBAAkB,CAAC,gBAAgB,CAAC,uBAAuB,EAAE,GAAG,EAAE;gBAChE,aAAa,CAAC,IAAI,CAAC,CAAC;YACtB,CAAC,CAAC,CAAC;YACH,kBAAkB,CAAC,gBAAgB,CAAC,uBAAuB,EAAE,GAAG,EAAE;gBAChE,aAAa,CAAC,KAAK,CAAC,CAAC;YACvB,CAAC,CAAC,CAAC;YACH,SAAS,CAAC,WAAW,CAAC,kBAAkB,CAAC,CAAC;QAC5C,CAAC;QAED,OAAO,GAAG,EAAE;YACV,SAAS,CAAC,SAAS,GAAG,EAAE,CAAC;YACzB,aAAa,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAEzB,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE;QACzB,2CACa,wBAAwB,EACnC,SAAS,EAAE,WAAW,CACpB,UAAU,IAAI,UAAU,CAAC,CAAC,CAAC,uBAAuB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,EACjF,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CACb,EACD,GAAG,EAAE,WAAW,GAChB;QACD,YAAY,KAAK,SAAS,IAAI,CAC7B,6BAAK,SAAS,EAAE,uBAAuB,EAAE;YACvC,oBAAC,OAAO,kBAAY,8BAA8B,EAAC,MAAM,EAAE,iBAAiB,GAAI,CAC5E,CACP,CACG,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, Spinner } from '@fluentui/react';\nimport React, { useEffect, useRef, useState } from 'react';\nimport {\n  invertedVideoInPipStyle,\n  mediaContainer,\n  container,\n  loadingSpinnerContainer,\n  loadSpinnerStyles\n} from './styles/StreamMedia.styles';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles } from '../types';\n\n/**\n * Whether the stream is loading or not.\n * @public\n */\nexport type LoadingState = 'loading' | 'none';\n\n/**\n * Props for {@link StreamMedia}.\n *\n * @public\n */\nexport interface StreamMediaProps {\n  /** Video stream element to render. */\n  videoStreamElement: HTMLElement | null;\n  /** Decides whether to mirror the video or not. */\n  isMirrored?: boolean;\n  /** Whether the stream is loading data */\n  loadingState?: LoadingState;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <StreamMedia styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: BaseCustomStyles;\n}\n\n/**\n * Utility component to convert an HTMLElement with a video stream into a JSX element.\n *\n * Use to convert an HTMLElement returned by headless calling API into a component that can be rendered as a {@link VideoTile}.\n *\n * @public\n */\nexport const StreamMedia = (props: StreamMediaProps): JSX.Element => {\n  const containerEl = useRef<HTMLDivElement>(null);\n  const theme = useTheme();\n\n  const { isMirrored, videoStreamElement, styles, loadingState = 'none' } = props;\n  const [pipEnabled, setPipEnabled] = useState(false);\n\n  useEffect(() => {\n    const container = containerEl.current;\n    if (!container) {\n      return;\n    }\n\n    // If videoStreamElement changes, we clear the container to make sure we don't have duplicate, and replace it with\n    // the new videoStreamElement. If videoStreamElement is undefined nothing is appended and container should be empty\n    // and we don't render anyting.\n    container.innerHTML = '';\n    setPipEnabled(false);\n    if (videoStreamElement) {\n      videoStreamElement.addEventListener('enterpictureinpicture', () => {\n        setPipEnabled(true);\n      });\n      videoStreamElement.addEventListener('leavepictureinpicture', () => {\n        setPipEnabled(false);\n      });\n      container.appendChild(videoStreamElement);\n    }\n\n    return () => {\n      container.innerHTML = '';\n      setPipEnabled(false);\n    };\n  }, [videoStreamElement]);\n\n  return (\n    <div className={container()}>\n      <div\n        data-ui-id=\"stream-media-container\"\n        className={mergeStyles(\n          isMirrored && pipEnabled ? invertedVideoInPipStyle(theme) : mediaContainer(theme),\n          styles?.root\n        )}\n        ref={containerEl}\n      />\n      {loadingState === 'loading' && (\n        <div className={loadingSpinnerContainer()}>\n          <Spinner data-ui-id=\"stream-media-loading-spinner\" styles={loadSpinnerStyles} />\n        </div>\n      )}\n    </div>\n  );\n};\n"]}

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

@@ -5,11 +5,11 @@ import { ComponentSlotStyle } from '../types';
  *
  * @private
  */
-export declare type SystemMessageIconTypes = 'PeopleAdd' | 'PeopleBlock' | 'Edit';
+export type SystemMessageIconTypes = 'PeopleAdd' | 'PeopleBlock' | 'Edit';
 /**
  * @private
  */
-export declare type SystemMessageProps = {
+export type SystemMessageProps = {
     /**
      * Icon name for the system message.
      */

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

@@ -26,7 +26,7 @@ export declare const TextFieldWithMention: (props: TextFieldWithMentionProps) =>
  *
  * @private
  */
-export declare type InputBoxButtonProps = {
+export type InputBoxButtonProps = {
     onRenderIcon: (isHover: boolean) => JSX.Element;
     onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     className?: string;