@azure/communication-react 1.18.0-alpha-202407200014 → 1.18.0

package/dist/dist-esm/react-components/src/components/RichTextEditor/Toolbar/RichTextToolbar.js

@@ -1,229 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-import React, { useCallback, useEffect, useMemo } from 'react';
-import { CommandBar, ContextualMenuItemType, Icon } from '@fluentui/react';
-import { toolbarButtonStyle, ribbonDividerStyle, ribbonOverflowButtonStyle, richTextToolbarStyle } from '../../styles/RichTextEditor.styles';
-import { useTheme } from '../../../theming';
-import { toggleBold, toggleItalic, toggleUnderline, toggleBullet, toggleNumbering, setIndentation, insertTable } from 'roosterjs-content-model-api';
-import { richTextInsertTableCommandBarItem } from './Table/RichTextInsertTableCommandBarItem';
-const MaxRowsNumber = 5;
-const MaxColumnsNumber = 5;
-/**
- * A component to display rich text toolbar.
- *
- * @beta
- */
-export const RichTextToolbar = (props) => {
-    const { plugin, strings } = props;
-    const theme = useTheme();
-    // need to re-render the buttons when format state changes
-    const [formatState, setFormatState] = React.useState(undefined);
-    useEffect(() => {
-        // update the format state on editor events
-        plugin.onFormatChanged = setFormatState;
-    }, [plugin]);
-    const boldButton = useMemo(() => {
-        return getCommandBarItem({
-            dataTestId: 'rich-text-toolbar-bold-button',
-            key: 'RichTextToolbarBoldButton',
-            icon: 'RichTextBoldButtonIcon',
-            onClick: () => {
-                plugin.onToolbarButtonClick((editor) => {
-                    toggleBold(editor);
-                });
-            },
-            text: strings.richTextBoldTooltip,
-            checked: formatState !== undefined && formatState.isBold === true,
-            theme: theme
-        });
-    }, [formatState, plugin, strings.richTextBoldTooltip, theme]);
-    const italicButton = useMemo(() => {
-        return getCommandBarItem({
-            dataTestId: 'rich-text-toolbar-italic-button',
-            key: 'RichTextToolbarItalicButton',
-            icon: 'RichTextItalicButtonIcon',
-            onClick: () => {
-                plugin.onToolbarButtonClick((editor) => {
-                    toggleItalic(editor);
-                });
-            },
-            text: strings.richTextItalicTooltip,
-            checked: formatState !== undefined && (formatState === null || formatState === void 0 ? void 0 : formatState.isItalic) === true,
-            theme: theme
-        });
-    }, [formatState, plugin, strings.richTextItalicTooltip, theme]);
-    const underlineButton = useMemo(() => {
-        return getCommandBarItem({
-            dataTestId: 'rich-text-toolbar-underline-button',
-            key: 'RichTextToolbarUnderlineButton',
-            icon: 'RichTextUnderlineButtonIcon',
-            onClick: () => {
-                plugin.onToolbarButtonClick((editor) => {
-                    toggleUnderline(editor);
-                });
-            },
-            text: strings.richTextUnderlineTooltip,
-            checked: formatState !== undefined && (formatState === null || formatState === void 0 ? void 0 : formatState.isUnderline) === true,
-            theme: theme
-        });
-    }, [formatState, plugin, strings.richTextUnderlineTooltip, theme]);
-    const bulletListButton = useMemo(() => {
-        return getCommandBarItem({
-            dataTestId: 'rich-text-toolbar-bullet-list-button',
-            key: 'RichTextToolbarBulletListButton',
-            icon: 'RichTextBulletListButtonIcon',
-            onClick: () => {
-                plugin.onToolbarButtonClick((editor) => {
-                    // check the format state to see if the bulleted list is already applied
-                    const isBullet = formatState === null || formatState === void 0 ? void 0 : formatState.isBullet;
-                    toggleBullet(editor);
-                    // the bulleted list was added
-                    if (!isBullet) {
-                        setTimeout(() => {
-                            // a small delay and polite aria live are needed for MacOS VoiceOver to announce the change
-                            editor.announce({ ariaLiveMode: 'polite', text: strings.richTextBulletedListAppliedAnnouncement });
-                        }, 50);
-                    }
-                });
-            },
-            text: strings.richTextBulletListTooltip,
-            checked: formatState !== undefined && (formatState === null || formatState === void 0 ? void 0 : formatState.isBullet) === true,
-            theme: theme
-        });
-    }, [formatState, plugin, strings.richTextBulletListTooltip, strings.richTextBulletedListAppliedAnnouncement, theme]);
-    const numberListButton = useMemo(() => {
-        return getCommandBarItem({
-            dataTestId: 'rich-text-toolbar-number-list-button',
-            key: 'RichTextToolbarNumberListButton',
-            icon: 'RichTextNumberListButtonIcon',
-            onClick: () => {
-                plugin.onToolbarButtonClick((editor) => {
-                    // check the format state to see if the numbered list is already applied
-                    const isNumbering = formatState === null || formatState === void 0 ? void 0 : formatState.isNumbering;
-                    toggleNumbering(editor);
-                    // the numbered list was added
-                    if (!isNumbering) {
-                        // a small delay and polite aria live are needed for MacOS VoiceOver to announce the change
-                        setTimeout(() => {
-                            editor.announce({ ariaLiveMode: 'polite', text: strings.richTextNumberedListAppliedAnnouncement });
-                        }, 50);
-                    }
-                });
-            },
-            text: strings.richTextNumberListTooltip,
-            checked: formatState !== undefined && (formatState === null || formatState === void 0 ? void 0 : formatState.isNumbering) === true,
-            theme: theme
-        });
-    }, [formatState, plugin, strings.richTextNumberListTooltip, strings.richTextNumberedListAppliedAnnouncement, theme]);
-    const indentDecreaseButton = useMemo(() => {
-        return getCommandBarItem({
-            dataTestId: 'rich-text-toolbar-indent-decrease-button',
-            key: 'RichTextToolbarIndentDecreaseButton',
-            icon: 'RichTextIndentDecreaseButtonIcon',
-            onClick: () => {
-                plugin.onToolbarButtonClick((editor) => {
-                    setIndentation(editor, 'outdent');
-                });
-            },
-            text: strings.richTextDecreaseIndentTooltip,
-            canCheck: false,
-            theme: theme
-        });
-    }, [plugin, strings.richTextDecreaseIndentTooltip, theme]);
-    const indentIncreaseButton = useMemo(() => {
-        return getCommandBarItem({
-            dataTestId: 'rich-text-toolbar-indent-increase-button',
-            key: 'RichTextToolbarIndentIncreaseButton',
-            icon: 'RichTextIndentIncreaseButtonIcon',
-            onClick: () => {
-                plugin.onToolbarButtonClick((editor) => {
-                    setIndentation(editor, 'indent');
-                });
-            },
-            text: strings.richTextIncreaseIndentTooltip,
-            canCheck: false,
-            theme: theme
-        });
-    }, [plugin, strings.richTextIncreaseIndentTooltip, theme]);
-    const divider = useCallback((key) => {
-        return dividerCommandBarItem(theme, key);
-    }, [theme]);
-    const tableButton = useMemo(() => {
-        return richTextInsertTableCommandBarItem(theme, MaxRowsNumber, MaxColumnsNumber, strings, (column, row) => {
-            plugin.onToolbarButtonClick((editor) => {
-                //add format
-                insertTable(editor, column, row);
-                // when subMenuProps is used and the menu is dismissed, focus is set to the command bar item that opened the menu
-                // set focus to editor on next re-render
-                setTimeout(() => {
-                    editor.focus();
-                });
-            });
-        });
-    }, [plugin, strings, theme]);
-    const buttons = useMemo(() => {
-        return [
-            boldButton,
-            italicButton,
-            underlineButton,
-            divider('RichTextRibbonTextFormatDivider'),
-            bulletListButton,
-            numberListButton,
-            indentDecreaseButton,
-            indentIncreaseButton,
-            divider('RichTextRibbonTableDivider'),
-            tableButton
-        ];
-    }, [
-        boldButton,
-        italicButton,
-        underlineButton,
-        divider,
-        bulletListButton,
-        numberListButton,
-        indentDecreaseButton,
-        indentIncreaseButton,
-        tableButton
-    ]);
-    const overflowButtonProps = useMemo(() => {
-        return {
-            ariaLabel: strings.richTextToolbarMoreButtonAriaLabel,
-            styles: toolbarButtonStyle(theme),
-            menuProps: {
-                items: [], // CommandBar will determine items rendered in overflow
-                isBeakVisible: false,
-                styles: ribbonOverflowButtonStyle(theme)
-            }
-        };
-    }, [strings.richTextToolbarMoreButtonAriaLabel, theme]);
-    return (React.createElement(CommandBar, { items: buttons, "data-testid": 'rich-text-editor-toolbar', styles: richTextToolbarStyle, overflowButtonProps: overflowButtonProps }));
-};
-const getCommandBarItem = ({ key, icon, onClick, text, canCheck = true, checked = false, disabled = false, theme, dataTestId }) => {
-    return {
-        role: canCheck ? 'menuitemcheckbox' : 'menuitem',
-        'aria-checked': canCheck ? checked : undefined, // `menuitem` role doesn't support `aria-checked`
-        'data-testid': dataTestId,
-        key: key,
-        iconProps: { iconName: icon },
-        onClick: onClick,
-        text: text,
-        ariaLabel: text,
-        iconOnly: true,
-        canCheck: canCheck,
-        buttonStyles: Object.assign({}, toolbarButtonStyle(theme)),
-        checked: checked,
-        disabled: disabled
-    };
-};
-const dividerCommandBarItem = (theme, key) => {
-    return {
-        key: key,
-        disabled: true,
-        // show the item correctly for the overflow menu
-        itemType: ContextualMenuItemType.Divider,
-        // this is still needed to remove checkmark icon space even though it is a divider
-        canCheck: false,
-        onRender: () => React.createElement(Icon, { iconName: "RichTextDividerIcon", className: ribbonDividerStyle(theme) })
-    };
-};
-//# sourceMappingURL=RichTextToolbar.js.map

package/dist/dist-esm/react-components/src/components/RichTextEditor/Toolbar/RichTextToolbar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"RichTextToolbar.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/RichTextEditor/Toolbar/RichTextToolbar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,UAAU,EAAE,sBAAsB,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAE3E,OAAO,EACL,kBAAkB,EAClB,kBAAkB,EAClB,yBAAyB,EACzB,oBAAoB,EACrB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,OAAO,EACL,UAAU,EACV,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,eAAe,EACf,cAAc,EACd,WAAW,EACZ,MAAM,6BAA6B,CAAC;AAErC,OAAO,EAAE,iCAAiC,EAAE,MAAM,2CAA2C,CAAC;AAE9F,MAAM,aAAa,GAAG,CAAC,CAAC;AACxB,MAAM,gBAAgB,GAAG,CAAC,CAAC;AAc3B;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;IAC1E,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAClC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,0DAA0D;IAC1D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAsC,SAAS,CAAC,CAAC;IAErG,SAAS,CAAC,GAAG,EAAE;QACb,2CAA2C;QAC3C,MAAM,CAAC,eAAe,GAAG,cAAc,CAAC;IAC1C,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,MAAM,UAAU,GAAyB,OAAO,CAAC,GAAG,EAAE;QACpD,OAAO,iBAAiB,CAAC;YACvB,UAAU,EAAE,+BAA+B;YAC3C,GAAG,EAAE,2BAA2B;YAChC,IAAI,EAAE,wBAAwB;YAC9B,OAAO,EAAE,GAAG,EAAE;gBACZ,MAAM,CAAC,oBAAoB,CAAC,CAAC,MAAM,EAAE,EAAE;oBACrC,UAAU,CAAC,MAAM,CAAC,CAAC;gBACrB,CAAC,CAAC,CAAC;YACL,CAAC;YACD,IAAI,EAAE,OAAO,CAAC,mBAAmB;YACjC,OAAO,EAAE,WAAW,KAAK,SAAS,IAAI,WAAW,CAAC,MAAM,KAAK,IAAI;YACjE,KAAK,EAAE,KAAK;SACb,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,OAAO,CAAC,mBAAmB,EAAE,KAAK,CAAC,CAAC,CAAC;IAE9D,MAAM,YAAY,GAAyB,OAAO,CAAC,GAAG,EAAE;QACtD,OAAO,iBAAiB,CAAC;YACvB,UAAU,EAAE,iCAAiC;YAC7C,GAAG,EAAE,6BAA6B;YAClC,IAAI,EAAE,0BAA0B;YAChC,OAAO,EAAE,GAAG,EAAE;gBACZ,MAAM,CAAC,oBAAoB,CAAC,CAAC,MAAM,EAAE,EAAE;oBACrC,YAAY,CAAC,MAAM,CAAC,CAAC;gBACvB,CAAC,CAAC,CAAC;YACL,CAAC;YACD,IAAI,EAAE,OAAO,CAAC,qBAAqB;YACnC,OAAO,EAAE,WAAW,KAAK,SAAS,IAAI,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,QAAQ,MAAK,IAAI;YACpE,KAAK,EAAE,KAAK;SACb,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,OAAO,CAAC,qBAAqB,EAAE,KAAK,CAAC,CAAC,CAAC;IAEhE,MAAM,eAAe,GAAyB,OAAO,CAAC,GAAG,EAAE;QACzD,OAAO,iBAAiB,CAAC;YACvB,UAAU,EAAE,oCAAoC;YAChD,GAAG,EAAE,gCAAgC;YACrC,IAAI,EAAE,6BAA6B;YACnC,OAAO,EAAE,GAAG,EAAE;gBACZ,MAAM,CAAC,oBAAoB,CAAC,CAAC,MAAM,EAAE,EAAE;oBACrC,eAAe,CAAC,MAAM,CAAC,CAAC;gBAC1B,CAAC,CAAC,CAAC;YACL,CAAC;YACD,IAAI,EAAE,OAAO,CAAC,wBAAwB;YACtC,OAAO,EAAE,WAAW,KAAK,SAAS,IAAI,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,WAAW,MAAK,IAAI;YACvE,KAAK,EAAE,KAAK;SACb,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,OAAO,CAAC,wBAAwB,EAAE,KAAK,CAAC,CAAC,CAAC;IAEnE,MAAM,gBAAgB,GAAyB,OAAO,CAAC,GAAG,EAAE;QAC1D,OAAO,iBAAiB,CAAC;YACvB,UAAU,EAAE,sCAAsC;YAClD,GAAG,EAAE,iCAAiC;YACtC,IAAI,EAAE,8BAA8B;YACpC,OAAO,EAAE,GAAG,EAAE;gBACZ,MAAM,CAAC,oBAAoB,CAAC,CAAC,MAAM,EAAE,EAAE;oBACrC,wEAAwE;oBACxE,MAAM,QAAQ,GAAG,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,QAAQ,CAAC;oBACvC,YAAY,CAAC,MAAM,CAAC,CAAC;oBACrB,8BAA8B;oBAC9B,IAAI,CAAC,QAAQ,EAAE,CAAC;wBACd,UAAU,CAAC,GAAG,EAAE;4BACd,2FAA2F;4BAC3F,MAAM,CAAC,QAAQ,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,CAAC,uCAAuC,EAAE,CAAC,CAAC;wBACrG,CAAC,EAAE,EAAE,CAAC,CAAC;oBACT,CAAC;gBACH,CAAC,CAAC,CAAC;YACL,CAAC;YACD,IAAI,EAAE,OAAO,CAAC,yBAAyB;YACvC,OAAO,EAAE,WAAW,KAAK,SAAS,IAAI,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,QAAQ,MAAK,IAAI;YACpE,KAAK,EAAE,KAAK;SACb,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,OAAO,CAAC,yBAAyB,EAAE,OAAO,CAAC,uCAAuC,EAAE,KAAK,CAAC,CAAC,CAAC;IAErH,MAAM,gBAAgB,GAAyB,OAAO,CAAC,GAAG,EAAE;QAC1D,OAAO,iBAAiB,CAAC;YACvB,UAAU,EAAE,sCAAsC;YAClD,GAAG,EAAE,iCAAiC;YACtC,IAAI,EAAE,8BAA8B;YACpC,OAAO,EAAE,GAAG,EAAE;gBACZ,MAAM,CAAC,oBAAoB,CAAC,CAAC,MAAM,EAAE,EAAE;oBACrC,wEAAwE;oBACxE,MAAM,WAAW,GAAG,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,WAAW,CAAC;oBAC7C,eAAe,CAAC,MAAM,CAAC,CAAC;oBACxB,8BAA8B;oBAC9B,IAAI,CAAC,WAAW,EAAE,CAAC;wBACjB,2FAA2F;wBAC3F,UAAU,CAAC,GAAG,EAAE;4BACd,MAAM,CAAC,QAAQ,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,CAAC,uCAAuC,EAAE,CAAC,CAAC;wBACrG,CAAC,EAAE,EAAE,CAAC,CAAC;oBACT,CAAC;gBACH,CAAC,CAAC,CAAC;YACL,CAAC;YACD,IAAI,EAAE,OAAO,CAAC,yBAAyB;YACvC,OAAO,EAAE,WAAW,KAAK,SAAS,IAAI,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,WAAW,MAAK,IAAI;YACvE,KAAK,EAAE,KAAK;SACb,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,OAAO,CAAC,yBAAyB,EAAE,OAAO,CAAC,uCAAuC,EAAE,KAAK,CAAC,CAAC,CAAC;IAErH,MAAM,oBAAoB,GAAyB,OAAO,CAAC,GAAG,EAAE;QAC9D,OAAO,iBAAiB,CAAC;YACvB,UAAU,EAAE,0CAA0C;YACtD,GAAG,EAAE,qCAAqC;YAC1C,IAAI,EAAE,kCAAkC;YACxC,OAAO,EAAE,GAAG,EAAE;gBACZ,MAAM,CAAC,oBAAoB,CAAC,CAAC,MAAM,EAAE,EAAE;oBACrC,cAAc,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;gBACpC,CAAC,CAAC,CAAC;YACL,CAAC;YACD,IAAI,EAAE,OAAO,CAAC,6BAA6B;YAC3C,QAAQ,EAAE,KAAK;YACf,KAAK,EAAE,KAAK;SACb,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,6BAA6B,EAAE,KAAK,CAAC,CAAC,CAAC;IAE3D,MAAM,oBAAoB,GAAyB,OAAO,CAAC,GAAG,EAAE;QAC9D,OAAO,iBAAiB,CAAC;YACvB,UAAU,EAAE,0CAA0C;YACtD,GAAG,EAAE,qCAAqC;YAC1C,IAAI,EAAE,kCAAkC;YACxC,OAAO,EAAE,GAAG,EAAE;gBACZ,MAAM,CAAC,oBAAoB,CAAC,CAAC,MAAM,EAAE,EAAE;oBACrC,cAAc,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;gBACnC,CAAC,CAAC,CAAC;YACL,CAAC;YACD,IAAI,EAAE,OAAO,CAAC,6BAA6B;YAC3C,QAAQ,EAAE,KAAK;YACf,KAAK,EAAE,KAAK;SACb,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,6BAA6B,EAAE,KAAK,CAAC,CAAC,CAAC;IAE3D,MAAM,OAAO,GAAG,WAAW,CACzB,CAAC,GAAW,EAAE,EAAE;QACd,OAAO,qBAAqB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAC3C,CAAC,EACD,CAAC,KAAK,CAAC,CACR,CAAC;IAEF,MAAM,WAAW,GAAyB,OAAO,CAAC,GAAG,EAAE;QACrD,OAAO,iCAAiC,CACtC,KAAK,EACL,aAAa,EACb,gBAAgB,EAChB,OAAO,EACP,CAAC,MAAc,EAAE,GAAW,EAAE,EAAE;YAC9B,MAAM,CAAC,oBAAoB,CAAC,CAAC,MAAM,EAAE,EAAE;gBACrC,YAAY;gBACZ,WAAW,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC;gBACjC,iHAAiH;gBACjH,wCAAwC;gBACxC,UAAU,CAAC,GAAG,EAAE;oBACd,MAAM,CAAC,KAAK,EAAE,CAAC;gBACjB,CAAC,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;QACL,CAAC,CACF,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;IAE7B,MAAM,OAAO,GAA2B,OAAO,CAAC,GAAG,EAAE;QACnD,OAAO;YACL,UAAU;YACV,YAAY;YACZ,eAAe;YACf,OAAO,CAAC,iCAAiC,CAAC;YAC1C,gBAAgB;YAChB,gBAAgB;YAChB,oBAAoB;YACpB,oBAAoB;YACpB,OAAO,CAAC,4BAA4B,CAAC;YACrC,WAAW;SACZ,CAAC;IACJ,CAAC,EAAE;QACD,UAAU;QACV,YAAY;QACZ,eAAe;QACf,OAAO;QACP,gBAAgB;QAChB,gBAAgB;QAChB,oBAAoB;QACpB,oBAAoB;QACpB,WAAW;KACZ,CAAC,CAAC;IAEH,MAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE;QACvC,OAAO;YACL,SAAS,EAAE,OAAO,CAAC,kCAAkC;YACrD,MAAM,EAAE,kBAAkB,CAAC,KAAK,CAAC;YACjC,SAAS,EAAE;gBACT,KAAK,EAAE,EAAE,EAAE,uDAAuD;gBAClE,aAAa,EAAE,KAAK;gBACpB,MAAM,EAAE,yBAAyB,CAAC,KAAK,CAAC;aACzC;SACF,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,CAAC,kCAAkC,EAAE,KAAK,CAAC,CAAC,CAAC;IAExD,OAAO,CACL,oBAAC,UAAU,IACT,KAAK,EAAE,OAAO,iBACD,0BAA0B,EACvC,MAAM,EAAE,oBAAoB,EAC5B,mBAAmB,EAAE,mBAAmB,GACxC,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,iBAAiB,GAAG,CAAC,EACzB,GAAG,EACH,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,QAAQ,GAAG,IAAI,EACf,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,UAAU,EAWX,EAAwB,EAAE;IACzB,OAAO;QACL,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,UAAU;QAChD,cAAc,EAAE,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,iDAAiD;QACjG,aAAa,EAAE,UAAU;QACzB,GAAG,EAAE,GAAG;QACR,SAAS,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;QAC7B,OAAO,EAAE,OAAO;QAChB,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,IAAI;QACf,QAAQ,EAAE,IAAI;QACd,QAAQ,EAAE,QAAQ;QAClB,YAAY,oBACP,kBAAkB,CAAC,KAAK,CAAC,CAC7B;QACD,OAAO,EAAE,OAAO;QAChB,QAAQ,EAAE,QAAQ;KACnB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,qBAAqB,GAAG,CAAC,KAAY,EAAE,GAAW,EAAwB,EAAE;IAChF,OAAO;QACL,GAAG,EAAE,GAAG;QACR,QAAQ,EAAE,IAAI;QACd,gDAAgD;QAChD,QAAQ,EAAE,sBAAsB,CAAC,OAAO;QACxC,kFAAkF;QAClF,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,GAAG,EAAE,CAAC,oBAAC,IAAI,IAAC,QAAQ,EAAC,qBAAqB,EAAC,SAAS,EAAE,kBAAkB,CAAC,KAAK,CAAC,GAAI;KAC9F,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport { RichTextToolbarPlugin } from '../Plugins/RichTextToolbarPlugin';\nimport { CommandBar, ContextualMenuItemType, Icon } from '@fluentui/react';\nimport type { ICommandBarItemProps, Theme } from '@fluentui/react';\nimport {\n  toolbarButtonStyle,\n  ribbonDividerStyle,\n  ribbonOverflowButtonStyle,\n  richTextToolbarStyle\n} from '../../styles/RichTextEditor.styles';\nimport { useTheme } from '../../../theming';\nimport { ContentModelFormatState } from 'roosterjs-content-model-types';\nimport {\n  toggleBold,\n  toggleItalic,\n  toggleUnderline,\n  toggleBullet,\n  toggleNumbering,\n  setIndentation,\n  insertTable\n} from 'roosterjs-content-model-api';\nimport { RichTextStrings } from '../RichTextSendBox';\nimport { richTextInsertTableCommandBarItem } from './Table/RichTextInsertTableCommandBarItem';\n\nconst MaxRowsNumber = 5;\nconst MaxColumnsNumber = 5;\n\n/**\n * Props for {@link RichTextToolbar}.\n *\n * @private\n */\nexport interface RichTextToolbarProps {\n  // The rich text toolbar plugin used for connect editor and the ribbon.\n  plugin: RichTextToolbarPlugin;\n  // Strings for localization.\n  strings: Partial<RichTextStrings>;\n}\n\n/**\n * A component to display rich text toolbar.\n *\n * @beta\n */\nexport const RichTextToolbar = (props: RichTextToolbarProps): JSX.Element => {\n  const { plugin, strings } = props;\n  const theme = useTheme();\n  // need to re-render the buttons when format state changes\n  const [formatState, setFormatState] = React.useState<ContentModelFormatState | undefined>(undefined);\n\n  useEffect(() => {\n    // update the format state on editor events\n    plugin.onFormatChanged = setFormatState;\n  }, [plugin]);\n\n  const boldButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-bold-button',\n      key: 'RichTextToolbarBoldButton',\n      icon: 'RichTextBoldButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick((editor) => {\n          toggleBold(editor);\n        });\n      },\n      text: strings.richTextBoldTooltip,\n      checked: formatState !== undefined && formatState.isBold === true,\n      theme: theme\n    });\n  }, [formatState, plugin, strings.richTextBoldTooltip, theme]);\n\n  const italicButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-italic-button',\n      key: 'RichTextToolbarItalicButton',\n      icon: 'RichTextItalicButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick((editor) => {\n          toggleItalic(editor);\n        });\n      },\n      text: strings.richTextItalicTooltip,\n      checked: formatState !== undefined && formatState?.isItalic === true,\n      theme: theme\n    });\n  }, [formatState, plugin, strings.richTextItalicTooltip, theme]);\n\n  const underlineButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-underline-button',\n      key: 'RichTextToolbarUnderlineButton',\n      icon: 'RichTextUnderlineButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick((editor) => {\n          toggleUnderline(editor);\n        });\n      },\n      text: strings.richTextUnderlineTooltip,\n      checked: formatState !== undefined && formatState?.isUnderline === true,\n      theme: theme\n    });\n  }, [formatState, plugin, strings.richTextUnderlineTooltip, theme]);\n\n  const bulletListButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-bullet-list-button',\n      key: 'RichTextToolbarBulletListButton',\n      icon: 'RichTextBulletListButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick((editor) => {\n          // check the format state to see if the bulleted list is already applied\n          const isBullet = formatState?.isBullet;\n          toggleBullet(editor);\n          // the bulleted list was added\n          if (!isBullet) {\n            setTimeout(() => {\n              // a small delay and polite aria live are needed for MacOS VoiceOver to announce the change\n              editor.announce({ ariaLiveMode: 'polite', text: strings.richTextBulletedListAppliedAnnouncement });\n            }, 50);\n          }\n        });\n      },\n      text: strings.richTextBulletListTooltip,\n      checked: formatState !== undefined && formatState?.isBullet === true,\n      theme: theme\n    });\n  }, [formatState, plugin, strings.richTextBulletListTooltip, strings.richTextBulletedListAppliedAnnouncement, theme]);\n\n  const numberListButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-number-list-button',\n      key: 'RichTextToolbarNumberListButton',\n      icon: 'RichTextNumberListButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick((editor) => {\n          // check the format state to see if the numbered list is already applied\n          const isNumbering = formatState?.isNumbering;\n          toggleNumbering(editor);\n          // the numbered list was added\n          if (!isNumbering) {\n            // a small delay and polite aria live are needed for MacOS VoiceOver to announce the change\n            setTimeout(() => {\n              editor.announce({ ariaLiveMode: 'polite', text: strings.richTextNumberedListAppliedAnnouncement });\n            }, 50);\n          }\n        });\n      },\n      text: strings.richTextNumberListTooltip,\n      checked: formatState !== undefined && formatState?.isNumbering === true,\n      theme: theme\n    });\n  }, [formatState, plugin, strings.richTextNumberListTooltip, strings.richTextNumberedListAppliedAnnouncement, theme]);\n\n  const indentDecreaseButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-indent-decrease-button',\n      key: 'RichTextToolbarIndentDecreaseButton',\n      icon: 'RichTextIndentDecreaseButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick((editor) => {\n          setIndentation(editor, 'outdent');\n        });\n      },\n      text: strings.richTextDecreaseIndentTooltip,\n      canCheck: false,\n      theme: theme\n    });\n  }, [plugin, strings.richTextDecreaseIndentTooltip, theme]);\n\n  const indentIncreaseButton: ICommandBarItemProps = useMemo(() => {\n    return getCommandBarItem({\n      dataTestId: 'rich-text-toolbar-indent-increase-button',\n      key: 'RichTextToolbarIndentIncreaseButton',\n      icon: 'RichTextIndentIncreaseButtonIcon',\n      onClick: () => {\n        plugin.onToolbarButtonClick((editor) => {\n          setIndentation(editor, 'indent');\n        });\n      },\n      text: strings.richTextIncreaseIndentTooltip,\n      canCheck: false,\n      theme: theme\n    });\n  }, [plugin, strings.richTextIncreaseIndentTooltip, theme]);\n\n  const divider = useCallback(\n    (key: string) => {\n      return dividerCommandBarItem(theme, key);\n    },\n    [theme]\n  );\n\n  const tableButton: ICommandBarItemProps = useMemo(() => {\n    return richTextInsertTableCommandBarItem(\n      theme,\n      MaxRowsNumber,\n      MaxColumnsNumber,\n      strings,\n      (column: number, row: number) => {\n        plugin.onToolbarButtonClick((editor) => {\n          //add format\n          insertTable(editor, column, row);\n          // when subMenuProps is used and the menu is dismissed, focus is set to the command bar item that opened the menu\n          // set focus to editor on next re-render\n          setTimeout(() => {\n            editor.focus();\n          });\n        });\n      }\n    );\n  }, [plugin, strings, theme]);\n\n  const buttons: ICommandBarItemProps[] = useMemo(() => {\n    return [\n      boldButton,\n      italicButton,\n      underlineButton,\n      divider('RichTextRibbonTextFormatDivider'),\n      bulletListButton,\n      numberListButton,\n      indentDecreaseButton,\n      indentIncreaseButton,\n      divider('RichTextRibbonTableDivider'),\n      tableButton\n    ];\n  }, [\n    boldButton,\n    italicButton,\n    underlineButton,\n    divider,\n    bulletListButton,\n    numberListButton,\n    indentDecreaseButton,\n    indentIncreaseButton,\n    tableButton\n  ]);\n\n  const overflowButtonProps = useMemo(() => {\n    return {\n      ariaLabel: strings.richTextToolbarMoreButtonAriaLabel,\n      styles: toolbarButtonStyle(theme),\n      menuProps: {\n        items: [], // CommandBar will determine items rendered in overflow\n        isBeakVisible: false,\n        styles: ribbonOverflowButtonStyle(theme)\n      }\n    };\n  }, [strings.richTextToolbarMoreButtonAriaLabel, theme]);\n\n  return (\n    <CommandBar\n      items={buttons}\n      data-testid={'rich-text-editor-toolbar'}\n      styles={richTextToolbarStyle}\n      overflowButtonProps={overflowButtonProps}\n    />\n  );\n};\n\nconst getCommandBarItem = ({\n  key,\n  icon,\n  onClick,\n  text,\n  canCheck = true,\n  checked = false,\n  disabled = false,\n  theme,\n  dataTestId\n}: {\n  key: string;\n  icon: string;\n  onClick: () => void;\n  text?: string;\n  canCheck?: boolean;\n  checked?: boolean;\n  disabled?: boolean;\n  theme: Theme;\n  dataTestId: string;\n}): ICommandBarItemProps => {\n  return {\n    role: canCheck ? 'menuitemcheckbox' : 'menuitem',\n    'aria-checked': canCheck ? checked : undefined, // `menuitem` role doesn't support `aria-checked`\n    'data-testid': dataTestId,\n    key: key,\n    iconProps: { iconName: icon },\n    onClick: onClick,\n    text: text,\n    ariaLabel: text,\n    iconOnly: true,\n    canCheck: canCheck,\n    buttonStyles: {\n      ...toolbarButtonStyle(theme)\n    },\n    checked: checked,\n    disabled: disabled\n  };\n};\n\nconst dividerCommandBarItem = (theme: Theme, key: string): ICommandBarItemProps => {\n  return {\n    key: key,\n    disabled: true,\n    // show the item correctly for the overflow menu\n    itemType: ContextualMenuItemType.Divider,\n    // this is still needed to remove checkmark icon space even though it is a divider\n    canCheck: false,\n    onRender: () => <Icon iconName=\"RichTextDividerIcon\" className={ribbonDividerStyle(theme)} />\n  };\n};\n"]}

package/dist/dist-esm/react-components/src/components/RichTextEditor/Toolbar/Table/RichTextInsertTableCommandBarItem.d.ts

@@ -1,7 +0,0 @@
-import type { ICommandBarItemProps, Theme } from '@fluentui/react';
-import { RichTextStrings } from '../../RichTextSendBox';
-/**
- * "Insert table" command bar item for the rich text toolbar
- */
-export declare const richTextInsertTableCommandBarItem: (theme: Theme, maxRowsNumber: number, maxColumnsNumber: number, strings: Partial<RichTextStrings>, onClick: (column: number, row: number) => void) => ICommandBarItemProps;
-//# sourceMappingURL=RichTextInsertTableCommandBarItem.d.ts.map

package/dist/dist-esm/react-components/src/components/RichTextEditor/Toolbar/Table/RichTextInsertTableCommandBarItem.js

@@ -1,49 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-import React from 'react';
-import { FocusZoneDirection } from '@fluentui/react';
-import { insertTableMenuTablePane, toolbarTableButtonStyle } from '../../../styles/RichTextEditor.styles';
-import { RichTextInsertTablePane } from './RichTextInsertTablePane';
-import { parseKey } from '../../../utils/RichTextTableUtils';
-import { RichTextToolbarTableIcon } from './RichTextToolbarTableIcon';
-/**
- * "Insert table" command bar item for the rich text toolbar
- */
-export const richTextInsertTableCommandBarItem = (theme, maxRowsNumber, maxColumnsNumber, strings, onClick) => {
-    return {
-        'data-testid': 'rich-text-toolbar-insert-table-button',
-        key: 'RichTextToolbarInsertTableButton',
-        text: strings.richTextInsertTableTooltip,
-        ariaLabel: strings.richTextInsertTableTooltip,
-        // hide the chevron icon
-        menuIconProps: {
-            hidden: true
-        },
-        onRenderIcon: () => {
-            return React.createElement(RichTextToolbarTableIcon, null);
-        },
-        buttonStyles: toolbarTableButtonStyle(theme),
-        canCheck: false,
-        iconOnly: true,
-        subMenuProps: {
-            calloutProps: { isBeakVisible: false },
-            shouldFocusOnMount: true,
-            className: insertTableMenuTablePane,
-            focusZoneProps: { direction: FocusZoneDirection.bidirectional },
-            items: [
-                {
-                    key: 'RichTextToolbarInsertTableMenu',
-                    text: strings.richTextInsertTableMenuTitle,
-                    canCheck: false,
-                    onRender: (item) => {
-                        return (React.createElement(RichTextInsertTablePane, { item: item, onClick: (key) => {
-                                const { row, column } = parseKey(key);
-                                onClick(column, row);
-                            }, maxColumnsNumber: maxColumnsNumber, maxRowsNumber: maxRowsNumber }));
-                    }
-                }
-            ]
-        }
-    };
-};
-//# sourceMappingURL=RichTextInsertTableCommandBarItem.js.map

package/dist/dist-esm/react-components/src/components/RichTextEditor/Toolbar/Table/RichTextInsertTableCommandBarItem.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"RichTextInsertTableCommandBarItem.js","sourceRoot":"","sources":["../../../../../../../../../react-components/src/components/RichTextEditor/Toolbar/Table/RichTextInsertTableCommandBarItem.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErD,OAAO,EAAE,wBAAwB,EAAE,uBAAuB,EAAE,MAAM,uCAAuC,CAAC;AAC1G,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAE7D,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAEtE;;GAEG;AACH,MAAM,CAAC,MAAM,iCAAiC,GAAG,CAC/C,KAAY,EACZ,aAAqB,EACrB,gBAAwB,EACxB,OAAiC,EACjC,OAA8C,EACxB,EAAE;IACxB,OAAO;QACL,aAAa,EAAE,uCAAuC;QACtD,GAAG,EAAE,kCAAkC;QACvC,IAAI,EAAE,OAAO,CAAC,0BAA0B;QACxC,SAAS,EAAE,OAAO,CAAC,0BAA0B;QAC7C,wBAAwB;QACxB,aAAa,EAAE;YACb,MAAM,EAAE,IAAI;SACb;QACD,YAAY,EAAE,GAAG,EAAE;YACjB,OAAO,oBAAC,wBAAwB,OAAG,CAAC;QACtC,CAAC;QACD,YAAY,EAAE,uBAAuB,CAAC,KAAK,CAAC;QAC5C,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,IAAI;QACd,YAAY,EAAE;YACZ,YAAY,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE;YACtC,kBAAkB,EAAE,IAAI;YACxB,SAAS,EAAE,wBAAwB;YACnC,cAAc,EAAE,EAAE,SAAS,EAAE,kBAAkB,CAAC,aAAa,EAAE;YAC/D,KAAK,EAAE;gBACL;oBACE,GAAG,EAAE,gCAAgC;oBACrC,IAAI,EAAE,OAAO,CAAC,4BAA4B;oBAC1C,QAAQ,EAAE,KAAK;oBACf,QAAQ,EAAE,CAAC,IAAyB,EAAE,EAAE;wBACtC,OAAO,CACL,oBAAC,uBAAuB,IACtB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,CAAC,GAAG,EAAE,EAAE;gCACf,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;gCACtC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;4BACvB,CAAC,EACD,gBAAgB,EAAE,gBAAgB,EAClC,aAAa,EAAE,aAAa,GAC5B,CACH,CAAC;oBACJ,CAAC;iBACF;aACF;SACF;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { FocusZoneDirection } from '@fluentui/react';\nimport type { ICommandBarItemProps, IContextualMenuItem, Theme } from '@fluentui/react';\nimport { insertTableMenuTablePane, toolbarTableButtonStyle } from '../../../styles/RichTextEditor.styles';\nimport { RichTextInsertTablePane } from './RichTextInsertTablePane';\nimport { parseKey } from '../../../utils/RichTextTableUtils';\nimport { RichTextStrings } from '../../RichTextSendBox';\nimport { RichTextToolbarTableIcon } from './RichTextToolbarTableIcon';\n\n/**\n * \"Insert table\" command bar item for the rich text toolbar\n */\nexport const richTextInsertTableCommandBarItem = (\n  theme: Theme,\n  maxRowsNumber: number,\n  maxColumnsNumber: number,\n  strings: Partial<RichTextStrings>,\n  onClick: (column: number, row: number) => void\n): ICommandBarItemProps => {\n  return {\n    'data-testid': 'rich-text-toolbar-insert-table-button',\n    key: 'RichTextToolbarInsertTableButton',\n    text: strings.richTextInsertTableTooltip,\n    ariaLabel: strings.richTextInsertTableTooltip,\n    // hide the chevron icon\n    menuIconProps: {\n      hidden: true\n    },\n    onRenderIcon: () => {\n      return <RichTextToolbarTableIcon />;\n    },\n    buttonStyles: toolbarTableButtonStyle(theme),\n    canCheck: false,\n    iconOnly: true,\n    subMenuProps: {\n      calloutProps: { isBeakVisible: false },\n      shouldFocusOnMount: true,\n      className: insertTableMenuTablePane,\n      focusZoneProps: { direction: FocusZoneDirection.bidirectional },\n      items: [\n        {\n          key: 'RichTextToolbarInsertTableMenu',\n          text: strings.richTextInsertTableMenuTitle,\n          canCheck: false,\n          onRender: (item: IContextualMenuItem) => {\n            return (\n              <RichTextInsertTablePane\n                item={item}\n                onClick={(key) => {\n                  const { row, column } = parseKey(key);\n                  onClick(column, row);\n                }}\n                maxColumnsNumber={maxColumnsNumber}\n                maxRowsNumber={maxRowsNumber}\n              />\n            );\n          }\n        }\n      ]\n    }\n  };\n};\n"]}

package/dist/dist-esm/react-components/src/components/RichTextEditor/Toolbar/Table/RichTextInsertTablePane.d.ts

@@ -1,15 +0,0 @@
-/// <reference types="react" />
-import type { IContextualMenuItem } from '@fluentui/react';
-interface RichTextInsertTablePaneProps {
-    item: IContextualMenuItem;
-    onClick: (key: string) => void;
-    maxRowsNumber: number;
-    maxColumnsNumber: number;
-}
-/**
- * @private
- * Component for the insert table pane
- */
-export declare const RichTextInsertTablePane: (props: RichTextInsertTablePaneProps) => JSX.Element;
-export {};
-//# sourceMappingURL=RichTextInsertTablePane.d.ts.map

package/dist/dist-esm/react-components/src/components/RichTextEditor/Toolbar/Table/RichTextInsertTablePane.js

@@ -1,67 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-import React, { useMemo } from 'react';
-import { FocusZone, FocusZoneDirection, mergeStyles } from '@fluentui/react';
-import { insertTableMenuCellButtonSelectedStyles, insertTableMenuCellButtonStyles, insertTableMenuFocusZone, insertTableMenuTitleStyles } from '../../../styles/RichTextEditor.styles';
-import { ColumnRowReplaceString, createKey } from '../../../utils/RichTextTableUtils';
-import { useTheme } from '../../../../theming';
-// This file uses RoosterJS React package implementation with updates to UI components and styles.
-const RowColumnInitialValue = 0;
-/**
- * @private
- * Component for the insert table pane
- */
-export const RichTextInsertTablePane = (props) => {
-    const { item, onClick, maxColumnsNumber, maxRowsNumber } = props;
-    const [column, setColumn] = React.useState(RowColumnInitialValue);
-    const [row, setRow] = React.useState(RowColumnInitialValue);
-    const theme = useTheme();
-    const updateSize = React.useCallback((target) => {
-        if (target !== undefined && target.dataset.column !== undefined && target.dataset.row !== undefined) {
-            const column = parseInt(target.dataset.column);
-            const row = parseInt(target.dataset.row);
-            if (column >= RowColumnInitialValue &&
-                column < maxColumnsNumber &&
-                row >= RowColumnInitialValue &&
-                row < maxRowsNumber) {
-                setColumn(column);
-                setRow(row);
-            }
-        }
-    }, [maxColumnsNumber, maxRowsNumber]);
-    const onMouseEnter = React.useCallback((e) => {
-        updateSize(e.target);
-    }, [updateSize]);
-    const onTouchStart = React.useCallback((e) => {
-        updateSize(e.target);
-    }, [updateSize]);
-    const onClickButton = React.useCallback(() => {
-        onClick(createKey(formatRowColumnText(row), formatRowColumnText(column)));
-    }, [row, column, onClick]);
-    const items = React.useMemo(() => {
-        var _a;
-        const items = [];
-        for (let i = 0; i < maxRowsNumber; i++) {
-            for (let j = 0; j < maxColumnsNumber; j++) {
-                const key = `cell_${i}_${j}`;
-                const isSelected = j <= column && i <= row;
-                items.push(React.createElement("button", { className: mergeStyles(insertTableMenuCellButtonStyles(theme), isSelected ? insertTableMenuCellButtonSelectedStyles(theme) : undefined), onClick: onClickButton, key: key, id: key, "data-column": j, "data-row": i, "data-is-focusable": true, onMouseEnter: onMouseEnter, onTouchStart: onTouchStart, "aria-label": formatText((_a = item.text) !== null && _a !== void 0 ? _a : '', formatRowColumnText(i), formatRowColumnText(j)), "data-testid": key }));
-            }
-        }
-        return items;
-    }, [maxRowsNumber, maxColumnsNumber, column, row, theme, onClickButton, onMouseEnter, onTouchStart, item.text]);
-    const text = useMemo(() => {
-        var _a;
-        return formatText((_a = item.text) !== null && _a !== void 0 ? _a : '', formatRowColumnText(row), formatRowColumnText(column));
-    }, [column, item.text, row]);
-    return (React.createElement("div", null,
-        React.createElement("div", { className: insertTableMenuTitleStyles }, text),
-        React.createElement(FocusZone, { defaultTabbableElement: `cell_${RowColumnInitialValue}_${RowColumnInitialValue}`, direction: FocusZoneDirection.bidirectional, onActiveElementChanged: updateSize, className: insertTableMenuFocusZone(theme) }, items)));
-};
-const formatText = (text, row, column) => {
-    return text.replace(`${ColumnRowReplaceString}`, `${column.toString()} x ${row.toString()}`);
-};
-const formatRowColumnText = (value) => {
-    return value + 1;
-};
-//# sourceMappingURL=RichTextInsertTablePane.js.map

package/dist/dist-esm/react-components/src/components/RichTextEditor/Toolbar/Table/RichTextInsertTablePane.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"RichTextInsertTablePane.js","sourceRoot":"","sources":["../../../../../../../../../react-components/src/components/RichTextEditor/Toolbar/Table/RichTextInsertTablePane.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useMemo } from 'react';\nimport { FocusZone, FocusZoneDirection, mergeStyles } from '@fluentui/react';\nimport type { IContextualMenuItem } from '@fluentui/react';\nimport {\n  insertTableMenuCellButtonSelectedStyles,\n  insertTableMenuCellButtonStyles,\n  insertTableMenuFocusZone,\n  insertTableMenuTitleStyles\n} from '../../../styles/RichTextEditor.styles';\nimport { ColumnRowReplaceString, createKey } from '../../../utils/RichTextTableUtils';\nimport { useTheme } from '../../../../theming';\n\n// This file uses RoosterJS React package implementation with updates to UI components and styles.\nconst RowColumnInitialValue = 0;\n\ninterface RichTextInsertTablePaneProps {\n  item: IContextualMenuItem;\n  onClick: (key: string) => void;\n  maxRowsNumber: number;\n  maxColumnsNumber: number;\n}\n\n/**\n * @private\n * Component for the insert table pane\n */\nexport const RichTextInsertTablePane = (props: RichTextInsertTablePaneProps): JSX.Element => {\n  const { item, onClick, maxColumnsNumber, maxRowsNumber } = props;\n  const [column, setColumn] = React.useState(RowColumnInitialValue);\n  const [row, setRow] = React.useState(RowColumnInitialValue);\n  const theme = useTheme();\n\n  const updateSize = React.useCallback(\n    (target?: HTMLElement) => {\n      if (target !== undefined && target.dataset.column !== undefined && target.dataset.row !== undefined) {\n        const column = parseInt(target.dataset.column);\n        const row = parseInt(target.dataset.row);\n\n        if (\n          column >= RowColumnInitialValue &&\n          column < maxColumnsNumber &&\n          row >= RowColumnInitialValue &&\n          row < maxRowsNumber\n        ) {\n          setColumn(column);\n          setRow(row);\n        }\n      }\n    },\n    [maxColumnsNumber, maxRowsNumber]\n  );\n\n  const onMouseEnter = React.useCallback(\n    (e: React.MouseEvent<HTMLButtonElement>) => {\n      updateSize(e.target as HTMLElement);\n    },\n    [updateSize]\n  );\n\n  const onTouchStart = React.useCallback(\n    (e: React.TouchEvent<HTMLButtonElement>) => {\n      updateSize(e.target as HTMLElement);\n    },\n    [updateSize]\n  );\n\n  const onClickButton = React.useCallback(() => {\n    onClick(createKey(formatRowColumnText(row), formatRowColumnText(column)));\n  }, [row, column, onClick]);\n\n  const items = React.useMemo(() => {\n    const items: JSX.Element[] = [];\n\n    for (let i = 0; i < maxRowsNumber; i++) {\n      for (let j = 0; j < maxColumnsNumber; j++) {\n        const key = `cell_${i}_${j}`;\n        const isSelected = j <= column && i <= row;\n        items.push(\n          <button\n            className={mergeStyles(\n              insertTableMenuCellButtonStyles(theme),\n              isSelected ? insertTableMenuCellButtonSelectedStyles(theme) : undefined\n            )}\n            onClick={onClickButton}\n            key={key}\n            id={key}\n            data-column={j}\n            data-row={i}\n            data-is-focusable={true}\n            onMouseEnter={onMouseEnter}\n            onTouchStart={onTouchStart}\n            aria-label={formatText(item.text ?? '', formatRowColumnText(i), formatRowColumnText(j))}\n            data-testid={key}\n          />\n        );\n      }\n    }\n\n    return items;\n  }, [maxRowsNumber, maxColumnsNumber, column, row, theme, onClickButton, onMouseEnter, onTouchStart, item.text]);\n\n  const text = useMemo(() => {\n    return formatText(item.text ?? '', formatRowColumnText(row), formatRowColumnText(column));\n  }, [column, item.text, row]);\n\n  return (\n    <div>\n      <div className={insertTableMenuTitleStyles}>{text}</div>\n      <FocusZone\n        defaultTabbableElement={`cell_${RowColumnInitialValue}_${RowColumnInitialValue}`}\n        direction={FocusZoneDirection.bidirectional}\n        onActiveElementChanged={updateSize}\n        className={insertTableMenuFocusZone(theme)}\n      >\n        {items}\n      </FocusZone>\n    </div>\n  );\n};\n\nconst formatText = (text: string, row: number, column: number): string => {\n  return text.replace(`${ColumnRowReplaceString}`, `${column.toString()} x ${row.toString()}`);\n};\n\nconst formatRowColumnText = (value: number): number => {\n  return value + 1;\n};\n"]}

package/dist/dist-esm/react-components/src/components/RichTextEditor/Toolbar/Table/RichTextToolbarTableIcon.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-/**
- * Renders the icon component for the insert table button in the rich text editor toolbar.
- */
-export declare const RichTextToolbarTableIcon: () => JSX.Element;
-//# sourceMappingURL=RichTextToolbarTableIcon.d.ts.map

package/dist/dist-esm/react-components/src/components/RichTextEditor/Toolbar/Table/RichTextToolbarTableIcon.js

@@ -1,13 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-import React from 'react';
-import { Icon, Stack } from '@fluentui/react';
-/**
- * Renders the icon component for the insert table button in the rich text editor toolbar.
- */
-export const RichTextToolbarTableIcon = () => {
-    return (React.createElement(Stack, null,
-        React.createElement(Icon, { iconName: "RichTextInsertTableFilledIcon", className: 'ribbon-table-button-filled-icon' }),
-        React.createElement(Icon, { iconName: "RichTextInsertTableRegularIcon", className: 'ribbon-table-button-regular-icon' })));
-};
-//# sourceMappingURL=RichTextToolbarTableIcon.js.map

package/dist/dist-esm/react-components/src/components/RichTextEditor/Toolbar/Table/RichTextToolbarTableIcon.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"RichTextToolbarTableIcon.js","sourceRoot":"","sources":["../../../../../../../../../react-components/src/components/RichTextEditor/Toolbar/Table/RichTextToolbarTableIcon.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAE9C;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAgB,EAAE;IACxD,OAAO,CACL,oBAAC,KAAK;QACJ,oBAAC,IAAI,IAAC,QAAQ,EAAC,+BAA+B,EAAC,SAAS,EAAE,iCAAiC,GAAI;QAC/F,oBAAC,IAAI,IAAC,QAAQ,EAAC,gCAAgC,EAAC,SAAS,EAAE,kCAAkC,GAAI,CAC3F,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { Icon, Stack } from '@fluentui/react';\n\n/**\n * Renders the icon component for the insert table button in the rich text editor toolbar.\n */\nexport const RichTextToolbarTableIcon = (): JSX.Element => {\n  return (\n    <Stack>\n      <Icon iconName=\"RichTextInsertTableFilledIcon\" className={'ribbon-table-button-filled-icon'} />\n      <Icon iconName=\"RichTextInsertTableRegularIcon\" className={'ribbon-table-button-regular-icon'} />\n    </Stack>\n  );\n};\n"]}

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

@@ -1,34 +0,0 @@
-/// <reference types="react" />
-/**
- * @beta
- * Error to be displayed to the user in an error bar above sendbox.
- */
-export interface SendBoxErrorBarError {
-    /** Error Message to be displayed */
-    message: string;
-    /**
-     * Unix Timestamp. Preferred generation using `Date.now()`
-     */
-    timestamp: number;
-}
-/**
- * @private
- */
-export interface SendBoxErrorBarProps {
-    /** Error to render */
-    error?: SendBoxErrorBarError;
-    /**
-     * Automatically dismisses the error bar after the specified delay in ms.
-     * Example: `10 * 1000` would be 10 seconds
-     */
-    dismissAfterMs?: number;
-    /**
-     * Callback to invoke when the error bar is dismissed
-     */
-    onDismiss?: () => void;
-}
-/**
- * @private
- */
-export declare const SendBoxErrorBar: (props: SendBoxErrorBarProps) => JSX.Element;
-//# sourceMappingURL=SendBoxErrorBar.d.ts.map

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

@@ -1,39 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-import { MessageBar, MessageBarType } from '@fluentui/react';
-import React, { useEffect } from 'react';
-/**
- * @private
- */
-export const SendBoxErrorBar = (props) => {
-    const { error, dismissAfterMs, onDismiss } = props;
-    const [errorMessage, setErrorMessage] = React.useState(error === null || error === void 0 ? void 0 : error.message);
-    // Using `any` because `NodeJS.Timeout` here will cause `declaration error` with jest.
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const timeoutRef = React.useRef();
-    React.useEffect(() => {
-        setErrorMessage(error === null || error === void 0 ? void 0 : error.message);
-    }, [error]);
-    useEffect(() => {
-        if (error && dismissAfterMs !== undefined) {
-            timeoutRef.current = setTimeout(() => {
-                setErrorMessage(undefined);
-                onDismiss && onDismiss();
-            }, dismissAfterMs);
-        }
-        return () => {
-            timeoutRef.current && clearTimeout(timeoutRef.current);
-        };
-    }, [dismissAfterMs, onDismiss, error]);
-    if (errorMessage) {
-        return (React.createElement(MessageBar, { role: "alert", "aria-label": errorMessage, "data-testid": 'send-box-message-bar', messageBarType: MessageBarType.warning, styles: {
-                iconContainer: {
-                    display: 'none'
-                }
-            } }, errorMessage));
-    }
-    else {
-        return React.createElement(React.Fragment, null);
-    }
-};
-//# sourceMappingURL=SendBoxErrorBar.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"SendBoxErrorBar.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/SendBoxErrorBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAgCzC;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;IAC1E,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IACnD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC,CAAC;IACvE,sFAAsF;IACtF,8DAA8D;IAC9D,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,EAAO,CAAC;IAEvC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,eAAe,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC,CAAC;IAClC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,IAAI,cAAc,KAAK,SAAS,EAAE,CAAC;YAC1C,UAAU,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBACnC,eAAe,CAAC,SAAS,CAAC,CAAC;gBAC3B,SAAS,IAAI,SAAS,EAAE,CAAC;YAC3B,CAAC,EAAE,cAAc,CAAC,CAAC;QACrB,CAAC;QACD,OAAO,GAAG,EAAE;YACV,UAAU,CAAC,OAAO,IAAI,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QACzD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,cAAc,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;IAEvC,IAAI,YAAY,EAAE,CAAC;QACjB,OAAO,CACL,oBAAC,UAAU,IACT,IAAI,EAAC,OAAO,gBACA,YAAY,iBACX,sBAAsB,EACnC,cAAc,EAAE,cAAc,CAAC,OAAO,EACtC,MAAM,EAAE;gBACN,aAAa,EAAE;oBACb,OAAO,EAAE,MAAM;iBAChB;aACF,IAEA,YAAY,CACF,CACd,CAAC;IACJ,CAAC;SAAM,CAAC;QACN,OAAO,yCAAK,CAAC;IACf,CAAC;AACH,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageBar, MessageBarType } from '@fluentui/react';\nimport React, { useEffect } from 'react';\n\n/**\n * @beta\n * Error to be displayed to the user in an error bar above sendbox.\n */\nexport interface SendBoxErrorBarError {\n  /** Error Message to be displayed */\n  message: string;\n  /**\n   * Unix Timestamp. Preferred generation using `Date.now()`\n   */\n  timestamp: number;\n}\n\n/**\n * @private\n */\nexport interface SendBoxErrorBarProps {\n  /** Error to render */\n  error?: SendBoxErrorBarError;\n  /**\n   * Automatically dismisses the error bar after the specified delay in ms.\n   * Example: `10 * 1000` would be 10 seconds\n   */\n  dismissAfterMs?: number;\n  /**\n   * Callback to invoke when the error bar is dismissed\n   */\n  onDismiss?: () => void;\n}\n\n/**\n * @private\n */\nexport const SendBoxErrorBar = (props: SendBoxErrorBarProps): JSX.Element => {\n  const { error, dismissAfterMs, onDismiss } = props;\n  const [errorMessage, setErrorMessage] = React.useState(error?.message);\n  // Using `any` because `NodeJS.Timeout` here will cause `declaration error` with jest.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const timeoutRef = React.useRef<any>();\n\n  React.useEffect(() => {\n    setErrorMessage(error?.message);\n  }, [error]);\n\n  useEffect(() => {\n    if (error && dismissAfterMs !== undefined) {\n      timeoutRef.current = setTimeout(() => {\n        setErrorMessage(undefined);\n        onDismiss && onDismiss();\n      }, dismissAfterMs);\n    }\n    return () => {\n      timeoutRef.current && clearTimeout(timeoutRef.current);\n    };\n  }, [dismissAfterMs, onDismiss, error]);\n\n  if (errorMessage) {\n    return (\n      <MessageBar\n        role=\"alert\"\n        aria-label={errorMessage}\n        data-testid={'send-box-message-bar'}\n        messageBarType={MessageBarType.warning}\n        styles={{\n          iconContainer: {\n            display: 'none'\n          }\n        }}\n      >\n        {errorMessage}\n      </MessageBar>\n    );\n  } else {\n    return <></>;\n  }\n};\n"]}

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

@@ -1,14 +0,0 @@
-/// <reference types="react" />
-import { SendBoxErrorBarError } from './SendBoxErrorBar';
-/**
- * @private
- */
-export interface SendBoxErrorsProps {
-    attachmentUploadsPendingError?: SendBoxErrorBarError;
-    attachmentProgressError?: SendBoxErrorBarError;
-}
-/**
- * @private
- */
-export declare const SendBoxErrors: (props: SendBoxErrorsProps) => JSX.Element;
-//# sourceMappingURL=SendBoxErrors.d.ts.map

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

@@ -1,20 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-import React from 'react';
-import { SendBoxErrorBar } from './SendBoxErrorBar';
-/**
- * @private
- */
-export const SendBoxErrors = (props) => {
-    const { attachmentProgressError, attachmentUploadsPendingError } = props;
-    const errorToDisplay = React.useMemo(() => {
-        if (attachmentProgressError && attachmentUploadsPendingError) {
-            return attachmentProgressError.timestamp > attachmentUploadsPendingError.timestamp
-                ? attachmentProgressError
-                : attachmentUploadsPendingError;
-        }
-        return attachmentProgressError || attachmentUploadsPendingError;
-    }, [attachmentProgressError, attachmentUploadsPendingError]);
-    return React.createElement(SendBoxErrorBar, { error: errorToDisplay, dismissAfterMs: 10 * 1000 });
-};
-//# sourceMappingURL=SendBoxErrors.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"SendBoxErrors.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/SendBoxErrors.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAwB,MAAM,mBAAmB,CAAC;AAU1E;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAe,EAAE;IACtE,MAAM,EAAE,uBAAuB,EAAE,6BAA6B,EAAE,GAAG,KAAK,CAAC;IAEzE,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACxC,IAAI,uBAAuB,IAAI,6BAA6B,EAAE,CAAC;YAC7D,OAAO,uBAAuB,CAAC,SAAS,GAAG,6BAA6B,CAAC,SAAS;gBAChF,CAAC,CAAC,uBAAuB;gBACzB,CAAC,CAAC,6BAA6B,CAAC;QACpC,CAAC;QACD,OAAO,uBAAuB,IAAI,6BAA6B,CAAC;IAClE,CAAC,EAAE,CAAC,uBAAuB,EAAE,6BAA6B,CAAC,CAAC,CAAC;IAE7D,OAAO,oBAAC,eAAe,IAAC,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,EAAE,GAAG,IAAI,GAAI,CAAC;AAC/E,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { SendBoxErrorBar, SendBoxErrorBarError } from './SendBoxErrorBar';\n\n/**\n * @private\n */\nexport interface SendBoxErrorsProps {\n  attachmentUploadsPendingError?: SendBoxErrorBarError;\n  attachmentProgressError?: SendBoxErrorBarError;\n}\n\n/**\n * @private\n */\nexport const SendBoxErrors = (props: SendBoxErrorsProps): JSX.Element => {\n  const { attachmentProgressError, attachmentUploadsPendingError } = props;\n\n  const errorToDisplay = React.useMemo(() => {\n    if (attachmentProgressError && attachmentUploadsPendingError) {\n      return attachmentProgressError.timestamp > attachmentUploadsPendingError.timestamp\n        ? attachmentProgressError\n        : attachmentUploadsPendingError;\n    }\n    return attachmentProgressError || attachmentUploadsPendingError;\n  }, [attachmentProgressError, attachmentUploadsPendingError]);\n\n  return <SendBoxErrorBar error={errorToDisplay} dismissAfterMs={10 * 1000} />;\n};\n"]}

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

@@ -1,24 +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;
-//# sourceMappingURL=TextFieldWithMention.d.ts.map