@azure/communication-react 1.6.1-alpha-202306220014 → 1.6.1-alpha-202306240016

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.6.1-alpha-202306220014';
+module.exports = '1.6.1-alpha-202306240016';
 //# 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,0BAA0B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.6.1-alpha-202306220014';\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,0BAA0B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.6.1-alpha-202306240016';\n"]}

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

@@ -59,19 +59,7 @@ export const CameraButton = (props) => {
             }
         }
     }), [cameraOn, localVideoViewOptions, onToggleCamera, toggleAnnouncerString]);
-    const splitButtonMenuItems = [
-        {
-            key: 'cameraPrimaryAction',
-            text: props.checked ? strings.onSplitButtonPrimaryActionCamera : strings.offSplitButtonPrimaryActionCamera,
-            onClick: () => {
-                onToggleClick();
-            },
-            iconProps: {
-                iconName: props.checked ? 'SplitButtonPrimaryActionCameraOn' : 'SplitButtonPrimaryActionCameraOff',
-                styles: { root: { lineHeight: 0 } }
-            }
-        }
-    ];
+    const splitButtonMenuItems = [];
     /* @conditional-compile-remove(video-background-effects) */
     if (props.onShowVideoEffectsPicker) {
         splitButtonMenuItems.push({
@@ -86,6 +74,17 @@ export const CameraButton = (props) => {
             }
         });
     }
+    splitButtonMenuItems.push({
+        key: 'cameraPrimaryAction',
+        text: props.checked ? strings.onSplitButtonPrimaryActionCamera : strings.offSplitButtonPrimaryActionCamera,
+        onClick: () => {
+            onToggleClick();
+        },
+        iconProps: {
+            iconName: props.checked ? 'SplitButtonPrimaryActionCameraOn' : 'SplitButtonPrimaryActionCameraOff',
+            styles: { root: { lineHeight: 0 } }
+        }
+    });
     const splitButtonPrimaryAction = {
         key: 'primaryAction',
         title: 'toggle camera',

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

@@ -1 +1 @@
-{"version":3,"file":"CameraButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/CameraButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useCallback, useState, useMemo } from 'react';\nimport { useLocale } from '../localization';\nimport { VideoStreamOptions } from '../types';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\n\nimport {\n  ContextualMenuItemType,\n  IButtonProps,\n  IContextualMenuItem,\n  IContextualMenuItemStyles,\n  IContextualMenuStyles\n} from '@fluentui/react';\nimport { ControlBarButtonStyles } from './ControlBarButton';\nimport { OptionsDevice, generateDefaultDeviceMenuProps } from './DevicesButton';\nimport { Announcer } from './Announcer';\n\nconst defaultLocalVideoViewOptions = {\n  scalingMode: 'Crop',\n  isMirrored: true\n} as VideoStreamOptions;\n\n/**\n * Strings of CameraButton that can be overridden.\n *\n * @public\n */\nexport interface CameraButtonStrings {\n  /** Label when button is on. */\n  onLabel: string;\n  /** Label when button is off. */\n  offLabel: string;\n  /** Tooltip content when the button is disabled. */\n  tooltipDisabledContent?: string;\n  /** Tooltip content when the button is on. */\n  tooltipOnContent?: string;\n  /** Tooltip content when the button is off. */\n  tooltipOffContent?: string;\n  /** Tooltip content when the button is disabled due to video loading. */\n  tooltipVideoLoadingContent?: string;\n  /**\n   * Title of camera menu\n   */\n  cameraMenuTitle: string;\n  /**\n   * Tooltip of camera menu\n   */\n  cameraMenuTooltip: string;\n  /**\n   * description of camera button split button role\n   */\n  cameraButtonSplitRoleDescription?: string;\n  /**\n   * Camera split button aria label for when button is enabled.\n   */\n  onSplitButtonAriaLabel?: string;\n  /**\n   * Camera split button aria label for when button is disabled.\n   */\n  offSplitButtonAriaLabel?: string;\n  /**\n   * Camera action turned on string for announcer\n   */\n  cameraActionTurnedOnAnnouncement?: string;\n  /**\n   * Camera action turned off string for announcer\n   */\n  cameraActionTurnedOffAnnouncement?: string;\n  /**\n   * Primary action for when the camera is turned off\n   */\n  offSplitButtonPrimaryActionCamera?: string;\n  /**\n   * Primary action for when the camera is on\n   */\n  onSplitButtonPrimaryActionCamera?: string;\n  /**\n   * Title for primary action section of split button\n   */\n  cameraPrimaryActionSplitButtonTitle?: string;\n  /* @conditional-compile-remove(video-background-effects) */\n  /**\n   * Title for video effects menu item\n   */\n  videoEffectsMenuItemTitle?: string;\n}\n\n/**\n * Styles for {@link CameraButton}\n *\n * @public\n */\nexport interface CameraButtonStyles extends ControlBarButtonStyles {\n  /**\n   * Styles for the {@link CameraButton} menu.\n   */\n  menuStyles?: Partial<CameraButtonContextualMenuStyles>;\n}\n\n/**\n * Styles for the {@link CameraButton} menu.\n *\n * @public\n */\nexport interface CameraButtonContextualMenuStyles extends IContextualMenuStyles {\n  /**\n   * Styles for the items inside the {@link CameraButton} button menu.\n   */\n  menuItemStyles?: IContextualMenuItemStyles;\n}\n/**\n * Props for {@link CameraButton} component.\n *\n * @public\n */\nexport interface CameraButtonProps extends ControlBarButtonProps {\n  /**\n   * Utility property for using this component with `communication react eventHandlers`.\n   * Maps directly to the `onClick` property.\n   */\n  onToggleCamera?: (options?: VideoStreamOptions) => Promise<void>;\n\n  /**\n   * Options for rendering local video view.\n   */\n  localVideoViewOptions?: VideoStreamOptions;\n  /**\n   * Available cameras for selection\n   */\n  cameras?: OptionsDevice[];\n  /**\n   * Camera that is shown as currently selected\n   */\n  selectedCamera?: OptionsDevice;\n  /**\n   * Callback when a camera is selected\n   */\n  onSelectCamera?: (device: OptionsDevice) => Promise<void>;\n  /**\n   * Whether to use a {@link SplitButton} with a {@link IContextualMenu} for device selection.\n   *\n   * default: false\n   */\n  enableDeviceSelectionMenu?: boolean;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<CameraButtonStrings>;\n  /**\n   * Styles for {@link CameraButton} and the device selection flyout.\n   */\n  styles?: Partial<CameraButtonStyles>;\n  /* @conditional-compile-remove(video-background-effects) */\n  /**\n   * Callback when a effects is clicked\n   */\n  onShowVideoEffectsPicker?: (showVideoEffectsOptions: boolean) => void;\n}\n\n/**\n * A button to turn camera on / off.\n *\n * Can be used with {@link ControlBar}.\n *\n * @public\n */\nexport const CameraButton = (props: CameraButtonProps): JSX.Element => {\n  const { localVideoViewOptions, onToggleCamera } = props;\n  const [waitForCamera, setWaitForCamera] = useState(false);\n  const localeStrings = useLocale().strings.cameraButton;\n  const strings = { ...localeStrings, ...props.strings };\n  const [announcerString, setAnnouncerString] = useState<string | undefined>(undefined);\n\n  const disabled = props.disabled || waitForCamera;\n\n  const onRenderCameraOnIcon = (): JSX.Element => (\n    <_HighContrastAwareIcon disabled={disabled} iconName=\"ControlButtonCameraOn\" />\n  );\n  const onRenderCameraOffIcon = (): JSX.Element => (\n    <_HighContrastAwareIcon disabled={disabled} iconName=\"ControlButtonCameraOff\" />\n  );\n  if (waitForCamera && strings.tooltipVideoLoadingContent) {\n    strings.tooltipDisabledContent = strings.tooltipVideoLoadingContent;\n  }\n\n  const cameraOn = props.checked;\n  const splitButtonAriaString = cameraOn ? strings.onSplitButtonAriaLabel : strings.offSplitButtonAriaLabel;\n\n  const toggleAnnouncerString = useCallback(\n    (isCameraOn: boolean) => {\n      setAnnouncerString(\n        !isCameraOn ? strings.cameraActionTurnedOffAnnouncement : strings.cameraActionTurnedOnAnnouncement\n      );\n    },\n    [strings.cameraActionTurnedOffAnnouncement, strings.cameraActionTurnedOnAnnouncement]\n  );\n\n  const onToggleClick = useCallback(async () => {\n    // Throttle click on camera, need to await onToggleCamera then allow another click\n    if (onToggleCamera) {\n      setWaitForCamera(true);\n      try {\n        await onToggleCamera(localVideoViewOptions ?? defaultLocalVideoViewOptions);\n        // allows for the setting of narrator strings triggering the announcer when camera is turned on or off.\n        toggleAnnouncerString(!cameraOn);\n      } finally {\n        setWaitForCamera(false);\n      }\n    }\n  }, [cameraOn, localVideoViewOptions, onToggleCamera, toggleAnnouncerString]);\n\n  const splitButtonMenuItems: IContextualMenuItem[] = [\n    {\n      key: 'cameraPrimaryAction',\n      text: props.checked ? strings.onSplitButtonPrimaryActionCamera : strings.offSplitButtonPrimaryActionCamera,\n      onClick: () => {\n        onToggleClick();\n      },\n      iconProps: {\n        iconName: props.checked ? 'SplitButtonPrimaryActionCameraOn' : 'SplitButtonPrimaryActionCameraOff',\n        styles: { root: { lineHeight: 0 } }\n      }\n    }\n  ];\n  /* @conditional-compile-remove(video-background-effects) */\n  if (props.onShowVideoEffectsPicker) {\n    splitButtonMenuItems.push({\n      key: 'effects',\n      'data-ui-id': 'camera-split-button-video-effects',\n      text: strings.videoEffectsMenuItemTitle,\n      iconProps: { iconName: 'ControlButtonVideoEffectsOption', styles: { root: { lineHeight: 0 } } },\n      onClick: () => {\n        if (props.onShowVideoEffectsPicker) {\n          props.onShowVideoEffectsPicker(true);\n        }\n      }\n    });\n  }\n\n  const splitButtonPrimaryAction: IContextualMenuItem = {\n    key: 'primaryAction',\n    title: 'toggle camera',\n    itemType: ContextualMenuItemType.Section,\n    sectionProps: {\n      topDivider: true,\n      items: splitButtonMenuItems\n    }\n  };\n\n  const splitButtonMenuProps: IButtonProps = useMemo(\n    () => ({\n      ...props.splitButtonMenuProps,\n      className: 'camera-split-button'\n    }),\n    [props.splitButtonMenuProps]\n  );\n\n  return (\n    <>\n      <Announcer announcementString={announcerString} ariaLive={'polite'} />\n      <ControlBarButton\n        {...props}\n        disabled={disabled}\n        onClick={onToggleCamera ? onToggleClick : props.onClick}\n        onRenderOnIcon={props.onRenderOnIcon ?? onRenderCameraOnIcon}\n        onRenderOffIcon={props.onRenderOffIcon ?? onRenderCameraOffIcon}\n        strings={strings}\n        labelKey={props.labelKey ?? 'cameraButtonLabel'}\n        menuProps={\n          props.menuProps ??\n          (props.enableDeviceSelectionMenu\n            ? generateDefaultDeviceMenuProps(\n                { ...props, styles: props.styles?.menuStyles },\n                strings,\n                splitButtonPrimaryAction\n              )\n            : undefined)\n        }\n        menuIconProps={props.menuIconProps ?? !props.enableDeviceSelectionMenu ? { hidden: true } : undefined}\n        split={props.split ?? props.enableDeviceSelectionMenu}\n        aria-roledescription={props.enableDeviceSelectionMenu ? strings.cameraButtonSplitRoleDescription : undefined}\n        splitButtonAriaLabel={props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined}\n        splitButtonMenuProps={splitButtonMenuProps}\n      />\n    </>\n  );\n};\n"]}
+{"version":3,"file":"CameraButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/CameraButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useCallback, useState, useMemo } from 'react';\nimport { useLocale } from '../localization';\nimport { VideoStreamOptions } from '../types';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\n\nimport {\n  ContextualMenuItemType,\n  IButtonProps,\n  IContextualMenuItem,\n  IContextualMenuItemStyles,\n  IContextualMenuStyles\n} from '@fluentui/react';\nimport { ControlBarButtonStyles } from './ControlBarButton';\nimport { OptionsDevice, generateDefaultDeviceMenuProps } from './DevicesButton';\nimport { Announcer } from './Announcer';\n\nconst defaultLocalVideoViewOptions = {\n  scalingMode: 'Crop',\n  isMirrored: true\n} as VideoStreamOptions;\n\n/**\n * Strings of CameraButton that can be overridden.\n *\n * @public\n */\nexport interface CameraButtonStrings {\n  /** Label when button is on. */\n  onLabel: string;\n  /** Label when button is off. */\n  offLabel: string;\n  /** Tooltip content when the button is disabled. */\n  tooltipDisabledContent?: string;\n  /** Tooltip content when the button is on. */\n  tooltipOnContent?: string;\n  /** Tooltip content when the button is off. */\n  tooltipOffContent?: string;\n  /** Tooltip content when the button is disabled due to video loading. */\n  tooltipVideoLoadingContent?: string;\n  /**\n   * Title of camera menu\n   */\n  cameraMenuTitle: string;\n  /**\n   * Tooltip of camera menu\n   */\n  cameraMenuTooltip: string;\n  /**\n   * description of camera button split button role\n   */\n  cameraButtonSplitRoleDescription?: string;\n  /**\n   * Camera split button aria label for when button is enabled.\n   */\n  onSplitButtonAriaLabel?: string;\n  /**\n   * Camera split button aria label for when button is disabled.\n   */\n  offSplitButtonAriaLabel?: string;\n  /**\n   * Camera action turned on string for announcer\n   */\n  cameraActionTurnedOnAnnouncement?: string;\n  /**\n   * Camera action turned off string for announcer\n   */\n  cameraActionTurnedOffAnnouncement?: string;\n  /**\n   * Primary action for when the camera is turned off\n   */\n  offSplitButtonPrimaryActionCamera?: string;\n  /**\n   * Primary action for when the camera is on\n   */\n  onSplitButtonPrimaryActionCamera?: string;\n  /**\n   * Title for primary action section of split button\n   */\n  cameraPrimaryActionSplitButtonTitle?: string;\n  /* @conditional-compile-remove(video-background-effects) */\n  /**\n   * Title for video effects menu item\n   */\n  videoEffectsMenuItemTitle?: string;\n}\n\n/**\n * Styles for {@link CameraButton}\n *\n * @public\n */\nexport interface CameraButtonStyles extends ControlBarButtonStyles {\n  /**\n   * Styles for the {@link CameraButton} menu.\n   */\n  menuStyles?: Partial<CameraButtonContextualMenuStyles>;\n}\n\n/**\n * Styles for the {@link CameraButton} menu.\n *\n * @public\n */\nexport interface CameraButtonContextualMenuStyles extends IContextualMenuStyles {\n  /**\n   * Styles for the items inside the {@link CameraButton} button menu.\n   */\n  menuItemStyles?: IContextualMenuItemStyles;\n}\n/**\n * Props for {@link CameraButton} component.\n *\n * @public\n */\nexport interface CameraButtonProps extends ControlBarButtonProps {\n  /**\n   * Utility property for using this component with `communication react eventHandlers`.\n   * Maps directly to the `onClick` property.\n   */\n  onToggleCamera?: (options?: VideoStreamOptions) => Promise<void>;\n\n  /**\n   * Options for rendering local video view.\n   */\n  localVideoViewOptions?: VideoStreamOptions;\n  /**\n   * Available cameras for selection\n   */\n  cameras?: OptionsDevice[];\n  /**\n   * Camera that is shown as currently selected\n   */\n  selectedCamera?: OptionsDevice;\n  /**\n   * Callback when a camera is selected\n   */\n  onSelectCamera?: (device: OptionsDevice) => Promise<void>;\n  /**\n   * Whether to use a {@link SplitButton} with a {@link IContextualMenu} for device selection.\n   *\n   * default: false\n   */\n  enableDeviceSelectionMenu?: boolean;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<CameraButtonStrings>;\n  /**\n   * Styles for {@link CameraButton} and the device selection flyout.\n   */\n  styles?: Partial<CameraButtonStyles>;\n  /* @conditional-compile-remove(video-background-effects) */\n  /**\n   * Callback when a effects is clicked\n   */\n  onShowVideoEffectsPicker?: (showVideoEffectsOptions: boolean) => void;\n}\n\n/**\n * A button to turn camera on / off.\n *\n * Can be used with {@link ControlBar}.\n *\n * @public\n */\nexport const CameraButton = (props: CameraButtonProps): JSX.Element => {\n  const { localVideoViewOptions, onToggleCamera } = props;\n  const [waitForCamera, setWaitForCamera] = useState(false);\n  const localeStrings = useLocale().strings.cameraButton;\n  const strings = { ...localeStrings, ...props.strings };\n  const [announcerString, setAnnouncerString] = useState<string | undefined>(undefined);\n\n  const disabled = props.disabled || waitForCamera;\n\n  const onRenderCameraOnIcon = (): JSX.Element => (\n    <_HighContrastAwareIcon disabled={disabled} iconName=\"ControlButtonCameraOn\" />\n  );\n  const onRenderCameraOffIcon = (): JSX.Element => (\n    <_HighContrastAwareIcon disabled={disabled} iconName=\"ControlButtonCameraOff\" />\n  );\n  if (waitForCamera && strings.tooltipVideoLoadingContent) {\n    strings.tooltipDisabledContent = strings.tooltipVideoLoadingContent;\n  }\n\n  const cameraOn = props.checked;\n  const splitButtonAriaString = cameraOn ? strings.onSplitButtonAriaLabel : strings.offSplitButtonAriaLabel;\n\n  const toggleAnnouncerString = useCallback(\n    (isCameraOn: boolean) => {\n      setAnnouncerString(\n        !isCameraOn ? strings.cameraActionTurnedOffAnnouncement : strings.cameraActionTurnedOnAnnouncement\n      );\n    },\n    [strings.cameraActionTurnedOffAnnouncement, strings.cameraActionTurnedOnAnnouncement]\n  );\n\n  const onToggleClick = useCallback(async () => {\n    // Throttle click on camera, need to await onToggleCamera then allow another click\n    if (onToggleCamera) {\n      setWaitForCamera(true);\n      try {\n        await onToggleCamera(localVideoViewOptions ?? defaultLocalVideoViewOptions);\n        // allows for the setting of narrator strings triggering the announcer when camera is turned on or off.\n        toggleAnnouncerString(!cameraOn);\n      } finally {\n        setWaitForCamera(false);\n      }\n    }\n  }, [cameraOn, localVideoViewOptions, onToggleCamera, toggleAnnouncerString]);\n\n  const splitButtonMenuItems: IContextualMenuItem[] = [];\n  /* @conditional-compile-remove(video-background-effects) */\n  if (props.onShowVideoEffectsPicker) {\n    splitButtonMenuItems.push({\n      key: 'effects',\n      'data-ui-id': 'camera-split-button-video-effects',\n      text: strings.videoEffectsMenuItemTitle,\n      iconProps: { iconName: 'ControlButtonVideoEffectsOption', styles: { root: { lineHeight: 0 } } },\n      onClick: () => {\n        if (props.onShowVideoEffectsPicker) {\n          props.onShowVideoEffectsPicker(true);\n        }\n      }\n    });\n  }\n\n  splitButtonMenuItems.push({\n    key: 'cameraPrimaryAction',\n    text: props.checked ? strings.onSplitButtonPrimaryActionCamera : strings.offSplitButtonPrimaryActionCamera,\n    onClick: () => {\n      onToggleClick();\n    },\n    iconProps: {\n      iconName: props.checked ? 'SplitButtonPrimaryActionCameraOn' : 'SplitButtonPrimaryActionCameraOff',\n      styles: { root: { lineHeight: 0 } }\n    }\n  });\n\n  const splitButtonPrimaryAction: IContextualMenuItem = {\n    key: 'primaryAction',\n    title: 'toggle camera',\n    itemType: ContextualMenuItemType.Section,\n    sectionProps: {\n      topDivider: true,\n      items: splitButtonMenuItems\n    }\n  };\n\n  const splitButtonMenuProps: IButtonProps = useMemo(\n    () => ({\n      ...props.splitButtonMenuProps,\n      className: 'camera-split-button'\n    }),\n    [props.splitButtonMenuProps]\n  );\n\n  return (\n    <>\n      <Announcer announcementString={announcerString} ariaLive={'polite'} />\n      <ControlBarButton\n        {...props}\n        disabled={disabled}\n        onClick={onToggleCamera ? onToggleClick : props.onClick}\n        onRenderOnIcon={props.onRenderOnIcon ?? onRenderCameraOnIcon}\n        onRenderOffIcon={props.onRenderOffIcon ?? onRenderCameraOffIcon}\n        strings={strings}\n        labelKey={props.labelKey ?? 'cameraButtonLabel'}\n        menuProps={\n          props.menuProps ??\n          (props.enableDeviceSelectionMenu\n            ? generateDefaultDeviceMenuProps(\n                { ...props, styles: props.styles?.menuStyles },\n                strings,\n                splitButtonPrimaryAction\n              )\n            : undefined)\n        }\n        menuIconProps={props.menuIconProps ?? !props.enableDeviceSelectionMenu ? { hidden: true } : undefined}\n        split={props.split ?? props.enableDeviceSelectionMenu}\n        aria-roledescription={props.enableDeviceSelectionMenu ? strings.cameraButtonSplitRoleDescription : undefined}\n        splitButtonAriaLabel={props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined}\n        splitButtonMenuProps={splitButtonMenuProps}\n      />\n    </>\n  );\n};\n"]}

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

@@ -50,6 +50,10 @@ export const generateDefaultDeviceMenuProps = (props, strings, primaryActionItem
                                 key: camera.id,
                                 text: camera.name,
                                 title: camera.name,
+                                iconProps: {
+                                    iconName: 'ContextMenuCameraIcon',
+                                    styles: { root: { lineHeight: 0 } }
+                                },
                                 itemProps: {
                                     styles: menuItemStyles
                                 },
@@ -96,6 +100,10 @@ export const generateDefaultDeviceMenuProps = (props, strings, primaryActionItem
                                 itemProps: {
                                     styles: menuItemStyles
                                 },
+                                iconProps: {
+                                    iconName: 'ContextMenuMicIcon',
+                                    styles: { root: { lineHeight: 0 } }
+                                },
                                 canCheck: true,
                                 isChecked: microphone.id === (selectedMicrophone === null || selectedMicrophone === void 0 ? void 0 : selectedMicrophone.id),
                                 onClick: () => {
@@ -131,6 +139,10 @@ export const generateDefaultDeviceMenuProps = (props, strings, primaryActionItem
                                 itemProps: {
                                     styles: menuItemStyles
                                 },
+                                iconProps: {
+                                    iconName: 'ContextMenuMicIcon',
+                                    styles: { root: { lineHeight: 0 } }
+                                },
                                 canCheck: true,
                                 isChecked: speaker.id === (selectedSpeaker === null || selectedSpeaker === void 0 ? void 0 : selectedSpeaker.id),
                                 onClick: () => {

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

@@ -1 +1 @@
-{"version":3,"file":"DevicesButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/DevicesButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n  ContextualMenuItemType,\n  IContextualMenuItem,\n  IContextualMenuItemStyles,\n  IContextualMenuProps,\n  IContextualMenuStyles,\n  merge\n} from '@fluentui/react';\nimport React from 'react';\nimport { useLocale } from '../localization';\nimport { ControlBarButton, ControlBarButtonProps, ControlBarButtonStyles } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { buttonFlyoutItemStyles } from './styles/ControlBar.styles';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/**\n * Styles for the {@link DevicesButton} menu.\n *\n * @public\n */\nexport interface DevicesButtonContextualMenuStyles extends IContextualMenuStyles {\n  /**\n   * Styles for the items inside the {@link DevicesButton} button menu.\n   */\n  menuItemStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Styles for the Devices button menu items.\n *\n * @public\n */\nexport interface DevicesButtonStyles extends ControlBarButtonStyles {\n  /**\n   * Styles for the {@link DevicesButton} menu.\n   */\n  menuStyles?: Partial<DevicesButtonContextualMenuStyles>;\n}\n\n/**\n * A device, e.g. camera, microphone, or speaker, in the {@link DevicesButton} flyout.\n *\n * @public\n */\nexport interface OptionsDevice {\n  /**\n   * Device unique identifier\n   */\n  id: string;\n  /**\n   * Device name\n   */\n  name: string;\n}\n\n/**\n * Strings of {@link DevicesButton} that can be overridden.\n *\n * @public\n */\nexport interface DevicesButtonStrings {\n  /**\n   * Label of button\n   */\n  label: string;\n  /**\n   * Button tooltip content.\n   */\n  tooltipContent?: string;\n  /**\n   * Title of camera menu\n   */\n  cameraMenuTitle: string;\n  /**\n   * Title of microphone menu\n   */\n  microphoneMenuTitle: string;\n  /**\n   * Title of speaker menu\n   */\n  speakerMenuTitle: string;\n  /**\n   * Tooltip of camera menu\n   */\n  cameraMenuTooltip: string;\n  /**\n   * Tooltip of microphone menu\n   */\n  microphoneMenuTooltip: string;\n  /**\n   * Tooltip of speaker menu\n   */\n  speakerMenuTooltip: string;\n}\n\n/**\n * Props for {@link DevicesButton}.\n *\n * @public\n */\nexport interface DevicesButtonProps extends ControlBarButtonProps {\n  /**\n   * Available microphones for selection\n   */\n  microphones?: OptionsDevice[];\n  /**\n   * Available speakers for selection\n   */\n  speakers?: OptionsDevice[];\n  /**\n   * Available cameras for selection\n   */\n  cameras?: OptionsDevice[];\n  /**\n   * Microphone that is shown as currently selected\n   */\n  selectedMicrophone?: OptionsDevice;\n  /**\n   * Speaker that is shown as currently selected\n   */\n  selectedSpeaker?: OptionsDevice;\n  /**\n   * Camera that is shown as currently selected\n   */\n  selectedCamera?: OptionsDevice;\n  /**\n   * Callback when a camera is selected\n   */\n  onSelectCamera?: (device: OptionsDevice) => Promise<void>;\n  /**\n   * Callback when a microphone is selected\n   */\n  onSelectMicrophone?: (device: OptionsDevice) => Promise<void>;\n  /**\n   * Speaker when a speaker is selected\n   */\n  onSelectSpeaker?: (device: OptionsDevice) => Promise<void>;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<DevicesButtonStrings>;\n  /**\n   * Option to increase the touch targets of the button flyout menu items from 36px to 48px.\n   * Recommended for mobile devices.\n   */\n  styles?: DevicesButtonStyles;\n}\n\n/**\n * Subset props for various buttons that show device selection menus.\n *\n * @private\n */\nexport interface DeviceMenuProps {\n  microphones?: OptionsDevice[];\n  speakers?: OptionsDevice[];\n  cameras?: OptionsDevice[];\n  selectedMicrophone?: OptionsDevice;\n  selectedSpeaker?: OptionsDevice;\n  selectedCamera?: OptionsDevice;\n  onSelectCamera?: (device: OptionsDevice) => Promise<void>;\n  onSelectMicrophone?: (device: OptionsDevice) => Promise<void>;\n  onSelectSpeaker?: (device: OptionsDevice) => Promise<void>;\n  styles?: Partial<DeviceMenuStyles>;\n}\n\n/**\n * Subset of strings for various buttons that show device selection menus.\n *\n * @private\n */\nexport interface DeviceMenuStrings {\n  /**\n   * Title for Camera section in the contextual menu\n   */\n  cameraMenuTitle?: string;\n  /**\n   * Title for Audio Device section in the contextual menu\n   *\n   * @remark Used in place of microphoneMenuTitle when speakers can be enumerated\n   */\n  audioDeviceMenuTitle?: string;\n  /**\n   * Title for Microphone section in the contextual menu\n   *\n   * @remark Used when speakers can be enumerated\n   */\n  microphoneMenuTitle?: string;\n  /**\n   * Title for Speaker section in the contextual menu\n   */\n  speakerMenuTitle?: string;\n  /**\n   * Tooltip label for Camera section in the contextual menu\n   */\n  cameraMenuTooltip?: string;\n  /**\n   * Tooltip label for Audio Device section in the contextual menu\n   *\n   * @remark Used in place of microphoneMenuTooltip when speakers can be enumerated\n   */\n  audioDeviceMenuTooltip?: string;\n  /**\n   * Tooltip label for Microphone section in the contextual menu\n   *\n   * @remark Used when speakers can be enumerated\n   */\n  microphoneMenuTooltip?: string;\n  /**\n   * Tooltip label for Speaker section in the contextual menu\n   */\n  speakerMenuTooltip?: string;\n}\n\n/**\n * Styles for flyouts used by various buttons for device selection flyouts.\n *\n * @private\n */\nexport interface DeviceMenuStyles extends IContextualMenuStyles {\n  menuItemStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Generates default {@link IContextualMenuProps} for buttons that\n * show a drop-down to select devices to use.\n *\n * @private\n */\nexport const generateDefaultDeviceMenuProps = (\n  props: DeviceMenuProps,\n  strings: DeviceMenuStrings,\n  primaryActionItem?: IContextualMenuItem,\n  isSelectCamAllowed = true,\n  isSelectMicAllowed = true\n): { items: IContextualMenuItem[] } | undefined => {\n  const {\n    microphones,\n    speakers,\n    cameras,\n    selectedMicrophone,\n    selectedSpeaker,\n    selectedCamera,\n    onSelectCamera,\n    onSelectMicrophone,\n    onSelectSpeaker\n  } = props;\n\n  const defaultMenuProps: IContextualMenuProps = {\n    items: [],\n    styles: props.styles,\n    calloutProps: {\n      styles: {\n        root: {\n          // Confine the menu to the parents bounds.\n          // More info: https://github.com/microsoft/fluentui/issues/18835\n          // NB: 95% to keep some space for margin, drop shadow etc around the Callout.\n          maxWidth: '95%'\n        }\n      },\n      preventDismissOnEvent\n    }\n  };\n\n  const menuItemStyles = merge(buttonFlyoutItemStyles, props.styles?.menuItemStyles ?? {});\n\n  if (cameras && selectedCamera && onSelectCamera && isSelectCamAllowed) {\n    defaultMenuProps.items.push({\n      key: 'cameras',\n      itemType: ContextualMenuItemType.Section,\n      sectionProps: {\n        title: strings.cameraMenuTitle,\n        items: [\n          {\n            key: 'sectionCamera',\n            title: strings.cameraMenuTooltip,\n            subMenuProps: {\n              calloutProps: {\n                preventDismissOnEvent\n              },\n              items: cameras.map((camera) => ({\n                key: camera.id,\n                text: camera.name,\n                title: camera.name,\n                itemProps: {\n                  styles: menuItemStyles\n                },\n                canCheck: true,\n                isChecked: camera.id === selectedCamera?.id,\n                onClick: () => {\n                  if (camera.id !== selectedCamera?.id) {\n                    onSelectCamera(camera);\n                  }\n                }\n              }))\n            },\n            text: selectedCamera.name\n          }\n        ]\n      }\n    });\n    if (primaryActionItem) {\n      defaultMenuProps.items.push(primaryActionItem);\n    }\n  }\n\n  if (microphones && selectedMicrophone && onSelectMicrophone && isSelectMicAllowed) {\n    // Set props as Microphone if speakers can be enumerated else set as Audio Device\n    const speakersAvailable = speakers && speakers.length > 0;\n    const key = speakersAvailable ? 'sectionMicrophone' : 'sectionAudioDevice';\n    const title = speakersAvailable ? strings.microphoneMenuTooltip : strings.audioDeviceMenuTooltip;\n\n    defaultMenuProps.items.push({\n      key: 'microphones',\n      itemType: ContextualMenuItemType.Section,\n      sectionProps: {\n        title: strings.microphoneMenuTitle,\n        items: [\n          {\n            key: key,\n            title: title,\n            subMenuProps: {\n              calloutProps: {\n                preventDismissOnEvent\n              },\n              items: microphones.map((microphone) => ({\n                key: microphone.id,\n                text: microphone.name,\n                title: microphone.name,\n                itemProps: {\n                  styles: menuItemStyles\n                },\n                canCheck: true,\n                isChecked: microphone.id === selectedMicrophone?.id,\n                onClick: () => {\n                  if (microphone.id !== selectedMicrophone?.id) {\n                    onSelectMicrophone(microphone);\n                  }\n                }\n              }))\n            },\n            text: selectedMicrophone.name\n          }\n        ]\n      }\n    });\n  }\n\n  if (speakers && selectedSpeaker && onSelectSpeaker) {\n    defaultMenuProps.items.push({\n      key: 'speakers',\n      itemType: ContextualMenuItemType.Section,\n      sectionProps: {\n        title: strings.speakerMenuTitle,\n        items: [\n          {\n            key: 'sectionSpeaker',\n            subMenuProps: {\n              calloutProps: {\n                preventDismissOnEvent\n              },\n              items: speakers.map((speaker) => ({\n                key: speaker.id,\n                text: speaker.name,\n                title: speaker.name,\n                itemProps: {\n                  styles: menuItemStyles\n                },\n                canCheck: true,\n                isChecked: speaker.id === selectedSpeaker?.id,\n                onClick: () => {\n                  if (speaker.id !== selectedSpeaker?.id) {\n                    onSelectSpeaker(speaker);\n                  }\n                }\n              }))\n            },\n            text: selectedSpeaker.name\n          }\n        ]\n      }\n    });\n  }\n  if (microphones && selectedMicrophone && onSelectMicrophone && isSelectMicAllowed && primaryActionItem) {\n    defaultMenuProps.items.push(primaryActionItem);\n  }\n\n  if (defaultMenuProps.items.length === 0) {\n    // Avoids creating an empty context menu.\n    return undefined;\n  }\n  return defaultMenuProps;\n};\n\n/**\n * A button to open a menu that controls device options.\n *\n * Can be used with {@link ControlBar}.\n *\n * @public\n */\nexport const DevicesButton = (props: DevicesButtonProps): JSX.Element => {\n  const { onRenderIcon } = props;\n\n  const localeStrings = useLocale().strings.devicesButton;\n  const strings = { ...localeStrings, ...props.strings };\n\n  const devicesButtonMenu =\n    props.menuProps ?? generateDefaultDeviceMenuProps({ ...props, styles: props.styles?.menuStyles }, strings);\n\n  const onRenderOptionsIcon = (): JSX.Element => {\n    return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ControlButtonOptions\" />;\n  };\n\n  return (\n    <ControlBarButton\n      {...props}\n      menuProps={devicesButtonMenu}\n      menuIconProps={{ hidden: true }}\n      onRenderIcon={onRenderIcon ?? onRenderOptionsIcon}\n      strings={strings}\n      labelKey={props.labelKey ?? 'devicesButtonLabel'}\n    />\n  );\n};\n\"../../../acs-ui-common/src\""]}
+{"version":3,"file":"DevicesButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/DevicesButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n  ContextualMenuItemType,\n  IContextualMenuItem,\n  IContextualMenuItemStyles,\n  IContextualMenuProps,\n  IContextualMenuStyles,\n  merge\n} from '@fluentui/react';\nimport React from 'react';\nimport { useLocale } from '../localization';\nimport { ControlBarButton, ControlBarButtonProps, ControlBarButtonStyles } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { buttonFlyoutItemStyles } from './styles/ControlBar.styles';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/**\n * Styles for the {@link DevicesButton} menu.\n *\n * @public\n */\nexport interface DevicesButtonContextualMenuStyles extends IContextualMenuStyles {\n  /**\n   * Styles for the items inside the {@link DevicesButton} button menu.\n   */\n  menuItemStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Styles for the Devices button menu items.\n *\n * @public\n */\nexport interface DevicesButtonStyles extends ControlBarButtonStyles {\n  /**\n   * Styles for the {@link DevicesButton} menu.\n   */\n  menuStyles?: Partial<DevicesButtonContextualMenuStyles>;\n}\n\n/**\n * A device, e.g. camera, microphone, or speaker, in the {@link DevicesButton} flyout.\n *\n * @public\n */\nexport interface OptionsDevice {\n  /**\n   * Device unique identifier\n   */\n  id: string;\n  /**\n   * Device name\n   */\n  name: string;\n}\n\n/**\n * Strings of {@link DevicesButton} that can be overridden.\n *\n * @public\n */\nexport interface DevicesButtonStrings {\n  /**\n   * Label of button\n   */\n  label: string;\n  /**\n   * Button tooltip content.\n   */\n  tooltipContent?: string;\n  /**\n   * Title of camera menu\n   */\n  cameraMenuTitle: string;\n  /**\n   * Title of microphone menu\n   */\n  microphoneMenuTitle: string;\n  /**\n   * Title of speaker menu\n   */\n  speakerMenuTitle: string;\n  /**\n   * Tooltip of camera menu\n   */\n  cameraMenuTooltip: string;\n  /**\n   * Tooltip of microphone menu\n   */\n  microphoneMenuTooltip: string;\n  /**\n   * Tooltip of speaker menu\n   */\n  speakerMenuTooltip: string;\n}\n\n/**\n * Props for {@link DevicesButton}.\n *\n * @public\n */\nexport interface DevicesButtonProps extends ControlBarButtonProps {\n  /**\n   * Available microphones for selection\n   */\n  microphones?: OptionsDevice[];\n  /**\n   * Available speakers for selection\n   */\n  speakers?: OptionsDevice[];\n  /**\n   * Available cameras for selection\n   */\n  cameras?: OptionsDevice[];\n  /**\n   * Microphone that is shown as currently selected\n   */\n  selectedMicrophone?: OptionsDevice;\n  /**\n   * Speaker that is shown as currently selected\n   */\n  selectedSpeaker?: OptionsDevice;\n  /**\n   * Camera that is shown as currently selected\n   */\n  selectedCamera?: OptionsDevice;\n  /**\n   * Callback when a camera is selected\n   */\n  onSelectCamera?: (device: OptionsDevice) => Promise<void>;\n  /**\n   * Callback when a microphone is selected\n   */\n  onSelectMicrophone?: (device: OptionsDevice) => Promise<void>;\n  /**\n   * Speaker when a speaker is selected\n   */\n  onSelectSpeaker?: (device: OptionsDevice) => Promise<void>;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<DevicesButtonStrings>;\n  /**\n   * Option to increase the touch targets of the button flyout menu items from 36px to 48px.\n   * Recommended for mobile devices.\n   */\n  styles?: DevicesButtonStyles;\n}\n\n/**\n * Subset props for various buttons that show device selection menus.\n *\n * @private\n */\nexport interface DeviceMenuProps {\n  microphones?: OptionsDevice[];\n  speakers?: OptionsDevice[];\n  cameras?: OptionsDevice[];\n  selectedMicrophone?: OptionsDevice;\n  selectedSpeaker?: OptionsDevice;\n  selectedCamera?: OptionsDevice;\n  onSelectCamera?: (device: OptionsDevice) => Promise<void>;\n  onSelectMicrophone?: (device: OptionsDevice) => Promise<void>;\n  onSelectSpeaker?: (device: OptionsDevice) => Promise<void>;\n  styles?: Partial<DeviceMenuStyles>;\n}\n\n/**\n * Subset of strings for various buttons that show device selection menus.\n *\n * @private\n */\nexport interface DeviceMenuStrings {\n  /**\n   * Title for Camera section in the contextual menu\n   */\n  cameraMenuTitle?: string;\n  /**\n   * Title for Audio Device section in the contextual menu\n   *\n   * @remark Used in place of microphoneMenuTitle when speakers can be enumerated\n   */\n  audioDeviceMenuTitle?: string;\n  /**\n   * Title for Microphone section in the contextual menu\n   *\n   * @remark Used when speakers can be enumerated\n   */\n  microphoneMenuTitle?: string;\n  /**\n   * Title for Speaker section in the contextual menu\n   */\n  speakerMenuTitle?: string;\n  /**\n   * Tooltip label for Camera section in the contextual menu\n   */\n  cameraMenuTooltip?: string;\n  /**\n   * Tooltip label for Audio Device section in the contextual menu\n   *\n   * @remark Used in place of microphoneMenuTooltip when speakers can be enumerated\n   */\n  audioDeviceMenuTooltip?: string;\n  /**\n   * Tooltip label for Microphone section in the contextual menu\n   *\n   * @remark Used when speakers can be enumerated\n   */\n  microphoneMenuTooltip?: string;\n  /**\n   * Tooltip label for Speaker section in the contextual menu\n   */\n  speakerMenuTooltip?: string;\n}\n\n/**\n * Styles for flyouts used by various buttons for device selection flyouts.\n *\n * @private\n */\nexport interface DeviceMenuStyles extends IContextualMenuStyles {\n  menuItemStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Generates default {@link IContextualMenuProps} for buttons that\n * show a drop-down to select devices to use.\n *\n * @private\n */\nexport const generateDefaultDeviceMenuProps = (\n  props: DeviceMenuProps,\n  strings: DeviceMenuStrings,\n  primaryActionItem?: IContextualMenuItem,\n  isSelectCamAllowed = true,\n  isSelectMicAllowed = true\n): { items: IContextualMenuItem[] } | undefined => {\n  const {\n    microphones,\n    speakers,\n    cameras,\n    selectedMicrophone,\n    selectedSpeaker,\n    selectedCamera,\n    onSelectCamera,\n    onSelectMicrophone,\n    onSelectSpeaker\n  } = props;\n\n  const defaultMenuProps: IContextualMenuProps = {\n    items: [],\n    styles: props.styles,\n    calloutProps: {\n      styles: {\n        root: {\n          // Confine the menu to the parents bounds.\n          // More info: https://github.com/microsoft/fluentui/issues/18835\n          // NB: 95% to keep some space for margin, drop shadow etc around the Callout.\n          maxWidth: '95%'\n        }\n      },\n      preventDismissOnEvent\n    }\n  };\n\n  const menuItemStyles = merge(buttonFlyoutItemStyles, props.styles?.menuItemStyles ?? {});\n\n  if (cameras && selectedCamera && onSelectCamera && isSelectCamAllowed) {\n    defaultMenuProps.items.push({\n      key: 'cameras',\n      itemType: ContextualMenuItemType.Section,\n      sectionProps: {\n        title: strings.cameraMenuTitle,\n        items: [\n          {\n            key: 'sectionCamera',\n            title: strings.cameraMenuTooltip,\n            subMenuProps: {\n              calloutProps: {\n                preventDismissOnEvent\n              },\n              items: cameras.map((camera) => ({\n                key: camera.id,\n                text: camera.name,\n                title: camera.name,\n                iconProps: {\n                  iconName: 'ContextMenuCameraIcon',\n                  styles: { root: { lineHeight: 0 } }\n                },\n                itemProps: {\n                  styles: menuItemStyles\n                },\n                canCheck: true,\n                isChecked: camera.id === selectedCamera?.id,\n                onClick: () => {\n                  if (camera.id !== selectedCamera?.id) {\n                    onSelectCamera(camera);\n                  }\n                }\n              }))\n            },\n            text: selectedCamera.name\n          }\n        ]\n      }\n    });\n    if (primaryActionItem) {\n      defaultMenuProps.items.push(primaryActionItem);\n    }\n  }\n\n  if (microphones && selectedMicrophone && onSelectMicrophone && isSelectMicAllowed) {\n    // Set props as Microphone if speakers can be enumerated else set as Audio Device\n    const speakersAvailable = speakers && speakers.length > 0;\n    const key = speakersAvailable ? 'sectionMicrophone' : 'sectionAudioDevice';\n    const title = speakersAvailable ? strings.microphoneMenuTooltip : strings.audioDeviceMenuTooltip;\n\n    defaultMenuProps.items.push({\n      key: 'microphones',\n      itemType: ContextualMenuItemType.Section,\n      sectionProps: {\n        title: strings.microphoneMenuTitle,\n        items: [\n          {\n            key: key,\n            title: title,\n            subMenuProps: {\n              calloutProps: {\n                preventDismissOnEvent\n              },\n              items: microphones.map((microphone) => ({\n                key: microphone.id,\n                text: microphone.name,\n                title: microphone.name,\n                itemProps: {\n                  styles: menuItemStyles\n                },\n                iconProps: {\n                  iconName: 'ContextMenuMicIcon',\n                  styles: { root: { lineHeight: 0 } }\n                },\n                canCheck: true,\n                isChecked: microphone.id === selectedMicrophone?.id,\n                onClick: () => {\n                  if (microphone.id !== selectedMicrophone?.id) {\n                    onSelectMicrophone(microphone);\n                  }\n                }\n              }))\n            },\n            text: selectedMicrophone.name\n          }\n        ]\n      }\n    });\n  }\n\n  if (speakers && selectedSpeaker && onSelectSpeaker) {\n    defaultMenuProps.items.push({\n      key: 'speakers',\n      itemType: ContextualMenuItemType.Section,\n      sectionProps: {\n        title: strings.speakerMenuTitle,\n        items: [\n          {\n            key: 'sectionSpeaker',\n            subMenuProps: {\n              calloutProps: {\n                preventDismissOnEvent\n              },\n              items: speakers.map((speaker) => ({\n                key: speaker.id,\n                text: speaker.name,\n                title: speaker.name,\n                itemProps: {\n                  styles: menuItemStyles\n                },\n                iconProps: {\n                  iconName: 'ContextMenuMicIcon',\n                  styles: { root: { lineHeight: 0 } }\n                },\n                canCheck: true,\n                isChecked: speaker.id === selectedSpeaker?.id,\n                onClick: () => {\n                  if (speaker.id !== selectedSpeaker?.id) {\n                    onSelectSpeaker(speaker);\n                  }\n                }\n              }))\n            },\n            text: selectedSpeaker.name\n          }\n        ]\n      }\n    });\n  }\n  if (microphones && selectedMicrophone && onSelectMicrophone && isSelectMicAllowed && primaryActionItem) {\n    defaultMenuProps.items.push(primaryActionItem);\n  }\n\n  if (defaultMenuProps.items.length === 0) {\n    // Avoids creating an empty context menu.\n    return undefined;\n  }\n  return defaultMenuProps;\n};\n\n/**\n * A button to open a menu that controls device options.\n *\n * Can be used with {@link ControlBar}.\n *\n * @public\n */\nexport const DevicesButton = (props: DevicesButtonProps): JSX.Element => {\n  const { onRenderIcon } = props;\n\n  const localeStrings = useLocale().strings.devicesButton;\n  const strings = { ...localeStrings, ...props.strings };\n\n  const devicesButtonMenu =\n    props.menuProps ?? generateDefaultDeviceMenuProps({ ...props, styles: props.styles?.menuStyles }, strings);\n\n  const onRenderOptionsIcon = (): JSX.Element => {\n    return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ControlButtonOptions\" />;\n  };\n\n  return (\n    <ControlBarButton\n      {...props}\n      menuProps={devicesButtonMenu}\n      menuIconProps={{ hidden: true }}\n      onRenderIcon={onRenderIcon ?? onRenderOptionsIcon}\n      strings={strings}\n      labelKey={props.labelKey ?? 'devicesButtonLabel'}\n    />\n  );\n};\n\"../../../acs-ui-common/src\""]}

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

@@ -74,17 +74,16 @@ export const _MentionPopover = (props) => {
         }
     }, [onDismiss]);
     const personaRenderer = useCallback((displayName) => {
-        const displayNamePlaceholder = localeStrings.participantItem.displayNamePlaceholder;
         const avatarOptions = {
-            text: (displayName === null || displayName === void 0 ? void 0 : displayName.trim()) || displayNamePlaceholder,
+            text: displayName.trim(),
             size: PersonaSize.size24,
             initialsColor: theme.palette.neutralLight,
             initialsTextColor: theme.palette.neutralSecondary,
             showOverflowTooltip: false,
-            showUnknownPersonaCoin: !(displayName === null || displayName === void 0 ? void 0 : displayName.trim()) || displayName === displayNamePlaceholder
+            showUnknownPersonaCoin: false
         };
         return React.createElement(Persona, Object.assign({}, avatarOptions));
-    }, [localeStrings, theme]);
+    }, [theme]);
     const defaultOnRenderSuggestionItem = useCallback((suggestion, onSuggestionSelected, active) => {
         return (React.createElement("div", { "data-is-focusable": true, "data-ui-id": ids.mentionSuggestionItem, key: suggestion.id, onClick: () => onSuggestionSelected(suggestion), onMouseEnter: () => setHoveredSuggestion(suggestion), onMouseLeave: () => setHoveredSuggestion(undefined), onKeyDown: (e) => {
                 handleOnKeyDown(e);

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

@@ -1 +1 @@
-{"version":3,"file":"MentionPopover.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/MentionPopover.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\nimport { Persona, PersonaSize, Stack, mergeStyles, useTheme } from '@fluentui/react';\nimport {\n  mentionPopoverContainerStyle,\n  headerStyleThemed,\n  suggestionListStyle,\n  suggestionItemStackStyle,\n  suggestionItemWrapperStyle\n} from './styles/MentionPopover.style';\n/* @conditional-compile-remove(mention) */\nimport { useIdentifiers } from '../identifiers';\nimport { useLocale } from '../localization';\n\n/**\n * Props for {@link _MentionPopover}.\n *\n * @internal\n */\nexport interface _MentionPopoverProps {\n  /**\n   * Array of mention suggestions used to populate the suggestion list\n   */\n  suggestions: Mention[];\n  /**\n   * Index of the currently focused suggestion, if any\n   */\n  activeSuggestionIndex?: number;\n  /**\n   * Optional string used as mention popover's title.\n   * @defaultValue `Suggestions`\n   */\n  title?: string;\n  /**\n   * Element to anchor the popover to.\n   */\n  target: React.RefObject<Element>;\n  /**\n   * When rendering the popover, where to position it relative to the target.\n   */\n  targetPositionOffset?: { top: number; left: number };\n  /**\n   * Where to display the suggestions relative to the target.\n   * @defaultValue `above`\n   */\n  location?: 'above' | 'below';\n  /**\n   * Callback called when a mention suggestion is selected.\n   */\n  onSuggestionSelected: (suggestion: Mention) => void;\n  /**\n   * Callback to invoke when the popover is dismissed\n   */\n  onDismiss?: () => void;\n  /**\n   * Optional callback to render an item of the mention suggestions list.\n   */\n  onRenderSuggestionItem?: (\n    suggestion: Mention,\n    onSuggestionSelected: (suggestion: Mention) => void,\n    isActive: boolean\n  ) => JSX.Element;\n}\n\n/**\n * Options to lookup suggestions in the mention scenario.\n *\n * @beta\n */\nexport interface MentionLookupOptions {\n  /**\n   * Optional string to set trigger keyword for mention a specific participant.\n   *\n   * @defaultValue `@`\n   */\n  trigger?: string;\n  /**\n   * Optional callback to fetch a list of mention suggestions base on the query.\n   */\n  onQueryUpdated: (query: string) => Promise<Mention[]>;\n  /**\n   * Optional callback to render an item of the mention suggestions list.\n   */\n  onRenderSuggestionItem?: (suggestion: Mention, onSuggestionSelected: (suggestion: Mention) => void) => JSX.Element;\n}\n\n/**\n * Options to display suggestions in the mention scenario.\n *\n * @beta\n */\nexport interface MentionDisplayOptions {\n  /**\n   * Optional callback for customizing the mention renderer in a message thread.\n   */\n  onRenderMention?: (mention: Mention, defaultOnRender: (mention: Mention) => JSX.Element) => JSX.Element;\n}\n\n/**\n * Options to lookup suggestions and display mentions in the mention scenario.\n *\n * @beta\n */\nexport type MentionOptions = {\n  lookupOptions?: MentionLookupOptions;\n  displayOptions?: MentionDisplayOptions;\n};\n\n/**\n * Mention's state, as reflected in the UI.\n *\n * @beta\n */\nexport interface Mention {\n  /** ID of a mention */\n  id: string;\n  /** Display text of a mention */\n  displayText: string;\n  /** Optional React element to render an item icon of a mention suggestion */\n  icon?: JSX.Element;\n}\n\n/**\n * Strings of {@link _MentionPopover} that can be overridden.\n *\n * @beta\n */\nexport interface MentionPopoverStrings {\n  /**\n   * Header text for MentionPopover\n   */\n  mentionPopoverHeader: string;\n}\n\n/**\n * Component to render a pop-up of mention suggestions.\n *\n * @internal\n */\nexport const _MentionPopover = (props: _MentionPopoverProps): JSX.Element => {\n  interface Position {\n    left?: number;\n    right?: number;\n    top?: number;\n    bottom?: number;\n    maxWidth?: number;\n  }\n\n  const {\n    suggestions,\n    activeSuggestionIndex,\n    title,\n    target,\n    targetPositionOffset,\n    onRenderSuggestionItem,\n    onSuggestionSelected,\n    onDismiss,\n    location\n  } = props;\n\n  const theme = useTheme();\n  /* @conditional-compile-remove(mention) */\n  const ids = useIdentifiers();\n  const localeStrings = useLocale().strings;\n  const popoverRef = useRef() as React.MutableRefObject<HTMLDivElement>;\n\n  const [position, setPosition] = useState<Position>({ left: 0 });\n  const [hoveredSuggestion, setHoveredSuggestion] = useState<Mention | undefined>(undefined);\n  const [changedSelection, setChangedSelection] = useState<boolean | undefined>(undefined); // Selection UI as per teams\n\n  const dismissPopoverWhenClickingOutside = useCallback(\n    (e: MouseEvent) => {\n      const target = e.target as HTMLElement;\n      if (popoverRef.current && !popoverRef.current.contains(target)) {\n        onDismiss && onDismiss();\n      }\n    },\n    [onDismiss]\n  );\n\n  useEffect(() => {\n    if (changedSelection === undefined) {\n      setChangedSelection(false);\n    } else if (changedSelection === false) {\n      setChangedSelection(true);\n    }\n  }, [activeSuggestionIndex, changedSelection]);\n\n  useEffect(() => {\n    window && window.addEventListener('click', dismissPopoverWhenClickingOutside);\n    return () => {\n      window && window.removeEventListener('click', dismissPopoverWhenClickingOutside);\n    };\n  }, [dismissPopoverWhenClickingOutside]);\n\n  // Determine popover position\n  useEffect(() => {\n    const rect = target?.current?.getBoundingClientRect();\n    const maxWidth = 200;\n    const finalPosition: Position = { maxWidth };\n\n    // Figure out whether it will fit horizontally\n    const leftOffset = targetPositionOffset?.left ?? 0;\n    if (leftOffset + maxWidth > (rect?.width ?? 0)) {\n      finalPosition.right = (rect?.width ?? 0) - leftOffset;\n    } else {\n      finalPosition.left = leftOffset;\n    }\n\n    if (location === 'below') {\n      finalPosition.top = (rect?.height ?? 0) + (targetPositionOffset?.top ?? 0);\n    } else {\n      // (location === 'above')\n      finalPosition.bottom = (rect?.height ?? 0) - (targetPositionOffset?.top ?? 0);\n    }\n    setPosition(finalPosition);\n  }, [location, target, targetPositionOffset]);\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLDivElement>) => {\n      switch (e.key) {\n        case 'Escape':\n          onDismiss && onDismiss();\n          break;\n        default:\n          break;\n      }\n    },\n    [onDismiss]\n  );\n\n  const personaRenderer = useCallback(\n    (displayName?: string): JSX.Element => {\n      const displayNamePlaceholder = localeStrings.participantItem.displayNamePlaceholder;\n      const avatarOptions = {\n        text: displayName?.trim() || displayNamePlaceholder,\n        size: PersonaSize.size24,\n        initialsColor: theme.palette.neutralLight,\n        initialsTextColor: theme.palette.neutralSecondary,\n        showOverflowTooltip: false,\n        showUnknownPersonaCoin: !displayName?.trim() || displayName === displayNamePlaceholder\n      };\n\n      return <Persona {...avatarOptions} />;\n    },\n    [localeStrings, theme]\n  );\n\n  const defaultOnRenderSuggestionItem = useCallback(\n    (suggestion: Mention, onSuggestionSelected: (suggestion: Mention) => void, active: boolean): JSX.Element => {\n      return (\n        <div\n          data-is-focusable={true}\n          /* @conditional-compile-remove(mention) */\n          data-ui-id={ids.mentionSuggestionItem}\n          key={suggestion.id}\n          onClick={() => onSuggestionSelected(suggestion)}\n          onMouseEnter={() => setHoveredSuggestion(suggestion)}\n          onMouseLeave={() => setHoveredSuggestion(undefined)}\n          onKeyDown={(e) => {\n            handleOnKeyDown(e);\n          }}\n          className={suggestionItemWrapperStyle(theme)}\n        >\n          <Stack\n            horizontal\n            className={suggestionItemStackStyle(\n              theme,\n              hoveredSuggestion?.id === suggestion.id,\n              (changedSelection ?? false) && active\n            )}\n          >\n            {personaRenderer(suggestion.displayText)}\n          </Stack>\n        </div>\n      );\n    },\n    [\n      handleOnKeyDown,\n      theme,\n      /* @conditional-compile-remove(mention) */\n      ids,\n      hoveredSuggestion,\n      changedSelection,\n      personaRenderer\n    ]\n  );\n\n  const getHeaderTitle = useCallback((): string => {\n    if (title) {\n      return title;\n    }\n    /* @conditional-compile-remove(mention) */\n    return localeStrings.mentionPopover.mentionPopoverHeader;\n    return '';\n  }, [localeStrings, title]);\n\n  return (\n    <div ref={popoverRef}>\n      <Stack\n        data-testid={'mention-suggestion-list-container'}\n        className={mergeStyles(\n          {\n            maxHeight: 212,\n            maxWidth: position.maxWidth\n          },\n          mentionPopoverContainerStyle(theme),\n          {\n            ...position,\n            position: 'absolute'\n          }\n        )}\n      >\n        <Stack.Item styles={headerStyleThemed(theme)} aria-label={title}>\n          {getHeaderTitle()}\n        </Stack.Item>\n        <Stack\n          /* @conditional-compile-remove(mention) */\n          data-ui-id={ids.mentionSuggestionList}\n          className={suggestionListStyle}\n        >\n          {suggestions.map((suggestion, index) => {\n            const active = index === activeSuggestionIndex;\n            return onRenderSuggestionItem\n              ? onRenderSuggestionItem(suggestion, onSuggestionSelected, active)\n              : defaultOnRenderSuggestionItem(suggestion, onSuggestionSelected, active);\n          })}\n        </Stack>\n      </Stack>\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"MentionPopover.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/MentionPopover.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\nimport { Persona, PersonaSize, Stack, mergeStyles, useTheme } from '@fluentui/react';\nimport {\n  mentionPopoverContainerStyle,\n  headerStyleThemed,\n  suggestionListStyle,\n  suggestionItemStackStyle,\n  suggestionItemWrapperStyle\n} from './styles/MentionPopover.style';\n/* @conditional-compile-remove(mention) */\nimport { useIdentifiers } from '../identifiers';\nimport { useLocale } from '../localization';\n\n/**\n * Props for {@link _MentionPopover}.\n *\n * @internal\n */\nexport interface _MentionPopoverProps {\n  /**\n   * Array of mention suggestions used to populate the suggestion list\n   */\n  suggestions: Mention[];\n  /**\n   * Index of the currently focused suggestion, if any\n   */\n  activeSuggestionIndex?: number;\n  /**\n   * Optional string used as mention popover's title.\n   * @defaultValue `Suggestions`\n   */\n  title?: string;\n  /**\n   * Element to anchor the popover to.\n   */\n  target: React.RefObject<Element>;\n  /**\n   * When rendering the popover, where to position it relative to the target.\n   */\n  targetPositionOffset?: { top: number; left: number };\n  /**\n   * Where to display the suggestions relative to the target.\n   * @defaultValue `above`\n   */\n  location?: 'above' | 'below';\n  /**\n   * Callback called when a mention suggestion is selected.\n   */\n  onSuggestionSelected: (suggestion: Mention) => void;\n  /**\n   * Callback to invoke when the popover is dismissed\n   */\n  onDismiss?: () => void;\n  /**\n   * Optional callback to render an item of the mention suggestions list.\n   */\n  onRenderSuggestionItem?: (\n    suggestion: Mention,\n    onSuggestionSelected: (suggestion: Mention) => void,\n    isActive: boolean\n  ) => JSX.Element;\n}\n\n/**\n * Options to lookup suggestions in the mention scenario.\n *\n * @beta\n */\nexport interface MentionLookupOptions {\n  /**\n   * Optional string to set trigger keyword for mention a specific participant.\n   *\n   * @defaultValue `@`\n   */\n  trigger?: string;\n  /**\n   * Optional callback to fetch a list of mention suggestions base on the query.\n   */\n  onQueryUpdated: (query: string) => Promise<Mention[]>;\n  /**\n   * Optional callback to render an item of the mention suggestions list.\n   */\n  onRenderSuggestionItem?: (suggestion: Mention, onSuggestionSelected: (suggestion: Mention) => void) => JSX.Element;\n}\n\n/**\n * Options to display suggestions in the mention scenario.\n *\n * @beta\n */\nexport interface MentionDisplayOptions {\n  /**\n   * Optional callback for customizing the mention renderer in a message thread.\n   */\n  onRenderMention?: (mention: Mention, defaultOnRender: (mention: Mention) => JSX.Element) => JSX.Element;\n}\n\n/**\n * Options to lookup suggestions and display mentions in the mention scenario.\n *\n * @beta\n */\nexport type MentionOptions = {\n  lookupOptions?: MentionLookupOptions;\n  displayOptions?: MentionDisplayOptions;\n};\n\n/**\n * Mention's state, as reflected in the UI.\n *\n * @beta\n */\nexport interface Mention {\n  /** ID of a mention */\n  id: string;\n  /** Display text of a mention */\n  displayText: string;\n  /** Optional React element to render an item icon of a mention suggestion */\n  icon?: JSX.Element;\n}\n\n/**\n * Strings of {@link _MentionPopover} that can be overridden.\n *\n * @beta\n */\nexport interface MentionPopoverStrings {\n  /**\n   * Header text for MentionPopover\n   */\n  mentionPopoverHeader: string;\n}\n\n/**\n * Component to render a pop-up of mention suggestions.\n *\n * @internal\n */\nexport const _MentionPopover = (props: _MentionPopoverProps): JSX.Element => {\n  interface Position {\n    left?: number;\n    right?: number;\n    top?: number;\n    bottom?: number;\n    maxWidth?: number;\n  }\n\n  const {\n    suggestions,\n    activeSuggestionIndex,\n    title,\n    target,\n    targetPositionOffset,\n    onRenderSuggestionItem,\n    onSuggestionSelected,\n    onDismiss,\n    location\n  } = props;\n\n  const theme = useTheme();\n  /* @conditional-compile-remove(mention) */\n  const ids = useIdentifiers();\n  const localeStrings = useLocale().strings;\n  const popoverRef = useRef() as React.MutableRefObject<HTMLDivElement>;\n\n  const [position, setPosition] = useState<Position>({ left: 0 });\n  const [hoveredSuggestion, setHoveredSuggestion] = useState<Mention | undefined>(undefined);\n  const [changedSelection, setChangedSelection] = useState<boolean | undefined>(undefined); // Selection UI as per teams\n\n  const dismissPopoverWhenClickingOutside = useCallback(\n    (e: MouseEvent) => {\n      const target = e.target as HTMLElement;\n      if (popoverRef.current && !popoverRef.current.contains(target)) {\n        onDismiss && onDismiss();\n      }\n    },\n    [onDismiss]\n  );\n\n  useEffect(() => {\n    if (changedSelection === undefined) {\n      setChangedSelection(false);\n    } else if (changedSelection === false) {\n      setChangedSelection(true);\n    }\n  }, [activeSuggestionIndex, changedSelection]);\n\n  useEffect(() => {\n    window && window.addEventListener('click', dismissPopoverWhenClickingOutside);\n    return () => {\n      window && window.removeEventListener('click', dismissPopoverWhenClickingOutside);\n    };\n  }, [dismissPopoverWhenClickingOutside]);\n\n  // Determine popover position\n  useEffect(() => {\n    const rect = target?.current?.getBoundingClientRect();\n    const maxWidth = 200;\n    const finalPosition: Position = { maxWidth };\n\n    // Figure out whether it will fit horizontally\n    const leftOffset = targetPositionOffset?.left ?? 0;\n    if (leftOffset + maxWidth > (rect?.width ?? 0)) {\n      finalPosition.right = (rect?.width ?? 0) - leftOffset;\n    } else {\n      finalPosition.left = leftOffset;\n    }\n\n    if (location === 'below') {\n      finalPosition.top = (rect?.height ?? 0) + (targetPositionOffset?.top ?? 0);\n    } else {\n      // (location === 'above')\n      finalPosition.bottom = (rect?.height ?? 0) - (targetPositionOffset?.top ?? 0);\n    }\n    setPosition(finalPosition);\n  }, [location, target, targetPositionOffset]);\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLDivElement>) => {\n      switch (e.key) {\n        case 'Escape':\n          onDismiss && onDismiss();\n          break;\n        default:\n          break;\n      }\n    },\n    [onDismiss]\n  );\n\n  const personaRenderer = useCallback(\n    (displayName: string): JSX.Element => {\n      const avatarOptions = {\n        text: displayName.trim(),\n        size: PersonaSize.size24,\n        initialsColor: theme.palette.neutralLight,\n        initialsTextColor: theme.palette.neutralSecondary,\n        showOverflowTooltip: false,\n        showUnknownPersonaCoin: false\n      };\n\n      return <Persona {...avatarOptions} />;\n    },\n    [theme]\n  );\n\n  const defaultOnRenderSuggestionItem = useCallback(\n    (suggestion: Mention, onSuggestionSelected: (suggestion: Mention) => void, active: boolean): JSX.Element => {\n      return (\n        <div\n          data-is-focusable={true}\n          /* @conditional-compile-remove(mention) */\n          data-ui-id={ids.mentionSuggestionItem}\n          key={suggestion.id}\n          onClick={() => onSuggestionSelected(suggestion)}\n          onMouseEnter={() => setHoveredSuggestion(suggestion)}\n          onMouseLeave={() => setHoveredSuggestion(undefined)}\n          onKeyDown={(e) => {\n            handleOnKeyDown(e);\n          }}\n          className={suggestionItemWrapperStyle(theme)}\n        >\n          <Stack\n            horizontal\n            className={suggestionItemStackStyle(\n              theme,\n              hoveredSuggestion?.id === suggestion.id,\n              (changedSelection ?? false) && active\n            )}\n          >\n            {personaRenderer(suggestion.displayText)}\n          </Stack>\n        </div>\n      );\n    },\n    [\n      handleOnKeyDown,\n      theme,\n      /* @conditional-compile-remove(mention) */\n      ids,\n      hoveredSuggestion,\n      changedSelection,\n      personaRenderer\n    ]\n  );\n\n  const getHeaderTitle = useCallback((): string => {\n    if (title) {\n      return title;\n    }\n    /* @conditional-compile-remove(mention) */\n    return localeStrings.mentionPopover.mentionPopoverHeader;\n    return '';\n  }, [localeStrings, title]);\n\n  return (\n    <div ref={popoverRef}>\n      <Stack\n        data-testid={'mention-suggestion-list-container'}\n        className={mergeStyles(\n          {\n            maxHeight: 212,\n            maxWidth: position.maxWidth\n          },\n          mentionPopoverContainerStyle(theme),\n          {\n            ...position,\n            position: 'absolute'\n          }\n        )}\n      >\n        <Stack.Item styles={headerStyleThemed(theme)} aria-label={title}>\n          {getHeaderTitle()}\n        </Stack.Item>\n        <Stack\n          /* @conditional-compile-remove(mention) */\n          data-ui-id={ids.mentionSuggestionList}\n          className={suggestionListStyle}\n        >\n          {suggestions.map((suggestion, index) => {\n            const active = index === activeSuggestionIndex;\n            return onRenderSuggestionItem\n              ? onRenderSuggestionItem(suggestion, onSuggestionSelected, active)\n              : defaultOnRenderSuggestionItem(suggestion, onSuggestionSelected, active);\n          })}\n        </Stack>\n      </Stack>\n    </div>\n  );\n};\n"]}

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

@@ -182,7 +182,8 @@ export const TextFieldWithMention = (props) => {
     ]);
     const debouncedQueryUpdate = useDebouncedCallback((query) => __awaiter(void 0, void 0, void 0, function* () {
         var _a;
-        const suggestions = (_a = (yield (mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.onQueryUpdated(query)))) !== null && _a !== void 0 ? _a : [];
+        let suggestions = (_a = (yield (mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.onQueryUpdated(query)))) !== null && _a !== void 0 ? _a : [];
+        suggestions = suggestions.filter((suggestion) => suggestion.displayText.trim() !== '');
         if (suggestions.length === 0) {
             setActiveSuggestionIndex(undefined);
         }
@@ -379,7 +380,9 @@ export const TextFieldWithMention = (props) => {
             const textField = event.currentTarget;
             const relativePosition = Caret.getRelativePosition(textField);
             const adjustOffset = Math.max(0, textField.scrollHeight - textField.clientHeight);
-            relativePosition.top -= adjustOffset;
+            if (relativePosition.top > adjustOffset) {
+                relativePosition.top -= adjustOffset;
+            }
             setCaretPosition(relativePosition);
             if (triggerPriorIndex !== undefined) {
                 // trigger is found