@yuntijs/ui 1.0.0-beta.81 → 1.0.0-beta.82

package/es/ChatInputArea/desktop/ChatInputArea.d.ts

@@ -1,5 +1,5 @@
 import { type ChatInputAreaInnerProps, type DraggablePanelProps } from '@lobehub/ui';
-import { TextAreaRef } from 'antd/es/input/TextArea';
+import type { TextAreaRef } from 'antd/es/input/TextArea';
 import { ReactNode } from 'react';
 export interface ChatInputAreaProps extends Omit<ChatInputAreaInnerProps, 'classNames'> {
     bottomAddons?: ReactNode;

package/es/Form/collapse-list/index.d.ts

@@ -1,5 +1,5 @@
 import type { FormItemProps, FormListFieldData, TableColumnProps } from 'antd';
-import { FormListProps as AntFormListProps } from 'antd/es/form';
+import type { FormListProps as AntFormListProps } from 'antd/es/form';
 import React from 'react';
 import { CollapseGroupProps } from '../../CollapseGroup';
 export interface FormCollapseListColumnItem extends Omit<FormItemProps, 'dependencies' | 'rules' | 'tooltip' | 'labelAlign' | 'labelCol' | 'colon' | 'children'> {

package/es/Mentions/index.d.ts

@@ -3,6 +3,10 @@ import { type MentionPickerPluginProps } from './plugins/mention-picker';
 import type { AutoSize } from './types';
 export interface MentionsProps extends MentionPickerPluginProps {
     className?: string;
+    classNames?: {
+        wrapper?: string;
+        menuOverlay?: string;
+    };
     wrapperClassname?: string;
     placeholder?: string;
     style?: React.CSSProperties;

package/es/Mentions/index.js

@@ -7,6 +7,7 @@ import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
 import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+import { ConfigProvider } from 'antd';
 import { $getRoot, TextNode } from 'lexical';
 import React, { useMemo } from 'react';
 import { isBrowser } from "../utils/tools";
@@ -21,15 +22,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var Mentions = function Mentions(_ref) {
   var className = _ref.className,
-    wrapperClassname = _ref.wrapperClassname,
+    classNames = _ref.classNames,
     placeholder = _ref.placeholder,
     style = _ref.style,
     value = _ref.value,
     defaultValue = _ref.defaultValue,
     _ref$readOnly = _ref.readOnly,
     readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    customDisabled = _ref.disabled,
     onChange = _ref.onChange,
     onBlur = _ref.onBlur,
     onFocus = _ref.onFocus,
@@ -44,11 +44,14 @@ export var Mentions = function Mentions(_ref) {
     punctuation = _ref.punctuation,
     preTriggerChars = _ref.preTriggerChars,
     onSelect = _ref.onSelect;
+  var _ConfigProvider$useCo = ConfigProvider.useConfig(),
+    componentDisabled = _ConfigProvider$useCo.componentDisabled;
   var _useStyles = useStyles({
       autoSize: autoSize
     }),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
+  var disabled = customDisabled !== null && customDisabled !== void 0 ? customDisabled : componentDisabled;
   var editable = !readOnly && !disabled;
   var initialConfig = useMemo(function () {
     return {
@@ -80,14 +83,24 @@ export var Mentions = function Mentions(_ref) {
   // }, [value])
 
   var optionsMap = useMemo(function () {
-    return options.reduce(function (acc, option) {
-      acc[option.value] = option;
-      return acc;
-    }, {});
+    var buildMap = function buildMap(_options, parentIcon) {
+      return _options.reduce(function (acc, option) {
+        acc[option.value] = option;
+        if (!acc[option.value].icon) {
+          acc[option.value].icon = parentIcon;
+        }
+        if (option.children && option.children.length > 0) {
+          var childrenMap = buildMap(option.children, option.icon);
+          Object.assign(acc, childrenMap);
+        }
+        return acc;
+      }, {});
+    };
+    return buildMap(options);
   }, [options]);
   if (!isBrowser) {
     return /*#__PURE__*/_jsxs("div", {
-      className: cx(styles.wrapper, wrapperClassname),
+      className: cx(styles.wrapper, classNames === null || classNames === void 0 ? void 0 : classNames.wrapper),
       children: [/*#__PURE__*/_jsx("div", {
         className: cx(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.root, true), styles.filled, variant === 'filled'), styles.borderless, variant === 'borderless'), styles.disabled, disabled), className),
         style: style || {}
@@ -106,7 +119,7 @@ export var Mentions = function Mentions(_ref) {
         optionsMap: optionsMap
       },
       children: /*#__PURE__*/_jsxs("div", {
-        className: cx(styles.wrapper, wrapperClassname),
+        className: cx(styles.wrapper, classNames === null || classNames === void 0 ? void 0 : classNames.wrapper),
         children: [/*#__PURE__*/_jsx(RichTextPlugin, {
           ErrorBoundary: LexicalErrorBoundary,
           contentEditable: /*#__PURE__*/_jsx(ContentEditable, {
@@ -121,6 +134,7 @@ export var Mentions = function Mentions(_ref) {
           allowSpaces: allowSpaces,
           onSelect: onSelect,
           options: options,
+          overlayClassName: classNames === null || classNames === void 0 ? void 0 : classNames.menuOverlay,
           preTriggerChars: preTriggerChars,
           punctuation: punctuation,
           triggers: triggers

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

@@ -49,7 +49,7 @@ export var MentionNodeComponent = /*#__PURE__*/memo(function (_ref) {
         gap: 2,
         title: (option === null || option === void 0 ? void 0 : option.label) || variable,
         children: /*#__PURE__*/_jsx("span", {
-          children: (option === null || option === void 0 ? void 0 : option.label) || variable
+          children: (option === null || option === void 0 ? void 0 : option.selectedLabel) || (option === null || option === void 0 ? void 0 : option.label) || variable
         })
       })]
     })

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

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import type { LexicalNode, NodeKey, SerializedLexicalNode } from 'lexical';
 import { DecoratorNode } from 'lexical';
-import type { MentionsOptionsMap } from '../../types';
 export type SerializedNode = SerializedLexicalNode & {
     variable: string;
 };
@@ -10,7 +9,7 @@ export declare class MentionNode extends DecoratorNode<JSX.Element> {
     static getType(): string;
     static clone(node: MentionNode): MentionNode;
     isInline(): boolean;
-    constructor(variable: string, optionsMap?: MentionsOptionsMap, key?: NodeKey);
+    constructor(variable: string, key?: NodeKey);
     createDOM(): HTMLElement;
     updateDOM(): false;
     decorate(): JSX.Element;

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

@@ -9,12 +9,15 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 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);
-  function MentionNode(variable, optionsMap, key) {
+  // constructor(variable: string, optionsMap?: MentionsOptionsMap, key?: NodeKey) {
+  function MentionNode(variable, key) {
     var _this;
     _classCallCheck(this, MentionNode);
     _this = _super.call(this, key);
@@ -77,7 +80,7 @@ export var MentionNode = /*#__PURE__*/function (_DecoratorNode) {
   }, {
     key: "clone",
     value: function clone(node) {
-      return new MentionNode(node.__variable);
+      return new MentionNode(node.__variable, node.__key);
     }
   }, {
     key: "importJSON",

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

@@ -1,4 +1,7 @@
+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 { useMemo } from 'react';
@@ -9,18 +12,22 @@ export var useOptions = function useOptions(allOptions, queryString) {
     _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
     editor = _useLexicalComposerCo2[0];
   var options = useMemo(function () {
-    var menuOptions = allOptions.map(function (o) {
-      return new MentionMenuOption(o.value, o.label, {
-        icon: o.icon,
+    var _addOnselect = function _addOnselect(option) {
+      var menuOption = _objectSpread(_objectSpread({}, option), {}, {
+        children: undefined,
         onSelect: function onSelect() {
-          editor.dispatchCommand(INSERT_MENTION_COMMAND, o.value);
-        },
-        disabled: o.disabled,
-        data: o.data,
-        extraElement: o.extraElement,
-        keywords: o.keywords,
-        keyboardShortcut: o.keyboardShortcut
+          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;

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

@@ -2,6 +2,9 @@ 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

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

@@ -1,16 +1,24 @@
 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 triggers = _ref.triggers,
+  var overlayClassName = _ref.overlayClassName,
+    triggers = _ref.triggers,
     _ref$options = _ref.options,
     allOptions = _ref$options === void 0 ? [] : _ref$options,
     _ref$allowSpaces = _ref.allowSpaces,
@@ -21,6 +29,7 @@ export var MentionPickerPlugin = /*#__PURE__*/memo(function (_ref) {
     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),
@@ -50,15 +59,55 @@ export var MentionPickerPlugin = /*#__PURE__*/memo(function (_ref) {
       closeMenu();
     });
   }, [editor, onSelect, queryString, trigger]);
-  var renderMenu = useCallback(function (anchorElementRef, _ref2) {
-    var selectedIndex = _ref2.selectedIndex,
-      selectOptionAndCleanUp = _ref2.selectOptionAndCleanUp,
-      setHighlightedIndex = _ref2.setHighlightedIndex;
+  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
+          });
+        },
+        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: styles.menuOverlay,
+        className: cx(styles.menuOverlay, overlayClassName),
         role: "menu",
-        children: /*#__PURE__*/_jsx(MentionMenu, {
+        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);
@@ -75,7 +124,7 @@ export var MentionPickerPlugin = /*#__PURE__*/memo(function (_ref) {
       }), anchorElementRef.current);
     }
     return null;
-  }, [options, queryString, styles.menuOverlay]);
+  }, [cx, options, overlayClassName, queryString, renderMenuTree, styles.menuOverlay]);
   return /*#__PURE__*/_jsx(LexicalTypeaheadMenuPlugin, {
     anchorClassName: styles.anchor,
     menuRenderFn: renderMenu,

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

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

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

@@ -46,10 +46,10 @@ export var MentionMenuItem = /*#__PURE__*/memo(function (_ref) {
     className: styles.menuItem,
     gap: 4,
     onClick: function onClick() {
-      return _onClick(index, option);
+      return _onClick === null || _onClick === void 0 ? void 0 : _onClick(index, option);
     },
     onMouseEnter: function onMouseEnter() {
-      return _onMouseEnter(index, option);
+      return _onMouseEnter === null || _onMouseEnter === void 0 ? void 0 : _onMouseEnter(index, option);
     },
     ref: option.setRefElement,
     tabIndex: -1,

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

@@ -1,9 +1,10 @@
 import React from 'react';
+import { MentionMenuOption } from './utils';
 export interface MentionMenuProps {
-    selectedIndex: number | null;
-    options: any[];
-    onClick: (index: number, option: any) => void;
-    onMouseEnter: (index: number, option: any) => void;
+    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

@@ -15,7 +15,8 @@ export var MentionMenu = /*#__PURE__*/memo(function (_ref) {
     styles = _useStyles.styles;
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [options.length === 0 && /*#__PURE__*/_jsx(Empty, {
-      className: styles.menuEmpty
+      className: styles.menuEmpty,
+      image: Empty.PRESENTED_IMAGE_SIMPLE
     }), options.map(function (option, index) {
       return /*#__PURE__*/_jsx(MentionMenuItem, {
         index: index,

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

@@ -7,12 +7,12 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     prefixCls = _ref.prefixCls;
   var isSelected = _ref2.isSelected,
     disabled = _ref2.disabled;
-  var selectedBg = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      background-color: ", ";\n    "])), token.colorFillTertiary);
+  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: 240px;\n        max-height: 320px;\n        margin-top: ", "px;\n\n        background: ", ";\n        border-radius: ", "px;\n        box-shadow: ", ";\n      "])), token.marginXXS, token.colorBgElevated, token.borderRadius, token.boxShadow),
-    menuItem: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        cursor: ", ";\n        pointer-events: ", ";\n\n        padding: ", "px ", "px;\n\n        position: relative;\n\n        border-radius: ", "px;\n\n        color: ", ";\n        font-size: ", "px;\n        line-height: ", ";\n        ", "\n        &:hover {\n          ", "\n        }\n      "])), disabled ? 'not-allowed' : 'pointer', disabled ? 'none' : 'all', token.paddingSM / 2, token.paddingSM, token.borderRadius, disabled ? token.colorTextDisabled : token.colorText, token.fontSize, token.lineHeight, isSelected && selectedBg, selectedBg),
+    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      "])))
   };

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

@@ -1,8 +1,22 @@
 /// <reference types="react" />
 import { MenuOption } from '@lexical/react/LexicalTypeaheadMenuPlugin';
+export interface MentionMenuOptionInitParams {
+    label: string;
+    value: string;
+    data?: any;
+    icon?: JSX.Element;
+    extraElement?: JSX.Element;
+    keywords?: Array<string>;
+    keyboardShortcut?: string;
+    disabled?: boolean;
+    onSelect: (queryString: string) => void;
+    children?: MentionMenuOptionInitParams[];
+}
 export declare class MentionMenuOption extends MenuOption {
     label: string;
     value: string;
+    title: string;
+    key: string;
     icon?: JSX.Element;
     extraElement?: JSX.Element;
     keywords: Array<string>;
@@ -10,13 +24,6 @@ export declare class MentionMenuOption extends MenuOption {
     onSelect: (queryString: string) => void;
     disabled?: boolean;
     data?: any;
-    constructor(value: string, label: string, options: {
-        icon?: JSX.Element;
-        extraElement?: JSX.Element;
-        keywords?: Array<string>;
-        keyboardShortcut?: string;
-        onSelect: (queryString: string) => void;
-        disabled?: boolean;
-        data?: any;
-    });
+    children?: MentionMenuOption[];
+    constructor({ label, value, data, icon, extraElement, keywords, keyboardShortcut, disabled, onSelect, children, }: MentionMenuOptionInitParams);
 }

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

@@ -11,12 +11,26 @@ import { MenuOption } from '@lexical/react/LexicalTypeaheadMenuPlugin';
 export var MentionMenuOption = /*#__PURE__*/function (_MenuOption) {
   _inherits(MentionMenuOption, _MenuOption);
   var _super = _createSuper(MentionMenuOption);
-  function MentionMenuOption(value, label, options) {
+  function MentionMenuOption(_ref) {
     var _this;
+    var label = _ref.label,
+      value = _ref.value,
+      data = _ref.data,
+      icon = _ref.icon,
+      extraElement = _ref.extraElement,
+      keywords = _ref.keywords,
+      keyboardShortcut = _ref.keyboardShortcut,
+      disabled = _ref.disabled,
+      onSelect = _ref.onSelect,
+      children = _ref.children;
     _classCallCheck(this, MentionMenuOption);
     _this = _super.call(this, value);
     _defineProperty(_assertThisInitialized(_this), "label", void 0);
     _defineProperty(_assertThisInitialized(_this), "value", void 0);
+    // for Tree, the same as label
+    _defineProperty(_assertThisInitialized(_this), "title", void 0);
+    // for Tree, the same as value
+    _defineProperty(_assertThisInitialized(_this), "key", void 0);
     _defineProperty(_assertThisInitialized(_this), "icon", void 0);
     _defineProperty(_assertThisInitialized(_this), "extraElement", void 0);
     _defineProperty(_assertThisInitialized(_this), "keywords", void 0);
@@ -24,15 +38,22 @@ export var MentionMenuOption = /*#__PURE__*/function (_MenuOption) {
     _defineProperty(_assertThisInitialized(_this), "onSelect", void 0);
     _defineProperty(_assertThisInitialized(_this), "disabled", void 0);
     _defineProperty(_assertThisInitialized(_this), "data", void 0);
+    _defineProperty(_assertThisInitialized(_this), "children", void 0);
     _this.value = value;
     _this.label = label;
-    _this.keywords = options.keywords || [];
-    _this.icon = options.icon;
-    _this.extraElement = options.extraElement;
-    _this.keyboardShortcut = options.keyboardShortcut;
-    _this.onSelect = options.onSelect.bind(_assertThisInitialized(_this));
-    _this.disabled = options.disabled;
-    _this.data = options.data;
+    _this.title = label;
+    _this.key = value;
+    _this.keywords = keywords || [];
+    _this.icon = icon;
+    _this.extraElement = extraElement;
+    _this.keyboardShortcut = keyboardShortcut;
+    _this.onSelect = onSelect.bind(_assertThisInitialized(_this));
+    _this.disabled = disabled;
+    _this.data = data;
+    _this.children = children === null || children === void 0 ? void 0 : children.map(function (m) {
+      // const
+      return new MentionMenuOption(m);
+    });
     return _this;
   }
   return _createClass(MentionMenuOption);

package/es/Mentions/plugins/on-blur-or-focus-block.js

@@ -18,7 +18,7 @@ var OnBlurBlock = function OnBlurBlock(_ref) {
         ref.current = null;
       }
       return true;
-    }, COMMAND_PRIORITY_EDITOR), editor.registerCommand(BLUR_COMMAND, function () {
+    }, COMMAND_PRIORITY_EDITOR), editor.registerCommand(BLUR_COMMAND, function (_payload, _editor) {
       ref.current = setTimeout(function () {
         editor.dispatchCommand(KEY_ESCAPE_COMMAND, new KeyboardEvent('keydown', {
           key: 'Escape'

package/es/Mentions/types.d.ts

@@ -1,14 +1,9 @@
-/// <reference types="react" />
-export interface MentionOption {
-    label: string;
-    value: string;
-    data?: any;
-    icon?: JSX.Element;
-    extraElement?: JSX.Element;
-    keywords?: Array<string>;
-    keyboardShortcut?: string;
+import { MentionMenuOptionInitParams } from './plugins/mention-picker/utils';
+export interface MentionOption extends Omit<MentionMenuOptionInitParams, 'onSelect' | 'children'> {
+    /** 选中后展示的 label 名称，不指定则直接使用 label */
+    selectedLabel?: string;
     error?: string;
-    disabled?: boolean;
+    children?: MentionOption[];
 }
 export type MentionsOptionsMap = Record<string, MentionOption>;
 export interface AutoSize {

package/es/MonacoEditor/base/index.d.ts

@@ -4,7 +4,9 @@ import { IDiffMonacoEditorProps, ISingleMonacoEditorProps } from './helper';
 export * from './controller';
 export * from './monaco';
 declare function noop(): void;
-export declare const SingleMonacoEditorComponent: React.FC<ISingleMonacoEditorProps> & {
+export declare const SingleMonacoEditorComponent: React.FC<ISingleMonacoEditorProps & {
+    variant?: "filled" | "borderless" | "outlined" | undefined;
+}> & {
     displayName: string;
     defaultProps: {
         width: string;
@@ -17,7 +19,9 @@ export declare const SingleMonacoEditorComponent: React.FC<ISingleMonacoEditorPr
         onChange: typeof noop;
         requireConfig: {};
     };
-    MonacoDiffEditor: React.FC<IDiffMonacoEditorProps> & {
+    MonacoDiffEditor: React.FC<IDiffMonacoEditorProps & {
+        variant?: "filled" | "borderless" | "outlined" | undefined;
+    }> & {
         displayName: string;
         defaultProps: {
             width: string;

package/es/MonacoEditor/base/index.js

@@ -32,7 +32,8 @@ var SingleMonacoEditor = function SingleMonacoEditor(props) {
     fullScreen = _useFullScreen.fullScreen;
   var _useStyles = useStyles({
       isFullScreen: isFullScreen,
-      minimapEnabled: (_props$options = props.options) === null || _props$options === void 0 || (_props$options = _props$options.minimap) === null || _props$options === void 0 ? void 0 : _props$options.enabled
+      minimapEnabled: (_props$options = props.options) === null || _props$options === void 0 || (_props$options = _props$options.minimap) === null || _props$options === void 0 ? void 0 : _props$options.enabled,
+      variant: props.variant
     }),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
@@ -129,7 +130,8 @@ var DiffMonacoEditor = function DiffMonacoEditor(props) {
     fullScreen = _useFullScreen2.fullScreen;
   var _useStyles2 = useStyles({
       isFullScreen: isFullScreen,
-      diff: true
+      diff: true,
+      variant: props.variant
     }),
     cx = _useStyles2.cx,
     styles = _useStyles2.styles;

package/es/MonacoEditor/base/style.d.ts

@@ -5,6 +5,7 @@ export declare const useStyles: (props?: {
     minimapEnabled?: boolean | undefined;
     isFullScreen?: boolean | undefined;
     diff?: boolean | undefined;
+    variant?: "filled" | "borderless" | "outlined" | undefined;
 } | undefined) => import("antd-style").ReturnStyles<{
     base: import("antd-style").SerializedStyles;
     fullScreenBtn: import("antd-style").SerializedStyles;