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

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

@@ -1,71 +0,0 @@
-import { SyntheticEvent } from 'react';
-/**
- * Props for {@link ImageGallery}.
- *
- * @beta
- */
-export interface ImageGalleryImageProps {
-    /** Image Url used to display the image in a large scale. */
-    imageUrl: string;
-    /** String used as a file name when downloading this image to user's local device. */
-    downloadFilename: string;
-    /** Optional string used as a alt text for the image. @default 'image' */
-    altText?: string;
-    /** Optional string used as the title of the image and displayed on the top left corner of the ImageGallery. */
-    title?: string;
-    /** Optional JSX element used as a title icon and displayed to the left of the title element. */
-    titleIcon?: JSX.Element;
-}
-/**
- * Props for {@link ImageGallery}.
- *
- * @beta
- */
-export interface ImageGalleryProps {
-    /**
-     * Boolean that controls whether the modal is displayed.
-     */
-    isOpen: boolean;
-    /**
-     * Array of images used to populate the ImageGallery
-     */
-    images: Array<ImageGalleryImageProps>;
-    /**
-     * Callback to invoke when the ImageGallery modal is dismissed
-     */
-    onDismiss: () => void;
-    /**
-     * Callback called when the download button is clicked.
-     */
-    onImageDownloadButtonClicked: (imageUrl: string, downloadFilename: string) => void;
-    /**
-     * Callback called when there's an error loading the image.
-     */
-    onError?: (event: SyntheticEvent<HTMLImageElement, Event>) => void;
-    /**
-     * Indicating which index of the images array to start with.
-     */
-    startIndex?: number;
-}
-/**
- * Strings of {@link ImageGallery} that can be overridden.
- *
- * @beta
- */
-export interface ImageGalleryStrings {
-    /**
-     * Download button label for ImageGallery
-     */
-    downloadButtonLabel: string;
-    /**
-     * Dismiss button aria label for ImageGallery
-     */
-    dismissButtonAriaLabel: string;
-}
-/**
- * Component to render a fullscreen modal for a selected image.
- *
- * @beta
- */
-export declare const ImageGallery: (props: ImageGalleryProps) => JSX.Element;
-//# sourceMappingURL=ImageGallery.d.ts.map

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

@@ -1,56 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-/* @conditional-compile-remove(image-gallery) */
-import { DefaultButton, Icon, IconButton, Modal, Stack, mergeStyles } from '@fluentui/react';
-/* @conditional-compile-remove(image-gallery) */
-import React, { useState } from 'react';
-/* @conditional-compile-remove(image-gallery) */
-import { bodyContainer, brokenImageStyle, cancelIcon, closeButtonStyles, controlBarContainerStyle, downloadButtonStyle, downloadIcon, downloadIconStyle, focusTrapZoneStyle, headerStyle, normalImageStyle, overlayStyles, scrollableContentStyle, smallDownloadButtonContainerStyle, titleBarContainerStyle, titleStyle } from './styles/ImageGallery.style';
-/* @conditional-compile-remove(image-gallery) */
-import { useTheme } from '../theming/FluentThemeProvider';
-/* @conditional-compile-remove(image-gallery) */
-import { useLocale } from '../localization';
-/* @conditional-compile-remove(image-gallery) */
-/**
- * Component to render a fullscreen modal for a selected image.
- *
- * @beta
- */
-export const ImageGallery = (props) => {
-    const { isOpen, images, onImageDownloadButtonClicked, onDismiss, onError, startIndex = 0 } = props;
-    const theme = useTheme();
-    /* @conditional-compile-remove(image-gallery) */
-    const localeStrings = useLocale().strings.imageGallery;
-    const [isImageLoaded, setIsImageLoaded] = useState(true);
-    const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(theme);
-    const image = images[startIndex];
-    const renderHeaderBar = () => {
-        return React.createElement(Stack, { className: mergeStyles(headerStyle) },
-            React.createElement(Stack, { className: mergeStyles(titleBarContainerStyle) }, image === null || image === void 0 ? void 0 :
-                image.titleIcon,
-                React.createElement(Stack.Item, { className: mergeStyles(titleStyle(theme)), "aria-label": image === null || image === void 0 ? void 0 : image.title }, image === null || image === void 0 ? void 0 : image.title)),
-            React.createElement(Stack, { className: mergeStyles(controlBarContainerStyle) },
-                React.createElement(DefaultButton, { className: mergeStyles(downloadButtonStyle(theme)), 
-                    /* @conditional-compile-remove(image-gallery) */ text: localeStrings.downloadButtonLabel, onClick: () => onImageDownloadButtonClicked((image === null || image === void 0 ? void 0 : image.imageUrl) || '', (image === null || image === void 0 ? void 0 : image.downloadFilename) || 'image'), onRenderIcon: () => React.createElement(Icon, { iconName: downloadIcon.iconName, className: mergeStyles(downloadIconStyle) }), "aria-live": 'polite', "aria-label": localeStrings.downloadButtonLabel }),
-                React.createElement(IconButton, { iconProps: downloadIcon, className: mergeStyles(smallDownloadButtonContainerStyle(theme)), onClick: () => onImageDownloadButtonClicked(image === null || image === void 0 ? void 0 : image.imageUrl, image === null || image === void 0 ? void 0 : image.downloadFilename), "aria-label": localeStrings.downloadButtonLabel, "aria-live": 'polite' }),
-                React.createElement(IconButton, { iconProps: cancelIcon, className: mergeStyles(closeButtonStyles(theme)), onClick: onDismiss, 
-                    /* @conditional-compile-remove(image-gallery) */ ariaLabel: localeStrings.dismissButtonAriaLabel, "aria-live": 'polite' })));
-    };
-    const renderBodyWithLightDismiss = () => {
-        return React.createElement(Stack, { className: mergeStyles(bodyContainer), onClick: () => props.onDismiss() }, images.length > startIndex && React.createElement("img", { src: image === null || image === void 0 ? void 0 : image.imageUrl, className: mergeStyles(imageStyle), alt: (image === null || image === void 0 ? void 0 : image.altText) || 'image', "aria-label": 'image-gallery-main-image', "aria-live": 'polite', onError: event => {
-                setIsImageLoaded(false);
-                onError && onError(event);
-            }, onClick: event => event.stopPropagation(), onDoubleClick: event => {
-                event.persist();
-            } }));
-    };
-    return React.createElement(Modal, { titleAriaId: image === null || image === void 0 ? void 0 : image.title, isOpen: isOpen, onDismiss: onDismiss, overlay: {
-            styles: Object.assign({}, overlayStyles(theme))
-        }, styles: {
-            main: focusTrapZoneStyle,
-            scrollableContent: scrollableContentStyle
-        }, isDarkOverlay: true },
-        renderHeaderBar(),
-        renderBodyWithLightDismiss());
-};
-//# sourceMappingURL=ImageGallery.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ImageGallery.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ImageGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(image-gallery) */\nimport { DefaultButton, Icon, IconButton, Modal, Stack, mergeStyles } from '@fluentui/react';\n/* @conditional-compile-remove(image-gallery) */\nimport React, { SyntheticEvent, useState } from 'react';\n/* @conditional-compile-remove(image-gallery) */\nimport { bodyContainer, brokenImageStyle, cancelIcon, closeButtonStyles, controlBarContainerStyle, downloadButtonStyle, downloadIcon, downloadIconStyle, focusTrapZoneStyle, headerStyle, normalImageStyle, overlayStyles, scrollableContentStyle, smallDownloadButtonContainerStyle, titleBarContainerStyle, titleStyle } from './styles/ImageGallery.style';\n/* @conditional-compile-remove(image-gallery) */\nimport { useTheme } from '../theming/FluentThemeProvider';\n/* @conditional-compile-remove(image-gallery) */\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(image-gallery) */\nimport { ChatTheme } from '../theming';\n/**\n * Props for {@link ImageGallery}.\n *\n * @beta\n */\nexport interface ImageGalleryImageProps {\n  /** Image Url used to display the image in a large scale. */\n  imageUrl: string;\n  /** String used as a file name when downloading this image to user's local device. */\n  downloadFilename: string;\n  /** Optional string used as a alt text for the image. @default 'image' */\n  altText?: string;\n  /** Optional string used as the title of the image and displayed on the top left corner of the ImageGallery. */\n  title?: string;\n  /** Optional JSX element used as a title icon and displayed to the left of the title element. */\n  titleIcon?: JSX.Element;\n}\n/* @conditional-compile-remove(image-gallery) */\n/**\n * Props for {@link ImageGallery}.\n *\n * @beta\n */\nexport interface ImageGalleryProps {\n  /**\n   * Boolean that controls whether the modal is displayed.\n   */\n  isOpen: boolean;\n  /**\n   * Array of images used to populate the ImageGallery\n   */\n  images: Array<ImageGalleryImageProps>;\n  /**\n   * Callback to invoke when the ImageGallery modal is dismissed\n   */\n  onDismiss: () => void;\n  /**\n   * Callback called when the download button is clicked.\n   */\n  onImageDownloadButtonClicked: (imageUrl: string, downloadFilename: string) => void;\n  /**\n   * Callback called when there's an error loading the image.\n   */\n  onError?: (event: SyntheticEvent<HTMLImageElement, Event>) => void;\n  /**\n   * Indicating which index of the images array to start with.\n   */\n  startIndex?: number;\n}\n/* @conditional-compile-remove(image-gallery) */\n/**\n * Strings of {@link ImageGallery} that can be overridden.\n *\n * @beta\n */\nexport interface ImageGalleryStrings {\n  /**\n   * Download button label for ImageGallery\n   */\n  downloadButtonLabel: string;\n  /**\n   * Dismiss button aria label for ImageGallery\n   */\n  dismissButtonAriaLabel: string;\n}\n/* @conditional-compile-remove(image-gallery) */\n/**\n * Component to render a fullscreen modal for a selected image.\n *\n * @beta\n */\nexport const ImageGallery = (props: ImageGalleryProps): JSX.Element => {\n  const {\n    isOpen,\n    images,\n    onImageDownloadButtonClicked,\n    onDismiss,\n    onError,\n    startIndex = 0\n  } = props;\n  const theme = ((useTheme() as unknown) as ChatTheme);\n\n  /* @conditional-compile-remove(image-gallery) */\n  const localeStrings = useLocale().strings.imageGallery;\n  const [isImageLoaded, setIsImageLoaded] = useState<boolean>(true);\n  const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(theme);\n  const image = images[startIndex];\n  const renderHeaderBar = (): JSX.Element => {\n    return <Stack className={mergeStyles(headerStyle)}>\n        <Stack className={mergeStyles(titleBarContainerStyle)}>\n          {image?.titleIcon}\n          <Stack.Item className={mergeStyles(titleStyle(theme))} aria-label={image?.title}>\n            {image?.title}\n          </Stack.Item>\n        </Stack>\n        <Stack className={mergeStyles(controlBarContainerStyle)}>\n          <DefaultButton className={mergeStyles(downloadButtonStyle(theme))}\n        /* @conditional-compile-remove(image-gallery) */ text={localeStrings.downloadButtonLabel} onClick={() => onImageDownloadButtonClicked(image?.imageUrl || '', image?.downloadFilename || 'image')} onRenderIcon={() => <Icon iconName={downloadIcon.iconName} className={mergeStyles(downloadIconStyle)} />} aria-live={'polite'}\n        /* @conditional-compile-remove(image-gallery) */ aria-label={localeStrings.downloadButtonLabel} />\n          <IconButton iconProps={downloadIcon} className={mergeStyles(smallDownloadButtonContainerStyle(theme))} onClick={() => onImageDownloadButtonClicked(image?.imageUrl, image?.downloadFilename)}\n        /* @conditional-compile-remove(image-gallery) */ aria-label={localeStrings.downloadButtonLabel} aria-live={'polite'} />\n          <IconButton iconProps={cancelIcon} className={mergeStyles(closeButtonStyles(theme))} onClick={onDismiss}\n        /* @conditional-compile-remove(image-gallery) */ ariaLabel={localeStrings.dismissButtonAriaLabel} aria-live={'polite'} />\n        </Stack>\n      </Stack>;\n  };\n  const renderBodyWithLightDismiss = (): JSX.Element => {\n    return <Stack className={mergeStyles(bodyContainer)} onClick={() => props.onDismiss()}>\n        {images.length > startIndex && <img src={image?.imageUrl} className={mergeStyles(imageStyle)} alt={image?.altText || 'image'} aria-label={'image-gallery-main-image'} aria-live={'polite'} onError={event => {\n        setIsImageLoaded(false);\n        onError && onError(event);\n      }} onClick={event => event.stopPropagation()} onDoubleClick={event => {\n        event.persist();\n      }} />}\n      </Stack>;\n  };\n  return <Modal titleAriaId={image?.title} isOpen={isOpen} onDismiss={onDismiss} overlay={{\n    styles: {\n      ...overlayStyles(theme)\n    }\n  }} styles={{\n    main: focusTrapZoneStyle,\n    scrollableContent: scrollableContentStyle\n  }} isDarkOverlay={true}>\n      {renderHeaderBar()}\n      {renderBodyWithLightDismiss()}\n    </Modal>;\n};"]}

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

@@ -1,121 +0,0 @@
-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 declare 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

@@ -1,117 +0,0 @@
-// 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 { mentionPopoverContainerStyle, headerStyleThemed, suggestionListStyle, suggestionItemStackStyle, suggestionItemWrapperStyle } from './styles/MentionPopover.style';
-/* @conditional-compile-remove(mention) */
-import { useIdentifiers } from '../identifiers';
-import { useLocale } from '../localization';
-/**
- * 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 [position, setPosition] = useState();
-    const [hoveredSuggestion, setHoveredSuggestion] = useState(undefined);
-    const [changedSelection, setChangedSelection] = useState(undefined); // Selection UI as per teams
-    const dismissPopoverWhenClickingOutside = useCallback((e) => {
-        const target = e.target;
-        if (popoverRef.current && !popoverRef.current.contains(target)) {
-            onDismiss && onDismiss();
-        }
-    }, [onDismiss]);
-    useEffect(() => {
-        if (changedSelection === undefined) {
-            setChangedSelection(false);
-        }
-        else if (changedSelection === false) {
-            setChangedSelection(true);
-        }
-    }, [activeSuggestionIndex, changedSelection]);
-    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, (changedSelection !== null && changedSelection !== void 0 ? changedSelection : false) && active) }, personaRenderer(suggestion.displayText)));
-    }, [handleOnKeyDown, theme,
-        ids, hoveredSuggestion, changedSelection, 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(Stack
-        /* @conditional-compile-remove(mention) */ , { "data-ui-id": ids.mentionSuggestionList, className: suggestionListStyle }, suggestions.map((suggestion, index) => {
-            const active = index === activeSuggestionIndex;
-            return onRenderSuggestionItem ? onRenderSuggestionItem(suggestion, onSuggestionSelected, active) : defaultOnRenderSuggestionItem(suggestion, onSuggestionSelected, active);
-        }))));
-};
-//# sourceMappingURL=MentionPopover.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"MentionPopover.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/MentionPopover.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\nimport { Persona, PersonaSize, Stack, mergeStyles, useTheme } from '@fluentui/react';\nimport { mentionPopoverContainerStyle, headerStyleThemed, suggestionListStyle, suggestionItemStackStyle, suggestionItemWrapperStyle } 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?: {\n    top: number;\n    left: number;\n  };\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?: (suggestion: Mention, onSuggestionSelected: (suggestion: Mention) => void, isActive: boolean) => 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  const {\n    suggestions,\n    activeSuggestionIndex,\n    title,\n    target,\n    targetPositionOffset,\n    onRenderSuggestionItem,\n    onSuggestionSelected,\n    onDismiss,\n    location\n  } = props;\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  const [position, setPosition] = useState<Position | undefined>();\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((e: MouseEvent) => {\n    const target = (e.target as HTMLElement);\n    if (popoverRef.current && !popoverRef.current.contains(target)) {\n      onDismiss && onDismiss();\n    }\n  }, [onDismiss]);\n  useEffect(() => {\n    if (changedSelection === undefined) {\n      setChangedSelection(false);\n    } else if (changedSelection === false) {\n      setChangedSelection(true);\n    }\n  }, [activeSuggestionIndex, changedSelection]);\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 = {\n      maxWidth\n    };\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    // Offset between cursor and mention popover\n    const verticalOffset = 4;\n    if (location === 'below') {\n      finalPosition.top = (rect?.height ?? 0) + (targetPositionOffset?.top ?? 0) + verticalOffset;\n    } else {\n      // (location === 'above')\n      finalPosition.bottom = (rect?.height ?? 0) - (targetPositionOffset?.top ?? 0) + verticalOffset;\n    }\n    setPosition(finalPosition);\n  }, [location, target, targetPositionOffset]);\n  const handleOnKeyDown = useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {\n    switch (e.key) {\n      case 'Escape':\n        onDismiss && onDismiss();\n        break;\n      default:\n        break;\n    }\n  }, [onDismiss]);\n  const personaRenderer = useCallback((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    return <Persona {...avatarOptions} />;\n  }, [theme]);\n  const defaultOnRenderSuggestionItem = useCallback((suggestion: Mention, onSuggestionSelected: (suggestion: Mention) => void, active: boolean): JSX.Element => {\n    return <div data-is-focusable={true}\n    /* @conditional-compile-remove(mention) */ data-ui-id={ids.mentionSuggestionItem} key={suggestion.id} onClick={() => onSuggestionSelected(suggestion)} onMouseEnter={() => setHoveredSuggestion(suggestion)} onMouseLeave={() => setHoveredSuggestion(undefined)} onKeyDown={e => {\n      handleOnKeyDown(e);\n    }} className={suggestionItemWrapperStyle(theme)}>\n          <Stack horizontal className={suggestionItemStackStyle(theme, hoveredSuggestion?.id === suggestion.id, (changedSelection ?? false) && active)}>\n            {personaRenderer(suggestion.displayText)}\n          </Stack>\n        </div>;\n  }, [handleOnKeyDown, theme, /* @conditional-compile-remove(mention) */\n  ids, hoveredSuggestion, changedSelection, personaRenderer]);\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  return <div ref={popoverRef}>\n      {position && <Stack data-testid={'mention-suggestion-list-container'} className={mergeStyles({\n      maxHeight: 212,\n      maxWidth: position.maxWidth\n    }, mentionPopoverContainerStyle(theme), {\n      ...position,\n      position: 'absolute'\n    })}>\n          <Stack.Item styles={headerStyleThemed(theme)} aria-label={title}>\n            {getHeaderTitle()}\n          </Stack.Item>\n          <Stack\n      /* @conditional-compile-remove(mention) */ data-ui-id={ids.mentionSuggestionList} className={suggestionListStyle}>\n            {suggestions.map((suggestion, index) => {\n          const active = index === activeSuggestionIndex;\n          return onRenderSuggestionItem ? onRenderSuggestionItem(suggestion, onSuggestionSelected, active) : defaultOnRenderSuggestionItem(suggestion, onSuggestionSelected, active);\n        })}\n          </Stack>\n        </Stack>}\n    </div>;\n};"]}

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

@@ -1,41 +0,0 @@
-import React, { FormEvent } from 'react';
-import { ITextField, ITextFieldProps } from '@fluentui/react';
-import { MentionLookupOptions } from '../MentionPopover';
-/**
- * Props for the TextFieldWithMention component.
- *
- * @private
- */
-export interface TextFieldWithMentionProps {
-    textFieldProps: ITextFieldProps;
-    dataUiId?: string;
-    textValue: string;
-    onChange: (event?: FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => void;
-    onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-    onEnterKeyDown?: () => void;
-    textFieldRef?: React.RefObject<ITextField>;
-    supportNewline?: boolean;
-    mentionLookupOptions?: MentionLookupOptions;
-}
-/**
- * @private
- */
-export declare const TextFieldWithMention: (props: TextFieldWithMentionProps) => JSX.Element;
-/**
- * Props for displaying a send button besides the text input area.
- *
- * @private
- */
-export declare type InputBoxButtonProps = {
-    onRenderIcon: (isHover: boolean) => JSX.Element;
-    onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    className?: string;
-    id?: string;
-    ariaLabel?: string;
-    tooltipContent?: string;
-};
-/**
- * @private
- */
-export declare const InputBoxButton: (props: InputBoxButtonProps) => JSX.Element;
-//# sourceMappingURL=TextFieldWithMention.d.ts.map