@selfcommunity/react-ui 0.7.0-alpha.333 → 0.7.0-alpha.334

package/lib/cjs/components/Editor/plugins/MentionsPlugin.js

@@ -7,12 +7,12 @@ const react_core_1 = require("@selfcommunity/react-core");
 const lexical_1 = require("lexical");
 const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
 const utils_1 = require("@lexical/utils");
-const react_dom_1 = require("react-dom");
 const MentionNode_1 = require("../nodes/MentionNode");
 const api_services_1 = require("@selfcommunity/api-services");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
+const ClickAwayListener_1 = tslib_1.__importDefault(require("@mui/material/ClickAwayListener"));
 const PUNCTUATION = '\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%\'"~=<>_:;';
 const NAME = '\\b[A-Z][^\\s' + PUNCTUATION + ']';
 const DocumentMentionsRegex = {
@@ -528,7 +528,9 @@ function useMentions(editor, anchorClassName = null) {
     if (resolution === null || editor === null) {
         return null;
     }
-    return (0, react_dom_1.createPortal)(react_1.default.createElement(Root, { close: closeTypeahead, resolution: resolution, editor: editor, className: classes.root }), anchorElementRef.current);
+    return (react_1.default.createElement(ClickAwayListener_1.default, { onClickAway: closeTypeahead },
+        react_1.default.createElement(material_1.Portal, { container: anchorElementRef.current },
+            react_1.default.createElement(Root, { close: closeTypeahead, resolution: resolution, editor: editor, className: classes.root }))));
 }
 function MentionsPlugin() {
     const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();

package/lib/esm/components/Editor/plugins/MentionsPlugin.js

@@ -3,12 +3,12 @@ import { useIsomorphicLayoutEffect } from '@selfcommunity/react-core';
 import { $getSelection, $isRangeSelection, $isTextNode, COMMAND_PRIORITY_LOW, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ENTER_COMMAND, KEY_ESCAPE_COMMAND, KEY_TAB_COMMAND } from 'lexical';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { mergeRegister } from '@lexical/utils';
-import { createPortal } from 'react-dom';
 import { createMentionNode, MentionNode } from '../nodes/MentionNode';
 import { http, Endpoints } from '@selfcommunity/api-services';
 import classNames from 'classnames';
-import { Avatar } from '@mui/material';
+import { Avatar, Portal } from '@mui/material';
 import { styled } from '@mui/material/styles';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
 const PUNCTUATION = '\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%\'"~=<>_:;';
 const NAME = '\\b[A-Z][^\\s' + PUNCTUATION + ']';
 const DocumentMentionsRegex = {
@@ -521,7 +521,9 @@ function useMentions(editor, anchorClassName = null) {
     if (resolution === null || editor === null) {
         return null;
     }
-    return createPortal(React.createElement(Root, { close: closeTypeahead, resolution: resolution, editor: editor, className: classes.root }), anchorElementRef.current);
+    return (React.createElement(ClickAwayListener, { onClickAway: closeTypeahead },
+        React.createElement(Portal, { container: anchorElementRef.current },
+            React.createElement(Root, { close: closeTypeahead, resolution: resolution, editor: editor, className: classes.root }))));
 }
 export default function MentionsPlugin() {
     const [editor] = useLexicalComposerContext();