@azure/communication-react 1.4.0 → 1.4.2-alpha-202211020017.0

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

@@ -1 +1 @@
-{"version":3,"file":"ParticipantsButton.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ParticipantsButton.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ParticipantsButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ParticipantsButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n  ContextualMenuItemType,\n  IContextualMenuItem,\n  IContextualMenuProps,\n  IContextualMenuStyles,\n  IContextualMenuItemStyles,\n  merge\n} from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport copy from 'copy-to-clipboard';\nimport React, { useCallback, useMemo } from 'react';\nimport {\n  ParticipantList,\n  ParticipantListProps,\n  ParticipantListStyles,\n  ParticipantMenuItemsCallback\n} from './ParticipantList';\nimport { participantsButtonMenuPropsStyle } from './styles/ControlBar.styles';\nimport { useLocale } from '../localization';\nimport { ControlBarButton, ControlBarButtonProps, ControlBarButtonStyles } from './ControlBarButton';\nimport { useIdentifiers } from '../identifiers';\nimport { CommunicationParticipant } from '../types/CommunicationParticipant';\nimport { OnRenderAvatarCallback } from '../types/OnRender';\nimport { ParticipantListParticipant } from '../types';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(rooms) */\nimport { _usePermissions } from '../permissions/PermissionsProvider';\n\n/**\n * Styles for the {@link ParticipantsButton} menu.\n *\n * @public\n */\nexport interface ParticipantsButtonContextualMenuStyles extends IContextualMenuStyles {\n  /** Styles for the {@link ParticipantsButton} menu items. */\n  menuItemStyles?: IContextualMenuItemStyles;\n  /** Styles for the {@link ParticipantList} menu item inside the {@link ParticipantsButton} menu. */\n  participantListStyles?: ParticipantListStyles;\n}\n\n/**\n * Styles Props for {@link ParticipantsButton}.\n *\n * @public\n */\nexport interface ParticipantsButtonStyles extends ControlBarButtonStyles {\n  /** Styles of the {@link ParticipantsButton} menu flyout */\n  menuStyles?: Partial<ParticipantsButtonContextualMenuStyles>;\n}\n\n/**\n * Strings of {@link ParticipantsButton} that can be overridden.\n *\n * @public\n */\nexport interface ParticipantsButtonStrings {\n  /**\n   * Label of button\n   */\n  label: string;\n  /**\n   * Button tooltip content.\n   */\n  tooltipContent?: string;\n  /**\n   * Header of menu pop up\n   */\n  menuHeader: string;\n  /**\n   * Label of menu button to show list of participants. Placeholders: [numParticipants]\n   */\n  participantsListButtonLabel: string;\n  /**\n   * Label of menu button to copy invite link\n   */\n  copyInviteLinkButtonLabel: string;\n  /**\n   * Label of menu button to mute all participants\n   */\n  muteAllButtonLabel: string;\n}\n\n/**\n * Props for {@link ParticipantsButton}.\n *\n * @public\n */\nexport interface ParticipantsButtonProps extends ControlBarButtonProps {\n  /**\n   * Participants in user call or chat\n   */\n  participants: ParticipantListParticipant[];\n  /**\n   * User ID of user\n   */\n  myUserId?: string;\n  /**\n   * If set to `true`, excludes the local participant from the participant list with use of `myUserId` props (required in this case).\n   *\n   * @defaultValue `false`\n   */\n  excludeMe?: boolean;\n  /**\n   * Callback to render each participant. If no callback is provided, each participant will be rendered with `ParticipantItem`\n   */\n  onRenderParticipant?: (participant: CommunicationParticipant) => JSX.Element | null;\n  /**\n   * Callback to render the avatar for each participant. This property will have no effect if `onRenderParticipant` is assigned.\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /**\n   * Callback to render the context menu for each participant\n   */\n  onRemoveParticipant?: (userId: string) => void;\n  /**\n   * Callback to render custom menu items for each participant.\n   */\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  /**\n   * Optional callback to render a custom participant list.\n   */\n  onRenderParticipantList?: (props: ParticipantListProps) => JSX.Element | null;\n  /**\n   * Allows users to pass an object containing custom CSS styles.\n   * @Example\n   * ```\n   * <ParticipantsButton styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: ParticipantsButtonStyles;\n  /**\n   * URL to invite new participants to the current call\n   */\n  callInvitationURL?: string;\n  /**\n   * CallBack to mute all remote participants\n   */\n  onMuteAll?: () => void;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<ParticipantsButtonStrings>;\n  /** prop to determine if we should show tooltip for participants or not */\n  showParticipantOverflowTooltip?: boolean;\n}\n\n/**\n * A button to show a menu with calling or chat participants.\n *\n * Can be used with {@link ControlBar}.\n *\n * This button contains dropdown menu items defined through its property `menuProps`. By default, it can display the number of remote participants with the full list\n * as sub-menu and an option to mute all participants, as well as a copy-to-clipboard button to copy the call invitation URL.\n * This `menuProps` can be fully redefined and its property is of type [IContextualMenuProps](https://developer.microsoft.com/fluentui#/controls/web/contextualmenu#IContextualMenuProps).\n *\n * @public\n */\nexport const ParticipantsButton = (props: ParticipantsButtonProps): JSX.Element => {\n  const {\n    callInvitationURL,\n    styles,\n    onMuteAll,\n    onRenderIcon,\n    onRenderParticipantList,\n    participants,\n    myUserId,\n    excludeMe,\n    onRenderParticipant,\n    onRenderAvatar,\n    onRemoveParticipant,\n    onFetchParticipantMenuItems,\n    showParticipantOverflowTooltip\n  } = props;\n\n  const disabled = props.disabled;\n\n  const onRenderPeopleIcon = (): JSX.Element => (\n    <_HighContrastAwareIcon disabled={disabled} iconName=\"ControlButtonParticipants\" />\n  );\n\n  const ids = useIdentifiers();\n\n  const onMuteAllCallback = useCallback(() => {\n    if (onMuteAll) {\n      onMuteAll();\n    }\n  }, [onMuteAll]);\n\n  const defaultParticipantList = useCallback(() => {\n    return (\n      <ParticipantList\n        participants={participants}\n        myUserId={myUserId}\n        excludeMe={excludeMe}\n        onRenderParticipant={onRenderParticipant}\n        onRenderAvatar={onRenderAvatar}\n        onRemoveParticipant={onRemoveParticipant}\n        onFetchParticipantMenuItems={onFetchParticipantMenuItems}\n        styles={styles?.menuStyles?.participantListStyles}\n        showParticipantOverflowTooltip={showParticipantOverflowTooltip}\n      />\n    );\n  }, [\n    excludeMe,\n    myUserId,\n    onRemoveParticipant,\n    onRenderAvatar,\n    onRenderParticipant,\n    participants,\n    styles?.menuStyles?.participantListStyles,\n    onFetchParticipantMenuItems,\n    showParticipantOverflowTooltip\n  ]);\n\n  const onCopyCallback = useCallback(() => {\n    if (callInvitationURL) {\n      return copy(callInvitationURL);\n    }\n    return false;\n  }, [callInvitationURL]);\n\n  const localeStrings = useLocale().strings.participantsButton;\n  const strings = useMemo(() => ({ ...localeStrings, ...props.strings }), [localeStrings, props.strings]);\n  const participantCount = participants.length;\n\n  const generateDefaultParticipantsSubMenuProps = useCallback((): IContextualMenuItem[] => {\n    const items: IContextualMenuItem[] = [];\n\n    if (participantCount > 0) {\n      items.push({\n        key: 'participantListMenuItemKey',\n        onRender: onRenderParticipantList ?? defaultParticipantList\n      });\n\n      items.push({ key: 'participantsDivider1', itemType: ContextualMenuItemType.Divider });\n\n      if (onMuteAll) {\n        items.push({\n          key: 'muteAllKey',\n          text: strings.muteAllButtonLabel,\n          title: strings.muteAllButtonLabel,\n          styles: styles?.menuStyles?.menuItemStyles,\n          iconProps: { iconName: 'MicOff2' },\n          onClick: onMuteAllCallback\n        });\n      }\n    }\n\n    return items;\n  }, [\n    participantCount,\n    onRenderParticipantList,\n    defaultParticipantList,\n    onMuteAll,\n    strings.muteAllButtonLabel,\n    styles?.menuStyles?.menuItemStyles,\n    onMuteAllCallback\n  ]);\n\n  const defaultMenuProps = useMemo((): IContextualMenuProps => {\n    const menuProps: IContextualMenuProps = {\n      title: strings.menuHeader,\n      styles: merge(participantsButtonMenuPropsStyle, styles?.menuStyles),\n      items: [],\n      calloutProps: {\n        preventDismissOnEvent\n      }\n    };\n\n    if (participantCount > 0) {\n      const participantIds = participants.map((p) => p.userId);\n\n      let participantCountWithoutMe = participantIds.length;\n      if (excludeMe) {\n        participantCountWithoutMe -= 1;\n      }\n\n      menuProps.items.push({\n        key: 'participantCountKey',\n        name: _formatString(strings.participantsListButtonLabel, { numParticipants: `${participantCountWithoutMe}` }),\n        itemProps: { styles: styles?.menuStyles?.menuItemStyles },\n        iconProps: { iconName: 'People' },\n        subMenuProps: {\n          items: generateDefaultParticipantsSubMenuProps(),\n          calloutProps: {\n            styles: {\n              root: {\n                // Confine the menu to the parents bounds.\n                // More info: https://github.com/microsoft/fluentui/issues/18835\n                maxWidth: '100%'\n              }\n            },\n            style: {\n              maxHeight: '20rem'\n            },\n            // Disable dismiss on resize to work around a couple Fluent UI bugs\n            // See reasoning in the props for the parent menu.\n            preventDismissOnEvent\n          }\n        },\n        'data-ui-id': ids.participantButtonPeopleMenuItem\n      });\n    }\n\n    if (callInvitationURL) {\n      menuProps.items.push({\n        key: 'InviteLinkKey',\n        name: strings.copyInviteLinkButtonLabel,\n        title: strings.copyInviteLinkButtonLabel,\n        itemProps: { styles: styles?.menuStyles?.menuItemStyles },\n        iconProps: { iconName: 'Link' },\n        onClick: onCopyCallback\n      });\n    }\n\n    return menuProps;\n  }, [\n    strings.menuHeader,\n    strings.participantsListButtonLabel,\n    strings.copyInviteLinkButtonLabel,\n    styles?.menuStyles,\n    participantCount,\n    callInvitationURL,\n    participants,\n    excludeMe,\n    ids.participantButtonPeopleMenuItem,\n    generateDefaultParticipantsSubMenuProps,\n    onCopyCallback\n  ]);\n\n  return (\n    <ControlBarButton\n      {...props}\n      disabled={disabled}\n      menuProps={props.menuProps ?? defaultMenuProps}\n      menuIconProps={{ hidden: true }}\n      onRenderIcon={onRenderIcon ?? onRenderPeopleIcon}\n      strings={strings}\n      labelKey={props.labelKey ?? 'participantsButtonLabel'}\n    />\n  );\n};\n\"../../../acs-ui-common/src\""]}

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

@@ -13,7 +13,7 @@ import { PictureInPictureInPicturePrimaryTile, PictureInPictureInPictureSecondar
  * @internal
  */
 export const _PictureInPictureInPicture = (props) => {
-    return React.createElement(PictureInPictureInPictureContainer, { onClick: props.onClick, primaryView: React.createElement(PictureInPictureInPicturePrimaryTile, Object.assign({}, props.primaryTile)), secondaryView: props.secondaryTile && React.createElement(PictureInPictureInPictureSecondaryTile, Object.assign({}, props.secondaryTile)), ariaLabel: props.strings.rootAriaLabel });
+    return (React.createElement(PictureInPictureInPictureContainer, { onClick: props.onClick, primaryView: React.createElement(PictureInPictureInPicturePrimaryTile, Object.assign({}, props.primaryTile)), secondaryView: props.secondaryTile && React.createElement(PictureInPictureInPictureSecondaryTile, Object.assign({}, props.secondaryTile)), ariaLabel: props.strings.rootAriaLabel }));
 };
 /**
  * Container for the picture in picture in picture component.
@@ -21,9 +21,9 @@ export const _PictureInPictureInPicture = (props) => {
  */
 const PictureInPictureInPictureContainer = (props) => {
     const onKeyPress = (e) => props.onClick && submitWithKeyboard(e, props.onClick);
-    return React.createElement("aside", { style: tileContainerStyles, onClick: props.onClick, onKeyPress: onKeyPress, "aria-label": props.ariaLabel, tabIndex: props.onClick ? 0 : -1, "data-ui-id": "picture-in-picture-in-picture-root" },
+    return (React.createElement("aside", { style: tileContainerStyles, onClick: props.onClick, onKeyPress: onKeyPress, "aria-label": props.ariaLabel, tabIndex: props.onClick ? 0 : -1, "data-ui-id": "picture-in-picture-in-picture-root" },
         props.primaryView,
-        React.createElement("div", { style: secondaryTileFloatingStyles }, props.secondaryView));
+        React.createElement("div", { style: secondaryTileFloatingStyles }, props.secondaryView)));
 };
 const tileContainerStyles = {
     display: 'flex',

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

@@ -1 +1 @@
-{"version":3,"file":"PictureInPictureInPicture.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/PictureInPictureInPicture/PictureInPictureInPicture.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,oCAAoC,EAAE,sCAAsC,EAAuC,MAAM,iCAAiC,CAAC;AA0BpK;;;;;;;;GAQG;AAEH,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,KAAsC,EAAe,EAAE;IAChG,OAAO,oBAAC,kCAAkC,IAAC,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,WAAW,EAAE,oBAAC,oCAAoC,oBAAK,KAAK,CAAC,WAAW,EAAI,EAAE,aAAa,EAAE,KAAK,CAAC,aAAa,IAAI,oBAAC,sCAAsC,oBAAK,KAAK,CAAC,aAAa,EAAI,EAAE,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,aAAa,GAAI,CAAC;AACzS,CAAC,CAAC;AACF;;;GAGG;AAEH,MAAM,kCAAkC,GAAG,CAAC,KAK3C,EAAe,EAAE;IAChB,MAAM,UAAU,GAAG,CAAC,CAAmC,EAAQ,EAAE,CAAC,KAAK,CAAC,OAAO,IAAI,kBAAkB,CAAC,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IAExH,OAAO,+BAAO,KAAK,EAAE,mBAAmB,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,UAAU,EAAE,UAAU,gBAAc,KAAK,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,gBAC5I,oCAAoC;QAC1C,KAAK,CAAC,WAAW;QAClB,6BAAK,KAAK,EAAE,2BAA2B,IAAG,KAAK,CAAC,aAAa,CAAO,CAC9D,CAAC;AACb,CAAC,CAAC;AAEF,MAAM,mBAAmB,GAAwB;IAC/C,OAAO,EAAE,MAAM;IACf,KAAK,EAAE,aAAa;IACpB,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,SAAS;CAClB,CAAC;AACF,MAAM,2BAA2B,GAAwB;IACvD,uFAAuF;IACvF,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,UAAU;IAClB,KAAK,EAAE,UAAU;CAClB,CAAC"}
+{"version":3,"file":"PictureInPictureInPicture.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/PictureInPictureInPicture/PictureInPictureInPicture.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EACL,oCAAoC,EACpC,sCAAsC,EAEvC,MAAM,iCAAiC,CAAC;AA6BzC;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,KAAsC,EAAe,EAAE;IAChG,OAAO,CACL,oBAAC,kCAAkC,IACjC,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,WAAW,EAAE,oBAAC,oCAAoC,oBAAK,KAAK,CAAC,WAAW,EAAI,EAC5E,aAAa,EAAE,KAAK,CAAC,aAAa,IAAI,oBAAC,sCAAsC,oBAAK,KAAK,CAAC,aAAa,EAAI,EACzG,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,aAAa,GACtC,CACH,CAAC;AACJ,CAAC,CAAC;AACF;;;GAGG;AACH,MAAM,kCAAkC,GAAG,CAAC,KAK3C,EAAe,EAAE;IAChB,MAAM,UAAU,GAAG,CAAC,CAAmC,EAAQ,EAAE,CAC/D,KAAK,CAAC,OAAO,IAAI,kBAAkB,CAAC,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IAExD,OAAO,CACL,+BACE,KAAK,EAAE,mBAAmB,EAC1B,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,UAAU,EAAE,UAAU,gBACV,KAAK,CAAC,SAAS,EAC3B,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,gBACrB,oCAAoC;QAE9C,KAAK,CAAC,WAAW;QAClB,6BAAK,KAAK,EAAE,2BAA2B,IAAG,KAAK,CAAC,aAAa,CAAO,CAC9D,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,mBAAmB,GAAwB;IAC/C,OAAO,EAAE,MAAM;IACf,KAAK,EAAE,aAAa;IACpB,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,SAAS;CAClB,CAAC;AAEF,MAAM,2BAA2B,GAAwB;IACvD,uFAAuF;IACvF,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,UAAU;IAClB,KAAK,EAAE,UAAU;CAClB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { ReactChild } from 'react';\nimport { submitWithKeyboard } from '../utils/keyboardNavigation';\nimport {\n  PictureInPictureInPicturePrimaryTile,\n  PictureInPictureInPictureSecondaryTile,\n  _PictureInPictureInPictureTileProps\n} from './PictureInPictureInPictureTile';\n\n/**\n * Strings of {@link _PictureInPictureInPicture} that can be overridden.\n *\n * @internal\n */\nexport interface _PictureInPictureInPictureStrings {\n  /** Aria-label for the focusable root of the PictureInPictureInPicture component. */\n  rootAriaLabel: string;\n}\n\n/**\n * Props for {@link _PictureInPictureInPicture} component.\n *\n * @internal\n */\nexport interface _PictureInPictureInPictureProps {\n  /**\n   * Callback when the {@link _PictureInPictureInPicture} is clicked.\n   */\n  onClick?: () => void;\n\n  primaryTile: _PictureInPictureInPictureTileProps;\n  secondaryTile?: _PictureInPictureInPictureTileProps;\n\n  strings: _PictureInPictureInPictureStrings;\n}\n\n/**\n * Component that displays a video feed for use as a Picture-in-Picture style component.\n * It contains a secondary video feed resulting in an inner Picture-in-Picture style feed.\n *\n * @remarks\n * The double nature of the Picture-in-Picture styles is where this component gets its name; Picture-in-Picture-in-Picture.\n *\n * @internal\n */\nexport const _PictureInPictureInPicture = (props: _PictureInPictureInPictureProps): JSX.Element => {\n  return (\n    <PictureInPictureInPictureContainer\n      onClick={props.onClick}\n      primaryView={<PictureInPictureInPicturePrimaryTile {...props.primaryTile} />}\n      secondaryView={props.secondaryTile && <PictureInPictureInPictureSecondaryTile {...props.secondaryTile} />}\n      ariaLabel={props.strings.rootAriaLabel}\n    />\n  );\n};\n/**\n * Container for the picture in picture in picture component.\n * This governs positioning and floating of the secondary PiP.\n */\nconst PictureInPictureInPictureContainer = (props: {\n  primaryView: ReactChild;\n  secondaryView?: ReactChild;\n  onClick?: () => void;\n  ariaLabel: string;\n}): JSX.Element => {\n  const onKeyPress = (e: React.KeyboardEvent<HTMLElement>): void =>\n    props.onClick && submitWithKeyboard(e, props.onClick);\n\n  return (\n    <aside\n      style={tileContainerStyles}\n      onClick={props.onClick}\n      onKeyPress={onKeyPress}\n      aria-label={props.ariaLabel}\n      tabIndex={props.onClick ? 0 : -1} // Only allow focus to be set if there is a click handler\n      data-ui-id=\"picture-in-picture-in-picture-root\"\n    >\n      {props.primaryView}\n      <div style={secondaryTileFloatingStyles}>{props.secondaryView}</div>\n    </aside>\n  );\n};\n\nconst tileContainerStyles: React.CSSProperties = {\n  display: 'flex',\n  width: 'min-content',\n  position: 'relative',\n  cursor: 'pointer'\n};\n\nconst secondaryTileFloatingStyles: React.CSSProperties = {\n  // The secondary tile should float above the primary tile, aligned to the bottom right.\n  position: 'absolute',\n  bottom: '0.125rem',\n  right: '0.125rem'\n};\n"]}

package/dist/dist-esm/react-components/src/components/PictureInPictureInPicture/PictureInPictureInPictureTile.js

@@ -6,11 +6,11 @@ import { useTheme } from '../../theming/FluentThemeProvider';
 /** @private */
 export const PictureInPictureInPicturePrimaryTile = (props) => {
     const boxShadow = useTheme().effects.elevation8;
-    return React.createElement(PictureInPictureInPictureTile, { styles: primaryTileStyles(props.orientation, boxShadow) }, props.children);
+    return (React.createElement(PictureInPictureInPictureTile, { styles: primaryTileStyles(props.orientation, boxShadow) }, props.children));
 };
 /** @private */
-export const PictureInPictureInPictureSecondaryTile = (props) => React.createElement(PictureInPictureInPictureTile, { styles: secondaryTileStyles(props.orientation) }, props.children);
-const PictureInPictureInPictureTile = (props) => React.createElement(Stack, { styles: props.styles }, props.children);
+export const PictureInPictureInPictureSecondaryTile = (props) => (React.createElement(PictureInPictureInPictureTile, { styles: secondaryTileStyles(props.orientation) }, props.children));
+const PictureInPictureInPictureTile = (props) => (React.createElement(Stack, { styles: props.styles }, props.children));
 const primaryTileStyles = memoizeFunction((orientation, themeElevation) => ({
     root: {
         borderRadius: '0.25rem',

package/dist/dist-esm/react-components/src/components/PictureInPictureInPicture/PictureInPictureInPictureTile.js.map

@@ -1 +1 @@
-{"version":3,"file":"PictureInPictureInPictureTile.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/PictureInPictureInPicture/PictureInPictureInPictureTile.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAgB,eAAe,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACvE,OAAO,KAA0C,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAS7D,eAAe;AAEf,MAAM,CAAC,MAAM,oCAAoC,GAAG,CAAC,KAA0C,EAAgB,EAAE;IAC/G,MAAM,SAAS,GAAG,QAAQ,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC;IAChD,OAAO,oBAAC,6BAA6B,IAAC,MAAM,EAAE,iBAAiB,CAAC,KAAK,CAAC,WAAW,EAAE,SAAS,CAAC,IACxF,KAAK,CAAC,QAAQ,CACe,CAAC;AACrC,CAAC,CAAC;AACF,eAAe;AAEf,MAAM,CAAC,MAAM,sCAAsC,GAAG,CAAC,KAA0C,EAAgB,EAAE,CAAC,oBAAC,6BAA6B,IAAC,MAAM,EAAE,mBAAmB,CAAC,KAAK,CAAC,WAAW,CAAC,IAC5L,KAAK,CAAC,QAAQ,CACe,CAAC;AAEnC,MAAM,6BAA6B,GAAG,CAAC,KAErC,EAAgB,EAAE,CAAC,oBAAC,KAAK,IAAC,MAAM,EAAE,KAAK,CAAC,MAAM,IAAG,KAAK,CAAC,QAAQ,CAAS,CAAC;AAE3E,MAAM,iBAAiB,GAAG,eAAe,CAAC,CAAC,WAA6B,EAAE,cAAsB,EAAgB,EAAE,CAAC,CAAC;IAClH,IAAI,EAAE;QACJ,YAAY,EAAE,SAAS;QACvB,MAAM,EAAE,WAAW,KAAK,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;QACvD,KAAK,EAAE,WAAW,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;QACtD,SAAS,EAAE,cAAc;QACzB,kHAAkH;QAClH,QAAQ,EAAE,QAAQ;KACnB;CACF,CAAC,CAAC,CAAC;AACJ,MAAM,mBAAmB,GAAG,eAAe,CAAC,CAAC,WAA6B,EAAgB,EAAE,CAAC,CAAC;IAC5F,IAAI,EAAE;QACJ,YAAY,EAAE,SAAS;QACvB,MAAM,EAAE,WAAW,KAAK,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM;QACzD,KAAK,EAAE,WAAW,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU;QACxD,kHAAkH;QAClH,QAAQ,EAAE,QAAQ;KACnB;CACF,CAAC,CAAC,CAAC"}
+{"version":3,"file":"PictureInPictureInPictureTile.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/PictureInPictureInPicture/PictureInPictureInPictureTile.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAgB,eAAe,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACvE,OAAO,KAA0C,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAU7D,eAAe;AACf,MAAM,CAAC,MAAM,oCAAoC,GAAG,CAAC,KAA0C,EAAgB,EAAE;IAC/G,MAAM,SAAS,GAAG,QAAQ,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC;IAChD,OAAO,CACL,oBAAC,6BAA6B,IAAC,MAAM,EAAE,iBAAiB,CAAC,KAAK,CAAC,WAAW,EAAE,SAAS,CAAC,IACnF,KAAK,CAAC,QAAQ,CACe,CACjC,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,sCAAsC,GAAG,CAAC,KAA0C,EAAgB,EAAE,CAAC,CAClH,oBAAC,6BAA6B,IAAC,MAAM,EAAE,mBAAmB,CAAC,KAAK,CAAC,WAAW,CAAC,IAC1E,KAAK,CAAC,QAAQ,CACe,CACjC,CAAC;AAEF,MAAM,6BAA6B,GAAG,CAAC,KAAkD,EAAgB,EAAE,CAAC,CAC1G,oBAAC,KAAK,IAAC,MAAM,EAAE,KAAK,CAAC,MAAM,IAAG,KAAK,CAAC,QAAQ,CAAS,CACtD,CAAC;AAEF,MAAM,iBAAiB,GAAG,eAAe,CACvC,CAAC,WAA6B,EAAE,cAAsB,EAAgB,EAAE,CAAC,CAAC;IACxE,IAAI,EAAE;QACJ,YAAY,EAAE,SAAS;QACvB,MAAM,EAAE,WAAW,KAAK,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;QACvD,KAAK,EAAE,WAAW,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;QACtD,SAAS,EAAE,cAAc;QACzB,kHAAkH;QAClH,QAAQ,EAAE,QAAQ;KACnB;CACF,CAAC,CACH,CAAC;AAEF,MAAM,mBAAmB,GAAG,eAAe,CACzC,CAAC,WAA6B,EAAgB,EAAE,CAAC,CAAC;IAChD,IAAI,EAAE;QACJ,YAAY,EAAE,SAAS;QACvB,MAAM,EAAE,WAAW,KAAK,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM;QACzD,KAAK,EAAE,WAAW,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU;QACxD,kHAAkH;QAClH,QAAQ,EAAE,QAAQ;KACnB;CACF,CAAC,CACH,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStackStyles, memoizeFunction, Stack } from '@fluentui/react';\nimport React, { ReactElement, PropsWithChildren } from 'react';\nimport { useTheme } from '../../theming/FluentThemeProvider';\n\n/** @internal */\nexport type _TileOrientation = 'portrait' | 'landscape';\n\n/** @internal */\nexport type _PictureInPictureInPictureTileProps = PropsWithChildren<{\n  orientation: _TileOrientation;\n}>;\n\n/** @private */\nexport const PictureInPictureInPicturePrimaryTile = (props: _PictureInPictureInPictureTileProps): ReactElement => {\n  const boxShadow = useTheme().effects.elevation8;\n  return (\n    <PictureInPictureInPictureTile styles={primaryTileStyles(props.orientation, boxShadow)}>\n      {props.children}\n    </PictureInPictureInPictureTile>\n  );\n};\n\n/** @private */\nexport const PictureInPictureInPictureSecondaryTile = (props: _PictureInPictureInPictureTileProps): ReactElement => (\n  <PictureInPictureInPictureTile styles={secondaryTileStyles(props.orientation)}>\n    {props.children}\n  </PictureInPictureInPictureTile>\n);\n\nconst PictureInPictureInPictureTile = (props: PropsWithChildren<{ styles: IStackStyles }>): ReactElement => (\n  <Stack styles={props.styles}>{props.children}</Stack>\n);\n\nconst primaryTileStyles = memoizeFunction(\n  (orientation: _TileOrientation, themeElevation: string): IStackStyles => ({\n    root: {\n      borderRadius: '0.25rem',\n      height: orientation === 'landscape' ? '5.5rem' : '8rem',\n      width: orientation === 'landscape' ? '8rem' : '5.5rem',\n      boxShadow: themeElevation,\n      // PiPiP tiles were not designed to host scrollable content. If removed check no scrollbar is showing in e2e tests\n      overflow: 'hidden'\n    }\n  })\n);\n\nconst secondaryTileStyles = memoizeFunction(\n  (orientation: _TileOrientation): IStackStyles => ({\n    root: {\n      borderRadius: '0.25rem',\n      height: orientation === 'landscape' ? '1.625rem' : '2rem',\n      width: orientation === 'landscape' ? '2rem' : '1.625rem',\n      // PiPiP tiles were not designed to host scrollable content. If removed check no scrollbar is showing in e2e tests\n      overflow: 'hidden'\n    }\n  })\n);\n"]}

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

@@ -12,8 +12,7 @@ import { VideoTile } from './VideoTile';
  * @internal
  */
 export const _RemoteVideoTile = React.memo((props) => {
-    const { isAvailable, isReceiving = true, 
-    // default to true to prevent any breaking change
+    const { isAvailable, isReceiving = true, // default to true to prevent any breaking change
     isMuted, isSpeaking, isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, renderElement, userId, displayName, onRenderAvatar, showMuteIndicator } = props;
     const remoteVideoStreamProps = useMemo(() => ({
         isMirrored: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored,
@@ -25,7 +24,18 @@ export const _RemoteVideoTile = React.memo((props) => {
         remoteParticipantId: userId,
         renderElementExists: !!renderElement,
         scalingMode: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.scalingMode
-    }), [isAvailable, isReceiving, isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored, remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.scalingMode, renderElement, userId]); // Handle creating, destroying and updating the video stream as necessary
+    }), [
+        isAvailable,
+        isReceiving,
+        isScreenSharingOn,
+        onCreateRemoteStreamView,
+        onDisposeRemoteStreamView,
+        remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored,
+        remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.scalingMode,
+        renderElement,
+        userId
+    ]);
+    // Handle creating, destroying and updating the video stream as necessary
     useRemoteVideoStreamLifecycleMaintainer(remoteVideoStreamProps);
     const showLoadingIndicator = isAvailable && isReceiving === false && props.participantState !== 'Disconnected';
     const renderVideoStreamElement = useMemo(() => {
@@ -35,8 +45,11 @@ export const _RemoteVideoTile = React.memo((props) => {
             // Returning `undefined` results in the placeholder with avatar being shown
             return undefined;
         }
-        return React.createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: showLoadingIndicator ? 'loading' : 'none' });
+        return (React.createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: showLoadingIndicator ? 'loading' : 'none' }));
     }, [renderElement, showLoadingIndicator]);
-    return React.createElement(VideoTile, { key: userId, userId: userId, renderElement: renderVideoStreamElement, displayName: displayName, onRenderPlaceholder: onRenderAvatar, isMuted: isMuted, isSpeaking: isSpeaking, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, showLabel: props.showLabel });
+    return (React.createElement(VideoTile, { key: userId, userId: userId, renderElement: renderVideoStreamElement, displayName: displayName, onRenderPlaceholder: onRenderAvatar, isMuted: isMuted, isSpeaking: isSpeaking, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, showLabel: props.showLabel, 
+        /* @conditional-compile-remove(one-to-n-calling) */
+        /* @conditional-compile-remove(PSTN-calls) */
+        participantState: props.participantState }));
 });
 //# sourceMappingURL=RemoteVideoTile.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RemoteVideoTile.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/RemoteVideoTile.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,uCAAuC,EAA6C,MAAM,kDAAkD,CAAC;AACtJ,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC;;;;;;GAMG;AAEH,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,KAkB3C,EAAE,EAAE;IACH,MAAM,EACJ,WAAW,EACX,WAAW,GAAG,IAAI;IAClB,iDAAiD;IACjD,OAAO,EACP,UAAU,EACV,iBAAiB,EACjB,wBAAwB,EACxB,yBAAyB,EACzB,sBAAsB,EACtB,aAAa,EACb,MAAM,EACN,WAAW,EACX,cAAc,EACd,iBAAiB,EAClB,GAAG,KAAK,CAAC;IACV,MAAM,sBAAsB,GAA8C,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QACvF,UAAU,EAAE,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,UAAU;QAC9C,iBAAiB;QACjB,iBAAiB,EAAE,WAAW;QAC9B,iBAAiB,EAAE,WAAW;QAC9B,wBAAwB;QACxB,yBAAyB;QACzB,mBAAmB,EAAE,MAAM;QAC3B,mBAAmB,EAAE,CAAC,CAAC,aAAa;QACpC,WAAW,EAAE,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,WAAW;KACjD,CAAC,EAAE,CAAC,WAAW,EAAE,WAAW,EAAE,iBAAiB,EAAE,wBAAwB,EAAE,yBAAyB,EAAE,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,UAAU,EAAE,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,WAAW,EAAE,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,yEAAyE;IAElR,uCAAuC,CAAC,sBAAsB,CAAC,CAAC;IAChE,MAAM,oBAAoB,GAAG,WAAW,IAAI,WAAW,KAAK,KAAK,IAAI,KAAK,CAAC,gBAAgB,KAAK,cAAc,CAAC;IAC/G,MAAM,wBAAwB,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5C,iHAAiH;QACjH,+EAA+E;QAC/E,IAAI,CAAC,aAAa,IAAI,CAAC,aAAa,CAAC,iBAAiB,EAAE;YACtD,2EAA2E;YAC3E,OAAO,SAAS,CAAC;SAClB;QAED,OAAO,oBAAC,WAAW,IAAC,kBAAkB,EAAE,aAAa,EAAE,YAAY,EAAE,oBAAoB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,GAAI,CAAC;IACrH,CAAC,EAAE,CAAC,aAAa,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAC1C,OAAO,oBAAC,SAAS,IAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,wBAAwB,EAAE,WAAW,EAAE,WAAW,EAAE,mBAAmB,EAAE,cAAc,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,cAAc,EAAE,KAAK,CAAC,cAAc,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,GAAI,CAAC;AAC9S,CAAC,CAAC,CAAC"}
+{"version":3,"file":"RemoteVideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/RemoteVideoTile.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EACL,uCAAuC,EAExC,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CACxC,CAAC,KAoBA,EAAE,EAAE;IACH,MAAM,EACJ,WAAW,EACX,WAAW,GAAG,IAAI,EAAE,iDAAiD;IACrE,OAAO,EACP,UAAU,EACV,iBAAiB,EACjB,wBAAwB,EACxB,yBAAyB,EACzB,sBAAsB,EACtB,aAAa,EACb,MAAM,EACN,WAAW,EACX,cAAc,EACd,iBAAiB,EAClB,GAAG,KAAK,CAAC;IAEV,MAAM,sBAAsB,GAA8C,OAAO,CAC/E,GAAG,EAAE,CAAC,CAAC;QACL,UAAU,EAAE,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,UAAU;QAC9C,iBAAiB;QACjB,iBAAiB,EAAE,WAAW;QAC9B,iBAAiB,EAAE,WAAW;QAC9B,wBAAwB;QACxB,yBAAyB;QACzB,mBAAmB,EAAE,MAAM;QAC3B,mBAAmB,EAAE,CAAC,CAAC,aAAa;QACpC,WAAW,EAAE,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,WAAW;KACjD,CAAC,EACF;QACE,WAAW;QACX,WAAW;QACX,iBAAiB;QACjB,wBAAwB;QACxB,yBAAyB;QACzB,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,UAAU;QAClC,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,WAAW;QACnC,aAAa;QACb,MAAM;KACP,CACF,CAAC;IAEF,yEAAyE;IACzE,uCAAuC,CAAC,sBAAsB,CAAC,CAAC;IAEhE,MAAM,oBAAoB,GAAG,WAAW,IAAI,WAAW,KAAK,KAAK,IAAI,KAAK,CAAC,gBAAgB,KAAK,cAAc,CAAC;IAE/G,MAAM,wBAAwB,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5C,iHAAiH;QACjH,+EAA+E;QAC/E,IAAI,CAAC,aAAa,IAAI,CAAC,aAAa,CAAC,iBAAiB,EAAE;YACtD,2EAA2E;YAC3E,OAAO,SAAS,CAAC;SAClB;QAED,OAAO,CACL,oBAAC,WAAW,IAAC,kBAAkB,EAAE,aAAa,EAAE,YAAY,EAAE,oBAAoB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,GAAI,CAC5G,CAAC;IACJ,CAAC,EAAE,CAAC,aAAa,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAE1C,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,MAAM,EACX,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,wBAAwB,EACvC,WAAW,EAAE,WAAW,EACxB,mBAAmB,EAAE,cAAc,EACnC,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,iBAAiB,EAAE,iBAAiB,EACpC,cAAc,EAAE,KAAK,CAAC,cAAc,EACpC,SAAS,EAAE,KAAK,CAAC,SAAS;QAC1B,mDAAmD;QACnD,6CAA6C;QAC7C,gBAAgB,EAAE,KAAK,CAAC,gBAAgB,GACxC,CACH,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useMemo } from 'react';\nimport { CreateVideoStreamViewResult, OnRenderAvatarCallback, ParticipantState, VideoStreamOptions } from '../types';\nimport { StreamMedia } from './StreamMedia';\nimport {\n  useRemoteVideoStreamLifecycleMaintainer,\n  RemoteVideoStreamLifecycleMaintainerProps\n} from './VideoGallery/useVideoStreamLifecycleMaintainer';\nimport { VideoTile } from './VideoTile';\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    onCreateRemoteStreamView?: (\n      userId: string,\n      options?: VideoStreamOptions\n    ) => Promise<void | CreateVideoStreamViewResult>;\n    onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n    isAvailable?: boolean;\n    isReceiving?: boolean;\n    isMuted?: boolean;\n    isSpeaking?: boolean;\n    isScreenSharingOn?: boolean; // TODO: Remove this once onDisposeRemoteStreamView no longer disposes of screen share stream\n    renderElement?: HTMLElement;\n    displayName?: string;\n    remoteVideoViewOptions?: VideoStreamOptions;\n    onRenderAvatar?: OnRenderAvatarCallback;\n    showMuteIndicator?: boolean;\n    showLabel?: boolean;\n    personaMinSize?: number;\n    participantState?: ParticipantState;\n  }) => {\n    const {\n      isAvailable,\n      isReceiving = true, // default to true to prevent any breaking change\n      isMuted,\n      isSpeaking,\n      isScreenSharingOn,\n      onCreateRemoteStreamView,\n      onDisposeRemoteStreamView,\n      remoteVideoViewOptions,\n      renderElement,\n      userId,\n      displayName,\n      onRenderAvatar,\n      showMuteIndicator\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    useRemoteVideoStreamLifecycleMaintainer(remoteVideoStreamProps);\n\n    const showLoadingIndicator = isAvailable && isReceiving === false && props.participantState !== 'Disconnected';\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    return (\n      <VideoTile\n        key={userId}\n        userId={userId}\n        renderElement={renderVideoStreamElement}\n        displayName={displayName}\n        onRenderPlaceholder={onRenderAvatar}\n        isMuted={isMuted}\n        isSpeaking={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={props.participantState}\n      />\n    );\n  }\n);\n"]}

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

@@ -22,8 +22,8 @@ export const ResponsiveHorizontalGallery = (props) => {
         gapWidthRem,
         buttonWidthRem
     });
-    return React.createElement("div", { ref: containerRef, className: mergeStyles(props.containerStyles) },
-        React.createElement(HorizontalGallery, { childrenPerPage: childrenPerPage, styles: props.horizontalGalleryStyles }, props.children));
+    return (React.createElement("div", { ref: containerRef, className: mergeStyles(props.containerStyles) },
+        React.createElement(HorizontalGallery, { childrenPerPage: childrenPerPage, styles: props.horizontalGalleryStyles }, props.children)));
 };
 /**
  * Helper function to calculate children per page for HorizontalGallery based on width of container, child, buttons, and
@@ -41,7 +41,8 @@ const calculateChildrenPerPage = (args) => {
      *   <-----------containerWidth--------->
      *  containerWidth = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.
      */
-    const numberOfChildrenInContainer = Math.floor((containerWidth + gapWidth) / (childWidth + gapWidth)); // If all children fit then return numberOfChildrenInContainer
+    const numberOfChildrenInContainer = Math.floor((containerWidth + gapWidth) / (childWidth + gapWidth));
+    // If all children fit then return numberOfChildrenInContainer
     if (numberOfChildren <= numberOfChildrenInContainer) {
         return numberOfChildrenInContainer;
     }
@@ -55,7 +56,8 @@ const calculateChildrenPerPage = (args) => {
      *   |_||_____________||_____________||_|
      *       <-------childrenSpace------>
      */
-    const childrenSpace = containerWidth - 2 * buttonWidth - 2 * gapWidth; // Now that we have childrenSpace width we can figure out how many children can fit in childrenSpace.
+    const childrenSpace = containerWidth - 2 * buttonWidth - 2 * gapWidth;
+    // Now that we have childrenSpace width we can figure out how many children can fit in childrenSpace.
     // childrenSpace = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.
     return Math.floor((childrenSpace + gapWidth) / (childWidth + gapWidth));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveHorizontalGallery.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ResponsiveHorizontalGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAA2B,MAAM,qBAAqB,CAAC;AACjF,OAAO,EAAE,eAAe,IAAI,cAAc,EAAE,mCAAgC;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD;;;GAGG;AAEH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,KAO3C,EAAe,EAAE;IAChB,MAAM,EACJ,aAAa,EACb,WAAW,EACX,cAAc,GAAG,CAAC,EACnB,GAAG,KAAK,CAAC;IACV,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAElD,MAAM,cAAc,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAExD,MAAM,WAAW,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9G,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAChH,MAAM,eAAe,GAAG,wBAAwB,CAAC;QAC/C,gBAAgB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC;QACtD,cAAc,EAAE,CAAC,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,CAAC,CAAC,GAAG,WAAW,GAAG,YAAY;QAClE,aAAa;QACb,WAAW;QACX,cAAc;KACf,CAAC,CAAC;IACH,OAAO,6BAAK,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,CAAC,KAAK,CAAC,eAAe,CAAC;QACxE,oBAAC,iBAAiB,IAAC,eAAe,EAAE,eAAe,EAAE,MAAM,EAAE,KAAK,CAAC,uBAAuB,IACvF,KAAK,CAAC,QAAQ,CACG,CAChB,CAAC;AACX,CAAC,CAAC;AACF;;;GAGG;AAEH,MAAM,wBAAwB,GAAG,CAAC,IAMjC,EAAU,EAAE;IACX,MAAM,EACJ,gBAAgB,EAChB,cAAc,EACd,cAAc,EACd,aAAa,EACb,WAAW,EACZ,GAAG,IAAI,CAAC;IACT,MAAM,UAAU,GAAG,cAAc,CAAC,aAAa,CAAC,CAAC;IACjD,MAAM,QAAQ,GAAG,cAAc,CAAC,WAAW,CAAC,CAAC;IAC7C;;;;;;;OAOG;IAEH,MAAM,2BAA2B,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,cAAc,GAAG,QAAQ,CAAC,GAAG,CAAC,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,8DAA8D;IAErK,IAAI,gBAAgB,IAAI,2BAA2B,EAAE;QACnD,OAAO,2BAA2B,CAAC;KACpC;IAED,MAAM,WAAW,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;IACnD;;;;;;;;OAQG;IAEH,MAAM,aAAa,GAAG,cAAc,GAAG,CAAC,GAAG,WAAW,GAAG,CAAC,GAAG,QAAQ,CAAC,CAAC,qGAAqG;IAC5K,qFAAqF;IAErF,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,aAAa,GAAG,QAAQ,CAAC,GAAG,CAAC,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC;AAC1E,CAAC,CAAC"}
+{"version":3,"file":"ResponsiveHorizontalGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ResponsiveHorizontalGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAA2B,MAAM,qBAAqB,CAAC;AACjF,OAAO,EAAE,eAAe,IAAI,cAAc,EAAE,mCAAgC;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAExD;;;GAGG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,KAO3C,EAAe,EAAE;IAChB,MAAM,EAAE,aAAa,EAAE,WAAW,EAAE,cAAc,GAAG,CAAC,EAAE,GAAG,KAAK,CAAC;IACjE,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,cAAc,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAExD,MAAM,WAAW,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9G,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAEhH,MAAM,eAAe,GAAG,wBAAwB,CAAC;QAC/C,gBAAgB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC;QACtD,cAAc,EAAE,CAAC,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,CAAC,CAAC,GAAG,WAAW,GAAG,YAAY;QAClE,aAAa;QACb,WAAW;QACX,cAAc;KACf,CAAC,CAAC;IAEH,OAAO,CACL,6BAAK,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,CAAC,KAAK,CAAC,eAAe,CAAC;QACnE,oBAAC,iBAAiB,IAAC,eAAe,EAAE,eAAe,EAAE,MAAM,EAAE,KAAK,CAAC,uBAAuB,IACvF,KAAK,CAAC,QAAQ,CACG,CAChB,CACP,CAAC;AACJ,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,wBAAwB,GAAG,CAAC,IAMjC,EAAU,EAAE;IACX,MAAM,EAAE,gBAAgB,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;IAE9F,MAAM,UAAU,GAAG,cAAc,CAAC,aAAa,CAAC,CAAC;IACjD,MAAM,QAAQ,GAAG,cAAc,CAAC,WAAW,CAAC,CAAC;IAE7C;;;;;;;OAOG;IACH,MAAM,2BAA2B,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,cAAc,GAAG,QAAQ,CAAC,GAAG,CAAC,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC;IACtG,8DAA8D;IAC9D,IAAI,gBAAgB,IAAI,2BAA2B,EAAE;QACnD,OAAO,2BAA2B,CAAC;KACpC;IAED,MAAM,WAAW,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;IAEnD;;;;;;;;OAQG;IACH,MAAM,aAAa,GAAG,cAAc,GAAG,CAAC,GAAG,WAAW,GAAG,CAAC,GAAG,QAAQ,CAAC;IACtE,qGAAqG;IACrG,qFAAqF;IACrF,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,aAAa,GAAG,QAAQ,CAAC,GAAG,CAAC,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC;AAC1E,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStyle, mergeStyles } from '@fluentui/react';\nimport React, { useRef } from 'react';\nimport { HorizontalGallery, HorizontalGalleryStyles } from './HorizontalGallery';\nimport { _convertRemToPx as convertRemToPx } from '@internal/acs-ui-common';\nimport { _useContainerWidth } from './utils/responsive';\n\n/**\n * Wrapped HorizontalGallery that adjusts the number of items per page based on the\n * available width obtained from a ResizeObserver, width per child, gap width, and button width\n */\nexport const ResponsiveHorizontalGallery = (props: {\n  children: React.ReactNode;\n  containerStyles: IStyle;\n  horizontalGalleryStyles: HorizontalGalleryStyles;\n  childWidthRem: number;\n  gapWidthRem: number;\n  buttonWidthRem?: number;\n}): JSX.Element => {\n  const { childWidthRem, gapWidthRem, buttonWidthRem = 0 } = props;\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerWidth = _useContainerWidth(containerRef);\n\n  const leftPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingLeft) : 0;\n  const rightPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingRight) : 0;\n\n  const childrenPerPage = calculateChildrenPerPage({\n    numberOfChildren: React.Children.count(props.children),\n    containerWidth: (containerWidth ?? 0) - leftPadding - rightPadding,\n    childWidthRem,\n    gapWidthRem,\n    buttonWidthRem\n  });\n\n  return (\n    <div ref={containerRef} className={mergeStyles(props.containerStyles)}>\n      <HorizontalGallery childrenPerPage={childrenPerPage} styles={props.horizontalGalleryStyles}>\n        {props.children}\n      </HorizontalGallery>\n    </div>\n  );\n};\n\n/**\n * Helper function to calculate children per page for HorizontalGallery based on width of container, child, buttons, and\n * gaps in between\n */\nconst calculateChildrenPerPage = (args: {\n  numberOfChildren: number;\n  containerWidth: number;\n  childWidthRem: number;\n  gapWidthRem: number;\n  buttonWidthRem: number;\n}): number => {\n  const { numberOfChildren, containerWidth, buttonWidthRem, childWidthRem, gapWidthRem } = args;\n\n  const childWidth = convertRemToPx(childWidthRem);\n  const gapWidth = convertRemToPx(gapWidthRem);\n\n  /** First check how many children can fit in containerWidth.\n   *    __________________________________\n   *   |                ||                |\n   *   |                ||                |\n   *   |________________||________________|\n   *   <-----------containerWidth--------->\n   *  containerWidth = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.\n   */\n  const numberOfChildrenInContainer = Math.floor((containerWidth + gapWidth) / (childWidth + gapWidth));\n  // If all children fit then return numberOfChildrenInContainer\n  if (numberOfChildren <= numberOfChildrenInContainer) {\n    return numberOfChildrenInContainer;\n  }\n\n  const buttonWidth = convertRemToPx(buttonWidthRem);\n\n  /** We know we need to paginate. So we need to subtract the buttonWidth twice and gapWidth twice from\n   * containerWidth to compute childrenSpace\n   *   <-----------containerWidth--------->\n   *    __________________________________\n   *   | ||             ||             || |\n   *   |<||             ||             ||>|\n   *   |_||_____________||_____________||_|\n   *       <-------childrenSpace------>\n   */\n  const childrenSpace = containerWidth - 2 * buttonWidth - 2 * gapWidth;\n  // Now that we have childrenSpace width we can figure out how many children can fit in childrenSpace.\n  // childrenSpace = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.\n  return Math.floor((childrenSpace + gapWidth) / (childWidth + gapWidth));\n};\n\"../../../acs-ui-common/src\""]}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"ScreenShareButton.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ScreenShareButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,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;AAyCjE;;;;;;GAMG;AAEH,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,GAC7B,KAAK,CAAC,OAAO,CACjB,CAAC;IACF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,MAAM,GAAG,uBAAuB,CAAC,KAAK,CAAC,CAAC;IAE9C,MAAM,yBAAyB,GAAG,GAAgB,EAAE,CAAC,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,8BAA8B,GAAG,CAAC;IAElJ,MAAM,0BAA0B,GAAG,GAAgB,EAAE,CAAC,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,+BAA+B,GAAG,CAAC;IAEpJ,OAAO,oBAAC,gBAAgB,oBAAK,KAAK,IAAE,SAAS,EAAE,WAAW,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,MAAA,KAAK,CAAC,mBAAmB,mCAAI,KAAK,CAAC,OAAO,EAAE,cAAc,EAAE,MAAA,KAAK,CAAC,cAAc,mCAAI,yBAAyB,EAAE,eAAe,EAAE,MAAA,KAAK,CAAC,eAAe,mCAAI,0BAA0B,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAA,KAAK,CAAC,QAAQ,mCAAI,wBAAwB,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,CAAC;AACvX,CAAC,CAAC;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;YACf,YAAY,EAAE,GAAG,cAAc,CAAC,KAAK,aAAa;SACnD,CAAC,+DAA+D;KAElE;IACD,kBAAkB,EAAE;QAClB,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;QACtC,KAAK,EAAE,cAAc,CAAC,KAAK;QAC3B,eAAe,EAAE;YACf,YAAY,EAAE,GAAG,cAAc,CAAC,KAAK,aAAa;SACnD,CAAC,+DAA+D;KAElE;IACD,YAAY,EAAE;QACZ,KAAK,EAAE,cAAc,CAAC,KAAK;KAC5B;CACF,CAAC,CAAC"}
+{"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,CAAC,+DAA+D;KACxI;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,CAAC,+DAA+D;KACxI;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  },\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  },\n  labelChecked: { color: DefaultPalette.white }\n});\n"]}

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

@@ -68,6 +68,22 @@ export interface SendBoxStrings {
      * Aria label for send message button
      */
     sendButtonAriaLabel: string;
+    /**
+     * Error message indicating that all file uploads are not complete.
+     */
+    fileUploadsPendingError: string;
+    /**
+     * Aria label to notify user when focus is on cancel file upload button.
+     */
+    removeFile: string;
+    /**
+     * Aria label to notify user file uploading starts.
+     */
+    uploading: string;
+    /**
+     * Aria label to notify user file is uploaded.
+     */
+    uploadCompleted: string;
 }
 /**
  * Props for {@link SendBox}.
@@ -124,6 +140,25 @@ export interface SendBoxProps {
      * When undefined nothing has focus on render
      */
     autoFocus?: 'sendBoxTextField';
+    /**
+     * Optional callback to render uploaded files in the SendBox. The sendbox will expand
+     * veritcally to accomodate the uploaded files. File uploads will
+     * be rendered below the text area in sendbox.
+     * @beta
+     */
+    onRenderFileUploads?: () => JSX.Element;
+    /**
+     * Optional array of active file uploads where each object has attibutes
+     * of a file upload like name, progress, errorMessage etc.
+     * @beta
+     */
+    activeFileUploads?: ActiveFileUpload[];
+    /**
+     * Optional callback to remove the file upload before sending by clicking on
+     * cancel icon.
+     * @beta
+     */
+    onCancelFileUpload?: (fileId: string) => void;
 }
 /**
  * Component for typing and sending messages.

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

@@ -9,6 +9,10 @@ import { useIdentifiers } from '../identifiers';
 import { InputBoxComponent } from './InputBoxComponent';
 import { VoiceOverButton } from './VoiceOverButton';
 import { SendBoxErrors } from './SendBoxErrors';
+/* @conditional-compile-remove(file-sharing) */
+import { _FileUploadCards } from './FileUploadCards';
+/* @conditional-compile-remove(file-sharing) */
+import { fileUploadCardsStyles } from './styles/SendBox.styles';
 const EMPTY_MESSAGE_REGEX = /^\s*$/;
 const MAXIMUM_LENGTH_OF_MESSAGE = 8000;
 /**
@@ -35,11 +39,15 @@ export const SendBox = (props) => {
         // don't send a message when disabled
         if (disabled || textValueOverflow) {
             return;
-        } // Don't send message until all files have been uploaded successfully
+        }
+        // Don't send message until all files have been uploaded successfully
         setFileUploadsPendingError(undefined);
         if (hasIncompleteFileUploads(props)) {
+            /* @conditional-compile-remove(file-sharing) */
+            setFileUploadsPendingError({ message: strings.fileUploadsPendingError, timestamp: Date.now() });
             return;
-        } // we dont want to send empty messages including spaces, newlines, tabs
+        }
+        // we dont want to send empty messages including spaces, newlines, tabs
         // Message can be empty if there is a valid file upload
         if (!EMPTY_MESSAGE_REGEX.test(textValue) || hasFile(props)) {
             onSendMessage && onSendMessage(sanitizeText(textValue));
@@ -68,9 +76,10 @@ export const SendBox = (props) => {
     const mergedSendIconStyle = useMemo(() => mergeStyles(sendIconStyle, {
         color: !!errorMessage || !hasTextOrFile ? theme.palette.neutralTertiary : theme.palette.themePrimary
     }, styles === null || styles === void 0 ? void 0 : styles.sendMessageIcon), [errorMessage, hasTextOrFile, theme, styles === null || styles === void 0 ? void 0 : styles.sendMessageIcon]);
-    const onRenderSendIcon = useCallback((isHover) => onRenderIcon ? onRenderIcon(isHover) : React.createElement(Icon, { iconName: isHover && textValue ? 'SendBoxSendHovered' : 'SendBoxSend', className: mergedSendIconStyle }), [mergedSendIconStyle, onRenderIcon, textValue]); // Ensure that errors are cleared when there are no files in sendbox
+    const onRenderSendIcon = useCallback((isHover) => onRenderIcon ? (onRenderIcon(isHover)) : (React.createElement(Icon, { iconName: isHover && textValue ? 'SendBoxSendHovered' : 'SendBoxSend', className: mergedSendIconStyle })), [mergedSendIconStyle, onRenderIcon, textValue]);
+    // Ensure that errors are cleared when there are no files in sendbox
     React.useEffect(() => {
-        if (!(activeFileUploads === null || activeFileUploads === void 0 ? void 0 : activeFileUploads.filter(upload => !upload.error).length)) {
+        if (!(activeFileUploads === null || activeFileUploads === void 0 ? void 0 : activeFileUploads.filter((upload) => !upload.error).length)) {
             setFileUploadsPendingError(undefined);
         }
     }, [activeFileUploads]);
@@ -78,10 +87,23 @@ export const SendBox = (props) => {
         var _a;
         return {
             fileUploadsPendingError: fileUploadsPendingError,
-            fileUploadError: (_a = activeFileUploads === null || activeFileUploads === void 0 ? void 0 : activeFileUploads.filter(fileUpload => fileUpload.error).pop()) === null || _a === void 0 ? void 0 : _a.error
+            fileUploadError: (_a = activeFileUploads === null || activeFileUploads === void 0 ? void 0 : activeFileUploads.filter((fileUpload) => fileUpload.error).pop()) === null || _a === void 0 ? void 0 : _a.error
         };
     }, [activeFileUploads, fileUploadsPendingError]);
-    return React.createElement(Stack, { className: mergeStyles(sendBoxWrapperStyles) },
+    /* @conditional-compile-remove(file-sharing) */
+    const onRenderFileUploads = useCallback(() => {
+        var _a, _b, _c, _d, _e, _f;
+        if (!(activeFileUploads === null || activeFileUploads === void 0 ? void 0 : activeFileUploads.filter((upload) => !upload.error).length)) {
+            return null;
+        }
+        return props.onRenderFileUploads ? (props.onRenderFileUploads()) : (React.createElement(Stack, { className: fileUploadCardsStyles },
+            React.createElement(_FileUploadCards, { activeFileUploads: activeFileUploads, onCancelFileUpload: props.onCancelFileUpload, strings: {
+                    removeFile: (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.removeFile) !== null && _b !== void 0 ? _b : localeStrings.removeFile,
+                    uploading: (_d = (_c = props.strings) === null || _c === void 0 ? void 0 : _c.uploading) !== null && _d !== void 0 ? _d : localeStrings.uploading,
+                    uploadCompleted: (_f = (_e = props.strings) === null || _e === void 0 ? void 0 : _e.uploadCompleted) !== null && _f !== void 0 ? _f : localeStrings.uploadCompleted
+                } })));
+    }, [activeFileUploads, props, localeStrings]);
+    return (React.createElement(Stack, { className: mergeStyles(sendBoxWrapperStyles) },
         React.createElement(SendBoxErrors, Object.assign({}, sendBoxErrorsProps)),
         React.createElement(Stack, { className: mergeStyles(borderAndBoxShadowStyle({
                 theme,
@@ -93,23 +115,26 @@ export const SendBox = (props) => {
                 }, onEnterKeyDown: () => {
                     sendMessageOnClick();
                 }, styles: mergedStyles, supportNewline: supportNewline, maxLength: MAXIMUM_LENGTH_OF_MESSAGE },
-                React.createElement(VoiceOverButton, { onRenderIcon: onRenderSendIcon, onClick: e => {
+                React.createElement(VoiceOverButton, { onRenderIcon: onRenderSendIcon, onClick: (e) => {
                         if (!textValueOverflow) {
                             sendMessageOnClick();
                         }
                         e.stopPropagation();
-                    }, id: 'sendIconWrapper', className: mergedSendButtonStyle, ariaLabel: localeStrings.sendButtonAriaLabel, tooltipContent: localeStrings.sendButtonAriaLabel }))));
+                    }, id: 'sendIconWrapper', className: mergedSendButtonStyle, ariaLabel: localeStrings.sendButtonAriaLabel, tooltipContent: localeStrings.sendButtonAriaLabel })),
+            /* @conditional-compile-remove(file-sharing) */
+            onRenderFileUploads())));
 };
 /**
  * @private
  */
 const hasIncompleteFileUploads = (props) => {
     const activeFileUploads = activeFileUploadsTrampoline(props);
-    return !!((activeFileUploads === null || activeFileUploads === void 0 ? void 0 : activeFileUploads.length) && !activeFileUploads.filter(fileUpload => !fileUpload.error).every(fileUpload => fileUpload.uploadComplete));
+    return !!((activeFileUploads === null || activeFileUploads === void 0 ? void 0 : activeFileUploads.length) &&
+        !activeFileUploads.filter((fileUpload) => !fileUpload.error).every((fileUpload) => fileUpload.uploadComplete));
 };
 const hasFile = (props) => {
     const activeFileUploads = activeFileUploadsTrampoline(props);
-    return !!(activeFileUploads === null || activeFileUploads === void 0 ? void 0 : activeFileUploads.find(file => !file.error));
+    return !!(activeFileUploads === null || activeFileUploads === void 0 ? void 0 : activeFileUploads.find((file) => !file.error));
     return false;
 };
 const sanitizeText = (message) => {
@@ -121,6 +146,8 @@ const sanitizeText = (message) => {
     }
 };
 const activeFileUploadsTrampoline = (props) => {
+    /* @conditional-compile-remove(file-sharing) */
+    return props.activeFileUploads;
     return [];
 };
 //# sourceMappingURL=SendBox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SendBox.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/SendBox.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAsB,WAAW,EAAE,eAAe,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAChG,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,aAAa,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAEtI,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,MAAM,mBAAmB,GAAG,OAAO,CAAC;AACpC,MAAM,yBAAyB,GAAG,IAAI,CAAC;AAmJvC;;;;;;;GAOG;AAEH,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,KAAmB,EAAe,EAAE;IAC1D,MAAM,EACJ,QAAQ,EACR,aAAa,EACb,cAAc,EACd,aAAa,EACb,QAAQ,EACR,YAAY,EACZ,qBAAqB,EACrB,MAAM,EACN,SAAS,EACV,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC;IAClD,MAAM,OAAO,mCAAQ,aAAa,GAC7B,KAAK,CAAC,OAAO,CACjB,CAAC;IACF,MAAM,GAAG,GAAG,cAAc,EAAE,CAAC;IAC7B,MAAM,iBAAiB,GAAG,2BAA2B,CAAC,KAAK,CAAC,CAAC;IAC7D,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC/C,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClE,MAAM,gBAAgB,GAAG,KAAK,CAAC,MAAM,CAAa,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,uBAAuB,EAAE,0BAA0B,CAAC,GAAG,QAAQ,CAAmC,SAAS,CAAC,CAAC;IAEpH,MAAM,kBAAkB,GAAG,GAAS,EAAE;;QACpC,qCAAqC;QACrC,IAAI,QAAQ,IAAI,iBAAiB,EAAE;YACjC,OAAO;SACR,CAAC,qEAAqE;QAGvE,0BAA0B,CAAC,SAAS,CAAC,CAAC;QAEtC,IAAI,wBAAwB,CAAC,KAAK,CAAC,EAAE;YACnC,OAAO;SACR,CAAC,uEAAuE;QACzE,uDAAuD;QAGvD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,OAAO,CAAC,KAAK,CAAC,EAAE;YAC1D,aAAa,IAAI,aAAa,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC;YACxD,YAAY,CAAC,EAAE,CAAC,CAAC;SAClB;QAED,MAAA,gBAAgB,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;IACpC,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,CAAC,KAA8D,EAAE,QAA6B,EAAQ,EAAE;QACtH,IAAI,QAAQ,KAAK,SAAS,EAAE;YAC1B,OAAO;SACR;QAED,IAAI,QAAQ,CAAC,MAAM,GAAG,yBAAyB,EAAE;YAC/C,oBAAoB,CAAC,IAAI,CAAC,CAAC;SAC5B;aAAM;YACL,oBAAoB,CAAC,KAAK,CAAC,CAAC;SAC7B;QAED,YAAY,CAAC,QAAQ,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,iBAAiB,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC;IAC/E,MAAM,YAAY,GAAG,aAAa,aAAb,aAAa,cAAb,aAAa,GAAI,kBAAkB,CAAC;IACzD,MAAM,qBAAqB,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,eAAe,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,wBAAwB,CAAC,EAAE,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,wBAAwB,CAAC,CAAC,CAAC;IAChJ,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IACtE,MAAM,OAAO,GAAG,CAAC,CAAC,SAAS,CAAC;IAC5B,MAAM,aAAa,GAAG,OAAO,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,aAAa,EAAE;QACnE,KAAK,EAAE,CAAC,CAAC,YAAY,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY;KACrG,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,eAAe,CAAC,CAAC,CAAC;IAC5F,MAAM,gBAAgB,GAAG,WAAW,CAAC,CAAC,OAAgB,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,oBAAC,IAAI,IAAC,QAAQ,EAAE,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,aAAa,EAAE,SAAS,EAAE,mBAAmB,GAAI,EAAE,CAAC,mBAAmB,EAAE,YAAY,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,oEAAoE;IAExU,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,CAAA,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAA,EAAE;YAC9D,0BAA0B,CAAC,SAAS,CAAC,CAAC;SACvC;IACH,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC;IACxB,MAAM,kBAAkB,GAAG,OAAO,CAAC,GAAG,EAAE;;QACtC,OAAO;YACL,uBAAuB,EAAE,uBAAuB;YAChD,eAAe,EAAE,MAAA,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,MAAM,CAAC,UAAU,CAAC,EAAE,CAAC,UAAU,CAAC,KAAK,EAAE,GAAG,EAAE,0CAAE,KAAK;SACxF,CAAC;IACJ,CAAC,EAAE,CAAC,iBAAiB,EAAE,uBAAuB,CAAC,CAAC,CAAC;IACjD,OAAO,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,oBAAoB,CAAC;QACtD,oBAAC,aAAa,oBAAK,kBAAkB,EAAI;QACzC,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,uBAAuB,CAAC;gBACtD,KAAK;gBACL,eAAe,EAAE,CAAC,CAAC,YAAY;gBAC/B,QAAQ,EAAE,CAAC,CAAC,QAAQ;aACrB,CAAC,CAAC;YACC,oBAAC,iBAAiB,IAAC,SAAS,EAAE,SAAS,gBAAc,GAAG,CAAC,gBAAgB,EAAE,cAAc,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY,EAAE,YAAY,EAAE,gBAAgB,EAAE,EAAE,EAAC,SAAS,EAAC,cAAc,EAAE,YAAY,EAAE,eAAe,EAAE,OAAO,CAAC,eAAe,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE;oBAC7X,QAAQ,IAAI,QAAQ,EAAE,CAAC;gBACzB,CAAC,EAAE,cAAc,EAAE,GAAG,EAAE;oBACtB,kBAAkB,EAAE,CAAC;gBACvB,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,SAAS,EAAE,yBAAyB;gBACzF,oBAAC,eAAe,IAAC,YAAY,EAAE,gBAAgB,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE;wBAC9D,IAAI,CAAC,iBAAiB,EAAE;4BACtB,kBAAkB,EAAE,CAAC;yBACtB;wBAED,CAAC,CAAC,eAAe,EAAE,CAAC;oBACtB,CAAC,EAAE,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAE,qBAAqB,EAAE,SAAS,EAAE,aAAa,CAAC,mBAAmB,EAAE,cAAc,EAAE,aAAa,CAAC,mBAAmB,GAAI,CAC3I,CAEd,CACF,CAAC;AACb,CAAC,CAAC;AACF;;GAEG;AAEH,MAAM,wBAAwB,GAAG,CAAC,KAAmB,EAAW,EAAE;IAChE,MAAM,iBAAiB,GAAG,2BAA2B,CAAC,KAAK,CAAC,CAAC;IAC7D,OAAO,CAAC,CAAC,CAAC,CAAA,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,MAAM,KAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,CAAC;AACpJ,CAAC,CAAC;AAEF,MAAM,OAAO,GAAG,CAAC,KAAmB,EAAW,EAAE;IAC/C,MAAM,iBAAiB,GAAG,2BAA2B,CAAC,KAAK,CAAC,CAAC;IAC7D,OAAO,CAAC,CAAC,CAAA,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA,CAAC;IACtD,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,OAAe,EAAU,EAAE;IAC/C,IAAI,mBAAmB,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;QACrC,OAAO,EAAE,CAAC;KACX;SAAM;QACL,OAAO,OAAO,CAAC;KAChB;AACH,CAAC,CAAC;AAEF,MAAM,2BAA2B,GAAG,CAAC,KAAmB,EAAkC,EAAE;IAC1F,OAAO,EAAE,CAAC;AACZ,CAAC,CAAC"}
+{"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 {\n  sendBoxStyle,\n  sendButtonStyle,\n  sendIconStyle,\n  sendBoxWrapperStyles,\n  borderAndBoxShadowStyle\n} from './styles/SendBox.styles';\nimport { BaseCustomStyles } from '../types';\nimport { useTheme } from '../theming';\nimport { useLocale } from '../localization';\nimport { useIdentifiers } from '../identifiers';\nimport { InputBoxComponent } from './InputBoxComponent';\nimport { VoiceOverButton } from './VoiceOverButton';\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\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 callback called when message is sent\n   */\n  onSendMessage?: (content: string) => Promise<void>;\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   * veritcally to accomodate 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 attibutes\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  } = 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    // we dont 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(textValue) || hasFile(props)) {\n      onSendMessage && onSendMessage(sanitizeText(textValue));\n      setTextValue('');\n    }\n    sendTextFieldRef.current?.focus();\n  };\n\n  const setText = (\n    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,\n    newValue?: string | undefined\n  ): 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 className={mergeStyles(sendBoxWrapperStyles)}>\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          inlineChildren={true}\n          disabled={disabled}\n          errorMessage={onRenderSystemMessage ? onRenderSystemMessage(errorMessage) : errorMessage}\n          textFieldRef={sendTextFieldRef}\n          id=\"sendbox\"\n          inputClassName={sendBoxStyle}\n          placeholderText={strings.placeholderText}\n          textValue={textValue}\n          onChange={setText}\n          onKeyDown={() => {\n            onTyping && onTyping();\n          }}\n          onEnterKeyDown={() => {\n            sendMessageOnClick();\n          }}\n          styles={mergedStyles}\n          supportNewline={supportNewline}\n          maxLength={MAXIMUM_LENGTH_OF_MESSAGE}\n        >\n          <VoiceOverButton\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

@@ -8,7 +8,8 @@ import { Announcer } from './Announcer';
  */
 export const SendBoxErrorBar = (props) => {
     const { error, dismissAfterMs, onDismiss } = props;
-    const [errorMessage, setErrorMessage] = React.useState(error === null || error === void 0 ? void 0 : error.message); // Using `any` because `NodeJS.Timeout` here will cause `declaration error` with jest.
+    const [errorMessage, setErrorMessage] = React.useState(error === null || error === void 0 ? void 0 : error.message);
+    // Using `any` because `NodeJS.Timeout` here will cause `declaration error` with jest.
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const timeoutRef = React.useRef();
     React.useEffect(() => {
@@ -26,13 +27,13 @@ export const SendBoxErrorBar = (props) => {
         };
     }, [dismissAfterMs, onDismiss, error]);
     if (errorMessage) {
-        return React.createElement(React.Fragment, null,
+        return (React.createElement(React.Fragment, null,
             React.createElement(Announcer, { announcementString: errorMessage, ariaLive: 'polite' }),
             React.createElement(MessageBar, { messageBarType: MessageBarType.warning, styles: {
                     iconContainer: {
                         display: 'none'
                     }
-                } }, errorMessage));
+                } }, errorMessage)));
     }
     else {
         return React.createElement(React.Fragment, null);

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

@@ -1 +1 @@
-{"version":3,"file":"SendBoxErrorBar.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/SendBoxErrorBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,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;AAkCxC;;GAEG;AAEH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;IAC1E,MAAM,EACJ,KAAK,EACL,cAAc,EACd,SAAS,EACV,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC,CAAC,CAAC,sFAAsF;IAC9J,8DAA8D;IAE9D,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,EAAO,CAAC;IACvC,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;IACZ,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;QAED,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;YACH,oBAAC,SAAS,IAAC,kBAAkB,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,GAAI;YACnE,oBAAC,UAAU,IAAC,cAAc,EAAE,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE;oBAC5D,aAAa,EAAE;wBACb,OAAO,EAAE,MAAM;qBAChB;iBACF,IACI,YAAY,CACF,CACZ,CAAC;KACP;SAAM;QACL,OAAO,yCAAK,CAAC;KACd;AACH,CAAC,CAAC"}
+{"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"]}

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

@@ -1 +1 @@
-{"version":3,"file":"SendBoxErrors.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/SendBoxErrors.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAwB,MAAM,mBAAmB,CAAC;AAS1E;;GAEG;AAEH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAe,EAAE;IACtE,MAAM,EACJ,eAAe,EACf,uBAAuB,EACxB,GAAG,KAAK,CAAC;IACV,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;QAED,OAAO,eAAe,IAAI,uBAAuB,CAAC;IACpD,CAAC,EAAE,CAAC,eAAe,EAAE,uBAAuB,CAAC,CAAC,CAAC;IAC/C,OAAO,oBAAC,eAAe,IAAC,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,EAAE,GAAG,IAAI,GAAI,CAAC;AAC/E,CAAC,CAAC"}
+{"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"]}