@yuntijs/ui 1.0.0-beta.110 → 1.0.0-beta.111

package/es/Mentions/index.d.ts

@@ -19,5 +19,6 @@ export interface MentionsProps extends MentionPickerPluginProps {
     onFocus?: () => void;
     variant?: 'outlined' | 'filled' | 'borderless';
     autoSize?: AutoSize;
+    code?: boolean;
 }
 export declare const Mentions: React.FC<MentionsProps>;

package/es/Mentions/index.js

@@ -44,11 +44,14 @@ export var Mentions = function Mentions(_ref) {
     allowSpaces = _ref.allowSpaces,
     punctuation = _ref.punctuation,
     preTriggerChars = _ref.preTriggerChars,
-    onSelect = _ref.onSelect;
+    onSelect = _ref.onSelect,
+    _ref$code = _ref.code,
+    code = _ref$code === void 0 ? false : _ref$code;
   var _ConfigProvider$useCo = ConfigProvider.useConfig(),
     componentDisabled = _ConfigProvider$useCo.componentDisabled;
   var _useStyles = useStyles({
-      autoSize: autoSize
+      autoSize: autoSize,
+      code: code
     }),
     styles = _useStyles.styles,
     cx = _useStyles.cx;

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

@@ -47,7 +47,7 @@ export var MentionNodeComponent = /*#__PURE__*/memo(function (_ref) {
       }), /*#__PURE__*/_jsx(Flex, {
         className: styles.text,
         gap: 2,
-        title: (option === null || option === void 0 ? void 0 : option.label) || variable,
+        title: (option === null || option === void 0 ? void 0 : option.selectedLabel) || (option === null || option === void 0 ? void 0 : option.label) || variable,
         children: /*#__PURE__*/_jsx("span", {
           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-picker/hooks.js

@@ -32,6 +32,7 @@ export var useOptions = function useOptions(allOptions, queryString) {
   var options = useMemo(function () {
     var _addOnselect = function _addOnselect(option) {
       var menuOption = _objectSpread(_objectSpread({}, option), {}, {
+        title: option.selectedLabel,
         children: undefined,
         onSelect: function onSelect() {
           editor.dispatchCommand(INSERT_MENTION_COMMAND, option.value);

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

@@ -1,12 +1,10 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 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 { flatMap } from 'lodash-es';
+import React, { memo, useCallback, useMemo, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { DEFAULT_PUNCTUATION, PRE_TRIGGER_CHARS } from "../../constants";
 import { useCheckForMentionMatch } from "../../hooks";
@@ -47,6 +45,14 @@ export var MentionPickerPlugin = /*#__PURE__*/memo(function (_ref) {
     setQueryString = _useState2[1];
   var _useOptions = useOptions(allOptions, queryString),
     options = _useOptions.options;
+  var flatOptions = useMemo(function () {
+    var _flattenTree = function _flattenTree(nodes) {
+      return flatMap(nodes, function (node) {
+        return [node].concat(_toConsumableArray(node.children ? _flattenTree(node.children) : []));
+      });
+    };
+    return _flattenTree(options);
+  }, [options]);
   var onSelectOption = useCallback(function (selectedOption, nodeToRemove, closeMenu, matchingString) {
     onSelect === null || onSelect === void 0 || onSelect(selectedOption, trigger, queryString);
     editor.update(function () {
@@ -69,7 +75,8 @@ export var MentionPickerPlugin = /*#__PURE__*/memo(function (_ref) {
             indentSize: 16,
             lineHeight: 32,
             titleHeight: 32,
-            paddingXS: 0
+            paddingXS: 0,
+            nodeHoverBg: 'transparent'
           }
         }
       },
@@ -86,9 +93,9 @@ export var MentionPickerPlugin = /*#__PURE__*/memo(function (_ref) {
           selectOptionAndCleanUp(info.node);
         },
         titleRender: function titleRender(option) {
-          var _options;
+          var _flatOptions;
           return /*#__PURE__*/_jsx(MentionMenuItem, {
-            isSelected: ((_options = options[selectedIndex]) === null || _options === void 0 ? void 0 : _options.value) === option.value,
+            isSelected: ((_flatOptions = flatOptions[selectedIndex]) === null || _flatOptions === void 0 ? void 0 : _flatOptions.value) === option.value,
             option: option,
             queryString: queryString,
             showIcon: !option.isChild
@@ -97,7 +104,7 @@ export var MentionPickerPlugin = /*#__PURE__*/memo(function (_ref) {
         treeData: options
       })
     });
-  }, [options, editor, queryString]);
+  }, [options, editor, flatOptions, queryString]);
   var renderMenu = useCallback(function (anchorElementRef, itemProps, _matchingString) {
     var selectedIndex = itemProps.selectedIndex,
       selectOptionAndCleanUp = itemProps.selectOptionAndCleanUp,
@@ -131,7 +138,7 @@ export var MentionPickerPlugin = /*#__PURE__*/memo(function (_ref) {
     menuRenderFn: renderMenu,
     onQueryChange: setQueryString,
     onSelectOption: onSelectOption,
-    options: options,
+    options: flatOptions,
     triggerFn: checkForMentionMatch
   });
 });

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

@@ -55,12 +55,12 @@ export var MentionMenuItem = /*#__PURE__*/memo(function (_ref) {
     },
     ref: option.setRefElement,
     tabIndex: -1,
+    title: option.htmlTitle || option.label,
     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

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

@@ -7,7 +7,7 @@ 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.colorFillSecondary);
+  var selectedBg = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      background-color: ", ";\n    "])), token.colorFillTertiary);
   return {
     anchor: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        z-index: 9999;\n      "]))),
     menuEmpty: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        padding: ", "px;\n      "])), token.padding),

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

@@ -3,6 +3,7 @@ import { MenuOption } from '@lexical/react/LexicalTypeaheadMenuPlugin';
 export interface MentionMenuOptionInitParams {
     label: string;
     value: string;
+    title?: string;
     data?: any;
     icon?: JSX.Element;
     extraElement?: JSX.Element;
@@ -16,6 +17,7 @@ export interface MentionMenuOptionInitParams {
 export declare class MentionMenuOption extends MenuOption {
     label: string;
     value: string;
+    htmlTitle?: string;
     title: string;
     key: string;
     icon?: JSX.Element;
@@ -27,5 +29,5 @@ export declare class MentionMenuOption extends MenuOption {
     data?: any;
     children?: MentionMenuOption[];
     isChild?: boolean;
-    constructor({ label, value, data, icon, extraElement, keywords, keyboardShortcut, disabled, onSelect, children, isChild, }: MentionMenuOptionInitParams);
+    constructor({ label, value, title, data, icon, extraElement, keywords, keyboardShortcut, disabled, onSelect, children, isChild, }: MentionMenuOptionInitParams);
 }

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

@@ -17,6 +17,7 @@ export var MentionMenuOption = /*#__PURE__*/function (_MenuOption) {
     var _this;
     var label = _ref.label,
       value = _ref.value,
+      title = _ref.title,
       data = _ref.data,
       icon = _ref.icon,
       extraElement = _ref.extraElement,
@@ -30,6 +31,7 @@ export var MentionMenuOption = /*#__PURE__*/function (_MenuOption) {
     _this = _super.call(this, value);
     _defineProperty(_assertThisInitialized(_this), "label", void 0);
     _defineProperty(_assertThisInitialized(_this), "value", void 0);
+    _defineProperty(_assertThisInitialized(_this), "htmlTitle", void 0);
     // for Tree, the same as label
     _defineProperty(_assertThisInitialized(_this), "title", void 0);
     // for Tree, the same as value
@@ -45,6 +47,7 @@ export var MentionMenuOption = /*#__PURE__*/function (_MenuOption) {
     _defineProperty(_assertThisInitialized(_this), "isChild", void 0);
     _this.value = value;
     _this.label = label;
+    _this.htmlTitle = title;
     _this.title = label;
     _this.key = value;
     _this.keywords = keywords || [];

package/es/Mentions/style.d.ts

@@ -1,6 +1,7 @@
 import { AutoSize } from './types';
 export declare const useStyles: (props?: {
     autoSize?: AutoSize | undefined;
+    code: boolean;
 } | undefined) => import("antd-style").ReturnStyles<{
     wrapper: import("antd-style").SerializedStyles;
     placeholder: import("antd-style").SerializedStyles;

package/es/Mentions/style.js

@@ -8,13 +8,13 @@ var calculateHeight = function calculateHeight(rows) {
 };
 export var useStyles = createStyles(function (_ref, _ref2) {
   var css = _ref.css,
-    token = _ref.token,
-    prefixCls = _ref.prefixCls;
-  var autoSize = _ref2.autoSize;
+    token = _ref.token;
+  var autoSize = _ref2.autoSize,
+    code = _ref2.code;
   return {
     wrapper: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        position: relative;\n        display: inline-block;\n        width: 100%;\n        min-width: 0;\n      "]))),
     placeholder: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        pointer-events: none;\n        user-select: none;\n\n        position: absolute;\n        top: 0;\n        left: 13px;\n\n        height: ", "px;\n\n        font-size: ", "px;\n        line-height: ", "px;\n        color: ", ";\n      "])), inputHeight, token.fontSize, inputHeight, token.colorTextPlaceholder),
-    root: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        outline: none;\n        border: 1px solid ", ";\n        border-radius: ", "px;\n\n        margin: 0;\n        padding: 4px 11px;\n\n        color: ", ";\n        font-size: ", "px;\n        font-family: ", ";\n\n        display: inline-block;\n\n        width: 100%;\n        min-width: 0;\n\n        ", "\n        ", "\n        overflow: auto;\n\n        transition: all ", ";\n        &:focus {\n          border-color: ", ";\n        }\n        p {\n          margin-bottom: 0;\n          margin-block: 0 0;\n          line-height: ", "px;\n        }\n      "])), token.colorBorder, token.borderRadius, token.colorText, token.fontSize, token.fontFamily, (autoSize === null || autoSize === void 0 ? void 0 : autoSize.minRows) && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          min-height: ", "px;\n        "])), calculateHeight(autoSize.minRows)), (autoSize === null || autoSize === void 0 ? void 0 : autoSize.maxRows) && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          max-height: ", "px;\n        "])), calculateHeight(autoSize.maxRows)), token.motionDurationMid, token.colorPrimaryBorder, lineHeight),
+    root: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        outline: none;\n        border: 1px solid ", ";\n        border-radius: ", "px;\n\n        margin: 0;\n        padding: 4px 11px;\n\n        color: ", ";\n        font-size: ", "px;\n        .align-middle {\n          vertical-align: middle;\n        }\n        font-family: ", ";\n\n        display: inline-block;\n\n        width: 100%;\n        min-width: 0;\n\n        ", "\n        ", "\n        overflow: auto;\n\n        transition: all ", ";\n        &:focus {\n          border-color: ", ";\n        }\n        p {\n          margin-bottom: 0;\n          margin-block: 0 0;\n          line-height: ", "px;\n        }\n      "])), token.colorBorder, token.borderRadius, token.colorText, token.fontSize, code ? token.fontFamilyCode : token.fontFamily, (autoSize === null || autoSize === void 0 ? void 0 : autoSize.minRows) && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          min-height: ", "px;\n        "])), calculateHeight(autoSize.minRows)), (autoSize === null || autoSize === void 0 ? void 0 : autoSize.maxRows) && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          max-height: ", "px;\n        "])), calculateHeight(autoSize.maxRows)), token.motionDurationMid, token.colorPrimaryBorder, lineHeight),
     filled: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        background: ", ";\n        border-color: transparent;\n        &:hover {\n          background: ", ";\n        }\n        &:focus {\n          background: ", ";\n        }\n      "])), token.colorFillTertiary, token.colorFillSecondary, token.colorBgBase),
     borderless: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        background: transparent;\n        border: none;\n      "]))),
     disabled: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        cursor: not-allowed;\n        color: ", ";\n        background: ", ";\n      "])), token.colorTextDisabled, token.colorBgContainerDisabled)

package/es/Mentions/types.d.ts

@@ -1,5 +1,5 @@
 import { MentionMenuOptionInitParams } from './plugins/mention-picker/utils';
-export interface MentionOption extends Omit<MentionMenuOptionInitParams, 'onSelect' | 'children'> {
+export interface MentionOption extends Omit<MentionMenuOptionInitParams, 'onSelect' | 'children' | 'title'> {
     /** 选中后展示的 label 名称，不指定则直接使用 label */
     selectedLabel?: string;
     error?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuntijs/ui",
-  "version": "1.0.0-beta.110",
+  "version": "1.0.0-beta.111",
   "description": "☁️ Yunti UI - an open-source UI component library for building Cloud Native web apps",
   "keywords": [
     "yuntijs",