@azure/communication-react 1.5.1-alpha-202305050017 → 1.5.1-alpha-202305060013

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

@@ -1,91 +0,0 @@
-import React from 'react';
-/**
- * Props for {@link _AtMentionFlyout}.
- *
- * @internal
- */
-export interface _AtMentionFlyoutProps {
-    /**
-     * Array of at mention suggestions used to populate the suggestion list
-     */
-    suggestions: AtMentionSuggestion[];
-    /**
-     * Optional string used as at mention flyout's title.
-     * @defaultValue `Suggestions`
-     */
-    title?: string;
-    /**
-     * Optional RefObject used as a reference to position AtMentionFlyout.
-     */
-    target?: React.RefObject<Element>;
-    /**
-     * Optional callback called when a atMention suggestion is selected.
-     */
-    onSuggestionSelected?: (suggestion: AtMentionSuggestion) => void;
-    /**
-     * Callback to invoke when the at mention flyout is dismissed
-     */
-    onDismiss?: () => void;
-    /**
-     * Optional callback to render an item of the atMention suggestions list.
-     */
-    onRenderSuggestionItem?: (suggestion: AtMentionSuggestion, onSuggestionSelected?: (suggestion: AtMentionSuggestion) => void) => JSX.Element;
-}
-/**
- * Options to lookup suggestions in the at mention scenario.
- *
- * @beta
- */
-export interface AtMentionLookupOptions {
-    /**
-     * Optional string to set trigger keyword for mention a specific participant.
-     *
-     * @defaultValue `@`
-     */
-    trigger?: string;
-    /**
-     * Optional callback to fetch a list of at mention suggestions base on the query.
-     */
-    onQueryUpdated?: (query: string) => Promise<AtMentionSuggestion[]>;
-    /**
-     * Optional callback to render an item of the atMention suggestions list.
-     */
-    onRenderSuggestionItem?: (suggestion: AtMentionSuggestion, onSuggestionSelected?: (suggestion: AtMentionSuggestion) => void) => JSX.Element;
-}
-/**
- * Options to display suggestions in the at mention scenario.
- *
- * @beta
- */
-export interface AtMentionDisplayOptions {
-    /**
-     * Optional callback to override render of an mention in a message thread.
-     */
-    onRenderAtMentionSuggestion?: (suggestion: AtMentionSuggestion) => JSX.Element;
-}
-/**
- * Options to lookup suggestions and display mentions in the at mention scenario.
- *
- * @beta
- */
-export declare type AtMentionOptions = AtMentionLookupOptions & AtMentionDisplayOptions;
-/**
- * At mention suggestion's state, as reflected in the UI.
- *
- * @beta
- */
-export interface AtMentionSuggestion {
-    /** User ID of a mentioned participant or 'everyone' for an @everyone suggestion */
-    userId: string;
-    /** Type of an at mention suggestion */
-    suggestionType: string;
-    /** Display name of a mentioned participant */
-    displayName: string;
-}
-/**
- * Component to render at mention suggestions.
- *
- * @internal
- */
-export declare const _AtMentionFlyout: (props: _AtMentionFlyoutProps) => JSX.Element;
-//# sourceMappingURL=AtMentionFlyout.d.ts.map

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

@@ -1,58 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-import React, { useEffect, useState } from 'react';
-import { FocusZone, Persona, PersonaSize, Stack, useTheme } from '@fluentui/react';
-import { atMentionFlyoutContainer, headerStyleThemed, suggestionListStyle, suggestionListContainerStyle, suggestionItemStackStyle, suggestionItemWrapperStyle } from './styles/AtMentionFlyout.style';
-/* @conditional-compile-remove(at-mention) */
-import { useIdentifiers } from '../identifiers';
-import { useLocale } from '../localization';
-/**
- * Component to render at mention suggestions.
- *
- * @internal
- */
-export const _AtMentionFlyout = (props) => {
-    const { suggestions, title = 'Suggestions', target, onRenderSuggestionItem, onSuggestionSelected } = props;
-    const theme = useTheme();
-    /* @conditional-compile-remove(at-mention) */
-    const ids = useIdentifiers();
-    const localeStrings = useLocale().strings.participantItem;
-    const [position, setPosition] = useState({ top: 0, right: 0, bottom: 0, left: 0 });
-    const [hoveredSuggestion, setHoveredSuggestion] = useState(undefined);
-    // Temporary implementation for AtMentionFlyout's position.
-    useEffect(() => {
-        var _a;
-        const rect = (_a = target === null || target === void 0 ? void 0 : target.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        const { top = 0, left = 0, right = 0, bottom = 0, height = 0 } = rect !== null && rect !== void 0 ? rect : {};
-        const flyoutHeight = 212;
-        const flyoutTop = top - flyoutHeight - height - 24;
-        setPosition({ top: flyoutTop > 0 ? flyoutTop : 0, left, right, bottom });
-    }, [target]);
-    const personaRenderer = (displayName) => {
-        const avatarOptions = {
-            text: (displayName === null || displayName === void 0 ? void 0 : displayName.trim()) || localeStrings.displayNamePlaceholder,
-            size: PersonaSize.size28,
-            initialsColor: theme.palette.neutralLight,
-            initialsTextColor: theme.palette.neutralSecondary,
-            showOverflowTooltip: false,
-            showUnknownPersonaCoin: !(displayName === null || displayName === void 0 ? void 0 : displayName.trim()) || displayName === localeStrings.displayNamePlaceholder
-        };
-        return React.createElement(Persona, Object.assign({}, avatarOptions));
-    };
-    const defaultOnRenderSuggestionItem = (suggestion) => {
-        const isSuggestionHovered = (hoveredSuggestion === null || hoveredSuggestion === void 0 ? void 0 : hoveredSuggestion.userId) === suggestion.userId;
-        return (React.createElement("div", { "data-is-focusable": true, "data-ui-id": ids.atMentionSuggestionItem, key: suggestion.userId, onClick: () => onSuggestionSelected && onSuggestionSelected(suggestion), onMouseEnter: () => setHoveredSuggestion(suggestion), onMouseLeave: () => setHoveredSuggestion(undefined), className: suggestionItemWrapperStyle(theme) },
-            React.createElement(Stack, { horizontal: true, className: suggestionItemStackStyle(theme, isSuggestionHovered) }, personaRenderer(suggestion.displayName))));
-    };
-    return (React.createElement(Stack, { className: atMentionFlyoutContainer(theme, position.left, position.top) },
-        React.createElement(Stack.Item, { styles: headerStyleThemed(theme), "aria-label": title },
-            title,
-            " "),
-        React.createElement(FocusZone, { className: suggestionListContainerStyle, shouldFocusOnMount: true },
-            React.createElement(Stack
-            /* @conditional-compile-remove(at-mention) */
-            , { "data-ui-id": ids.atMentionSuggestionList, className: suggestionListStyle }, suggestions.map((suggestion) => onRenderSuggestionItem
-                ? onRenderSuggestionItem(suggestion, onSuggestionSelected)
-                : defaultOnRenderSuggestionItem(suggestion))))));
-};
-//# sourceMappingURL=AtMentionFlyout.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"AtMentionFlyout.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/AtMentionFlyout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport React, { useEffect, useState } from 'react';\nimport { FocusZone, Persona, PersonaSize, Stack, useTheme } from '@fluentui/react';\nimport {\n  atMentionFlyoutContainer,\n  headerStyleThemed,\n  suggestionListStyle,\n  suggestionListContainerStyle,\n  suggestionItemStackStyle,\n  suggestionItemWrapperStyle\n} from './styles/AtMentionFlyout.style';\n/* @conditional-compile-remove(at-mention) */\nimport { useIdentifiers } from '../identifiers';\nimport { useLocale } from '../localization';\n\n/**\n * Props for {@link _AtMentionFlyout}.\n *\n * @internal\n */\nexport interface _AtMentionFlyoutProps {\n  /**\n   * Array of at mention suggestions used to populate the suggestion list\n   */\n  suggestions: AtMentionSuggestion[];\n  /**\n   * Optional string used as at mention flyout's title.\n   * @defaultValue `Suggestions`\n   */\n  title?: string;\n  /**\n   * Optional RefObject used as a reference to position AtMentionFlyout.\n   */\n  target?: React.RefObject<Element>;\n  /**\n   * Optional callback called when a atMention suggestion is selected.\n   */\n  onSuggestionSelected?: (suggestion: AtMentionSuggestion) => void;\n  /**\n   * Callback to invoke when the at mention flyout is dismissed\n   */\n  onDismiss?: () => void;\n  /**\n   * Optional callback to render an item of the atMention suggestions list.\n   */\n  onRenderSuggestionItem?: (\n    suggestion: AtMentionSuggestion,\n    onSuggestionSelected?: (suggestion: AtMentionSuggestion) => void\n  ) => JSX.Element;\n}\n\n/**\n * Options to lookup suggestions in the at mention scenario.\n *\n * @beta\n */\nexport interface AtMentionLookupOptions {\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 at mention suggestions base on the query.\n   */\n  onQueryUpdated?: (query: string) => Promise<AtMentionSuggestion[]>;\n  /**\n   * Optional callback to render an item of the atMention suggestions list.\n   */\n  onRenderSuggestionItem?: (\n    suggestion: AtMentionSuggestion,\n    onSuggestionSelected?: (suggestion: AtMentionSuggestion) => void\n  ) => JSX.Element;\n}\n\n/**\n * Options to display suggestions in the at mention scenario.\n *\n * @beta\n */\nexport interface AtMentionDisplayOptions {\n  /**\n   * Optional callback to override render of an mention in a message thread.\n   */\n  onRenderAtMentionSuggestion?: (suggestion: AtMentionSuggestion) => JSX.Element;\n}\n\n/**\n * Options to lookup suggestions and display mentions in the at mention scenario.\n *\n * @beta\n */\nexport type AtMentionOptions = AtMentionLookupOptions & AtMentionDisplayOptions;\n\n/**\n * At mention suggestion's state, as reflected in the UI.\n *\n * @beta\n */\nexport interface AtMentionSuggestion {\n  /** User ID of a mentioned participant or 'everyone' for an @everyone suggestion */\n  userId: string;\n  /** Type of an at mention suggestion */\n  suggestionType: string;\n  /** Display name of a mentioned participant */\n  displayName: string;\n}\n\n/**\n * Component to render at mention suggestions.\n *\n * @internal\n */\nexport const _AtMentionFlyout = (props: _AtMentionFlyoutProps): JSX.Element => {\n  // Temporary implementation for AtMentionFlyout's position.\n  interface Position {\n    top: number;\n    right: number;\n    bottom: number;\n    left: number;\n  }\n  const { suggestions, title = 'Suggestions', target, onRenderSuggestionItem, onSuggestionSelected } = props;\n  const theme = useTheme();\n  /* @conditional-compile-remove(at-mention) */\n  const ids = useIdentifiers();\n  const localeStrings = useLocale().strings.participantItem;\n\n  const [position, setPosition] = useState<Position>({ top: 0, right: 0, bottom: 0, left: 0 });\n  const [hoveredSuggestion, setHoveredSuggestion] = useState<AtMentionSuggestion | undefined>(undefined);\n\n  // Temporary implementation for AtMentionFlyout's position.\n  useEffect(() => {\n    const rect = target?.current?.getBoundingClientRect();\n    const { top = 0, left = 0, right = 0, bottom = 0, height = 0 } = rect ?? {};\n    const flyoutHeight = 212;\n    const flyoutTop = top - flyoutHeight - height - 24;\n    setPosition({ top: flyoutTop > 0 ? flyoutTop : 0, left, right, bottom });\n  }, [target]);\n\n  const personaRenderer = (displayName?: string): JSX.Element => {\n    const avatarOptions = {\n      text: displayName?.trim() || localeStrings.displayNamePlaceholder,\n      size: PersonaSize.size28,\n      initialsColor: theme.palette.neutralLight,\n      initialsTextColor: theme.palette.neutralSecondary,\n      showOverflowTooltip: false,\n      showUnknownPersonaCoin: !displayName?.trim() || displayName === localeStrings.displayNamePlaceholder\n    };\n\n    return <Persona {...avatarOptions} />;\n  };\n\n  const defaultOnRenderSuggestionItem = (suggestion: AtMentionSuggestion): JSX.Element => {\n    const isSuggestionHovered = hoveredSuggestion?.userId === suggestion.userId;\n    return (\n      <div\n        data-is-focusable={true}\n        /* @conditional-compile-remove(at-mention) */\n        data-ui-id={ids.atMentionSuggestionItem}\n        key={suggestion.userId}\n        onClick={() => onSuggestionSelected && onSuggestionSelected(suggestion)}\n        onMouseEnter={() => setHoveredSuggestion(suggestion)}\n        onMouseLeave={() => setHoveredSuggestion(undefined)}\n        className={suggestionItemWrapperStyle(theme)}\n      >\n        <Stack horizontal className={suggestionItemStackStyle(theme, isSuggestionHovered)}>\n          {personaRenderer(suggestion.displayName)}\n        </Stack>\n      </div>\n    );\n  };\n\n  return (\n    <Stack className={atMentionFlyoutContainer(theme, position.left, position.top)}>\n      <Stack.Item styles={headerStyleThemed(theme)} aria-label={title}>\n        {title} {/* TODO: Localization  */}\n      </Stack.Item>\n      <FocusZone className={suggestionListContainerStyle} shouldFocusOnMount={true}>\n        <Stack\n          /* @conditional-compile-remove(at-mention) */\n          data-ui-id={ids.atMentionSuggestionList}\n          className={suggestionListStyle}\n        >\n          {suggestions.map((suggestion) =>\n            onRenderSuggestionItem\n              ? onRenderSuggestionItem(suggestion, onSuggestionSelected)\n              : defaultOnRenderSuggestionItem(suggestion)\n          )}\n        </Stack>\n      </FocusZone>\n    </Stack>\n  );\n};\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"AtMentionFlyout.style.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/AtMentionFlyout.style.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAgB,WAAW,EAAS,MAAM,iBAAiB,CAAC;AAEnE;;;GAGG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,CAAC;AAEvC;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,KAAY,EAAE,IAAY,EAAE,GAAW,EAAU,EAAE,CAC1F,WAAW,CAAC;IACV,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,UAAU;IAClB,QAAQ,EAAE,UAAU;IACpB,IAAI,EAAE,IAAI;IACV,GAAG,EAAE,GAAG;IACR,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,WAAW;IACpC,UAAU,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc;IAC/C,6DAA6D;IAC7D,MAAM,EAAE,qBAAqB,GAAG,CAAC;CAClC,CAAC,CAAC;AAEL;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAAY,EAAgB,EAAE;IAC9D,OAAO;QACL,IAAI,EAAE;YACJ,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB;YACrC,MAAM,EAAE,qBAAqB;YAC7B,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,QAAQ;SACzC;KACF,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,WAAW,CAAC;IACtD,MAAM,EAAE,MAAM;IACd,SAAS,EAAE,MAAM;IACjB,SAAS,EAAE,QAAQ;CACpB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,WAAW,CAAC;IAC7C,OAAO,EAAE,gBAAgB;CAC1B,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,KAAY,EAAU,EAAE;IACjE,OAAO,WAAW,CAAC;QACjB,MAAM,EAAE,gBAAgB;QACxB,iBAAiB,EAAE;YACjB,OAAO,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,eAAe;SAC/C;KACF,CAAC,CAAC;AACL,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,KAAY,EAAE,mBAA4B,EAAU,EAAE;IAC7F,OAAO,WAAW,CAAC;QACjB,KAAK,EAAE,OAAO;QACd,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,MAAM;QACd,OAAO,EAAE,WAAW;QACpB,UAAU,EAAE,mBAAmB,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK;KACnF,CAAC,CAAC;AACL,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStackStyles, mergeStyles, Theme } from '@fluentui/react';\n\n/**\n * @private\n * z-index to ensure that chat container has lower z-index than at mention flyout\n */\nexport const CHAT_CONTAINER_ZINDEX = 1;\n\n/**\n * @private\n */\nexport const atMentionFlyoutContainer = (theme: Theme, left: number, top: number): string =>\n  mergeStyles({\n    width: '10rem',\n    height: '13.25rem',\n    position: 'absolute',\n    left: left,\n    top: top,\n    boxShadow: theme.effects.elevation16,\n    background: theme.semanticColors.bodyBackground,\n    // zIndex to set the atMentionFlyout above the chat container\n    zIndex: CHAT_CONTAINER_ZINDEX + 1\n  });\n\n/**\n * @private\n */\nexport const headerStyleThemed = (theme: Theme): IStackStyles => {\n  return {\n    root: {\n      color: theme.palette.neutralSecondary,\n      margin: '0.5rem 1rem 0.25rem',\n      fontSize: theme.fonts.smallPlus.fontSize\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const suggestionListContainerStyle = mergeStyles({\n  height: '100%',\n  overflowY: 'auto',\n  overflowX: 'hidden'\n});\n\n/**\n * @private\n */\nexport const suggestionListStyle = mergeStyles({\n  padding: '0.25rem 0rem 0'\n});\n\n/**\n * @private\n */\nexport const suggestionItemWrapperStyle = (theme: Theme): string => {\n  return mergeStyles({\n    margin: '0.05rem 0.1rem',\n    '&:focus-visible': {\n      outline: `${theme.palette.black} solid 0.1rem`\n    }\n  });\n};\n\n/**\n * @private\n */\nexport const suggestionItemStackStyle = (theme: Theme, isSuggestionHovered: boolean): string => {\n  return mergeStyles({\n    width: '10rem',\n    alignItems: 'center',\n    height: '36px',\n    padding: '0 0.75rem',\n    background: isSuggestionHovered ? theme.palette.neutralLight : theme.palette.white\n  });\n};\n"]}