@yuntijs/ui 1.0.0-beta.9 → 1.0.0-beta.90

package/es/Mentions/plugins/mention-node/node.js

@@ -0,0 +1,100 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+import { DecoratorNode } from 'lexical';
+import React from 'react';
+
+// import type { MentionsOptionsMap } from '../../types';
+import { MentionNodeComponent } from "./component";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var MentionNode = /*#__PURE__*/function (_DecoratorNode) {
+  _inherits(MentionNode, _DecoratorNode);
+  var _super = _createSuper(MentionNode);
+  // constructor(variable: string, optionsMap?: MentionsOptionsMap, key?: NodeKey) {
+  function MentionNode(variable, key) {
+    var _this;
+    _classCallCheck(this, MentionNode);
+    _this = _super.call(this, key);
+    _defineProperty(_assertThisInitialized(_this), "__variable", void 0);
+    _this.__variable = variable;
+    return _this;
+  }
+  _createClass(MentionNode, [{
+    key: "isInline",
+    value: function isInline() {
+      return true;
+    }
+  }, {
+    key: "createDOM",
+    value: function createDOM() {
+      var div = document.createElement('div');
+      div.style.display = 'inline-flex';
+      div.style.alignItems = 'center';
+      div.style.verticalAlign = 'middle';
+      return div;
+    }
+  }, {
+    key: "updateDOM",
+    value: function updateDOM() {
+      return false;
+    }
+  }, {
+    key: "decorate",
+    value: function decorate() {
+      return /*#__PURE__*/_jsx(MentionNodeComponent, {
+        nodeKey: this.getKey(),
+        variable: this.__variable
+      });
+    }
+  }, {
+    key: "exportJSON",
+    value: function exportJSON() {
+      return {
+        type: 'mention-node',
+        version: 1,
+        variable: this.getVariable()
+      };
+    }
+  }, {
+    key: "getVariable",
+    value: function getVariable() {
+      var self = this.getLatest();
+      return self.__variable;
+    }
+  }, {
+    key: "getTextContent",
+    value: function getTextContent() {
+      return "{{".concat(this.getVariable(), "}}");
+    }
+  }], [{
+    key: "getType",
+    value: function getType() {
+      return 'mention-node';
+    }
+  }, {
+    key: "clone",
+    value: function clone(node) {
+      return new MentionNode(node.__variable, node.__key);
+    }
+  }, {
+    key: "importJSON",
+    value: function importJSON(serializedNode) {
+      // eslint-disable-next-line @typescript-eslint/no-use-before-define
+      var node = $createMentionNode(serializedNode.variable);
+      return node;
+    }
+  }]);
+  return MentionNode;
+}(DecoratorNode);
+export function $createMentionNode(variable) {
+  return new MentionNode(variable);
+}
+export function $isMentionNode(node) {
+  return node instanceof MentionNode;
+}

package/es/Mentions/plugins/mention-node/replacement.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface MentionNodePluginReplacementProps {
+    onInsert?: () => void;
+}
+export declare const MentionNodePluginReplacement: React.FC<MentionNodePluginReplacementProps>;

package/es/Mentions/plugins/mention-node/replacement.js

@@ -0,0 +1,43 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { mergeRegister } from '@lexical/utils';
+import { $applyNodeReplacement } from 'lexical';
+import { memo, useCallback, useEffect } from 'react';
+import { decoratorTransform } from "../../utils";
+import { CustomTextNode } from "../custom-text/node";
+import { $createMentionNode, MentionNode } from "./node";
+import { MENTION_REGEX } from "./utils";
+export var MentionNodePluginReplacement = /*#__PURE__*/memo(function (_ref) {
+  var onInsert = _ref.onInsert;
+  var _useLexicalComposerCo = useLexicalComposerContext(),
+    _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  useEffect(function () {
+    if (!editor.hasNodes([MentionNode])) throw new Error('MentionNodePlugin: MentionNode not registered on editor');
+  }, [editor]);
+  var createMentionNode = useCallback(function (textNode) {
+    if (onInsert) onInsert();
+    var nodePathString = textNode.getTextContent().slice(2, -2);
+    return $applyNodeReplacement($createMentionNode(nodePathString));
+  }, [onInsert]);
+  var getMatch = useCallback(function (text) {
+    var matchArr = MENTION_REGEX.exec(text);
+    if (matchArr === null) return null;
+    var startOffset = matchArr.index;
+    var endOffset = startOffset + matchArr[0].length;
+    return {
+      end: endOffset,
+      start: startOffset
+    };
+  }, []);
+  var transformListener = useCallback(function (textNode) {
+    MENTION_REGEX.lastIndex = 0;
+    return decoratorTransform(textNode, getMatch, createMentionNode);
+  }, [createMentionNode, getMatch]);
+  useEffect(function () {
+    MENTION_REGEX.lastIndex = 0;
+    return mergeRegister(editor.registerNodeTransform(CustomTextNode, transformListener));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return null;
+});

package/es/Mentions/plugins/mention-node/style.d.ts

@@ -0,0 +1,8 @@
+export declare const useStyles: (props?: {
+    isSelected?: boolean | undefined;
+    isError?: boolean | undefined;
+} | undefined) => import("antd-style").ReturnStyles<{
+    root: import("antd-style").SerializedStyles;
+    text: import("antd-style").SerializedStyles;
+    error: import("antd-style").SerializedStyles;
+}>;

package/es/Mentions/plugins/mention-node/style.js

@@ -0,0 +1,47 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref, _ref2) {
+  var css = _ref.css,
+    token = _ref.token,
+    prefixCls = _ref.prefixCls;
+  var isSelected = _ref2.isSelected,
+    isError = _ref2.isError;
+  var getColors = function getColors() {
+    if (isError) {
+      if (isSelected) {
+        return {
+          background: token.colorErrorBgActive,
+          border: token.colorErrorBorderHover,
+          color: token.colorErrorTextActive
+        };
+      }
+      return {
+        background: token.colorErrorBg,
+        border: token.colorErrorBorder,
+        color: token.colorErrorText
+      };
+    }
+    if (isSelected) {
+      return {
+        background: token.colorInfoBgHover,
+        border: token.colorInfoBorder,
+        color: token.colorInfoText
+      };
+    }
+    return {
+      background: token.colorFillTertiary,
+      border: 'transparent',
+      color: token.colorInfoText
+    };
+  };
+  var _getColors = getColors(),
+    background = _getColors.background,
+    border = _getColors.border,
+    color = _getColors.color;
+  return {
+    root: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        user-select: none;\n\n        margin: 1px 2px;\n        padding: 0 4px;\n\n        font-family: ", ";\n        color: ", ";\n\n        background-color: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\n      "])), token.fontFamilyCode, color, background, border, token.borderRadius),
+    text: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        overflow: hidden;\n        display: inline-block;\n\n        max-width: 200px;\n\n        color: ", ";\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      "])), token.colorTextSecondary),
+    error: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        color: ", ";\n      "])), token.colorErrorText)
+  };
+});

package/es/Mentions/plugins/mention-node/utils.d.ts

@@ -0,0 +1,4 @@
+export declare const INSERT_MENTION_COMMAND: import("lexical").LexicalCommand<unknown>;
+export declare const DELETE_MENTION_COMMAND: import("lexical").LexicalCommand<unknown>;
+export declare const CLEAR_HIDE_MENU_TIMEOUT: import("lexical").LexicalCommand<unknown>;
+export declare const MENTION_REGEX: RegExp;

package/es/Mentions/plugins/mention-node/utils.js

@@ -0,0 +1,10 @@
+import { createCommand } from 'lexical';
+export var INSERT_MENTION_COMMAND = createCommand('INSERT_MENTION_COMMAND');
+export var DELETE_MENTION_COMMAND = createCommand('DELETE_MENTION_COMMAND');
+export var CLEAR_HIDE_MENU_TIMEOUT = createCommand('CLEAR_HIDE_MENU_TIMEOUT');
+
+// export const MENTION_REGEX = /{{([\w-]{1,50}(\.[_a-z]\w{0,29}){1,10})}}/gi;
+// export const MENTION_REGEX = /{{(.+?)}}/g;
+// {{plugin-m67m66l8-794.json."id"}}
+// {{plugin-m67m66l8-794.json."tags"[0]."id"}}
+export var MENTION_REGEX = /{{([\w-]{1,50}(\."?[_a-z][\w"[\]]*){1,10})}}/gi;

package/es/Mentions/plugins/mention-picker/hooks.d.ts

@@ -0,0 +1,5 @@
+import type { MentionOption } from '../../types';
+import { MentionMenuOption } from './utils';
+export declare const useOptions: (allOptions: MentionOption[], queryString: string | null) => {
+    options: MentionMenuOption[];
+};

package/es/Mentions/plugins/mention-picker/hooks.js

@@ -0,0 +1,65 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { escapeRegExp } from 'lodash-es';
+import { useCallback, useMemo } from 'react';
+import { INSERT_MENTION_COMMAND } from "../mention-node";
+import { MentionMenuOption } from "./utils";
+var filterOptionWithChildren = function filterOptionWithChildren(option, filterOption) {
+  var _option$children;
+  option.children = (_option$children = option.children) === null || _option$children === void 0 ? void 0 : _option$children.filter(function (o) {
+    if (!o.children) {
+      return filterOption(o);
+    }
+    var newO = filterOptionWithChildren(o, filterOption);
+    return filterOption(o) || (newO.children || []).length > 0;
+  });
+  return option;
+};
+export var useOptions = function useOptions(allOptions, queryString) {
+  var _useLexicalComposerCo = useLexicalComposerContext(),
+    _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  var filterOption = useCallback(function (option) {
+    var _option$keywords;
+    var regex = new RegExp(escapeRegExp(queryString), 'i');
+    return regex.test(option.label) || ((_option$keywords = option.keywords) === null || _option$keywords === void 0 ? void 0 : _option$keywords.some(function (keyword) {
+      return regex.test(keyword);
+    })) || false;
+  }, [queryString]);
+  var options = useMemo(function () {
+    var _addOnselect = function _addOnselect(option) {
+      var menuOption = _objectSpread(_objectSpread({}, option), {}, {
+        children: undefined,
+        onSelect: function onSelect() {
+          editor.dispatchCommand(INSERT_MENTION_COMMAND, option.value);
+        }
+      });
+      if (option.children) {
+        menuOption.children = option.children.map(function (o) {
+          return _addOnselect(o);
+        });
+      }
+      return menuOption;
+    };
+    var menuOptions = allOptions.map(function (o) {
+      return new MentionMenuOption(_addOnselect(o));
+    });
+    if (!queryString) {
+      return menuOptions;
+    }
+    return menuOptions.map(function (o) {
+      if (!o.children) {
+        return o;
+      }
+      return filterOptionWithChildren(o, filterOption);
+    }).filter(function (o) {
+      return filterOption(o) || (o.children || []).length > 0;
+    });
+  }, [allOptions, queryString, editor, filterOption]);
+  return {
+    options: options
+  };
+};

package/es/Mentions/plugins/mention-picker/index.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import type { MentionOption } from '../../types';
+import { type MentionMenuOption } from './utils';
+export interface MentionPickerPluginProps {
+    /** The className of menu overlay */
+    overlayClassName?: string;
+    /** The options of menu */
+    options?: MentionOption[];
+    /**
+     * The characters that trigger the mention menu. Needed to tell the plugin
+     * when to call the query function.
+     */
+    triggers: string[];
+    /**
+     * If `true`, mentions can contain spaces.
+     * @default true
+     */
+    allowSpaces?: boolean;
+    /**
+     * Regular expression that matches punctuation characters when looking for
+     * mentions.
+     *
+     * In addition to spaces, these characters can appear directly after a mention.
+     * E.g. `@John!` or `@John,`.
+     * @default \.,\*\?\$\|#{}\(\)\^\[\]\/!%'\"~=<>_:;
+     */
+    punctuation?: string;
+    /**
+     * Regular expression that matches characters that can appear directly
+     * before the trigger character.
+     * @default \(
+     */
+    preTriggerChars?: string;
+    /**
+     * When mention selected, this func will be called
+     */
+    onSelect?: (option: MentionMenuOption, trigger: string | null, queryString: string | null) => void;
+}
+export declare const MentionPickerPlugin: React.FC<MentionPickerPluginProps>;

package/es/Mentions/plugins/mention-picker/index.js

@@ -0,0 +1,137 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { LexicalTypeaheadMenuPlugin } from '@lexical/react/LexicalTypeaheadMenuPlugin';
+import { ConfigProvider, Tree } from 'antd';
+// @Todo: 目前不支持上下键选中 children，后续支持可能需要定制 menu 和 plugin
+// import type { MenuRenderFn } from '../LexicalTypeaheadMenuPlugin';
+// import { LexicalTypeaheadMenuPlugin } from '../LexicalTypeaheadMenuPlugin';
+
+import React, { memo, useCallback, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { DEFAULT_PUNCTUATION, PRE_TRIGGER_CHARS } from "../../constants";
+import { useCheckForMentionMatch } from "../../hooks";
+import { CLEAR_HIDE_MENU_TIMEOUT } from "../mention-node";
+import { useOptions } from "./hooks";
+import { MentionMenu } from "./menu";
+import { MentionMenuItem } from "./menu-item";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var MentionPickerPlugin = /*#__PURE__*/memo(function (_ref) {
+  var overlayClassName = _ref.overlayClassName,
+    triggers = _ref.triggers,
+    _ref$options = _ref.options,
+    allOptions = _ref$options === void 0 ? [] : _ref$options,
+    _ref$allowSpaces = _ref.allowSpaces,
+    allowSpaces = _ref$allowSpaces === void 0 ? true : _ref$allowSpaces,
+    _ref$punctuation = _ref.punctuation,
+    punctuation = _ref$punctuation === void 0 ? DEFAULT_PUNCTUATION : _ref$punctuation,
+    _ref$preTriggerChars = _ref.preTriggerChars,
+    preTriggerChars = _ref$preTriggerChars === void 0 ? PRE_TRIGGER_CHARS : _ref$preTriggerChars,
+    onSelect = _ref.onSelect;
+  var _useStyles = useStyles({}),
+    cx = _useStyles.cx,
+    styles = _useStyles.styles;
+  var _useLexicalComposerCo = useLexicalComposerContext(),
+    _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  var _useCheckForMentionMa = useCheckForMentionMatch(triggers, {
+      punctuation: punctuation,
+      preTriggerChars: preTriggerChars,
+      allowSpaces: allowSpaces
+    }),
+    trigger = _useCheckForMentionMa.trigger,
+    checkForMentionMatch = _useCheckForMentionMa.checkForMentionMatch;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    queryString = _useState2[0],
+    setQueryString = _useState2[1];
+  var _useOptions = useOptions(allOptions, queryString),
+    options = _useOptions.options;
+  var onSelectOption = useCallback(function (selectedOption, nodeToRemove, closeMenu, matchingString) {
+    onSelect === null || onSelect === void 0 || onSelect(selectedOption, trigger, queryString);
+    editor.update(function () {
+      if (nodeToRemove && selectedOption !== null && selectedOption !== void 0 && selectedOption.key) {
+        nodeToRemove.remove();
+      }
+      if (selectedOption !== null && selectedOption !== void 0 && selectedOption.onSelect) {
+        selectedOption.onSelect(matchingString);
+      }
+      closeMenu();
+    });
+  }, [editor, onSelect, queryString, trigger]);
+  var renderMenuTree = useCallback(function (itemProps) {
+    var selectedIndex = itemProps.selectedIndex,
+      selectOptionAndCleanUp = itemProps.selectOptionAndCleanUp;
+    return /*#__PURE__*/_jsx(ConfigProvider, {
+      theme: {
+        components: {
+          Tree: {
+            indentSize: 16,
+            lineHeight: 32,
+            titleHeight: 32,
+            paddingXS: 0
+          }
+        }
+      },
+      children: /*#__PURE__*/_jsx(Tree, {
+        blockNode: true,
+        defaultExpandAll: true,
+        onExpand: function onExpand(_keys, _ref2) {
+          var nativeEvent = _ref2.nativeEvent;
+          nativeEvent.stopPropagation();
+          // 阻止 menu-picker 隐藏
+          editor.dispatchCommand(CLEAR_HIDE_MENU_TIMEOUT, {});
+        },
+        onSelect: function onSelect(_keys, info) {
+          selectOptionAndCleanUp(info.node);
+        },
+        titleRender: function titleRender(option) {
+          var _options;
+          return /*#__PURE__*/_jsx(MentionMenuItem, {
+            isSelected: ((_options = options[selectedIndex]) === null || _options === void 0 ? void 0 : _options.value) === option.value,
+            option: option,
+            queryString: queryString,
+            showIcon: !option.isChild
+          });
+        },
+        treeData: options
+      })
+    });
+  }, [options, editor, queryString]);
+  var renderMenu = useCallback(function (anchorElementRef, itemProps, _matchingString) {
+    var selectedIndex = itemProps.selectedIndex,
+      selectOptionAndCleanUp = itemProps.selectOptionAndCleanUp,
+      setHighlightedIndex = itemProps.setHighlightedIndex;
+    if (anchorElementRef.current) {
+      return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/_jsx("div", {
+        className: cx(styles.menuOverlay, overlayClassName),
+        role: "menu",
+        children: options.some(function (o) {
+          return (o.children || []).length > 0;
+        }) ? renderMenuTree(itemProps) : /*#__PURE__*/_jsx(MentionMenu, {
+          onClick: function onClick(index, option) {
+            if (option.disabled) return;
+            setHighlightedIndex(index);
+            selectOptionAndCleanUp(option);
+          },
+          onMouseEnter: function onMouseEnter(index, option) {
+            if (option.disabled) return;
+            setHighlightedIndex(index);
+          },
+          options: options,
+          queryString: queryString,
+          selectedIndex: selectedIndex
+        })
+      }), anchorElementRef.current);
+    }
+    return null;
+  }, [cx, options, overlayClassName, queryString, renderMenuTree, styles.menuOverlay]);
+  return /*#__PURE__*/_jsx(LexicalTypeaheadMenuPlugin, {
+    anchorClassName: styles.anchor,
+    menuRenderFn: renderMenu,
+    onQueryChange: setQueryString,
+    onSelectOption: onSelectOption,
+    options: options,
+    triggerFn: checkForMentionMatch
+  });
+});

package/es/Mentions/plugins/mention-picker/menu-item.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { MentionMenuOption } from './utils';
+export interface MentionMenuItemProps {
+    index?: number;
+    isSelected: boolean;
+    onClick?: (index: number, option: MentionMenuOption) => void;
+    onMouseEnter?: (index: number, option: MentionMenuOption) => void;
+    option: MentionMenuOption;
+    queryString: string | null;
+    showIcon?: boolean;
+}
+export declare const MentionMenuItem: React.FC<MentionMenuItemProps>;

package/es/Mentions/plugins/mention-picker/menu-item.js

@@ -0,0 +1,73 @@
+import { Flex } from 'antd';
+import { escapeRegExp } from 'lodash-es';
+import React, { memo, useMemo } from 'react';
+import Typography from "../../../Typography";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Text = Typography.Text;
+export var MentionMenuItem = /*#__PURE__*/memo(function (_ref) {
+  var index = _ref.index,
+    isSelected = _ref.isSelected,
+    _onClick = _ref.onClick,
+    _onMouseEnter = _ref.onMouseEnter,
+    option = _ref.option,
+    queryString = _ref.queryString,
+    _ref$showIcon = _ref.showIcon,
+    showIcon = _ref$showIcon === void 0 ? true : _ref$showIcon;
+  var _useStyles = useStyles({
+      isSelected: isSelected,
+      disabled: option.disabled
+    }),
+    styles = _useStyles.styles;
+  var label = option.label;
+  var _useMemo = useMemo(function () {
+      var before = label;
+      var middle = '';
+      var after = '';
+      if (queryString) {
+        var regex = new RegExp(escapeRegExp(queryString), 'i');
+        var match = regex.exec(option.label);
+        if (match) {
+          before = label.slice(0, Math.max(0, match.index));
+          middle = match[0];
+          after = label.slice(Math.max(0, match.index + match[0].length));
+        }
+      }
+      return {
+        before: before,
+        middle: middle,
+        after: after
+      };
+    }, [option.label, queryString, label]),
+    before = _useMemo.before,
+    middle = _useMemo.middle,
+    after = _useMemo.after;
+  return /*#__PURE__*/_jsxs(Flex, {
+    align: "center",
+    className: styles.menuItem,
+    gap: 4,
+    onClick: function onClick() {
+      return _onClick === null || _onClick === void 0 ? void 0 : _onClick(index, option);
+    },
+    onMouseEnter: function onMouseEnter() {
+      return _onMouseEnter === null || _onMouseEnter === void 0 ? void 0 : _onMouseEnter(index, option);
+    },
+    ref: option.setRefElement,
+    tabIndex: -1,
+    children: [showIcon && /*#__PURE__*/_jsx(Flex, {
+      className: styles.menuItemIcon,
+      children: option.icon
+    }), /*#__PURE__*/_jsxs("div", {
+      className: styles.menuItemLabel,
+      title: option.label,
+      children: [before, /*#__PURE__*/_jsx(Text, {
+        mark: true,
+        children: middle
+      }), after]
+    }), /*#__PURE__*/_jsx(Flex, {
+      children: option.extraElement
+    })]
+  }, option.key);
+});
+MentionMenuItem.displayName = 'MentionMenuItem';

package/es/Mentions/plugins/mention-picker/menu.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { MentionMenuOption } from './utils';
+export interface MentionMenuProps {
+    selectedIndex?: number | null;
+    options: MentionMenuOption[];
+    onClick?: (index: number, option: MentionMenuOption) => void;
+    onMouseEnter?: (index: number, option: MentionMenuOption) => void;
+    queryString: string | null;
+}
+export declare const MentionMenu: React.FC<MentionMenuProps>;

package/es/Mentions/plugins/mention-picker/menu.js

@@ -0,0 +1,31 @@
+import { Empty } from 'antd';
+import React, { memo } from 'react';
+import { MentionMenuItem } from "./menu-item";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var MentionMenu = /*#__PURE__*/memo(function (_ref) {
+  var selectedIndex = _ref.selectedIndex,
+    options = _ref.options,
+    onClick = _ref.onClick,
+    onMouseEnter = _ref.onMouseEnter,
+    queryString = _ref.queryString;
+  var _useStyles = useStyles({}),
+    styles = _useStyles.styles;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [options.length === 0 && /*#__PURE__*/_jsx(Empty, {
+      className: styles.menuEmpty,
+      image: Empty.PRESENTED_IMAGE_SIMPLE
+    }), options.map(function (option, index) {
+      return /*#__PURE__*/_jsx(MentionMenuItem, {
+        index: index,
+        isSelected: selectedIndex === index,
+        onClick: onClick,
+        onMouseEnter: onMouseEnter,
+        option: option,
+        queryString: queryString
+      }, option.key);
+    })]
+  });
+});

package/es/Mentions/plugins/mention-picker/style.d.ts

@@ -0,0 +1,11 @@
+export declare const useStyles: (props?: {
+    isSelected?: boolean | undefined;
+    disabled?: boolean | undefined;
+} | undefined) => import("antd-style").ReturnStyles<{
+    anchor: import("antd-style").SerializedStyles;
+    menuEmpty: import("antd-style").SerializedStyles;
+    menuOverlay: import("antd-style").SerializedStyles;
+    menuItem: import("antd-style").SerializedStyles;
+    menuItemIcon: import("antd-style").SerializedStyles;
+    menuItemLabel: import("antd-style").SerializedStyles;
+}>;

package/es/Mentions/plugins/mention-picker/style.js

@@ -0,0 +1,19 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref, _ref2) {
+  var css = _ref.css,
+    token = _ref.token,
+    prefixCls = _ref.prefixCls;
+  var isSelected = _ref2.isSelected,
+    disabled = _ref2.disabled;
+  var selectedBg = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      background-color: ", ";\n    "])), token.colorFillSecondary);
+  return {
+    anchor: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        z-index: 9999;\n      "]))),
+    menuEmpty: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        padding: ", "px;\n      "])), token.padding),
+    menuOverlay: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        overflow: auto;\n\n        width: 260px;\n        max-height: 360px;\n        margin-top: ", "px;\n        padding: ", "px;\n\n        background: ", ";\n        border-radius: ", "px;\n        box-shadow: ", ";\n        .", "-tree {\n          &-switcher {\n            margin: 2px 0;\n          }\n        }\n      "])), token.marginXXS, token.paddingXXS, token.colorBgElevated, token.borderRadius, token.boxShadow, prefixCls),
+    menuItem: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        cursor: ", ";\n        pointer-events: ", ";\n\n        padding: 0 ", "px;\n        margin: 2px;\n\n        position: relative;\n\n        border-radius: ", "px;\n\n        color: ", ";\n        font-size: ", "px;\n        line-height: 32px;\n        ", "\n        &:hover {\n          ", "\n        }\n      "])), disabled ? 'not-allowed' : 'pointer', disabled ? 'none' : 'all', token.paddingXS, token.borderRadius, disabled ? token.colorTextDisabled : token.colorText, token.fontSize, isSelected && selectedBg, selectedBg),
+    menuItemIcon: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        color: ", ";\n      "])), token.colorInfoText),
+    menuItemLabel: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        overflow: hidden;\n        display: inline-block;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      "])))
+  };
+});