@azure/communication-react 1.13.0-alpha-202402161702 → 1.13.0

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 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,126 +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 { 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

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

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

package/dist/dist-esm/react-components/src/components/RTE/RTEInputBoxComponent.d.ts

@@ -1,22 +0,0 @@
-import React from 'react';
-import { BaseCustomStyles } from '../../types';
-import { RichTextEditorComponentRef } from './RichTextEditor';
-/**
- * @private
- */
-export interface RTEInputBoxComponentStylesProps extends BaseCustomStyles {
-}
-/**
- * @private
- */
-export interface RTEInputBoxComponentProps {
-    placeholderText?: string;
-    content: string;
-    onChange: (newValue?: string) => void;
-    editorComponentRef: React.RefObject<RichTextEditorComponentRef>;
-}
-/**
- * @private
- */
-export declare const RTEInputBoxComponent: (props: RTEInputBoxComponentProps) => JSX.Element;
-//# sourceMappingURL=RTEInputBoxComponent.d.ts.map

package/dist/dist-esm/react-components/src/components/RTE/RTEInputBoxComponent.js

@@ -1,13 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-import React from 'react';
-import { RichTextEditor } from './RichTextEditor';
-/**
- * @private
- */
-export const RTEInputBoxComponent = (props) => {
-    const { placeholderText, content, onChange, editorComponentRef } = props;
-    return (React.createElement("div", null,
-        React.createElement(RichTextEditor, { content: content, placeholderText: placeholderText, onChange: onChange, ref: editorComponentRef })));
-};
-//# sourceMappingURL=RTEInputBoxComponent.js.map

package/dist/dist-esm/react-components/src/components/RTE/RTEInputBoxComponent.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"RTEInputBoxComponent.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RTE/RTEInputBoxComponent.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAA8B,MAAM,kBAAkB,CAAC;AAiB9E;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAgC,EAAe,EAAE;IACpF,MAAM,EAAE,eAAe,EAAE,OAAO,EAAE,QAAQ,EAAE,kBAAkB,EAAE,GAAG,KAAK,CAAC;IAEzE,OAAO,CACL;QACE,oBAAC,cAAc,IACb,OAAO,EAAE,OAAO,EAChB,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,kBAAkB,GACvB,CACE,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { BaseCustomStyles } from '../../types';\nimport { RichTextEditor, RichTextEditorComponentRef } from './RichTextEditor';\n\n/**\n * @private\n */\nexport interface RTEInputBoxComponentStylesProps extends BaseCustomStyles {}\n\n/**\n * @private\n */\nexport interface RTEInputBoxComponentProps {\n  placeholderText?: string;\n  content: string;\n  onChange: (newValue?: string) => void;\n  editorComponentRef: React.RefObject<RichTextEditorComponentRef>;\n}\n\n/**\n * @private\n */\nexport const RTEInputBoxComponent = (props: RTEInputBoxComponentProps): JSX.Element => {\n  const { placeholderText, content, onChange, editorComponentRef } = props;\n\n  return (\n    <div>\n      <RichTextEditor\n        content={content}\n        placeholderText={placeholderText}\n        onChange={onChange}\n        ref={editorComponentRef}\n      />\n    </div>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/RTE/RTESendBox.d.ts

@@ -1,53 +0,0 @@
-/// <reference types="react" />
-import { SendBoxStrings } from '../SendBox';
-import { ActiveFileUpload } from '../FileUploadCards';
-/**
- * Props for {@link RTESendBox}.
- *
- * @beta
- */
-export interface RTESendBoxProps {
-    /**
-     * Optional boolean to disable text box
-     * @defaultValue false
-     */
-    disabled?: boolean;
-    /**
-     * Optional strings to override in component
-     */
-    strings?: Partial<SendBoxStrings>;
-    /**
-     * Optional text for system message above the text box
-     */
-    systemMessage?: string;
-    /**
-     * Optional callback to render uploaded files in the SendBox. The sendBox will expand
-     * vertically to accommodate the uploaded files. File uploads will
-     * be rendered below the text area in sendBox.
-     * @beta
-     */
-    onRenderFileUploads?: () => JSX.Element;
-    /**
-     * Optional array of active file uploads where each object has attributes
-     * of a file upload like name, progress, errorMessage etc.
-     * @beta
-     */
-    activeFileUploads?: ActiveFileUpload[];
-    /**
-     * Optional callback to remove the file upload before sending by clicking on
-     * cancel icon.
-     * @beta
-     */
-    onCancelFileUpload?: (fileId: string) => void;
-    /**
-     * Callback function used when the send button is clicked.
-     */
-    onSendMessage: (content: string) => Promise<void>;
-}
-/**
- * A component to render SendBox with Rich Text Editor support.
- *
- * @beta
- */
-export declare const RTESendBox: (props: RTESendBoxProps) => JSX.Element;
-//# sourceMappingURL=RTESendBox.d.ts.map

package/dist/dist-esm/react-components/src/components/RTE/RTESendBox.js

@@ -1,116 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-import React, { useCallback, useMemo, useRef, useState } from 'react';
-import { RTEInputBoxComponent } from './RTEInputBoxComponent';
-import { Icon, Stack, useTheme } from '@fluentui/react';
-import { useLocale } from '../../localization';
-import { borderAndBoxShadowStyle, sendButtonStyle, sendIconStyle } from '../styles/SendBox.styles';
-import { InputBoxButton } from '../InputBoxButton';
-import { RTESendBoxErrors } from './RTESendBoxErrors';
-import { exceedsMaxAllowedLength, sanitizeText } from '../utils/SendBoxUtils';
-/* @conditional-compile-remove(file-sharing) */
-import { hasCompletedFileUploads } from '../utils/SendBoxUtils';
-/**
- * A component to render SendBox with Rich Text Editor support.
- *
- * @beta
- */
-export const RTESendBox = (props) => {
-    const { disabled = false, systemMessage, onSendMessage, 
-    /* @conditional-compile-remove(file-sharing) */
-    activeFileUploads } = props;
-    const theme = useTheme();
-    const localeStrings = useLocale().strings.sendBox;
-    const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
-    const [contentValue, setContentValue] = useState('');
-    const [contentValueOverflow, setContentValueOverflow] = useState(false);
-    /* @conditional-compile-remove(file-sharing) */
-    const [fileUploadsPendingError, setFileUploadsPendingError] = useState(undefined);
-    const editorComponentRef = useRef(null);
-    const contentTooLongMessage = useMemo(() => (contentValueOverflow ? strings.textTooLong : undefined), [contentValueOverflow, strings.textTooLong]);
-    const setContent = (newValue) => {
-        if (newValue === undefined) {
-            return;
-        }
-        setContentValueOverflow(exceedsMaxAllowedLength(newValue.length));
-        setContentValue(newValue);
-    };
-    const sendMessageOnClick = () => {
-        var _a;
-        if (disabled || contentValueOverflow) {
-            return;
-        }
-        // Don't send message until all files have been uploaded successfully
-        /* @conditional-compile-remove(file-sharing) */
-        setFileUploadsPendingError(undefined);
-        // if (hasIncompleteFileUploads(activeFileUploads)) {
-        //   setFileUploadsPendingError({ message: strings.fileUploadsPendingError, timestamp: Date.now() });
-        //   return;
-        // }
-        const message = contentValue;
-        // we don't want to send empty messages including spaces, newlines, tabs
-        // Message can be empty if there is a valid file upload
-        if (sanitizeText(message).length > 0 ||
-            /* @conditional-compile-remove(file-sharing) */ hasCompletedFileUploads(activeFileUploads)) {
-            onSendMessage(message);
-            setContentValue('');
-        }
-        (_a = editorComponentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    };
-    const hasErrorMessage = useMemo(() => {
-        var _a;
-        return (!!systemMessage ||
-            !!contentTooLongMessage ||
-            /* @conditional-compile-remove(file-sharing) */
-            !!fileUploadsPendingError ||
-            /* @conditional-compile-remove(file-sharing) */
-            !!((_a = activeFileUploads === null || activeFileUploads === void 0 ? void 0 : activeFileUploads.filter((fileUpload) => fileUpload.error).pop()) === null || _a === void 0 ? void 0 : _a.error));
-    }, [
-        /* @conditional-compile-remove(file-sharing) */
-        activeFileUploads,
-        contentTooLongMessage,
-        /* @conditional-compile-remove(file-sharing) */
-        fileUploadsPendingError,
-        systemMessage
-    ]);
-    const onRenderSendIcon = useCallback((isHover) => (React.createElement(Icon, { iconName: isHover && contentValue ? 'SendBoxSendHovered' : 'SendBoxSend', className: sendIconStyle({
-            theme,
-            hasText: !!contentValue,
-            /* @conditional-compile-remove(file-sharing) */
-            hasFile: false,
-            hasErrorMessage: hasErrorMessage
-        }) })), [contentValue, hasErrorMessage, theme]);
-    const sendBoxErrorsProps = useMemo(() => {
-        var _a;
-        return {
-            /* @conditional-compile-remove(file-sharing) */
-            fileUploadsPendingError: fileUploadsPendingError,
-            /* @conditional-compile-remove(file-sharing) */
-            fileUploadError: (_a = activeFileUploads === null || activeFileUploads === void 0 ? void 0 : activeFileUploads.filter((fileUpload) => fileUpload.error).pop()) === null || _a === void 0 ? void 0 : _a.error,
-            systemMessage: systemMessage,
-            textTooLongMessage: contentTooLongMessage
-        };
-    }, [
-        /* @conditional-compile-remove(file-sharing) */
-        activeFileUploads,
-        contentTooLongMessage,
-        /* @conditional-compile-remove(file-sharing) */
-        fileUploadsPendingError,
-        systemMessage
-    ]);
-    return (React.createElement(Stack, null,
-        React.createElement(RTESendBoxErrors, Object.assign({}, sendBoxErrorsProps)),
-        React.createElement("div", { className: borderAndBoxShadowStyle({
-                theme: theme,
-                // should always be false as we don't want to show the border when there is an error
-                hasErrorMessage: false,
-                disabled: !!disabled
-            }) },
-            React.createElement(RTEInputBoxComponent, { placeholderText: strings.placeholderText, content: contentValue, onChange: setContent, editorComponentRef: editorComponentRef })),
-        React.createElement(Stack.Item, { align: "end" },
-            React.createElement(InputBoxButton, { onRenderIcon: onRenderSendIcon, onClick: (e) => {
-                    sendMessageOnClick();
-                    e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.
-                }, className: sendButtonStyle, ariaLabel: localeStrings.sendButtonAriaLabel, tooltipContent: localeStrings.sendButtonAriaLabel }))));
-};
-//# sourceMappingURL=RTESendBox.js.map

package/dist/dist-esm/react-components/src/components/RTE/RTESendBox.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"RTESendBox.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RTE/RTESendBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { RTEInputBoxComponent } from './RTEInputBoxComponent';\nimport { Icon, Stack, useTheme } from '@fluentui/react';\nimport { useLocale } from '../../localization';\nimport { SendBoxStrings } from '../SendBox';\nimport { borderAndBoxShadowStyle, sendButtonStyle, sendIconStyle } from '../styles/SendBox.styles';\nimport { InputBoxButton } from '../InputBoxButton';\nimport { RTESendBoxErrors, RTESendBoxErrorsProps } from './RTESendBoxErrors';\n/* @conditional-compile-remove(file-sharing) */\nimport { ActiveFileUpload } from '../FileUploadCards';\n/* @conditional-compile-remove(file-sharing) */\nimport { SendBoxErrorBarError } from '../SendBoxErrorBar';\nimport { exceedsMaxAllowedLength, sanitizeText } from '../utils/SendBoxUtils';\n/* @conditional-compile-remove(file-sharing) */\nimport { hasCompletedFileUploads } from '../utils/SendBoxUtils';\nimport { RichTextEditorComponentRef } from './RichTextEditor';\n\n/**\n * Props for {@link RTESendBox}.\n *\n * @beta\n */\nexport interface RTESendBoxProps {\n  /**\n   * Optional boolean to disable text box\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<SendBoxStrings>;\n  /**\n   * Optional text for system message above the text box\n   */\n  systemMessage?: string;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Optional callback to render uploaded files in the SendBox. The sendBox will expand\n   * vertically to accommodate the uploaded files. File uploads will\n   * be rendered below the text area in sendBox.\n   * @beta\n   */\n  onRenderFileUploads?: () => JSX.Element;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Optional array of active file uploads where each object has attributes\n   * of a file upload like name, progress, errorMessage etc.\n   * @beta\n   */\n  activeFileUploads?: ActiveFileUpload[];\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Optional callback to remove the file upload before sending by clicking on\n   * cancel icon.\n   * @beta\n   */\n  onCancelFileUpload?: (fileId: string) => void;\n  /**\n   * Callback function used when the send button is clicked.\n   */\n  onSendMessage: (content: string) => Promise<void>;\n}\n\n/**\n * A component to render SendBox with Rich Text Editor support.\n *\n * @beta\n */\nexport const RTESendBox = (props: RTESendBoxProps): JSX.Element => {\n  const {\n    disabled = false,\n    systemMessage,\n    onSendMessage,\n    /* @conditional-compile-remove(file-sharing) */\n    activeFileUploads\n  } = props;\n\n  const theme = useTheme();\n  const localeStrings = useLocale().strings.sendBox;\n  const strings = { ...localeStrings, ...props.strings };\n\n  const [contentValue, setContentValue] = useState('');\n  const [contentValueOverflow, setContentValueOverflow] = useState(false);\n  /* @conditional-compile-remove(file-sharing) */\n  const [fileUploadsPendingError, setFileUploadsPendingError] = useState<SendBoxErrorBarError | undefined>(undefined);\n  const editorComponentRef = useRef<RichTextEditorComponentRef>(null);\n\n  const contentTooLongMessage = useMemo(\n    () => (contentValueOverflow ? strings.textTooLong : undefined),\n    [contentValueOverflow, strings.textTooLong]\n  );\n\n  const setContent = (newValue?: string): void => {\n    if (newValue === undefined) {\n      return;\n    }\n\n    setContentValueOverflow(exceedsMaxAllowedLength(newValue.length));\n    setContentValue(newValue);\n  };\n\n  const sendMessageOnClick = (): void => {\n    if (disabled || contentValueOverflow) {\n      return;\n    }\n    // Don't send message until all files have been uploaded successfully\n    /* @conditional-compile-remove(file-sharing) */\n    setFileUploadsPendingError(undefined);\n\n    // if (hasIncompleteFileUploads(activeFileUploads)) {\n    //   setFileUploadsPendingError({ message: strings.fileUploadsPendingError, timestamp: Date.now() });\n    //   return;\n    // }\n\n    const message = contentValue;\n    // we don't want to send empty messages including spaces, newlines, tabs\n    // Message can be empty if there is a valid file upload\n    if (\n      sanitizeText(message).length > 0 ||\n      /* @conditional-compile-remove(file-sharing) */ hasCompletedFileUploads(activeFileUploads)\n    ) {\n      onSendMessage(message);\n      setContentValue('');\n    }\n    editorComponentRef.current?.focus();\n  };\n\n  const hasErrorMessage = useMemo(() => {\n    return (\n      !!systemMessage ||\n      !!contentTooLongMessage ||\n      /* @conditional-compile-remove(file-sharing) */\n      !!fileUploadsPendingError ||\n      /* @conditional-compile-remove(file-sharing) */\n      !!activeFileUploads?.filter((fileUpload) => fileUpload.error).pop()?.error\n    );\n  }, [\n    /* @conditional-compile-remove(file-sharing) */\n    activeFileUploads,\n    contentTooLongMessage,\n    /* @conditional-compile-remove(file-sharing) */\n    fileUploadsPendingError,\n    systemMessage\n  ]);\n\n  const onRenderSendIcon = useCallback(\n    (isHover: boolean) => (\n      <Icon\n        iconName={isHover && contentValue ? 'SendBoxSendHovered' : 'SendBoxSend'}\n        className={sendIconStyle({\n          theme,\n          hasText: !!contentValue,\n          /* @conditional-compile-remove(file-sharing) */\n          hasFile: false,\n          hasErrorMessage: hasErrorMessage\n        })}\n      />\n    ),\n    [contentValue, hasErrorMessage, theme]\n  );\n\n  const sendBoxErrorsProps: RTESendBoxErrorsProps = useMemo(() => {\n    return {\n      /* @conditional-compile-remove(file-sharing) */\n      fileUploadsPendingError: fileUploadsPendingError,\n      /* @conditional-compile-remove(file-sharing) */\n      fileUploadError: activeFileUploads?.filter((fileUpload) => fileUpload.error).pop()?.error,\n      systemMessage: systemMessage,\n      textTooLongMessage: contentTooLongMessage\n    };\n  }, [\n    /* @conditional-compile-remove(file-sharing) */\n    activeFileUploads,\n    contentTooLongMessage,\n    /* @conditional-compile-remove(file-sharing) */\n    fileUploadsPendingError,\n    systemMessage\n  ]);\n\n  return (\n    <Stack>\n      <RTESendBoxErrors {...sendBoxErrorsProps} />\n      <div\n        className={borderAndBoxShadowStyle({\n          theme: theme,\n          // should always be false as we don't want to show the border when there is an error\n          hasErrorMessage: false,\n          disabled: !!disabled\n        })}\n      >\n        <RTEInputBoxComponent\n          placeholderText={strings.placeholderText}\n          content={contentValue}\n          onChange={setContent}\n          editorComponentRef={editorComponentRef}\n        />\n        {/* File Upload */}\n      </div>\n      <Stack.Item align=\"end\">\n        <InputBoxButton\n          onRenderIcon={onRenderSendIcon}\n          onClick={(e) => {\n            sendMessageOnClick();\n            e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.\n          }}\n          className={sendButtonStyle}\n          ariaLabel={localeStrings.sendButtonAriaLabel}\n          tooltipContent={localeStrings.sendButtonAriaLabel}\n        />\n      </Stack.Item>\n    </Stack>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/RTE/RTESendBoxErrors.d.ts

@@ -1,16 +0,0 @@
-/// <reference types="react" />
-import { SendBoxErrorBarError } from '../SendBoxErrorBar';
-/**
- * @private
- */
-export interface RTESendBoxErrorsProps {
-    fileUploadsPendingError?: SendBoxErrorBarError;
-    fileUploadError?: SendBoxErrorBarError;
-    systemMessage?: string;
-    textTooLongMessage?: string;
-}
-/**
- * @private
- */
-export declare const RTESendBoxErrors: (props: RTESendBoxErrorsProps) => JSX.Element;
-//# sourceMappingURL=RTESendBoxErrors.d.ts.map

package/dist/dist-esm/react-components/src/components/RTE/RTESendBoxErrors.js

@@ -1,62 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-import React, { useCallback, useEffect, useState } from 'react';
-import { SendBoxErrorBar } from '../SendBoxErrorBar';
-/**
- * @private
- */
-export const RTESendBoxErrors = (props) => {
-    const { 
-    /* @conditional-compile-remove(file-sharing) */
-    fileUploadError, 
-    /* @conditional-compile-remove(file-sharing) */
-    fileUploadsPendingError, systemMessage, textTooLongMessage } = props;
-    const [sendBoxError, setSendBoxError] = useState(undefined);
-    useEffect(() => {
-        if (systemMessage && !isMessageEmpty(systemMessage)) {
-            setSendBoxError({ message: systemMessage, timestamp: Date.now() });
-        }
-    }, [systemMessage]);
-    useEffect(() => {
-        if (textTooLongMessage && !isMessageEmpty(textTooLongMessage)) {
-            setSendBoxError({ message: textTooLongMessage, timestamp: Date.now() });
-        }
-    }, [textTooLongMessage]);
-    useEffect(() => {
-        setSendBoxError((prev) => {
-            const errors = [];
-            if (prev) {
-                errors.push(prev);
-            }
-            /* @conditional-compile-remove(file-sharing) */
-            if (fileUploadsPendingError) {
-                errors.push(fileUploadsPendingError);
-            }
-            /* @conditional-compile-remove(file-sharing) */
-            if (fileUploadError) {
-                errors.push(fileUploadError);
-            }
-            if (errors.length === 0) {
-                return undefined;
-            }
-            // sort to get the latest error
-            const sortedErrors = errors.sort((a, b) => b.timestamp - a.timestamp);
-            return sortedErrors[0];
-        });
-    }, [
-        /* @conditional-compile-remove(file-sharing) */ fileUploadError,
-        /* @conditional-compile-remove(file-sharing) */ fileUploadsPendingError
-    ]);
-    const onDismiss = useCallback(() => {
-        if (systemMessage && !isMessageEmpty(systemMessage)) {
-            setSendBoxError({ message: systemMessage, timestamp: Date.now() });
-        }
-    }, [systemMessage]);
-    return (React.createElement(SendBoxErrorBar, { error: sendBoxError, dismissAfterMs: 
-        // don't dismiss the system message
-        systemMessage !== undefined && (sendBoxError === null || sendBoxError === void 0 ? void 0 : sendBoxError.message) !== systemMessage ? 10 * 1000 : undefined, onDismiss: onDismiss }));
-};
-const isMessageEmpty = (message) => {
-    return message.trim().length === 0;
-};
-//# sourceMappingURL=RTESendBoxErrors.js.map

package/dist/dist-esm/react-components/src/components/RTE/RTESendBoxErrors.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"RTESendBoxErrors.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RTE/RTESendBoxErrors.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { SendBoxErrorBar, SendBoxErrorBarError } from '../SendBoxErrorBar';\n\n/**\n * @private\n */\nexport interface RTESendBoxErrorsProps {\n  /* @conditional-compile-remove(file-sharing) */\n  fileUploadsPendingError?: SendBoxErrorBarError;\n  /* @conditional-compile-remove(file-sharing) */\n  fileUploadError?: SendBoxErrorBarError;\n  systemMessage?: string;\n  textTooLongMessage?: string;\n}\n\n/**\n * @private\n */\nexport const RTESendBoxErrors = (props: RTESendBoxErrorsProps): JSX.Element => {\n  const {\n    /* @conditional-compile-remove(file-sharing) */\n    fileUploadError,\n    /* @conditional-compile-remove(file-sharing) */\n    fileUploadsPendingError,\n    systemMessage,\n    textTooLongMessage\n  } = props;\n  const [sendBoxError, setSendBoxError] = useState<SendBoxErrorBarError | undefined>(undefined);\n\n  useEffect(() => {\n    if (systemMessage && !isMessageEmpty(systemMessage)) {\n      setSendBoxError({ message: systemMessage, timestamp: Date.now() });\n    }\n  }, [systemMessage]);\n\n  useEffect(() => {\n    if (textTooLongMessage && !isMessageEmpty(textTooLongMessage)) {\n      setSendBoxError({ message: textTooLongMessage, timestamp: Date.now() });\n    }\n  }, [textTooLongMessage]);\n\n  useEffect(() => {\n    setSendBoxError((prev) => {\n      const errors: SendBoxErrorBarError[] = [];\n      if (prev) {\n        errors.push(prev);\n      }\n      /* @conditional-compile-remove(file-sharing) */\n      if (fileUploadsPendingError) {\n        errors.push(fileUploadsPendingError);\n      }\n      /* @conditional-compile-remove(file-sharing) */\n      if (fileUploadError) {\n        errors.push(fileUploadError);\n      }\n      if (errors.length === 0) {\n        return undefined;\n      }\n      // sort to get the latest error\n      const sortedErrors = errors.sort((a, b) => b.timestamp - a.timestamp);\n      return sortedErrors[0];\n    });\n  }, [\n    /* @conditional-compile-remove(file-sharing) */ fileUploadError,\n    /* @conditional-compile-remove(file-sharing) */ fileUploadsPendingError\n  ]);\n\n  const onDismiss = useCallback(() => {\n    if (systemMessage && !isMessageEmpty(systemMessage)) {\n      setSendBoxError({ message: systemMessage, timestamp: Date.now() });\n    }\n  }, [systemMessage]);\n\n  return (\n    <SendBoxErrorBar\n      error={sendBoxError}\n      dismissAfterMs={\n        // don't dismiss the system message\n        systemMessage !== undefined && sendBoxError?.message !== systemMessage ? 10 * 1000 : undefined\n      }\n      onDismiss={onDismiss}\n    />\n  );\n};\n\nconst isMessageEmpty = (message: string): boolean => {\n  return message.trim().length === 0;\n};\n"]}

package/dist/dist-esm/react-components/src/components/RTE/RichTextEditor.d.ts

@@ -1,26 +0,0 @@
-import React from 'react';
-/**
- * Props for {@link RichTextEditor}.
- *
- * @beta
- */
-export interface RichTextEditorProps {
-    content?: string;
-    onChange: (newValue?: string) => void;
-    placeholderText?: string;
-}
-/**
- * Props for {@link RichTextEditor}.
- *
- * @beta
- */
-export interface RichTextEditorComponentRef {
-    focus: () => void;
-}
-/**
- * A component to wrap RoosterJS Rich Text Editor.
- *
- * @beta
- */
-export declare const RichTextEditor: React.ForwardRefExoticComponent<RichTextEditorProps & React.RefAttributes<RichTextEditorComponentRef>>;
-//# sourceMappingURL=RichTextEditor.d.ts.map