@azure/communication-react 1.12.0 → 1.12.1-alpha-202401200012

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

@@ -6,6 +6,8 @@ import { isEnterKeyEventFromCompositionSession } from './utils';
 import { inputBoxStyle, inputBoxWrapperStyle, inputButtonStyle, textFieldStyle, textContainerStyle, inputButtonTooltipStyle, iconWrapperStyle } from './styles/InputBoxComponent.style';
 import { isDarkThemed } from '../theming/themeUtils';
 import { useTheme } from '../theming';
+/* @conditional-compile-remove(mention) */
+import { TextFieldWithMention } from './TextFieldWithMention/TextFieldWithMention';
 /**
  * @private
  */
@@ -52,18 +54,32 @@ export const InputBoxComponent = (props) => {
             errorMessage,
             onRenderSuffix: props.children ? onRenderChildren : undefined
         };
-        return React.createElement("div", { style: textFieldProps.errorMessage ? {
-                padding: '0 0 5px 5px'
-            } : undefined },
-            React.createElement(TextField, Object.assign({}, textFieldProps, { "data-ui-id": dataUiId, value: textValue, onChange: onChange, onKeyDown: onTextFieldKeyDown, onFocus: e => {
+        /* @conditional-compile-remove(mention) */
+        const textFieldWithMentionProps = {
+            textFieldProps: textFieldProps,
+            dataUiId: dataUiId,
+            textValue: textValue,
+            onChange: onChange,
+            onKeyDown: onKeyDown,
+            onEnterKeyDown: onEnterKeyDown,
+            textFieldRef: textFieldRef,
+            supportNewline: supportNewline,
+            mentionLookupOptions: props.mentionLookupOptions
+        };
+        /* @conditional-compile-remove(mention) */
+        if (props.mentionLookupOptions) {
+            return React.createElement(TextFieldWithMention, Object.assign({}, textFieldWithMentionProps));
+        }
+        return (React.createElement("div", { style: textFieldProps.errorMessage ? { padding: '0 0 5px 5px' } : undefined },
+            React.createElement(TextField, Object.assign({}, textFieldProps, { "data-ui-id": dataUiId, value: textValue, onChange: onChange, onKeyDown: onTextFieldKeyDown, onFocus: (e) => {
                     // Fix for setting the cursor to the correct position when multiline is true
                     // This approach should be reviewed during migration to FluentUI v9
                     e.currentTarget.value = '';
                     e.currentTarget.value = textValue;
-                } })));
+                } }))));
     };
-    return React.createElement(Stack, { className: mergedRootStyle },
-        React.createElement("div", { className: mergedTextContainerStyle }, renderTextField()));
+    return (React.createElement(Stack, { className: mergedRootStyle },
+        React.createElement("div", { className: mergedTextContainerStyle }, renderTextField())));
 };
 /**
  * @private
@@ -73,27 +89,20 @@ export const InputBoxButton = (props) => {
     const [isHover, setIsHover] = useState(false);
     const mergedButtonStyle = mergeStyles(inputButtonStyle, className);
     const theme = useTheme();
-    const calloutStyle = {
-        root: {
-            padding: 0
-        },
-        calloutMain: {
-            padding: '0.5rem'
-        }
-    };
+    const calloutStyle = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };
     // Place callout with no gap between it and the button.
     const calloutProps = {
         gapSpace: 0,
         styles: calloutStyle,
         backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''
     };
-    return React.createElement(TooltipHost, { hostClassName: inputButtonTooltipStyle, content: tooltipContent, calloutProps: Object.assign({}, calloutProps) },
+    return (React.createElement(TooltipHost, { hostClassName: inputButtonTooltipStyle, content: tooltipContent, calloutProps: Object.assign({}, calloutProps) },
         React.createElement(IconButton, { className: mergedButtonStyle, ariaLabel: ariaLabel, onClick: onClick, id: id, onMouseEnter: () => {
                 setIsHover(true);
             }, onMouseLeave: () => {
                 setIsHover(false);
             }, 
             // VoiceOver fix: Avoid icon from stealing focus when IconButton is double-tapped to send message by wrapping with Stack with pointerEvents style to none
-            onRenderIcon: () => React.createElement(Stack, { className: iconWrapperStyle }, onRenderIcon(isHover)) }));
+            onRenderIcon: () => React.createElement(Stack, { className: iconWrapperStyle }, onRenderIcon(isHover)) })));
 };
 //# sourceMappingURL=InputBoxComponent.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InputBoxComponent.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/InputBoxComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useState, ReactNode, FormEvent, useCallback } from 'react';\nimport { Stack, TextField, mergeStyles, IStyle, ITextField, concatStyleSets, IconButton, TooltipHost, ICalloutContentStyles, ITextFieldProps } from '@fluentui/react';\nimport { BaseCustomStyles } from '../types';\nimport { isEnterKeyEventFromCompositionSession } from './utils';\nimport { inputBoxStyle, inputBoxWrapperStyle, inputButtonStyle, textFieldStyle, textContainerStyle, inputButtonTooltipStyle, iconWrapperStyle } from './styles/InputBoxComponent.style';\nimport { isDarkThemed } from '../theming/themeUtils';\nimport { useTheme } from '../theming';\n/**\n * @private\n */\nexport interface InputBoxStylesProps extends BaseCustomStyles {\n  /** Styles for the text field. */\n  textField?: IStyle;\n\n  /** Styles for the system message; These styles will be ignored when a custom system message component is provided. */\n  systemMessage?: IStyle;\n\n  /** Styles for customizing the container of the text field */\n  textFieldContainer?: IStyle;\n}\ntype InputBoxComponentProps = {\n  children?: ReactNode;\n  'data-ui-id'?: string;\n  id?: string;\n  textValue: string; // This could be plain text or HTML.\n  onChange: (event?: FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => void;\n  textFieldRef?: React.RefObject<ITextField>;\n  inputClassName?: string;\n  placeholderText?: string;\n  supportNewline?: boolean;\n  maxLength: number;\n  onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;\n  onEnterKeyDown?: () => void;\n  errorMessage?: string | React.ReactElement;\n  disabled?: boolean;\n  styles?: InputBoxStylesProps;\n  autoFocus?: 'sendBoxTextField';\n};\n\n/**\n * @private\n */\nexport const InputBoxComponent = (props: InputBoxComponentProps): JSX.Element => {\n  const {\n    styles,\n    id,\n    'data-ui-id': dataUiId,\n    textValue,\n    onChange,\n    textFieldRef,\n    placeholderText,\n    onKeyDown,\n    onEnterKeyDown,\n    supportNewline,\n    inputClassName,\n    errorMessage,\n    disabled,\n    children\n  } = props;\n  const mergedRootStyle = mergeStyles(inputBoxWrapperStyle, styles?.root);\n  const mergedInputFieldStyle = mergeStyles(inputBoxStyle, inputClassName);\n  const mergedTextContainerStyle = mergeStyles(textContainerStyle, styles?.textFieldContainer);\n  const mergedTextFieldStyle = concatStyleSets(textFieldStyle, {\n    fieldGroup: styles?.textField,\n    errorMessage: styles?.systemMessage,\n    suffix: {\n      backgroundColor: 'transparent',\n      padding: '0 0'\n    }\n  });\n  const onTextFieldKeyDown = useCallback((ev: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n    if (isEnterKeyEventFromCompositionSession(ev)) {\n      return;\n    }\n    if (ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline)) {\n      ev.preventDefault();\n      onEnterKeyDown && onEnterKeyDown();\n    }\n    onKeyDown && onKeyDown(ev);\n  }, [onEnterKeyDown, onKeyDown, supportNewline]);\n  const onRenderChildren = (): JSX.Element => {\n    return <>{children}</>;\n  };\n  const renderTextField = (): JSX.Element => {\n    const textFieldProps: ITextFieldProps = {\n      autoFocus: props.autoFocus === 'sendBoxTextField',\n      multiline: true,\n      autoAdjustHeight: true,\n      multiple: false,\n      resizable: false,\n      componentRef: textFieldRef,\n      id,\n      inputClassName: mergedInputFieldStyle,\n      placeholder: placeholderText,\n      autoComplete: 'off',\n      styles: mergedTextFieldStyle,\n      disabled,\n      errorMessage,\n      onRenderSuffix: props.children ? onRenderChildren : undefined\n    };\n    return <div style={textFieldProps.errorMessage ? {\n      padding: '0 0 5px 5px'\n    } : undefined}>\n        <TextField {...textFieldProps} data-ui-id={dataUiId} value={textValue} onChange={onChange} onKeyDown={onTextFieldKeyDown} onFocus={e => {\n        // Fix for setting the cursor to the correct position when multiline is true\n        // This approach should be reviewed during migration to FluentUI v9\n        e.currentTarget.value = '';\n        e.currentTarget.value = textValue;\n      }} />\n      </div>;\n  };\n  return <Stack className={mergedRootStyle}>\n      <div className={mergedTextContainerStyle}>{renderTextField()}</div>\n    </Stack>;\n};\n\n/**\n * Props for displaying a send button besides the text input area.\n *\n * @private\n */\nexport type InputBoxButtonProps = {\n  onRenderIcon: (isHover: boolean) => JSX.Element;\n  onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n  className?: string;\n  id?: string;\n  ariaLabel?: string;\n  tooltipContent?: string;\n};\n\n/**\n * @private\n */\nexport const InputBoxButton = (props: InputBoxButtonProps): JSX.Element => {\n  const {\n    onRenderIcon,\n    onClick,\n    ariaLabel,\n    className,\n    id,\n    tooltipContent\n  } = props;\n  const [isHover, setIsHover] = useState(false);\n  const mergedButtonStyle = mergeStyles(inputButtonStyle, className);\n  const theme = useTheme();\n  const calloutStyle: Partial<ICalloutContentStyles> = {\n    root: {\n      padding: 0\n    },\n    calloutMain: {\n      padding: '0.5rem'\n    }\n  };\n\n  // Place callout with no gap between it and the button.\n  const calloutProps = {\n    gapSpace: 0,\n    styles: calloutStyle,\n    backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n  };\n  return <TooltipHost hostClassName={inputButtonTooltipStyle} content={tooltipContent} calloutProps={{\n    ...calloutProps\n  }}>\n      <IconButton className={mergedButtonStyle} ariaLabel={ariaLabel} onClick={onClick} id={id} onMouseEnter={() => {\n      setIsHover(true);\n    }} onMouseLeave={() => {\n      setIsHover(false);\n    }}\n    // VoiceOver fix: Avoid icon from stealing focus when IconButton is double-tapped to send message by wrapping with Stack with pointerEvents style to none\n    onRenderIcon={() => <Stack className={iconWrapperStyle}>{onRenderIcon(isHover)}</Stack>} />\n    </TooltipHost>;\n};"]}
+{"version":3,"file":"InputBoxComponent.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/InputBoxComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useState, ReactNode, FormEvent, useCallback } from 'react';\n\nimport {\n  Stack,\n  TextField,\n  mergeStyles,\n  IStyle,\n  ITextField,\n  concatStyleSets,\n  IconButton,\n  TooltipHost,\n  ICalloutContentStyles,\n  ITextFieldProps\n} from '@fluentui/react';\nimport { BaseCustomStyles } from '../types';\nimport { isEnterKeyEventFromCompositionSession } from './utils';\n\nimport {\n  inputBoxStyle,\n  inputBoxWrapperStyle,\n  inputButtonStyle,\n  textFieldStyle,\n  textContainerStyle,\n  inputButtonTooltipStyle,\n  iconWrapperStyle\n} from './styles/InputBoxComponent.style';\n\nimport { isDarkThemed } from '../theming/themeUtils';\nimport { useTheme } from '../theming';\n/* @conditional-compile-remove(mention) */\nimport { MentionLookupOptions } from './MentionPopover';\n/* @conditional-compile-remove(mention) */\nimport { TextFieldWithMention, TextFieldWithMentionProps } from './TextFieldWithMention/TextFieldWithMention';\n\n/**\n * @private\n */\nexport interface InputBoxStylesProps extends BaseCustomStyles {\n  /** Styles for the text field. */\n  textField?: IStyle;\n\n  /** Styles for the system message; These styles will be ignored when a custom system message component is provided. */\n  systemMessage?: IStyle;\n\n  /** Styles for customizing the container of the text field */\n  textFieldContainer?: IStyle;\n}\n\ntype InputBoxComponentProps = {\n  children?: ReactNode;\n  'data-ui-id'?: string;\n  id?: string;\n  textValue: string; // This could be plain text or HTML.\n  onChange: (event?: FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => void;\n  textFieldRef?: React.RefObject<ITextField>;\n  inputClassName?: string;\n  placeholderText?: string;\n  supportNewline?: boolean;\n  maxLength: number;\n  onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;\n  onEnterKeyDown?: () => void;\n  errorMessage?: string | React.ReactElement;\n  disabled?: boolean;\n  styles?: InputBoxStylesProps;\n  autoFocus?: 'sendBoxTextField';\n  /* @conditional-compile-remove(mention) */\n  mentionLookupOptions?: MentionLookupOptions;\n};\n\n/**\n * @private\n */\nexport const InputBoxComponent = (props: InputBoxComponentProps): JSX.Element => {\n  const {\n    styles,\n    id,\n    'data-ui-id': dataUiId,\n    textValue,\n    onChange,\n    textFieldRef,\n    placeholderText,\n    onKeyDown,\n    onEnterKeyDown,\n    supportNewline,\n    inputClassName,\n    errorMessage,\n    disabled,\n    children\n  } = props;\n  const mergedRootStyle = mergeStyles(inputBoxWrapperStyle, styles?.root);\n  const mergedInputFieldStyle = mergeStyles(inputBoxStyle, inputClassName);\n\n  const mergedTextContainerStyle = mergeStyles(textContainerStyle, styles?.textFieldContainer);\n  const mergedTextFieldStyle = concatStyleSets(textFieldStyle, {\n    fieldGroup: styles?.textField,\n    errorMessage: styles?.systemMessage,\n    suffix: {\n      backgroundColor: 'transparent',\n      padding: '0 0'\n    }\n  });\n\n  const onTextFieldKeyDown = useCallback(\n    (ev: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n      if (isEnterKeyEventFromCompositionSession(ev)) {\n        return;\n      }\n      if (ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline)) {\n        ev.preventDefault();\n        onEnterKeyDown && onEnterKeyDown();\n      }\n      onKeyDown && onKeyDown(ev);\n    },\n    [onEnterKeyDown, onKeyDown, supportNewline]\n  );\n\n  const onRenderChildren = (): JSX.Element => {\n    return <>{children}</>;\n  };\n\n  const renderTextField = (): JSX.Element => {\n    const textFieldProps: ITextFieldProps = {\n      autoFocus: props.autoFocus === 'sendBoxTextField',\n      multiline: true,\n      autoAdjustHeight: true,\n      multiple: false,\n      resizable: false,\n      componentRef: textFieldRef,\n      id,\n      inputClassName: mergedInputFieldStyle,\n      placeholder: placeholderText,\n      autoComplete: 'off',\n      styles: mergedTextFieldStyle,\n      disabled,\n      errorMessage,\n      onRenderSuffix: props.children ? onRenderChildren : undefined\n    };\n\n    /* @conditional-compile-remove(mention) */\n    const textFieldWithMentionProps: TextFieldWithMentionProps = {\n      textFieldProps: textFieldProps,\n      dataUiId: dataUiId,\n      textValue: textValue,\n      onChange: onChange,\n      onKeyDown: onKeyDown,\n      onEnterKeyDown: onEnterKeyDown,\n      textFieldRef: textFieldRef,\n      supportNewline: supportNewline,\n      mentionLookupOptions: props.mentionLookupOptions\n    };\n    /* @conditional-compile-remove(mention) */\n    if (props.mentionLookupOptions) {\n      return <TextFieldWithMention {...textFieldWithMentionProps} />;\n    }\n    return (\n      <div style={textFieldProps.errorMessage ? { padding: '0 0 5px 5px' } : undefined}>\n        <TextField\n          {...textFieldProps}\n          data-ui-id={dataUiId}\n          value={textValue}\n          onChange={onChange}\n          onKeyDown={onTextFieldKeyDown}\n          onFocus={(e) => {\n            // Fix for setting the cursor to the correct position when multiline is true\n            // This approach should be reviewed during migration to FluentUI v9\n            e.currentTarget.value = '';\n            e.currentTarget.value = textValue;\n          }}\n        />\n      </div>\n    );\n  };\n\n  return (\n    <Stack className={mergedRootStyle}>\n      <div className={mergedTextContainerStyle}>{renderTextField()}</div>\n    </Stack>\n  );\n};\n\n/**\n * Props for displaying a send button besides the text input area.\n *\n * @private\n */\nexport type InputBoxButtonProps = {\n  onRenderIcon: (isHover: boolean) => JSX.Element;\n  onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n  className?: string;\n  id?: string;\n  ariaLabel?: string;\n  tooltipContent?: string;\n};\n\n/**\n * @private\n */\nexport const InputBoxButton = (props: InputBoxButtonProps): JSX.Element => {\n  const { onRenderIcon, onClick, ariaLabel, className, id, tooltipContent } = props;\n  const [isHover, setIsHover] = useState(false);\n  const mergedButtonStyle = mergeStyles(inputButtonStyle, className);\n\n  const theme = useTheme();\n  const calloutStyle: Partial<ICalloutContentStyles> = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };\n\n  // Place callout with no gap between it and the button.\n  const calloutProps = {\n    gapSpace: 0,\n    styles: calloutStyle,\n    backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n  };\n  return (\n    <TooltipHost hostClassName={inputButtonTooltipStyle} content={tooltipContent} calloutProps={{ ...calloutProps }}>\n      <IconButton\n        className={mergedButtonStyle}\n        ariaLabel={ariaLabel}\n        onClick={onClick}\n        id={id}\n        onMouseEnter={() => {\n          setIsHover(true);\n        }}\n        onMouseLeave={() => {\n          setIsHover(false);\n        }}\n        // VoiceOver fix: Avoid icon from stealing focus when IconButton is double-tapped to send message by wrapping with Stack with pointerEvents style to none\n        onRenderIcon={() => <Stack className={iconWrapperStyle}>{onRenderIcon(isHover)}</Stack>}\n      />\n    </TooltipHost>\n  );\n};\n"]}

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

@@ -35,14 +35,12 @@ export const LocalVideoCameraCycleButton = (props) => {
     }), [onSelectCamera]);
     const disabled = !!waitForCamera;
     const cameraLoadingString = useLocale().strings.cameraButton.tooltipVideoLoadingContent;
-    return React.createElement(IconButton, { "data-ui-id": 'local-camera-switcher-button', styles: localVideoCameraCycleButtonStyles(theme, size), disabled: disabled, iconProps: {
-            iconName: 'LocalCameraSwitch'
-        }, ariaLabel: label, ariaDescription: disabled ? cameraLoadingString : ariaDescription, "aria-live": 'polite', onClick: () => {
+    return (React.createElement(IconButton, { "data-ui-id": 'local-camera-switcher-button', styles: localVideoCameraCycleButtonStyles(theme, size), disabled: disabled, iconProps: { iconName: 'LocalCameraSwitch' }, ariaLabel: label, ariaDescription: disabled ? cameraLoadingString : ariaDescription, "aria-live": 'polite', onClick: () => {
             if (cameras && cameras.length > 1 && selectedCamera !== undefined) {
-                const index = cameras.findIndex(camera => selectedCamera.id === camera.id);
+                const index = cameras.findIndex((camera) => selectedCamera.id === camera.id);
                 const newCamera = cameras[(index + 1) % cameras.length];
                 onChangeCameraClick(newCamera);
             }
-        } });
+        } }));
 };
 //# sourceMappingURL=LocalVideoCameraButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LocalVideoCameraButton.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/LocalVideoCameraButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,iCAAiC,EAAE,MAAM,8BAA8B,CAAC;AACjF,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAoB5C;;;GAGG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,KAAuC,EAAe,EAAE;IAClG,MAAM,EACJ,OAAO,EACP,cAAc,EACd,cAAc,EACd,KAAK,EACL,eAAe,EACf,IAAI,EACL,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,mBAAmB,GAAG,WAAW,CAAC,CAAO,MAAqB,EAAE,EAAE;QACtE,yDAAyD;QACzD,IAAI,cAAc,EAAE,CAAC;YACnB,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACvB,IAAI,CAAC;gBACH,MAAM,cAAc,CAAC,MAAM,CAAC,CAAC;YAC/B,CAAC;oBAAS,CAAC;gBACT,gBAAgB,CAAC,KAAK,CAAC,CAAC;YAC1B,CAAC;QACH,CAAC;IACH,CAAC,CAAA,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IACrB,MAAM,QAAQ,GAAG,CAAC,CAAC,aAAa,CAAC;IACjC,MAAM,mBAAmB,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,0BAA0B,CAAC;IACxF,OAAO,oBAAC,UAAU,kBAAa,8BAA8B,EAAE,MAAM,EAAE,iCAAiC,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE;YACpJ,QAAQ,EAAE,mBAAmB;SAC9B,EAAE,SAAS,EAAE,KAAK,EAAE,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,eAAe,eAAa,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE;YACzH,IAAI,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,cAAc,KAAK,SAAS,EAAE,CAAC;gBAClE,MAAM,KAAK,GAAG,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,cAAc,CAAC,EAAE,KAAK,MAAM,CAAC,EAAE,CAAC,CAAC;gBAC3E,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;gBACxD,mBAAmB,CAAC,SAAS,CAAC,CAAC;YACjC,CAAC;QACH,CAAC,GAAI,CAAC;AACR,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IconButton, useTheme } from '@fluentui/react';\nimport React, { useCallback, useState } from 'react';\nimport { OptionsDevice } from './DevicesButton';\nimport { localVideoCameraCycleButtonStyles } from './styles/VideoGallery.styles';\nimport { useLocale } from '../localization';\n\n/**\n * @public\n */\nexport interface LocalVideoCameraCycleButtonProps {\n  /** Array of cameras available to the user. */\n  cameras?: OptionsDevice[];\n  /** Currently selected camera in the local video stream. */\n  selectedCamera?: OptionsDevice;\n  /** callback function to change video feed. */\n  onSelectCamera?: (device: OptionsDevice) => Promise<void>;\n  /** label for local video camera switcher */\n  label?: string;\n  /** description for local video camera switcher */\n  ariaDescription?: string;\n  /** control to enable large button mode */\n  size?: 'small' | 'large';\n}\n\n/**\n * local video tile camera cycle button - for use on mobile screens only.\n * @internal\n */\nexport const LocalVideoCameraCycleButton = (props: LocalVideoCameraCycleButtonProps): JSX.Element => {\n  const {\n    cameras,\n    selectedCamera,\n    onSelectCamera,\n    label,\n    ariaDescription,\n    size\n  } = props;\n  const theme = useTheme();\n  const [waitForCamera, setWaitForCamera] = useState(false);\n  const onChangeCameraClick = useCallback(async (device: OptionsDevice) => {\n    // Throttle changing camera to prevent too many callbacks\n    if (onSelectCamera) {\n      setWaitForCamera(true);\n      try {\n        await onSelectCamera(device);\n      } finally {\n        setWaitForCamera(false);\n      }\n    }\n  }, [onSelectCamera]);\n  const disabled = !!waitForCamera;\n  const cameraLoadingString = useLocale().strings.cameraButton.tooltipVideoLoadingContent;\n  return <IconButton data-ui-id={'local-camera-switcher-button'} styles={localVideoCameraCycleButtonStyles(theme, size)} disabled={disabled} iconProps={{\n    iconName: 'LocalCameraSwitch'\n  }} ariaLabel={label} ariaDescription={disabled ? cameraLoadingString : ariaDescription} aria-live={'polite'} onClick={() => {\n    if (cameras && cameras.length > 1 && selectedCamera !== undefined) {\n      const index = cameras.findIndex(camera => selectedCamera.id === camera.id);\n      const newCamera = cameras[(index + 1) % cameras.length];\n      onChangeCameraClick(newCamera);\n    }\n  }} />;\n};"]}
+{"version":3,"file":"LocalVideoCameraButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/LocalVideoCameraButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,iCAAiC,EAAE,MAAM,8BAA8B,CAAC;AACjF,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAoB5C;;;GAGG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,KAAuC,EAAe,EAAE;IAClG,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IACxF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,mBAAmB,GAAG,WAAW,CACrC,CAAO,MAAqB,EAAE,EAAE;QAC9B,yDAAyD;QACzD,IAAI,cAAc,EAAE,CAAC;YACnB,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACvB,IAAI,CAAC;gBACH,MAAM,cAAc,CAAC,MAAM,CAAC,CAAC;YAC/B,CAAC;oBAAS,CAAC;gBACT,gBAAgB,CAAC,KAAK,CAAC,CAAC;YAC1B,CAAC;QACH,CAAC;IACH,CAAC,CAAA,EACD,CAAC,cAAc,CAAC,CACjB,CAAC;IAEF,MAAM,QAAQ,GAAG,CAAC,CAAC,aAAa,CAAC;IACjC,MAAM,mBAAmB,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,0BAA0B,CAAC;IAExF,OAAO,CACL,oBAAC,UAAU,kBACG,8BAA8B,EAC1C,MAAM,EAAE,iCAAiC,CAAC,KAAK,EAAE,IAAI,CAAC,EACtD,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,EAAE,QAAQ,EAAE,mBAAmB,EAAE,EAC5C,SAAS,EAAE,KAAK,EAChB,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,eAAe,eACtD,QAAQ,EACnB,OAAO,EAAE,GAAG,EAAE;YACZ,IAAI,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,cAAc,KAAK,SAAS,EAAE,CAAC;gBAClE,MAAM,KAAK,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,cAAc,CAAC,EAAE,KAAK,MAAM,CAAC,EAAE,CAAC,CAAC;gBAC7E,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;gBACxD,mBAAmB,CAAC,SAAS,CAAC,CAAC;YACjC,CAAC;QACH,CAAC,GACD,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IconButton, useTheme } from '@fluentui/react';\nimport React, { useCallback, useState } from 'react';\nimport { OptionsDevice } from './DevicesButton';\nimport { localVideoCameraCycleButtonStyles } from './styles/VideoGallery.styles';\nimport { useLocale } from '../localization';\n\n/**\n * @public\n */\nexport interface LocalVideoCameraCycleButtonProps {\n  /** Array of cameras available to the user. */\n  cameras?: OptionsDevice[];\n  /** Currently selected camera in the local video stream. */\n  selectedCamera?: OptionsDevice;\n  /** callback function to change video feed. */\n  onSelectCamera?: (device: OptionsDevice) => Promise<void>;\n  /** label for local video camera switcher */\n  label?: string;\n  /** description for local video camera switcher */\n  ariaDescription?: string;\n  /** control to enable large button mode */\n  size?: 'small' | 'large';\n}\n\n/**\n * local video tile camera cycle button - for use on mobile screens only.\n * @internal\n */\nexport const LocalVideoCameraCycleButton = (props: LocalVideoCameraCycleButtonProps): JSX.Element => {\n  const { cameras, selectedCamera, onSelectCamera, label, ariaDescription, size } = props;\n  const theme = useTheme();\n\n  const [waitForCamera, setWaitForCamera] = useState(false);\n  const onChangeCameraClick = useCallback(\n    async (device: OptionsDevice) => {\n      // Throttle changing camera to prevent too many callbacks\n      if (onSelectCamera) {\n        setWaitForCamera(true);\n        try {\n          await onSelectCamera(device);\n        } finally {\n          setWaitForCamera(false);\n        }\n      }\n    },\n    [onSelectCamera]\n  );\n\n  const disabled = !!waitForCamera;\n  const cameraLoadingString = useLocale().strings.cameraButton.tooltipVideoLoadingContent;\n\n  return (\n    <IconButton\n      data-ui-id={'local-camera-switcher-button'}\n      styles={localVideoCameraCycleButtonStyles(theme, size)}\n      disabled={disabled}\n      iconProps={{ iconName: 'LocalCameraSwitch' }}\n      ariaLabel={label}\n      ariaDescription={disabled ? cameraLoadingString : ariaDescription}\n      aria-live={'polite'}\n      onClick={() => {\n        if (cameras && cameras.length > 1 && selectedCamera !== undefined) {\n          const index = cameras.findIndex((camera) => selectedCamera.id === camera.id);\n          const newCamera = cameras[(index + 1) % cameras.length];\n          onChangeCameraClick(newCamera);\n        }\n      }}\n    />\n  );\n};\n"]}

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { OnRenderAvatarCallback, VideoStreamOptions, CreateVideoStreamViewResult } from '../types';
+import { Reaction } from '../types';
 import { LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';
 import { VideoTileStylesProps } from './VideoTile';
 import { RaisedHand } from '../types';
@@ -28,5 +29,7 @@ export declare const _LocalVideoTile: React.MemoExoticComponent<(props: {
     styles?: VideoTileStylesProps | undefined;
     personaMinSize?: number | undefined;
     raisedHand?: RaisedHand | undefined;
+    reaction?: Reaction | undefined;
+    isSpotlighted?: boolean | undefined;
 }) => React.JSX.Element>;
 //# sourceMappingURL=LocalVideoTile.d.ts.map

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

@@ -1,12 +1,16 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 import { Stack } from '@fluentui/react';
+/* @conditional-compile-remove(spotlight) */
+import { mergeStyles } from '@fluentui/react';
 import { _formatString } from "../../../acs-ui-common/src";
 import React, { useMemo } from 'react';
 import { LocalVideoCameraCycleButton } from './LocalVideoCameraButton';
 import { StreamMedia } from './StreamMedia';
 import { useLocalVideoStreamLifecycleMaintainer } from './VideoGallery/useVideoStreamLifecycleMaintainer';
 import { VideoTile } from './VideoTile';
+/* @conditional-compile-remove(spotlight) */
+import { useTheme } from '../theming';
 /**
  * A memoized version of VideoTile for rendering local participant.
  *
@@ -15,7 +19,13 @@ import { VideoTile } from './VideoTile';
 export const _LocalVideoTile = React.memo((props) => {
     const { isAvailable, isMuted, onCreateLocalStreamView, onDisposeLocalStreamView, localVideoViewOptions, renderElement, userId, showLabel, displayName, initialsName, onRenderAvatar, showMuteIndicator, styles, showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription, 
     /* @conditional-compile-remove(raise-hand) */
-    raisedHand } = props;
+    raisedHand, 
+    /* @conditional-compile-remove(reaction) */
+    reaction, 
+    /* @conditional-compile-remove(spotlight) */
+    isSpotlighted } = props;
+    /* @conditional-compile-remove(spotlight) */
+    const theme = useTheme();
     const localVideoStreamProps = useMemo(() => ({
         isMirrored: localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.isMirrored,
         isStreamAvailable: isAvailable,
@@ -23,9 +33,24 @@ export const _LocalVideoTile = React.memo((props) => {
         onDisposeLocalStreamView,
         renderElementExists: !!renderElement,
         scalingMode: localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.scalingMode
-    }), [isAvailable, localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.isMirrored, localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.scalingMode, onCreateLocalStreamView, onDisposeLocalStreamView, renderElement]);
+    }), [
+        isAvailable,
+        localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.isMirrored,
+        localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.scalingMode,
+        onCreateLocalStreamView,
+        onDisposeLocalStreamView,
+        renderElement
+    ]);
     // Handle creating, destroying and updating the video stream as necessary
     useLocalVideoStreamLifecycleMaintainer(localVideoStreamProps);
+    /* @conditional-compile-remove(spotlight) */
+    const spotlightBorder = useMemo(() => (React.createElement(Stack, { className: mergeStyles({
+            position: 'absolute',
+            height: '100%',
+            width: '100%',
+            zIndex: 100,
+            border: `0.25rem solid ${theme.palette.black}`
+        }) })), [theme.palette.black]);
     const renderVideoStreamElement = useMemo(() => {
         // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which
         // implies that, after their threshold, all streams have no child (blank video)
@@ -33,18 +58,39 @@ export const _LocalVideoTile = React.memo((props) => {
             // Returning `undefined` results in the placeholder with avatar being shown
             return undefined;
         }
-        return React.createElement(React.Fragment, null,
+        return (React.createElement(React.Fragment, null,
             React.createElement(FloatingLocalCameraCycleButton, { showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview !== null && showCameraSwitcherInLocalPreview !== void 0 ? showCameraSwitcherInLocalPreview : false, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: localVideoCameraSwitcherLabel, localVideoSelectedDescription: localVideoSelectedDescription }),
-            React.createElement(StreamMedia, { videoStreamElement: renderElement, isMirrored: true }));
-    }, [localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription, renderElement, showCameraSwitcherInLocalPreview]);
-    return React.createElement(VideoTile, { key: userId !== null && userId !== void 0 ? userId : 'local-video-tile', userId: userId, renderElement: renderVideoStreamElement, showLabel: showLabel, displayName: displayName, initialsName: initialsName, styles: styles, onRenderPlaceholder: onRenderAvatar, isMuted: isMuted, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, 
-        /* @conditional-compile-remove(raise-hand) */ raisedHand: raisedHand });
+            React.createElement(StreamMedia, { videoStreamElement: renderElement, isMirrored: true }), /* @conditional-compile-remove(spotlight) */
+            isSpotlighted && spotlightBorder));
+    }, [
+        localVideoCameraCycleButtonProps,
+        localVideoCameraSwitcherLabel,
+        localVideoSelectedDescription,
+        renderElement,
+        showCameraSwitcherInLocalPreview,
+        /* @conditional-compile-remove(spotlight) */ isSpotlighted,
+        /* @conditional-compile-remove(spotlight) */ spotlightBorder
+    ]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(VideoTile, { key: userId !== null && userId !== void 0 ? userId : 'local-video-tile', userId: userId, renderElement: renderVideoStreamElement, showLabel: showLabel, displayName: displayName, initialsName: initialsName, styles: styles, onRenderPlaceholder: onRenderAvatar, isMuted: isMuted, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, 
+            /* @conditional-compile-remove(raise-hand) */
+            raisedHand: raisedHand, 
+            /* @conditional-compile-remove(reaction) */
+            reaction: reaction, 
+            /* @conditional-compile-remove(spotlight) */
+            isSpotlighted: isSpotlighted }), /* @conditional-compile-remove(spotlight) */
+        isSpotlighted && spotlightBorder));
 });
 const FloatingLocalCameraCycleButton = (props) => {
     const { showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription } = props;
-    const ariaDescription = (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.selectedCamera) && localVideoSelectedDescription && _formatString(localVideoSelectedDescription, {
-        cameraName: localVideoCameraCycleButtonProps.selectedCamera.name
-    });
-    return React.createElement(Stack, { horizontalAlign: "end" }, showCameraSwitcherInLocalPreview && (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.cameras) !== undefined && (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.selectedCamera) !== undefined && (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.onSelectCamera) !== undefined && React.createElement(LocalVideoCameraCycleButton, { cameras: localVideoCameraCycleButtonProps.cameras, selectedCamera: localVideoCameraCycleButtonProps.selectedCamera, onSelectCamera: localVideoCameraCycleButtonProps.onSelectCamera, label: localVideoCameraSwitcherLabel, ariaDescription: ariaDescription }));
+    const ariaDescription = (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.selectedCamera) &&
+        localVideoSelectedDescription &&
+        _formatString(localVideoSelectedDescription, {
+            cameraName: localVideoCameraCycleButtonProps.selectedCamera.name
+        });
+    return (React.createElement(Stack, { horizontalAlign: "end" }, showCameraSwitcherInLocalPreview &&
+        (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.cameras) !== undefined &&
+        (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.selectedCamera) !== undefined &&
+        (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.onSelectCamera) !== undefined && (React.createElement(LocalVideoCameraCycleButton, { cameras: localVideoCameraCycleButtonProps.cameras, selectedCamera: localVideoCameraCycleButtonProps.selectedCamera, onSelectCamera: localVideoCameraCycleButtonProps.onSelectCamera, label: localVideoCameraSwitcherLabel, ariaDescription: ariaDescription }))));
 };
 //# sourceMappingURL=LocalVideoTile.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LocalVideoTile.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/LocalVideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Stack } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useMemo } from 'react';\nimport { OnRenderAvatarCallback, VideoStreamOptions, CreateVideoStreamViewResult } from '../types';\nimport { LocalVideoCameraCycleButton, LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\nimport { StreamMedia } from './StreamMedia';\nimport { useLocalVideoStreamLifecycleMaintainer, LocalVideoStreamLifecycleMaintainerProps } from './VideoGallery/useVideoStreamLifecycleMaintainer';\nimport { VideoTile, VideoTileStylesProps } from './VideoTile';\n/* @conditional-compile-remove(raise-hand) */\nimport { RaisedHand } from '../types';\n/**\n * A memoized version of VideoTile for rendering local participant.\n *\n * @internal\n */\nexport const _LocalVideoTile = React.memo((props: {\n  userId?: string;\n  onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  onDisposeLocalStreamView?: () => void;\n  isAvailable?: boolean;\n  isMuted?: boolean;\n  renderElement?: HTMLElement;\n  displayName?: string;\n  initialsName?: string;\n  localVideoViewOptions?: VideoStreamOptions;\n  onRenderAvatar?: OnRenderAvatarCallback;\n  showLabel: boolean;\n  showMuteIndicator?: boolean;\n  showCameraSwitcherInLocalPreview?: boolean;\n  localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n  localVideoCameraSwitcherLabel?: string;\n  localVideoSelectedDescription?: string;\n  styles?: VideoTileStylesProps;\n  personaMinSize?: number;\n  /* @conditional-compile-remove(raise-hand) */\n  raisedHand?: RaisedHand;\n}) => {\n  const {\n    isAvailable,\n    isMuted,\n    onCreateLocalStreamView,\n    onDisposeLocalStreamView,\n    localVideoViewOptions,\n    renderElement,\n    userId,\n    showLabel,\n    displayName,\n    initialsName,\n    onRenderAvatar,\n    showMuteIndicator,\n    styles,\n    showCameraSwitcherInLocalPreview,\n    localVideoCameraCycleButtonProps,\n    localVideoCameraSwitcherLabel,\n    localVideoSelectedDescription,\n    /* @conditional-compile-remove(raise-hand) */\n    raisedHand\n  } = props;\n  const localVideoStreamProps: LocalVideoStreamLifecycleMaintainerProps = useMemo(() => ({\n    isMirrored: localVideoViewOptions?.isMirrored,\n    isStreamAvailable: isAvailable,\n    onCreateLocalStreamView,\n    onDisposeLocalStreamView,\n    renderElementExists: !!renderElement,\n    scalingMode: localVideoViewOptions?.scalingMode\n  }), [isAvailable, localVideoViewOptions?.isMirrored, localVideoViewOptions?.scalingMode, onCreateLocalStreamView, onDisposeLocalStreamView, renderElement]);\n\n  // Handle creating, destroying and updating the video stream as necessary\n  useLocalVideoStreamLifecycleMaintainer(localVideoStreamProps);\n  const renderVideoStreamElement = useMemo(() => {\n    // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which\n    // implies that, after their threshold, all streams have no child (blank video)\n    if (!renderElement || !renderElement.childElementCount) {\n      // Returning `undefined` results in the placeholder with avatar being shown\n      return undefined;\n    }\n    return <>\n          <FloatingLocalCameraCycleButton showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview ?? false} localVideoCameraCycleButtonProps={localVideoCameraCycleButtonProps} localVideoCameraSwitcherLabel={localVideoCameraSwitcherLabel} localVideoSelectedDescription={localVideoSelectedDescription} />\n          <StreamMedia videoStreamElement={renderElement} isMirrored={true} />\n        </>;\n  }, [localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription, renderElement, showCameraSwitcherInLocalPreview]);\n  return <VideoTile key={userId ?? 'local-video-tile'} userId={userId} renderElement={renderVideoStreamElement} showLabel={showLabel} displayName={displayName} initialsName={initialsName} styles={styles} onRenderPlaceholder={onRenderAvatar} isMuted={isMuted} showMuteIndicator={showMuteIndicator} personaMinSize={props.personaMinSize}\n  /* @conditional-compile-remove(raise-hand) */ raisedHand={raisedHand} />;\n});\nconst FloatingLocalCameraCycleButton = (props: {\n  showCameraSwitcherInLocalPreview: boolean;\n  localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n  localVideoCameraSwitcherLabel?: string;\n  localVideoSelectedDescription?: string;\n}): JSX.Element => {\n  const {\n    showCameraSwitcherInLocalPreview,\n    localVideoCameraCycleButtonProps,\n    localVideoCameraSwitcherLabel,\n    localVideoSelectedDescription\n  } = props;\n  const ariaDescription = localVideoCameraCycleButtonProps?.selectedCamera && localVideoSelectedDescription && _formatString(localVideoSelectedDescription, {\n    cameraName: localVideoCameraCycleButtonProps.selectedCamera.name\n  });\n  return <Stack horizontalAlign=\"end\">\n      {showCameraSwitcherInLocalPreview && localVideoCameraCycleButtonProps?.cameras !== undefined && localVideoCameraCycleButtonProps?.selectedCamera !== undefined && localVideoCameraCycleButtonProps?.onSelectCamera !== undefined && <LocalVideoCameraCycleButton cameras={localVideoCameraCycleButtonProps.cameras} selectedCamera={localVideoCameraCycleButtonProps.selectedCamera} onSelectCamera={localVideoCameraCycleButtonProps.onSelectCamera} label={localVideoCameraSwitcherLabel} ariaDescription={ariaDescription} />}\n    </Stack>;\n};"]}
+{"version":3,"file":"LocalVideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/LocalVideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Stack } from '@fluentui/react';\n/* @conditional-compile-remove(spotlight) */\nimport { mergeStyles } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useMemo } from 'react';\nimport { OnRenderAvatarCallback, VideoStreamOptions, CreateVideoStreamViewResult } from '../types';\n/* @conditional-compile-remove(reaction) */\nimport { Reaction } from '../types';\nimport { LocalVideoCameraCycleButton, LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\nimport { StreamMedia } from './StreamMedia';\nimport {\n  useLocalVideoStreamLifecycleMaintainer,\n  LocalVideoStreamLifecycleMaintainerProps\n} from './VideoGallery/useVideoStreamLifecycleMaintainer';\nimport { VideoTile, VideoTileStylesProps } from './VideoTile';\n/* @conditional-compile-remove(raise-hand) */\nimport { RaisedHand } from '../types';\n/* @conditional-compile-remove(spotlight) */\nimport { useTheme } from '../theming';\n/**\n * A memoized version of VideoTile for rendering local participant.\n *\n * @internal\n */\nexport const _LocalVideoTile = React.memo(\n  (props: {\n    userId?: string;\n    onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n    onDisposeLocalStreamView?: () => void;\n    isAvailable?: boolean;\n    isMuted?: boolean;\n    renderElement?: HTMLElement;\n    displayName?: string;\n    initialsName?: string;\n    localVideoViewOptions?: VideoStreamOptions;\n    onRenderAvatar?: OnRenderAvatarCallback;\n    showLabel: boolean;\n    showMuteIndicator?: boolean;\n    showCameraSwitcherInLocalPreview?: boolean;\n    localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n    localVideoCameraSwitcherLabel?: string;\n    localVideoSelectedDescription?: string;\n    styles?: VideoTileStylesProps;\n    personaMinSize?: number;\n    /* @conditional-compile-remove(raise-hand) */\n    raisedHand?: RaisedHand;\n    /* @conditional-compile-remove(reaction) */\n    reaction?: Reaction;\n    /* @conditional-compile-remove(spotlight) */\n    isSpotlighted?: boolean;\n  }) => {\n    const {\n      isAvailable,\n      isMuted,\n      onCreateLocalStreamView,\n      onDisposeLocalStreamView,\n      localVideoViewOptions,\n      renderElement,\n      userId,\n      showLabel,\n      displayName,\n      initialsName,\n      onRenderAvatar,\n      showMuteIndicator,\n      styles,\n      showCameraSwitcherInLocalPreview,\n      localVideoCameraCycleButtonProps,\n      localVideoCameraSwitcherLabel,\n      localVideoSelectedDescription,\n      /* @conditional-compile-remove(raise-hand) */\n      raisedHand,\n      /* @conditional-compile-remove(reaction) */\n      reaction,\n      /* @conditional-compile-remove(spotlight) */\n      isSpotlighted\n    } = props;\n\n    /* @conditional-compile-remove(spotlight) */\n    const theme = useTheme();\n\n    const localVideoStreamProps: LocalVideoStreamLifecycleMaintainerProps = useMemo(\n      () => ({\n        isMirrored: localVideoViewOptions?.isMirrored,\n        isStreamAvailable: isAvailable,\n        onCreateLocalStreamView,\n        onDisposeLocalStreamView,\n        renderElementExists: !!renderElement,\n        scalingMode: localVideoViewOptions?.scalingMode\n      }),\n      [\n        isAvailable,\n        localVideoViewOptions?.isMirrored,\n        localVideoViewOptions?.scalingMode,\n        onCreateLocalStreamView,\n        onDisposeLocalStreamView,\n        renderElement\n      ]\n    );\n\n    // Handle creating, destroying and updating the video stream as necessary\n    useLocalVideoStreamLifecycleMaintainer(localVideoStreamProps);\n\n    /* @conditional-compile-remove(spotlight) */\n    const spotlightBorder = useMemo(\n      () => (\n        <Stack\n          className={mergeStyles({\n            position: 'absolute',\n            height: '100%',\n            width: '100%',\n            zIndex: 100,\n            border: `0.25rem solid ${theme.palette.black}`\n          })}\n        />\n      ),\n      [theme.palette.black]\n    );\n\n    const renderVideoStreamElement = useMemo(() => {\n      // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which\n      // implies that, after their threshold, all streams have no child (blank video)\n      if (!renderElement || !renderElement.childElementCount) {\n        // Returning `undefined` results in the placeholder with avatar being shown\n        return undefined;\n      }\n\n      return (\n        <>\n          <FloatingLocalCameraCycleButton\n            showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview ?? false}\n            localVideoCameraCycleButtonProps={localVideoCameraCycleButtonProps}\n            localVideoCameraSwitcherLabel={localVideoCameraSwitcherLabel}\n            localVideoSelectedDescription={localVideoSelectedDescription}\n          />\n          <StreamMedia videoStreamElement={renderElement} isMirrored={true} />\n          {/* @conditional-compile-remove(spotlight) */ isSpotlighted && spotlightBorder}\n        </>\n      );\n    }, [\n      localVideoCameraCycleButtonProps,\n      localVideoCameraSwitcherLabel,\n      localVideoSelectedDescription,\n      renderElement,\n      showCameraSwitcherInLocalPreview,\n      /* @conditional-compile-remove(spotlight) */ isSpotlighted,\n      /* @conditional-compile-remove(spotlight) */ spotlightBorder\n    ]);\n\n    return (\n      <>\n        <VideoTile\n          key={userId ?? 'local-video-tile'}\n          userId={userId}\n          renderElement={renderVideoStreamElement}\n          showLabel={showLabel}\n          displayName={displayName}\n          initialsName={initialsName}\n          styles={styles}\n          onRenderPlaceholder={onRenderAvatar}\n          isMuted={isMuted}\n          showMuteIndicator={showMuteIndicator}\n          personaMinSize={props.personaMinSize}\n          /* @conditional-compile-remove(raise-hand) */\n          raisedHand={raisedHand}\n          /* @conditional-compile-remove(reaction) */\n          reaction={reaction}\n          /* @conditional-compile-remove(spotlight) */\n          isSpotlighted={isSpotlighted}\n        />\n        {/* @conditional-compile-remove(spotlight) */ isSpotlighted && spotlightBorder}\n      </>\n    );\n  }\n);\n\nconst FloatingLocalCameraCycleButton = (props: {\n  showCameraSwitcherInLocalPreview: boolean;\n  localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n  localVideoCameraSwitcherLabel?: string;\n  localVideoSelectedDescription?: string;\n}): JSX.Element => {\n  const {\n    showCameraSwitcherInLocalPreview,\n    localVideoCameraCycleButtonProps,\n    localVideoCameraSwitcherLabel,\n    localVideoSelectedDescription\n  } = props;\n  const ariaDescription =\n    localVideoCameraCycleButtonProps?.selectedCamera &&\n    localVideoSelectedDescription &&\n    _formatString(localVideoSelectedDescription, {\n      cameraName: localVideoCameraCycleButtonProps.selectedCamera.name\n    });\n  return (\n    <Stack horizontalAlign=\"end\">\n      {showCameraSwitcherInLocalPreview &&\n        localVideoCameraCycleButtonProps?.cameras !== undefined &&\n        localVideoCameraCycleButtonProps?.selectedCamera !== undefined &&\n        localVideoCameraCycleButtonProps?.onSelectCamera !== undefined && (\n          <LocalVideoCameraCycleButton\n            cameras={localVideoCameraCycleButtonProps.cameras}\n            selectedCamera={localVideoCameraCycleButtonProps.selectedCamera}\n            onSelectCamera={localVideoCameraCycleButtonProps.onSelectCamera}\n            label={localVideoCameraSwitcherLabel}\n            ariaDescription={ariaDescription}\n          />\n        )}\n    </Stack>\n  );\n};\n"]}

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

@@ -0,0 +1,121 @@
+import React from 'react';
+/**
+ * Props for {@link _MentionPopover}.
+ *
+ * @internal
+ */
+export interface _MentionPopoverProps {
+    /**
+     * Array of mention suggestions used to populate the suggestion list
+     */
+    suggestions: Mention[];
+    /**
+     * Index of the currently focused suggestion, if any
+     */
+    activeSuggestionIndex?: number;
+    /**
+     * Optional string used as mention popover's title.
+     * @defaultValue `Suggestions`
+     */
+    title?: string;
+    /**
+     * Element to anchor the popover to.
+     */
+    target: React.RefObject<Element>;
+    /**
+     * When rendering the popover, where to position it relative to the target.
+     */
+    targetPositionOffset?: {
+        top: number;
+        left: number;
+    };
+    /**
+     * Where to display the suggestions relative to the target.
+     * @defaultValue `above`
+     */
+    location?: 'above' | 'below';
+    /**
+     * Callback called when a mention suggestion is selected.
+     */
+    onSuggestionSelected: (suggestion: Mention) => void;
+    /**
+     * Callback to invoke when the popover is dismissed
+     */
+    onDismiss?: () => void;
+    /**
+     * Optional callback to render an item of the mention suggestions list.
+     */
+    onRenderSuggestionItem?: (suggestion: Mention, onSuggestionSelected: (suggestion: Mention) => void, isActive: boolean) => JSX.Element;
+}
+/**
+ * Options to lookup suggestions in the mention scenario.
+ *
+ * @beta
+ */
+export interface MentionLookupOptions {
+    /**
+     * Optional string to set trigger keyword for mention a specific participant.
+     *
+     * @defaultValue `@`
+     */
+    trigger?: string;
+    /**
+     * Optional callback to fetch a list of mention suggestions base on the query.
+     */
+    onQueryUpdated: (query: string) => Promise<Mention[]>;
+    /**
+     * Optional callback to render an item of the mention suggestions list.
+     */
+    onRenderSuggestionItem?: (suggestion: Mention, onSuggestionSelected: (suggestion: Mention) => void) => JSX.Element;
+}
+/**
+ * Options to display suggestions in the mention scenario.
+ *
+ * @beta
+ */
+export interface MentionDisplayOptions {
+    /**
+     * Optional callback for customizing the mention renderer in a message thread.
+     */
+    onRenderMention?: (mention: Mention, defaultOnRender: (mention: Mention) => JSX.Element) => JSX.Element;
+}
+/**
+ * Options to lookup suggestions and display mentions in the mention scenario.
+ *
+ * @beta
+ */
+export type MentionOptions = {
+    lookupOptions?: MentionLookupOptions;
+    displayOptions?: MentionDisplayOptions;
+};
+/**
+ * Mention's state, as reflected in the UI.
+ *
+ * @beta
+ */
+export interface Mention {
+    /** ID of a mention */
+    id: string;
+    /** Display text of a mention */
+    displayText: string;
+    /** Optional React element to render an item icon of a mention suggestion */
+    icon?: JSX.Element;
+}
+/**
+ * Strings of {@link _MentionPopover} that can be overridden.
+ *
+ * @beta
+ */
+export interface MentionPopoverStrings {
+    /**
+     * Header text for MentionPopover
+     */
+    mentionPopoverHeader: string;
+}
+/**
+ * Component to render a pop-up of mention suggestions.
+ *
+ * @internal
+ */
+export declare const _MentionPopover: (props: _MentionPopoverProps) => JSX.Element;
+//# sourceMappingURL=MentionPopover.d.ts.map

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

@@ -0,0 +1,126 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React, { useEffect, useRef, useState, useCallback } from 'react';
+import { Persona, PersonaSize, Stack, mergeStyles, useTheme } from '@fluentui/react';
+import { mergeClasses } from '@fluentui/react-components';
+import { mentionPopoverContainerStyle, headerStyleThemed, suggestionItemStackStyle, suggestionItemWrapperStyle, useSuggestionListStyle } from './styles/MentionPopover.style';
+/* @conditional-compile-remove(mention) */
+import { useIdentifiers } from '../identifiers';
+import { useLocale } from '../localization';
+import { useDefaultStackStyles } from './styles/Stack.style';
+/**
+ * Component to render a pop-up of mention suggestions.
+ *
+ * @internal
+ */
+export const _MentionPopover = (props) => {
+    const { suggestions, activeSuggestionIndex, title, target, targetPositionOffset, onRenderSuggestionItem, onSuggestionSelected, onDismiss, location } = props;
+    const theme = useTheme();
+    /* @conditional-compile-remove(mention) */
+    const ids = useIdentifiers();
+    const localeStrings = useLocale().strings;
+    const popoverRef = useRef();
+    const suggestionsListRef = useRef(null);
+    const [position, setPosition] = useState();
+    const [hoveredSuggestion, setHoveredSuggestion] = useState(undefined);
+    const suggestionListStyle = useSuggestionListStyle();
+    const defaultStackStyles = useDefaultStackStyles();
+    const dismissPopoverWhenClickingOutside = useCallback((e) => {
+        const target = e.target;
+        if (popoverRef.current && !popoverRef.current.contains(target)) {
+            onDismiss && onDismiss();
+        }
+    }, [onDismiss]);
+    useEffect(() => {
+        if (suggestionsListRef.current && activeSuggestionIndex !== undefined && activeSuggestionIndex >= 0) {
+            const selectedItem = suggestionsListRef.current.children[activeSuggestionIndex];
+            if (selectedItem) {
+                selectedItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+            }
+        }
+    }, [activeSuggestionIndex]);
+    useEffect(() => {
+        window && window.addEventListener('click', dismissPopoverWhenClickingOutside);
+        return () => {
+            window && window.removeEventListener('click', dismissPopoverWhenClickingOutside);
+        };
+    }, [dismissPopoverWhenClickingOutside]);
+    // Determine popover position
+    useEffect(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const rect = (_a = target === null || target === void 0 ? void 0 : target.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        const maxWidth = 200;
+        const finalPosition = { maxWidth };
+        // Figure out whether it will fit horizontally
+        const leftOffset = (_b = targetPositionOffset === null || targetPositionOffset === void 0 ? void 0 : targetPositionOffset.left) !== null && _b !== void 0 ? _b : 0;
+        if (leftOffset + maxWidth > ((_c = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _c !== void 0 ? _c : 0)) {
+            finalPosition.right = ((_d = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _d !== void 0 ? _d : 0) - leftOffset;
+        }
+        else {
+            finalPosition.left = leftOffset;
+        }
+        // Offset between cursor and mention popover
+        const verticalOffset = 4;
+        if (location === 'below') {
+            finalPosition.top = ((_e = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _e !== void 0 ? _e : 0) + ((_f = targetPositionOffset === null || targetPositionOffset === void 0 ? void 0 : targetPositionOffset.top) !== null && _f !== void 0 ? _f : 0) + verticalOffset;
+        }
+        else {
+            // (location === 'above')
+            finalPosition.bottom = ((_g = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _g !== void 0 ? _g : 0) - ((_h = targetPositionOffset === null || targetPositionOffset === void 0 ? void 0 : targetPositionOffset.top) !== null && _h !== void 0 ? _h : 0) + verticalOffset;
+        }
+        setPosition(finalPosition);
+    }, [location, target, targetPositionOffset]);
+    const handleOnKeyDown = useCallback((e) => {
+        switch (e.key) {
+            case 'Escape':
+                onDismiss && onDismiss();
+                break;
+            default:
+                break;
+        }
+    }, [onDismiss]);
+    const personaRenderer = useCallback((displayName) => {
+        const avatarOptions = {
+            text: displayName.trim(),
+            size: PersonaSize.size24,
+            initialsColor: theme.palette.neutralLight,
+            initialsTextColor: theme.palette.neutralSecondary,
+            showOverflowTooltip: false,
+            showUnknownPersonaCoin: false
+        };
+        return React.createElement(Persona, Object.assign({}, avatarOptions));
+    }, [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);
+            }, className: suggestionItemWrapperStyle(theme) },
+            React.createElement(Stack, { horizontal: true, className: suggestionItemStackStyle(theme, (hoveredSuggestion === null || hoveredSuggestion === void 0 ? void 0 : hoveredSuggestion.id) === suggestion.id, active) }, personaRenderer(suggestion.displayText))));
+    }, [
+        handleOnKeyDown,
+        theme,
+        /* @conditional-compile-remove(mention) */
+        ids,
+        hoveredSuggestion,
+        personaRenderer
+    ]);
+    const getHeaderTitle = useCallback(() => {
+        if (title) {
+            return title;
+        }
+        /* @conditional-compile-remove(mention) */
+        return localeStrings.mentionPopover.mentionPopoverHeader;
+        return '';
+    }, [localeStrings, title]);
+    return (React.createElement("div", { ref: popoverRef }, position && (React.createElement(Stack, { "data-testid": 'mention-suggestion-list-container', className: mergeStyles({
+            maxHeight: 212,
+            maxWidth: position.maxWidth
+        }, mentionPopoverContainerStyle(theme), Object.assign(Object.assign({}, position), { position: 'absolute' })) },
+        React.createElement(Stack.Item, { styles: headerStyleThemed(theme), "aria-label": title }, getHeaderTitle()),
+        React.createElement("div", { className: mergeClasses(defaultStackStyles.root, suggestionListStyle.root), "data-ui-id": ids.mentionSuggestionList, ref: suggestionsListRef }, suggestions.map((suggestion, index) => {
+            const active = index === activeSuggestionIndex;
+            return onRenderSuggestionItem
+                ? onRenderSuggestionItem(suggestion, onSuggestionSelected, active)
+                : defaultOnRenderSuggestionItem(suggestion, onSuggestionSelected, active);
+        }))))));
+};
+//# sourceMappingURL=MentionPopover.js.map