@azure/communication-react 1.17.0-alpha-202405220013 → 1.17.0-alpha-202405230013

package/dist/dist-cjs/communication-react/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DO36MBbq.js');
+var index = require('./index-CwHFMnmg.js');
 require('react');
 require('@fluentui/react');
 require('@fluentui/react-components');

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js

@@ -2,5 +2,5 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-module.exports = '1.17.0-alpha-202405220013';
+module.exports = '1.17.0-alpha-202405230013';
 //# sourceMappingURL=telemetryVersion.js.map

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map

@@ -1 +1 @@
-{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.17.0-alpha-202405220013';\n"]}
+{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.17.0-alpha-202405230013';\n"]}

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

@@ -43,7 +43,7 @@ export const ParticipantItem = (props) => {
         }, styles === null || styles === void 0 ? void 0 : styles.avatar) }, avatarOptions)));
     const meTextStyle = useMemo(() => mergeStyles(meContainerStyle, { color: theme.palette.neutralSecondary }, styles === null || styles === void 0 ? void 0 : styles.me), [theme.palette.neutralSecondary, styles === null || styles === void 0 ? void 0 : styles.me]);
     const contextualMenuStyle = useMemo(() => mergeStyles({ background: theme.palette.neutralLighterAlt }, styles === null || styles === void 0 ? void 0 : styles.menu), [theme.palette.neutralLighterAlt, styles === null || styles === void 0 ? void 0 : styles.menu]);
-    const infoContainerStyle = useMemo(() => mergeStyles(iconContainerStyle, { color: theme.palette.neutralTertiary, marginLeft: 'auto' }, styles === null || styles === void 0 ? void 0 : styles.iconContainer), [theme.palette.neutralTertiary, styles === null || styles === void 0 ? void 0 : styles.iconContainer]);
+    const infoContainerStyle = useMemo(() => mergeStyles(iconContainerStyle, { color: theme.palette.neutralSecondary, marginLeft: 'auto' }, styles === null || styles === void 0 ? void 0 : styles.iconContainer), [theme.palette.neutralSecondary, styles === null || styles === void 0 ? void 0 : styles.iconContainer]);
     const onDismissMenu = () => {
         setItemHovered(false);
         setMenuHidden(true);

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

@@ -1 +1 @@
-{"version":3,"file":"ParticipantItem.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ParticipantItem.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  ContextualMenu,\n  DirectionalHint,\n  Icon,\n  IContextualMenuItem,\n  IStyle,\n  mergeStyles,\n  Persona,\n  PersonaPresence,\n  PersonaSize,\n  Stack,\n  Text\n} from '@fluentui/react';\nimport React, { useMemo, useRef, useState } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles, OnRenderAvatarCallback } from '../types';\nimport {\n  displayNoneStyle,\n  iconContainerStyle,\n  iconStyles,\n  meContainerStyle,\n  menuButtonContainerStyle,\n  participantItemContainerStyle,\n  participantStateStringStyles\n} from './styles/ParticipantItem.styles';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(one-to-n-calling) */\n/* @conditional-compile-remove(PSTN-calls) */\nimport { ParticipantState } from '../types';\nimport { useId } from '@fluentui/react-hooks';\n\n/**\n * Fluent styles for {@link ParticipantItem}.\n *\n * @public\n */\nexport interface ParticipantItemStyles extends BaseCustomStyles {\n  /** Styles for the avatar. */\n  avatar?: IStyle;\n  /** Styles for the (You) string. */\n  me?: IStyle;\n  /** Styles for the container of the icon. */\n  iconContainer?: IStyle;\n  /** Styles for the menu. */\n  menu?: IStyle;\n}\n\n/**\n * Strings of {@link ParticipantItem} that can be overridden.\n *\n * @public\n */\nexport interface ParticipantItemStrings {\n  /** String shown when participant is me */\n  isMeText: string;\n  /** String shown when hovering over menu button */\n  menuTitle: string;\n  /** Label for the remove button in participant menu  */\n  removeButtonLabel: string;\n  /** Label for the sharing icon in participant state stack  */\n  sharingIconLabel: string;\n  /** Label for the muted icon in participant state stack  */\n  mutedIconLabel: string;\n  /** placeholder text for participants who does not have a display name*/\n  displayNamePlaceholder?: string;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  /** String shown when `participantState` is `Ringing` */\n  participantStateRinging?: string;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  /** String shown when `participantState` is `Hold` */\n  participantStateHold?: string;\n  /* @conditional-compile-remove(hide-attendee-name) */\n  /** String for the attendee role */\n  attendeeRole: string;\n}\n\n/**\n * Props for {@link ParticipantItem}.\n *\n * @public\n */\nexport interface ParticipantItemProps {\n  /** Unique User ID of the participant. This `userId` is available in the `onRenderAvatar` callback function */\n  userId?: string;\n  /** Name of participant. */\n  displayName?: string;\n  /** Optional indicator to show participant is the user. */\n  me?: boolean;\n  /** Optional callback returning a JSX element to override avatar. */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /** Optional array of IContextualMenuItem for contextual menu. */\n  menuItems?: IContextualMenuItem[];\n  /** Optional callback returning a JSX element rendered on the right portion of the ParticipantItem. Intended for adding icons. */\n  onRenderIcon?: (props?: ParticipantItemProps) => JSX.Element | null;\n  /** Optional PersonaPresence to show participant presence. This will not have an effect if property avatar is assigned. */\n  presence?: PersonaPresence;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <ParticipantItem styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: ParticipantItemStyles;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<ParticipantItemStrings>;\n  /**\n   * Optional callback when component is clicked\n   */\n  onClick?: (props?: ParticipantItemProps) => void;\n  /** Optional value to determine if the tooltip should be shown for participants or not */\n  showParticipantOverflowTooltip?: boolean;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  /**\n   * Optional value to determine and display a participants connection status.\n   * For example, `Connecting`, `Ringing` etc.\n   * The actual text that is displayed is determined by the localized string\n   * corresponding to the provided participant state.\n   * For example, `strings.participantStateConnecting` will be used if `participantState` is `Connecting`.\n   */\n  participantState?: ParticipantState;\n  /**\n   * Optional aria property that prefixes the ParticipantItems aria content\n   * Takes in a unique id value of the element you would like to be read before the ParticipantItem.\n   */\n  ariaLabelledBy?: string;\n}\n\n/**\n * Component to render a calling or chat participant.\n *\n * Displays the participant's avatar, displayName and status as well as optional icons and context menu.\n *\n * @public\n */\nexport const ParticipantItem = (props: ParticipantItemProps): JSX.Element => {\n  const {\n    userId,\n    displayName,\n    onRenderAvatar,\n    menuItems,\n    onRenderIcon,\n    presence,\n    styles,\n    me,\n    onClick,\n    showParticipantOverflowTooltip\n  } = props;\n  const [itemHovered, setItemHovered] = useState<boolean>(false);\n  const [menuHidden, setMenuHidden] = useState<boolean>(true);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const theme = useTheme();\n  const localeStrings = useLocale().strings.participantItem;\n  const ids = useIdentifiers();\n  const uniqueId = useId();\n\n  const strings = { ...localeStrings, ...props.strings };\n  const participantStateString = participantStateStringTrampoline(props, strings);\n  const showMenuIcon = !me && !participantStateString && (itemHovered || !menuHidden);\n\n  // For 'me' show empty name so avatar will get 'Person' icon, when there is no name\n  const meAvatarText = displayName?.trim() || '';\n\n  const avatarOptions = {\n    text: me ? meAvatarText : displayName?.trim() || strings.displayNamePlaceholder,\n    size: PersonaSize.size32,\n    presence: presence,\n    initialsTextColor: 'white',\n    showOverflowTooltip: showParticipantOverflowTooltip,\n    showUnknownPersonaCoin: !me && (!displayName?.trim() || displayName === strings.displayNamePlaceholder)\n  };\n\n  const avatar = onRenderAvatar ? (\n    onRenderAvatar(userId ?? '', avatarOptions)\n  ) : (\n    <Persona\n      className={mergeStyles(\n        {\n          // Prevents persona text from being vertically truncated if a global line height is less than 1.15.\n          lineHeight: '1.15rem'\n        },\n        styles?.avatar\n      )}\n      {...avatarOptions}\n    />\n  );\n\n  const meTextStyle = useMemo(\n    () => mergeStyles(meContainerStyle, { color: theme.palette.neutralSecondary }, styles?.me),\n    [theme.palette.neutralSecondary, styles?.me]\n  );\n  const contextualMenuStyle = useMemo(\n    () => mergeStyles({ background: theme.palette.neutralLighterAlt }, styles?.menu),\n    [theme.palette.neutralLighterAlt, styles?.menu]\n  );\n  const infoContainerStyle = useMemo(\n    () =>\n      mergeStyles(\n        iconContainerStyle,\n        { color: theme.palette.neutralTertiary, marginLeft: 'auto' },\n        styles?.iconContainer\n      ),\n    [theme.palette.neutralTertiary, styles?.iconContainer]\n  );\n\n  const onDismissMenu = (): void => {\n    setItemHovered(false);\n    setMenuHidden(true);\n  };\n\n  const menuButton = useMemo(\n    () => (\n      <Stack\n        horizontal={true}\n        horizontalAlign=\"end\"\n        className={mergeStyles(menuButtonContainerStyle, { color: theme.palette.neutralPrimary })}\n        title={strings.menuTitle}\n        data-ui-id={ids.participantItemMenuButton}\n      >\n        <Icon\n          iconName=\"ParticipantItemOptionsHovered\"\n          className={mergeStyles(iconStyles, !showMenuIcon ? displayNoneStyle : {})}\n        />\n      </Stack>\n    ),\n    [theme.palette.neutralPrimary, strings.menuTitle, ids.participantItemMenuButton, showMenuIcon]\n  );\n\n  return (\n    <div\n      ref={containerRef}\n      role={'menuitem'}\n      data-is-focusable={true}\n      data-ui-id=\"participant-item\"\n      className={mergeStyles(\n        participantItemContainerStyle({ clickable: !!menuItems && menuItems.length > 0 }),\n        styles?.root\n      )}\n      onMouseEnter={() => setItemHovered(true)}\n      onMouseLeave={() => setItemHovered(false)}\n      onClick={() => {\n        if (!participantStateString) {\n          setItemHovered(true);\n          setMenuHidden(false);\n          onClick?.(props);\n        }\n        if (!menuHidden) {\n          onDismissMenu();\n        }\n      }}\n      tabIndex={0}\n    >\n      <Stack\n        horizontal\n        className={mergeStyles({\n          flexGrow: 1,\n          maxWidth: '100%',\n          alignItems: 'center'\n        })}\n        id={uniqueId}\n        aria-labelledby={`${props.ariaLabelledBy} ${uniqueId}`}\n      >\n        {avatar}\n        {me && <Text className={meTextStyle}>{strings.isMeText}</Text>}\n        <Stack horizontal className={mergeStyles(infoContainerStyle)}>\n          {!showMenuIcon && onRenderIcon && onRenderIcon(props)}\n          {/* When the participantStateString has a value, we don't show the menu  */}\n          {!me && participantStateString ? (\n            <Text data-ui-id=\"participant-item-state-string\" className={mergeStyles(participantStateStringStyles)}>\n              {participantStateString}\n            </Text>\n          ) : (\n            <>\n              {menuItems && menuItems.length > 0 && (\n                <>\n                  {menuButton}\n                  <ContextualMenu\n                    items={menuItems}\n                    hidden={menuHidden}\n                    target={containerRef}\n                    onItemClick={onDismissMenu}\n                    onDismiss={onDismissMenu}\n                    directionalHint={DirectionalHint.bottomRightEdge}\n                    className={contextualMenuStyle}\n                    calloutProps={{\n                      preventDismissOnEvent\n                    }}\n                  />\n                </>\n              )}\n            </>\n          )}\n        </Stack>\n      </Stack>\n    </div>\n  );\n};\n\nconst participantStateStringTrampoline = (\n  props: ParticipantItemProps,\n  strings: ParticipantItemStrings\n): string | undefined => {\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  return props.participantState === 'EarlyMedia' || props.participantState === 'Ringing'\n    ? strings?.participantStateRinging\n    : props.participantState === 'Hold'\n    ? strings?.participantStateHold\n    : undefined;\n\n  return undefined;\n};\n"]}
+{"version":3,"file":"ParticipantItem.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ParticipantItem.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EACL,cAAc,EACd,eAAe,EACf,IAAI,EAGJ,WAAW,EACX,OAAO,EAEP,WAAW,EACX,KAAK,EACL,IAAI,EACL,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EACL,gBAAgB,EAChB,kBAAkB,EAClB,UAAU,EACV,gBAAgB,EAChB,wBAAwB,EACxB,6BAA6B,EAC7B,4BAA4B,EAC7B,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,sBAAsB,IAAI,qBAAqB,EAAE,mCAAgC;AAI1F,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAwG9C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;IAC1E,MAAM,EACJ,MAAM,EACN,WAAW,EACX,cAAc,EACd,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,MAAM,EACN,EAAE,EACF,OAAO,EACP,8BAA8B,EAC/B,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAC/D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAU,IAAI,CAAC,CAAC;IAC5D,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,eAAe,CAAC;IAC1D,MAAM,GAAG,GAAG,cAAc,EAAE,CAAC;IAC7B,MAAM,QAAQ,GAAG,KAAK,EAAE,CAAC;IAEzB,MAAM,OAAO,mCAAQ,aAAa,GAAK,KAAK,CAAC,OAAO,CAAE,CAAC;IACvD,MAAM,sBAAsB,GAAG,gCAAgC,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IAChF,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,CAAC,sBAAsB,IAAI,CAAC,WAAW,IAAI,CAAC,UAAU,CAAC,CAAC;IAEpF,mFAAmF;IACnF,MAAM,YAAY,GAAG,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,EAAE,KAAI,EAAE,CAAC;IAE/C,MAAM,aAAa,GAAG;QACpB,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,EAAE,KAAI,OAAO,CAAC,sBAAsB;QAC/E,IAAI,EAAE,WAAW,CAAC,MAAM;QACxB,QAAQ,EAAE,QAAQ;QAClB,iBAAiB,EAAE,OAAO;QAC1B,mBAAmB,EAAE,8BAA8B;QACnD,sBAAsB,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,EAAE,CAAA,IAAI,WAAW,KAAK,OAAO,CAAC,sBAAsB,CAAC;KACxG,CAAC;IAEF,MAAM,MAAM,GAAG,cAAc,CAAC,CAAC,CAAC,CAC9B,cAAc,CAAC,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,EAAE,EAAE,aAAa,CAAC,CAC5C,CAAC,CAAC,CAAC,CACF,oBAAC,OAAO,kBACN,SAAS,EAAE,WAAW,CACpB;YACE,mGAAmG;YACnG,UAAU,EAAE,SAAS;SACtB,EACD,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,CACf,IACG,aAAa,EACjB,CACH,CAAC;IAEF,MAAM,WAAW,GAAG,OAAO,CACzB,GAAG,EAAE,CAAC,WAAW,CAAC,gBAAgB,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB,EAAE,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,EAAE,CAAC,EAC1F,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,EAAE,CAAC,CAC7C,CAAC;IACF,MAAM,mBAAmB,GAAG,OAAO,CACjC,GAAG,EAAE,CAAC,WAAW,CAAC,EAAE,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,iBAAiB,EAAE,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,EAChF,CAAC,KAAK,CAAC,OAAO,CAAC,iBAAiB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,CAChD,CAAC;IACF,MAAM,kBAAkB,GAAG,OAAO,CAChC,GAAG,EAAE,CACH,WAAW,CACT,kBAAkB,EAClB,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB,EAAE,UAAU,EAAE,MAAM,EAAE,EAC7D,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,aAAa,CACtB,EACH,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,aAAa,CAAC,CACxD,CAAC;IAEF,MAAM,aAAa,GAAG,GAAS,EAAE;QAC/B,cAAc,CAAC,KAAK,CAAC,CAAC;QACtB,aAAa,CAAC,IAAI,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,OAAO,CACxB,GAAG,EAAE,CAAC,CACJ,oBAAC,KAAK,IACJ,UAAU,EAAE,IAAI,EAChB,eAAe,EAAC,KAAK,EACrB,SAAS,EAAE,WAAW,CAAC,wBAAwB,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc,EAAE,CAAC,EACzF,KAAK,EAAE,OAAO,CAAC,SAAS,gBACZ,GAAG,CAAC,yBAAyB;QAEzC,oBAAC,IAAI,IACH,QAAQ,EAAC,+BAA+B,EACxC,SAAS,EAAE,WAAW,CAAC,UAAU,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC,GACzE,CACI,CACT,EACD,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,EAAE,OAAO,CAAC,SAAS,EAAE,GAAG,CAAC,yBAAyB,EAAE,YAAY,CAAC,CAC/F,CAAC;IAEF,OAAO,CACL,6BACE,GAAG,EAAE,YAAY,EACjB,IAAI,EAAE,UAAU,uBACG,IAAI,gBACZ,kBAAkB,EAC7B,SAAS,EAAE,WAAW,CACpB,6BAA6B,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC,SAAS,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,EACjF,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CACb,EACD,YAAY,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,EACxC,YAAY,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,EACzC,OAAO,EAAE,GAAG,EAAE;YACZ,IAAI,CAAC,sBAAsB,EAAE,CAAC;gBAC5B,cAAc,CAAC,IAAI,CAAC,CAAC;gBACrB,aAAa,CAAC,KAAK,CAAC,CAAC;gBACrB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,KAAK,CAAC,CAAC;YACnB,CAAC;YACD,IAAI,CAAC,UAAU,EAAE,CAAC;gBAChB,aAAa,EAAE,CAAC;YAClB,CAAC;QACH,CAAC,EACD,QAAQ,EAAE,CAAC;QAEX,oBAAC,KAAK,IACJ,UAAU,QACV,SAAS,EAAE,WAAW,CAAC;gBACrB,QAAQ,EAAE,CAAC;gBACX,QAAQ,EAAE,MAAM;gBAChB,UAAU,EAAE,QAAQ;aACrB,CAAC,EACF,EAAE,EAAE,QAAQ,qBACK,GAAG,KAAK,CAAC,cAAc,IAAI,QAAQ,EAAE;YAErD,MAAM;YACN,EAAE,IAAI,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,IAAG,OAAO,CAAC,QAAQ,CAAQ;YAC9D,oBAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,WAAW,CAAC,kBAAkB,CAAC;gBACzD,CAAC,YAAY,IAAI,YAAY,IAAI,YAAY,CAAC,KAAK,CAAC;gBAEpD,CAAC,EAAE,IAAI,sBAAsB,CAAC,CAAC,CAAC,CAC/B,oBAAC,IAAI,kBAAY,+BAA+B,EAAC,SAAS,EAAE,WAAW,CAAC,4BAA4B,CAAC,IAClG,sBAAsB,CAClB,CACR,CAAC,CAAC,CAAC,CACF,0CACG,SAAS,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,IAAI,CACpC;oBACG,UAAU;oBACX,oBAAC,cAAc,IACb,KAAK,EAAE,SAAS,EAChB,MAAM,EAAE,UAAU,EAClB,MAAM,EAAE,YAAY,EACpB,WAAW,EAAE,aAAa,EAC1B,SAAS,EAAE,aAAa,EACxB,eAAe,EAAE,eAAe,CAAC,eAAe,EAChD,SAAS,EAAE,mBAAmB,EAC9B,YAAY,EAAE;4BACZ,qBAAqB;yBACtB,GACD,CACD,CACJ,CACA,CACJ,CACK,CACF,CACJ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,gCAAgC,GAAG,CACvC,KAA2B,EAC3B,OAA+B,EACX,EAAE;IACtB,mDAAmD;IACnD,6CAA6C;IAC7C,OAAO,KAAK,CAAC,gBAAgB,KAAK,YAAY,IAAI,KAAK,CAAC,gBAAgB,KAAK,SAAS;QACpF,CAAC,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,uBAAuB;QAClC,CAAC,CAAC,KAAK,CAAC,gBAAgB,KAAK,MAAM;YACnC,CAAC,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,oBAAoB;YAC/B,CAAC,CAAC,SAAS,CAAC;IAEd,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  ContextualMenu,\n  DirectionalHint,\n  Icon,\n  IContextualMenuItem,\n  IStyle,\n  mergeStyles,\n  Persona,\n  PersonaPresence,\n  PersonaSize,\n  Stack,\n  Text\n} from '@fluentui/react';\nimport React, { useMemo, useRef, useState } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles, OnRenderAvatarCallback } from '../types';\nimport {\n  displayNoneStyle,\n  iconContainerStyle,\n  iconStyles,\n  meContainerStyle,\n  menuButtonContainerStyle,\n  participantItemContainerStyle,\n  participantStateStringStyles\n} from './styles/ParticipantItem.styles';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(one-to-n-calling) */\n/* @conditional-compile-remove(PSTN-calls) */\nimport { ParticipantState } from '../types';\nimport { useId } from '@fluentui/react-hooks';\n\n/**\n * Fluent styles for {@link ParticipantItem}.\n *\n * @public\n */\nexport interface ParticipantItemStyles extends BaseCustomStyles {\n  /** Styles for the avatar. */\n  avatar?: IStyle;\n  /** Styles for the (You) string. */\n  me?: IStyle;\n  /** Styles for the container of the icon. */\n  iconContainer?: IStyle;\n  /** Styles for the menu. */\n  menu?: IStyle;\n}\n\n/**\n * Strings of {@link ParticipantItem} that can be overridden.\n *\n * @public\n */\nexport interface ParticipantItemStrings {\n  /** String shown when participant is me */\n  isMeText: string;\n  /** String shown when hovering over menu button */\n  menuTitle: string;\n  /** Label for the remove button in participant menu  */\n  removeButtonLabel: string;\n  /** Label for the sharing icon in participant state stack  */\n  sharingIconLabel: string;\n  /** Label for the muted icon in participant state stack  */\n  mutedIconLabel: string;\n  /** placeholder text for participants who does not have a display name*/\n  displayNamePlaceholder?: string;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  /** String shown when `participantState` is `Ringing` */\n  participantStateRinging?: string;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  /** String shown when `participantState` is `Hold` */\n  participantStateHold?: string;\n  /* @conditional-compile-remove(hide-attendee-name) */\n  /** String for the attendee role */\n  attendeeRole: string;\n}\n\n/**\n * Props for {@link ParticipantItem}.\n *\n * @public\n */\nexport interface ParticipantItemProps {\n  /** Unique User ID of the participant. This `userId` is available in the `onRenderAvatar` callback function */\n  userId?: string;\n  /** Name of participant. */\n  displayName?: string;\n  /** Optional indicator to show participant is the user. */\n  me?: boolean;\n  /** Optional callback returning a JSX element to override avatar. */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /** Optional array of IContextualMenuItem for contextual menu. */\n  menuItems?: IContextualMenuItem[];\n  /** Optional callback returning a JSX element rendered on the right portion of the ParticipantItem. Intended for adding icons. */\n  onRenderIcon?: (props?: ParticipantItemProps) => JSX.Element | null;\n  /** Optional PersonaPresence to show participant presence. This will not have an effect if property avatar is assigned. */\n  presence?: PersonaPresence;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <ParticipantItem styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: ParticipantItemStyles;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<ParticipantItemStrings>;\n  /**\n   * Optional callback when component is clicked\n   */\n  onClick?: (props?: ParticipantItemProps) => void;\n  /** Optional value to determine if the tooltip should be shown for participants or not */\n  showParticipantOverflowTooltip?: boolean;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  /**\n   * Optional value to determine and display a participants connection status.\n   * For example, `Connecting`, `Ringing` etc.\n   * The actual text that is displayed is determined by the localized string\n   * corresponding to the provided participant state.\n   * For example, `strings.participantStateConnecting` will be used if `participantState` is `Connecting`.\n   */\n  participantState?: ParticipantState;\n  /**\n   * Optional aria property that prefixes the ParticipantItems aria content\n   * Takes in a unique id value of the element you would like to be read before the ParticipantItem.\n   */\n  ariaLabelledBy?: string;\n}\n\n/**\n * Component to render a calling or chat participant.\n *\n * Displays the participant's avatar, displayName and status as well as optional icons and context menu.\n *\n * @public\n */\nexport const ParticipantItem = (props: ParticipantItemProps): JSX.Element => {\n  const {\n    userId,\n    displayName,\n    onRenderAvatar,\n    menuItems,\n    onRenderIcon,\n    presence,\n    styles,\n    me,\n    onClick,\n    showParticipantOverflowTooltip\n  } = props;\n  const [itemHovered, setItemHovered] = useState<boolean>(false);\n  const [menuHidden, setMenuHidden] = useState<boolean>(true);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const theme = useTheme();\n  const localeStrings = useLocale().strings.participantItem;\n  const ids = useIdentifiers();\n  const uniqueId = useId();\n\n  const strings = { ...localeStrings, ...props.strings };\n  const participantStateString = participantStateStringTrampoline(props, strings);\n  const showMenuIcon = !me && !participantStateString && (itemHovered || !menuHidden);\n\n  // For 'me' show empty name so avatar will get 'Person' icon, when there is no name\n  const meAvatarText = displayName?.trim() || '';\n\n  const avatarOptions = {\n    text: me ? meAvatarText : displayName?.trim() || strings.displayNamePlaceholder,\n    size: PersonaSize.size32,\n    presence: presence,\n    initialsTextColor: 'white',\n    showOverflowTooltip: showParticipantOverflowTooltip,\n    showUnknownPersonaCoin: !me && (!displayName?.trim() || displayName === strings.displayNamePlaceholder)\n  };\n\n  const avatar = onRenderAvatar ? (\n    onRenderAvatar(userId ?? '', avatarOptions)\n  ) : (\n    <Persona\n      className={mergeStyles(\n        {\n          // Prevents persona text from being vertically truncated if a global line height is less than 1.15.\n          lineHeight: '1.15rem'\n        },\n        styles?.avatar\n      )}\n      {...avatarOptions}\n    />\n  );\n\n  const meTextStyle = useMemo(\n    () => mergeStyles(meContainerStyle, { color: theme.palette.neutralSecondary }, styles?.me),\n    [theme.palette.neutralSecondary, styles?.me]\n  );\n  const contextualMenuStyle = useMemo(\n    () => mergeStyles({ background: theme.palette.neutralLighterAlt }, styles?.menu),\n    [theme.palette.neutralLighterAlt, styles?.menu]\n  );\n  const infoContainerStyle = useMemo(\n    () =>\n      mergeStyles(\n        iconContainerStyle,\n        { color: theme.palette.neutralSecondary, marginLeft: 'auto' },\n        styles?.iconContainer\n      ),\n    [theme.palette.neutralSecondary, styles?.iconContainer]\n  );\n\n  const onDismissMenu = (): void => {\n    setItemHovered(false);\n    setMenuHidden(true);\n  };\n\n  const menuButton = useMemo(\n    () => (\n      <Stack\n        horizontal={true}\n        horizontalAlign=\"end\"\n        className={mergeStyles(menuButtonContainerStyle, { color: theme.palette.neutralPrimary })}\n        title={strings.menuTitle}\n        data-ui-id={ids.participantItemMenuButton}\n      >\n        <Icon\n          iconName=\"ParticipantItemOptionsHovered\"\n          className={mergeStyles(iconStyles, !showMenuIcon ? displayNoneStyle : {})}\n        />\n      </Stack>\n    ),\n    [theme.palette.neutralPrimary, strings.menuTitle, ids.participantItemMenuButton, showMenuIcon]\n  );\n\n  return (\n    <div\n      ref={containerRef}\n      role={'menuitem'}\n      data-is-focusable={true}\n      data-ui-id=\"participant-item\"\n      className={mergeStyles(\n        participantItemContainerStyle({ clickable: !!menuItems && menuItems.length > 0 }),\n        styles?.root\n      )}\n      onMouseEnter={() => setItemHovered(true)}\n      onMouseLeave={() => setItemHovered(false)}\n      onClick={() => {\n        if (!participantStateString) {\n          setItemHovered(true);\n          setMenuHidden(false);\n          onClick?.(props);\n        }\n        if (!menuHidden) {\n          onDismissMenu();\n        }\n      }}\n      tabIndex={0}\n    >\n      <Stack\n        horizontal\n        className={mergeStyles({\n          flexGrow: 1,\n          maxWidth: '100%',\n          alignItems: 'center'\n        })}\n        id={uniqueId}\n        aria-labelledby={`${props.ariaLabelledBy} ${uniqueId}`}\n      >\n        {avatar}\n        {me && <Text className={meTextStyle}>{strings.isMeText}</Text>}\n        <Stack horizontal className={mergeStyles(infoContainerStyle)}>\n          {!showMenuIcon && onRenderIcon && onRenderIcon(props)}\n          {/* When the participantStateString has a value, we don't show the menu  */}\n          {!me && participantStateString ? (\n            <Text data-ui-id=\"participant-item-state-string\" className={mergeStyles(participantStateStringStyles)}>\n              {participantStateString}\n            </Text>\n          ) : (\n            <>\n              {menuItems && menuItems.length > 0 && (\n                <>\n                  {menuButton}\n                  <ContextualMenu\n                    items={menuItems}\n                    hidden={menuHidden}\n                    target={containerRef}\n                    onItemClick={onDismissMenu}\n                    onDismiss={onDismissMenu}\n                    directionalHint={DirectionalHint.bottomRightEdge}\n                    className={contextualMenuStyle}\n                    calloutProps={{\n                      preventDismissOnEvent\n                    }}\n                  />\n                </>\n              )}\n            </>\n          )}\n        </Stack>\n      </Stack>\n    </div>\n  );\n};\n\nconst participantStateStringTrampoline = (\n  props: ParticipantItemProps,\n  strings: ParticipantItemStrings\n): string | undefined => {\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  return props.participantState === 'EarlyMedia' || props.participantState === 'Ringing'\n    ? strings?.participantStateRinging\n    : props.participantState === 'Hold'\n    ? strings?.participantStateHold\n    : undefined;\n\n  return undefined;\n};\n"]}

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

@@ -128,6 +128,10 @@ export const ParticipantList = (props) => {
                 itemProps: {
                     styles: (_b = (_a = props.styles) === null || _a === void 0 ? void 0 : _a.participantItemStyles) === null || _b === void 0 ? void 0 : _b.participantSubMenuItemsStyles
                 },
+                iconProps: {
+                    iconName: 'ContextMenuRemoveParticipant',
+                    styles: { root: { lineHeight: 0 } }
+                },
                 'data-ui-id': ids.participantListRemoveParticipantButton
             });
         }

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

@@ -1 +1 @@
-{"version":3,"file":"ParticipantList.js","sourceRoot":"","sources":["../../../../../../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 {\n  Icon,\n  IContextualMenuItem,\n  IContextualMenuItemStyles,\n  merge,\n  mergeStyles,\n  PersonaPresence,\n  Stack,\n  Theme\n} 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 {\n  BaseCustomStyles,\n  CallParticipantListParticipant,\n  OnRenderAvatarCallback,\n  ParticipantListParticipant\n} from '../types';\nimport { CustomAvatarOptions } from '../types';\nimport { 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/* @conditional-compile-remove(total-participant-count) */\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 = (\n  participantUserId: string,\n  userId?: string,\n  defaultMenuItems?: IContextualMenuItem[]\n) => 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  styles?: ParticipantListStyles;\n  /** Optional value to determine if the tooltip should be shown for participants or not */\n  showParticipantOverflowTooltip?: boolean;\n  /* @conditional-compile-remove(total-participant-count) */\n  /** Total number of people in the call. This number can be larger than the remote participant count. */\n  totalParticipantCount?: number;\n  /* @conditional-compile-remove(total-participant-count) */\n  /** Strings for the participant list */\n  strings?: ParticipantListStrings;\n  /** Optional aria-labelledby prop that prefixes each ParticipantItem aria-label */\n  participantAriaLabelledBy?: string;\n};\n\nconst onRenderParticipantDefault = (\n  participant: ParticipantListParticipant,\n  strings: ParticipantItemStrings,\n  myUserId?: string,\n  onRenderAvatar?: OnRenderAvatarCallback,\n  createParticipantMenuItems?: (participant: ParticipantListParticipant) => IContextualMenuItem[],\n  styles?: ParticipantListItemStyles,\n  onParticipantClick?: (participant?: ParticipantListParticipant) => void,\n  showParticipantOverflowTooltip?: boolean,\n  participantAriaLabelledBy?: string,\n  theme?: Theme\n): JSX.Element | null => {\n  const callingParticipant = participant as CallParticipantListParticipant;\n\n  let presence: PersonaPresence | undefined = undefined;\n  if (callingParticipant) {\n    presence = PersonaPresence.none;\n  }\n\n  const menuItems = createParticipantMenuItems && createParticipantMenuItems(participant);\n\n  let displayName = participant.displayName;\n\n  /* @conditional-compile-remove(hide-attendee-name) */\n  const formatDisplayName = (): string | undefined => {\n    if (displayName && strings.attendeeRole) {\n      return _formatString(displayName, { AttendeeRole: strings.attendeeRole });\n    }\n    return displayName;\n  };\n  /* @conditional-compile-remove(hide-attendee-name) */\n  displayName = formatDisplayName();\n\n  const callingPalette = (theme as unknown as CallingTheme).callingPalette;\n\n  const onRenderIcon =\n    callingParticipant?.isScreenSharing || callingParticipant?.isMuted || callingParticipant?.raisedHand\n      ? () => (\n          <Stack horizontal={true} tokens={{ childrenGap: '0.5rem' }}>\n            {callingParticipant.raisedHand && (\n              <Stack\n                horizontal={true}\n                tokens={{ 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              >\n                {callingParticipant.raisedHand.raisedHandOrderPosition && (\n                  <Stack.Item>\n                    <Text>{callingParticipant.raisedHand?.raisedHandOrderPosition}</Text>\n                  </Stack.Item>\n                )}\n                <Stack.Item>\n                  <RaisedHandIcon />\n                </Stack.Item>\n              </Stack>\n            )}\n            {callingParticipant.isScreenSharing && (\n              <Icon\n                iconName=\"ParticipantItemScreenShareStart\"\n                className={iconStyles}\n                ariaLabel={strings.sharingIconLabel}\n              />\n            )}\n            {callingParticipant.isMuted && (\n              <Icon iconName=\"ParticipantItemMicOff\" className={iconStyles} ariaLabel={strings.mutedIconLabel} />\n            )}\n            {\n              /* @conditional-compile-remove(spotlight) */ callingParticipant.spotlight && (\n                <Icon iconName=\"ParticipantItemSpotlighted\" className={iconStyles} />\n              )\n            }\n          </Stack>\n        )\n      : () => null;\n\n  const onRenderAvatarWithRaiseHand =\n    callingParticipant?.raisedHand && onRenderAvatar\n      ? (\n          userId?: string,\n          options?: CustomAvatarOptions,\n          defaultOnRender?: (props: CustomAvatarOptions) => JSX.Element\n        ) =>\n          onRenderAvatar(\n            userId,\n            { ...options, styles: { root: { border: callingPalette.raiseHandGold } } },\n            defaultOnRender\n          )\n      : onRenderAvatar;\n\n  return (\n    <ParticipantItem\n      styles={styles}\n      key={participant.userId}\n      userId={participant.userId}\n      displayName={displayName}\n      me={myUserId ? participant.userId === myUserId : false}\n      menuItems={menuItems}\n      presence={presence}\n      onRenderIcon={onRenderIcon}\n      onRenderAvatar={onRenderAvatarWithRaiseHand}\n      onClick={() => onParticipantClick?.(participant)}\n      showParticipantOverflowTooltip={showParticipantOverflowTooltip}\n      /* @conditional-compile-remove(one-to-n-calling) */\n      /* @conditional-compile-remove(PSTN-calls) */\n      participantState={callingParticipant.state}\n      ariaLabelledBy={participantAriaLabelledBy}\n    />\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\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};\n\nconst getParticipantsForDefaultRender = (\n  participants: ParticipantListParticipant[],\n  excludeMe: boolean,\n  myUserId: string | undefined\n): ParticipantListParticipant[] => {\n  if (!excludeMe || !myUserId) {\n    return [...participants];\n  }\n\n  const userIndex = participants.map((p) => p.userId).indexOf(myUserId);\n\n  if (userIndex === -1) {\n    return [...participants];\n  }\n\n  const remoteParticipants = [...participants];\n  remoteParticipants.splice(userIndex, 1);\n\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    /* @conditional-compile-remove(total-participant-count) */\n    totalParticipantCount,\n    /* @conditional-compile-remove(total-participant-count) */\n    strings,\n    participantAriaLabelledBy\n  } = props;\n\n  const theme = useTheme();\n  const ids = useIdentifiers();\n  const participantItemStrings = useLocale().strings.participantItem;\n  /* @conditional-compile-remove(total-participant-count) */\n  const participantListStrings = useLocale().strings.ParticipantList;\n\n  const displayedParticipants: ParticipantListParticipant[] = useMemo(() => {\n    return onRenderParticipant ? participants : getParticipantsForDefaultRender(participants, excludeMe, myUserId);\n  }, [participants, excludeMe, myUserId, onRenderParticipant]);\n\n  sortParticipants(displayedParticipants);\n\n  const createParticipantMenuItems = useCallback(\n    (participant: ParticipantListParticipant): IContextualMenuItem[] => {\n      let menuItems: IContextualMenuItem[] = [];\n\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          'data-ui-id': ids.participantListRemoveParticipantButton\n        });\n      }\n\n      if (onFetchParticipantMenuItems) {\n        menuItems = onFetchParticipantMenuItems(participant.userId, myUserId, menuItems);\n      }\n\n      return menuItems;\n    },\n    [\n      ids.participantListRemoveParticipantButton,\n      myUserId,\n      onFetchParticipantMenuItems,\n      onRemoveParticipant,\n      props.styles?.participantItemStyles?.participantSubMenuItemsStyles,\n      participantItemStrings.removeButtonLabel\n    ]\n  );\n\n  const participantItemStyles = useMemo(\n    () => merge(participantListItemStyle, props.styles?.participantItemStyles),\n    [props.styles?.participantItemStyles]\n  );\n\n  /* @conditional-compile-remove(total-participant-count) */\n  const overflowParticipantCountString =\n    strings?.overflowParticipantCount ?? participantListStrings?.overflowParticipantCount;\n\n  return (\n    <Stack\n      data-ui-id={ids.participantList}\n      className={mergeStyles(participantListStyle, props.styles?.root)}\n      role={'menu'}\n    >\n      {displayedParticipants.map((participant: ParticipantListParticipant) =>\n        onRenderParticipant\n          ? onRenderParticipant(participant)\n          : onRenderParticipantDefault(\n              participant,\n              participantItemStrings,\n              myUserId,\n              onRenderAvatar,\n              createParticipantMenuItems,\n              participantItemStyles,\n              props.onParticipantClick,\n              showParticipantOverflowTooltip,\n              participantAriaLabelledBy,\n              theme\n            )\n      )}\n      {\n        /* @conditional-compile-remove(total-participant-count) */ overflowParticipantCountString &&\n          totalParticipantCount &&\n          totalParticipantCount > displayedParticipants.length && (\n            <Text style={{ fontWeight: 400, margin: '0.5rem' }}>\n              {_formatString(overflowParticipantCountString, {\n                overflowCount: `${totalParticipantCount - displayedParticipants.length}`\n              })}\n            </Text>\n          )\n      }\n    </Stack>\n  );\n};\n"]}
+{"version":3,"file":"ParticipantList.js","sourceRoot":"","sources":["../../../../../../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 {\n  Icon,\n  IContextualMenuItem,\n  IContextualMenuItemStyles,\n  merge,\n  mergeStyles,\n  PersonaPresence,\n  Stack,\n  Theme\n} 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 {\n  BaseCustomStyles,\n  CallParticipantListParticipant,\n  OnRenderAvatarCallback,\n  ParticipantListParticipant\n} from '../types';\nimport { CustomAvatarOptions } from '../types';\nimport { 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/* @conditional-compile-remove(total-participant-count) */\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 = (\n  participantUserId: string,\n  userId?: string,\n  defaultMenuItems?: IContextualMenuItem[]\n) => 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  styles?: ParticipantListStyles;\n  /** Optional value to determine if the tooltip should be shown for participants or not */\n  showParticipantOverflowTooltip?: boolean;\n  /* @conditional-compile-remove(total-participant-count) */\n  /** Total number of people in the call. This number can be larger than the remote participant count. */\n  totalParticipantCount?: number;\n  /* @conditional-compile-remove(total-participant-count) */\n  /** Strings for the participant list */\n  strings?: ParticipantListStrings;\n  /** Optional aria-labelledby prop that prefixes each ParticipantItem aria-label */\n  participantAriaLabelledBy?: string;\n};\n\nconst onRenderParticipantDefault = (\n  participant: ParticipantListParticipant,\n  strings: ParticipantItemStrings,\n  myUserId?: string,\n  onRenderAvatar?: OnRenderAvatarCallback,\n  createParticipantMenuItems?: (participant: ParticipantListParticipant) => IContextualMenuItem[],\n  styles?: ParticipantListItemStyles,\n  onParticipantClick?: (participant?: ParticipantListParticipant) => void,\n  showParticipantOverflowTooltip?: boolean,\n  participantAriaLabelledBy?: string,\n  theme?: Theme\n): JSX.Element | null => {\n  const callingParticipant = participant as CallParticipantListParticipant;\n\n  let presence: PersonaPresence | undefined = undefined;\n  if (callingParticipant) {\n    presence = PersonaPresence.none;\n  }\n\n  const menuItems = createParticipantMenuItems && createParticipantMenuItems(participant);\n\n  let displayName = participant.displayName;\n\n  /* @conditional-compile-remove(hide-attendee-name) */\n  const formatDisplayName = (): string | undefined => {\n    if (displayName && strings.attendeeRole) {\n      return _formatString(displayName, { AttendeeRole: strings.attendeeRole });\n    }\n    return displayName;\n  };\n  /* @conditional-compile-remove(hide-attendee-name) */\n  displayName = formatDisplayName();\n\n  const callingPalette = (theme as unknown as CallingTheme).callingPalette;\n\n  const onRenderIcon =\n    callingParticipant?.isScreenSharing || callingParticipant?.isMuted || callingParticipant?.raisedHand\n      ? () => (\n          <Stack horizontal={true} tokens={{ childrenGap: '0.5rem' }}>\n            {callingParticipant.raisedHand && (\n              <Stack\n                horizontal={true}\n                tokens={{ 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              >\n                {callingParticipant.raisedHand.raisedHandOrderPosition && (\n                  <Stack.Item>\n                    <Text>{callingParticipant.raisedHand?.raisedHandOrderPosition}</Text>\n                  </Stack.Item>\n                )}\n                <Stack.Item>\n                  <RaisedHandIcon />\n                </Stack.Item>\n              </Stack>\n            )}\n            {callingParticipant.isScreenSharing && (\n              <Icon\n                iconName=\"ParticipantItemScreenShareStart\"\n                className={iconStyles}\n                ariaLabel={strings.sharingIconLabel}\n              />\n            )}\n            {callingParticipant.isMuted && (\n              <Icon iconName=\"ParticipantItemMicOff\" className={iconStyles} ariaLabel={strings.mutedIconLabel} />\n            )}\n            {\n              /* @conditional-compile-remove(spotlight) */ callingParticipant.spotlight && (\n                <Icon iconName=\"ParticipantItemSpotlighted\" className={iconStyles} />\n              )\n            }\n          </Stack>\n        )\n      : () => null;\n\n  const onRenderAvatarWithRaiseHand =\n    callingParticipant?.raisedHand && onRenderAvatar\n      ? (\n          userId?: string,\n          options?: CustomAvatarOptions,\n          defaultOnRender?: (props: CustomAvatarOptions) => JSX.Element\n        ) =>\n          onRenderAvatar(\n            userId,\n            { ...options, styles: { root: { border: callingPalette.raiseHandGold } } },\n            defaultOnRender\n          )\n      : onRenderAvatar;\n\n  return (\n    <ParticipantItem\n      styles={styles}\n      key={participant.userId}\n      userId={participant.userId}\n      displayName={displayName}\n      me={myUserId ? participant.userId === myUserId : false}\n      menuItems={menuItems}\n      presence={presence}\n      onRenderIcon={onRenderIcon}\n      onRenderAvatar={onRenderAvatarWithRaiseHand}\n      onClick={() => onParticipantClick?.(participant)}\n      showParticipantOverflowTooltip={showParticipantOverflowTooltip}\n      /* @conditional-compile-remove(one-to-n-calling) */\n      /* @conditional-compile-remove(PSTN-calls) */\n      participantState={callingParticipant.state}\n      ariaLabelledBy={participantAriaLabelledBy}\n    />\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\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};\n\nconst getParticipantsForDefaultRender = (\n  participants: ParticipantListParticipant[],\n  excludeMe: boolean,\n  myUserId: string | undefined\n): ParticipantListParticipant[] => {\n  if (!excludeMe || !myUserId) {\n    return [...participants];\n  }\n\n  const userIndex = participants.map((p) => p.userId).indexOf(myUserId);\n\n  if (userIndex === -1) {\n    return [...participants];\n  }\n\n  const remoteParticipants = [...participants];\n  remoteParticipants.splice(userIndex, 1);\n\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    /* @conditional-compile-remove(total-participant-count) */\n    totalParticipantCount,\n    /* @conditional-compile-remove(total-participant-count) */\n    strings,\n    participantAriaLabelledBy\n  } = props;\n\n  const theme = useTheme();\n  const ids = useIdentifiers();\n  const participantItemStrings = useLocale().strings.participantItem;\n  /* @conditional-compile-remove(total-participant-count) */\n  const participantListStrings = useLocale().strings.ParticipantList;\n\n  const displayedParticipants: ParticipantListParticipant[] = useMemo(() => {\n    return onRenderParticipant ? participants : getParticipantsForDefaultRender(participants, excludeMe, myUserId);\n  }, [participants, excludeMe, myUserId, onRenderParticipant]);\n\n  sortParticipants(displayedParticipants);\n\n  const createParticipantMenuItems = useCallback(\n    (participant: ParticipantListParticipant): IContextualMenuItem[] => {\n      let menuItems: IContextualMenuItem[] = [];\n\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: { root: { lineHeight: 0 } }\n          },\n          'data-ui-id': ids.participantListRemoveParticipantButton\n        });\n      }\n\n      if (onFetchParticipantMenuItems) {\n        menuItems = onFetchParticipantMenuItems(participant.userId, myUserId, menuItems);\n      }\n\n      return menuItems;\n    },\n    [\n      ids.participantListRemoveParticipantButton,\n      myUserId,\n      onFetchParticipantMenuItems,\n      onRemoveParticipant,\n      props.styles?.participantItemStyles?.participantSubMenuItemsStyles,\n      participantItemStrings.removeButtonLabel\n    ]\n  );\n\n  const participantItemStyles = useMemo(\n    () => merge(participantListItemStyle, props.styles?.participantItemStyles),\n    [props.styles?.participantItemStyles]\n  );\n\n  /* @conditional-compile-remove(total-participant-count) */\n  const overflowParticipantCountString =\n    strings?.overflowParticipantCount ?? participantListStrings?.overflowParticipantCount;\n\n  return (\n    <Stack\n      data-ui-id={ids.participantList}\n      className={mergeStyles(participantListStyle, props.styles?.root)}\n      role={'menu'}\n    >\n      {displayedParticipants.map((participant: ParticipantListParticipant) =>\n        onRenderParticipant\n          ? onRenderParticipant(participant)\n          : onRenderParticipantDefault(\n              participant,\n              participantItemStrings,\n              myUserId,\n              onRenderAvatar,\n              createParticipantMenuItems,\n              participantItemStyles,\n              props.onParticipantClick,\n              showParticipantOverflowTooltip,\n              participantAriaLabelledBy,\n              theme\n            )\n      )}\n      {\n        /* @conditional-compile-remove(total-participant-count) */ overflowParticipantCountString &&\n          totalParticipantCount &&\n          totalParticipantCount > displayedParticipants.length && (\n            <Text style={{ fontWeight: 400, margin: '0.5rem' }}>\n              {_formatString(overflowParticipantCountString, {\n                overflowCount: `${totalParticipantCount - displayedParticipants.length}`\n              })}\n            </Text>\n          )\n      }\n    </Stack>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/styles/MessageThread.styles.js

@@ -68,14 +68,14 @@ export const useChatStyles = makeStyles({
  * @private
  */
 export const useChatMessageRenderStyles = makeStyles({
-    rootCommon: {
-        '&:focus-visible': Object.assign({}, shorthands.outline('0'))
-    },
+    rootCommon: {},
     rootMessage: Object.assign(Object.assign(Object.assign({}, shorthands.padding('0')), shorthands.margin('0')), { maxWidth: '100%', minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem` }),
     rootMyMessage: Object.assign(Object.assign({ gridTemplateColumns: 'auto fit-content(0)', gridTemplateAreas: `
         "body status"
       `, columnGap: '0', gridGap: '0' }, shorthands.padding('0')), { marginTop: '0', marginRight: '0', marginBottom: '0', marginLeft: '50px', width: `calc(100% - 50px)` }),
-    bodyCommon: Object.assign(Object.assign({}, shorthands.padding('0')), { marginRight: '0', marginBottom: '0', backgroundColor: 'transparent', maxWidth: '100%', minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem` }),
+    bodyCommon: Object.assign(Object.assign({}, shorthands.padding('0')), { marginRight: '0', marginBottom: '0', backgroundColor: 'transparent', maxWidth: '100%', minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`, '&:focus-visible': {
+            outlineStyle: 'auto'
+        } }),
     bodyMyMessage: {
         width: '100%',
         marginTop: '0'
@@ -110,8 +110,7 @@ export const useChatMyMessageStyles = makeStyles({
         gridGap: '0',
         columnGap: '0',
         paddingTop: '0',
-        marginLeft: '0',
-        '&:focus-visible': Object.assign({}, shorthands.outline('0'))
+        marginLeft: '0'
     },
     body: Object.assign(Object.assign({ paddingBottom: '10px', marginTop: '1rem', maxWidth: '100%', minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`, marginLeft: '0rem' }, shorthands.border('1px', 'solid', 'transparent')), { '&:hover ~ .fui-ChatMyMessage__actions': {
             visibility: 'visible'
@@ -120,6 +119,8 @@ export const useChatMyMessageStyles = makeStyles({
         }, '& msft-mention': {
             color: tokens.colorStatusWarningBackground3,
             fontWeight: 600
+        }, '&:focus-visible': {
+            outlineStyle: 'auto'
         } }),
     bodyAttached: {
         marginTop: '0.125rem'
@@ -162,8 +163,7 @@ export const chatMessageDateStyle = {
  */
 export const useChatMessageStyles = makeStyles({
     root: {
-        paddingTop: '0',
-        '&:focus-visible': Object.assign({}, shorthands.outline('0'))
+        paddingTop: '0'
     },
     body: Object.assign(Object.assign({ maxWidth: '100%', minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`, marginRight: '0rem', paddingBottom: '10px', zIndex: CHAT_MESSAGE_ZINDEX }, shorthands.border('1px', 'solid', 'transparent')), { '& > div:first-of-type': {
             flexWrap: 'wrap'
@@ -178,6 +178,8 @@ export const useChatMessageStyles = makeStyles({
             height: 'auto !important'
         }, '& p': Object.assign({}, shorthands.marginBlock('0.125rem')), '& blockquote': Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ backgroundColor: tokens.colorBrandBackgroundInverted, clear: 'left', minHeight: '2.25rem', width: 'fit-content', marginTop: '7px', marginRight: '0px', marginLeft: '0px', marginBottom: '7px', paddingTop: '7px', paddingRight: '15px', paddingLeft: '15px', paddingBottom: '7px' }, shorthands.border('solid')), shorthands.borderRadius('4px')), shorthands.borderWidth('1px')), shorthands.borderColor(tokens.colorNeutralStroke1Selected)), { borderLeftWidth: '4px' }), '& code': {
             whiteSpace: 'pre-wrap'
+        }, '&:focus-visible': {
+            outlineStyle: 'auto'
         } }),
     bodyWithPlaceholderImage: {
         '& img[src=""]': {

package/dist/dist-esm/react-components/src/components/styles/MessageThread.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageThread.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/MessageThread.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IButtonStyles, mergeStyles } from '@fluentui/react';\nimport { makeStyles, shorthands, tokens } from '@fluentui/react-components';\nimport { CSSProperties } from 'react';\nimport { MESSAGE_STATUS_INDICATOR_SIZE_REM } from './MessageStatusIndicator.styles';\nimport { ComponentSlotStyle } from '../../types';\nimport { _ATTACHMENT_CARD_MARGIN_IN_PX, _ATTACHMENT_CARD_WIDTH_IN_REM } from './AttachmentCard.styles';\n\n// Minimum chat bubble width. This matches the minimum chat bubble width from FluentUI\n// that can contain a message and a timestamp.\nconst CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM = 6.25;\n\n// Chat messages should span just short of the width of the container.\n// When calculating the width of a message we also must take into account\n// the width of the avatar/gutter and the gap between the message and avatar/gutter.\nconst AVATAR_WIDTH_REM = 2;\nconst AVATAR_MARGIN_LEFT = 2.5;\nconst AVATAR_MESSAGE_GAP_REM = 0.125;\nconst MESSAGE_AMOUNT_OUT_FROM_EDGE_REM = 2;\n\n// Avatars should display on top of chat messages when the chat thread is narrow\nconst MESSAGE_AVATAR_OVERLAP_REM = 0.925;\nconst CHAT_MESSAGE_ZINDEX = 1;\nconst AVATAR_ZINDEX = 2;\n// new message button should be on top of chat message\nconst NEW_MESSAGE_BUTTON_ZINDEX = 2;\n\n/**\n * @private\n */\nexport const messageThreadContainerStyle = mergeStyles({\n  height: '100%',\n  width: '100%',\n  maxHeight: '100%',\n  overflow: 'auto',\n  position: 'relative',\n  alignSelf: 'center'\n});\n\n/**\n * @private\n */\nexport const messageThreadWrapperContainerStyle = mergeStyles({\n  height: '100%',\n  width: '100%',\n  position: 'relative'\n});\n\n/**\n * @private\n */\nexport const noMessageStatusStyle = mergeStyles({\n  // This should match the size of the message status indicator icon to ensure\n  // multiple messages sent by the user are aligned correctly.\n  width: `${MESSAGE_STATUS_INDICATOR_SIZE_REM}rem`\n});\n\n/**\n * @private\n */\nexport const useChatStyles = makeStyles({\n  root: {\n    // chat components sets max width value to 1056px, override it to 100%\n    maxWidth: '100%',\n    paddingTop: '0.8rem',\n    paddingBottom: '0.5rem',\n    paddingRight: '0.6rem',\n    paddingLeft: '0.6rem',\n    ...shorthands.border('none'),\n    ...shorthands.overflow('auto'),\n    // `height: 100%` ensures that the Chat component covers 100% of it's parents height\n    // to prevent intermittent scrollbars when GIFs are present in the chat.\n    height: '100%',\n\n    '& a:link': {\n      color: tokens.colorBrandForegroundLink\n    },\n    '& a:visited': {\n      color: tokens.colorBrandForegroundLinkHover\n    },\n    '& a:hover': {\n      color: tokens.colorBrandForegroundLinkHover\n    }\n  }\n});\n\n/**\n * @private\n */\nexport const useChatMessageRenderStyles = makeStyles({\n  rootCommon: {\n    '&:focus-visible': {\n      ...shorthands.outline('0')\n    }\n  },\n  rootMessage: {\n    ...shorthands.padding('0'),\n    ...shorthands.margin('0'),\n    maxWidth: '100%',\n    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`\n  },\n  rootMyMessage: {\n    gridTemplateColumns: 'auto fit-content(0)',\n    gridTemplateAreas: `\n        \"body status\"\n      `,\n    columnGap: '0',\n    gridGap: '0',\n    ...shorthands.padding('0'),\n    marginTop: '0',\n    marginRight: '0',\n    marginBottom: '0',\n    marginLeft: '50px',\n    width: `calc(100% - 50px)`\n  },\n  bodyCommon: {\n    ...shorthands.padding('0'),\n    marginRight: '0',\n    marginBottom: '0',\n    backgroundColor: 'transparent',\n    maxWidth: '100%',\n    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`\n  },\n  bodyMyMessage: {\n    width: '100%',\n    marginTop: '0'\n  },\n  bodyWithoutAvatar: {\n    marginLeft: `${AVATAR_MARGIN_LEFT}rem`,\n    marginTop: '0'\n  },\n  bodyWithAvatar: {\n    marginLeft: `0`,\n    marginTop: '0.75rem'\n  },\n  avatarNoOverlap: {\n    width: `calc(100% - ${AVATAR_WIDTH_REM + MESSAGE_AMOUNT_OUT_FROM_EDGE_REM + AVATAR_MESSAGE_GAP_REM}rem)`\n  },\n  avatarOverlap: {\n    width: `calc(100% - ${AVATAR_WIDTH_REM + MESSAGE_AMOUNT_OUT_FROM_EDGE_REM - MESSAGE_AVATAR_OVERLAP_REM}rem)`\n  }\n});\n\n/**\n * @private\n */\nexport const useChatMyMessageStyles = makeStyles({\n  root: {\n    // The first column's width should be set to  1fr\n    // because otherwise rich text editor's width will grow indefinitely\n    gridTemplateColumns: '1fr auto',\n    gridTemplateAreas: `\n        \". actions\"\n        \"body body\"\n      `,\n    gridGap: '0',\n    columnGap: '0',\n    paddingTop: '0',\n    marginLeft: '0',\n    '&:focus-visible': {\n      ...shorthands.outline('0')\n    }\n  },\n  body: {\n    paddingBottom: '10px',\n    marginTop: '1rem',\n    maxWidth: '100%',\n    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n    marginLeft: '0rem',\n    // This makes message bubble show border in high contrast mode making each message distinguishable\n    ...shorthands.border('1px', 'solid', 'transparent'),\n\n    '&:hover ~ .fui-ChatMyMessage__actions': {\n      visibility: 'visible'\n    },\n    '&:focus ~ .fui-ChatMyMessage__actions': {\n      visibility: 'visible'\n    },\n    '& msft-mention': {\n      color: tokens.colorStatusWarningBackground3,\n      fontWeight: 600\n    }\n  },\n  bodyAttached: {\n    marginTop: '0.125rem'\n  },\n  menu: {\n    boxShadow: tokens.shadow4,\n    backgroundColor: tokens.colorNeutralBackground1,\n    marginRight: '1px',\n    position: 'absolute',\n    top: '-2px',\n    right: '0',\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    zIndex: 1,\n    lineHeight: tokens.lineHeightBase100,\n    visibility: 'hidden',\n\n    '&:hover, &:focus': {\n      cursor: 'pointer',\n      visibility: 'visible'\n    }\n  },\n  menuAttached: {\n    top: '-18px'\n  },\n  menuHidden: {\n    visibility: 'hidden'\n  },\n  menuVisible: {\n    visibility: 'visible'\n  },\n  multipleAttachments: {\n    width: '100%',\n    maxWidth: `${(_ATTACHMENT_CARD_WIDTH_IN_REM + _ATTACHMENT_CARD_MARGIN_IN_PX) * 2}rem`\n  }\n});\n\n/**\n * @private\n */\nexport const newMessageButtonContainerStyle = mergeStyles({\n  position: 'absolute',\n  zIndex: NEW_MESSAGE_BUTTON_ZINDEX,\n  bottom: 0,\n  right: '1.5rem'\n});\n\n/**\n * @private\n */\nexport const chatMessageDateStyle: CSSProperties = {\n  fontWeight: 600\n};\n\n/**\n * @private\n */\nexport const useChatMessageStyles = makeStyles({\n  root: {\n    paddingTop: '0',\n    '&:focus-visible': {\n      ...shorthands.outline('0')\n    }\n  },\n  body: {\n    maxWidth: '100%',\n    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n    marginRight: '0rem',\n    paddingBottom: '10px',\n    zIndex: CHAT_MESSAGE_ZINDEX,\n    // This makes message bubble show border in high contrast mode making each message distinguishable\n    ...shorthands.border('1px', 'solid', 'transparent'),\n    '& > div:first-of-type': {\n      flexWrap: 'wrap'\n    },\n    '& msft-mention': {\n      color: tokens.colorStatusWarningBackground3,\n      fontWeight: tokens.fontWeightSemibold\n    },\n    '& img': {\n      maxWidth: '100% !important', // Add !important to make sure it won't be overridden by style defined in element\n      height: 'auto !important'\n    },\n    '& video': {\n      maxWidth: '100% !important', // Add !important to make sure it won't be overridden by style defined in element\n      height: 'auto !important'\n    },\n    '& p': {\n      // Deal with awkward padding seen in messages from Teams.\n      // For more info see https://github.com/Azure/communication-ui-library/pull/1507\n      ...shorthands.marginBlock('0.125rem')\n    },\n    '& blockquote': {\n      backgroundColor: tokens.colorBrandBackgroundInverted,\n      clear: 'left',\n      minHeight: '2.25rem',\n      width: 'fit-content',\n      marginTop: '7px',\n      marginRight: '0px',\n      marginLeft: '0px',\n      marginBottom: '7px',\n      paddingTop: '7px',\n      paddingRight: '15px',\n      paddingLeft: '15px',\n      paddingBottom: '7px',\n      ...shorthands.border('solid'),\n      ...shorthands.borderRadius('4px'),\n      ...shorthands.borderWidth('1px'),\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n      borderLeftWidth: '4px'\n    },\n    '& code': {\n      whiteSpace: 'pre-wrap'\n    }\n  },\n  bodyWithPlaceholderImage: {\n    '& img[src=\"\"]': {\n      display: 'block',\n      position: 'relative',\n      marginBottom: '5px'\n    },\n    '& img[src=\"\"]:after': {\n      backgroundColor: tokens.colorNeutralBackground1Selected,\n      content: `url(\"data:image/gif;base64,R0lGODlhAQABAAAAACw=\")`,\n      backgroundSize: 'center',\n      position: 'absolute',\n      width: '100%',\n      height: '100%',\n      top: '0',\n      left: '0',\n      display: 'block'\n    }\n  },\n  bodyWithoutAvatar: {\n    marginTop: '0.125rem'\n  },\n  bodyWithAvatar: {\n    marginTop: `0.375rem`\n  },\n  avatarNoOverlap: {\n    marginLeft: `${-AVATAR_MARGIN_LEFT + AVATAR_MESSAGE_GAP_REM}rem`\n  },\n  avatarOverlap: {\n    marginLeft: `${-AVATAR_MARGIN_LEFT - MESSAGE_AVATAR_OVERLAP_REM}rem`\n  },\n  multipleAttachments: {\n    width: `${(_ATTACHMENT_CARD_WIDTH_IN_REM + _ATTACHMENT_CARD_MARGIN_IN_PX) * 2}rem`\n  }\n});\n\n/**\n * @private\n */\nexport const useChatMessageCommonStyles = makeStyles({\n  body: {\n    '& table': {\n      backgroundColor: tokens.colorBrandBackgroundInverted,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n      borderCollapse: 'collapse',\n      tableLayout: 'auto',\n      width: '100%',\n\n      '& tr': {\n        ...shorthands.border('1px', 'solid', `${tokens.colorNeutralStroke1Selected}`),\n\n        '& td': {\n          ...shorthands.border('1px', 'solid', `${tokens.colorNeutralStroke1Selected}`),\n          wordBreak: 'normal',\n          paddingTop: '0px',\n          paddingRight: '5px'\n        }\n      }\n    }\n  },\n  failed: {\n    //TODO: can we reuse a theme color here?\n    backgroundColor: 'rgba(168, 0, 0, 0.2)'\n  },\n  blocked: {\n    maxWidth: '100%',\n    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n    marginRight: '0rem',\n    color: tokens.colorNeutralForeground2,\n\n    // This makes message bubble show border in high contrast mode making each message distinguishable\n    ...shorthands.border('1px', 'solid', 'transparent'),\n    '& i': {\n      paddingTop: '0.25rem'\n    },\n\n    '& p': {\n      // Deal with awkward padding seen in messages from Teams.\n      // For more info see https://github.com/Azure/communication-ui-library/pull/1507\n      ...shorthands.marginBlock('0.125rem'),\n      paddingRight: '0.75rem',\n      fontStyle: 'italic'\n    },\n\n    '& a': {\n      ...shorthands.marginBlock('0.125rem'),\n      fontStyle: 'normal',\n      color: tokens.colorBrandForegroundLink,\n      ...shorthands.textDecoration('none')\n    }\n  }\n});\n\n/**\n * @private\n */\nexport const gutterWithAvatar: ComponentSlotStyle = {\n  paddingTop: '1.65rem',\n  width: `${AVATAR_WIDTH_REM}rem`,\n  position: 'relative',\n  float: 'left',\n  display: 'block',\n  visibility: 'visible',\n  zIndex: AVATAR_ZINDEX\n};\n\n/**\n * @private\n */\nexport const gutterWithHiddenAvatar: ComponentSlotStyle = {\n  ...gutterWithAvatar,\n  visibility: 'hidden',\n  // we use this hidden avatar just as a width placeholder\n  // the placeholder is needed for responsive bubble width\n  height: 0\n};\n\n/**\n * @private\n */\nexport const newMessageButtonStyle = mergeStyles({\n  float: 'right',\n  width: 'fit-content'\n});\n\n/**\n * @private\n */\nexport const buttonWithIconStyles: IButtonStyles = {\n  textContainer: {\n    display: 'contents'\n  }\n};\n\n/**\n * @private\n */\nexport const loadPreviousMessageButtonStyle = mergeStyles({\n  border: 'none',\n  minHeight: '1.5rem',\n  '&:hover': { background: 'none' },\n  '&:active': { background: 'none' }\n});\n\n/**\n * @private\n */\nexport const DownIconStyle = mergeStyles({\n  marginRight: '0.5em'\n});\n"]}
+{"version":3,"file":"MessageThread.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/MessageThread.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IButtonStyles, mergeStyles } from '@fluentui/react';\nimport { makeStyles, shorthands, tokens } from '@fluentui/react-components';\nimport { CSSProperties } from 'react';\nimport { MESSAGE_STATUS_INDICATOR_SIZE_REM } from './MessageStatusIndicator.styles';\nimport { ComponentSlotStyle } from '../../types';\nimport { _ATTACHMENT_CARD_MARGIN_IN_PX, _ATTACHMENT_CARD_WIDTH_IN_REM } from './AttachmentCard.styles';\n\n// Minimum chat bubble width. This matches the minimum chat bubble width from FluentUI\n// that can contain a message and a timestamp.\nconst CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM = 6.25;\n\n// Chat messages should span just short of the width of the container.\n// When calculating the width of a message we also must take into account\n// the width of the avatar/gutter and the gap between the message and avatar/gutter.\nconst AVATAR_WIDTH_REM = 2;\nconst AVATAR_MARGIN_LEFT = 2.5;\nconst AVATAR_MESSAGE_GAP_REM = 0.125;\nconst MESSAGE_AMOUNT_OUT_FROM_EDGE_REM = 2;\n\n// Avatars should display on top of chat messages when the chat thread is narrow\nconst MESSAGE_AVATAR_OVERLAP_REM = 0.925;\nconst CHAT_MESSAGE_ZINDEX = 1;\nconst AVATAR_ZINDEX = 2;\n// new message button should be on top of chat message\nconst NEW_MESSAGE_BUTTON_ZINDEX = 2;\n\n/**\n * @private\n */\nexport const messageThreadContainerStyle = mergeStyles({\n  height: '100%',\n  width: '100%',\n  maxHeight: '100%',\n  overflow: 'auto',\n  position: 'relative',\n  alignSelf: 'center'\n});\n\n/**\n * @private\n */\nexport const messageThreadWrapperContainerStyle = mergeStyles({\n  height: '100%',\n  width: '100%',\n  position: 'relative'\n});\n\n/**\n * @private\n */\nexport const noMessageStatusStyle = mergeStyles({\n  // This should match the size of the message status indicator icon to ensure\n  // multiple messages sent by the user are aligned correctly.\n  width: `${MESSAGE_STATUS_INDICATOR_SIZE_REM}rem`\n});\n\n/**\n * @private\n */\nexport const useChatStyles = makeStyles({\n  root: {\n    // chat components sets max width value to 1056px, override it to 100%\n    maxWidth: '100%',\n    paddingTop: '0.8rem',\n    paddingBottom: '0.5rem',\n    paddingRight: '0.6rem',\n    paddingLeft: '0.6rem',\n    ...shorthands.border('none'),\n    ...shorthands.overflow('auto'),\n    // `height: 100%` ensures that the Chat component covers 100% of it's parents height\n    // to prevent intermittent scrollbars when GIFs are present in the chat.\n    height: '100%',\n\n    '& a:link': {\n      color: tokens.colorBrandForegroundLink\n    },\n    '& a:visited': {\n      color: tokens.colorBrandForegroundLinkHover\n    },\n    '& a:hover': {\n      color: tokens.colorBrandForegroundLinkHover\n    }\n  }\n});\n\n/**\n * @private\n */\nexport const useChatMessageRenderStyles = makeStyles({\n  rootCommon: {},\n  rootMessage: {\n    ...shorthands.padding('0'),\n    ...shorthands.margin('0'),\n    maxWidth: '100%',\n    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`\n  },\n  rootMyMessage: {\n    gridTemplateColumns: 'auto fit-content(0)',\n    gridTemplateAreas: `\n        \"body status\"\n      `,\n    columnGap: '0',\n    gridGap: '0',\n    ...shorthands.padding('0'),\n    marginTop: '0',\n    marginRight: '0',\n    marginBottom: '0',\n    marginLeft: '50px',\n    width: `calc(100% - 50px)`\n  },\n  bodyCommon: {\n    ...shorthands.padding('0'),\n    marginRight: '0',\n    marginBottom: '0',\n    backgroundColor: 'transparent',\n    maxWidth: '100%',\n    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n    '&:focus-visible': {\n      outlineStyle: 'auto'\n    }\n  },\n  bodyMyMessage: {\n    width: '100%',\n    marginTop: '0'\n  },\n  bodyWithoutAvatar: {\n    marginLeft: `${AVATAR_MARGIN_LEFT}rem`,\n    marginTop: '0'\n  },\n  bodyWithAvatar: {\n    marginLeft: `0`,\n    marginTop: '0.75rem'\n  },\n  avatarNoOverlap: {\n    width: `calc(100% - ${AVATAR_WIDTH_REM + MESSAGE_AMOUNT_OUT_FROM_EDGE_REM + AVATAR_MESSAGE_GAP_REM}rem)`\n  },\n  avatarOverlap: {\n    width: `calc(100% - ${AVATAR_WIDTH_REM + MESSAGE_AMOUNT_OUT_FROM_EDGE_REM - MESSAGE_AVATAR_OVERLAP_REM}rem)`\n  }\n});\n\n/**\n * @private\n */\nexport const useChatMyMessageStyles = makeStyles({\n  root: {\n    // The first column's width should be set to  1fr\n    // because otherwise rich text editor's width will grow indefinitely\n    gridTemplateColumns: '1fr auto',\n    gridTemplateAreas: `\n        \". actions\"\n        \"body body\"\n      `,\n    gridGap: '0',\n    columnGap: '0',\n    paddingTop: '0',\n    marginLeft: '0'\n  },\n  body: {\n    paddingBottom: '10px',\n    marginTop: '1rem',\n    maxWidth: '100%',\n    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n    marginLeft: '0rem',\n    // This makes message bubble show border in high contrast mode making each message distinguishable\n    ...shorthands.border('1px', 'solid', 'transparent'),\n\n    '&:hover ~ .fui-ChatMyMessage__actions': {\n      visibility: 'visible'\n    },\n    '&:focus ~ .fui-ChatMyMessage__actions': {\n      visibility: 'visible'\n    },\n    '& msft-mention': {\n      color: tokens.colorStatusWarningBackground3,\n      fontWeight: 600\n    },\n    '&:focus-visible': {\n      outlineStyle: 'auto'\n    }\n  },\n  bodyAttached: {\n    marginTop: '0.125rem'\n  },\n  menu: {\n    boxShadow: tokens.shadow4,\n    backgroundColor: tokens.colorNeutralBackground1,\n    marginRight: '1px',\n    position: 'absolute',\n    top: '-2px',\n    right: '0',\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    zIndex: 1,\n    lineHeight: tokens.lineHeightBase100,\n    visibility: 'hidden',\n\n    '&:hover, &:focus': {\n      cursor: 'pointer',\n      visibility: 'visible'\n    }\n  },\n  menuAttached: {\n    top: '-18px'\n  },\n  menuHidden: {\n    visibility: 'hidden'\n  },\n  menuVisible: {\n    visibility: 'visible'\n  },\n  multipleAttachments: {\n    width: '100%',\n    maxWidth: `${(_ATTACHMENT_CARD_WIDTH_IN_REM + _ATTACHMENT_CARD_MARGIN_IN_PX) * 2}rem`\n  }\n});\n\n/**\n * @private\n */\nexport const newMessageButtonContainerStyle = mergeStyles({\n  position: 'absolute',\n  zIndex: NEW_MESSAGE_BUTTON_ZINDEX,\n  bottom: 0,\n  right: '1.5rem'\n});\n\n/**\n * @private\n */\nexport const chatMessageDateStyle: CSSProperties = {\n  fontWeight: 600\n};\n\n/**\n * @private\n */\nexport const useChatMessageStyles = makeStyles({\n  root: {\n    paddingTop: '0'\n  },\n  body: {\n    maxWidth: '100%',\n    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n    marginRight: '0rem',\n    paddingBottom: '10px',\n    zIndex: CHAT_MESSAGE_ZINDEX,\n    // This makes message bubble show border in high contrast mode making each message distinguishable\n    ...shorthands.border('1px', 'solid', 'transparent'),\n    '& > div:first-of-type': {\n      flexWrap: 'wrap'\n    },\n    '& msft-mention': {\n      color: tokens.colorStatusWarningBackground3,\n      fontWeight: tokens.fontWeightSemibold\n    },\n    '& img': {\n      maxWidth: '100% !important', // Add !important to make sure it won't be overridden by style defined in element\n      height: 'auto !important'\n    },\n    '& video': {\n      maxWidth: '100% !important', // Add !important to make sure it won't be overridden by style defined in element\n      height: 'auto !important'\n    },\n    '& p': {\n      // Deal with awkward padding seen in messages from Teams.\n      // For more info see https://github.com/Azure/communication-ui-library/pull/1507\n      ...shorthands.marginBlock('0.125rem')\n    },\n    '& blockquote': {\n      backgroundColor: tokens.colorBrandBackgroundInverted,\n      clear: 'left',\n      minHeight: '2.25rem',\n      width: 'fit-content',\n      marginTop: '7px',\n      marginRight: '0px',\n      marginLeft: '0px',\n      marginBottom: '7px',\n      paddingTop: '7px',\n      paddingRight: '15px',\n      paddingLeft: '15px',\n      paddingBottom: '7px',\n      ...shorthands.border('solid'),\n      ...shorthands.borderRadius('4px'),\n      ...shorthands.borderWidth('1px'),\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n      borderLeftWidth: '4px'\n    },\n    '& code': {\n      whiteSpace: 'pre-wrap'\n    },\n    '&:focus-visible': {\n      outlineStyle: 'auto'\n    }\n  },\n  bodyWithPlaceholderImage: {\n    '& img[src=\"\"]': {\n      display: 'block',\n      position: 'relative',\n      marginBottom: '5px'\n    },\n    '& img[src=\"\"]:after': {\n      backgroundColor: tokens.colorNeutralBackground1Selected,\n      content: `url(\"data:image/gif;base64,R0lGODlhAQABAAAAACw=\")`,\n      backgroundSize: 'center',\n      position: 'absolute',\n      width: '100%',\n      height: '100%',\n      top: '0',\n      left: '0',\n      display: 'block'\n    }\n  },\n  bodyWithoutAvatar: {\n    marginTop: '0.125rem'\n  },\n  bodyWithAvatar: {\n    marginTop: `0.375rem`\n  },\n  avatarNoOverlap: {\n    marginLeft: `${-AVATAR_MARGIN_LEFT + AVATAR_MESSAGE_GAP_REM}rem`\n  },\n  avatarOverlap: {\n    marginLeft: `${-AVATAR_MARGIN_LEFT - MESSAGE_AVATAR_OVERLAP_REM}rem`\n  },\n  multipleAttachments: {\n    width: `${(_ATTACHMENT_CARD_WIDTH_IN_REM + _ATTACHMENT_CARD_MARGIN_IN_PX) * 2}rem`\n  }\n});\n\n/**\n * @private\n */\nexport const useChatMessageCommonStyles = makeStyles({\n  body: {\n    '& table': {\n      backgroundColor: tokens.colorBrandBackgroundInverted,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n      borderCollapse: 'collapse',\n      tableLayout: 'auto',\n      width: '100%',\n\n      '& tr': {\n        ...shorthands.border('1px', 'solid', `${tokens.colorNeutralStroke1Selected}`),\n\n        '& td': {\n          ...shorthands.border('1px', 'solid', `${tokens.colorNeutralStroke1Selected}`),\n          wordBreak: 'normal',\n          paddingTop: '0px',\n          paddingRight: '5px'\n        }\n      }\n    }\n  },\n  failed: {\n    //TODO: can we reuse a theme color here?\n    backgroundColor: 'rgba(168, 0, 0, 0.2)'\n  },\n  blocked: {\n    maxWidth: '100%',\n    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n    marginRight: '0rem',\n    color: tokens.colorNeutralForeground2,\n\n    // This makes message bubble show border in high contrast mode making each message distinguishable\n    ...shorthands.border('1px', 'solid', 'transparent'),\n    '& i': {\n      paddingTop: '0.25rem'\n    },\n\n    '& p': {\n      // Deal with awkward padding seen in messages from Teams.\n      // For more info see https://github.com/Azure/communication-ui-library/pull/1507\n      ...shorthands.marginBlock('0.125rem'),\n      paddingRight: '0.75rem',\n      fontStyle: 'italic'\n    },\n\n    '& a': {\n      ...shorthands.marginBlock('0.125rem'),\n      fontStyle: 'normal',\n      color: tokens.colorBrandForegroundLink,\n      ...shorthands.textDecoration('none')\n    }\n  }\n});\n\n/**\n * @private\n */\nexport const gutterWithAvatar: ComponentSlotStyle = {\n  paddingTop: '1.65rem',\n  width: `${AVATAR_WIDTH_REM}rem`,\n  position: 'relative',\n  float: 'left',\n  display: 'block',\n  visibility: 'visible',\n  zIndex: AVATAR_ZINDEX\n};\n\n/**\n * @private\n */\nexport const gutterWithHiddenAvatar: ComponentSlotStyle = {\n  ...gutterWithAvatar,\n  visibility: 'hidden',\n  // we use this hidden avatar just as a width placeholder\n  // the placeholder is needed for responsive bubble width\n  height: 0\n};\n\n/**\n * @private\n */\nexport const newMessageButtonStyle = mergeStyles({\n  float: 'right',\n  width: 'fit-content'\n});\n\n/**\n * @private\n */\nexport const buttonWithIconStyles: IButtonStyles = {\n  textContainer: {\n    display: 'contents'\n  }\n};\n\n/**\n * @private\n */\nexport const loadPreviousMessageButtonStyle = mergeStyles({\n  border: 'none',\n  minHeight: '1.5rem',\n  '&:hover': { background: 'none' },\n  '&:active': { background: 'none' }\n});\n\n/**\n * @private\n */\nexport const DownIconStyle = mergeStyles({\n  marginRight: '0.5em'\n});\n"]}

package/dist/dist-esm/react-components/src/theming/icons.d.ts

@@ -105,6 +105,7 @@ export declare const DEFAULT_COMPONENT_ICONS: {
     ContextMenuCameraIcon: React.JSX.Element;
     ContextMenuMicIcon: React.JSX.Element;
     ContextMenuSpeakerIcon: React.JSX.Element;
+    ContextMenuRemoveParticipant: React.JSX.Element;
     SurveyStarIcon: React.JSX.Element;
     SurveyStarIconFilled: React.JSX.Element;
     StartSpotlightContextualMenuItem: React.JSX.Element;

package/dist/dist-esm/react-components/src/theming/icons.js

@@ -3,7 +3,7 @@
 import { mergeStyles } from '@fluentui/react';
 /* @conditional-compile-remove(call-readiness) */ /* @conditional-compile-remove(unsupported-browser) */
 import { Stack } from '@fluentui/react';
-import { ArrowClockwise16Regular, CallEnd20Filled, Checkmark20Regular, CheckmarkCircle16Regular, Circle16Regular, Delete20Regular, Dismiss20Regular, Dismiss16Regular, Edit20Regular, ErrorCircle16Regular, Eye16Regular, MicOff16Filled, MicOff16Regular, MicOff20Filled, Mic16Filled, Mic20Filled, Mic20Regular, MoreHorizontal20Filled, MoreHorizontal20Regular, People20Filled, Settings20Filled, Send20Filled, Send20Regular, ShareScreenStart20Filled, ShareScreenStop20Filled, Speaker220Regular, Video16Filled, Video20Filled, Video20Regular, VideoOff20Filled, ChevronLeft20Regular, ChevronRight20Regular, WifiWarning20Filled, SpeakerMute16Filled, MicProhibited16Filled, VideoProhibited16Filled, Pin16Filled, Pin20Regular, PinOff20Regular, ScaleFit20Regular, ScaleFill20Regular } from '@fluentui/react-icons';
+import { ArrowClockwise16Regular, CallEnd20Filled, Checkmark20Regular, CheckmarkCircle16Regular, Circle16Regular, Delete20Regular, Dismiss20Regular, Dismiss16Regular, Edit20Regular, ErrorCircle16Regular, Eye16Regular, MicOff16Filled, MicOff16Regular, MicOff20Filled, Mic16Filled, Mic20Filled, Mic20Regular, MoreHorizontal20Filled, MoreHorizontal20Regular, People20Filled, Settings20Filled, Send20Filled, Send20Regular, ShareScreenStart20Filled, ShareScreenStop20Filled, Speaker220Regular, Video16Filled, Video20Filled, Video20Regular, VideoOff20Filled, ChevronLeft20Regular, ChevronRight20Regular, WifiWarning20Filled, SpeakerMute16Filled, MicProhibited16Filled, VideoProhibited16Filled, Pin16Filled, Pin20Regular, PinOff20Regular, ScaleFit20Regular, ScaleFill20Regular, PersonDelete20Regular } from '@fluentui/react-icons';
 /* @conditional-compile-remove(rich-text-editor) */
 import { TextBold20Regular, TextItalic20Regular, TextUnderlineCharacterU20Regular, TextBulletList20Regular, TextNumberListLtr20Regular, TextIndentDecrease20Regular, TextIndentIncrease20Regular, DividerTall24Regular, TextEditStyle20Regular, TextEditStyle20Filled, Table20Regular, Table20Filled, TableAdd20Regular, TableDismiss20Regular } from '@fluentui/react-icons';
 import { Emoji20Regular } from '@fluentui/react-icons';
@@ -228,6 +228,7 @@ export const DEFAULT_COMPONENT_ICONS = {
     ContextMenuCameraIcon: React.createElement(Video20Regular, null),
     ContextMenuMicIcon: React.createElement(Mic20Regular, null),
     ContextMenuSpeakerIcon: React.createElement(Speaker220Regular, null),
+    ContextMenuRemoveParticipant: React.createElement(PersonDelete20Regular, null),
     /* @conditional-compile-remove(end-of-call-survey) */
     SurveyStarIcon: React.createElement(Star28Regular, null),
     /* @conditional-compile-remove(end-of-call-survey) */

package/dist/dist-esm/react-components/src/theming/icons.js.map

@@ -1 +1 @@
-{"version":3,"file":"icons.js","sourceRoot":"","sources":["../../../../../../react-components/src/theming/icons.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles } from '@fluentui/react';\n/* @conditional-compile-remove(call-readiness) */ /* @conditional-compile-remove(unsupported-browser) */\nimport { Stack } from '@fluentui/react';\nimport {\n  ArrowClockwise16Regular,\n  CallEnd20Filled,\n  Checkmark20Regular,\n  CheckmarkCircle16Regular,\n  Circle16Regular,\n  Delete20Regular,\n  Dismiss20Regular,\n  Dismiss16Regular,\n  Edit20Regular,\n  ErrorCircle16Regular,\n  Eye16Regular,\n  MicOff16Filled,\n  MicOff16Regular,\n  MicOff20Filled,\n  Mic16Filled,\n  Mic20Filled,\n  Mic20Regular,\n  MoreHorizontal20Filled,\n  MoreHorizontal20Regular,\n  People20Filled,\n  Settings20Filled,\n  Send20Filled,\n  Send20Regular,\n  ShareScreenStart20Filled,\n  ShareScreenStop20Filled,\n  Speaker220Regular,\n  Video16Filled,\n  Video20Filled,\n  Video20Regular,\n  VideoOff20Filled,\n  ChevronLeft20Regular,\n  ChevronRight20Regular,\n  WifiWarning20Filled,\n  SpeakerMute16Filled,\n  MicProhibited16Filled,\n  VideoProhibited16Filled,\n  Pin16Filled,\n  Pin20Regular,\n  PinOff20Regular,\n  ScaleFit20Regular,\n  ScaleFill20Regular\n} from '@fluentui/react-icons';\n/* @conditional-compile-remove(rich-text-editor) */\nimport {\n  TextBold20Regular,\n  TextItalic20Regular,\n  TextUnderlineCharacterU20Regular,\n  TextBulletList20Regular,\n  TextNumberListLtr20Regular,\n  TextIndentDecrease20Regular,\n  TextIndentIncrease20Regular,\n  DividerTall24Regular,\n  TextEditStyle20Regular,\n  TextEditStyle20Filled,\n  Table20Regular,\n  Table20Filled,\n  TableAdd20Regular,\n  TableDismiss20Regular\n} from '@fluentui/react-icons';\nimport { Emoji20Regular } from '@fluentui/react-icons';\n/* @conditional-compile-remove(end-of-call-survey) */\nimport { Star28Regular, Star28Filled } from '@fluentui/react-icons';\nimport { HandRight20Regular, HandRightOff20Regular } from '@fluentui/react-icons';\nimport {\n  ClosedCaption20Regular,\n  ClosedCaptionOff20Regular,\n  Settings20Regular,\n  PersonVoice20Regular,\n  Translate20Regular\n} from '@fluentui/react-icons';\n/* @conditional-compile-remove(call-readiness) */\nimport { Important20Filled } from '@fluentui/react-icons';\n\nimport { VideoBackgroundEffect20Filled, VideoBackgroundEffect20Regular } from '@fluentui/react-icons';\n\nimport { Backspace20Regular } from '@fluentui/react-icons';\n\n/* @conditional-compile-remove(call-readiness) */\nimport { Sparkle20Filled, VideoProhibited20Filled, MicProhibited20Filled } from '@fluentui/react-icons';\n\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { ArrowDownload20Regular, Open20Regular } from '@fluentui/react-icons';\n/* @conditional-compile-remove(PSTN-calls) */\nimport { CallPause20Regular, CallPause20Filled, Play20Regular } from '@fluentui/react-icons';\nimport { People20Regular } from '@fluentui/react-icons';\n\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { Prohibited16Regular } from '@fluentui/react-icons';\n\n/* @conditional-compile-remove(unsupported-browser) */\nimport { Warning20Filled } from '@fluentui/react-icons';\n\n/* @conditional-compile-remove(spotlight) */\nimport { VideoPersonStar20Filled, VideoPersonStarOff20Filled } from '@fluentui/react-icons';\n\nimport { _pxToRem } from '@internal/acs-ui-common';\n\nimport React from 'react';\nimport { useTheme } from './FluentThemeProvider';\n/* @conditional-compile-remove(call-readiness) */\nimport { sitePermissionIconBackgroundStyle, scaledIconStyles } from './icons.styles';\n\n/**\n * Icons used by the React components exported from this library.\n *\n * @remark See {@link CompositeIcons} for icons used by composites only.\n *\n * @public\n */\nexport type ComponentIcons = Record<keyof typeof DEFAULT_COMPONENT_ICONS, JSX.Element>;\n\nconst WifiWarning16Filled = (): JSX.Element => (\n  // All ErrorBar icons are 16px x 16px (when 1rem = 16 px).\n  // There is no 16px version of this icon in the fluent icon package, so scale the larger\n  // one down to required size.\n  <div className={mergeStyles({ transform: 'scale(0.8)' })}>\n    <WifiWarning20Filled />\n  </div>\n);\n\nconst MoreHorizontal18Regular = (): JSX.Element => (\n  // MoreHorizontal icons are 16px x 16px or 20px x 20px so scaling to get desired size\n  <div className={mergeStyles({ transform: 'scale(0.9)' })}>\n    <MoreHorizontal20Regular />\n  </div>\n);\n\n/* @conditional-compile-remove(call-readiness) */\nconst SitePermissionMic20Filled = (): JSX.Element => {\n  const theme = useTheme();\n  return (\n    <Stack horizontalAlign={'center'} styles={sitePermissionIconBackgroundStyle(theme)}>\n      <div className={mergeStyles(scaledIconStyles(theme))}>\n        <Mic20Filled />\n      </div>\n    </Stack>\n  );\n};\n\n/* @conditional-compile-remove(call-readiness) */\nconst SitePermissionCamera20Filled = (): JSX.Element => {\n  const theme = useTheme();\n  return (\n    <Stack horizontalAlign={'center'} styles={sitePermissionIconBackgroundStyle(theme)}>\n      <div className={mergeStyles(scaledIconStyles(theme))}>\n        <Video20Filled />\n      </div>\n    </Stack>\n  );\n};\n\n/* @conditional-compile-remove(call-readiness) */\nconst SitePermissionsMicDenied20Filled = (): JSX.Element => {\n  const theme = useTheme();\n  return (\n    <Stack horizontalAlign={'center'} styles={sitePermissionIconBackgroundStyle(theme)}>\n      <div className={mergeStyles(scaledIconStyles(theme))}>\n        <MicProhibited20Filled />\n      </div>\n    </Stack>\n  );\n};\n\n/* @conditional-compile-remove(call-readiness) */\nconst SitePermissionsCameraDenied20Filled = (): JSX.Element => {\n  const theme = useTheme();\n  return (\n    <Stack horizontalAlign={'center'} styles={sitePermissionIconBackgroundStyle(theme)}>\n      <div className={mergeStyles(scaledIconStyles(theme))}>\n        <VideoProhibited20Filled />\n      </div>\n    </Stack>\n  );\n};\n\n/* @conditional-compile-remove(call-readiness) */\nconst SitePermissionSparkle20Filled = (): JSX.Element => (\n  <div className={mergeStyles({ transform: 'scale(2)' })}>\n    <Sparkle20Filled />\n  </div>\n);\n\n/* @conditional-compile-remove(unsupported-browser) */\nconst UnsupportedEnvironmentWarning = (): JSX.Element => {\n  const theme = useTheme();\n  return (\n    <Stack\n      horizontalAlign={'center'}\n      styles={{\n        root: {\n          width: _pxToRem(84),\n          borderRadius: '100%',\n          background: theme.palette.themeLighterAlt,\n          padding: '2rem',\n          margin: 'auto'\n        }\n      }}\n    >\n      <div className={mergeStyles(scaledIconStyles(theme))}>\n        <Warning20Filled />\n      </div>\n    </Stack>\n  );\n};\n\n/* @conditional-compile-remove(call-readiness) */\nconst BrowserPermissionDenied20Filled = (): JSX.Element => {\n  const theme = useTheme();\n  return (\n    <Stack horizontalAlign={'center'} styles={sitePermissionIconBackgroundStyle(theme)}>\n      <div className={mergeStyles(scaledIconStyles(theme))}>\n        <Important20Filled />\n      </div>\n    </Stack>\n  );\n};\n\n/* @conditional-compile-remove(data-loss-prevention) */\nconst DataLossPreventionProhibited16Regular = (): JSX.Element => {\n  return <Prohibited16Regular />;\n};\n\nconst GalleryLeftButton = (): JSX.Element => {\n  const rtl = useTheme().rtl;\n  return rtl ? <ChevronRight20Regular /> : <ChevronLeft20Regular />;\n};\n\nconst GalleryRightButton = (): JSX.Element => {\n  const rtl = useTheme().rtl;\n  return rtl ? <ChevronLeft20Regular /> : <ChevronRight20Regular />;\n};\n\nconst ControlButtonRaiseHandIcon = (): JSX.Element => {\n  return <HandRight20Regular />;\n};\n\nconst ControlButtonLowerHandIcon = (): JSX.Element => {\n  return <HandRightOff20Regular />;\n};\n\n/**\n * The default set of icons that are available to use in the UI components.\n *\n * @remark Icons used only in the composites are available in {@link DEFAULT_COMPOSITE_ICONS}.\n *\n * @public\n */\nexport const DEFAULT_COMPONENT_ICONS = {\n  ChatMessageOptions: <MoreHorizontal18Regular />,\n  ControlButtonCameraOff: <VideoOff20Filled />,\n  ControlButtonCameraOn: <Video20Filled />,\n  ControlButtonEndCall: <CallEnd20Filled />,\n  ControlButtonMicOff: <MicOff20Filled />,\n  ControlButtonMicOn: <Mic20Filled />,\n  ControlButtonOptions: <Settings20Filled />,\n  ControlButtonParticipants: <People20Filled />,\n  ControlButtonParticipantsContextualMenuItem: <People20Regular />,\n  ControlButtonScreenShareStart: <ShareScreenStart20Filled />,\n  ControlButtonScreenShareStop: <ShareScreenStop20Filled />,\n  ControlButtonRaiseHand: <ControlButtonRaiseHandIcon />,\n  ControlButtonLowerHand: <ControlButtonLowerHandIcon />,\n  RaiseHandContextualMenuItem: <HandRight20Regular />,\n  LowerHandContextualMenuItem: <HandRightOff20Regular />,\n  ReactionButtonIcon: <Emoji20Regular />,\n  /* @conditional-compile-remove(attachment-upload) */\n  CancelAttachmentUpload: <Dismiss16Regular />,\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  DownloadAttachment: <ArrowDownload20Regular />,\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  OpenAttachment: <Open20Regular />,\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  AttachmentMoreMenu: <MoreHorizontal20Filled />,\n  /* @conditional-compile-remove(data-loss-prevention) */\n  DataLossPreventionProhibited: <DataLossPreventionProhibited16Regular />,\n  EditBoxCancel: <Dismiss20Regular />,\n  EditBoxSubmit: <Checkmark20Regular />,\n  ErrorBarCallCameraAccessDenied: <VideoProhibited16Filled />,\n  ErrorBarCallCameraAlreadyInUse: <VideoProhibited16Filled />,\n  ErrorBarCallLocalVideoFreeze: <WifiWarning16Filled />,\n  ErrorBarCallMacOsCameraAccessDenied: <VideoProhibited16Filled />,\n  ErrorBarCallMacOsMicrophoneAccessDenied: <MicProhibited16Filled />,\n  ErrorBarCallMicrophoneAccessDenied: <MicProhibited16Filled />,\n  ErrorBarCallMicrophoneMutedBySystem: <MicOff16Filled />,\n  ErrorBarCallMicrophoneUnmutedBySystem: <Mic16Filled />,\n  ErrorBarCallNetworkQualityLow: <WifiWarning16Filled />,\n  ErrorBarCallNoMicrophoneFound: <MicProhibited16Filled />,\n  ErrorBarCallNoSpeakerFound: <SpeakerMute16Filled />,\n  ErrorBarClear: <Dismiss16Regular />,\n  ErrorBarCallVideoRecoveredBySystem: <Video16Filled />,\n  ErrorBarCallVideoStoppedBySystem: <VideoProhibited16Filled />,\n  HorizontalGalleryLeftButton: <GalleryLeftButton />,\n  HorizontalGalleryRightButton: <GalleryRightButton />,\n  MessageDelivered: <CheckmarkCircle16Regular />,\n  MessageEdit: <Edit20Regular />,\n  MessageFailed: <ErrorCircle16Regular />,\n  MessageRemove: <Delete20Regular />,\n  MessageResend: <ArrowClockwise16Regular />,\n  MessageSeen: <Eye16Regular />,\n  MessageSending: <Circle16Regular />,\n  OptionsCamera: <Video20Regular />,\n  OptionsMic: <Mic20Regular />,\n  OptionsSpeaker: <Speaker220Regular />,\n  ParticipantItemMicOff: <MicOff16Regular />,\n  ParticipantItemOptions: <></>,\n  ParticipantItemOptionsHovered: <MoreHorizontal20Filled />,\n  ParticipantItemScreenShareStart: <ShareScreenStart20Filled />,\n  /* @conditional-compile-remove(spotlight) */\n  ParticipantItemSpotlighted: <VideoPersonStar20Filled />,\n  /* @conditional-compile-remove(PSTN-calls) */\n  HoldCallContextualMenuItem: <CallPause20Regular />,\n  /* @conditional-compile-remove(PSTN-calls) */\n  HoldCallButton: <CallPause20Filled />,\n  /* @conditional-compile-remove(PSTN-calls) */\n  ResumeCall: <Play20Regular />,\n  SendBoxSend: <Send20Regular />,\n  SendBoxSendHovered: <Send20Filled />,\n  VideoTileMicOff: <MicOff16Filled />,\n  DialpadBackspace: <Backspace20Regular />,\n  /* @conditional-compile-remove(call-readiness) */\n  SitePermissionsSparkle: <SitePermissionSparkle20Filled />,\n  /* @conditional-compile-remove(call-readiness) */\n  SitePermissionCamera: <SitePermissionCamera20Filled />,\n  /* @conditional-compile-remove(call-readiness) */\n  SitePermissionMic: <SitePermissionMic20Filled />,\n  /* @conditional-compile-remove(call-readiness) */\n  SitePermissionCameraDenied: <SitePermissionsCameraDenied20Filled />,\n  /* @conditional-compile-remove(call-readiness) */\n  SitePermissionMicDenied: <SitePermissionsMicDenied20Filled />,\n  /* @conditional-compile-remove(unsupported-browser) */\n  UnsupportedEnvironmentWarning: <UnsupportedEnvironmentWarning />,\n  /* @conditional-compile-remove(call-readiness) */\n  BrowserPermissionDeniedError: <BrowserPermissionDenied20Filled />,\n  VideoTilePinned: <Pin16Filled />,\n  VideoTileMoreOptions: <MoreHorizontal20Filled />,\n  VideoTileScaleFit: <ScaleFit20Regular />,\n  VideoTileScaleFill: <ScaleFill20Regular />,\n  PinParticipant: <Pin20Regular />,\n  UnpinParticipant: <PinOff20Regular />,\n  SplitButtonPrimaryActionCameraOn: <Video20Filled />,\n  SplitButtonPrimaryActionCameraOff: <VideoOff20Filled />,\n  SplitButtonPrimaryActionMicUnmuted: <Mic20Filled />,\n  SplitButtonPrimaryActionMicMuted: <MicOff20Filled />,\n  VerticalGalleryLeftButton: <GalleryLeftButton />,\n  VerticalGalleryRightButton: <GalleryRightButton />,\n  ControlButtonVideoEffectsOption: <VideoBackgroundEffect20Regular />,\n  ConfigurationScreenVideoEffectsButton: <VideoBackgroundEffect20Filled />,\n  CaptionsIcon: <ClosedCaption20Regular />,\n  CaptionsOffIcon: <ClosedCaptionOff20Regular />,\n  CaptionsSettingsIcon: <Settings20Regular />,\n  ChangeSpokenLanguageIcon: <PersonVoice20Regular />,\n  ChangeCaptionLanguageIcon: <Translate20Regular />,\n  ContextMenuCameraIcon: <Video20Regular />,\n  ContextMenuMicIcon: <Mic20Regular />,\n  ContextMenuSpeakerIcon: <Speaker220Regular />,\n  /* @conditional-compile-remove(end-of-call-survey) */\n  SurveyStarIcon: <Star28Regular />,\n  /* @conditional-compile-remove(end-of-call-survey) */\n  SurveyStarIconFilled: <Star28Filled />,\n  /* @conditional-compile-remove(spotlight) */\n  StartSpotlightContextualMenuItem: <VideoPersonStar20Filled />,\n  /* @conditional-compile-remove(spotlight) */\n  StopSpotlightContextualMenuItem: <VideoPersonStarOff20Filled />,\n  /* @conditional-compile-remove(spotlight) */\n  VideoTileSpotlighted: <VideoPersonStar20Filled style={{ height: '16px', width: '16px' }} />,\n  /* @conditional-compile-remove(rich-text-editor) */\n  RichTextBoldButtonIcon: <TextBold20Regular />,\n  /* @conditional-compile-remove(rich-text-editor) */\n  RichTextItalicButtonIcon: <TextItalic20Regular />,\n  /* @conditional-compile-remove(rich-text-editor) */\n  RichTextUnderlineButtonIcon: <TextUnderlineCharacterU20Regular />,\n  /* @conditional-compile-remove(rich-text-editor) */\n  RichTextBulletListButtonIcon: <TextBulletList20Regular />,\n  /* @conditional-compile-remove(rich-text-editor) */\n  RichTextNumberListButtonIcon: <TextNumberListLtr20Regular />,\n  /* @conditional-compile-remove(rich-text-editor) */\n  RichTextIndentDecreaseButtonIcon: <TextIndentDecrease20Regular />,\n  /* @conditional-compile-remove(rich-text-editor) */\n  RichTextIndentIncreaseButtonIcon: <TextIndentIncrease20Regular />,\n  /* @conditional-compile-remove(rich-text-editor) */\n  RichTextDividerIcon: <DividerTall24Regular />,\n  /* @conditional-compile-remove(rich-text-editor) */\n  RichTextEditorButtonIcon: <TextEditStyle20Regular />,\n  /* @conditional-compile-remove(rich-text-editor) */\n  RichTextEditorButtonIconFilled: <TextEditStyle20Filled />,\n  /* @conditional-compile-remove(rich-text-editor) */\n  RichTextInsertTableRegularIcon: <Table20Regular />,\n  /* @conditional-compile-remove(rich-text-editor) */\n  RichTextInsertTableFilledIcon: <Table20Filled />,\n  /* @conditional-compile-remove(rich-text-editor) */\n  RichTextTableInsertMenuIcon: <TableAdd20Regular />,\n  /* @conditional-compile-remove(rich-text-editor) */\n  RichTextTableDeleteMenuIcon: <TableDismiss20Regular />\n};\n"]}
+{"version":3,"file":"icons.js","sourceRoot":"","sources":["../../../../../../react-components/src/theming/icons.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,iDAAiD,CAAC,sDAAsD;AACxG,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EACL,uBAAuB,EACvB,eAAe,EACf,kBAAkB,EAClB,wBAAwB,EACxB,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAChB,aAAa,EACb,oBAAoB,EACpB,YAAY,EACZ,cAAc,EACd,eAAe,EACf,cAAc,EACd,WAAW,EACX,WAAW,EACX,YAAY,EACZ,sBAAsB,EACtB,uBAAuB,EACvB,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,aAAa,EACb,wBAAwB,EACxB,uBAAuB,EACvB,iBAAiB,EACjB,aAAa,EACb,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,oBAAoB,EACpB,qBAAqB,EACrB,mBAAmB,EACnB,mBAAmB,EACnB,qBAAqB,EACrB,uBAAuB,EACvB,WAAW,EACX,YAAY,EACZ,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,qBAAqB,EACtB,MAAM,uBAAuB,CAAC;AAC/B,mDAAmD;AACnD,OAAO,EACL,iBAAiB,EACjB,mBAAmB,EACnB,gCAAgC,EAChC,uBAAuB,EACvB,0BAA0B,EAC1B,2BAA2B,EAC3B,2BAA2B,EAC3B,oBAAoB,EACpB,sBAAsB,EACtB,qBAAqB,EACrB,cAAc,EACd,aAAa,EACb,iBAAiB,EACjB,qBAAqB,EACtB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,qDAAqD;AACrD,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAClF,OAAO,EACL,sBAAsB,EACtB,yBAAyB,EACzB,iBAAiB,EACjB,oBAAoB,EACpB,kBAAkB,EACnB,MAAM,uBAAuB,CAAC;AAC/B,iDAAiD;AACjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1D,OAAO,EAAE,6BAA6B,EAAE,8BAA8B,EAAE,MAAM,uBAAuB,CAAC;AAEtG,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAE3D,iDAAiD;AACjD,OAAO,EAAE,eAAe,EAAE,uBAAuB,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAExG,qGAAqG;AACrG,OAAO,EAAE,sBAAsB,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC9E,6CAA6C;AAC7C,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC7F,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAExD,uDAAuD;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,sDAAsD;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAExD,4CAA4C;AAC5C,OAAO,EAAE,uBAAuB,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AAE5F,OAAO,EAAE,QAAQ,EAAE,mCAAgC;AAEnD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,iDAAiD;AACjD,OAAO,EAAE,iCAAiC,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAWrF,MAAM,mBAAmB,GAAG,GAAgB,EAAE,CAAC;AAC7C,0DAA0D;AAC1D,wFAAwF;AACxF,6BAA6B;AAC7B,6BAAK,SAAS,EAAE,WAAW,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;IACtD,oBAAC,mBAAmB,OAAG,CACnB,CACP,CAAC;AAEF,MAAM,uBAAuB,GAAG,GAAgB,EAAE,CAAC;AACjD,qFAAqF;AACrF,6BAAK,SAAS,EAAE,WAAW,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;IACtD,oBAAC,uBAAuB,OAAG,CACvB,CACP,CAAC;AAEF,iDAAiD;AACjD,MAAM,yBAAyB,GAAG,GAAgB,EAAE;IAClD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,OAAO,CACL,oBAAC,KAAK,IAAC,eAAe,EAAE,QAAQ,EAAE,MAAM,EAAE,iCAAiC,CAAC,KAAK,CAAC;QAChF,6BAAK,SAAS,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;YAClD,oBAAC,WAAW,OAAG,CACX,CACA,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,iDAAiD;AACjD,MAAM,4BAA4B,GAAG,GAAgB,EAAE;IACrD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,OAAO,CACL,oBAAC,KAAK,IAAC,eAAe,EAAE,QAAQ,EAAE,MAAM,EAAE,iCAAiC,CAAC,KAAK,CAAC;QAChF,6BAAK,SAAS,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;YAClD,oBAAC,aAAa,OAAG,CACb,CACA,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,iDAAiD;AACjD,MAAM,gCAAgC,GAAG,GAAgB,EAAE;IACzD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,OAAO,CACL,oBAAC,KAAK,IAAC,eAAe,EAAE,QAAQ,EAAE,MAAM,EAAE,iCAAiC,CAAC,KAAK,CAAC;QAChF,6BAAK,SAAS,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;YAClD,oBAAC,qBAAqB,OAAG,CACrB,CACA,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,iDAAiD;AACjD,MAAM,mCAAmC,GAAG,GAAgB,EAAE;IAC5D,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,OAAO,CACL,oBAAC,KAAK,IAAC,eAAe,EAAE,QAAQ,EAAE,MAAM,EAAE,iCAAiC,CAAC,KAAK,CAAC;QAChF,6BAAK,SAAS,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;YAClD,oBAAC,uBAAuB,OAAG,CACvB,CACA,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,iDAAiD;AACjD,MAAM,6BAA6B,GAAG,GAAgB,EAAE,CAAC,CACvD,6BAAK,SAAS,EAAE,WAAW,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;IACpD,oBAAC,eAAe,OAAG,CACf,CACP,CAAC;AAEF,sDAAsD;AACtD,MAAM,6BAA6B,GAAG,GAAgB,EAAE;IACtD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,OAAO,CACL,oBAAC,KAAK,IACJ,eAAe,EAAE,QAAQ,EACzB,MAAM,EAAE;YACN,IAAI,EAAE;gBACJ,KAAK,EAAE,QAAQ,CAAC,EAAE,CAAC;gBACnB,YAAY,EAAE,MAAM;gBACpB,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,eAAe;gBACzC,OAAO,EAAE,MAAM;gBACf,MAAM,EAAE,MAAM;aACf;SACF;QAED,6BAAK,SAAS,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;YAClD,oBAAC,eAAe,OAAG,CACf,CACA,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,iDAAiD;AACjD,MAAM,+BAA+B,GAAG,GAAgB,EAAE;IACxD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,OAAO,CACL,oBAAC,KAAK,IAAC,eAAe,EAAE,QAAQ,EAAE,MAAM,EAAE,iCAAiC,CAAC,KAAK,CAAC;QAChF,6BAAK,SAAS,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;YAClD,oBAAC,iBAAiB,OAAG,CACjB,CACA,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,uDAAuD;AACvD,MAAM,qCAAqC,GAAG,GAAgB,EAAE;IAC9D,OAAO,oBAAC,mBAAmB,OAAG,CAAC;AACjC,CAAC,CAAC;AAEF,MAAM,iBAAiB,GAAG,GAAgB,EAAE;IAC1C,MAAM,GAAG,GAAG,QAAQ,EAAE,CAAC,GAAG,CAAC;IAC3B,OAAO,GAAG,CAAC,CAAC,CAAC,oBAAC,qBAAqB,OAAG,CAAC,CAAC,CAAC,oBAAC,oBAAoB,OAAG,CAAC;AACpE,CAAC,CAAC;AAEF,MAAM,kBAAkB,GAAG,GAAgB,EAAE;IAC3C,MAAM,GAAG,GAAG,QAAQ,EAAE,CAAC,GAAG,CAAC;IAC3B,OAAO,GAAG,CAAC,CAAC,CAAC,oBAAC,oBAAoB,OAAG,CAAC,CAAC,CAAC,oBAAC,qBAAqB,OAAG,CAAC;AACpE,CAAC,CAAC;AAEF,MAAM,0BAA0B,GAAG,GAAgB,EAAE;IACnD,OAAO,oBAAC,kBAAkB,OAAG,CAAC;AAChC,CAAC,CAAC;AAEF,MAAM,0BAA0B,GAAG,GAAgB,EAAE;IACnD,OAAO,oBAAC,qBAAqB,OAAG,CAAC;AACnC,CAAC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,kBAAkB,EAAE,oBAAC,uBAAuB,OAAG;IAC/C,sBAAsB,EAAE,oBAAC,gBAAgB,OAAG;IAC5C,qBAAqB,EAAE,oBAAC,aAAa,OAAG;IACxC,oBAAoB,EAAE,oBAAC,eAAe,OAAG;IACzC,mBAAmB,EAAE,oBAAC,cAAc,OAAG;IACvC,kBAAkB,EAAE,oBAAC,WAAW,OAAG;IACnC,oBAAoB,EAAE,oBAAC,gBAAgB,OAAG;IAC1C,yBAAyB,EAAE,oBAAC,cAAc,OAAG;IAC7C,2CAA2C,EAAE,oBAAC,eAAe,OAAG;IAChE,6BAA6B,EAAE,oBAAC,wBAAwB,OAAG;IAC3D,4BAA4B,EAAE,oBAAC,uBAAuB,OAAG;IACzD,sBAAsB,EAAE,oBAAC,0BAA0B,OAAG;IACtD,sBAAsB,EAAE,oBAAC,0BAA0B,OAAG;IACtD,2BAA2B,EAAE,oBAAC,kBAAkB,OAAG;IACnD,2BAA2B,EAAE,oBAAC,qBAAqB,OAAG;IACtD,kBAAkB,EAAE,oBAAC,cAAc,OAAG;IACtC,oDAAoD;IACpD,sBAAsB,EAAE,oBAAC,gBAAgB,OAAG;IAC5C,qGAAqG;IACrG,kBAAkB,EAAE,oBAAC,sBAAsB,OAAG;IAC9C,qGAAqG;IACrG,cAAc,EAAE,oBAAC,aAAa,OAAG;IACjC,qGAAqG;IACrG,kBAAkB,EAAE,oBAAC,sBAAsB,OAAG;IAC9C,uDAAuD;IACvD,4BAA4B,EAAE,oBAAC,qCAAqC,OAAG;IACvE,aAAa,EAAE,oBAAC,gBAAgB,OAAG;IACnC,aAAa,EAAE,oBAAC,kBAAkB,OAAG;IACrC,8BAA8B,EAAE,oBAAC,uBAAuB,OAAG;IAC3D,8BAA8B,EAAE,oBAAC,uBAAuB,OAAG;IAC3D,4BAA4B,EAAE,oBAAC,mBAAmB,OAAG;IACrD,mCAAmC,EAAE,oBAAC,uBAAuB,OAAG;IAChE,uCAAuC,EAAE,oBAAC,qBAAqB,OAAG;IAClE,kCAAkC,EAAE,oBAAC,qBAAqB,OAAG;IAC7D,mCAAmC,EAAE,oBAAC,cAAc,OAAG;IACvD,qCAAqC,EAAE,oBAAC,WAAW,OAAG;IACtD,6BAA6B,EAAE,oBAAC,mBAAmB,OAAG;IACtD,6BAA6B,EAAE,oBAAC,qBAAqB,OAAG;IACxD,0BAA0B,EAAE,oBAAC,mBAAmB,OAAG;IACnD,aAAa,EAAE,oBAAC,gBAAgB,OAAG;IACnC,kCAAkC,EAAE,oBAAC,aAAa,OAAG;IACrD,gCAAgC,EAAE,oBAAC,uBAAuB,OAAG;IAC7D,2BAA2B,EAAE,oBAAC,iBAAiB,OAAG;IAClD,4BAA4B,EAAE,oBAAC,kBAAkB,OAAG;IACpD,gBAAgB,EAAE,oBAAC,wBAAwB,OAAG;IAC9C,WAAW,EAAE,oBAAC,aAAa,OAAG;IAC9B,aAAa,EAAE,oBAAC,oBAAoB,OAAG;IACvC,aAAa,EAAE,oBAAC,eAAe,OAAG;IAClC,aAAa,EAAE,oBAAC,uBAAuB,OAAG;IAC1C,WAAW,EAAE,oBAAC,YAAY,OAAG;IAC7B,cAAc,EAAE,oBAAC,eAAe,OAAG;IACnC,aAAa,EAAE,oBAAC,cAAc,OAAG;IACjC,UAAU,EAAE,oBAAC,YAAY,OAAG;IAC5B,cAAc,EAAE,oBAAC,iBAAiB,OAAG;IACrC,qBAAqB,EAAE,oBAAC,eAAe,OAAG;IAC1C,sBAAsB,EAAE,yCAAK;IAC7B,6BAA6B,EAAE,oBAAC,sBAAsB,OAAG;IACzD,+BAA+B,EAAE,oBAAC,wBAAwB,OAAG;IAC7D,4CAA4C;IAC5C,0BAA0B,EAAE,oBAAC,uBAAuB,OAAG;IACvD,6CAA6C;IAC7C,0BAA0B,EAAE,oBAAC,kBAAkB,OAAG;IAClD,6CAA6C;IAC7C,cAAc,EAAE,oBAAC,iBAAiB,OAAG;IACrC,6CAA6C;IAC7C,UAAU,EAAE,oBAAC,aAAa,OAAG;IAC7B,WAAW,EAAE,oBAAC,aAAa,OAAG;IAC9B,kBAAkB,EAAE,oBAAC,YAAY,OAAG;IACpC,eAAe,EAAE,oBAAC,cAAc,OAAG;IACnC,gBAAgB,EAAE,oBAAC,kBAAkB,OAAG;IACxC,iDAAiD;IACjD,sBAAsB,EAAE,oBAAC,6BAA6B,OAAG;IACzD,iDAAiD;IACjD,oBAAoB,EAAE,oBAAC,4BAA4B,OAAG;IACtD,iDAAiD;IACjD,iBAAiB,EAAE,oBAAC,yBAAyB,OAAG;IAChD,iDAAiD;IACjD,0BAA0B,EAAE,oBAAC,mCAAmC,OAAG;IACnE,iDAAiD;IACjD,uBAAuB,EAAE,oBAAC,gCAAgC,OAAG;IAC7D,sDAAsD;IACtD,6BAA6B,EAAE,oBAAC,6BAA6B,OAAG;IAChE,iDAAiD;IACjD,4BAA4B,EAAE,oBAAC,+BAA+B,OAAG;IACjE,eAAe,EAAE,oBAAC,WAAW,OAAG;IAChC,oBAAoB,EAAE,oBAAC,sBAAsB,OAAG;IAChD,iBAAiB,EAAE,oBAAC,iBAAiB,OAAG;IACxC,kBAAkB,EAAE,oBAAC,kBAAkB,OAAG;IAC1C,cAAc,EAAE,oBAAC,YAAY,OAAG;IAChC,gBAAgB,EAAE,oBAAC,eAAe,OAAG;IACrC,gCAAgC,EAAE,oBAAC,aAAa,OAAG;IACnD,iCAAiC,EAAE,oBAAC,gBAAgB,OAAG;IACvD,kCAAkC,EAAE,oBAAC,WAAW,OAAG;IACnD,gCAAgC,EAAE,oBAAC,cAAc,OAAG;IACpD,yBAAyB,EAAE,oBAAC,iBAAiB,OAAG;IAChD,0BAA0B,EAAE,oBAAC,kBAAkB,OAAG;IAClD,+BAA+B,EAAE,oBAAC,8BAA8B,OAAG;IACnE,qCAAqC,EAAE,oBAAC,6BAA6B,OAAG;IACxE,YAAY,EAAE,oBAAC,sBAAsB,OAAG;IACxC,eAAe,EAAE,oBAAC,yBAAyB,OAAG;IAC9C,oBAAoB,EAAE,oBAAC,iBAAiB,OAAG;IAC3C,wBAAwB,EAAE,oBAAC,oBAAoB,OAAG;IAClD,yBAAyB,EAAE,oBAAC,kBAAkB,OAAG;IACjD,qBAAqB,EAAE,oBAAC,cAAc,OAAG;IACzC,kBAAkB,EAAE,oBAAC,YAAY,OAAG;IACpC,sBAAsB,EAAE,oBAAC,iBAAiB,OAAG;IAC7C,4BAA4B,EAAE,oBAAC,qBAAqB,OAAG;IACvD,qDAAqD;IACrD,cAAc,EAAE,oBAAC,aAAa,OAAG;IACjC,qDAAqD;IACrD,oBAAoB,EAAE,oBAAC,YAAY,OAAG;IACtC,4CAA4C;IAC5C,gCAAgC,EAAE,oBAAC,uBAAuB,OAAG;IAC7D,4CAA4C;IAC5C,+BAA+B,EAAE,oBAAC,0BAA0B,OAAG;IAC/D,4CAA4C;IAC5C,oBAAoB,EAAE,oBAAC,uBAAuB,IAAC,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAI;IAC3F,mDAAmD;IACnD,sBAAsB,EAAE,oBAAC,iBAAiB,OAAG;IAC7C,mDAAmD;IACnD,wBAAwB,EAAE,oBAAC,mBAAmB,OAAG;IACjD,mDAAmD;IACnD,2BAA2B,EAAE,oBAAC,gCAAgC,OAAG;IACjE,mDAAmD;IACnD,4BAA4B,EAAE,oBAAC,uBAAuB,OAAG;IACzD,mDAAmD;IACnD,4BAA4B,EAAE,oBAAC,0BAA0B,OAAG;IAC5D,mDAAmD;IACnD,gCAAgC,EAAE,oBAAC,2BAA2B,OAAG;IACjE,mDAAmD;IACnD,gCAAgC,EAAE,oBAAC,2BAA2B,OAAG;IACjE,mDAAmD;IACnD,mBAAmB,EAAE,oBAAC,oBAAoB,OAAG;IAC7C,mDAAmD;IACnD,wBAAwB,EAAE,oBAAC,sBAAsB,OAAG;IACpD,mDAAmD;IACnD,8BAA8B,EAAE,oBAAC,qBAAqB,OAAG;IACzD,mDAAmD;IACnD,8BAA8B,EAAE,oBAAC,cAAc,OAAG;IAClD,mDAAmD;IACnD,6BAA6B,EAAE,oBAAC,aAAa,OAAG;IAChD,mDAAmD;IACnD,2BAA2B,EAAE,oBAAC,iBAAiB,OAAG;IAClD,mDAAmD;IACnD,2BAA2B,EAAE,oBAAC,qBAAqB,OAAG;CACvD,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles } from '@fluentui/react';\n/* @conditional-compile-remove(call-readiness) */ /* @conditional-compile-remove(unsupported-browser) */\nimport { Stack } from '@fluentui/react';\nimport {\n  ArrowClockwise16Regular,\n  CallEnd20Filled,\n  Checkmark20Regular,\n  CheckmarkCircle16Regular,\n  Circle16Regular,\n  Delete20Regular,\n  Dismiss20Regular,\n  Dismiss16Regular,\n  Edit20Regular,\n  ErrorCircle16Regular,\n  Eye16Regular,\n  MicOff16Filled,\n  MicOff16Regular,\n  MicOff20Filled,\n  Mic16Filled,\n  Mic20Filled,\n  Mic20Regular,\n  MoreHorizontal20Filled,\n  MoreHorizontal20Regular,\n  People20Filled,\n  Settings20Filled,\n  Send20Filled,\n  Send20Regular,\n  ShareScreenStart20Filled,\n  ShareScreenStop20Filled,\n  Speaker220Regular,\n  Video16Filled,\n  Video20Filled,\n  Video20Regular,\n  VideoOff20Filled,\n  ChevronLeft20Regular,\n  ChevronRight20Regular,\n  WifiWarning20Filled,\n  SpeakerMute16Filled,\n  MicProhibited16Filled,\n  VideoProhibited16Filled,\n  Pin16Filled,\n  Pin20Regular,\n  PinOff20Regular,\n  ScaleFit20Regular,\n  ScaleFill20Regular,\n  PersonDelete20Regular\n} from '@fluentui/react-icons';\n/* @conditional-compile-remove(rich-text-editor) */\nimport {\n  TextBold20Regular,\n  TextItalic20Regular,\n  TextUnderlineCharacterU20Regular,\n  TextBulletList20Regular,\n  TextNumberListLtr20Regular,\n  TextIndentDecrease20Regular,\n  TextIndentIncrease20Regular,\n  DividerTall24Regular,\n  TextEditStyle20Regular,\n  TextEditStyle20Filled,\n  Table20Regular,\n  Table20Filled,\n  TableAdd20Regular,\n  TableDismiss20Regular\n} from '@fluentui/react-icons';\nimport { Emoji20Regular } from '@fluentui/react-icons';\n/* @conditional-compile-remove(end-of-call-survey) */\nimport { Star28Regular, Star28Filled } from '@fluentui/react-icons';\nimport { HandRight20Regular, HandRightOff20Regular } from '@fluentui/react-icons';\nimport {\n  ClosedCaption20Regular,\n  ClosedCaptionOff20Regular,\n  Settings20Regular,\n  PersonVoice20Regular,\n  Translate20Regular\n} from '@fluentui/react-icons';\n/* @conditional-compile-remove(call-readiness) */\nimport { Important20Filled } from '@fluentui/react-icons';\n\nimport { VideoBackgroundEffect20Filled, VideoBackgroundEffect20Regular } from '@fluentui/react-icons';\n\nimport { Backspace20Regular } from '@fluentui/react-icons';\n\n/* @conditional-compile-remove(call-readiness) */\nimport { Sparkle20Filled, VideoProhibited20Filled, MicProhibited20Filled } from '@fluentui/react-icons';\n\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { ArrowDownload20Regular, Open20Regular } from '@fluentui/react-icons';\n/* @conditional-compile-remove(PSTN-calls) */\nimport { CallPause20Regular, CallPause20Filled, Play20Regular } from '@fluentui/react-icons';\nimport { People20Regular } from '@fluentui/react-icons';\n\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { Prohibited16Regular } from '@fluentui/react-icons';\n\n/* @conditional-compile-remove(unsupported-browser) */\nimport { Warning20Filled } from '@fluentui/react-icons';\n\n/* @conditional-compile-remove(spotlight) */\nimport { VideoPersonStar20Filled, VideoPersonStarOff20Filled } from '@fluentui/react-icons';\n\nimport { _pxToRem } from '@internal/acs-ui-common';\n\nimport React from 'react';\nimport { useTheme } from './FluentThemeProvider';\n/* @conditional-compile-remove(call-readiness) */\nimport { sitePermissionIconBackgroundStyle, scaledIconStyles } from './icons.styles';\n\n/**\n * Icons used by the React components exported from this library.\n *\n * @remark See {@link CompositeIcons} for icons used by composites only.\n *\n * @public\n */\nexport type ComponentIcons = Record<keyof typeof DEFAULT_COMPONENT_ICONS, JSX.Element>;\n\nconst WifiWarning16Filled = (): JSX.Element => (\n  // All ErrorBar icons are 16px x 16px (when 1rem = 16 px).\n  // There is no 16px version of this icon in the fluent icon package, so scale the larger\n  // one down to required size.\n  <div className={mergeStyles({ transform: 'scale(0.8)' })}>\n    <WifiWarning20Filled />\n  </div>\n);\n\nconst MoreHorizontal18Regular = (): JSX.Element => (\n  // MoreHorizontal icons are 16px x 16px or 20px x 20px so scaling to get desired size\n  <div className={mergeStyles({ transform: 'scale(0.9)' })}>\n    <MoreHorizontal20Regular />\n  </div>\n);\n\n/* @conditional-compile-remove(call-readiness) */\nconst SitePermissionMic20Filled = (): JSX.Element => {\n  const theme = useTheme();\n  return (\n    <Stack horizontalAlign={'center'} styles={sitePermissionIconBackgroundStyle(theme)}>\n      <div className={mergeStyles(scaledIconStyles(theme))}>\n        <Mic20Filled />\n      </div>\n    </Stack>\n  );\n};\n\n/* @conditional-compile-remove(call-readiness) */\nconst SitePermissionCamera20Filled = (): JSX.Element => {\n  const theme = useTheme();\n  return (\n    <Stack horizontalAlign={'center'} styles={sitePermissionIconBackgroundStyle(theme)}>\n      <div className={mergeStyles(scaledIconStyles(theme))}>\n        <Video20Filled />\n      </div>\n    </Stack>\n  );\n};\n\n/* @conditional-compile-remove(call-readiness) */\nconst SitePermissionsMicDenied20Filled = (): JSX.Element => {\n  const theme = useTheme();\n  return (\n    <Stack horizontalAlign={'center'} styles={sitePermissionIconBackgroundStyle(theme)}>\n      <div className={mergeStyles(scaledIconStyles(theme))}>\n        <MicProhibited20Filled />\n      </div>\n    </Stack>\n  );\n};\n\n/* @conditional-compile-remove(call-readiness) */\nconst SitePermissionsCameraDenied20Filled = (): JSX.Element => {\n  const theme = useTheme();\n  return (\n    <Stack horizontalAlign={'center'} styles={sitePermissionIconBackgroundStyle(theme)}>\n      <div className={mergeStyles(scaledIconStyles(theme))}>\n        <VideoProhibited20Filled />\n      </div>\n    </Stack>\n  );\n};\n\n/* @conditional-compile-remove(call-readiness) */\nconst SitePermissionSparkle20Filled = (): JSX.Element => (\n  <div className={mergeStyles({ transform: 'scale(2)' })}>\n    <Sparkle20Filled />\n  </div>\n);\n\n/* @conditional-compile-remove(unsupported-browser) */\nconst UnsupportedEnvironmentWarning = (): JSX.Element => {\n  const theme = useTheme();\n  return (\n    <Stack\n      horizontalAlign={'center'}\n      styles={{\n        root: {\n          width: _pxToRem(84),\n          borderRadius: '100%',\n          background: theme.palette.themeLighterAlt,\n          padding: '2rem',\n          margin: 'auto'\n        }\n      }}\n    >\n      <div className={mergeStyles(scaledIconStyles(theme))}>\n        <Warning20Filled />\n      </div>\n    </Stack>\n  );\n};\n\n/* @conditional-compile-remove(call-readiness) */\nconst BrowserPermissionDenied20Filled = (): JSX.Element => {\n  const theme = useTheme();\n  return (\n    <Stack horizontalAlign={'center'} styles={sitePermissionIconBackgroundStyle(theme)}>\n      <div className={mergeStyles(scaledIconStyles(theme))}>\n        <Important20Filled />\n      </div>\n    </Stack>\n  );\n};\n\n/* @conditional-compile-remove(data-loss-prevention) */\nconst DataLossPreventionProhibited16Regular = (): JSX.Element => {\n  return <Prohibited16Regular />;\n};\n\nconst GalleryLeftButton = (): JSX.Element => {\n  const rtl = useTheme().rtl;\n  return rtl ? <ChevronRight20Regular /> : <ChevronLeft20Regular />;\n};\n\nconst GalleryRightButton = (): JSX.Element => {\n  const rtl = useTheme().rtl;\n  return rtl ? <ChevronLeft20Regular /> : <ChevronRight20Regular />;\n};\n\nconst ControlButtonRaiseHandIcon = (): JSX.Element => {\n  return <HandRight20Regular />;\n};\n\nconst ControlButtonLowerHandIcon = (): JSX.Element => {\n  return <HandRightOff20Regular />;\n};\n\n/**\n * The default set of icons that are available to use in the UI components.\n *\n * @remark Icons used only in the composites are available in {@link DEFAULT_COMPOSITE_ICONS}.\n *\n * @public\n */\nexport const DEFAULT_COMPONENT_ICONS = {\n  ChatMessageOptions: <MoreHorizontal18Regular />,\n  ControlButtonCameraOff: <VideoOff20Filled />,\n  ControlButtonCameraOn: <Video20Filled />,\n  ControlButtonEndCall: <CallEnd20Filled />,\n  ControlButtonMicOff: <MicOff20Filled />,\n  ControlButtonMicOn: <Mic20Filled />,\n  ControlButtonOptions: <Settings20Filled />,\n  ControlButtonParticipants: <People20Filled />,\n  ControlButtonParticipantsContextualMenuItem: <People20Regular />,\n  ControlButtonScreenShareStart: <ShareScreenStart20Filled />,\n  ControlButtonScreenShareStop: <ShareScreenStop20Filled />,\n  ControlButtonRaiseHand: <ControlButtonRaiseHandIcon />,\n  ControlButtonLowerHand: <ControlButtonLowerHandIcon />,\n  RaiseHandContextualMenuItem: <HandRight20Regular />,\n  LowerHandContextualMenuItem: <HandRightOff20Regular />,\n  ReactionButtonIcon: <Emoji20Regular />,\n  /* @conditional-compile-remove(attachment-upload) */\n  CancelAttachmentUpload: <Dismiss16Regular />,\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  DownloadAttachment: <ArrowDownload20Regular />,\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  OpenAttachment: <Open20Regular />,\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  AttachmentMoreMenu: <MoreHorizontal20Filled />,\n  /* @conditional-compile-remove(data-loss-prevention) */\n  DataLossPreventionProhibited: <DataLossPreventionProhibited16Regular />,\n  EditBoxCancel: <Dismiss20Regular />,\n  EditBoxSubmit: <Checkmark20Regular />,\n  ErrorBarCallCameraAccessDenied: <VideoProhibited16Filled />,\n  ErrorBarCallCameraAlreadyInUse: <VideoProhibited16Filled />,\n  ErrorBarCallLocalVideoFreeze: <WifiWarning16Filled />,\n  ErrorBarCallMacOsCameraAccessDenied: <VideoProhibited16Filled />,\n  ErrorBarCallMacOsMicrophoneAccessDenied: <MicProhibited16Filled />,\n  ErrorBarCallMicrophoneAccessDenied: <MicProhibited16Filled />,\n  ErrorBarCallMicrophoneMutedBySystem: <MicOff16Filled />,\n  ErrorBarCallMicrophoneUnmutedBySystem: <Mic16Filled />,\n  ErrorBarCallNetworkQualityLow: <WifiWarning16Filled />,\n  ErrorBarCallNoMicrophoneFound: <MicProhibited16Filled />,\n  ErrorBarCallNoSpeakerFound: <SpeakerMute16Filled />,\n  ErrorBarClear: <Dismiss16Regular />,\n  ErrorBarCallVideoRecoveredBySystem: <Video16Filled />,\n  ErrorBarCallVideoStoppedBySystem: <VideoProhibited16Filled />,\n  HorizontalGalleryLeftButton: <GalleryLeftButton />,\n  HorizontalGalleryRightButton: <GalleryRightButton />,\n  MessageDelivered: <CheckmarkCircle16Regular />,\n  MessageEdit: <Edit20Regular />,\n  MessageFailed: <ErrorCircle16Regular />,\n  MessageRemove: <Delete20Regular />,\n  MessageResend: <ArrowClockwise16Regular />,\n  MessageSeen: <Eye16Regular />,\n  MessageSending: <Circle16Regular />,\n  OptionsCamera: <Video20Regular />,\n  OptionsMic: <Mic20Regular />,\n  OptionsSpeaker: <Speaker220Regular />,\n  ParticipantItemMicOff: <MicOff16Regular />,\n  ParticipantItemOptions: <></>,\n  ParticipantItemOptionsHovered: <MoreHorizontal20Filled />,\n  ParticipantItemScreenShareStart: <ShareScreenStart20Filled />,\n  /* @conditional-compile-remove(spotlight) */\n  ParticipantItemSpotlighted: <VideoPersonStar20Filled />,\n  /* @conditional-compile-remove(PSTN-calls) */\n  HoldCallContextualMenuItem: <CallPause20Regular />,\n  /* @conditional-compile-remove(PSTN-calls) */\n  HoldCallButton: <CallPause20Filled />,\n  /* @conditional-compile-remove(PSTN-calls) */\n  ResumeCall: <Play20Regular />,\n  SendBoxSend: <Send20Regular />,\n  SendBoxSendHovered: <Send20Filled />,\n  VideoTileMicOff: <MicOff16Filled />,\n  DialpadBackspace: <Backspace20Regular />,\n  /* @conditional-compile-remove(call-readiness) */\n  SitePermissionsSparkle: <SitePermissionSparkle20Filled />,\n  /* @conditional-compile-remove(call-readiness) */\n  SitePermissionCamera: <SitePermissionCamera20Filled />,\n  /* @conditional-compile-remove(call-readiness) */\n  SitePermissionMic: <SitePermissionMic20Filled />,\n  /* @conditional-compile-remove(call-readiness) */\n  SitePermissionCameraDenied: <SitePermissionsCameraDenied20Filled />,\n  /* @conditional-compile-remove(call-readiness) */\n  SitePermissionMicDenied: <SitePermissionsMicDenied20Filled />,\n  /* @conditional-compile-remove(unsupported-browser) */\n  UnsupportedEnvironmentWarning: <UnsupportedEnvironmentWarning />,\n  /* @conditional-compile-remove(call-readiness) */\n  BrowserPermissionDeniedError: <BrowserPermissionDenied20Filled />,\n  VideoTilePinned: <Pin16Filled />,\n  VideoTileMoreOptions: <MoreHorizontal20Filled />,\n  VideoTileScaleFit: <ScaleFit20Regular />,\n  VideoTileScaleFill: <ScaleFill20Regular />,\n  PinParticipant: <Pin20Regular />,\n  UnpinParticipant: <PinOff20Regular />,\n  SplitButtonPrimaryActionCameraOn: <Video20Filled />,\n  SplitButtonPrimaryActionCameraOff: <VideoOff20Filled />,\n  SplitButtonPrimaryActionMicUnmuted: <Mic20Filled />,\n  SplitButtonPrimaryActionMicMuted: <MicOff20Filled />,\n  VerticalGalleryLeftButton: <GalleryLeftButton />,\n  VerticalGalleryRightButton: <GalleryRightButton />,\n  ControlButtonVideoEffectsOption: <VideoBackgroundEffect20Regular />,\n  ConfigurationScreenVideoEffectsButton: <VideoBackgroundEffect20Filled />,\n  CaptionsIcon: <ClosedCaption20Regular />,\n  CaptionsOffIcon: <ClosedCaptionOff20Regular />,\n  CaptionsSettingsIcon: <Settings20Regular />,\n  ChangeSpokenLanguageIcon: <PersonVoice20Regular />,\n  ChangeCaptionLanguageIcon: <Translate20Regular />,\n  ContextMenuCameraIcon: <Video20Regular />,\n  ContextMenuMicIcon: <Mic20Regular />,\n  ContextMenuSpeakerIcon: <Speaker220Regular />,\n  ContextMenuRemoveParticipant: <PersonDelete20Regular />,\n  /* @conditional-compile-remove(end-of-call-survey) */\n  SurveyStarIcon: <Star28Regular />,\n  /* @conditional-compile-remove(end-of-call-survey) */\n  SurveyStarIconFilled: <Star28Filled />,\n  /* @conditional-compile-remove(spotlight) */\n  StartSpotlightContextualMenuItem: <VideoPersonStar20Filled />,\n  /* @conditional-compile-remove(spotlight) */\n  StopSpotlightContextualMenuItem: <VideoPersonStarOff20Filled />,\n  /* @conditional-compile-remove(spotlight) */\n  VideoTileSpotlighted: <VideoPersonStar20Filled style={{ height: '16px', width: '16px' }} />,\n  /* @conditional-compile-remove(rich-text-editor) */\n  RichTextBoldButtonIcon: <TextBold20Regular />,\n  /* @conditional-compile-remove(rich-text-editor) */\n  RichTextItalicButtonIcon: <TextItalic20Regular />,\n  /* @conditional-compile-remove(rich-text-editor) */\n  RichTextUnderlineButtonIcon: <TextUnderlineCharacterU20Regular />,\n  /* @conditional-compile-remove(rich-text-editor) */\n  RichTextBulletListButtonIcon: <TextBulletList20Regular />,\n  /* @conditional-compile-remove(rich-text-editor) */\n  RichTextNumberListButtonIcon: <TextNumberListLtr20Regular />,\n  /* @conditional-compile-remove(rich-text-editor) */\n  RichTextIndentDecreaseButtonIcon: <TextIndentDecrease20Regular />,\n  /* @conditional-compile-remove(rich-text-editor) */\n  RichTextIndentIncreaseButtonIcon: <TextIndentIncrease20Regular />,\n  /* @conditional-compile-remove(rich-text-editor) */\n  RichTextDividerIcon: <DividerTall24Regular />,\n  /* @conditional-compile-remove(rich-text-editor) */\n  RichTextEditorButtonIcon: <TextEditStyle20Regular />,\n  /* @conditional-compile-remove(rich-text-editor) */\n  RichTextEditorButtonIconFilled: <TextEditStyle20Filled />,\n  /* @conditional-compile-remove(rich-text-editor) */\n  RichTextInsertTableRegularIcon: <Table20Regular />,\n  /* @conditional-compile-remove(rich-text-editor) */\n  RichTextInsertTableFilledIcon: <Table20Filled />,\n  /* @conditional-compile-remove(rich-text-editor) */\n  RichTextTableInsertMenuIcon: <TableAdd20Regular />,\n  /* @conditional-compile-remove(rich-text-editor) */\n  RichTextTableDeleteMenuIcon: <TableDismiss20Regular />\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/common/PeoplePaneContent.js

@@ -122,7 +122,8 @@ const createDefaultContextualMenuItems = (participant, strings, onRemoveParticip
                 }
             },
             iconProps: {
-                iconName: 'UserRemove'
+                iconName: 'ContextMenuRemoveParticipant',
+                styles: { root: { lineHeight: 0 } }
             },
             'data-ui-id': 'participant-list-remove-participant-button'
         });