@aloudata/aloudata-design 2.9.0 → 2.10.0

package/dist/Badge/index.js

@@ -1,7 +1,11 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _excluded = ["count", "status", "size", "className", "onClick"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import classNames from 'classnames';
 import React from 'react';
 export default function Badge(props) {
@@ -11,7 +15,8 @@ export default function Badge(props) {
     status = _props$status === void 0 ? 'default' : _props$status,
     size = props.size,
     className = props.className,
-    onClick = props.onClick;
+    onClick = props.onClick,
+    rest = _objectWithoutProperties(props, _excluded);
   var status2ColorMap = {
     success: {
       color: '#15803D',
@@ -34,12 +39,12 @@ export default function Badge(props) {
       backgroundColor: '#FEF08A'
     }
   };
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     className: classNames('ald-badge', (_classNames = {}, _defineProperty(_classNames, 'ald-badge-large', size === 'large'), _defineProperty(_classNames, 'ald-badge-clickable', typeof onClick === 'function'), _classNames), className),
     style: {
       color: status2ColorMap[status].color,
       backgroundColor: status2ColorMap[status].backgroundColor
     },
     onClick: onClick
-  }, count);
+  }), count);
 }

package/dist/Button/index.d.ts

@@ -53,5 +53,5 @@ export declare function getShape(ButtonShape: 'circle' | 'default'): 'circle' |
 export declare const setIcon: (iconNode: React.ReactElement, loading: boolean | {
     delay?: number | undefined;
 }) => React.JSX.Element;
-declare function Button(props: IButtonProps): React.JSX.Element;
-export default Button;
+declare const _default: React.ForwardRefExoticComponent<IButtonProps & React.RefAttributes<HTMLElement>>;
+export default _default;

package/dist/Button/index.js

@@ -11,7 +11,7 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 import { Button as AntdButton } from 'antd';
 import { useCompactItemContext } from 'antd/lib/space/Compact';
 import classNames from 'classnames';
-import React, { useContext } from 'react';
+import React, { forwardRef, useContext } from 'react';
 import { ConfigContext } from "../ConfigProvider";
 import SizeContext from "../ConfigProvider/sizeContext";
 import { LoadingLine } from "../Icon";
@@ -61,7 +61,7 @@ export var setIcon = function setIcon(iconNode, loading) {
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null);
 };
-function Button(props) {
+function Button(props, ref) {
   var _props$type = props.type,
     type = _props$type === void 0 ? 'secondary' : _props$type,
     customSize = props.size,
@@ -90,7 +90,8 @@ function Button(props) {
     type: getButtonType(type),
     className: classNames(btnPrefix, "".concat(btnPrefix, "-").concat(type), className, getButtonSizeClass(size), compactItemClassnames),
     danger: getDangerStatus(type),
-    shape: getShape(shape)
+    shape: getShape(shape),
+    ref: ref
   }), props.children);
 }
-export default Button;
+export default /*#__PURE__*/forwardRef(Button);

package/dist/Dropdown/index.d.ts

@@ -1,28 +1,17 @@
+import { OffsetOptions } from '@floating-ui/react';
 import React from 'react';
 import { MenuProps } from '../Menu';
-import DropdownButton from './Button';
-type Align = {
-    points?: [string, string];
-    offset?: [number, number];
-    targetOffset?: [number, number];
-    overflow?: {
-        adjustX?: boolean;
-        adjustY?: boolean;
-    };
-    useCssRight?: boolean;
-    useCssBottom?: boolean;
-    useCssTransform?: boolean;
-};
-export type ActionType = 'hover' | 'click' | 'contextMenu';
-export type PlacementType = 'bottomLeft' | 'bottom' | 'bottomRight' | 'topLeft' | 'top' | 'topRight';
+import './style/index.less';
+export type ActionType = 'hover' | 'click';
+export type PlacementType = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end';
 export interface IDropdownProps {
+    children: React.ReactNode;
     /**
-     * @description 位置状态
-     * @default {}
+     * @description 菜单弹出位置的偏移量
      */
-    align?: Align;
+    offset?: OffsetOptions;
     /**
-     * @description 关闭后是否销毁Dropdown
+     * @description 关闭后是否销毁 Dropdown
      * @default false
      */
     destroyPopupOnHide?: boolean;
@@ -30,7 +19,7 @@ export interface IDropdownProps {
      * @description 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位
      * @default () => document.body
      */
-    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+    getPopupContainer?: () => HTMLElement;
     /**
      * @description 菜单
      * @type Menu | () => Menu
@@ -46,13 +35,13 @@ export interface IDropdownProps {
      * @description 菜单弹出位置
      * @default bottomLeft
      */
-    placement?: 'bottomLeft' | 'bottom' | 'bottomRight' | 'topLeft' | 'top' | 'topRight';
+    placement?: PlacementType;
     /**
      * @description 触发下拉的行为
-     * @type ActionType[], 其中 ActionType 为 'hover' | 'click' | 'contextMenu';
-     * @default [hover]
+     * @type ActionType, 其中 ActionType 为 'hover' | 'click' | 'contextMenu';
+     * @default click
      */
-    trigger?: ActionType[];
+    trigger?: ActionType;
     /**
      * @description 菜单是否显示
      * @default -
@@ -68,12 +57,6 @@ export interface IDropdownProps {
      * @default -
      */
     overlayStyle?: React.CSSProperties;
-    /**
-     * @description 是否强制渲染
-     * @default -
-     */
-    forceRender?: boolean;
-    children?: React.ReactNode;
     /**
      * @description 自定义下拉框内容
      * @default -
@@ -85,8 +68,4 @@ export interface IDropdownProps {
      */
     disabled?: boolean;
 }
-declare function Dropdown(props: IDropdownProps): React.JSX.Element;
-declare namespace Dropdown {
-    var Button: typeof DropdownButton;
-}
-export default Dropdown;
+export default function Dropdown(props: IDropdownProps): React.JSX.Element;

package/dist/Dropdown/index.js

@@ -1,5 +1,4 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-var _excluded = ["children", "open", "overlayClassName", "menu", "align", "placement", "trigger", "dropdownRender", "destroyPopupOnHide", "onOpenChange"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -12,48 +11,103 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import { Dropdown as AntdDropdown } from 'antd';
-import getPlacements from 'antd/lib/_util/placements';
+import { FloatingFocusManager, autoUpdate, flip, offset, safePolygon, shift, useClick, useDismiss, useFloating, useHover, useId, useInteractions, useRole } from '@floating-ui/react';
+import { useMemoizedFn } from 'ahooks';
 import classNames from 'classnames';
-import React, { useCallback, useMemo, useState } from 'react';
+import ResizeObserver from 'rc-resize-observer';
+import React, { cloneElement, useCallback, useEffect, useMemo, useState } from 'react';
+import ReactDOM from 'react-dom';
 import Menu from "../Menu";
-import DropdownButton from "./Button";
+import "./style/index.less";
 export default function Dropdown(props) {
   var children = props.children,
-    open = props.open,
-    overlayClassName = props.overlayClassName,
+    _props$destroyPopupOn = props.destroyPopupOnHide,
+    destroyPopupOnHide = _props$destroyPopupOn === void 0 ? true : _props$destroyPopupOn,
+    getPopupContainer = props.getPopupContainer,
     menu = props.menu,
-    align = props.align,
-    placement = props.placement,
+    overlayClassName = props.overlayClassName,
+    _props$placement = props.placement,
+    placement = _props$placement === void 0 ? 'bottom-start' : _props$placement,
     _props$trigger = props.trigger,
-    trigger = _props$trigger === void 0 ? ['click'] : _props$trigger,
+    trigger = _props$trigger === void 0 ? 'click' : _props$trigger,
+    open = props.open,
+    _props$onOpenChange = props.onOpenChange,
+    onOpenChange = _props$onOpenChange === void 0 ? function () {} : _props$onOpenChange,
+    overlayStyle = props.overlayStyle,
     dropdownRender = props.dropdownRender,
-    _props$destroyPopupOn = props.destroyPopupOnHide,
-    destroyPopupOnHide = _props$destroyPopupOn === void 0 ? true : _props$destroyPopupOn,
-    onOpenChange = props.onOpenChange,
-    otherProps = _objectWithoutProperties(props, _excluded);
-  // antd 根据 open 字段是否存在来判断 open 是否是可控模式
-  var antdDropdownProps = otherProps;
-  var defaultAlign = useMemo(function () {
-    var _getPlacements;
-    if (align) {
-      return align;
-    }
-    return {
-      offset: ((_getPlacements = getPlacements({
-        arrowWidth: 0,
-        offset: 4,
-        borderRadius: 0
-      })[placement || 'bottomLeft']) === null || _getPlacements === void 0 ? void 0 : _getPlacements['offset']) || [0, 4]
-    };
-  }, [align, placement]);
-  var isOpenControlled = open !== undefined;
-  var _useState = useState(open),
+    disabled = props.disabled,
+    _props$offset = props.offset,
+    offsetProps = _props$offset === void 0 ? 4 : _props$offset;
+  var _useState = useState(open || false),
     _useState2 = _slicedToArray(_useState, 2),
-    dropdownOpen = _useState2[0],
-    setDropdownOpen = _useState2[1];
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var onOpenChangeFn = useMemoizedFn(onOpenChange);
+  var isOpenControlled = open !== undefined;
+  useEffect(function () {
+    if (isOpenControlled) {
+      setIsOpen(open);
+    }
+  }, [open, isOpenControlled]);
+  var onChangeOpen = useCallback(function (newOpen) {
+    if (!isOpenControlled) {
+      setIsOpen(newOpen);
+    }
+    onOpenChangeFn(newOpen);
+  }, [isOpenControlled, onOpenChangeFn]);
+  var _useFloating = useFloating({
+      placement: placement,
+      open: isOpen,
+      onOpenChange: onChangeOpen,
+      middleware: [offset(offsetProps), flip({
+        fallbackAxisSideDirection: 'end'
+      }), shift()],
+      whileElementsMounted: autoUpdate
+    }),
+    refs = _useFloating.refs,
+    floatingStyles = _useFloating.floatingStyles,
+    context = _useFloating.context;
+  var click = useClick(context);
+  var hover = useHover(context, {
+    enabled: trigger === 'hover',
+    handleClose: safePolygon({})
+  });
+  var dismiss = useDismiss(context);
+  var role = useRole(context);
+  var propsList = useMemo(function () {
+    var res = [dismiss, role];
+    var finalTrigger = trigger;
+    if (Array.isArray(trigger)) {
+      // 对于数组形式的 trigger，告警
+      console.error('trigger should be a string, support "hover" or "click" now.');
+      finalTrigger = 'click';
+    }
+    if (finalTrigger === 'hover') {
+      res.unshift(hover);
+    } else if (finalTrigger === 'click') {
+      res.unshift(click);
+    }
+    return res;
+  }, [trigger, click, dismiss, role, hover]);
+  var _useInteractions = useInteractions(propsList),
+    getReferenceProps = _useInteractions.getReferenceProps,
+    getFloatingProps = _useInteractions.getFloatingProps;
+  var headingId = useId();
+  var child = children;
+  var childProps = child.props || {};
+  var referenceProps = getReferenceProps();
+  var modifiedChild = /*#__PURE__*/cloneElement(child, _objectSpread(_objectSpread(_objectSpread({}, childProps), {}, {
+    disabled: disabled
+  }, referenceProps), {}, {
+    onClick: function onClick(event) {
+      var _childProps$onClick;
+      (_childProps$onClick = childProps.onClick) === null || _childProps$onClick === void 0 ? void 0 : _childProps$onClick.call(childProps, event);
+      var referenceOnClick = referenceProps.onClick;
+      if (typeof referenceOnClick === 'function') {
+        referenceOnClick(event);
+      }
+    }
+  }));
   var onMenuItemClick = useCallback(function (info) {
     if (menu !== null && menu !== void 0 && menu.onClick) {
       menu.onClick(info);
@@ -62,17 +116,9 @@ export default function Dropdown(props) {
       return;
     }
     if (!isOpenControlled) {
-      setDropdownOpen(false);
+      setIsOpen(false);
     }
   }, [isOpenControlled, menu]);
-  var onDropdownOpenChange = useCallback(function (isDropdownOpen) {
-    if (onOpenChange) {
-      onOpenChange(isDropdownOpen);
-    }
-    if (!isOpenControlled) {
-      setDropdownOpen(isDropdownOpen);
-    }
-  }, [isOpenControlled, onOpenChange]);
   var menuInstance = useMemo(function () {
     var menuProps = _objectSpread(_objectSpread({}, menu), {}, {
       items: (menu === null || menu === void 0 ? void 0 : menu.items) || []
@@ -81,24 +127,30 @@ export default function Dropdown(props) {
       onClick: onMenuItemClick
     }));
   }, [menu, onMenuItemClick]);
-  var menuRender = useCallback(function () {
-    if (dropdownRender) {
-      return dropdownRender(menuInstance);
-    }
-    if (menu) {
-      return menuInstance;
-    }
-    return undefined;
-  }, [menuInstance, dropdownRender, menu]);
-  return /*#__PURE__*/React.createElement(AntdDropdown, _extends({
-    overlayClassName: classNames('ald-dropdown-overlay', overlayClassName),
-    align: defaultAlign,
-    trigger: trigger,
-    placement: placement,
-    dropdownRender: menuRender,
-    destroyPopupOnHide: destroyPopupOnHide,
-    open: !!(isOpenControlled ? open : dropdownOpen),
-    onOpenChange: onDropdownOpenChange
-  }, antdDropdownProps), children);
-}
-Dropdown.Button = DropdownButton;
+  var popupElement = useMemo(function () {
+    return typeof dropdownRender === 'function' ? dropdownRender(menuInstance) : menuInstance;
+  }, [dropdownRender, menuInstance]);
+
+  // 渲染浮动内容到自定义容器
+  var renderFloatingContent = useCallback(function () {
+    var popupElem = /*#__PURE__*/React.createElement(FloatingFocusManager, {
+      context: context,
+      modal: false
+    }, /*#__PURE__*/React.createElement("div", _extends({
+      className: classNames('ald-dropdown-overlay', overlayClassName, _defineProperty({}, 'ald-dropdown-overlay-hidden', !isOpen)),
+      ref: refs.setFloating,
+      style: _objectSpread(_objectSpread({}, floatingStyles), overlayStyle),
+      "aria-labelledby": headingId
+    }, getFloatingProps()), popupElement));
+    var popupContainer = typeof getPopupContainer === 'function' ? getPopupContainer() : document.body;
+    return /*#__PURE__*/ReactDOM.createPortal(popupElem, popupContainer);
+  }, [context, floatingStyles, getFloatingProps, getPopupContainer, headingId, popupElement, refs.setFloating, overlayClassName, overlayStyle, isOpen]);
+  var popup = destroyPopupOnHide ? isOpen && renderFloatingContent() : renderFloatingContent();
+  var setTargetRef = useCallback(function (node) {
+    refs.setReference(node);
+  }, [refs]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ResizeObserver, {
+    disabled: !isOpen,
+    ref: setTargetRef
+  }, modifiedChild), popup);
+}

package/dist/Dropdown/style/index.less

@@ -5,6 +5,10 @@
 .ald-dropdown-overlay {
   .menuContainerStyle();
 
+  &.ald-dropdown-overlay-hidden {
+    visibility: hidden;
+  }
+
   padding: 4px 0 !important;
   animation-duration: 0s !important;
   max-width: none;

package/dist/IconButton/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IDropdownProps } from '../Dropdown';
+import { IDropdownProps } from '../Dropdown/index';
 import { TSize } from '../Input';
 import { ITooltipProps } from '../Tooltip';
 interface IIconButtonProps {
@@ -13,7 +13,7 @@ interface IIconButtonProps {
     id?: string;
     mode?: 'light' | 'dark';
 }
-declare const DropdownButton: React.ForwardRefExoticComponent<IIconButtonProps & IDropdownProps & {
+declare const DropdownButton: React.ForwardRefExoticComponent<IIconButtonProps & Omit<IDropdownProps, "children"> & {
     showArrow?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 declare const IconButton: React.ForwardRefExoticComponent<IIconButtonProps & React.RefAttributes<HTMLDivElement>> & {

package/dist/IconButton/index.js

@@ -1,10 +1,10 @@
-var _excluded = ["icon", "onClick", "disabled", "size", "menu", "className", "onOpenChange", "tooltip", "id", "trigger", "showArrow", "mode"];
+var _excluded = ["icon", "onClick", "disabled", "size", "menu", "className", "onOpenChange", "tooltip", "id", "showArrow", "mode"];
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import classnames from 'classnames';
 import React, { forwardRef, useMemo } from 'react';
-import Dropdown from "../Dropdown";
+import Dropdown from "../Dropdown/index";
 import { FoldDownFill } from "../Icon";
 import { getSizeType } from "../Input/components/Input";
 import Tooltip from "../Tooltip";
@@ -57,8 +57,6 @@ var DropdownButton = /*#__PURE__*/forwardRef(function (props, ref) {
     onOpenChange = props.onOpenChange,
     tooltip = props.tooltip,
     id = props.id,
-    _props$trigger = props.trigger,
-    trigger = _props$trigger === void 0 ? ['click'] : _props$trigger,
     showArrow = props.showArrow,
     _props$mode2 = props.mode,
     mode = _props$mode2 === void 0 ? 'light' : _props$mode2,
@@ -94,7 +92,6 @@ var DropdownButton = /*#__PURE__*/forwardRef(function (props, ref) {
     title: tooltip === null || tooltip === void 0 ? void 0 : tooltip.title
   }), /*#__PURE__*/React.createElement(Dropdown, _extends({
     menu: menu,
-    trigger: trigger,
     onOpenChange: onOpenChange
   }, restDropdownProps), /*#__PURE__*/React.createElement("div", {
     id: id,

package/dist/MemberPicker/components/MemberSelection.js

@@ -14,6 +14,7 @@ import ScrollArea from "../../ScrollArea";
 import Spin from "../../Spin";
 import { isUser } from "../utils/getUsersWithUserId";
 import MultipleOption from "./MultipleOption";
+import { userDisplayNameIsRepeated } from "./Panel";
 import SingleOption from "./SingleOption";
 export default function MemberSelection(props) {
   var className = props.className,
@@ -83,6 +84,7 @@ export default function MemberSelection(props) {
       user: user,
       disabled: disabled,
       selected: isSelected,
+      showUserId: userDisplayNameIsRepeated(userList, user.nickname),
       onChange: function onChange(selected, user) {
         if (isUser(user)) _onChange(selected, user);
       }
@@ -90,6 +92,7 @@ export default function MemberSelection(props) {
       key: user.userId,
       user: user,
       selected: isSelected,
+      showUserId: userDisplayNameIsRepeated(userList, user.nickname),
       onChange: function onChange(selected, user) {
         if (isUser(user)) _onChange(selected, user);
       }

package/dist/MemberPicker/components/MultipleOption.d.ts

@@ -9,6 +9,7 @@ interface IMultipleOptionProps {
     className?: string;
     onNextLevel?: (userGroup: IUserGroup) => void;
     hasNextLevel?: boolean;
+    showUserId?: boolean;
 }
 export default function MultipleList(params: IMultipleOptionProps): React.JSX.Element;
 export {};

package/dist/MemberPicker/components/MultipleOption.js

@@ -5,6 +5,7 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 import classnames from 'classnames';
 import React from 'react';
 import Checkbox from "../../Checkbox";
+import { EUserType } from "../../ConfigProvider/getUserList";
 import TextLink from "../../TextLink/index";
 import { getAccount, getId, getPhoto } from "../utils";
 import { isUserGroup } from "../utils/getUsersWithUserId";
@@ -17,7 +18,9 @@ export default function MultipleList(params) {
     className = params.className,
     onNextLevel = params.onNextLevel,
     _params$hasNextLevel = params.hasNextLevel,
-    hasNextLevel = _params$hasNextLevel === void 0 ? true : _params$hasNextLevel;
+    hasNextLevel = _params$hasNextLevel === void 0 ? true : _params$hasNextLevel,
+    _params$showUserId = params.showUserId,
+    showUserId = _params$showUserId === void 0 ? false : _params$showUserId;
   var onClick = function onClick() {
     if (disabled) return;
     onChange === null || onChange === void 0 ? void 0 : onChange(!selected, user);
@@ -31,13 +34,17 @@ export default function MultipleList(params) {
     className: 'ald-member-picker-checkbox',
     checked: selected,
     disabled: disabled
-  }), /*#__PURE__*/React.createElement(NickLabel, {
+  }), /*#__PURE__*/React.createElement("div", {
+    className: 'ald-member-picker-option-content'
+  }, /*#__PURE__*/React.createElement(NickLabel, {
     type: user.type,
     id: getId(user),
     name: user.name,
     photo: getPhoto(user),
     account: getAccount(user)
-  })), isUserGroup(user) && hasNextLevel && /*#__PURE__*/React.createElement(TextLink, {
+  }), showUserId && user.type === EUserType.USER && /*#__PURE__*/React.createElement("div", {
+    className: 'ald-member-picker-option-id'
+  }, user.userId))), isUserGroup(user) && hasNextLevel && /*#__PURE__*/React.createElement(TextLink, {
     className: "ald-member-picker-btn",
     size: "small",
     disabled: disabled,

package/dist/MemberPicker/components/Panel.d.ts

@@ -14,5 +14,6 @@ interface IPanelProps {
     className?: string;
     lockedIds: Array<TUserValue | TUserGroupValue>;
 }
+export declare const userDisplayNameIsRepeated: (userList: TUser, displayName?: string) => boolean;
 export default function Panel(props: IPanelProps): React.JSX.Element;
 export {};

package/dist/MemberPicker/components/Panel.js

@@ -13,6 +13,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import classNames from 'classnames';
+import { EUserType } from "../../ConfigProvider/getUserList";
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import Tabs from "../../Tabs";
 import { EMemberPicker } from "../interface";
@@ -22,6 +23,11 @@ import MemberSelection from "./MemberSelection";
 import SelectedMemberTags from "./SelectedMemberTags";
 import SelectorFooter from "./SelectorFooter";
 import UserGroupSelection from "./UserGroupSelection";
+export var userDisplayNameIsRepeated = function userDisplayNameIsRepeated(userList, displayName) {
+  return userList.filter(function (user) {
+    return user.type === EUserType.USER && user.nickname === displayName;
+  }).length > 1;
+};
 export default function Panel(props) {
   var _classNames;
   var type = props.type,
@@ -140,7 +146,8 @@ export default function Panel(props) {
     selectedUsers: selectedUsers,
     width: (panelWidth - 3) / 2,
     onRemove: onRemove,
-    lockedIds: lockedIds
+    lockedIds: lockedIds,
+    userList: dataList
   }), /*#__PURE__*/React.createElement(SelectorFooter, {
     className: 'ald-member-picker-selector-footer',
     onCancel: props.onCancel,

package/dist/MemberPicker/components/PanelWrapper.d.ts

@@ -10,6 +10,7 @@ interface IProps {
     className?: string;
     onCancel?: () => void;
     lockedIds?: Array<TUserValue | TUserGroupValue>;
+    showUserId?: boolean;
 }
 export declare const PanelWrapper: ({ type, value, multiple, dropdownWidth, onChange, onCancel, className, lockedIds, }: IProps) => React.JSX.Element;
 export default PanelWrapper;

package/dist/MemberPicker/components/PanelWrapper.js

@@ -72,6 +72,7 @@ export var PanelWrapper = function PanelWrapper(_ref) {
       cacheTime: 1000 * 60 * 2,
       // 2分钟内不重复请求
       onSuccess: function onSuccess(result) {
+        console.log('%c [ result ]-73', 'font-size:13px; background:#c324a4; color:#ff68e8;', 1433223, result);
         setSearchUserList(result);
       },
       onError: function onError(error) {

package/dist/MemberPicker/components/SelectedMemberTags.d.ts

@@ -7,6 +7,7 @@ interface ISelectedMemberTagsProps {
     onRemove?: (user: IUser | IUserGroup) => void;
     width: number;
     lockedIds: Array<TUserValue | TUserGroupValue>;
+    userList: TUser;
 }
 export default function SelectedMemberTags(props: ISelectedMemberTagsProps): React.JSX.Element;
 export {};

package/dist/MemberPicker/components/SelectedMemberTags.js

@@ -5,12 +5,14 @@ import { CloseMLine } from "../../Icon";
 import ScrollArea from "../../ScrollArea";
 import { getAccount, getId, getPhoto } from "../utils";
 import NickLabel from "./NickLabel";
+import { userDisplayNameIsRepeated } from "./Panel";
 export default function SelectedMemberTags(props) {
   var className = props.className,
     selectedUsers = props.selectedUsers,
     width = props.width,
     _props$lockedIds = props.lockedIds,
-    lockedIds = _props$lockedIds === void 0 ? [] : _props$lockedIds;
+    lockedIds = _props$lockedIds === void 0 ? [] : _props$lockedIds,
+    userList = props.userList;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(className, 'ald-member-picker-selected-member-tags-wrap')
   }, /*#__PURE__*/React.createElement("div", {
@@ -27,6 +29,7 @@ export default function SelectedMemberTags(props) {
     }
   }, selectedUsers.map(function (user) {
     var hasLocked = false;
+    var isDisplayNameRepeat = false;
     if (user && user.hasOwnProperty('groupId')) {
       var index = _.findIndex(lockedIds, {
         groupId: user.groupId,
@@ -38,6 +41,7 @@ export default function SelectedMemberTags(props) {
         userId: user.userId,
         type: user.type
       });
+      isDisplayNameRepeat = userDisplayNameIsRepeated(userList, user.nickname);
       hasLocked = _index !== -1;
     }
     return /*#__PURE__*/React.createElement("div", {
@@ -51,7 +55,9 @@ export default function SelectedMemberTags(props) {
       name: user.name,
       photo: getPhoto(user),
       account: getAccount(user)
-    })), !hasLocked && /*#__PURE__*/React.createElement(CloseMLine, {
+    }), isDisplayNameRepeat && user.type === 'USER' && /*#__PURE__*/React.createElement("div", {
+      className: "ald-member-picker-option-id"
+    }, user.userId)), !hasLocked && /*#__PURE__*/React.createElement(CloseMLine, {
       size: 20,
       className: 'ald-member-picker-close',
       color: "#98A2B3",

package/dist/MemberPicker/components/SingleOption.d.ts

@@ -9,6 +9,7 @@ interface IMultipleOptionProps {
     className?: string;
     onNextLevel?: (userGroup: IUserGroup) => void;
     hasNextLevel?: boolean;
+    showUserId?: boolean;
 }
 export default function SingleOption(params: IMultipleOptionProps): React.JSX.Element;
 export {};