npm - @azure/communication-react - Versions diffs - 1.28.0-beta.2 → 1.28.0 - Mend

@azure/communication-react 1.28.0-beta.2 → 1.28.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (419) hide show

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

@@ -20,17 +20,6 @@ export interface ParticipantListStyles extends BaseCustomStyles {
     /** Styles for the {@link ParticipantList} {@link ParticipantItem}. */
     participantItemStyles?: ParticipantListItemStyles;
 }
-/**
- * Strings for the {@link ParticipantList}.
- *
- * @beta
- */
-export interface ParticipantListStrings {
-    /**
-     * String for rendering the count of participants not contained in the displayed participant list
-     */
-    overflowParticipantCount?: string;
-}
 /**
  * A callback for providing custom menu items for each participant in {@link ParticipantList}.
  *
@@ -68,10 +57,6 @@ export type ParticipantListProps = {
     styles?: ParticipantListStyles;
     /** Optional value to determine if the tooltip should be shown for participants or not */
     showParticipantOverflowTooltip?: boolean;
-    /** Total number of people in the call. This number can be larger than the remote participant count. */
-    totalParticipantCount?: number;
-    /** Strings for the participant list */
-    strings?: ParticipantListStrings;
     /** Optional aria-labelledby prop that prefixes each ParticipantItem aria-label */
     participantAriaLabelledBy?: string;
     /** List of pinned participants */

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

@@ -126,12 +126,11 @@ const getParticipantsForDefaultRender = (participants, excludeMe, myUserId) => {
  * @public
  */
 export const ParticipantList = (props) => {
-    var _a, _b, _c, _d, _e;
-    const { excludeMe = false, myUserId, participants, onRemoveParticipant, onRenderAvatar, onRenderParticipant, onFetchParticipantMenuItems, showParticipantOverflowTooltip, totalParticipantCount, strings, participantAriaLabelledBy, pinnedParticipants } = props;
+    var _a, _b, _c, _d;
+    const { excludeMe = false, myUserId, participants, onRemoveParticipant, onRenderAvatar, onRenderParticipant, onFetchParticipantMenuItems, showParticipantOverflowTooltip, participantAriaLabelledBy, pinnedParticipants } = props;
     const theme = useTheme();
     const ids = useIdentifiers();
     const participantItemStrings = useLocale().strings.participantItem;
-    const participantListStrings = useLocale().strings.ParticipantList;
     const displayedParticipants = useMemo(() => {
         return onRenderParticipant ? participants : getParticipantsForDefaultRender(participants, excludeMe, myUserId);
     }, [participants, excludeMe, myUserId, onRenderParticipant]);
@@ -165,14 +164,6 @@ export const ParticipantList = (props) => {
         return menuItems;
     }, [ids.participantListRemoveParticipantButton, myUserId, onFetchParticipantMenuItems, onRemoveParticipant, (_b = (_a = props.styles) === null || _a === void 0 ? void 0 : _a.participantItemStyles) === null || _b === void 0 ? void 0 : _b.participantSubMenuItemsStyles, participantItemStrings.removeButtonLabel]);
     const participantItemStyles = useMemo(() => { var _a; return merge(participantListItemStyle, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.participantItemStyles); }, [(_c = props.styles) === null || _c === void 0 ? void 0 : _c.participantItemStyles]);
-    const overflowParticipantCountString = (_d = strings === null || strings === void 0 ? void 0 : strings.overflowParticipantCount) !== null && _d !== void 0 ? _d : participantListStrings === null || participantListStrings === void 0 ? void 0 : participantListStrings.overflowParticipantCount;
-    return React.createElement(Stack, { "data-ui-id": ids.participantList, className: mergeStyles(participantListStyle, (_e = props.styles) === null || _e === void 0 ? void 0 : _e.root), role: 'menu' },
-        displayedParticipants.map((participant) => onRenderParticipant ? onRenderParticipant(participant) : onRenderParticipantDefault(participant, participantItemStrings, myUserId, onRenderAvatar, createParticipantMenuItems, participantItemStyles, props.onParticipantClick, showParticipantOverflowTooltip, participantAriaLabelledBy, theme, pinnedParticipants)),
-        overflowParticipantCountString && totalParticipantCount && totalParticipantCount > displayedParticipants.length && React.createElement(Text, { style: {
-                fontWeight: 400,
-                margin: '0.5rem'
-            } }, _formatString(overflowParticipantCountString, {
-            overflowCount: `${totalParticipantCount - displayedParticipants.length}`
-        })));
+    return React.createElement(Stack, { "data-ui-id": ids.participantList, className: mergeStyles(participantListStyle, (_d = props.styles) === null || _d === void 0 ? void 0 : _d.root), role: 'menu' }, displayedParticipants.map((participant) => onRenderParticipant ? onRenderParticipant(participant) : onRenderParticipantDefault(participant, participantItemStrings, myUserId, onRenderAvatar, createParticipantMenuItems, participantItemStyles, props.onParticipantClick, showParticipantOverflowTooltip, participantAriaLabelledBy, theme, pinnedParticipants)));
 };
 //# sourceMappingURL=ParticipantList.js.map

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

	@@ -1 +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};"]}
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 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 CHANGED Viewed

@@ -24,21 +24,35 @@ export const RaiseHandButton = (props) => {
 };
 const raiseHandButtonStyles = (theme) => ({
     rootChecked: {
-        background: theme.palette.themePrimary,
-        color: DefaultPalette.white,
+        background: theme.semanticColors.primaryButtonBackground,
+        color: theme.semanticColors.primaryButtonText,
         ':focus::after': {
-            outlineColor: `${DefaultPalette.white}`
+            outlineColor: `${DefaultPalette.white} !important`
+        },
+        // added !important to avoid override by FluentUI button styles
+        '@media (forced-colors: active)': {
+            border: '1px solid',
+            borderColor: theme.palette.black
         }
     },
     rootCheckedHovered: {
-        background: theme.palette.themePrimary,
-        color: DefaultPalette.white,
+        background: theme.semanticColors.primaryButtonBackgroundHovered,
+        color: theme.semanticColors.primaryButtonTextHovered,
         ':focus::after': {
-            outlineColor: `${DefaultPalette.white}`
+            outlineColor: `${DefaultPalette.white} !important`
+        },
+        // added !important to avoid override by FluentUI button styles
+        '@media (forced-colors: active)': {
+            border: '1px solid',
+            borderColor: theme.palette.black
         }
     },
+    rootCheckedPressed: {
+        background: theme.semanticColors.primaryButtonBackgroundPressed,
+        color: theme.semanticColors.primaryButtonTextPressed
+    },
     labelChecked: {
-        color: DefaultPalette.white
+        color: theme.semanticColors.primaryButtonText
     }
 });
 //# sourceMappingURL=RaiseHandButton.js.map

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

	@@ -1 +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,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});"]}
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,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,cAAc,CAAC,uBAAuB;QACxD,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB;QAC7C,eAAe,EAAE;YACf,YAAY,EAAE,GAAG,cAAc,CAAC,KAAK,aAAa;SACnD;QACD,+DAA+D;QAC/D,gCAAgC,EAAE;YAChC,MAAM,EAAE,WAAW;YACnB,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;SACjC;KACF;IACD,kBAAkB,EAAE;QAClB,UAAU,EAAE,KAAK,CAAC,cAAc,CAAC,8BAA8B;QAC/D,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,wBAAwB;QACpD,eAAe,EAAE;YACf,YAAY,EAAE,GAAG,cAAc,CAAC,KAAK,aAAa;SACnD;QACD,+DAA+D;QAC/D,gCAAgC,EAAE;YAChC,MAAM,EAAE,WAAW;YACnB,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;SACjC;KACF;IACD,kBAAkB,EAAE;QAClB,UAAU,EAAE,KAAK,CAAC,cAAc,CAAC,8BAA8B;QAC/D,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,wBAAwB;KACrD;IACD,YAAY,EAAE;QACZ,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB;KAC9C;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.semanticColors.primaryButtonBackground,\n color: theme.semanticColors.primaryButtonText,\n ':focus::after': {\n outlineColor: `${DefaultPalette.white} !important`\n },\n // added !important to avoid override by FluentUI button styles\n '@media (forced-colors: active)': {\n border: '1px solid',\n borderColor: theme.palette.black\n }\n },\n rootCheckedHovered: {\n background: theme.semanticColors.primaryButtonBackgroundHovered,\n color: theme.semanticColors.primaryButtonTextHovered,\n ':focus::after': {\n outlineColor: `${DefaultPalette.white} !important`\n },\n // added !important to avoid override by FluentUI button styles\n '@media (forced-colors: active)': {\n border: '1px solid',\n borderColor: theme.palette.black\n }\n },\n rootCheckedPressed: {\n background: theme.semanticColors.primaryButtonBackgroundPressed,\n color: theme.semanticColors.primaryButtonTextPressed\n },\n labelChecked: {\n color: theme.semanticColors.primaryButtonText\n }\n});"]}

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SendBox.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/SendBox.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAsB,WAAW,EAAE,eAAe,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAChG,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AACxH,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAE5D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAE5E,OAAO,EAAE,2BAA2B,EAAE,MAAM,yBAAyB,CAAC;AAEtE,OAAO,EAAE,2BAA2B,EAAE,8BAA8B,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AACzH,OAAO,EAAE,yBAAyB,EAAE,gBAAgB,EAAE,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAE1H,OAAO,EAAE,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AA8IzE;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,KAAmB,EAAe,EAAE;IAC1D,MAAM,EACJ,QAAQ,EACR,aAAa,EACb,cAAc,EACd,aAAa,EACb,QAAQ,EACR,YAAY,EACZ,qBAAqB,EACrB,MAAM,EACN,SAAS,EACT,oBAAoB,EACpB,WAAW,EACZ,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC;IAClD,MAAM,OAAO,mCACR,aAAa,GACb,KAAK,CAAC,OAAO,CACjB,CAAC;IACF,MAAM,GAAG,GAAG,cAAc,EAAE,CAAC;IAC7B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC/C,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClE,MAAM,gBAAgB,GAAG,KAAK,CAAC,MAAM,CAAa,IAAI,CAAC,CAAC;IACxD,MAAM,cAAc,GAAG,iBAAiB,EAAE,CAAC;IAC3C,MAAM,CAAC,6BAA6B,EAAE,gCAAgC,CAAC,GAAG,QAAQ,CAAmC,SAAS,CAAC,CAAC;IAChI,MAAM,kBAAkB,GAAG,GAAS,EAAE;;QACpC,qCAAqC;QACrC,IAAI,QAAQ,IAAI,iBAAiB,EAAE,CAAC;YAClC,OAAO;QACT,CAAC;QAED,2EAA2E;QAC3E,gCAAgC,CAAC,SAAS,CAAC,CAAC;QAC5C,IAAI,8BAA8B,CAAC,WAAW,CAAC,EAAE,CAAC;YAChD,gCAAgC,CAAC;gBAC/B,OAAO,EAAE,OAAO,CAAC,6BAA6B;gBAC9C,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;aACtB,CAAC,CAAC;YACH,OAAO;QACT,CAAC;QACD,MAAM,OAAO,GAAG,SAAS,CAAC;QAC1B,wEAAwE;QACxE,6DAA6D;QAC7D,IAAI,YAAY,CAAC,OAAO,CAAC,CAAC,MAAM,GAAG,CAAC,IAAI,2BAA2B,CAAC,WAAW,CAAC,EAAE,CAAC;YACjF,aAAa,IAAI,aAAa,CAAC,OAAO,EAAE;gBACtC,WAAW,EAAE,oBAAoB,CAAC,WAAW,CAAC;gBAC9C,IAAI,EAAE,MAAM;aACb,CAAC,CAAC;YACH,YAAY,CAAC,EAAE,CAAC,CAAC;YACjB,MAAA,gBAAgB,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;QACpC,CAAC;IACH,CAAC,CAAC;IACF,MAAM,OAAO,GAAG,CAAC,QAA6B,EAAQ,EAAE;QACtD,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;YAC3B,OAAO;QACT,CAAC;QACD,oBAAoB,CAAC,gBAAgB,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;QACxD,YAAY,CAAC,QAAQ,CAAC,CAAC;IACzB,CAAC,CAAC;IACF,MAAM,kBAAkB,GAAG,iBAAiB,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC;IAC/E,MAAM,YAAY,GAAG,aAAa,aAAb,aAAa,cAAb,aAAa,GAAI,kBAAkB,CAAC;IACzD,MAAM,4BAA4B,GAAG,OAAO,CAAC,GAAG,EAAE;QAChD,OAAO,uBAAuB,CAAC;YAC7B,UAAU,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC,MAAM,GAAG,CAAC;YAC9C,6BAA6B,EAAE,2BAA2B,CAAC,WAAW,CAAC;YACvE,QAAQ,EAAE,CAAC,CAAC,YAAY;YACxB,QAAQ,EAAE,CAAC,CAAC,QAAQ;SACrB,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,CAAC,CAAC,CAAC;IACrD,MAAM,qBAAqB,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,eAAe,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,wBAAwB,CAAC,EAAE,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,wBAAwB,CAAC,CAAC,CAAC;IAChJ,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IACtE,MAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC;QACtD,KAAK;QACL,uBAAuB,EAAE,4BAA4B;QACrD,mBAAmB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,eAAe;KAC7C,CAAC,EAAE,CAAC,KAAK,EAAE,4BAA4B,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,eAAe,CAAC,CAAC,CAAC;IACpE,MAAM,gBAAgB,GAAG,WAAW,CAAC,CAAC,OAAgB,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,oBAAC,IAAI,IAAC,QAAQ,EAAE,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,aAAa,EAAE,SAAS,EAAE,mBAAmB,GAAI,EAAE,CAAC,mBAAmB,EAAE,YAAY,EAAE,SAAS,CAAC,CAAC,CAAC;IAEnQ,0EAA0E;IAC1E,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAA,EAAE,CAAC;YACzD,gCAAgC,CAAC,SAAS,CAAC,CAAC;QAC9C,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAClB,MAAM,kBAAkB,GAAG,OAAO,CAAC,GAAG,EAAE;;QACtC,OAAO;YACL,6BAA6B,EAAE,6BAA6B;YAC5D,uBAAuB,EAAE,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,MAAM,CAAC,gBAAgB,CAAC,EAAE,CAAC,gBAAgB,CAAC,KAAK,EAAE,GAAG,EAAE,0CAAE,KAAK;SACtG,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,EAAE,6BAA6B,CAAC,CAAC,CAAC;IACjD,MAAM,yBAAyB,GAAG,WAAW,CAAC,GAAG,EAAE;;QACjD,IAAI,CAAC,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAA,EAAE,CAAC;YACzD,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,KAAK,CAAC,yBAAyB,CAAC,CAAC,CAAC,KAAK,CAAC,yBAAyB,EAAE,CAAC,CAAC,CAAC,oBAAC,KAAK,IAAC,SAAS,EAAE,2BAA2B;YACtH,oBAAC,qBAAqB,IAAC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,eAAe;gBAC9E,oBAAC,sBAAsB,IAAC,WAAW,EAAE,WAAW,EAAE,wBAAwB,EAAE,KAAK,CAAC,wBAAwB,EAAE,OAAO,EAAE;wBACrH,gBAAgB,EAAE,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,gBAAgB,mCAAI,aAAa,CAAC,gBAAgB;wBACnF,SAAS,EAAE,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,SAAS,mCAAI,aAAa,CAAC,SAAS;wBAC9D,eAAe,EAAE,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,eAAe,mCAAI,aAAa,CAAC,eAAe;wBAChF,kBAAkB,EAAE,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,kBAAkB,mCAAI,aAAa,CAAC,kBAAkB;qBAC1F,EAAE,QAAQ,EAAE,QAAQ,GAAI,CACD,CAClB,CAAC;IACb,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,cAAc,CAAC,eAAe,EAAE,aAAa,CAAC,gBAAgB,EAAE,aAAa,CAAC,SAAS,EAAE,aAAa,CAAC,eAAe,EAAE,aAAa,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAC,CAAC;IACpM,OAAO,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,oBAAoB,EAAE;YACzD,QAAQ,EAAE,SAAS;SACpB,CAAC,qDAAqD;SACtD;QACI,oBAAC,aAAa,IAAC,uBAAuB,EAAE,kBAAkB,CAAC,uBAAuB,CAAC,CAAC,CAAC;gBACtF,OAAO,EAAE,kBAAkB,CAAC,uBAAuB,CAAC,OAAO;gBAC3D,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;aACtB,CAAC,CAAC,CAAC,SAAS,EAAE,6BAA6B,EAAE,kBAAkB,CAAC,6BAA6B,GAAI;QAChG,oBAAC,KAAK,IAAC,SAAS,EAAE,uBAAuB,CAAC;gBAC1C,KAAK;gBACL,eAAe,EAAE,CAAC,CAAC,YAAY;gBAC/B,QAAQ,EAAE,CAAC,CAAC,QAAQ;aACrB,CAAC;YACE,oBAAC,iBAAiB,IAAC,SAAS,EAAE,SAAS,gBAAc,GAAG,CAAC,gBAAgB,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY,EAAE,YAAY,EAAE,gBAAgB,EAAE,EAAE,EAAC,SAAS,EAAC,eAAe,EAAE,OAAO,CAAC,eAAe,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,SAAS,EAAE,EAAE,CAAC,EAAE;oBACpW,MAAM,oBAAoB,GAAG,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,EAAE,CAAC,QAAQ,KAAK,KAAK,IAAI,CAAC,cAAc,CAAC,CAAC;oBAC9F,IAAI,CAAC,oBAAoB,EAAE,CAAC;wBAC1B,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,EAAI,CAAC;oBACf,CAAC;gBACH,CAAC,EAAE,cAAc,EAAE,GAAG,EAAE;oBACtB,kBAAkB,EAAE,CAAC;gBACvB,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,SAAS,EAAE,yBAAyB,EAAE,oBAAoB,EAAE,oBAAoB;gBACrI,oBAAC,cAAc,IAAC,YAAY,EAAE,gBAAgB,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE;wBAC7D,IAAI,CAAC,iBAAiB,EAAE,CAAC;4BACvB,kBAAkB,EAAE,CAAC;wBACvB,CAAC;wBACD,CAAC,CAAC,eAAe,EAAE,CAAC;oBACtB,CAAC,EAAE,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAE,qBAAqB,EAAE,SAAS,EAAE,aAAa,CAAC,mBAAmB,EAAE,cAAc,EAAE,aAAa,CAAC,mBAAmB,EAAE,QAAQ,EAAE,4BAA4B,GAAI,CACnL;YACnB,yBAAyB,EAAE,CACtB,CACF,CAAC;AACb,CAAC,CAAC","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};"]}
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 { 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/VideoEffects/VideoEffectsItem.js CHANGED Viewed

@@ -9,7 +9,7 @@ import { videoEffectsItemContainerStyles } from './VideoEffectsItem.styles';
  * @internal
  */
 export const _VideoEffectsItem = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const theme = useTheme();
     const isSelected = (_a = props.isSelected) !== null && _a !== void 0 ? _a : false;
     const disabled = (_b = props.disabled) !== null && _b !== void 0 ? _b : false;
@@ -30,7 +30,7 @@ export const _VideoEffectsItem = (props) => {
     }), [backgroundImage, disabled, isSelected, theme]);
     return React.createElement(TooltipHost, Object.assign({}, props.tooltipProps),
         React.createElement(Stack, { key: props.itemKey, className: mergeStyles((_f = props.styles) === null || _f === void 0 ? void 0 : _f.root), verticalAlign: "center", horizontalAlign: "center", "data-ui-id": `video-effects-item` },
-            React.createElement(DefaultButton, { styles: containerStyles(), onClick: disabled ? undefined : () => { var _a; return (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, props.itemKey); }, componentRef: props.componentRef, ariaLabel: (_j = (_g = props.ariaLabel) !== null && _g !== void 0 ? _g : `${props.title}, ${(_h = props.tooltipProps) === null || _h === void 0 ? void 0 : _h.content}`) !== null && _j !== void 0 ? _j : props.itemKey, "aria-disabled": props.disabled, role: "radio", "aria-checked": isSelected },
+            React.createElement(DefaultButton, { styles: containerStyles(), onClick: disabled ? undefined : () => { var _a; return (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, props.itemKey); }, componentRef: props.componentRef, ariaLabel: (_g = props.ariaLabel) !== null && _g !== void 0 ? _g : `${props.title}, ${(_h = props.tooltipProps) === null || _h === void 0 ? void 0 : _h.content}`, "aria-disabled": props.disabled, role: "radio", "aria-checked": isSelected },
                 React.createElement(Stack, { horizontalAlign: 'center', className: mergeStyles({
                         width: '100%'
                     }) },

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

	@@ -1 +1 @@
1	- {"version":3,"file":"VideoEffectsItem.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoEffects/VideoEffectsItem.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,aAAa,EAAW,IAAI,EAAyC,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACvJ,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAC;AAqG5E;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;;IAC9E,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,UAAU,GAAG,MAAA,KAAK,CAAC,UAAU,mCAAI,KAAK,CAAC;IAC7C,MAAM,QAAQ,GAAG,MAAA,KAAK,CAAC,QAAQ,mCAAI,KAAK,CAAC;IACzC,MAAM,eAAe,GAAG,MAAA,KAAK,CAAC,eAAe,0CAAE,GAAG,CAAC;IACnD,MAAM,mBAAmB,GAAG,WAAW,CAAC;QACtC,MAAM,EAAE,SAAS;KAClB,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,aAAa,CAAC,CAAC;IAChC,MAAM,mBAAmB,GAAG,WAAW,CAAC;QACtC,MAAM,EAAE,SAAS;QACjB,QAAQ,EAAE,QAAQ;QAClB,QAAQ,EAAE,QAAQ;KACnB,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,aAAa,CAAC,CAAC;IAChC,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,+BAA+B,CAAC;QACxE,KAAK;QACL,UAAU;QACV,QAAQ;QACR,eAAe;KAChB,CAAC,EAAE,CAAC,eAAe,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC;IACpD,OAAO,oBAAC,WAAW,oBAAK,KAAK,CAAC,YAAY;QACtC,oBAAC,KAAK,IAAC,GAAG,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,WAAW,CAAC,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,CAAC,EAAE,aAAa,EAAC,QAAQ,EAAC,eAAe,EAAC,QAAQ,gBAAa,oBAAoB;YACrJ,oBAAC,aAAa,IAAC,MAAM,EAAE,eAAe,EAAE,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,EAAE,WAAC,OAAA,MAAA,KAAK,CAAC,QAAQ,sDAAG,KAAK,CAAC,OAAO,CAAC,CAAA,EAAA,EAAE,YAAY,EAAE,KAAK,CAAC,YAAwC,EAAE,SAAS,EAAE,MAAA,~~MAAA,~~KAAK,CAAC,SAAS,mCAAI,GAAG,KAAK,CAAC,KAAK,KAAK,MAAA,KAAK,CAAC,YAAY,0CAAE,OAAiB,EAAE,~~mCAAI,KAAK,CAAC,OAAO,~~mBAAiB,KAAK,CAAC,QAAQ,EAAE,IAAI,EAAC,OAAO,kBAAe,UAAU;~~gBAC5V~~,oBAAC,KAAK,IAAC,eAAe,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,CAAC;wBACzD,KAAK,EAAE,MAAM;qBACd,CAAC;oBACG,KAAK,CAAC,SAAS,IAAI,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,mBAAmB;wBAC1D,oBAAC,IAAI,oBAAK,KAAK,CAAC,SAAS,EAAI,CAClB;oBACd,KAAK,CAAC,KAAK,IAAI,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,mBAAmB;wBACtD,oBAAC,IAAI,IAAC,OAAO,EAAC,OAAO,EAAC,MAAM,EAAE;gCAChC,IAAI,EAAE;oCACJ,UAAU,EAAE,QAAQ;oCACpB,QAAQ,EAAE,QAAQ;oCAClB,YAAY,EAAE,UAAU;iCACzB;6BACF,IACM,KAAK,CAAC,KAAK,CACP,CACI,CACT,CACM,CACV,CACI,CAAC;AACnB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, IButton, Icon, IIconProps, IStyle, ITooltipHostProps, mergeStyles, Stack, Text, TooltipHost, useTheme } from '@fluentui/react';\nimport React, { useCallback } from 'react';\nimport { videoEffectsItemContainerStyles } from './VideoEffectsItem.styles';\n\n/*\n Props for {@link _VideoEffectsItem}\n \n @internal\n /\nexport interface _VideoEffectsItemProps {\n /\n The key of the Video Background Effect.\n * This is used to identify the Video Background Effect and is returned in the onChange event.\n * It must be unique within the set of options.\n * @example 'blur'\n /\n itemKey: string;\n\n /\n The text to display for the Video effects item.\n /\n title?: string;\n\n /\n Whether the Video effects item is currently in the selected state.\n * @default false\n /\n isSelected?: boolean;\n\n /\n Callback to invoke when the Video effects item is selected.\n /\n onSelect?: (key: string) => void;\n\n /\n Whether the Video effects item is disabled.\n * @default false\n /\n disabled?: boolean;\n\n /\n The icon to display for the Video effects item.\n * @default undefined (no icon)\n /\n iconProps?: IIconProps;\n\n /\n Properties to have a Tooltip display when hovering over the Video effects item.\n * @default undefined (no tooltip)\n /\n tooltipProps?: ITooltipHostProps;\n\n /\n Aria label for the Video effects item.\n /\n ariaLabel?: string;\n\n /\n Background to display for the Video effects item.\n * @default undefined (no background image)\n /\n backgroundProps?: {\n /\n The URL of the background image.\n /\n url: string;\n };\n\n /\n Styles for the Video effects item.\n /\n styles?: _VideoEffectsItemStyles;\n\n /\n Imperative handle for calling focus()\n /\n componentRef?: React.RefObject<{\n focus: () => void;\n }>;\n}\n\n/\n Styles for {@link _VideoEffectsItem}\n \n @internal\n /\nexport interface _VideoEffectsItemStyles {\n /\n Styles for the container of the Video effects item.\n /\n root: IStyle;\n\n /\n Styles for the container of the icon of the Video effects item.\n /\n iconContainer: IStyle;\n\n /\n Styles for the text container of the Video effects item.\n /\n textContainer: IStyle;\n}\n\n/\n A component for displaying a Video Background Effect Option.\n \n @internal\n */\nexport const _VideoEffectsItem = (props: _VideoEffectsItemProps): JSX.Element => {\n const theme = useTheme();\n const isSelected = props.isSelected ?? false;\n const disabled = props.disabled ?? false;\n const backgroundImage = props.backgroundProps?.url;\n const iconContainerStyles = mergeStyles({\n height: '1.25rem'\n }, props.styles?.iconContainer);\n const textContainerStyles = mergeStyles({\n height: '1.25rem',\n maxWidth: '4.5rem',\n overflow: 'hidden'\n }, props.styles?.textContainer);\n const containerStyles = useCallback(() => videoEffectsItemContainerStyles({\n theme,\n isSelected,\n disabled,\n backgroundImage\n }), [backgroundImage, disabled, isSelected, theme]);\n return <TooltipHost {...props.tooltipProps}>\n <Stack key={props.itemKey} className={mergeStyles(props.styles?.root)} verticalAlign=\"center\" horizontalAlign=\"center\" data-ui-id={`video-effects-item`}>\n <DefaultButton styles={containerStyles()} onClick={disabled ? undefined : () => props.onSelect?.(props.itemKey)} componentRef={props.componentRef as React.RefObject<IButton>} ariaLabel={props.ariaLabel ?? `${props.title}, ${props.tooltipProps?.content as string}` ~~?? props.itemKey~~} aria-disabled={props.disabled} role=\"radio\" aria-checked={isSelected}>\n <Stack horizontalAlign={'center'} className={mergeStyles({\n width: '100%'\n })}>\n {props.iconProps && <Stack.Item className={iconContainerStyles}>\n <Icon {...props.iconProps} />\n </Stack.Item>}\n {props.title && <Stack.Item className={textContainerStyles}>\n <Text variant=\"small\" styles={{\n root: {\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis'\n }\n }}>\n {props.title}\n </Text>\n </Stack.Item>}\n </Stack>\n </DefaultButton>\n </Stack>\n </TooltipHost>;\n};"]}
1	+ {"version":3,"file":"VideoEffectsItem.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoEffects/VideoEffectsItem.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,aAAa,EAAW,IAAI,EAAyC,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACvJ,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAC;AAqG5E;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;;IAC9E,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,UAAU,GAAG,MAAA,KAAK,CAAC,UAAU,mCAAI,KAAK,CAAC;IAC7C,MAAM,QAAQ,GAAG,MAAA,KAAK,CAAC,QAAQ,mCAAI,KAAK,CAAC;IACzC,MAAM,eAAe,GAAG,MAAA,KAAK,CAAC,eAAe,0CAAE,GAAG,CAAC;IACnD,MAAM,mBAAmB,GAAG,WAAW,CAAC;QACtC,MAAM,EAAE,SAAS;KAClB,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,aAAa,CAAC,CAAC;IAChC,MAAM,mBAAmB,GAAG,WAAW,CAAC;QACtC,MAAM,EAAE,SAAS;QACjB,QAAQ,EAAE,QAAQ;QAClB,QAAQ,EAAE,QAAQ;KACnB,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,aAAa,CAAC,CAAC;IAChC,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,+BAA+B,CAAC;QACxE,KAAK;QACL,UAAU;QACV,QAAQ;QACR,eAAe;KAChB,CAAC,EAAE,CAAC,eAAe,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC;IACpD,OAAO,oBAAC,WAAW,oBAAK,KAAK,CAAC,YAAY;QACtC,oBAAC,KAAK,IAAC,GAAG,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,WAAW,CAAC,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,CAAC,EAAE,aAAa,EAAC,QAAQ,EAAC,eAAe,EAAC,QAAQ,gBAAa,oBAAoB;YACrJ,oBAAC,aAAa,IAAC,MAAM,EAAE,eAAe,EAAE,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,EAAE,WAAC,OAAA,MAAA,KAAK,CAAC,QAAQ,sDAAG,KAAK,CAAC,OAAO,CAAC,CAAA,EAAA,EAAE,YAAY,EAAE,KAAK,CAAC,YAAwC,EAAE,SAAS,EAAE,MAAA,KAAK,CAAC,SAAS,mCAAI,GAAG,KAAK,CAAC,KAAK,KAAK,MAAA,KAAK,CAAC,YAAY,0CAAE,OAAiB,EAAE,mBAAiB,KAAK,CAAC,QAAQ,EAAE,IAAI,EAAC,OAAO,kBAAe,UAAU;gBAC3U,oBAAC,KAAK,IAAC,eAAe,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,CAAC;wBACzD,KAAK,EAAE,MAAM;qBACd,CAAC;oBACG,KAAK,CAAC,SAAS,IAAI,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,mBAAmB;wBAC1D,oBAAC,IAAI,oBAAK,KAAK,CAAC,SAAS,EAAI,CAClB;oBACd,KAAK,CAAC,KAAK,IAAI,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,mBAAmB;wBACtD,oBAAC,IAAI,IAAC,OAAO,EAAC,OAAO,EAAC,MAAM,EAAE;gCAChC,IAAI,EAAE;oCACJ,UAAU,EAAE,QAAQ;oCACpB,QAAQ,EAAE,QAAQ;oCAClB,YAAY,EAAE,UAAU;iCACzB;6BACF,IACM,KAAK,CAAC,KAAK,CACP,CACI,CACT,CACM,CACV,CACI,CAAC;AACnB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, IButton, Icon, IIconProps, IStyle, ITooltipHostProps, mergeStyles, Stack, Text, TooltipHost, useTheme } from '@fluentui/react';\nimport React, { useCallback } from 'react';\nimport { videoEffectsItemContainerStyles } from './VideoEffectsItem.styles';\n\n/*\n Props for {@link _VideoEffectsItem}\n \n @internal\n /\nexport interface _VideoEffectsItemProps {\n /\n The key of the Video Background Effect.\n * This is used to identify the Video Background Effect and is returned in the onChange event.\n * It must be unique within the set of options.\n * @example 'blur'\n /\n itemKey: string;\n\n /\n The text to display for the Video effects item.\n /\n title?: string;\n\n /\n Whether the Video effects item is currently in the selected state.\n * @default false\n /\n isSelected?: boolean;\n\n /\n Callback to invoke when the Video effects item is selected.\n /\n onSelect?: (key: string) => void;\n\n /\n Whether the Video effects item is disabled.\n * @default false\n /\n disabled?: boolean;\n\n /\n The icon to display for the Video effects item.\n * @default undefined (no icon)\n /\n iconProps?: IIconProps;\n\n /\n Properties to have a Tooltip display when hovering over the Video effects item.\n * @default undefined (no tooltip)\n /\n tooltipProps?: ITooltipHostProps;\n\n /\n Aria label for the Video effects item.\n /\n ariaLabel?: string;\n\n /\n Background to display for the Video effects item.\n * @default undefined (no background image)\n /\n backgroundProps?: {\n /\n The URL of the background image.\n /\n url: string;\n };\n\n /\n Styles for the Video effects item.\n /\n styles?: _VideoEffectsItemStyles;\n\n /\n Imperative handle for calling focus()\n /\n componentRef?: React.RefObject<{\n focus: () => void;\n }>;\n}\n\n/\n Styles for {@link _VideoEffectsItem}\n \n @internal\n /\nexport interface _VideoEffectsItemStyles {\n /\n Styles for the container of the Video effects item.\n /\n root: IStyle;\n\n /\n Styles for the container of the icon of the Video effects item.\n /\n iconContainer: IStyle;\n\n /\n Styles for the text container of the Video effects item.\n /\n textContainer: IStyle;\n}\n\n/\n A component for displaying a Video Background Effect Option.\n \n @internal\n */\nexport const _VideoEffectsItem = (props: _VideoEffectsItemProps): JSX.Element => {\n const theme = useTheme();\n const isSelected = props.isSelected ?? false;\n const disabled = props.disabled ?? false;\n const backgroundImage = props.backgroundProps?.url;\n const iconContainerStyles = mergeStyles({\n height: '1.25rem'\n }, props.styles?.iconContainer);\n const textContainerStyles = mergeStyles({\n height: '1.25rem',\n maxWidth: '4.5rem',\n overflow: 'hidden'\n }, props.styles?.textContainer);\n const containerStyles = useCallback(() => videoEffectsItemContainerStyles({\n theme,\n isSelected,\n disabled,\n backgroundImage\n }), [backgroundImage, disabled, isSelected, theme]);\n return <TooltipHost {...props.tooltipProps}>\n <Stack key={props.itemKey} className={mergeStyles(props.styles?.root)} verticalAlign=\"center\" horizontalAlign=\"center\" data-ui-id={`video-effects-item`}>\n <DefaultButton styles={containerStyles()} onClick={disabled ? undefined : () => props.onSelect?.(props.itemKey)} componentRef={props.componentRef as React.RefObject<IButton>} ariaLabel={props.ariaLabel ?? `${props.title}, ${props.tooltipProps?.content as string}`} aria-disabled={props.disabled} role=\"radio\" aria-checked={isSelected}>\n <Stack horizontalAlign={'center'} className={mergeStyles({\n width: '100%'\n })}>\n {props.iconProps && <Stack.Item className={iconContainerStyles}>\n <Icon {...props.iconProps} />\n </Stack.Item>}\n {props.title && <Stack.Item className={textContainerStyles}>\n <Text variant=\"small\" styles={{\n root: {\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis'\n }\n }}>\n {props.title}\n </Text>\n </Stack.Item>}\n </Stack>\n </DefaultButton>\n </Stack>\n </TooltipHost>;\n};"]}