rc-mentions - npm Package Compare versions

Comparing version 1.11.0 to 1.12.0

es/DropdownMenu.d.ts

 /// <reference types="react" />
-import type { OptionProps } from './Option';
+import type { DataDrivenOptionProps } from './Mentions';
 interface DropdownMenuProps {
     prefixCls?: string;
-    options: OptionProps[];
+    options: DataDrivenOptionProps[];
 }
@@ -7,0 +7,0 @@ /**

es/DropdownMenu.js

@@ -8,14 +8,12 @@ import Menu, { MenuItem } from 'rc-menu';
  */
-
 function DropdownMenu(props) {
   var _React$useContext = React.useContext(MentionsContext),
-      notFoundContent = _React$useContext.notFoundContent,
-      activeIndex = _React$useContext.activeIndex,
-      setActiveIndex = _React$useContext.setActiveIndex,
-      selectOption = _React$useContext.selectOption,
-      onFocus = _React$useContext.onFocus,
-      onBlur = _React$useContext.onBlur;
-
+    notFoundContent = _React$useContext.notFoundContent,
+    activeIndex = _React$useContext.activeIndex,
+    setActiveIndex = _React$useContext.setActiveIndex,
+    selectOption = _React$useContext.selectOption,
+    onFocus = _React$useContext.onFocus,
+    onBlur = _React$useContext.onBlur;
   var prefixCls = props.prefixCls,
-      options = props.options;
+    options = props.options;
   var activeOption = options[activeIndex] || {};
@@ -37,6 +35,6 @@ return /*#__PURE__*/React.createElement(Menu, {
     var key = option.key,
-        disabled = option.disabled,
-        children = option.children,
-        className = option.className,
-        style = option.style;
+      disabled = option.disabled,
+      className = option.className,
+      style = option.style,
+      label = option.label;
     return /*#__PURE__*/React.createElement(MenuItem, {
@@ -50,3 +48,3 @@ key: key,
       }
-    }, children);
+    }, label);
   }), !options.length && /*#__PURE__*/React.createElement(MenuItem, {
@@ -56,3 +54,2 @@ disabled: true
 }
-
 export default DropdownMenu;

es/hooks/useEffectState.d.ts

@@ -1,2 +0,2 @@
-export declare type Trigger = (callback?: VoidFunction) => void;
+export type Trigger = (callback?: VoidFunction) => void;
 /**
@@ -3,0 +3,0 @@ * Trigger a callback on state change

es/hooks/useEffectState.js

@@ -6,12 +6,10 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
  */
-
 export default function useEffectState() {
   var _useState = useState({
-    id: 0,
-    callback: null
-  }),
-      _useState2 = _slicedToArray(_useState, 2),
-      effectId = _useState2[0],
-      setEffectId = _useState2[1];
-
+      id: 0,
+      callback: null
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    effectId = _useState2[0],
+    setEffectId = _useState2[1];
   var update = useCallback(function (callback) {
@@ -28,3 +26,2 @@ setEffectId(function (_ref) {
     var _effectId$callback;
-
     (_effectId$callback = effectId.callback) === null || _effectId$callback === void 0 ? void 0 : _effectId$callback.call(effectId);
@@ -31,0 +28,0 @@ }, [effectId]);

es/KeywordTrigger.d.ts

 import * as React from 'react';
-import type { OptionProps } from './Option';
-import type { Direction, Placement } from './Mentions';
+import type { Direction, Placement, DataDrivenOptionProps } from './Mentions';
 interface KeywordTriggerProps {
     loading?: boolean;
-    options: OptionProps[];
+    options: DataDrivenOptionProps[];
     prefixCls?: string;
@@ -19,5 +18,5 @@ placement?: Placement;
     getDropdownElement: () => JSX.Element;
-    getDropDownPlacement: () => string;
+    getDropDownPlacement: () => any;
     render(): JSX.Element;
 }
 export default KeywordTrigger;

es/KeywordTrigger.js

@@ -42,19 +42,15 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 };
-
 var KeywordTrigger = /*#__PURE__*/function (_React$Component) {
   _inherits(KeywordTrigger, _React$Component);
-
   var _super = _createSuper(KeywordTrigger);
-
   function KeywordTrigger() {
     var _this;
-
     _classCallCheck(this, KeywordTrigger);
-
-    _this = _super.apply(this, arguments);
-
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
     _this.getDropdownPrefix = function () {
       return "".concat(_this.props.prefixCls, "-dropdown");
     };
-
     _this.getDropdownElement = function () {
@@ -67,9 +63,7 @@ var options = _this.props.options;
     };
-
     _this.getDropDownPlacement = function () {
       var _this$props = _this.props,
-          placement = _this$props.placement,
-          direction = _this$props.direction;
-      var popupPlacement = 'topRight';
-
+        placement = _this$props.placement,
+        direction = _this$props.direction;
+      var popupPlacement;
       if (direction === 'rtl') {
@@ -80,9 +74,6 @@ popupPlacement = placement === 'top' ? 'topLeft' : 'bottomLeft';
       }
-
       return popupPlacement;
     };
-
     return _this;
   }
-
   _createClass(KeywordTrigger, [{
@@ -92,6 +83,6 @@ key: "render",
       var _this$props2 = this.props,
-          children = _this$props2.children,
-          visible = _this$props2.visible,
-          transitionName = _this$props2.transitionName,
-          getPopupContainer = _this$props2.getPopupContainer;
+        children = _this$props2.children,
+        visible = _this$props2.visible,
+        transitionName = _this$props2.transitionName,
+        getPopupContainer = _this$props2.getPopupContainer;
       var popupElement = this.getDropdownElement();
@@ -110,6 +101,4 @@ return /*#__PURE__*/React.createElement(Trigger, {
   }]);
-
   return KeywordTrigger;
 }(React.Component);
-
 export default KeywordTrigger;

es/Mentions.d.ts

 import React from 'react';
 import type { TextAreaProps } from 'rc-textarea';
+import type { OptionProps } from './Option';
 import Option from './Option';
-import type { OptionProps } from './Option';
 import { filterOption as defaultFilterOption, validateSearch as defaultValidateSearch } from './util';
-declare type BaseTextareaAttrs = Omit<TextAreaProps, 'prefix' | 'onChange' | 'onSelect'>;
-export declare type Placement = 'top' | 'bottom';
-export declare type Direction = 'ltr' | 'rtl';
+type BaseTextareaAttrs = Omit<TextAreaProps, 'prefix' | 'onChange' | 'onSelect'>;
+export type Placement = 'top' | 'bottom';
+export type Direction = 'ltr' | 'rtl';
+export interface DataDrivenOptionProps extends Omit<OptionProps, 'children'> {
+    label?: React.ReactNode;
+}
 export interface MentionsProps extends BaseTextareaAttrs {
@@ -34,2 +37,3 @@ autoFocus?: boolean;
     children?: React.ReactNode;
+    options?: DataDrivenOptionProps[];
 }
@@ -36,0 +40,0 @@ export interface MentionsRef {

es/Mentions.js

@@ -5,2 +5,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["prefixCls", "className", "style", "prefix", "split", "notFoundContent", "value", "defaultValue", "children", "options", "open", "validateSearch", "filterOption", "onChange", "onKeyDown", "onKeyUp", "onPressEnter", "onSearch", "onSelect", "onFocus", "onBlur", "transitionName", "placement", "direction", "getPopupContainer", "dropdownClassName"];
 import classNames from 'classnames';
@@ -11,3 +12,3 @@ import useMergedState from "rc-util/es/hooks/useMergedState";
 import warning from "rc-util/es/warning";
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import TextArea from 'rc-textarea';
@@ -21,51 +22,44 @@ import KeywordTrigger from './KeywordTrigger';
   var prefixCls = props.prefixCls,
-      className = props.className,
-      style = props.style,
-      prefix = props.prefix,
-      split = props.split,
-      notFoundContent = props.notFoundContent,
-      value = props.value,
-      defaultValue = props.defaultValue,
-      children = props.children,
-      open = props.open,
-      validateSearch = props.validateSearch,
-      filterOption = props.filterOption,
-      onChange = props.onChange,
-      onKeyDown = props.onKeyDown,
-      onKeyUp = props.onKeyUp,
-      onPressEnter = props.onPressEnter,
-      onSearch = props.onSearch,
-      onSelect = props.onSelect,
-      onFocus = props.onFocus,
-      onBlur = props.onBlur,
-      transitionName = props.transitionName,
-      placement = props.placement,
-      direction = props.direction,
-      getPopupContainer = props.getPopupContainer,
-      dropdownClassName = props.dropdownClassName,
-      restProps = _objectWithoutProperties(props, ["prefixCls", "className", "style", "prefix", "split", "notFoundContent", "value", "defaultValue", "children", "open", "validateSearch", "filterOption", "onChange", "onKeyDown", "onKeyUp", "onPressEnter", "onSearch", "onSelect", "onFocus", "onBlur", "transitionName", "placement", "direction", "getPopupContainer", "dropdownClassName"]);
-
+    className = props.className,
+    style = props.style,
+    prefix = props.prefix,
+    split = props.split,
+    notFoundContent = props.notFoundContent,
+    value = props.value,
+    defaultValue = props.defaultValue,
+    children = props.children,
+    options = props.options,
+    open = props.open,
+    validateSearch = props.validateSearch,
+    filterOption = props.filterOption,
+    onChange = props.onChange,
+    onKeyDown = props.onKeyDown,
+    onKeyUp = props.onKeyUp,
+    onPressEnter = props.onPressEnter,
+    onSearch = props.onSearch,
+    onSelect = props.onSelect,
+    onFocus = props.onFocus,
+    onBlur = props.onBlur,
+    transitionName = props.transitionName,
+    placement = props.placement,
+    direction = props.direction,
+    getPopupContainer = props.getPopupContainer,
+    dropdownClassName = props.dropdownClassName,
+    restProps = _objectWithoutProperties(props, _excluded);
   var mergedPrefix = Array.isArray(prefix) ? prefix : [prefix];
-
   var mergedProps = _objectSpread(_objectSpread({}, props), {}, {
     prefix: mergedPrefix
-  }); // =============================== Refs ===============================
-
-
+  });
+  // =============================== Refs ===============================
   var textareaRef = useRef(null);
   var measureRef = useRef(null);
-
   var getTextArea = function getTextArea() {
     var _textareaRef$current, _textareaRef$current$;
-
     return (_textareaRef$current = textareaRef.current) === null || _textareaRef$current === void 0 ? void 0 : (_textareaRef$current$ = _textareaRef$current.resizableTextArea) === null || _textareaRef$current$ === void 0 ? void 0 : _textareaRef$current$.textArea;
   };
-
   React.useImperativeHandle(ref, function () {
     var _textareaRef$current4, _textareaRef$current5;
-
     return {
       focus: function focus() {
         var _textareaRef$current2;
-
         return (_textareaRef$current2 = textareaRef.current) === null || _textareaRef$current2 === void 0 ? void 0 : _textareaRef$current2.focus();
@@ -75,3 +69,2 @@ },
         var _textareaRef$current3;
-
         return (_textareaRef$current3 = textareaRef.current) === null || _textareaRef$current3 === void 0 ? void 0 : _textareaRef$current3.blur();
@@ -81,44 +74,37 @@ },
     };
-  }); // ============================== State ===============================
-
+  });
+  // ============================== State ===============================
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      measuring = _useState2[0],
-      setMeasuring = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    measuring = _useState2[0],
+    setMeasuring = _useState2[1];
   var _useState3 = useState(''),
-      _useState4 = _slicedToArray(_useState3, 2),
-      measureText = _useState4[0],
-      setMeasureText = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    measureText = _useState4[0],
+    setMeasureText = _useState4[1];
   var _useState5 = useState(''),
-      _useState6 = _slicedToArray(_useState5, 2),
-      measurePrefix = _useState6[0],
-      setMeasurePrefix = _useState6[1];
-
+    _useState6 = _slicedToArray(_useState5, 2),
+    measurePrefix = _useState6[0],
+    setMeasurePrefix = _useState6[1];
   var _useState7 = useState(0),
-      _useState8 = _slicedToArray(_useState7, 2),
-      measureLocation = _useState8[0],
-      setMeasureLocation = _useState8[1];
-
+    _useState8 = _slicedToArray(_useState7, 2),
+    measureLocation = _useState8[0],
+    setMeasureLocation = _useState8[1];
   var _useState9 = useState(0),
-      _useState10 = _slicedToArray(_useState9, 2),
-      activeIndex = _useState10[0],
-      setActiveIndex = _useState10[1];
-
+    _useState10 = _slicedToArray(_useState9, 2),
+    activeIndex = _useState10[0],
+    setActiveIndex = _useState10[1];
   var _useState11 = useState(false),
-      _useState12 = _slicedToArray(_useState11, 2),
-      isFocus = _useState12[0],
-      setIsFocus = _useState12[1]; // ============================== Value ===============================
-
-
+    _useState12 = _slicedToArray(_useState11, 2),
+    isFocus = _useState12[0],
+    setIsFocus = _useState12[1];
+  // ============================== Value ===============================
   var _useMergedState = useMergedState('', {
-    defaultValue: defaultValue,
-    value: value
-  }),
-      _useMergedState2 = _slicedToArray(_useMergedState, 2),
-      mergedValue = _useMergedState2[0],
-      setMergedValue = _useMergedState2[1]; // =============================== Open ===============================
-
-
+      defaultValue: defaultValue,
+      value: value
+    }),
+    _useMergedState2 = _slicedToArray(_useMergedState, 2),
+    mergedValue = _useMergedState2[0],
+    setMergedValue = _useMergedState2[1];
+  // =============================== Open ===============================
   useEffect(function () {
@@ -130,36 +116,42 @@ // Sync measure div top with textarea for rc-trigger usage
   }, [measuring]);
-
   var _React$useMemo = React.useMemo(function () {
-    if (open) {
-      if (process.env.NODE_ENV !== 'production') {
-        warning(false, '`open` of Mentions is only used for debug usage. Do not use in you production.');
-      }
-
-      for (var i = 0; i < mergedPrefix.length; i += 1) {
-        var curPrefix = mergedPrefix[i];
-        var index = mergedValue.lastIndexOf(curPrefix);
-
-        if (index >= 0) {
-          return [true, '', curPrefix, index];
+      if (open) {
+        if (process.env.NODE_ENV !== 'production') {
+          warning(false, '`open` of Mentions is only used for debug usage. Do not use in you production.');
         }
+        for (var i = 0; i < mergedPrefix.length; i += 1) {
+          var curPrefix = mergedPrefix[i];
+          var index = mergedValue.lastIndexOf(curPrefix);
+          if (index >= 0) {
+            return [true, '', curPrefix, index];
+          }
+        }
       }
-    }
-
-    return [measuring, measureText, measurePrefix, measureLocation];
-  }, [open, measuring, mergedPrefix, mergedValue, measureText, measurePrefix, measureLocation]),
-      _React$useMemo2 = _slicedToArray(_React$useMemo, 4),
-      mergedMeasuring = _React$useMemo2[0],
-      mergedMeasureText = _React$useMemo2[1],
-      mergedMeasurePrefix = _React$useMemo2[2],
-      mergedMeasureLocation = _React$useMemo2[3]; // ============================== Option ==============================
-
-
+      return [measuring, measureText, measurePrefix, measureLocation];
+    }, [open, measuring, mergedPrefix, mergedValue, measureText, measurePrefix, measureLocation]),
+    _React$useMemo2 = _slicedToArray(_React$useMemo, 4),
+    mergedMeasuring = _React$useMemo2[0],
+    mergedMeasureText = _React$useMemo2[1],
+    mergedMeasurePrefix = _React$useMemo2[2],
+    mergedMeasureLocation = _React$useMemo2[3];
+  // ============================== Option ==============================
   var getOptions = React.useCallback(function (targetMeasureText) {
-    var list = toArray(children).map(function (_ref) {
-      var optionProps = _ref.props,
+    var list;
+    if (options && options.length > 0) {
+      list = options.map(function (item) {
+        var _item$key;
+        return _objectSpread(_objectSpread({}, item), {}, {
+          key: (_item$key = item === null || item === void 0 ? void 0 : item.key) !== null && _item$key !== void 0 ? _item$key : item.value
+        });
+      });
+    } else {
+      list = toArray(children).map(function (_ref) {
+        var optionProps = _ref.props,
           key = _ref.key;
-      return _objectSpread(_objectSpread({}, optionProps), {}, {
-        key: key || optionProps.value
+        return _objectSpread(_objectSpread({}, optionProps), {}, {
+          key: key || optionProps.value
+        });
       });
-    }).filter(function (option) {
+    }
+    return list.filter(function (option) {
       /** Return all result if `filterOption` is false. */
@@ -169,14 +161,11 @@ if (filterOption === false) {
       }
-
       return filterOption(targetMeasureText, option);
     });
-    return list;
-  }, [children, filterOption]);
-  var options = React.useMemo(function () {
+  }, [children, options, filterOption]);
+  var mergedOptions = React.useMemo(function () {
     return getOptions(mergedMeasureText);
-  }, [getOptions, mergedMeasureText]); // ============================= Measure ==============================
+  }, [getOptions, mergedMeasureText]);
+  // ============================= Measure ==============================
   // Mark that we will reset input selection to target position when user select option
-
   var onSelectionEffect = useEffectState();
-
   var startMeasure = function startMeasure(nextMeasureText, nextMeasurePrefix, nextMeasureLocation) {
@@ -189,3 +178,2 @@ setMeasuring(true);
   };
-
   var stopMeasure = function stopMeasure(callback) {
@@ -196,5 +184,4 @@ setMeasuring(false);
     onSelectionEffect(callback);
-  }; // ============================== Change ==============================
-
-
+  };
+  // ============================== Change ==============================
   var triggerChange = function triggerChange(nextValue) {
@@ -204,3 +191,2 @@ setMergedValue(nextValue);
   };
-
   var onInternalChange = function onInternalChange(_ref2) {
@@ -210,19 +196,15 @@ var nextValue = _ref2.target.value;
   };
-
   var selectOption = function selectOption(option) {
     var _getTextArea;
-
     var _option$value = option.value,
-        mentionValue = _option$value === void 0 ? '' : _option$value;
-
+      mentionValue = _option$value === void 0 ? '' : _option$value;
     var _replaceWithMeasure = replaceWithMeasure(mergedValue, {
-      measureLocation: mergedMeasureLocation,
-      targetText: mentionValue,
-      prefix: mergedMeasurePrefix,
-      selectionStart: (_getTextArea = getTextArea()) === null || _getTextArea === void 0 ? void 0 : _getTextArea.selectionStart,
-      split: split
-    }),
-        text = _replaceWithMeasure.text,
-        selectionLocation = _replaceWithMeasure.selectionLocation;
-
+        measureLocation: mergedMeasureLocation,
+        targetText: mentionValue,
+        prefix: mergedMeasurePrefix,
+        selectionStart: (_getTextArea = getTextArea()) === null || _getTextArea === void 0 ? void 0 : _getTextArea.selectionStart,
+        split: split
+      }),
+      text = _replaceWithMeasure.text,
+      selectionLocation = _replaceWithMeasure.selectionLocation;
     triggerChange(text);
@@ -234,17 +216,15 @@ stopMeasure(function () {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(option, mergedMeasurePrefix);
-  }; // ============================= KeyEvent =============================
+  };
+  // ============================= KeyEvent =============================
   // Check if hit the measure keyword
-
-
   var onInternalKeyDown = function onInternalKeyDown(event) {
     var which = event.which;
-    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event); // Skip if not measuring
-
+    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+    // Skip if not measuring
     if (!mergedMeasuring) {
       return;
     }
-
     if (which === KeyCode.UP || which === KeyCode.DOWN) {
       // Control arrow function
-      var optionLen = options.length;
+      var optionLen = mergedOptions.length;
       var offset = which === KeyCode.UP ? -1 : 1;
@@ -259,9 +239,7 @@ var newActiveIndex = (activeIndex + offset + optionLen) % optionLen;
       event.preventDefault();
-
-      if (!options.length) {
+      if (!mergedOptions.length) {
         stopMeasure();
         return;
       }
-
-      var option = options[activeIndex];
+      var option = mergedOptions[activeIndex];
       selectOption(option);
@@ -282,21 +260,16 @@ }
    */
-
-
   var onInternalKeyUp = function onInternalKeyUp(event) {
     var key = event.key,
-        which = event.which;
+      which = event.which;
     var target = event.target;
     var selectionStartText = getBeforeSelectionText(target);
-
     var _getLastMeasureIndex = getLastMeasureIndex(selectionStartText, mergedPrefix),
-        measureIndex = _getLastMeasureIndex.location,
-        nextMeasurePrefix = _getLastMeasureIndex.prefix; // If the client implements an onKeyUp handler, call it
-
-
-    onKeyUp === null || onKeyUp === void 0 ? void 0 : onKeyUp(event); // Skip if match the white key list
-
+      measureIndex = _getLastMeasureIndex.location,
+      nextMeasurePrefix = _getLastMeasureIndex.prefix;
+    // If the client implements an onKeyUp handler, call it
+    onKeyUp === null || onKeyUp === void 0 ? void 0 : onKeyUp(event);
+    // Skip if match the white key list
     if ([KeyCode.ESC, KeyCode.UP, KeyCode.DOWN, KeyCode.ENTER].indexOf(which) !== -1) {
       return;
     }
-
     if (measureIndex !== -1) {
@@ -306,3 +279,2 @@ var nextMeasureText = selectionStartText.slice(measureIndex + nextMeasurePrefix.length);
       var matchOption = !!getOptions(nextMeasureText).length;
-
       if (validateMeasure) {
@@ -320,4 +292,2 @@ if (key === nextMeasurePrefix || key === 'Shift' || mergedMeasuring || nextMeasureText !== mergedMeasureText && matchOption) {
        */
-
-
       if (onSearch && validateMeasure) {
@@ -330,3 +300,2 @@ onSearch(nextMeasureText, nextMeasurePrefix);
   };
-
   var onInternalPressEnter = function onInternalPressEnter(event) {
@@ -336,17 +305,12 @@ if (!mergedMeasuring && onPressEnter) {
     }
-  }; // ============================ Focus Blur ============================
-
-
+  };
+  // ============================ Focus Blur ============================
   var focusRef = useRef();
-
   var onInternalFocus = function onInternalFocus(event) {
     window.clearTimeout(focusRef.current);
-
     if (!isFocus && event && onFocus) {
       onFocus(event);
     }
-
     setIsFocus(true);
   };
-
   var onInternalBlur = function onInternalBlur(event) {
@@ -359,12 +323,9 @@ focusRef.current = window.setTimeout(function () {
   };
-
   var onDropdownFocus = function onDropdownFocus() {
     onInternalFocus();
   };
-
   var onDropdownBlur = function onDropdownBlur() {
     onInternalBlur();
-  }; // ============================== Render ==============================
-
-
+  };
+  // ============================== Render ==============================
   return /*#__PURE__*/React.createElement("div", {
@@ -400,3 +361,3 @@ className: classNames(prefixCls, className),
     direction: direction,
-    options: options,
+    options: mergedOptions,
     visible: true,
@@ -403,0 +364,0 @@ getPopupContainer: getPopupContainer,

es/MentionsContext.js

 /* tslint:disable: no-object-literal-type-assertion */
-import * as React from 'react'; // We will never use default, here only to fix TypeScript warning
-
+import * as React from 'react';
+// We will never use default, here only to fix TypeScript warning
 var MentionsContext = /*#__PURE__*/React.createContext(null);
 export default MentionsContext;

es/Option.d.ts

@@ -1,2 +0,2 @@
-import * as React from 'react';
+import type * as React from 'react';
 export interface OptionProps {
@@ -3,0 +3,0 @@ value?: string;

es/Option.js

 var Option = function Option() {
   return null;
 };
-
 export default Option;

es/util.js

@@ -11,7 +11,5 @@ /**
  */
-
 export function getLastMeasureIndex(text, prefix) {
   return prefix.reduce(function (lastMatch, prefixStr) {
     var lastIndex = text.lastIndexOf(prefixStr);
-
     if (lastIndex > lastMatch.location) {
@@ -23,3 +21,2 @@ return {
     }
-
     return lastMatch;
@@ -31,18 +28,13 @@ }, {
 }
-
 function lower(char) {
   return (char || '').toLowerCase();
 }
-
 function reduceText(text, targetText, split) {
   var firstChar = text[0];
-
   if (!firstChar || firstChar === split) {
     return text;
-  } // Reuse rest text as it can
-
-
+  }
+  // Reuse rest text as it can
   var restText = text;
   var targetTextLen = targetText.length;
-
   for (var i = 0; i < targetTextLen; i += 1) {
@@ -56,3 +48,2 @@ if (lower(restText[i]) !== lower(targetText[i])) {
   }
-
   return restText;
@@ -66,28 +57,21 @@ }
  */
-
-
 export function replaceWithMeasure(text, measureConfig) {
   var measureLocation = measureConfig.measureLocation,
-      prefix = measureConfig.prefix,
-      targetText = measureConfig.targetText,
-      selectionStart = measureConfig.selectionStart,
-      split = measureConfig.split; // Before text will append one space if have other text
-
+    prefix = measureConfig.prefix,
+    targetText = measureConfig.targetText,
+    selectionStart = measureConfig.selectionStart,
+    split = measureConfig.split;
+  // Before text will append one space if have other text
   var beforeMeasureText = text.slice(0, measureLocation);
-
   if (beforeMeasureText[beforeMeasureText.length - split.length] === split) {
     beforeMeasureText = beforeMeasureText.slice(0, beforeMeasureText.length - split.length);
   }
-
   if (beforeMeasureText) {
     beforeMeasureText = "".concat(beforeMeasureText).concat(split);
-  } // Cut duplicate string with current targetText
-
-
+  }
+  // Cut duplicate string with current targetText
   var restText = reduceText(text.slice(selectionStart), targetText.slice(selectionStart - measureLocation - prefix.length), split);
-
   if (restText.slice(0, split.length) === split) {
     restText = restText.slice(split.length);
   }
-
   var connectedStartText = "".concat(beforeMeasureText).concat(prefix).concat(targetText).concat(split);
@@ -105,3 +89,2 @@ return {
    */
-
   input.blur();
@@ -116,5 +99,5 @@ input.focus();
   var _ref$value = _ref.value,
-      value = _ref$value === void 0 ? '' : _ref$value;
+    value = _ref$value === void 0 ? '' : _ref$value;
   var lowerCase = input.toLowerCase();
   return value.toLowerCase().indexOf(lowerCase) !== -1;
 }

lib/DropdownMenu.d.ts

 /// <reference types="react" />
-import type { OptionProps } from './Option';
+import type { DataDrivenOptionProps } from './Mentions';
 interface DropdownMenuProps {
     prefixCls?: string;
-    options: OptionProps[];
+    options: DataDrivenOptionProps[];
 }
@@ -7,0 +7,0 @@ /**

lib/DropdownMenu.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
@@ -11,9 +9,7 @@ value: true
 exports.default = void 0;
-
 var _rcMenu = _interopRequireWildcard(require("rc-menu"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _MentionsContext = _interopRequireDefault(require("./MentionsContext"));
-
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /**
@@ -25,11 +21,10 @@ * We only use Menu to display the candidate.
   var _React$useContext = React.useContext(_MentionsContext.default),
-      notFoundContent = _React$useContext.notFoundContent,
-      activeIndex = _React$useContext.activeIndex,
-      setActiveIndex = _React$useContext.setActiveIndex,
-      selectOption = _React$useContext.selectOption,
-      onFocus = _React$useContext.onFocus,
-      onBlur = _React$useContext.onBlur;
-
+    notFoundContent = _React$useContext.notFoundContent,
+    activeIndex = _React$useContext.activeIndex,
+    setActiveIndex = _React$useContext.setActiveIndex,
+    selectOption = _React$useContext.selectOption,
+    onFocus = _React$useContext.onFocus,
+    onBlur = _React$useContext.onBlur;
   var prefixCls = props.prefixCls,
-      options = props.options;
+    options = props.options;
   var activeOption = options[activeIndex] || {};
@@ -51,6 +46,6 @@ return /*#__PURE__*/React.createElement(_rcMenu.default, {
     var key = option.key,
-        disabled = option.disabled,
-        children = option.children,
-        className = option.className,
-        style = option.style;
+      disabled = option.disabled,
+      className = option.className,
+      style = option.style,
+      label = option.label;
     return /*#__PURE__*/React.createElement(_rcMenu.MenuItem, {
@@ -64,3 +59,3 @@ key: key,
       }
-    }, children);
+    }, label);
   }), !options.length && /*#__PURE__*/React.createElement(_rcMenu.MenuItem, {
@@ -70,4 +65,3 @@ disabled: true
 }
-
 var _default = DropdownMenu;
 exports.default = _default;

lib/hooks/useEffectState.d.ts

@@ -1,2 +0,2 @@
-export declare type Trigger = (callback?: VoidFunction) => void;
+export type Trigger = (callback?: VoidFunction) => void;
 /**
@@ -3,0 +3,0 @@ * Trigger a callback on state change

lib/hooks/useEffectState.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
@@ -9,7 +8,4 @@ value: true
 exports.default = useEffectState;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = require("react");
-
 /**
@@ -20,9 +16,8 @@ * Trigger a callback on state change
   var _useState = (0, _react.useState)({
-    id: 0,
-    callback: null
-  }),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      effectId = _useState2[0],
-      setEffectId = _useState2[1];
-
+      id: 0,
+      callback: null
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    effectId = _useState2[0],
+    setEffectId = _useState2[1];
   var update = (0, _react.useCallback)(function (callback) {
@@ -39,3 +34,2 @@ setEffectId(function (_ref) {
     var _effectId$callback;
-
     (_effectId$callback = effectId.callback) === null || _effectId$callback === void 0 ? void 0 : _effectId$callback.call(effectId);
@@ -42,0 +36,0 @@ }, [effectId]);

lib/index.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
@@ -9,6 +8,4 @@ value: true
 exports.default = void 0;
-
 var _Mentions = _interopRequireDefault(require("./Mentions"));
-
 var _default = _Mentions.default;
 exports.default = _default;

lib/KeywordTrigger.d.ts

 import * as React from 'react';
-import type { OptionProps } from './Option';
-import type { Direction, Placement } from './Mentions';
+import type { Direction, Placement, DataDrivenOptionProps } from './Mentions';
 interface KeywordTriggerProps {
     loading?: boolean;
-    options: OptionProps[];
+    options: DataDrivenOptionProps[];
     prefixCls?: string;
@@ -19,5 +18,5 @@ placement?: Placement;
     getDropdownElement: () => JSX.Element;
-    getDropDownPlacement: () => string;
+    getDropDownPlacement: () => any;
     render(): JSX.Element;
 }
 export default KeywordTrigger;

lib/KeywordTrigger.js

 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
@@ -11,17 +9,11 @@ value: true
 exports.default = void 0;
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-
 var _rcTrigger = _interopRequireDefault(require("rc-trigger"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _DropdownMenu = _interopRequireDefault(require("./DropdownMenu"));
-
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var BUILT_IN_PLACEMENTS = {
@@ -61,18 +53,15 @@ bottomRight: {
 };
-
 var KeywordTrigger = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(KeywordTrigger, _React$Component);
-
   var _super = (0, _createSuper2.default)(KeywordTrigger);
-
   function KeywordTrigger() {
     var _this;
-
     (0, _classCallCheck2.default)(this, KeywordTrigger);
-    _this = _super.apply(this, arguments);
-
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
     _this.getDropdownPrefix = function () {
       return "".concat(_this.props.prefixCls, "-dropdown");
     };
-
     _this.getDropdownElement = function () {
@@ -85,9 +74,7 @@ var options = _this.props.options;
     };
-
     _this.getDropDownPlacement = function () {
       var _this$props = _this.props,
-          placement = _this$props.placement,
-          direction = _this$props.direction;
-      var popupPlacement = 'topRight';
-
+        placement = _this$props.placement,
+        direction = _this$props.direction;
+      var popupPlacement;
       if (direction === 'rtl') {
@@ -98,9 +85,6 @@ popupPlacement = placement === 'top' ? 'topLeft' : 'bottomLeft';
       }
-
       return popupPlacement;
     };
-
     return _this;
   }
-
   (0, _createClass2.default)(KeywordTrigger, [{
@@ -110,6 +94,6 @@ key: "render",
       var _this$props2 = this.props,
-          children = _this$props2.children,
-          visible = _this$props2.visible,
-          transitionName = _this$props2.transitionName,
-          getPopupContainer = _this$props2.getPopupContainer;
+        children = _this$props2.children,
+        visible = _this$props2.visible,
+        transitionName = _this$props2.transitionName,
+        getPopupContainer = _this$props2.getPopupContainer;
       var popupElement = this.getDropdownElement();
@@ -130,4 +114,3 @@ return /*#__PURE__*/React.createElement(_rcTrigger.default, {
 }(React.Component);
-
 var _default = KeywordTrigger;
 exports.default = _default;

lib/Mentions.d.ts

 import React from 'react';
 import type { TextAreaProps } from 'rc-textarea';
+import type { OptionProps } from './Option';
 import Option from './Option';
-import type { OptionProps } from './Option';
 import { filterOption as defaultFilterOption, validateSearch as defaultValidateSearch } from './util';
-declare type BaseTextareaAttrs = Omit<TextAreaProps, 'prefix' | 'onChange' | 'onSelect'>;
-export declare type Placement = 'top' | 'bottom';
-export declare type Direction = 'ltr' | 'rtl';
+type BaseTextareaAttrs = Omit<TextAreaProps, 'prefix' | 'onChange' | 'onSelect'>;
+export type Placement = 'top' | 'bottom';
+export type Direction = 'ltr' | 'rtl';
+export interface DataDrivenOptionProps extends Omit<OptionProps, 'children'> {
+    label?: React.ReactNode;
+}
 export interface MentionsProps extends BaseTextareaAttrs {
@@ -34,2 +37,3 @@ autoFocus?: boolean;
     children?: React.ReactNode;
+    options?: DataDrivenOptionProps[];
 }
@@ -36,0 +40,0 @@ export interface MentionsRef {

lib/Mentions.js

 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
@@ -11,83 +9,65 @@ value: true
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _useMergedState3 = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
-
 var _toArray = _interopRequireDefault(require("rc-util/lib/Children/toArray"));
-
 var _KeyCode = _interopRequireDefault(require("rc-util/lib/KeyCode"));
-
 var _warning = _interopRequireDefault(require("rc-util/lib/warning"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _rcTextarea = _interopRequireDefault(require("rc-textarea"));
-
 var _KeywordTrigger = _interopRequireDefault(require("./KeywordTrigger"));
-
 var _MentionsContext = _interopRequireDefault(require("./MentionsContext"));
-
 var _Option = _interopRequireDefault(require("./Option"));
-
 var _util = require("./util");
-
 var _useEffectState = _interopRequireDefault(require("./hooks/useEffectState"));
-
+var _excluded = ["prefixCls", "className", "style", "prefix", "split", "notFoundContent", "value", "defaultValue", "children", "options", "open", "validateSearch", "filterOption", "onChange", "onKeyDown", "onKeyUp", "onPressEnter", "onSearch", "onSelect", "onFocus", "onBlur", "transitionName", "placement", "direction", "getPopupContainer", "dropdownClassName"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var Mentions = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var prefixCls = props.prefixCls,
-      className = props.className,
-      style = props.style,
-      prefix = props.prefix,
-      split = props.split,
-      notFoundContent = props.notFoundContent,
-      value = props.value,
-      defaultValue = props.defaultValue,
-      children = props.children,
-      open = props.open,
-      validateSearch = props.validateSearch,
-      filterOption = props.filterOption,
-      onChange = props.onChange,
-      onKeyDown = props.onKeyDown,
-      onKeyUp = props.onKeyUp,
-      onPressEnter = props.onPressEnter,
-      onSearch = props.onSearch,
-      onSelect = props.onSelect,
-      onFocus = props.onFocus,
-      onBlur = props.onBlur,
-      transitionName = props.transitionName,
-      placement = props.placement,
-      direction = props.direction,
-      getPopupContainer = props.getPopupContainer,
-      dropdownClassName = props.dropdownClassName,
-      restProps = (0, _objectWithoutProperties2.default)(props, ["prefixCls", "className", "style", "prefix", "split", "notFoundContent", "value", "defaultValue", "children", "open", "validateSearch", "filterOption", "onChange", "onKeyDown", "onKeyUp", "onPressEnter", "onSearch", "onSelect", "onFocus", "onBlur", "transitionName", "placement", "direction", "getPopupContainer", "dropdownClassName"]);
+    className = props.className,
+    style = props.style,
+    prefix = props.prefix,
+    split = props.split,
+    notFoundContent = props.notFoundContent,
+    value = props.value,
+    defaultValue = props.defaultValue,
+    children = props.children,
+    options = props.options,
+    open = props.open,
+    validateSearch = props.validateSearch,
+    filterOption = props.filterOption,
+    onChange = props.onChange,
+    onKeyDown = props.onKeyDown,
+    onKeyUp = props.onKeyUp,
+    onPressEnter = props.onPressEnter,
+    onSearch = props.onSearch,
+    onSelect = props.onSelect,
+    onFocus = props.onFocus,
+    onBlur = props.onBlur,
+    transitionName = props.transitionName,
+    placement = props.placement,
+    direction = props.direction,
+    getPopupContainer = props.getPopupContainer,
+    dropdownClassName = props.dropdownClassName,
+    restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
   var mergedPrefix = Array.isArray(prefix) ? prefix : [prefix];
   var mergedProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
     prefix: mergedPrefix
-  }); // =============================== Refs ===============================
-
+  });
+  // =============================== Refs ===============================
   var textareaRef = (0, _react.useRef)(null);
   var measureRef = (0, _react.useRef)(null);
-
   var getTextArea = function getTextArea() {
     var _textareaRef$current, _textareaRef$current$;
-
     return (_textareaRef$current = textareaRef.current) === null || _textareaRef$current === void 0 ? void 0 : (_textareaRef$current$ = _textareaRef$current.resizableTextArea) === null || _textareaRef$current$ === void 0 ? void 0 : _textareaRef$current$.textArea;
   };
-
   _react.default.useImperativeHandle(ref, function () {
     var _textareaRef$current4, _textareaRef$current5;
-
     return {
       focus: function focus() {
         var _textareaRef$current2;
-
         return (_textareaRef$current2 = textareaRef.current) === null || _textareaRef$current2 === void 0 ? void 0 : _textareaRef$current2.focus();
@@ -97,3 +77,2 @@ },
         var _textareaRef$current3;
-
         return (_textareaRef$current3 = textareaRef.current) === null || _textareaRef$current3 === void 0 ? void 0 : _textareaRef$current3.blur();
@@ -103,45 +82,37 @@ },
     };
-  }); // ============================== State ===============================
-
-
+  });
+  // ============================== State ===============================
   var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      measuring = _useState2[0],
-      setMeasuring = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    measuring = _useState2[0],
+    setMeasuring = _useState2[1];
   var _useState3 = (0, _react.useState)(''),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      measureText = _useState4[0],
-      setMeasureText = _useState4[1];
-
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    measureText = _useState4[0],
+    setMeasureText = _useState4[1];
   var _useState5 = (0, _react.useState)(''),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      measurePrefix = _useState6[0],
-      setMeasurePrefix = _useState6[1];
-
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    measurePrefix = _useState6[0],
+    setMeasurePrefix = _useState6[1];
   var _useState7 = (0, _react.useState)(0),
-      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      measureLocation = _useState8[0],
-      setMeasureLocation = _useState8[1];
-
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    measureLocation = _useState8[0],
+    setMeasureLocation = _useState8[1];
   var _useState9 = (0, _react.useState)(0),
-      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      activeIndex = _useState10[0],
-      setActiveIndex = _useState10[1];
-
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    activeIndex = _useState10[0],
+    setActiveIndex = _useState10[1];
   var _useState11 = (0, _react.useState)(false),
-      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-      isFocus = _useState12[0],
-      setIsFocus = _useState12[1]; // ============================== Value ===============================
-
-
+    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+    isFocus = _useState12[0],
+    setIsFocus = _useState12[1];
+  // ============================== Value ===============================
   var _useMergedState = (0, _useMergedState3.default)('', {
-    defaultValue: defaultValue,
-    value: value
-  }),
-      _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
-      mergedValue = _useMergedState2[0],
-      setMergedValue = _useMergedState2[1]; // =============================== Open ===============================
-
-
+      defaultValue: defaultValue,
+      value: value
+    }),
+    _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
+    mergedValue = _useMergedState2[0],
+    setMergedValue = _useMergedState2[1];
+  // =============================== Open ===============================
   (0, _react.useEffect)(function () {
@@ -153,36 +124,42 @@ // Sync measure div top with textarea for rc-trigger usage
   }, [measuring]);
-
   var _React$useMemo = _react.default.useMemo(function () {
-    if (open) {
-      if (process.env.NODE_ENV !== 'production') {
-        (0, _warning.default)(false, '`open` of Mentions is only used for debug usage. Do not use in you production.');
-      }
-
-      for (var i = 0; i < mergedPrefix.length; i += 1) {
-        var curPrefix = mergedPrefix[i];
-        var index = mergedValue.lastIndexOf(curPrefix);
-
-        if (index >= 0) {
-          return [true, '', curPrefix, index];
+      if (open) {
+        if (process.env.NODE_ENV !== 'production') {
+          (0, _warning.default)(false, '`open` of Mentions is only used for debug usage. Do not use in you production.');
         }
+        for (var i = 0; i < mergedPrefix.length; i += 1) {
+          var curPrefix = mergedPrefix[i];
+          var index = mergedValue.lastIndexOf(curPrefix);
+          if (index >= 0) {
+            return [true, '', curPrefix, index];
+          }
+        }
       }
-    }
-
-    return [measuring, measureText, measurePrefix, measureLocation];
-  }, [open, measuring, mergedPrefix, mergedValue, measureText, measurePrefix, measureLocation]),
-      _React$useMemo2 = (0, _slicedToArray2.default)(_React$useMemo, 4),
-      mergedMeasuring = _React$useMemo2[0],
-      mergedMeasureText = _React$useMemo2[1],
-      mergedMeasurePrefix = _React$useMemo2[2],
-      mergedMeasureLocation = _React$useMemo2[3]; // ============================== Option ==============================
-
-
+      return [measuring, measureText, measurePrefix, measureLocation];
+    }, [open, measuring, mergedPrefix, mergedValue, measureText, measurePrefix, measureLocation]),
+    _React$useMemo2 = (0, _slicedToArray2.default)(_React$useMemo, 4),
+    mergedMeasuring = _React$useMemo2[0],
+    mergedMeasureText = _React$useMemo2[1],
+    mergedMeasurePrefix = _React$useMemo2[2],
+    mergedMeasureLocation = _React$useMemo2[3];
+  // ============================== Option ==============================
   var getOptions = _react.default.useCallback(function (targetMeasureText) {
-    var list = (0, _toArray.default)(children).map(function (_ref) {
-      var optionProps = _ref.props,
+    var list;
+    if (options && options.length > 0) {
+      list = options.map(function (item) {
+        var _item$key;
+        return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+          key: (_item$key = item === null || item === void 0 ? void 0 : item.key) !== null && _item$key !== void 0 ? _item$key : item.value
+        });
+      });
+    } else {
+      list = (0, _toArray.default)(children).map(function (_ref) {
+        var optionProps = _ref.props,
           key = _ref.key;
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, optionProps), {}, {
-        key: key || optionProps.value
+        return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, optionProps), {}, {
+          key: key || optionProps.value
+        });
       });
-    }).filter(function (option) {
+    }
+    return list.filter(function (option) {
       /** Return all result if `filterOption` is false. */
@@ -192,16 +169,11 @@ if (filterOption === false) {
       }
-
       return filterOption(targetMeasureText, option);
     });
-    return list;
-  }, [children, filterOption]);
-
-  var options = _react.default.useMemo(function () {
+  }, [children, options, filterOption]);
+  var mergedOptions = _react.default.useMemo(function () {
     return getOptions(mergedMeasureText);
-  }, [getOptions, mergedMeasureText]); // ============================= Measure ==============================
+  }, [getOptions, mergedMeasureText]);
+  // ============================= Measure ==============================
   // Mark that we will reset input selection to target position when user select option
-
-
   var onSelectionEffect = (0, _useEffectState.default)();
-
   var startMeasure = function startMeasure(nextMeasureText, nextMeasurePrefix, nextMeasureLocation) {
@@ -214,3 +186,2 @@ setMeasuring(true);
   };
-
   var stopMeasure = function stopMeasure(callback) {
@@ -221,5 +192,4 @@ setMeasuring(false);
     onSelectionEffect(callback);
-  }; // ============================== Change ==============================
-
-
+  };
+  // ============================== Change ==============================
   var triggerChange = function triggerChange(nextValue) {
@@ -229,3 +199,2 @@ setMergedValue(nextValue);
   };
-
   var onInternalChange = function onInternalChange(_ref2) {
@@ -235,19 +204,15 @@ var nextValue = _ref2.target.value;
   };
-
   var selectOption = function selectOption(option) {
     var _getTextArea;
-
     var _option$value = option.value,
-        mentionValue = _option$value === void 0 ? '' : _option$value;
-
+      mentionValue = _option$value === void 0 ? '' : _option$value;
     var _replaceWithMeasure = (0, _util.replaceWithMeasure)(mergedValue, {
-      measureLocation: mergedMeasureLocation,
-      targetText: mentionValue,
-      prefix: mergedMeasurePrefix,
-      selectionStart: (_getTextArea = getTextArea()) === null || _getTextArea === void 0 ? void 0 : _getTextArea.selectionStart,
-      split: split
-    }),
-        text = _replaceWithMeasure.text,
-        selectionLocation = _replaceWithMeasure.selectionLocation;
-
+        measureLocation: mergedMeasureLocation,
+        targetText: mentionValue,
+        prefix: mergedMeasurePrefix,
+        selectionStart: (_getTextArea = getTextArea()) === null || _getTextArea === void 0 ? void 0 : _getTextArea.selectionStart,
+        split: split
+      }),
+      text = _replaceWithMeasure.text,
+      selectionLocation = _replaceWithMeasure.selectionLocation;
     triggerChange(text);
@@ -259,17 +224,15 @@ stopMeasure(function () {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(option, mergedMeasurePrefix);
-  }; // ============================= KeyEvent =============================
+  };
+  // ============================= KeyEvent =============================
   // Check if hit the measure keyword
-
-
   var onInternalKeyDown = function onInternalKeyDown(event) {
     var which = event.which;
-    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event); // Skip if not measuring
-
+    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+    // Skip if not measuring
     if (!mergedMeasuring) {
       return;
     }
-
     if (which === _KeyCode.default.UP || which === _KeyCode.default.DOWN) {
       // Control arrow function
-      var optionLen = options.length;
+      var optionLen = mergedOptions.length;
       var offset = which === _KeyCode.default.UP ? -1 : 1;
@@ -284,9 +247,7 @@ var newActiveIndex = (activeIndex + offset + optionLen) % optionLen;
       event.preventDefault();
-
-      if (!options.length) {
+      if (!mergedOptions.length) {
         stopMeasure();
         return;
       }
-
-      var option = options[activeIndex];
+      var option = mergedOptions[activeIndex];
       selectOption(option);
@@ -307,21 +268,16 @@ }
    */
-
-
   var onInternalKeyUp = function onInternalKeyUp(event) {
     var key = event.key,
-        which = event.which;
+      which = event.which;
     var target = event.target;
     var selectionStartText = (0, _util.getBeforeSelectionText)(target);
-
     var _getLastMeasureIndex = (0, _util.getLastMeasureIndex)(selectionStartText, mergedPrefix),
-        measureIndex = _getLastMeasureIndex.location,
-        nextMeasurePrefix = _getLastMeasureIndex.prefix; // If the client implements an onKeyUp handler, call it
-
-
-    onKeyUp === null || onKeyUp === void 0 ? void 0 : onKeyUp(event); // Skip if match the white key list
-
+      measureIndex = _getLastMeasureIndex.location,
+      nextMeasurePrefix = _getLastMeasureIndex.prefix;
+    // If the client implements an onKeyUp handler, call it
+    onKeyUp === null || onKeyUp === void 0 ? void 0 : onKeyUp(event);
+    // Skip if match the white key list
     if ([_KeyCode.default.ESC, _KeyCode.default.UP, _KeyCode.default.DOWN, _KeyCode.default.ENTER].indexOf(which) !== -1) {
       return;
     }
-
     if (measureIndex !== -1) {
@@ -331,3 +287,2 @@ var nextMeasureText = selectionStartText.slice(measureIndex + nextMeasurePrefix.length);
       var matchOption = !!getOptions(nextMeasureText).length;
-
       if (validateMeasure) {
@@ -345,4 +300,2 @@ if (key === nextMeasurePrefix || key === 'Shift' || mergedMeasuring || nextMeasureText !== mergedMeasureText && matchOption) {
        */
-
-
       if (onSearch && validateMeasure) {
@@ -355,3 +308,2 @@ onSearch(nextMeasureText, nextMeasurePrefix);
   };
-
   var onInternalPressEnter = function onInternalPressEnter(event) {
@@ -361,17 +313,12 @@ if (!mergedMeasuring && onPressEnter) {
     }
-  }; // ============================ Focus Blur ============================
-
-
+  };
+  // ============================ Focus Blur ============================
   var focusRef = (0, _react.useRef)();
-
   var onInternalFocus = function onInternalFocus(event) {
     window.clearTimeout(focusRef.current);
-
     if (!isFocus && event && onFocus) {
       onFocus(event);
     }
-
     setIsFocus(true);
   };
-
   var onInternalBlur = function onInternalBlur(event) {
@@ -384,12 +331,9 @@ focusRef.current = window.setTimeout(function () {
   };
-
   var onDropdownFocus = function onDropdownFocus() {
     onInternalFocus();
   };
-
   var onDropdownBlur = function onDropdownBlur() {
     onInternalBlur();
-  }; // ============================== Render ==============================
-
-
+  };
+  // ============================== Render ==============================
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -425,3 +369,3 @@ className: (0, _classnames.default)(prefixCls, className),
     direction: direction,
-    options: options,
+    options: mergedOptions,
     visible: true,
@@ -432,3 +376,2 @@ getPopupContainer: getPopupContainer,
 });
-
 Mentions.defaultProps = {
@@ -435,0 +378,0 @@ prefixCls: 'rc-mentions',

lib/MentionsContext.js

 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
@@ -9,6 +8,7 @@ value: true
 exports.default = void 0;
-
 var React = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/* tslint:disable: no-object-literal-type-assertion */
 
-/* tslint:disable: no-object-literal-type-assertion */
 // We will never use default, here only to fix TypeScript warning
@@ -15,0 +15,0 @@ var MentionsContext = /*#__PURE__*/React.createContext(null);

lib/Option.d.ts

@@ -1,2 +0,2 @@
-import * as React from 'react';
+import type * as React from 'react';
 export interface OptionProps {
@@ -3,0 +3,0 @@ value?: string;

lib/Option.js

@@ -7,8 +7,6 @@ "use strict";
 exports.default = void 0;
-
 var Option = function Option() {
   return null;
 };
-
 var _default = Option;
 exports.default = _default;

lib/util.js

@@ -6,2 +6,3 @@ "use strict";
 });
+exports.filterOption = filterOption;
 exports.getBeforeSelectionText = getBeforeSelectionText;
@@ -12,4 +13,2 @@ exports.getLastMeasureIndex = getLastMeasureIndex;
 exports.validateSearch = validateSearch;
-exports.filterOption = filterOption;
-
 /**
@@ -25,8 +24,5 @@ * Cut input selection into 2 part and return text before selection start
  */
-
-
 function getLastMeasureIndex(text, prefix) {
   return prefix.reduce(function (lastMatch, prefixStr) {
     var lastIndex = text.lastIndexOf(prefixStr);
-
     if (lastIndex > lastMatch.location) {
@@ -38,3 +34,2 @@ return {
     }
-
     return lastMatch;
@@ -46,18 +41,13 @@ }, {
 }
-
 function lower(char) {
   return (char || '').toLowerCase();
 }
-
 function reduceText(text, targetText, split) {
   var firstChar = text[0];
-
   if (!firstChar || firstChar === split) {
     return text;
-  } // Reuse rest text as it can
-
-
+  }
+  // Reuse rest text as it can
   var restText = text;
   var targetTextLen = targetText.length;
-
   for (var i = 0; i < targetTextLen; i += 1) {
@@ -71,3 +61,2 @@ if (lower(restText[i]) !== lower(targetText[i])) {
   }
-
   return restText;
@@ -81,28 +70,21 @@ }
  */
-
-
 function replaceWithMeasure(text, measureConfig) {
   var measureLocation = measureConfig.measureLocation,
-      prefix = measureConfig.prefix,
-      targetText = measureConfig.targetText,
-      selectionStart = measureConfig.selectionStart,
-      split = measureConfig.split; // Before text will append one space if have other text
-
+    prefix = measureConfig.prefix,
+    targetText = measureConfig.targetText,
+    selectionStart = measureConfig.selectionStart,
+    split = measureConfig.split;
+  // Before text will append one space if have other text
   var beforeMeasureText = text.slice(0, measureLocation);
-
   if (beforeMeasureText[beforeMeasureText.length - split.length] === split) {
     beforeMeasureText = beforeMeasureText.slice(0, beforeMeasureText.length - split.length);
   }
-
   if (beforeMeasureText) {
     beforeMeasureText = "".concat(beforeMeasureText).concat(split);
-  } // Cut duplicate string with current targetText
-
-
+  }
+  // Cut duplicate string with current targetText
   var restText = reduceText(text.slice(selectionStart), targetText.slice(selectionStart - measureLocation - prefix.length), split);
-
   if (restText.slice(0, split.length) === split) {
     restText = restText.slice(split.length);
   }
-
   var connectedStartText = "".concat(beforeMeasureText).concat(prefix).concat(targetText).concat(split);
@@ -114,3 +96,2 @@ return {
 }
-
 function setInputSelection(input, location) {
@@ -122,7 +103,5 @@ input.setSelectionRange(location, location);
    */
-
   input.blur();
   input.focus();
 }
-
 function validateSearch(text, props) {
@@ -132,8 +111,7 @@ var split = props.split;
 }
-
 function filterOption(input, _ref) {
   var _ref$value = _ref.value,
-      value = _ref$value === void 0 ? '' : _ref$value;
+    value = _ref$value === void 0 ? '' : _ref$value;
   var lowerCase = input.toLowerCase();
   return value.toLowerCase().indexOf(lowerCase) !== -1;
 }

package.json

 {
   "name": "rc-mentions",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "description": "React Mentions",
@@ -5,0 +5,0 @@ "keywords": [

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

73482

increased by8.15%

Lines of code

1648

increased by5.71%

No dependency changes