@azure/communication-react 1.24.0-beta.1 → 1.24.0

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

@@ -1 +1 @@
-{"version":3,"file":"ParticipantList.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ParticipantList.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon, IContextualMenuItem, IContextualMenuItemStyles, merge, mergeStyles, PersonaPresence, Stack, Theme } from '@fluentui/react';\nimport { Text } from '@fluentui/react';\nimport { useTheme, CallingTheme } from '../theming';\nimport { RaisedHandIcon } from './assets/RaisedHandIcon';\nimport React, { useCallback, useMemo } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { useLocale } from '../localization';\nimport { BaseCustomStyles, CallParticipantListParticipant, OnRenderAvatarCallback, ParticipantListParticipant } from '../types';\nimport { CustomAvatarOptions } from '../types';\nimport { formatParticipantStateString, ParticipantItem, ParticipantItemStrings, ParticipantItemStyles } from './ParticipantItem';\nimport { iconStyles, participantListItemStyle, participantListStyle } from './styles/ParticipantList.styles';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/**\n * Styles for the {@link ParticipantList} {@link ParticipantItem}.\n *\n * @public\n */\nexport interface ParticipantListItemStyles extends ParticipantItemStyles {\n  /** Styles applied to the sub-menu of the {@link ParticipantList} {@link ParticipantItem}. */\n  participantSubMenuItemsStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Styles for the {@link ParticipantList}.\n *\n * @public\n */\nexport interface ParticipantListStyles extends BaseCustomStyles {\n  /** Styles for the {@link ParticipantList} {@link ParticipantItem}. */\n  participantItemStyles?: ParticipantListItemStyles;\n}\n/**\n * Strings for the {@link ParticipantList}.\n *\n * @beta\n */\nexport interface ParticipantListStrings {\n  /**\n   * String for rendering the count of participants not contained in the displayed participant list\n   */\n  overflowParticipantCount?: string;\n}\n\n/**\n * A callback for providing custom menu items for each participant in {@link ParticipantList}.\n *\n * @public\n */\nexport type ParticipantMenuItemsCallback = (participantUserId: string, userId?: string, defaultMenuItems?: IContextualMenuItem[]) => IContextualMenuItem[];\n\n/**\n * Props for {@link ParticipantList}.\n *\n * @public\n */\nexport type ParticipantListProps = {\n  /** Participants in user call or chat */\n  participants: ParticipantListParticipant[];\n  /** User ID of user */\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  /** Optional callback to render each participant. If no callback is provided, each participant will be rendered with `ParticipantItem`  */\n  onRenderParticipant?: (participant: ParticipantListParticipant) => JSX.Element | null;\n  /** Optional callback to render the avatar for each participant. This property will have no effect if `onRenderParticipant` is assigned.  */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /** Optional callback to render the context menu for each participant  */\n  onRemoveParticipant?: (userId: string) => void;\n  /** Optional callback to render custom menu items for each participant. */\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  /** Optional callback when rendered ParticipantItem is clicked */\n  onParticipantClick?: (participant?: ParticipantListParticipant) => void;\n  /** Optional callback to render a context menu to mute a participant */\n  onMuteParticipant?: (userId: string) => Promise<void>;\n  styles?: ParticipantListStyles;\n  /** Optional value to determine if the tooltip should be shown for participants or not */\n  showParticipantOverflowTooltip?: boolean;\n  /** Total number of people in the call. This number can be larger than the remote participant count. */\n  totalParticipantCount?: number;\n  /** Strings for the participant list */\n  strings?: ParticipantListStrings;\n  /** Optional aria-labelledby prop that prefixes each ParticipantItem aria-label */\n  participantAriaLabelledBy?: string;\n  /** List of pinned participants */\n  pinnedParticipants?: string[];\n};\nconst onRenderParticipantDefault = (participant: ParticipantListParticipant, strings: ParticipantItemStrings, myUserId?: string, onRenderAvatar?: OnRenderAvatarCallback, createParticipantMenuItems?: (participant: ParticipantListParticipant) => IContextualMenuItem[], styles?: ParticipantListItemStyles, onParticipantClick?: (participant?: ParticipantListParticipant) => void, showParticipantOverflowTooltip?: boolean, participantAriaLabelledBy?: string, theme?: Theme, pinnedParticipants?: string[]): JSX.Element | null => {\n  const callingParticipant = participant as CallParticipantListParticipant;\n  let presence: PersonaPresence | undefined = undefined;\n  if (callingParticipant) {\n    presence = PersonaPresence.none;\n  }\n  const menuItems = createParticipantMenuItems && createParticipantMenuItems(participant);\n  const formatDisplayName = (displayName?: string): string | undefined => {\n    if (displayName && strings.attendeeRole) {\n      return _formatString(displayName, {\n        AttendeeRole: strings.attendeeRole\n      });\n    }\n    return displayName;\n  };\n  const displayName = formatDisplayName(participant.displayName);\n  const callingPalette = (theme as unknown as CallingTheme).callingPalette;\n  const isPinned = pinnedParticipants && pinnedParticipants?.includes(participant.userId);\n  const isScreenSharing = callingParticipant?.isScreenSharing;\n  const isMuted = callingParticipant?.isMuted;\n  const hasRaisedHand = callingParticipant?.raisedHand;\n  const isAudioPermitted = callingParticipant?.mediaAccess ? callingParticipant.mediaAccess.isAudioPermitted : true;\n  const isVideoPermitted = callingParticipant?.mediaAccess ? callingParticipant.mediaAccess.isVideoPermitted : true;\n  const shouldRenderParticipantIcon = isScreenSharing || isMuted || hasRaisedHand || isPinned || !isAudioPermitted || !isVideoPermitted;\n  const onRenderIcon = shouldRenderParticipantIcon ? () => <Stack horizontal={true} tokens={{\n    childrenGap: '0.5rem'\n  }}>\n          {callingParticipant.raisedHand && <Stack horizontal={true} tokens={{\n      childrenGap: '0.2rem'\n    }} style={{\n      alignItems: 'center',\n      padding: '0.1rem 0.2rem',\n      backgroundColor: theme?.palette.neutralLighter,\n      borderRadius: '0.3rem'\n    }}>\n              {callingParticipant.raisedHand.raisedHandOrderPosition && <Stack.Item>\n                  <Text>{callingParticipant.raisedHand?.raisedHandOrderPosition}</Text>\n                </Stack.Item>}\n              <Stack.Item>\n                <RaisedHandIcon />\n              </Stack.Item>\n            </Stack>}\n          {callingParticipant.isScreenSharing && <Icon iconName=\"ParticipantItemScreenShareStart\" className={iconStyles} ariaLabel={strings.sharingIconLabel} />}\n          {callingParticipant.spotlight && <Icon iconName=\"ParticipantItemSpotlighted\" className={iconStyles} />}\n          {isPinned && <Icon iconName=\"ParticipantItemPinned\" className={iconStyles} />}\n          {callingParticipant.mediaAccess && !callingParticipant.mediaAccess.isVideoPermitted ? <Icon iconName=\"ControlButtonCameraProhibited\" className={iconStyles} ariaLabel={strings.mutedIconLabel} /> : undefined}\n          {callingParticipant.mediaAccess && !callingParticipant.mediaAccess?.isAudioPermitted ? <Icon iconName=\"ControlButtonMicProhibited\" className={iconStyles} ariaLabel={strings.mutedIconLabel} /> : undefined}\n          {(callingParticipant.mediaAccess ? callingParticipant.mediaAccess.isAudioPermitted : true) && callingParticipant.isMuted ? <Icon iconName=\"ParticipantItemMicOff\" className={iconStyles} ariaLabel={strings.mutedIconLabel} /> : undefined}\n        </Stack> : () => null;\n  const onRenderAvatarWithRaiseHand = callingParticipant?.raisedHand && onRenderAvatar ? (userId?: string, options?: CustomAvatarOptions, defaultOnRender?: (props: CustomAvatarOptions) => JSX.Element) => onRenderAvatar(userId, {\n    ...options,\n    styles: {\n      root: {\n        border: callingPalette.raiseHandGold\n      }\n    }\n  }, defaultOnRender) : onRenderAvatar;\n  const ariaLabelTemplate = (menuItems && menuItems.length > 0 ? strings?.participantItemWithMoreOptionsAriaLabel : undefined) ?? strings?.participantItemAriaLabel;\n  const ariaLabel = _formatString(ariaLabelTemplate ?? '', {\n    displayName: displayName ?? '',\n    connectionState: formatParticipantStateString(callingParticipant, strings) ?? '',\n    mutedState: (callingParticipant.isMuted ? strings?.mutedIconLabel : undefined) ?? '',\n    micDisabledState: (callingParticipant.mediaAccess?.isAudioPermitted === false ? strings?.micDisabledIconLabel : undefined) ?? '',\n    cameraDisabledState: (callingParticipant.mediaAccess?.isVideoPermitted === false ? strings?.cameraDisabledIconLabel : undefined) ?? '',\n    sharingState: (callingParticipant.isScreenSharing ? strings?.sharingIconLabel : undefined) ?? '',\n    handRaisedState: (callingParticipant.raisedHand?.raisedHandOrderPosition ? _formatString(strings?.handRaisedIconLabel ?? '', {\n      position: callingParticipant.raisedHand?.raisedHandOrderPosition?.toString() ?? ''\n    }) : undefined) ?? ''\n  });\n  return <ParticipantItem styles={styles} key={participant.userId} userId={participant.userId} displayName={displayName} me={myUserId ? participant.userId === myUserId : false} menuItems={menuItems} presence={presence} onRenderIcon={onRenderIcon} onRenderAvatar={onRenderAvatarWithRaiseHand} onClick={onParticipantClick ? () => onParticipantClick?.(participant) : undefined} showParticipantOverflowTooltip={showParticipantOverflowTooltip} participantState={callingParticipant.state} ariaLabelledBy={participantAriaLabelledBy} strings={{\n    participantItemAriaLabel: ariaLabel\n  }} />;\n};\n\n/**\n * Sort participants by raised hand order position\n */\nconst sortParticipants = (participants: ParticipantListParticipant[]): ParticipantListParticipant[] => {\n  const isParticipantListCallParticipant = function (participant: ParticipantListParticipant): boolean {\n    return 'raisedHand' in participant;\n  };\n  participants.sort((a, b) => {\n    if (!isParticipantListCallParticipant(a) || !isParticipantListCallParticipant(b)) {\n      return 0;\n    }\n    const callA = a as CallParticipantListParticipant;\n    const callB = b as CallParticipantListParticipant;\n    if (callA.raisedHand && callB.raisedHand) {\n      return callA.raisedHand.raisedHandOrderPosition - callB.raisedHand.raisedHandOrderPosition;\n    } else if (callA.raisedHand) {\n      return -1;\n    } else if (callB.raisedHand) {\n      return 1;\n    }\n    return 0;\n  });\n  return participants;\n};\nconst getParticipantsForDefaultRender = (participants: ParticipantListParticipant[], excludeMe: boolean, myUserId: string | undefined): ParticipantListParticipant[] => {\n  if (!excludeMe || !myUserId) {\n    return [...participants];\n  }\n  const userIndex = participants.map(p => p.userId).indexOf(myUserId);\n  if (userIndex === -1) {\n    return [...participants];\n  }\n  const remoteParticipants = [...participants];\n  remoteParticipants.splice(userIndex, 1);\n  return remoteParticipants;\n};\n\n/**\n * Component to render all calling or chat participants.\n *\n * By default, each participant is rendered with {@link ParticipantItem}. See {@link ParticipantListProps.onRenderParticipant} to override.\n *\n * @public\n */\nexport const ParticipantList = (props: ParticipantListProps): JSX.Element => {\n  const {\n    excludeMe = false,\n    myUserId,\n    participants,\n    onRemoveParticipant,\n    onRenderAvatar,\n    onRenderParticipant,\n    onFetchParticipantMenuItems,\n    showParticipantOverflowTooltip,\n    totalParticipantCount,\n    strings,\n    participantAriaLabelledBy,\n    pinnedParticipants\n  } = props;\n  const theme = useTheme();\n  const ids = useIdentifiers();\n  const participantItemStrings = useLocale().strings.participantItem;\n  const participantListStrings = useLocale().strings.ParticipantList;\n  const displayedParticipants: ParticipantListParticipant[] = useMemo(() => {\n    return onRenderParticipant ? participants : getParticipantsForDefaultRender(participants, excludeMe, myUserId);\n  }, [participants, excludeMe, myUserId, onRenderParticipant]);\n  sortParticipants(displayedParticipants);\n  const createParticipantMenuItems = useCallback((participant: ParticipantListParticipant): IContextualMenuItem[] => {\n    let menuItems: IContextualMenuItem[] = [];\n    const participantIsRemovable = participant.isRemovable;\n    if (participant.userId !== myUserId && onRemoveParticipant && participantIsRemovable) {\n      menuItems.push({\n        key: 'remove',\n        text: participantItemStrings.removeButtonLabel,\n        onClick: () => onRemoveParticipant(participant.userId),\n        itemProps: {\n          styles: props.styles?.participantItemStyles?.participantSubMenuItemsStyles\n        },\n        iconProps: {\n          iconName: 'ContextMenuRemoveParticipant',\n          styles: {\n            root: {\n              lineHeight: 0\n            }\n          }\n        },\n        'data-ui-id': ids.participantListRemoveParticipantButton\n      });\n    }\n    if (onFetchParticipantMenuItems) {\n      menuItems = onFetchParticipantMenuItems(participant.userId, myUserId, menuItems);\n    }\n    return menuItems;\n  }, [ids.participantListRemoveParticipantButton, myUserId, onFetchParticipantMenuItems, onRemoveParticipant, props.styles?.participantItemStyles?.participantSubMenuItemsStyles, participantItemStrings.removeButtonLabel]);\n  const participantItemStyles = useMemo(() => merge(participantListItemStyle, props.styles?.participantItemStyles), [props.styles?.participantItemStyles]);\n  const overflowParticipantCountString = strings?.overflowParticipantCount ?? participantListStrings?.overflowParticipantCount;\n  return <Stack data-ui-id={ids.participantList} className={mergeStyles(participantListStyle, props.styles?.root)} role={'menu'}>\n      {displayedParticipants.map((participant: ParticipantListParticipant) => onRenderParticipant ? onRenderParticipant(participant) : onRenderParticipantDefault(participant, participantItemStrings, myUserId, onRenderAvatar, createParticipantMenuItems, participantItemStyles, props.onParticipantClick, showParticipantOverflowTooltip, participantAriaLabelledBy, theme, pinnedParticipants))}\n      {overflowParticipantCountString && totalParticipantCount && totalParticipantCount > displayedParticipants.length && <Text style={{\n      fontWeight: 400,\n      margin: '0.5rem'\n    }}>\n              {_formatString(overflowParticipantCountString, {\n        overflowCount: `${totalParticipantCount - displayedParticipants.length}`\n      })}\n            </Text>}\n    </Stack>;\n};"]}
+{"version":3,"file":"ParticipantList.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ParticipantList.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon, IContextualMenuItem, IContextualMenuItemStyles, merge, mergeStyles, PersonaPresence, Stack, Theme } from '@fluentui/react';\nimport { Text } from '@fluentui/react';\nimport { useTheme, CallingTheme } from '../theming';\nimport { RaisedHandIcon } from './assets/RaisedHandIcon';\nimport React, { useCallback, useMemo } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { useLocale } from '../localization';\nimport { BaseCustomStyles, CallParticipantListParticipant, OnRenderAvatarCallback, ParticipantListParticipant } from '../types';\nimport { CustomAvatarOptions } from '../types';\nimport { formatParticipantStateString, ParticipantItem, ParticipantItemStrings, ParticipantItemStyles } from './ParticipantItem';\nimport { iconStyles, participantListItemStyle, participantListStyle } from './styles/ParticipantList.styles';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/**\n * Styles for the {@link ParticipantList} {@link ParticipantItem}.\n *\n * @public\n */\nexport interface ParticipantListItemStyles extends ParticipantItemStyles {\n  /** Styles applied to the sub-menu of the {@link ParticipantList} {@link ParticipantItem}. */\n  participantSubMenuItemsStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Styles for the {@link ParticipantList}.\n *\n * @public\n */\nexport interface ParticipantListStyles extends BaseCustomStyles {\n  /** Styles for the {@link ParticipantList} {@link ParticipantItem}. */\n  participantItemStyles?: ParticipantListItemStyles;\n}\n/**\n * A callback for providing custom menu items for each participant in {@link ParticipantList}.\n *\n * @public\n */\nexport type ParticipantMenuItemsCallback = (participantUserId: string, userId?: string, defaultMenuItems?: IContextualMenuItem[]) => IContextualMenuItem[];\n\n/**\n * Props for {@link ParticipantList}.\n *\n * @public\n */\nexport type ParticipantListProps = {\n  /** Participants in user call or chat */\n  participants: ParticipantListParticipant[];\n  /** User ID of user */\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  /** Optional callback to render each participant. If no callback is provided, each participant will be rendered with `ParticipantItem`  */\n  onRenderParticipant?: (participant: ParticipantListParticipant) => JSX.Element | null;\n  /** Optional callback to render the avatar for each participant. This property will have no effect if `onRenderParticipant` is assigned.  */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /** Optional callback to render the context menu for each participant  */\n  onRemoveParticipant?: (userId: string) => void;\n  /** Optional callback to render custom menu items for each participant. */\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  /** Optional callback when rendered ParticipantItem is clicked */\n  onParticipantClick?: (participant?: ParticipantListParticipant) => void;\n  /** Optional callback to render a context menu to mute a participant */\n  onMuteParticipant?: (userId: string) => Promise<void>;\n  styles?: ParticipantListStyles;\n  /** Optional value to determine if the tooltip should be shown for participants or not */\n  showParticipantOverflowTooltip?: boolean;\n  /** Optional aria-labelledby prop that prefixes each ParticipantItem aria-label */\n  participantAriaLabelledBy?: string;\n  /** List of pinned participants */\n  pinnedParticipants?: string[];\n};\nconst onRenderParticipantDefault = (participant: ParticipantListParticipant, strings: ParticipantItemStrings, myUserId?: string, onRenderAvatar?: OnRenderAvatarCallback, createParticipantMenuItems?: (participant: ParticipantListParticipant) => IContextualMenuItem[], styles?: ParticipantListItemStyles, onParticipantClick?: (participant?: ParticipantListParticipant) => void, showParticipantOverflowTooltip?: boolean, participantAriaLabelledBy?: string, theme?: Theme, pinnedParticipants?: string[]): JSX.Element | null => {\n  const callingParticipant = participant as CallParticipantListParticipant;\n  let presence: PersonaPresence | undefined = undefined;\n  if (callingParticipant) {\n    presence = PersonaPresence.none;\n  }\n  const menuItems = createParticipantMenuItems && createParticipantMenuItems(participant);\n  const formatDisplayName = (displayName?: string): string | undefined => {\n    if (displayName && strings.attendeeRole) {\n      return _formatString(displayName, {\n        AttendeeRole: strings.attendeeRole\n      });\n    }\n    return displayName;\n  };\n  const displayName = formatDisplayName(participant.displayName);\n  const callingPalette = (theme as unknown as CallingTheme).callingPalette;\n  const isPinned = pinnedParticipants && pinnedParticipants?.includes(participant.userId);\n  const isScreenSharing = callingParticipant?.isScreenSharing;\n  const isMuted = callingParticipant?.isMuted;\n  const hasRaisedHand = callingParticipant?.raisedHand;\n  const isAudioPermitted = callingParticipant?.mediaAccess ? callingParticipant.mediaAccess.isAudioPermitted : true;\n  const isVideoPermitted = callingParticipant?.mediaAccess ? callingParticipant.mediaAccess.isVideoPermitted : true;\n  const shouldRenderParticipantIcon = isScreenSharing || isMuted || hasRaisedHand || isPinned || !isAudioPermitted || !isVideoPermitted;\n  const onRenderIcon = shouldRenderParticipantIcon ? () => <Stack horizontal={true} tokens={{\n    childrenGap: '0.5rem'\n  }}>\n          {callingParticipant.raisedHand && <Stack horizontal={true} tokens={{\n      childrenGap: '0.2rem'\n    }} style={{\n      alignItems: 'center',\n      padding: '0.1rem 0.2rem',\n      backgroundColor: theme?.palette.neutralLighter,\n      borderRadius: '0.3rem'\n    }}>\n              {callingParticipant.raisedHand.raisedHandOrderPosition && <Stack.Item>\n                  <Text>{callingParticipant.raisedHand?.raisedHandOrderPosition}</Text>\n                </Stack.Item>}\n              <Stack.Item>\n                <RaisedHandIcon />\n              </Stack.Item>\n            </Stack>}\n          {callingParticipant.isScreenSharing && <Icon iconName=\"ParticipantItemScreenShareStart\" className={iconStyles} ariaLabel={strings.sharingIconLabel} />}\n          {callingParticipant.spotlight && <Icon iconName=\"ParticipantItemSpotlighted\" className={iconStyles} />}\n          {isPinned && <Icon iconName=\"ParticipantItemPinned\" className={iconStyles} />}\n          {callingParticipant.mediaAccess && !callingParticipant.mediaAccess.isVideoPermitted ? <Icon iconName=\"ControlButtonCameraProhibited\" className={iconStyles} ariaLabel={strings.mutedIconLabel} /> : undefined}\n          {callingParticipant.mediaAccess && !callingParticipant.mediaAccess?.isAudioPermitted ? <Icon iconName=\"ControlButtonMicProhibited\" className={iconStyles} ariaLabel={strings.mutedIconLabel} /> : undefined}\n          {(callingParticipant.mediaAccess ? callingParticipant.mediaAccess.isAudioPermitted : true) && callingParticipant.isMuted ? <Icon iconName=\"ParticipantItemMicOff\" className={iconStyles} ariaLabel={strings.mutedIconLabel} /> : undefined}\n        </Stack> : () => null;\n  const onRenderAvatarWithRaiseHand = callingParticipant?.raisedHand && onRenderAvatar ? (userId?: string, options?: CustomAvatarOptions, defaultOnRender?: (props: CustomAvatarOptions) => JSX.Element) => onRenderAvatar(userId, {\n    ...options,\n    styles: {\n      root: {\n        border: callingPalette.raiseHandGold\n      }\n    }\n  }, defaultOnRender) : onRenderAvatar;\n  const ariaLabelTemplate = (menuItems && menuItems.length > 0 ? strings?.participantItemWithMoreOptionsAriaLabel : undefined) ?? strings?.participantItemAriaLabel;\n  const ariaLabel = _formatString(ariaLabelTemplate ?? '', {\n    displayName: displayName ?? '',\n    connectionState: formatParticipantStateString(callingParticipant, strings) ?? '',\n    mutedState: (callingParticipant.isMuted ? strings?.mutedIconLabel : undefined) ?? '',\n    micDisabledState: (callingParticipant.mediaAccess?.isAudioPermitted === false ? strings?.micDisabledIconLabel : undefined) ?? '',\n    cameraDisabledState: (callingParticipant.mediaAccess?.isVideoPermitted === false ? strings?.cameraDisabledIconLabel : undefined) ?? '',\n    sharingState: (callingParticipant.isScreenSharing ? strings?.sharingIconLabel : undefined) ?? '',\n    handRaisedState: (callingParticipant.raisedHand?.raisedHandOrderPosition ? _formatString(strings?.handRaisedIconLabel ?? '', {\n      position: callingParticipant.raisedHand?.raisedHandOrderPosition?.toString() ?? ''\n    }) : undefined) ?? ''\n  });\n  return <ParticipantItem styles={styles} key={participant.userId} userId={participant.userId} displayName={displayName} me={myUserId ? participant.userId === myUserId : false} menuItems={menuItems} presence={presence} onRenderIcon={onRenderIcon} onRenderAvatar={onRenderAvatarWithRaiseHand} onClick={onParticipantClick ? () => onParticipantClick?.(participant) : undefined} showParticipantOverflowTooltip={showParticipantOverflowTooltip} participantState={callingParticipant.state} ariaLabelledBy={participantAriaLabelledBy} strings={{\n    participantItemAriaLabel: ariaLabel\n  }} />;\n};\n\n/**\n * Sort participants by raised hand order position\n */\nconst sortParticipants = (participants: ParticipantListParticipant[]): ParticipantListParticipant[] => {\n  const isParticipantListCallParticipant = function (participant: ParticipantListParticipant): boolean {\n    return 'raisedHand' in participant;\n  };\n  participants.sort((a, b) => {\n    if (!isParticipantListCallParticipant(a) || !isParticipantListCallParticipant(b)) {\n      return 0;\n    }\n    const callA = a as CallParticipantListParticipant;\n    const callB = b as CallParticipantListParticipant;\n    if (callA.raisedHand && callB.raisedHand) {\n      return callA.raisedHand.raisedHandOrderPosition - callB.raisedHand.raisedHandOrderPosition;\n    } else if (callA.raisedHand) {\n      return -1;\n    } else if (callB.raisedHand) {\n      return 1;\n    }\n    return 0;\n  });\n  return participants;\n};\nconst getParticipantsForDefaultRender = (participants: ParticipantListParticipant[], excludeMe: boolean, myUserId: string | undefined): ParticipantListParticipant[] => {\n  if (!excludeMe || !myUserId) {\n    return [...participants];\n  }\n  const userIndex = participants.map(p => p.userId).indexOf(myUserId);\n  if (userIndex === -1) {\n    return [...participants];\n  }\n  const remoteParticipants = [...participants];\n  remoteParticipants.splice(userIndex, 1);\n  return remoteParticipants;\n};\n\n/**\n * Component to render all calling or chat participants.\n *\n * By default, each participant is rendered with {@link ParticipantItem}. See {@link ParticipantListProps.onRenderParticipant} to override.\n *\n * @public\n */\nexport const ParticipantList = (props: ParticipantListProps): JSX.Element => {\n  const {\n    excludeMe = false,\n    myUserId,\n    participants,\n    onRemoveParticipant,\n    onRenderAvatar,\n    onRenderParticipant,\n    onFetchParticipantMenuItems,\n    showParticipantOverflowTooltip,\n    participantAriaLabelledBy,\n    pinnedParticipants\n  } = props;\n  const theme = useTheme();\n  const ids = useIdentifiers();\n  const participantItemStrings = useLocale().strings.participantItem;\n  const displayedParticipants: ParticipantListParticipant[] = useMemo(() => {\n    return onRenderParticipant ? participants : getParticipantsForDefaultRender(participants, excludeMe, myUserId);\n  }, [participants, excludeMe, myUserId, onRenderParticipant]);\n  sortParticipants(displayedParticipants);\n  const createParticipantMenuItems = useCallback((participant: ParticipantListParticipant): IContextualMenuItem[] => {\n    let menuItems: IContextualMenuItem[] = [];\n    const participantIsRemovable = participant.isRemovable;\n    if (participant.userId !== myUserId && onRemoveParticipant && participantIsRemovable) {\n      menuItems.push({\n        key: 'remove',\n        text: participantItemStrings.removeButtonLabel,\n        onClick: () => onRemoveParticipant(participant.userId),\n        itemProps: {\n          styles: props.styles?.participantItemStyles?.participantSubMenuItemsStyles\n        },\n        iconProps: {\n          iconName: 'ContextMenuRemoveParticipant',\n          styles: {\n            root: {\n              lineHeight: 0\n            }\n          }\n        },\n        'data-ui-id': ids.participantListRemoveParticipantButton\n      });\n    }\n    if (onFetchParticipantMenuItems) {\n      menuItems = onFetchParticipantMenuItems(participant.userId, myUserId, menuItems);\n    }\n    return menuItems;\n  }, [ids.participantListRemoveParticipantButton, myUserId, onFetchParticipantMenuItems, onRemoveParticipant, props.styles?.participantItemStyles?.participantSubMenuItemsStyles, participantItemStrings.removeButtonLabel]);\n  const participantItemStyles = useMemo(() => merge(participantListItemStyle, props.styles?.participantItemStyles), [props.styles?.participantItemStyles]);\n  return <Stack data-ui-id={ids.participantList} className={mergeStyles(participantListStyle, props.styles?.root)} role={'menu'}>\n      {displayedParticipants.map((participant: ParticipantListParticipant) => onRenderParticipant ? onRenderParticipant(participant) : onRenderParticipantDefault(participant, participantItemStrings, myUserId, onRenderAvatar, createParticipantMenuItems, participantItemStyles, props.onParticipantClick, showParticipantOverflowTooltip, participantAriaLabelledBy, theme, pinnedParticipants))}\n      {}\n    </Stack>;\n};"]}

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

@@ -3,7 +3,7 @@
 import React from 'react';
 import { useLocale } from '../localization';
 import { ControlBarButton } from './ControlBarButton';
-import { DefaultPalette, mergeStyles, useTheme } from '@fluentui/react';
+import { concatStyleSets, DefaultPalette, useTheme } from '@fluentui/react';
 import { _HighContrastAwareIcon } from './HighContrastAwareIcon';
 /**
  * A button to start / stop screen sharing.
@@ -20,7 +20,7 @@ export const RaiseHandButton = (props) => {
     const styles = raiseHandButtonStyles(theme);
     const onRenderRaiseHandIcon = () => React.createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "ControlButtonRaiseHand" });
     const onRenderLowerHandIcon = () => React.createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "ControlButtonLowerHand" });
-    return React.createElement(ControlBarButton, Object.assign({}, props, { className: mergeStyles(styles, props.styles), onClick: (_a = props.onToggleRaiseHand) !== null && _a !== void 0 ? _a : props.onClick, onRenderOnIcon: (_b = props.onRenderOnIcon) !== null && _b !== void 0 ? _b : onRenderLowerHandIcon, onRenderOffIcon: (_c = props.onRenderOffIcon) !== null && _c !== void 0 ? _c : onRenderRaiseHandIcon, strings: strings, labelKey: (_d = props.labelKey) !== null && _d !== void 0 ? _d : 'raiseHandButtonLabel', "aria-label": props.checked ? strings.onLabel : strings.offLabel, "aria-description": props.checked ? strings.tooltipOnContent : strings.tooltipOffContent, disabled: props.disabled }));
+    return React.createElement(ControlBarButton, Object.assign({}, props, { styles: concatStyleSets(styles, props.styles), onClick: (_a = props.onToggleRaiseHand) !== null && _a !== void 0 ? _a : props.onClick, onRenderOnIcon: (_b = props.onRenderOnIcon) !== null && _b !== void 0 ? _b : onRenderLowerHandIcon, onRenderOffIcon: (_c = props.onRenderOffIcon) !== null && _c !== void 0 ? _c : onRenderRaiseHandIcon, strings: strings, labelKey: (_d = props.labelKey) !== null && _d !== void 0 ? _d : 'raiseHandButtonLabel', "aria-label": props.checked ? strings.onLabel : strings.offLabel, "aria-description": props.checked ? strings.tooltipOnContent : strings.tooltipOffContent, disabled: props.disabled }));
 };
 const raiseHandButtonStyles = (theme) => ({
     rootChecked: {

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

@@ -1 +1 @@
-{"version":3,"file":"RaiseHandButton.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/RaiseHandButton.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,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;;IAC1E,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,eAAe,CAAC;IAC1D,MAAM,OAAO,mCACR,aAAa,GACb,KAAK,CAAC,OAAO,CACjB,CAAC;IACF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,MAAM,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,qBAAqB,GAAG,GAAgB,EAAE,CAAC,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,wBAAwB,GAAG,CAAC;IACxI,MAAM,qBAAqB,GAAG,GAAgB,EAAE,CAAC,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,wBAAwB,GAAG,CAAC;IACxI,OAAO,oBAAC,gBAAgB,oBAAK,KAAK,IAAE,SAAS,EAAE,WAAW,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,MAAA,KAAK,CAAC,iBAAiB,mCAAI,KAAK,CAAC,OAAO,EAAE,cAAc,EAAE,MAAA,KAAK,CAAC,cAAc,mCAAI,qBAAqB,EAAE,eAAe,EAAE,MAAA,KAAK,CAAC,eAAe,mCAAI,qBAAqB,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAA,KAAK,CAAC,QAAQ,mCAAI,sBAAsB,gBAAc,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,sBAAoB,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,OAAO,CAAC,iBAAiB,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,CAAC;AAClgB,CAAC,CAAC;AACF,MAAM,qBAAqB,GAAG,CAAC,KAAY,EAAiB,EAAE,CAAC,CAAC;IAC9D,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,EAAE;SACxC;KACF;IACD,kBAAkB,EAAE;QAClB,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;QACtC,KAAK,EAAE,cAAc,CAAC,KAAK;QAC3B,eAAe,EAAE;YACf,YAAY,EAAE,GAAG,cAAc,CAAC,KAAK,EAAE;SACxC;KACF;IACD,YAAY,EAAE;QACZ,KAAK,EAAE,cAAc,CAAC,KAAK;KAC5B;CACF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { useLocale } from '../localization';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport { DefaultPalette, IButtonStyles, mergeStyles, Theme, useTheme } from '@fluentui/react';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\n\n/**\n * Strings of {@link RaiseHandButton} that can be overridden.\n *\n * @public\n */\nexport interface RaiseHandButtonStrings {\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 RaiseHandButton}.\n *\n * @public\n */\nexport interface RaiseHandButtonProps extends ControlBarButtonProps {\n  /**\n   * Utility property for using this component with `communication react eventHandlers`.\n   * Maps directly to the `onClick` property.\n   */\n  onToggleRaiseHand?: () => Promise<void>;\n\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<RaiseHandButtonStrings>;\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 RaiseHandButton = (props: RaiseHandButtonProps): JSX.Element => {\n  const localeStrings = useLocale().strings.raiseHandButton;\n  const strings = {\n    ...localeStrings,\n    ...props.strings\n  };\n  const theme = useTheme();\n  const styles = raiseHandButtonStyles(theme);\n  const onRenderRaiseHandIcon = (): JSX.Element => <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ControlButtonRaiseHand\" />;\n  const onRenderLowerHandIcon = (): JSX.Element => <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ControlButtonLowerHand\" />;\n  return <ControlBarButton {...props} className={mergeStyles(styles, props.styles)} onClick={props.onToggleRaiseHand ?? props.onClick} onRenderOnIcon={props.onRenderOnIcon ?? onRenderLowerHandIcon} onRenderOffIcon={props.onRenderOffIcon ?? onRenderRaiseHandIcon} strings={strings} labelKey={props.labelKey ?? 'raiseHandButtonLabel'} aria-label={props.checked ? strings.onLabel : strings.offLabel} aria-description={props.checked ? strings.tooltipOnContent : strings.tooltipOffContent} disabled={props.disabled} />;\n};\nconst raiseHandButtonStyles = (theme: Theme): IButtonStyles => ({\n  rootChecked: {\n    background: theme.palette.themePrimary,\n    color: DefaultPalette.white,\n    ':focus::after': {\n      outlineColor: `${DefaultPalette.white}`\n    }\n  },\n  rootCheckedHovered: {\n    background: theme.palette.themePrimary,\n    color: DefaultPalette.white,\n    ':focus::after': {\n      outlineColor: `${DefaultPalette.white}`\n    }\n  },\n  labelChecked: {\n    color: DefaultPalette.white\n  }\n});"]}
+{"version":3,"file":"RaiseHandButton.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/RaiseHandButton.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,eAAe,EAAE,cAAc,EAAwB,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAClG,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAsCjE;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;;IAC1E,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,eAAe,CAAC;IAC1D,MAAM,OAAO,mCACR,aAAa,GACb,KAAK,CAAC,OAAO,CACjB,CAAC;IACF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,MAAM,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,qBAAqB,GAAG,GAAgB,EAAE,CAAC,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,wBAAwB,GAAG,CAAC;IACxI,MAAM,qBAAqB,GAAG,GAAgB,EAAE,CAAC,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,wBAAwB,GAAG,CAAC;IACxI,OAAO,oBAAC,gBAAgB,oBAAK,KAAK,IAAE,MAAM,EAAE,eAAe,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,MAAA,KAAK,CAAC,iBAAiB,mCAAI,KAAK,CAAC,OAAO,EAAE,cAAc,EAAE,MAAA,KAAK,CAAC,cAAc,mCAAI,qBAAqB,EAAE,eAAe,EAAE,MAAA,KAAK,CAAC,eAAe,mCAAI,qBAAqB,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAA,KAAK,CAAC,QAAQ,mCAAI,sBAAsB,gBAAc,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,sBAAoB,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,OAAO,CAAC,iBAAiB,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,CAAC;AACngB,CAAC,CAAC;AACF,MAAM,qBAAqB,GAAG,CAAC,KAAY,EAAiB,EAAE,CAAC,CAAC;IAC9D,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,EAAE;SACxC;KACF;IACD,kBAAkB,EAAE;QAClB,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;QACtC,KAAK,EAAE,cAAc,CAAC,KAAK;QAC3B,eAAe,EAAE;YACf,YAAY,EAAE,GAAG,cAAc,CAAC,KAAK,EAAE;SACxC;KACF;IACD,YAAY,EAAE;QACZ,KAAK,EAAE,cAAc,CAAC,KAAK;KAC5B;CACF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { useLocale } from '../localization';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport { concatStyleSets, DefaultPalette, IButtonStyles, Theme, useTheme } from '@fluentui/react';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\n\n/**\n * Strings of {@link RaiseHandButton} that can be overridden.\n *\n * @public\n */\nexport interface RaiseHandButtonStrings {\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 RaiseHandButton}.\n *\n * @public\n */\nexport interface RaiseHandButtonProps extends ControlBarButtonProps {\n  /**\n   * Utility property for using this component with `communication react eventHandlers`.\n   * Maps directly to the `onClick` property.\n   */\n  onToggleRaiseHand?: () => Promise<void>;\n\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<RaiseHandButtonStrings>;\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 RaiseHandButton = (props: RaiseHandButtonProps): JSX.Element => {\n  const localeStrings = useLocale().strings.raiseHandButton;\n  const strings = {\n    ...localeStrings,\n    ...props.strings\n  };\n  const theme = useTheme();\n  const styles = raiseHandButtonStyles(theme);\n  const onRenderRaiseHandIcon = (): JSX.Element => <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ControlButtonRaiseHand\" />;\n  const onRenderLowerHandIcon = (): JSX.Element => <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ControlButtonLowerHand\" />;\n  return <ControlBarButton {...props} styles={concatStyleSets(styles, props.styles)} onClick={props.onToggleRaiseHand ?? props.onClick} onRenderOnIcon={props.onRenderOnIcon ?? onRenderLowerHandIcon} onRenderOffIcon={props.onRenderOffIcon ?? onRenderRaiseHandIcon} strings={strings} labelKey={props.labelKey ?? 'raiseHandButtonLabel'} aria-label={props.checked ? strings.onLabel : strings.offLabel} aria-description={props.checked ? strings.tooltipOnContent : strings.tooltipOffContent} disabled={props.disabled} />;\n};\nconst raiseHandButtonStyles = (theme: Theme): IButtonStyles => ({\n  rootChecked: {\n    background: theme.palette.themePrimary,\n    color: DefaultPalette.white,\n    ':focus::after': {\n      outlineColor: `${DefaultPalette.white}`\n    }\n  },\n  rootCheckedHovered: {\n    background: theme.palette.themePrimary,\n    color: DefaultPalette.white,\n    ':focus::after': {\n      outlineColor: `${DefaultPalette.white}`\n    }\n  },\n  labelChecked: {\n    color: DefaultPalette.white\n  }\n});"]}

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

@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-import { Callout, DefaultButton, FocusZone, mergeStyles, Stack, TooltipHost, useTheme } from '@fluentui/react';
+import { Callout, concatStyleSets, DefaultButton, FocusZone, mergeStyles, Stack, TooltipHost, useTheme } from '@fluentui/react';
 import React, { useRef, useState } from 'react';
 import { ControlBarButton } from './ControlBarButton';
 import { _HighContrastAwareIcon } from './HighContrastAwareIcon';
@@ -64,6 +64,6 @@ export const ReactionButton = (props) => {
                             }, className: classname, styles: reactionItemButtonStyles, "aria-label": emojiButtonTooltip.get(emoji) }));
                 })))),
         React.createElement("div", { ref: reactionButtonCalloutRef },
-            React.createElement(ControlBarButton, Object.assign({}, props, { componentRef: reactionButtonRef, className: mergeStyles(styles, props.styles), onClick: () => setCalloutIsVisible(!calloutIsVisible), onRenderIcon: (_f = props.onRenderIcon) !== null && _f !== void 0 ? _f : onRenderIcon, strings: strings, split: true, labelKey: (_g = props.labelKey) !== null && _g !== void 0 ? _g : 'reactionButtonLabel', onRenderMenuIcon: () => React.createElement("div", null), disabled: props.disabled, ariaLabel: strings.ariaLabel }))));
+            React.createElement(ControlBarButton, Object.assign({}, props, { componentRef: reactionButtonRef, styles: concatStyleSets(styles, props.styles), onClick: () => setCalloutIsVisible(!calloutIsVisible), onRenderIcon: (_f = props.onRenderIcon) !== null && _f !== void 0 ? _f : onRenderIcon, strings: strings, split: true, labelKey: (_g = props.labelKey) !== null && _g !== void 0 ? _g : 'reactionButtonLabel', onRenderMenuIcon: () => React.createElement("div", null), disabled: props.disabled, ariaLabel: strings.ariaLabel }))));
 };
 //# sourceMappingURL=ReactionButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ReactionButton.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ReactionButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Callout, DefaultButton, FocusZone, IButton, ICalloutContentStyles, mergeStyles, Stack, TooltipHost, useTheme } from '@fluentui/react';\nimport React, { useRef, useState } from 'react';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { useLocale } from '../localization';\nimport { emojiStyles, reactionButtonCalloutStyles, reactionButtonStyles, reactionItemButtonStyles, reactionToolTipHostStyle } from './styles/ReactionButton.styles';\nimport { isDarkThemed } from '../theming/themeUtils';\nimport { ReactionResources } from '..';\nimport { getEmojiFrameCount } from './VideoGallery/utils/videoGalleryLayoutUtils';\nimport { _preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/**\n * Reactions types for the Reaction button\n * @public\n */\nexport type ReactionButtonReaction = 'like' | 'heart' | 'applause' | 'laugh' | 'surprised';\n\n/**\n * Props for {@link ReactionButton}.\n *\n * @public\n */\nexport interface ReactionButtonProps extends ControlBarButtonProps {\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<ReactionButtonStrings>;\n  /**\n   * Click event to send reaction to meeting\n   */\n  onReactionClick: (reaction: ReactionButtonReaction) => Promise<void>;\n  /**\n   * Reaction resource locator and parameters\n   */\n  reactionResources: ReactionResources;\n}\n\n/**\n * Strings of {@link ReactionButton} that can be overridden.\n *\n * @public\n */\nexport interface ReactionButtonStrings {\n  /** Label of the button. */\n  label: string;\n  /** Aria label for reaction button accessibility announcement */\n  ariaLabel: string;\n  /** Tooltip content when the button is disabled. */\n  tooltipDisabledContent?: string;\n  /** Tooltip content when the button is enabled. */\n  tooltipContent?: string;\n  /** Tooltip content of like reaction button. */\n  likeReactionTooltipContent?: string;\n  /** Tooltip content of heart reaction button. */\n  heartReactionTooltipContent?: string;\n  /** Tooltip content of clap reaction button. */\n  applauseReactionTooltipContent?: string;\n  /** Tooltip content of laugh reaction button. */\n  laughReactionTooltipContent?: string;\n  /** Tooltip content of surprised reaction button. */\n  surprisedReactionTooltipContent?: string;\n}\n\n/**\n * A button to send reactions.\n *\n * Can be used with {@link ControlBar}.\n *\n * @public\n */\nexport const ReactionButton = (props: ReactionButtonProps): JSX.Element => {\n  const localeStrings = useLocale().strings.reactionButton;\n  const strings = {\n    ...localeStrings,\n    ...props.strings\n  };\n  const theme = useTheme();\n  const styles = reactionButtonStyles(theme);\n  const onRenderIcon = (): JSX.Element => <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ReactionButtonIcon\" />;\n  const emojis: ReactionButtonReaction[] = ['like', 'heart', 'applause', 'laugh', 'surprised'];\n  const emojiButtonTooltip: Map<string, string | undefined> = new Map([['like', strings.likeReactionTooltipContent], ['heart', strings.heartReactionTooltipContent], ['applause', strings.applauseReactionTooltipContent], ['laugh', strings.laughReactionTooltipContent], ['surprised', strings.surprisedReactionTooltipContent]]);\n  const emojiResource: Map<string, string | undefined> = new Map([['like', props.reactionResources.likeReaction?.url], ['heart', props.reactionResources.heartReaction?.url], ['applause', props.reactionResources.applauseReaction?.url], ['laugh', props.reactionResources.laughReaction?.url], ['surprised', props.reactionResources.surprisedReaction?.url]]);\n  const calloutStyle: Partial<ICalloutContentStyles> = {\n    root: {\n      padding: 0\n    },\n    calloutMain: {\n      padding: '0.5rem'\n    }\n  };\n  const calloutProps = {\n    styles: calloutStyle,\n    backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n  };\n  const reactionButtonCalloutRef = useRef<HTMLDivElement>(null);\n  const reactionButtonRef = useRef<IButton>(null);\n  const [calloutIsVisible, setCalloutIsVisible] = useState(false);\n  return <Stack>\n      {calloutIsVisible && <Callout data-ui-id=\"reaction-sub-menu\" isBeakVisible={false} styles={reactionButtonCalloutStyles} target={reactionButtonCalloutRef.current} onDismiss={() => {\n      reactionButtonRef.current?.focus();\n      setCalloutIsVisible(false);\n    }}>\n          <FocusZone shouldFocusOnMount style={{\n        height: '100%'\n      }}>\n            <Stack horizontal style={{\n          height: 'inherit'\n        }}>\n              {emojis.map((emoji, index) => {\n            const resourceUrl = emojiResource.get(emoji);\n            const frameCount: number = props.reactionResources !== undefined ? getEmojiFrameCount(emoji, props.reactionResources) : 0;\n            const classname = mergeStyles(emojiStyles(resourceUrl ? resourceUrl : '', frameCount));\n            return <TooltipHost key={index} data-ui-id={index} hidden={props.disableTooltip} content={emojiButtonTooltip.get(emoji)} styles={reactionToolTipHostStyle()} calloutProps={{\n              ...calloutProps\n            }}>\n                    <DefaultButton role=\"menuitem\" key={index} onClick={() => {\n                props.onReactionClick(emoji);\n                reactionButtonRef.current?.focus();\n                setCalloutIsVisible(false);\n              }} className={classname} styles={reactionItemButtonStyles} aria-label={emojiButtonTooltip.get(emoji)}></DefaultButton>\n                  </TooltipHost>;\n          })}\n            </Stack>\n          </FocusZone>\n        </Callout>}\n      <div ref={reactionButtonCalloutRef}>\n        <ControlBarButton {...props} componentRef={reactionButtonRef} className={mergeStyles(styles, props.styles)} onClick={() => setCalloutIsVisible(!calloutIsVisible)} onRenderIcon={props.onRenderIcon ?? onRenderIcon} strings={strings} split={true} labelKey={props.labelKey ?? 'reactionButtonLabel'} onRenderMenuIcon={() => <div />} disabled={props.disabled} ariaLabel={strings.ariaLabel} />\n      </div>\n    </Stack>;\n};"]}
+{"version":3,"file":"ReactionButton.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ReactionButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,SAAS,EAAkC,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAChK,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAC7E,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,2BAA2B,EAAE,oBAAoB,EAAE,wBAAwB,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AACpK,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,OAAO,EAAE,kBAAkB,EAAE,MAAM,8CAA8C,CAAC;AAuDlF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAA0B,EAAe,EAAE;;IACxE,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,cAAc,CAAC;IACzD,MAAM,OAAO,mCACR,aAAa,GACb,KAAK,CAAC,OAAO,CACjB,CAAC;IACF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,MAAM,GAAG,oBAAoB,CAAC,KAAK,CAAC,CAAC;IAC3C,MAAM,YAAY,GAAG,GAAgB,EAAE,CAAC,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,oBAAoB,GAAG,CAAC;IAC3H,MAAM,MAAM,GAA6B,CAAC,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,CAAC,CAAC;IAC7F,MAAM,kBAAkB,GAAoC,IAAI,GAAG,CAAC,CAAC,CAAC,MAAM,EAAE,OAAO,CAAC,0BAA0B,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,2BAA2B,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,CAAC,8BAA8B,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,2BAA2B,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,CAAC,+BAA+B,CAAC,CAAC,CAAC,CAAC;IAClU,MAAM,aAAa,GAAoC,IAAI,GAAG,CAAC,CAAC,CAAC,MAAM,EAAE,MAAA,KAAK,CAAC,iBAAiB,CAAC,YAAY,0CAAE,GAAG,CAAC,EAAE,CAAC,OAAO,EAAE,MAAA,KAAK,CAAC,iBAAiB,CAAC,aAAa,0CAAE,GAAG,CAAC,EAAE,CAAC,UAAU,EAAE,MAAA,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,0CAAE,GAAG,CAAC,EAAE,CAAC,OAAO,EAAE,MAAA,KAAK,CAAC,iBAAiB,CAAC,aAAa,0CAAE,GAAG,CAAC,EAAE,CAAC,WAAW,EAAE,MAAA,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,0CAAE,GAAG,CAAC,CAAC,CAAC,CAAC;IAChW,MAAM,YAAY,GAAmC;QACnD,IAAI,EAAE;YACJ,OAAO,EAAE,CAAC;SACX;QACD,WAAW,EAAE;YACX,OAAO,EAAE,QAAQ;SAClB;KACF,CAAC;IACF,MAAM,YAAY,GAAG;QACnB,MAAM,EAAE,YAAY;QACpB,eAAe,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;KACzE,CAAC;IACF,MAAM,wBAAwB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC9D,MAAM,iBAAiB,GAAG,MAAM,CAAU,IAAI,CAAC,CAAC;IAChD,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChE,OAAO,oBAAC,KAAK;QACR,gBAAgB,IAAI,oBAAC,OAAO,kBAAY,mBAAmB,EAAC,aAAa,EAAE,KAAK,EAAE,MAAM,EAAE,2BAA2B,EAAE,MAAM,EAAE,wBAAwB,CAAC,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE;;gBAClL,MAAA,iBAAiB,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;gBACnC,mBAAmB,CAAC,KAAK,CAAC,CAAC;YAC7B,CAAC;YACK,oBAAC,SAAS,IAAC,kBAAkB,QAAC,KAAK,EAAE;oBACvC,MAAM,EAAE,MAAM;iBACf;gBACK,oBAAC,KAAK,IAAC,UAAU,QAAC,KAAK,EAAE;wBAC3B,MAAM,EAAE,SAAS;qBAClB,IACM,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;oBAC/B,MAAM,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;oBAC7C,MAAM,UAAU,GAAW,KAAK,CAAC,iBAAiB,KAAK,SAAS,CAAC,CAAC,CAAC,kBAAkB,CAAC,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;oBAC1H,MAAM,SAAS,GAAG,WAAW,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC,CAAC;oBACvF,OAAO,oBAAC,WAAW,IAAC,GAAG,EAAE,KAAK,gBAAc,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,cAAc,EAAE,OAAO,EAAE,kBAAkB,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,wBAAwB,EAAE,EAAE,YAAY,oBACpK,YAAY;wBAET,oBAAC,aAAa,IAAC,IAAI,EAAC,UAAU,EAAC,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE;;gCAC7D,KAAK,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;gCAC7B,MAAA,iBAAiB,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;gCACnC,mBAAmB,CAAC,KAAK,CAAC,CAAC;4BAC7B,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,wBAAwB,gBAAc,kBAAkB,CAAC,GAAG,CAAC,KAAK,CAAC,GAAkB,CACpG,CAAC;gBACvB,CAAC,CAAC,CACQ,CACE,CACJ;QACZ,6BAAK,GAAG,EAAE,wBAAwB;YAChC,oBAAC,gBAAgB,oBAAK,KAAK,IAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,EAAE,eAAe,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,mBAAmB,CAAC,CAAC,gBAAgB,CAAC,EAAE,YAAY,EAAE,MAAA,KAAK,CAAC,YAAY,mCAAI,YAAY,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAA,KAAK,CAAC,QAAQ,mCAAI,qBAAqB,EAAE,gBAAgB,EAAE,GAAG,EAAE,CAAC,gCAAO,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,SAAS,EAAE,OAAO,CAAC,SAAS,IAAI,CAC/X,CACA,CAAC;AACb,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Callout, concatStyleSets, DefaultButton, FocusZone, IButton, ICalloutContentStyles, mergeStyles, Stack, TooltipHost, useTheme } from '@fluentui/react';\nimport React, { useRef, useState } from 'react';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { useLocale } from '../localization';\nimport { emojiStyles, reactionButtonCalloutStyles, reactionButtonStyles, reactionItemButtonStyles, reactionToolTipHostStyle } from './styles/ReactionButton.styles';\nimport { isDarkThemed } from '../theming/themeUtils';\nimport { ReactionResources } from '..';\nimport { getEmojiFrameCount } from './VideoGallery/utils/videoGalleryLayoutUtils';\nimport { _preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/**\n * Reactions types for the Reaction button\n * @public\n */\nexport type ReactionButtonReaction = 'like' | 'heart' | 'applause' | 'laugh' | 'surprised';\n\n/**\n * Props for {@link ReactionButton}.\n *\n * @public\n */\nexport interface ReactionButtonProps extends ControlBarButtonProps {\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<ReactionButtonStrings>;\n  /**\n   * Click event to send reaction to meeting\n   */\n  onReactionClick: (reaction: ReactionButtonReaction) => Promise<void>;\n  /**\n   * Reaction resource locator and parameters\n   */\n  reactionResources: ReactionResources;\n}\n\n/**\n * Strings of {@link ReactionButton} that can be overridden.\n *\n * @public\n */\nexport interface ReactionButtonStrings {\n  /** Label of the button. */\n  label: string;\n  /** Aria label for reaction button accessibility announcement */\n  ariaLabel: string;\n  /** Tooltip content when the button is disabled. */\n  tooltipDisabledContent?: string;\n  /** Tooltip content when the button is enabled. */\n  tooltipContent?: string;\n  /** Tooltip content of like reaction button. */\n  likeReactionTooltipContent?: string;\n  /** Tooltip content of heart reaction button. */\n  heartReactionTooltipContent?: string;\n  /** Tooltip content of clap reaction button. */\n  applauseReactionTooltipContent?: string;\n  /** Tooltip content of laugh reaction button. */\n  laughReactionTooltipContent?: string;\n  /** Tooltip content of surprised reaction button. */\n  surprisedReactionTooltipContent?: string;\n}\n\n/**\n * A button to send reactions.\n *\n * Can be used with {@link ControlBar}.\n *\n * @public\n */\nexport const ReactionButton = (props: ReactionButtonProps): JSX.Element => {\n  const localeStrings = useLocale().strings.reactionButton;\n  const strings = {\n    ...localeStrings,\n    ...props.strings\n  };\n  const theme = useTheme();\n  const styles = reactionButtonStyles(theme);\n  const onRenderIcon = (): JSX.Element => <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ReactionButtonIcon\" />;\n  const emojis: ReactionButtonReaction[] = ['like', 'heart', 'applause', 'laugh', 'surprised'];\n  const emojiButtonTooltip: Map<string, string | undefined> = new Map([['like', strings.likeReactionTooltipContent], ['heart', strings.heartReactionTooltipContent], ['applause', strings.applauseReactionTooltipContent], ['laugh', strings.laughReactionTooltipContent], ['surprised', strings.surprisedReactionTooltipContent]]);\n  const emojiResource: Map<string, string | undefined> = new Map([['like', props.reactionResources.likeReaction?.url], ['heart', props.reactionResources.heartReaction?.url], ['applause', props.reactionResources.applauseReaction?.url], ['laugh', props.reactionResources.laughReaction?.url], ['surprised', props.reactionResources.surprisedReaction?.url]]);\n  const calloutStyle: Partial<ICalloutContentStyles> = {\n    root: {\n      padding: 0\n    },\n    calloutMain: {\n      padding: '0.5rem'\n    }\n  };\n  const calloutProps = {\n    styles: calloutStyle,\n    backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n  };\n  const reactionButtonCalloutRef = useRef<HTMLDivElement>(null);\n  const reactionButtonRef = useRef<IButton>(null);\n  const [calloutIsVisible, setCalloutIsVisible] = useState(false);\n  return <Stack>\n      {calloutIsVisible && <Callout data-ui-id=\"reaction-sub-menu\" isBeakVisible={false} styles={reactionButtonCalloutStyles} target={reactionButtonCalloutRef.current} onDismiss={() => {\n      reactionButtonRef.current?.focus();\n      setCalloutIsVisible(false);\n    }}>\n          <FocusZone shouldFocusOnMount style={{\n        height: '100%'\n      }}>\n            <Stack horizontal style={{\n          height: 'inherit'\n        }}>\n              {emojis.map((emoji, index) => {\n            const resourceUrl = emojiResource.get(emoji);\n            const frameCount: number = props.reactionResources !== undefined ? getEmojiFrameCount(emoji, props.reactionResources) : 0;\n            const classname = mergeStyles(emojiStyles(resourceUrl ? resourceUrl : '', frameCount));\n            return <TooltipHost key={index} data-ui-id={index} hidden={props.disableTooltip} content={emojiButtonTooltip.get(emoji)} styles={reactionToolTipHostStyle()} calloutProps={{\n              ...calloutProps\n            }}>\n                    <DefaultButton role=\"menuitem\" key={index} onClick={() => {\n                props.onReactionClick(emoji);\n                reactionButtonRef.current?.focus();\n                setCalloutIsVisible(false);\n              }} className={classname} styles={reactionItemButtonStyles} aria-label={emojiButtonTooltip.get(emoji)}></DefaultButton>\n                  </TooltipHost>;\n          })}\n            </Stack>\n          </FocusZone>\n        </Callout>}\n      <div ref={reactionButtonCalloutRef}>\n        <ControlBarButton {...props} componentRef={reactionButtonRef} styles={concatStyleSets(styles, props.styles)} onClick={() => setCalloutIsVisible(!calloutIsVisible)} onRenderIcon={props.onRenderIcon ?? onRenderIcon} strings={strings} split={true} labelKey={props.labelKey ?? 'reactionButtonLabel'} onRenderMenuIcon={() => <div />} disabled={props.disabled} ariaLabel={strings.ariaLabel} />\n      </div>\n    </Stack>;\n};"]}

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

@@ -1,8 +1,6 @@
 import React from 'react';
 import { IStyle } from '@fluentui/react';
 import { BaseCustomStyles } from '../types';
-import { AttachmentMetadataInProgress, MessageOptions } from "../../../acs-ui-common/src";
-import { MentionLookupOptions } from './MentionPopover';
 /**
  * Fluent styles for {@link Sendbox}.
  *
@@ -38,26 +36,6 @@ export interface SendBoxStrings {
      * Aria label for send message button
      */
     sendButtonAriaLabel: string;
-    /**
-     * Error message indicating that all attachment uploads are not complete.
-     */
-    attachmentUploadsPendingError: string;
-    /**
-     * Aria label to notify user when focus is on cancel attachment upload button.
-     */
-    removeAttachment: string;
-    /**
-     * Aria label to notify user attachment uploading starts.
-     */
-    uploading: string;
-    /**
-     * Aria label to notify user attachment is uploaded.
-     */
-    uploadCompleted: string;
-    /**
-     * Aria label to notify user more attachment action menu.
-     */
-    attachmentMoreMenu: string;
 }
 /**
  * Props for {@link SendBox}.
@@ -77,12 +55,7 @@ export interface SendBoxProps {
     /**
      * Optional override behavior on send button click
      */
-    onSendMessage?: (content: string, options?: MessageOptions) => Promise<void>;
-    /**
-     * Optional props needed to lookup suggestions in the mention scenario.
-     * @beta
-     */
-    mentionLookupOptions?: MentionLookupOptions;
+    onSendMessage?: (content: string) => Promise<void>;
     /**
      * Optional callback called when user is typing
      */
@@ -119,25 +92,6 @@ export interface SendBoxProps {
      * When undefined nothing has focus on render
      */
     autoFocus?: 'sendBoxTextField';
-    /**
-     * Optional callback to render uploaded attachments in the SendBox. The sendBox will expand
-     * vertically to accommodate the uploaded attachments. Attachment uploads will
-     * be rendered below the text area in sendBox.
-     * @beta
-     */
-    onRenderAttachmentUploads?: () => JSX.Element;
-    /**
-     * Optional array of type {@link AttachmentMetadataInProgress}
-     * to render attachments being uploaded in the SendBox.
-     * @beta
-     */
-    attachments?: AttachmentMetadataInProgress[];
-    /**
-     * Optional callback to remove the attachment upload before sending by clicking on
-     * cancel icon.
-     * @beta
-     */
-    onCancelAttachmentUpload?: (attachmentId: string) => void;
 }
 /**
  * Component for typing and sending messages.

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

@@ -3,18 +3,12 @@
 import React, { useState, useMemo, useCallback } from 'react';
 import { mergeStyles, concatStyleSets, Icon, Stack } from '@fluentui/react';
 import { sendButtonStyle, sendIconStyle, sendBoxWrapperStyles, borderAndBoxShadowStyle } from './styles/SendBox.styles';
-import { useV9CustomStyles } from './styles/SendBox.styles';
 import { useTheme } from '../theming';
 import { useLocale } from '../localization';
 import { useIdentifiers } from '../identifiers';
 import { InputBoxComponent } from './InputBoxComponent';
 import { InputBoxButton } from './InputBoxButton';
-import { SendBoxErrors } from './SendBoxErrors';
-import { _AttachmentUploadCards } from './Attachment/AttachmentUploadCards';
-import { attachmentUploadCardsStyles } from './styles/SendBox.styles';
-import { isAttachmentUploadCompleted, hasIncompleteAttachmentUploads, toAttachmentMetadata } from './utils/SendBoxUtils';
 import { MAXIMUM_LENGTH_OF_MESSAGE, isMessageTooLong, sanitizeText, isSendBoxButtonDisabled } from './utils/SendBoxUtils';
-import { FluentV9ThemeProvider } from '../theming/FluentV9ThemeProvider';
 /**
  * Component for typing and sending messages.
  *
@@ -24,7 +18,7 @@ import { FluentV9ThemeProvider } from '../theming/FluentV9ThemeProvider';
  * @public
  */
 export const SendBox = (props) => {
-    const { disabled, systemMessage, supportNewline, onSendMessage, onTyping, onRenderIcon, onRenderSystemMessage, styles, autoFocus, mentionLookupOptions, attachments } = props;
+    const { disabled, systemMessage, supportNewline, onSendMessage, onTyping, onRenderIcon, onRenderSystemMessage, styles, autoFocus } = props;
     const theme = useTheme();
     const localeStrings = useLocale().strings.sendBox;
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
@@ -32,8 +26,6 @@ export const SendBox = (props) => {
     const [textValue, setTextValue] = useState('');
     const [textValueOverflow, setTextValueOverflow] = useState(false);
     const sendTextFieldRef = React.useRef(null);
-    const customV9Styles = useV9CustomStyles();
-    const [attachmentUploadsPendingError, setAttachmentUploadsPendingError] = useState(undefined);
     const sendMessageOnClick = () => {
         var _a;
         // don't send a message when disabled
@@ -41,22 +33,11 @@ export const SendBox = (props) => {
             return;
         }
         // Don't send message until all attachments have been uploaded successfully
-        setAttachmentUploadsPendingError(undefined);
-        if (hasIncompleteAttachmentUploads(attachments)) {
-            setAttachmentUploadsPendingError({
-                message: strings.attachmentUploadsPendingError,
-                timestamp: Date.now()
-            });
-            return;
-        }
         const message = textValue;
         // we don't want to send empty messages including spaces, newlines, tabs
         // Message can be empty if there is a valid attachment upload
-        if (sanitizeText(message).length > 0 || isAttachmentUploadCompleted(attachments)) {
-            onSendMessage && onSendMessage(message, {
-                attachments: toAttachmentMetadata(attachments),
-                type: 'text'
-            });
+        if (sanitizeText(message).length > 0) {
+            onSendMessage && onSendMessage(message);
             setTextValue('');
             (_a = sendTextFieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
@@ -73,11 +54,10 @@ export const SendBox = (props) => {
     const isSendBoxButtonDisabledValue = useMemo(() => {
         return isSendBoxButtonDisabled({
             hasContent: sanitizeText(textValue).length > 0,
-            hasCompletedAttachmentUploads: isAttachmentUploadCompleted(attachments),
             hasError: !!errorMessage,
             disabled: !!disabled
         });
-    }, [attachments, disabled, errorMessage, textValue]);
+    }, [disabled, errorMessage, textValue]);
     const mergedSendButtonStyle = useMemo(() => mergeStyles(sendButtonStyle, styles === null || styles === void 0 ? void 0 : styles.sendMessageIconContainer), [styles === null || styles === void 0 ? void 0 : styles.sendMessageIconContainer]);
     const mergedStyles = useMemo(() => concatStyleSets(styles), [styles]);
     const mergedSendIconStyle = useMemo(() => sendIconStyle({
@@ -87,40 +67,10 @@ export const SendBox = (props) => {
     }), [theme, isSendBoxButtonDisabledValue, 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 attachments in sendBox
-    React.useEffect(() => {
-        if (!(attachments === null || attachments === void 0 ? void 0 : attachments.filter(upload => !upload.error).length)) {
-            setAttachmentUploadsPendingError(undefined);
-        }
-    }, [attachments]);
-    const sendBoxErrorsProps = useMemo(() => {
-        var _a;
-        return {
-            attachmentUploadsPendingError: attachmentUploadsPendingError,
-            attachmentProgressError: (_a = attachments === null || attachments === void 0 ? void 0 : attachments.filter(attachmentUpload => attachmentUpload.error).pop()) === null || _a === void 0 ? void 0 : _a.error
-        };
-    }, [attachments, attachmentUploadsPendingError]);
-    const onRenderAttachmentUploads = useCallback(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        if (!(attachments === null || attachments === void 0 ? void 0 : attachments.filter(upload => !upload.error).length)) {
-            return null;
-        }
-        return props.onRenderAttachmentUploads ? props.onRenderAttachmentUploads() : React.createElement(Stack, { className: attachmentUploadCardsStyles },
-            React.createElement(FluentV9ThemeProvider, { v8Theme: theme, className: customV9Styles.clearBackground },
-                React.createElement(_AttachmentUploadCards, { attachments: attachments, onCancelAttachmentUpload: props.onCancelAttachmentUpload, strings: {
-                        removeAttachment: (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.removeAttachment) !== null && _b !== void 0 ? _b : localeStrings.removeAttachment,
-                        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,
-                        attachmentMoreMenu: (_h = (_g = props.strings) === null || _g === void 0 ? void 0 : _g.attachmentMoreMenu) !== null && _h !== void 0 ? _h : localeStrings.attachmentMoreMenu
-                    }, disabled: disabled })));
-    }, [attachments, props, theme, customV9Styles.clearBackground, localeStrings.removeAttachment, localeStrings.uploading, localeStrings.uploadCompleted, localeStrings.attachmentMoreMenu, disabled]);
     return React.createElement(Stack, { className: mergeStyles(sendBoxWrapperStyles, {
             overflow: 'visible'
         } // This is needed for the mention popup to be visible
         ) },
-        React.createElement(SendBoxErrors, { attachmentProgressError: sendBoxErrorsProps.attachmentProgressError ? {
-                message: sendBoxErrorsProps.attachmentProgressError.message,
-                timestamp: Date.now()
-            } : undefined, attachmentUploadsPendingError: sendBoxErrorsProps.attachmentUploadsPendingError }),
         React.createElement(Stack, { className: borderAndBoxShadowStyle({
                 theme,
                 hasErrorMessage: !!errorMessage,
@@ -133,13 +83,12 @@ export const SendBox = (props) => {
                     }
                 }, onEnterKeyDown: () => {
                     sendMessageOnClick();
-                }, styles: mergedStyles, supportNewline: supportNewline, maxLength: MAXIMUM_LENGTH_OF_MESSAGE, mentionLookupOptions: mentionLookupOptions },
+                }, styles: mergedStyles, supportNewline: supportNewline, maxLength: MAXIMUM_LENGTH_OF_MESSAGE },
                 React.createElement(InputBoxButton, { onRenderIcon: onRenderSendIcon, onClick: e => {
                         if (!textValueOverflow) {
                             sendMessageOnClick();
                         }
                         e.stopPropagation();
-                    }, id: 'sendIconWrapper', className: mergedSendButtonStyle, ariaLabel: localeStrings.sendButtonAriaLabel, tooltipContent: localeStrings.sendButtonAriaLabel, disabled: isSendBoxButtonDisabledValue })),
-            onRenderAttachmentUploads()));
+                    }, id: 'sendIconWrapper', className: mergedSendButtonStyle, ariaLabel: localeStrings.sendButtonAriaLabel, tooltipContent: localeStrings.sendButtonAriaLabel, disabled: isSendBoxButtonDisabledValue }))));
 };
 //# 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":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useState, useMemo, useCallback } from 'react';\nimport { IStyle, ITextField, mergeStyles, concatStyleSets, Icon, Stack } from '@fluentui/react';\nimport { sendButtonStyle, sendIconStyle, sendBoxWrapperStyles, borderAndBoxShadowStyle } from './styles/SendBox.styles';\nimport { useV9CustomStyles } 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 { InputBoxButton } from './InputBoxButton';\nimport { SendBoxErrors } from './SendBoxErrors';\nimport { _AttachmentUploadCards } from './Attachment/AttachmentUploadCards';\nimport { AttachmentMetadataInProgress, MessageOptions } from '@internal/acs-ui-common';\nimport { attachmentUploadCardsStyles } from './styles/SendBox.styles';\nimport { SendBoxErrorBarError } from './SendBoxErrorBar';\nimport { isAttachmentUploadCompleted, hasIncompleteAttachmentUploads, toAttachmentMetadata } from './utils/SendBoxUtils';\nimport { MAXIMUM_LENGTH_OF_MESSAGE, isMessageTooLong, sanitizeText, isSendBoxButtonDisabled } from './utils/SendBoxUtils';\nimport { MentionLookupOptions } from './MentionPopover';\nimport { FluentV9ThemeProvider } from '../theming/FluentV9ThemeProvider';\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 * 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  /**\n   * Error message indicating that all attachment uploads are not complete.\n   */\n  attachmentUploadsPendingError: string;\n  /**\n   * Aria label to notify user when focus is on cancel attachment upload button.\n   */\n  removeAttachment: string;\n  /**\n   * Aria label to notify user attachment uploading starts.\n   */\n  uploading: string;\n  /**\n   * Aria label to notify user attachment is uploaded.\n   */\n  uploadCompleted: string;\n  /**\n   * Aria label to notify user more attachment action menu.\n   */\n  attachmentMoreMenu: string;\n}\n\n/**\n * Props for {@link SendBox}.\n *\n * @public\n */\nexport interface SendBoxProps {\n  /**\n   * Optional boolean to disable text box\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Optional text for system message below text box\n   */\n  systemMessage?: string;\n  /**\n   * Optional override behavior on send button click\n   */\n  onSendMessage?: (content: string, options?: MessageOptions) => Promise<void>;\n  /**\n   * Optional props needed to lookup suggestions in the mention scenario.\n   * @beta\n   */\n  mentionLookupOptions?: MentionLookupOptions;\n\n  /**\n   * Optional callback called when user is typing\n   */\n  onTyping?: () => Promise<void>;\n  /**\n   * Optional callback to render system message below the SendBox.\n   * @defaultValue MessageBar\n   */\n  onRenderSystemMessage?: (systemMessage: string | undefined) => React.ReactElement;\n  /**\n   * Optional boolean to support new line in SendBox.\n   * @defaultValue false\n   */\n  supportNewline?: boolean;\n  /**\n   * Optional callback to render send button icon to the right of the SendBox.\n   * @defaultValue SendBoxSendHovered icon when mouse over icon and SendBoxSend icon otherwise\n   */\n  onRenderIcon?: (isHover: boolean) => JSX.Element;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <SendBox styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: SendBoxStylesProps;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<SendBoxStrings>;\n  /**\n   * enumerable to determine if the input box has focus on render or not.\n   * When undefined nothing has focus on render\n   */\n  autoFocus?: 'sendBoxTextField';\n  /**\n   * Optional callback to render uploaded attachments in the SendBox. The sendBox will expand\n   * vertically to accommodate the uploaded attachments. Attachment uploads will\n   * be rendered below the text area in sendBox.\n   * @beta\n   */\n  onRenderAttachmentUploads?: () => JSX.Element;\n  /**\n   * Optional array of type {@link AttachmentMetadataInProgress}\n   * to render attachments being uploaded in the SendBox.\n   * @beta\n   */\n  attachments?: AttachmentMetadataInProgress[];\n  /**\n   * Optional callback to remove the attachment upload before sending by clicking on\n   * cancel icon.\n   * @beta\n   */\n  onCancelAttachmentUpload?: (attachmentId: 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    mentionLookupOptions,\n    attachments\n  } = props;\n  const theme = useTheme();\n  const localeStrings = useLocale().strings.sendBox;\n  const strings = {\n    ...localeStrings,\n    ...props.strings\n  };\n  const ids = useIdentifiers();\n  const [textValue, setTextValue] = useState('');\n  const [textValueOverflow, setTextValueOverflow] = useState(false);\n  const sendTextFieldRef = React.useRef<ITextField>(null);\n  const customV9Styles = useV9CustomStyles();\n  const [attachmentUploadsPendingError, setAttachmentUploadsPendingError] = useState<SendBoxErrorBarError | undefined>(undefined);\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 attachments have been uploaded successfully\n    setAttachmentUploadsPendingError(undefined);\n    if (hasIncompleteAttachmentUploads(attachments)) {\n      setAttachmentUploadsPendingError({\n        message: strings.attachmentUploadsPendingError,\n        timestamp: Date.now()\n      });\n      return;\n    }\n    const message = textValue;\n    // we don't want to send empty messages including spaces, newlines, tabs\n    // Message can be empty if there is a valid attachment upload\n    if (sanitizeText(message).length > 0 || isAttachmentUploadCompleted(attachments)) {\n      onSendMessage && onSendMessage(message, {\n        attachments: toAttachmentMetadata(attachments),\n        type: 'text'\n      });\n      setTextValue('');\n      sendTextFieldRef.current?.focus();\n    }\n  };\n  const setText = (newValue?: string | undefined): void => {\n    if (newValue === undefined) {\n      return;\n    }\n    setTextValueOverflow(isMessageTooLong(newValue.length));\n    setTextValue(newValue);\n  };\n  const textTooLongMessage = textValueOverflow ? strings.textTooLong : undefined;\n  const errorMessage = systemMessage ?? textTooLongMessage;\n  const isSendBoxButtonDisabledValue = useMemo(() => {\n    return isSendBoxButtonDisabled({\n      hasContent: sanitizeText(textValue).length > 0,\n      hasCompletedAttachmentUploads: isAttachmentUploadCompleted(attachments),\n      hasError: !!errorMessage,\n      disabled: !!disabled\n    });\n  }, [attachments, disabled, errorMessage, textValue]);\n  const mergedSendButtonStyle = useMemo(() => mergeStyles(sendButtonStyle, styles?.sendMessageIconContainer), [styles?.sendMessageIconContainer]);\n  const mergedStyles = useMemo(() => concatStyleSets(styles), [styles]);\n  const mergedSendIconStyle = useMemo(() => sendIconStyle({\n    theme,\n    isSendBoxButtonDisabled: isSendBoxButtonDisabledValue,\n    customSendIconStyle: styles?.sendMessageIcon\n  }), [theme, isSendBoxButtonDisabledValue, styles?.sendMessageIcon]);\n  const onRenderSendIcon = useCallback((isHover: boolean) => onRenderIcon ? onRenderIcon(isHover) : <Icon iconName={isHover && textValue ? 'SendBoxSendHovered' : 'SendBoxSend'} className={mergedSendIconStyle} />, [mergedSendIconStyle, onRenderIcon, textValue]);\n\n  // Ensure that errors are cleared when there are no attachments in sendBox\n  React.useEffect(() => {\n    if (!attachments?.filter(upload => !upload.error).length) {\n      setAttachmentUploadsPendingError(undefined);\n    }\n  }, [attachments]);\n  const sendBoxErrorsProps = useMemo(() => {\n    return {\n      attachmentUploadsPendingError: attachmentUploadsPendingError,\n      attachmentProgressError: attachments?.filter(attachmentUpload => attachmentUpload.error).pop()?.error\n    };\n  }, [attachments, attachmentUploadsPendingError]);\n  const onRenderAttachmentUploads = useCallback(() => {\n    if (!attachments?.filter(upload => !upload.error).length) {\n      return null;\n    }\n    return props.onRenderAttachmentUploads ? props.onRenderAttachmentUploads() : <Stack className={attachmentUploadCardsStyles}>\n        <FluentV9ThemeProvider v8Theme={theme} className={customV9Styles.clearBackground}>\n          <_AttachmentUploadCards attachments={attachments} onCancelAttachmentUpload={props.onCancelAttachmentUpload} strings={{\n          removeAttachment: props.strings?.removeAttachment ?? localeStrings.removeAttachment,\n          uploading: props.strings?.uploading ?? localeStrings.uploading,\n          uploadCompleted: props.strings?.uploadCompleted ?? localeStrings.uploadCompleted,\n          attachmentMoreMenu: props.strings?.attachmentMoreMenu ?? localeStrings.attachmentMoreMenu\n        }} disabled={disabled} />\n        </FluentV9ThemeProvider>\n      </Stack>;\n  }, [attachments, props, theme, customV9Styles.clearBackground, localeStrings.removeAttachment, localeStrings.uploading, localeStrings.uploadCompleted, localeStrings.attachmentMoreMenu, disabled]);\n  return <Stack className={mergeStyles(sendBoxWrapperStyles, {\n    overflow: 'visible'\n  } // This is needed for the mention popup to be visible\n  )}>\n      {<SendBoxErrors attachmentProgressError={sendBoxErrorsProps.attachmentProgressError ? {\n      message: sendBoxErrorsProps.attachmentProgressError.message,\n      timestamp: Date.now()\n    } : undefined} attachmentUploadsPendingError={sendBoxErrorsProps.attachmentUploadsPendingError} />}\n      <Stack className={borderAndBoxShadowStyle({\n      theme,\n      hasErrorMessage: !!errorMessage,\n      disabled: !!disabled\n    })}>\n        <InputBoxComponent autoFocus={autoFocus} data-ui-id={ids.sendboxTextField} disabled={disabled} errorMessage={onRenderSystemMessage ? onRenderSystemMessage(errorMessage) : errorMessage} textFieldRef={sendTextFieldRef} id=\"sendbox\" placeholderText={strings.placeholderText} textValue={textValue} onChange={(_, newValue) => setText(newValue)} onKeyDown={ev => {\n        const keyWasSendingMessage = ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline);\n        if (!keyWasSendingMessage) {\n          onTyping?.();\n        }\n      }} onEnterKeyDown={() => {\n        sendMessageOnClick();\n      }} styles={mergedStyles} supportNewline={supportNewline} maxLength={MAXIMUM_LENGTH_OF_MESSAGE} mentionLookupOptions={mentionLookupOptions}>\n          <InputBoxButton onRenderIcon={onRenderSendIcon} onClick={e => {\n          if (!textValueOverflow) {\n            sendMessageOnClick();\n          }\n          e.stopPropagation();\n        }} id={'sendIconWrapper'} className={mergedSendButtonStyle} ariaLabel={localeStrings.sendButtonAriaLabel} tooltipContent={localeStrings.sendButtonAriaLabel} disabled={isSendBoxButtonDisabledValue} />\n        </InputBoxComponent>\n        {onRenderAttachmentUploads()}\n      </Stack>\n    </Stack>;\n};"]}
+{"version":3,"file":"SendBox.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/SendBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useState, useMemo, useCallback } from 'react';\nimport { IStyle, ITextField, mergeStyles, concatStyleSets, Icon, Stack } from '@fluentui/react';\nimport { sendButtonStyle, sendIconStyle, sendBoxWrapperStyles, borderAndBoxShadowStyle } from './styles/SendBox.styles';\nimport { BaseCustomStyles } from '../types';\nimport { useTheme } from '../theming';\nimport { useLocale } from '../localization';\nimport { useIdentifiers } from '../identifiers';\nimport { InputBoxComponent } from './InputBoxComponent';\nimport { InputBoxButton } from './InputBoxButton';\nimport { MAXIMUM_LENGTH_OF_MESSAGE, isMessageTooLong, sanitizeText, isSendBoxButtonDisabled } from './utils/SendBoxUtils';\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 * 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}\n\n/**\n * Props for {@link SendBox}.\n *\n * @public\n */\nexport interface SendBoxProps {\n  /**\n   * Optional boolean to disable text box\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Optional text for system message below text box\n   */\n  systemMessage?: string;\n  /**\n   * Optional override behavior on send button click\n   */\n  onSendMessage?: (content: string) => Promise<void>;\n  /**\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}\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 = {\n    ...localeStrings,\n    ...props.strings\n  };\n  const ids = useIdentifiers();\n  const [textValue, setTextValue] = useState('');\n  const [textValueOverflow, setTextValueOverflow] = useState(false);\n  const sendTextFieldRef = React.useRef<ITextField>(null);\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 attachments have been uploaded successfully\n    const message = textValue;\n    // we don't want to send empty messages including spaces, newlines, tabs\n    // Message can be empty if there is a valid attachment upload\n    if (sanitizeText(message).length > 0) {\n      onSendMessage && onSendMessage(message);\n      setTextValue('');\n      sendTextFieldRef.current?.focus();\n    }\n  };\n  const setText = (newValue?: string | undefined): void => {\n    if (newValue === undefined) {\n      return;\n    }\n    setTextValueOverflow(isMessageTooLong(newValue.length));\n    setTextValue(newValue);\n  };\n  const textTooLongMessage = textValueOverflow ? strings.textTooLong : undefined;\n  const errorMessage = systemMessage ?? textTooLongMessage;\n  const isSendBoxButtonDisabledValue = useMemo(() => {\n    return isSendBoxButtonDisabled({\n      hasContent: sanitizeText(textValue).length > 0,\n      hasError: !!errorMessage,\n      disabled: !!disabled\n    });\n  }, [disabled, errorMessage, textValue]);\n  const mergedSendButtonStyle = useMemo(() => mergeStyles(sendButtonStyle, styles?.sendMessageIconContainer), [styles?.sendMessageIconContainer]);\n  const mergedStyles = useMemo(() => concatStyleSets(styles), [styles]);\n  const mergedSendIconStyle = useMemo(() => sendIconStyle({\n    theme,\n    isSendBoxButtonDisabled: isSendBoxButtonDisabledValue,\n    customSendIconStyle: styles?.sendMessageIcon\n  }), [theme, isSendBoxButtonDisabledValue, styles?.sendMessageIcon]);\n  const onRenderSendIcon = useCallback((isHover: boolean) => onRenderIcon ? onRenderIcon(isHover) : <Icon iconName={isHover && textValue ? 'SendBoxSendHovered' : 'SendBoxSend'} className={mergedSendIconStyle} />, [mergedSendIconStyle, onRenderIcon, textValue]);\n\n  // Ensure that errors are cleared when there are no attachments in sendBox\n  return <Stack className={mergeStyles(sendBoxWrapperStyles, {\n    overflow: 'visible'\n  } // This is needed for the mention popup to be visible\n  )}>\n      {}\n      <Stack className={borderAndBoxShadowStyle({\n      theme,\n      hasErrorMessage: !!errorMessage,\n      disabled: !!disabled\n    })}>\n        <InputBoxComponent autoFocus={autoFocus} data-ui-id={ids.sendboxTextField} disabled={disabled} errorMessage={onRenderSystemMessage ? onRenderSystemMessage(errorMessage) : errorMessage} textFieldRef={sendTextFieldRef} id=\"sendbox\" placeholderText={strings.placeholderText} textValue={textValue} onChange={(_, newValue) => setText(newValue)} onKeyDown={ev => {\n        const keyWasSendingMessage = ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline);\n        if (!keyWasSendingMessage) {\n          onTyping?.();\n        }\n      }} onEnterKeyDown={() => {\n        sendMessageOnClick();\n      }} styles={mergedStyles} supportNewline={supportNewline} maxLength={MAXIMUM_LENGTH_OF_MESSAGE}>\n          <InputBoxButton onRenderIcon={onRenderSendIcon} onClick={e => {\n          if (!textValueOverflow) {\n            sendMessageOnClick();\n          }\n          e.stopPropagation();\n        }} id={'sendIconWrapper'} className={mergedSendButtonStyle} ariaLabel={localeStrings.sendButtonAriaLabel} tooltipContent={localeStrings.sendButtonAriaLabel} disabled={isSendBoxButtonDisabledValue} />\n        </InputBoxComponent>\n        {}\n      </Stack>\n    </Stack>;\n};"]}

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

@@ -14,7 +14,6 @@ export const UnsupportedBrowser = (props) => {
     return React.createElement(UnsupportedEnvironment, { onTroubleshootingClick: onTroubleshootingClick, strings: Object.assign(Object.assign({}, unsupportedBrowserStringsTrampoline(locale)), strings) });
 };
 const unsupportedBrowserStringsTrampoline = (locale) => {
-    return locale.strings.UnsupportedBrowser;
     return {
         primaryText: '',
         secondaryText: '',

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

@@ -1 +1 @@
-{"version":3,"file":"UnsupportedBrowser.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/UnsupportedBrowser.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAmB,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AA4BlE;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAe,EAAE;IAChF,MAAM,EACJ,sBAAsB,EACtB,OAAO,EACR,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,OAAO,oBAAC,sBAAsB,IAAC,sBAAsB,EAAE,sBAAsB,EAAE,OAAO,kCACjF,mCAAmC,CAAC,MAAM,CAAC,GAC3C,OAAO,IACP,CAAC;AACR,CAAC,CAAC;AACF,MAAM,mCAAmC,GAAG,CAAC,MAAuB,EAA6B,EAAE;IACjG,OAAO,MAAM,CAAC,OAAO,CAAC,kBAAkB,CAAC;IACzC,OAAO;QACL,WAAW,EAAE,EAAE;QACf,aAAa,EAAE,EAAE;QACjB,gBAAgB,EAAE,EAAE;KACrB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport React from 'react';\nimport { ComponentLocale, useLocale } from '../localization';\nimport { UnsupportedEnvironment } from './UnsupportedEnvironment';\n\n/**\n * Strings for UnsupportedBrowser component\n *\n * @beta\n */\nexport interface UnsupportedBrowserStrings {\n  /** String for the primary text */\n  primaryText: string;\n  /** String for the secondary text */\n  secondaryText: string;\n  /** String to display in the text for the help link */\n  moreHelpLinkText: string;\n}\n\n/**\n * props for {@link UnsupportedBrowser} UI\n *\n * @beta\n */\nexport interface UnsupportedBrowserProps {\n  /** Handler to perform an action when the help link is actioned */\n  onTroubleshootingClick?: () => void;\n  /** String overrides for the component */\n  strings?: UnsupportedBrowserStrings;\n}\n\n/**\n * UI to display to the user that the browser they are using is not supported by Azure Communications Calling service.\n *\n * @beta\n */\nexport const UnsupportedBrowser = (props: UnsupportedBrowserProps): JSX.Element => {\n  const {\n    onTroubleshootingClick,\n    strings\n  } = props;\n  const locale = useLocale();\n  return <UnsupportedEnvironment onTroubleshootingClick={onTroubleshootingClick} strings={{\n    ...unsupportedBrowserStringsTrampoline(locale),\n    ...strings\n  }} />;\n};\nconst unsupportedBrowserStringsTrampoline = (locale: ComponentLocale): UnsupportedBrowserStrings => {\n  return locale.strings.UnsupportedBrowser;\n  return {\n    primaryText: '',\n    secondaryText: '',\n    moreHelpLinkText: ''\n  };\n};"]}
+{"version":3,"file":"UnsupportedBrowser.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/UnsupportedBrowser.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAmB,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AA4BlE;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAe,EAAE;IAChF,MAAM,EACJ,sBAAsB,EACtB,OAAO,EACR,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,OAAO,oBAAC,sBAAsB,IAAC,sBAAsB,EAAE,sBAAsB,EAAE,OAAO,kCACjF,mCAAmC,CAAC,MAAM,CAAC,GAC3C,OAAO,IACP,CAAC;AACR,CAAC,CAAC;AACF,MAAM,mCAAmC,GAAG,CAAC,MAAuB,EAA6B,EAAE;IACjG,OAAO;QACL,WAAW,EAAE,EAAE;QACf,aAAa,EAAE,EAAE;QACjB,gBAAgB,EAAE,EAAE;KACrB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport React from 'react';\nimport { ComponentLocale, useLocale } from '../localization';\nimport { UnsupportedEnvironment } from './UnsupportedEnvironment';\n\n/**\n * Strings for UnsupportedBrowser component\n *\n * @beta\n */\nexport interface UnsupportedBrowserStrings {\n  /** String for the primary text */\n  primaryText: string;\n  /** String for the secondary text */\n  secondaryText: string;\n  /** String to display in the text for the help link */\n  moreHelpLinkText: string;\n}\n\n/**\n * props for {@link UnsupportedBrowser} UI\n *\n * @beta\n */\nexport interface UnsupportedBrowserProps {\n  /** Handler to perform an action when the help link is actioned */\n  onTroubleshootingClick?: () => void;\n  /** String overrides for the component */\n  strings?: UnsupportedBrowserStrings;\n}\n\n/**\n * UI to display to the user that the browser they are using is not supported by Azure Communications Calling service.\n *\n * @beta\n */\nexport const UnsupportedBrowser = (props: UnsupportedBrowserProps): JSX.Element => {\n  const {\n    onTroubleshootingClick,\n    strings\n  } = props;\n  const locale = useLocale();\n  return <UnsupportedEnvironment onTroubleshootingClick={onTroubleshootingClick} strings={{\n    ...unsupportedBrowserStringsTrampoline(locale),\n    ...strings\n  }} />;\n};\nconst unsupportedBrowserStringsTrampoline = (locale: ComponentLocale): UnsupportedBrowserStrings => {\n  return {\n    primaryText: '',\n    secondaryText: '',\n    moreHelpLinkText: ''\n  };\n};"]}

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

@@ -15,7 +15,6 @@ export const UnsupportedBrowserVersion = (props) => {
     return React.createElement(UnsupportedEnvironment, { onTroubleshootingClick: onTroubleshootingClick, strings: Object.assign(Object.assign({}, unsupportedBrowserVersionStringsTrampoline(locale)), strings), onContinueAnywayClick: onContinueAnywayClick });
 };
 const unsupportedBrowserVersionStringsTrampoline = (locale) => {
-    return locale.strings.UnsupportedBrowserVersion;
     return {
         primaryText: '',
         secondaryText: '',

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

@@ -1 +1 @@
-{"version":3,"file":"UnsupportedBrowserVersion.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/UnsupportedBrowserVersion.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAmB,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAgClE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;IAC9F,MAAM,EACJ,sBAAsB,EACtB,OAAO,EACP,qBAAqB,EACtB,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,OAAO,oBAAC,sBAAsB,IAAC,sBAAsB,EAAE,sBAAsB,EAAE,OAAO,kCACjF,0CAA0C,CAAC,MAAM,CAAC,GAClD,OAAO,GACT,qBAAqB,EAAE,qBAAqB,GAAI,CAAC;AACtD,CAAC,CAAC;AACF,MAAM,0CAA0C,GAAG,CAAC,MAAuB,EAAoC,EAAE;IAC/G,OAAO,MAAM,CAAC,OAAO,CAAC,yBAAyB,CAAC;IAChD,OAAO;QACL,WAAW,EAAE,EAAE;QACf,aAAa,EAAE,EAAE;QACjB,gBAAgB,EAAE,EAAE;QACpB,wBAAwB,EAAE,EAAE;KAC7B,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport React from 'react';\nimport { ComponentLocale, useLocale } from '../localization';\nimport { UnsupportedEnvironment } from './UnsupportedEnvironment';\n\n/**\n * Strings for UnsupportedBrowser component\n *\n * @beta\n */\nexport interface UnsupportedBrowserVersionStrings {\n  /** String for the primary text */\n  primaryText: string;\n  /** String for the secondary text */\n  secondaryText: string;\n  /** String to display in the text for the help link */\n  moreHelpLinkText: string;\n  /** String for continue without updating button */\n  continueAnywayButtonText?: string;\n}\n\n/**\n * props for {@link UnsupportedBrowserVersion} UI\n *\n * @beta\n */\nexport interface UnsupportedBrowserVersionProps {\n  /** Handler to perform an action when the help link is actioned */\n  onTroubleshootingClick?: () => void;\n  /** String overrides for the component */\n  strings?: UnsupportedBrowserVersionStrings;\n  /** Handler to allow user to continue into the call */\n  onContinueAnywayClick?: () => void;\n}\n\n/**\n * UI to display to the user that the browser version they are using is out of date\n * and not supported by Azure Communications Calling service.\n *\n * @beta\n */\nexport const UnsupportedBrowserVersion = (props: UnsupportedBrowserVersionProps): JSX.Element => {\n  const {\n    onTroubleshootingClick,\n    strings,\n    onContinueAnywayClick\n  } = props;\n  const locale = useLocale();\n  return <UnsupportedEnvironment onTroubleshootingClick={onTroubleshootingClick} strings={{\n    ...unsupportedBrowserVersionStringsTrampoline(locale),\n    ...strings\n  }} onContinueAnywayClick={onContinueAnywayClick} />;\n};\nconst unsupportedBrowserVersionStringsTrampoline = (locale: ComponentLocale): UnsupportedBrowserVersionStrings => {\n  return locale.strings.UnsupportedBrowserVersion;\n  return {\n    primaryText: '',\n    secondaryText: '',\n    moreHelpLinkText: '',\n    continueAnywayButtonText: ''\n  };\n};"]}
+{"version":3,"file":"UnsupportedBrowserVersion.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/UnsupportedBrowserVersion.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAmB,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAgClE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;IAC9F,MAAM,EACJ,sBAAsB,EACtB,OAAO,EACP,qBAAqB,EACtB,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,OAAO,oBAAC,sBAAsB,IAAC,sBAAsB,EAAE,sBAAsB,EAAE,OAAO,kCACjF,0CAA0C,CAAC,MAAM,CAAC,GAClD,OAAO,GACT,qBAAqB,EAAE,qBAAqB,GAAI,CAAC;AACtD,CAAC,CAAC;AACF,MAAM,0CAA0C,GAAG,CAAC,MAAuB,EAAoC,EAAE;IAC/G,OAAO;QACL,WAAW,EAAE,EAAE;QACf,aAAa,EAAE,EAAE;QACjB,gBAAgB,EAAE,EAAE;QACpB,wBAAwB,EAAE,EAAE;KAC7B,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport React from 'react';\nimport { ComponentLocale, useLocale } from '../localization';\nimport { UnsupportedEnvironment } from './UnsupportedEnvironment';\n\n/**\n * Strings for UnsupportedBrowser component\n *\n * @beta\n */\nexport interface UnsupportedBrowserVersionStrings {\n  /** String for the primary text */\n  primaryText: string;\n  /** String for the secondary text */\n  secondaryText: string;\n  /** String to display in the text for the help link */\n  moreHelpLinkText: string;\n  /** String for continue without updating button */\n  continueAnywayButtonText?: string;\n}\n\n/**\n * props for {@link UnsupportedBrowserVersion} UI\n *\n * @beta\n */\nexport interface UnsupportedBrowserVersionProps {\n  /** Handler to perform an action when the help link is actioned */\n  onTroubleshootingClick?: () => void;\n  /** String overrides for the component */\n  strings?: UnsupportedBrowserVersionStrings;\n  /** Handler to allow user to continue into the call */\n  onContinueAnywayClick?: () => void;\n}\n\n/**\n * UI to display to the user that the browser version they are using is out of date\n * and not supported by Azure Communications Calling service.\n *\n * @beta\n */\nexport const UnsupportedBrowserVersion = (props: UnsupportedBrowserVersionProps): JSX.Element => {\n  const {\n    onTroubleshootingClick,\n    strings,\n    onContinueAnywayClick\n  } = props;\n  const locale = useLocale();\n  return <UnsupportedEnvironment onTroubleshootingClick={onTroubleshootingClick} strings={{\n    ...unsupportedBrowserVersionStringsTrampoline(locale),\n    ...strings\n  }} onContinueAnywayClick={onContinueAnywayClick} />;\n};\nconst unsupportedBrowserVersionStringsTrampoline = (locale: ComponentLocale): UnsupportedBrowserVersionStrings => {\n  return {\n    primaryText: '',\n    secondaryText: '',\n    moreHelpLinkText: '',\n    continueAnywayButtonText: ''\n  };\n};"]}

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

@@ -1,31 +1,12 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-import { DefaultButton, Icon, Link, Stack, Text } from '@fluentui/react';
 import React from 'react';
-import { useTheme } from '../theming';
-import { containerStyles, continueAnywayButtonStyles, linkTextStyles, mainTextStyles, secondaryTextStyles, testContainerStyles } from './styles/UnsupportedEnvironment.styles';
-const UnsupportedEnvironmentContainer = (props) => {
-    const { onTroubleshootingClick, strings, onContinueAnywayClick } = props;
-    const theme = useTheme();
-    return React.createElement(Stack, { styles: containerStyles, tokens: {
-            childrenGap: '2rem'
-        } },
-        React.createElement(Icon, { iconName: "UnsupportedEnvironmentWarning", "data-ui-id": "unsupported-environment-icon" }),
-        React.createElement(Stack, { styles: testContainerStyles, tokens: {
-                childrenGap: '0.25rem'
-            } },
-            React.createElement(Text, { styles: mainTextStyles }, strings === null || strings === void 0 ? void 0 : strings.primaryText),
-            React.createElement(Text, { styles: secondaryTextStyles }, strings === null || strings === void 0 ? void 0 : strings.secondaryText)),
-        onTroubleshootingClick && React.createElement(Link, { styles: linkTextStyles, onClick: onTroubleshootingClick, "data-ui-id": "unsupported-environment-link" }, strings === null || strings === void 0 ? void 0 : strings.moreHelpLinkText),
-        onContinueAnywayClick && React.createElement(DefaultButton, { "data-ui-id": "allowUnsupportedBrowserButton", styles: continueAnywayButtonStyles(theme), onClick: onContinueAnywayClick }, strings === null || strings === void 0 ? void 0 : strings.continueAnywayButtonText));
-};
 /**
  * UI to display to the user that the environment they are using is not supported by calling application.
  *
  * @private
  */
 export const UnsupportedEnvironment = (props) => {
-    return React.createElement(UnsupportedEnvironmentContainer, Object.assign({}, props));
     return React.createElement(React.Fragment, null);
 };
 //# sourceMappingURL=UnsupportedEnvironment.js.map