@aloudata/aloudata-design 2.19.0 → 2.19.2

package/dist/AldSelect/Selector/MultipleResponsiveSelectedSection.d.ts

@@ -3,7 +3,7 @@ import { DisplayValueType } from '../interface';
 import { RefTriggerProps } from '../SelectTrigger';
 export default function MultipleResponsiveSelectedSection(params: {
     displayValues: DisplayValueType[];
-    renderItem: (valueItem: DisplayValueType) => React.JSX.Element | null;
+    renderItem: (valueItem: DisplayValueType, index?: number) => React.JSX.Element | null;
     onToggleOpen: (open: boolean) => void;
     dropdownRef: RefObject<RefTriggerProps>;
     maxHeight?: number;

package/dist/AldSelect/Selector/MultipleResponsiveSelectedSection.js

@@ -41,7 +41,9 @@ export default function MultipleResponsiveSelectedSection(params) {
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: "beta-ald-select-selector-multiple-responsive-selected-section-tags"
-  }, displayValues.map(renderItem))), /*#__PURE__*/React.createElement(Suffix, {
+  }, displayValues.map(function (item, index) {
+    return renderItem(item, index);
+  }))), /*#__PURE__*/React.createElement(Suffix, {
     showArrow: true,
     allowClear: false,
     icon: suffixIcon,

package/dist/AldSelect/Selector/MultipleSelector.js

@@ -42,14 +42,14 @@ export default function MultipleSelector(props) {
     _useState2 = _slicedToArray(_useState, 2),
     showItemIndex = _useState2[0],
     setShowItemIndex = _useState2[1];
-  var customizeRenderSelector = function customizeRenderSelector(value, content, itemDisabled, closable, onClose, isPreview) {
+  var customizeRenderSelector = function customizeRenderSelector(value, content, itemDisabled, closable, onClose, isPreview, uniqueKey) {
     var onMouseDown = function onMouseDown(e) {
       onPreventMouseDown(e);
     };
     return /*#__PURE__*/React.createElement("span", {
       className: "beta-ald-select-custom-tag-render-wrapper",
       onMouseDown: onMouseDown,
-      key: value
+      key: uniqueKey !== null && uniqueKey !== void 0 ? uniqueKey : value
     }, tagRender === null || tagRender === void 0 ? void 0 : tagRender({
       label: content,
       value: value,
@@ -58,10 +58,10 @@ export default function MultipleSelector(props) {
       onClose: onClose !== null && onClose !== void 0 ? onClose : function () {}
     }, isPreview));
   };
-  var defaultRenderSelector = function defaultRenderSelector(item, content, itemDisabled, closable, _onClose, isPreview) {
+  var defaultRenderSelector = function defaultRenderSelector(item, content, itemDisabled, closable, _onClose, isPreview, uniqueKey) {
     return /*#__PURE__*/React.createElement(Tag, {
       disabled: itemDisabled,
-      key: item === null || item === void 0 ? void 0 : item.value,
+      key: uniqueKey !== null && uniqueKey !== void 0 ? uniqueKey : item === null || item === void 0 ? void 0 : item.value,
       size: "small",
       closable: isPreview ? false : closable,
       onClose: function onClose(e) {
@@ -72,7 +72,8 @@ export default function MultipleSelector(props) {
   };
   var isResponsiveMode = isResponsive(mode);
   var showSelectedSection = isShowSelectedSection(mode);
-  var renderItem = function renderItem(valueItem) {
+  var renderItem = function renderItem(valueItem, index) {
+    var _valueItem$key;
     var itemDisabled = valueItem.disabled,
       label = valueItem.label,
       value = valueItem.value;
@@ -97,7 +98,10 @@ export default function MultipleSelector(props) {
     if (_.isNil(value)) {
       return null;
     }
-    return typeof tagRender === 'function' ? customizeRenderSelector(value, displayLabel, !!itemDisabled, closable, onClose, isPreview) : defaultRenderSelector(valueItem, displayLabel, !!itemDisabled, closable, onClose, isPreview);
+
+    // 生成唯一的 key，如果 value 可能重复，使用 value + index 组合
+    var uniqueKey = (_valueItem$key = valueItem.key) !== null && _valueItem$key !== void 0 ? _valueItem$key : value !== undefined && value !== null ? "".concat(value, "-").concat(index !== null && index !== void 0 ? index : '') : "item-".concat(index !== null && index !== void 0 ? index : '');
+    return typeof tagRender === 'function' ? customizeRenderSelector(value, displayLabel, !!itemDisabled, closable, onClose, isPreview, uniqueKey) : defaultRenderSelector(valueItem, displayLabel, !!itemDisabled, closable, onClose, isPreview, uniqueKey);
   };
   var renderRest = function renderRest(omittedValues) {
     if (displayValues.length === 1) {
@@ -132,7 +136,7 @@ export default function MultipleSelector(props) {
       className: "beta-ald-select-selector beta-ald-select-selector-multiple-responsive"
     }, showItemIndex === -1 && displayValues.length > 0 && /*#__PURE__*/React.createElement("div", {
       className: "beta-ald-select-selector-overflow-item-first"
-    }, renderItem(displayValues[0])), /*#__PURE__*/React.createElement(Overflow, {
+    }, renderItem(displayValues[0], 0)), /*#__PURE__*/React.createElement(Overflow, {
       prefixCls: overflowPrefixCls,
       data: displayValues,
       renderItem: renderItem,
@@ -161,5 +165,7 @@ export default function MultipleSelector(props) {
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: "beta-ald-select-selector-multiple-default-tags"
-  }, displayValues.map(renderItem)));
+  }, displayValues.map(function (item, index) {
+    return renderItem(item, index);
+  })));
 }

package/dist/AldSelect/Selector/index.js

@@ -21,7 +21,10 @@ export default function Selector(props) {
   }
   return /*#__PURE__*/React.createElement("div", {
     className: classNames('beta-ald-select-selector')
-  }, displayValues.map(function (item) {
-    return item.label;
+  }, displayValues.map(function (item, index) {
+    var _item$value;
+    return /*#__PURE__*/React.createElement("span", {
+      key: (_item$value = item.value) !== null && _item$value !== void 0 ? _item$value : "item-".concat(index)
+    }, item.label);
   }));
 }

package/dist/AldSelect/utils/commonUtil.js

@@ -18,11 +18,19 @@ export var toString = function toString(value) {
 /** Is client side and not jsdom */
 export var isBrowserClient = process.env.NODE_ENV !== 'test' && isClient;
 export function convertOptionsToMenu(options, selectedKeys) {
+  // 使用 Map 来跟踪每个 key 出现的次数，确保 key 的唯一性
+  var keyCountMap = new Map();
   return {
-    items: options.map(function (option) {
+    items: options.map(function (option, index) {
+      var _keyCountMap$get;
+      var baseKey = toString(option.value);
+      // 如果 key 已存在，添加索引后缀确保唯一性
+      var count = (_keyCountMap$get = keyCountMap.get(baseKey)) !== null && _keyCountMap$get !== void 0 ? _keyCountMap$get : 0;
+      keyCountMap.set(baseKey, count + 1);
+      var uniqueKey = count > 0 ? "".concat(baseKey, "-").concat(index) : baseKey;
       return _objectSpread(_objectSpread({}, option), {}, {
         label: option.label,
-        key: toString(option.value),
+        key: uniqueKey,
         disabled: option.disabled,
         onClick: option.onClick,
         className: option.className,

package/dist/Dropdown/index.js

@@ -79,7 +79,14 @@ export default function Dropdown(props) {
             width: typeof popupMatchTriggerWidth === 'number' ? "".concat(popupMatchTriggerWidth, "px") : "".concat(rects.reference.width, "px")
           });
         }
-      }) : undefined],
+      }) : size({
+        apply: function apply(_ref2) {
+          var elements = _ref2.elements;
+          Object.assign(elements.floating.style, {
+            minWidth: '144px'
+          });
+        }
+      })],
       whileElementsMounted: autoUpdatePos ? autoUpdate : undefined
     }),
     refs = _useFloating.refs,

package/dist/Icon/components/InProgressFill.d.ts

@@ -1,4 +1,3 @@
-import type { SVGProps } from 'react';
 import * as React from 'react';
 interface SVGRProps {
     size?: number | string;
@@ -7,5 +6,5 @@ interface SVGRProps {
     desc?: string;
     descId?: string;
 }
-declare const Memo: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>>;
+declare const Memo: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>>;
 export default Memo;

package/dist/Icon/components/InProgressFill.js

@@ -24,7 +24,7 @@ var InProgressFill = function InProgressFill(_ref, ref) {
   }, desc) : null, title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("g", {
-    fill: "#2986F4"
+    fill: "currentColor"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M15 10a5 5 0 0 1-5 5V5a5 5 0 0 1 5 5Z"
   }), /*#__PURE__*/React.createElement("path", {

package/dist/Icon/svg/In-Progress-fill.svg

@@ -1,8 +1,8 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g id=" Icon / Fill / Interface / In-Progress-fill">
 <g id="Icon">
-<path d="M15.0001 10C15.0001 12.7614 12.7615 15 10.0001 15V5.00001C12.7615 5.00001 15.0001 7.23858 15.0001 10Z" fill="#2986F4"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M18.3334 10C18.3334 14.6024 14.6025 18.3333 10.0001 18.3333C5.39771 18.3333 1.66675 14.6024 1.66675 10C1.66675 5.39763 5.39771 1.66667 10.0001 1.66667C14.6025 1.66667 18.3334 5.39763 18.3334 10ZM16.6667 10C16.6667 13.6819 13.682 16.6667 10.0001 16.6667C6.31818 16.6667 3.33341 13.6819 3.33341 10C3.33341 6.31811 6.31818 3.33334 10.0001 3.33334C13.682 3.33334 16.6667 6.31811 16.6667 10Z" fill="#2986F4"/>
+<path d="M15.0001 10C15.0001 12.7614 12.7615 15 10.0001 15V5.00001C12.7615 5.00001 15.0001 7.23858 15.0001 10Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.3334 10C18.3334 14.6024 14.6025 18.3333 10.0001 18.3333C5.39771 18.3333 1.66675 14.6024 1.66675 10C1.66675 5.39763 5.39771 1.66667 10.0001 1.66667C14.6025 1.66667 18.3334 5.39763 18.3334 10ZM16.6667 10C16.6667 13.6819 13.682 16.6667 10.0001 16.6667C6.31818 16.6667 3.33341 13.6819 3.33341 10C3.33341 6.31811 6.31818 3.33334 10.0001 3.33334C13.682 3.33334 16.6667 6.31811 16.6667 10Z" fill="currentColor"/>
 </g>
 </g>
 </svg>

package/dist/InputNumber/style/index.less

@@ -17,13 +17,18 @@
 @inputNumber-padding-small: 0 7px;
 
 //默认 - 使用CSS变量映射
-@inputNumber-bg-color: var(--background-default);
-@inputNumber-border-color: var(--border-default);
+@inputNumber-bg-color: var(--interaction-background-form-field);
+@inputNumber-border-color: var(--interaction-border-neutral-normal);
 @inputNumber-color: var(--content-primary);
 @inputNumber-wrapper-bg-color: var(--background-neutral-subtle);
+
+//hover
+@inputNumber-hover-bg-color: var(--interaction-background-form-field);
+@inputNumber-hover-border-color: var(--interaction-border-hover);
 //激活
 @inputNumber-active-bg-color: var(--background-default);
-@inputNumber-active-border-color: var(--interaction-border-selected);
+@inputNumber-active-border-color: var(--interaction-border-hover);
+@inputNumber-active-outline-color: var(--global-blue-500);
 
 //disable
 @inputNumber-disabled-bg-color: var(--global-cool-gray-alpha-50);
@@ -47,6 +52,7 @@
     background-color: @inputNumber-bg-color;
     border-color: @inputNumber-border-color;
     border-radius: @inputNumber-border-radius-middle;
+    overflow: hidden;
     box-shadow: none;
 
     .ant-input-number-input-wrap {
@@ -55,6 +61,7 @@
       .ant-input-number-input {
         height: 100%;
         caret-color: @inputNumber-cursor-color;
+        border-radius: 0;
       }
     }
 
@@ -156,11 +163,16 @@
       }
     }
 
-    &:hover:not(.ald-input-number-disabled),
+    &:hover:not(.ald-input-number-disabled) {
+      background-color: @inputNumber-hover-bg-color;
+      border-color: @inputNumber-hover-border-color;
+    }
+
     &-focused {
       background-color: @inputNumber-active-bg-color;
       border-color: @inputNumber-active-border-color;
       box-shadow: none;
+      outline: @inputNumber-active-outline-color solid 1px;
     }
   }
 
@@ -172,6 +184,16 @@
     border-color: @inputNumber-border-color;
     box-shadow: none;
 
+    &:hover {
+      border-color: @inputNumber-hover-border-color;
+    }
+
+    &:focus {
+      border-color: @inputNumber-active-border-color;
+      box-shadow: none;
+      outline: @inputNumber-active-outline-color solid 1px;
+    }
+
     &.ald-input-number-large {
       font-size: @inputNumber-font-size-large;
       border-radius: @inputNumber-border-radius-large;
@@ -273,6 +295,18 @@
         color: @inputNumber-addon-disable-color;
       }
     }
+
+    .ant-input-number-focused {
+      outline: none !important;
+    }
+
+    .ant-input-number-handler-wrap {
+      border-radius: 0 !important;
+
+      .ant-input-number-handler {
+        border-radius: 0 !important;
+      }
+    }
   }
 }
 
@@ -281,3 +315,16 @@
   ).ant-input-number.ant-input-number {
   border-color: var(--border-negative-strong);
 }
+
+.ald-input-number.ant-input-number-affix-wrapper {
+  border-color: @inputNumber-border-color;
+
+  &:hover {
+    border-color: @inputNumber-hover-border-color;
+  }
+
+  &-focused {
+    border-color: @inputNumber-hover-border-color;
+    outline: @inputNumber-hover-border-color solid 1px;
+  }
+}

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

@@ -11,6 +11,12 @@ interface IMemberSelectionProps {
     width: number;
     filterItem?: (item: IUser) => boolean;
     lockedIds: Array<TUserValue | TUserGroupValue>;
+    renderItem?: (item: IUser, context: {
+        isSelected: boolean;
+        disabled: boolean;
+        onClick: () => void;
+        originNode: React.ReactNode;
+    }) => React.ReactNode;
 }
 export declare const OPTION_HEIGHT = 36;
 export declare const WRAPPER_HEIGHT = 300;

package/dist/MemberPicker/components/MemberSelection.js

@@ -31,7 +31,8 @@ export default function MemberSelection(props) {
     loading = props.loading,
     width = props.width,
     lockedIds = props.lockedIds,
-    filterItem = props.filterItem;
+    filterItem = props.filterItem,
+    renderItem = props.renderItem;
   var filteredList = useMemo(function () {
     return userList.filter(function (item) {
       if (filterItem) {
@@ -114,17 +115,7 @@ export default function MemberSelection(props) {
       type: user.type
     });
     var disabled = index !== -1;
-    return /*#__PURE__*/React.createElement("div", {
-      key: virtualItem.key,
-      style: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: "".concat(virtualItem.size, "px"),
-        transform: "translateY(".concat(virtualItem.start, "px)")
-      }
-    }, multiple ? /*#__PURE__*/React.createElement(MultipleOption, {
+    var originNode = multiple ? /*#__PURE__*/React.createElement(MultipleOption, {
       key: user.userId,
       user: user,
       disabled: disabled,
@@ -141,6 +132,39 @@ export default function MemberSelection(props) {
       onChange: function onChange(selected, user) {
         if (isUser(user)) _onChange(selected, user);
       }
-    }));
+    });
+    if (renderItem) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: virtualItem.key,
+        style: {
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: "".concat(virtualItem.size, "px"),
+          transform: "translateY(".concat(virtualItem.start, "px)")
+        }
+      }, renderItem(user, {
+        isSelected: isSelected,
+        disabled: disabled,
+        onClick: function onClick() {
+          if (!disabled) {
+            _onChange(!isSelected, user);
+          }
+        },
+        originNode: originNode
+      }));
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      key: virtualItem.key,
+      style: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: "".concat(virtualItem.size, "px"),
+        transform: "translateY(".concat(virtualItem.start, "px)")
+      }
+    }, originNode);
   })))));
 }

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

@@ -14,6 +14,14 @@ interface IPanelProps {
     className?: string;
     lockedIds: Array<TUserValue | TUserGroupValue>;
     footer?: ReactNode;
+    renderItem?: (item: IUser | IUserGroup, context: {
+        isSelected: boolean;
+        disabled: boolean;
+        onClick: () => void;
+        onNextLevel?: () => void;
+        originNode: ReactNode;
+    }) => ReactNode;
+    renderSelectedTag?: (user: IUser | IUserGroup, originNode: ReactNode) => ReactNode;
 }
 export declare const userDisplayNameIsRepeated: (userList: TUser, displayName?: string) => boolean;
 export default function Panel(props: IPanelProps): React.JSX.Element;

package/dist/MemberPicker/components/Panel.js

@@ -44,7 +44,9 @@ export default function Panel(props) {
     className = props.className,
     lockedIds = props.lockedIds,
     footer = props.footer,
-    onCancel = props.onCancel;
+    onCancel = props.onCancel,
+    renderItem = props.renderItem,
+    renderSelectedTag = props.renderSelectedTag;
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     selectedUsers = _useState2[0],
@@ -101,7 +103,8 @@ export default function Panel(props) {
       onSearchValueChange: onSearchValueChange,
       multiple: true,
       lockedIds: lockedIds,
-      loading: props.loading
+      loading: props.loading,
+      renderItem: renderItem
     });
     var userGroupSelection = /*#__PURE__*/React.createElement(UserGroupSelection, {
       className: 'ald-member-picker-member-selection-multiple',
@@ -112,7 +115,8 @@ export default function Panel(props) {
       onSearchValueChange: onSearchValueChange,
       multiple: true,
       lockedIds: lockedIds,
-      loading: props.loading
+      loading: props.loading,
+      renderItem: renderItem
     });
     if (type === EMemberPicker.USER) {
       return userSelection;
@@ -136,7 +140,7 @@ export default function Panel(props) {
         className: "ald-member-tabs"
       });
     }
-  }, [t, dataList, panelwidth, selectedUsers, onSelectionChange, onSearchValueChange, lockedIds, props.loading, type]);
+  }, [t, dataList, panelwidth, selectedUsers, onSelectionChange, onSearchValueChange, lockedIds, props.loading, type, renderItem]);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(className, 'ald-member-picker-wrapper', (_classNames = {}, _defineProperty(_classNames, 'ald-member-picker-multiple', multiple), _defineProperty(_classNames, 'ald-member-picker-single', !multiple), _classNames)),
     style: {
@@ -150,7 +154,8 @@ export default function Panel(props) {
     width: (panelwidth - 3) / 2,
     onRemove: onRemove,
     lockedIds: lockedIds,
-    userList: dataList
+    userList: dataList,
+    renderSelectedTag: renderSelectedTag
   }), /*#__PURE__*/React.createElement(SelectorFooter, {
     className: 'ald-member-picker-selector-footer',
     onCancel: onCancel,
@@ -167,7 +172,8 @@ export default function Panel(props) {
     onSearchValueChange: onSearchValueChange,
     multiple: false && multiple,
     lockedIds: lockedIds,
-    loading: props.loading
+    loading: props.loading,
+    renderItem: renderItem
   }), type === EMemberPicker.GROUP && /*#__PURE__*/React.createElement(UserGroupSelection, {
     className: 'ald-member-picker-member-selection-multiple',
     userGroupList: dataList.filter(isUserGroup),
@@ -177,6 +183,7 @@ export default function Panel(props) {
     onSearchValueChange: onSearchValueChange,
     multiple: false,
     lockedIds: lockedIds,
-    loading: props.loading
+    loading: props.loading,
+    renderItem: renderItem
   })));
 }

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

@@ -12,6 +12,14 @@ interface IProps {
     lockedIds?: Array<TUserValue | TUserGroupValue>;
     showUserId?: boolean;
     footer?: ReactNode;
+    renderItem?: (item: IUser | IUserGroup, context: {
+        isSelected: boolean;
+        disabled: boolean;
+        onClick: () => void;
+        onNextLevel?: () => void;
+        originNode: ReactNode;
+    }) => ReactNode;
+    renderSelectedTag?: (user: IUser | IUserGroup, originNode: ReactNode) => ReactNode;
 }
-export declare const PanelWrapper: ({ type, value, multiple, dropdownWidth, onChange, onCancel, className, footer, lockedIds, }: IProps) => React.JSX.Element;
+export declare const PanelWrapper: ({ type, value, multiple, dropdownWidth, onChange, onCancel, className, footer, lockedIds, renderItem, renderSelectedTag, }: IProps) => React.JSX.Element;
 export default PanelWrapper;

package/dist/MemberPicker/components/PanelWrapper.js

@@ -24,7 +24,9 @@ export var PanelWrapper = function PanelWrapper(_ref) {
     className = _ref.className,
     footer = _ref.footer,
     _ref$lockedIds = _ref.lockedIds,
-    lockedIds = _ref$lockedIds === void 0 ? [] : _ref$lockedIds;
+    lockedIds = _ref$lockedIds === void 0 ? [] : _ref$lockedIds,
+    renderItem = _ref.renderItem,
+    renderSelectedTag = _ref.renderSelectedTag;
   var _useContext = useContext(LocaleContext),
     locale = _useContext.locale;
   var t = getTranslator(locale);
@@ -136,7 +138,9 @@ export var PanelWrapper = function PanelWrapper(_ref) {
     className: className,
     onCancel: onCancel,
     lockedIds: lockedIds,
-    footer: footer
+    footer: footer,
+    renderItem: renderItem,
+    renderSelectedTag: renderSelectedTag
   });
 };
 export default PanelWrapper;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { IUserGroup, TUser, TUserGroupValue, TUserValue } from '../../ConfigProvider/getUserList';
 import { IUser } from '../interface';
 interface ISelectedMemberTagsProps {
@@ -8,6 +8,7 @@ interface ISelectedMemberTagsProps {
     width: number;
     lockedIds: Array<TUserValue | TUserGroupValue>;
     userList: TUser;
+    renderSelectedTag?: (user: IUser | IUserGroup, originNode: ReactNode) => ReactNode;
 }
 export default function SelectedMemberTags(props: ISelectedMemberTagsProps): React.JSX.Element;
 export {};

package/dist/MemberPicker/components/SelectedMemberTags.js

@@ -14,7 +14,8 @@ export default function SelectedMemberTags(props) {
     selectedUsers = props.selectedUsers,
     width = props.width,
     _props$lockedIds = props.lockedIds,
-    lockedIds = _props$lockedIds === void 0 ? [] : _props$lockedIds;
+    lockedIds = _props$lockedIds === void 0 ? [] : _props$lockedIds,
+    renderSelectedTag = props.renderSelectedTag;
   var _ConfigProvider$useGe = ConfigProvider.useGetUserList(),
     getMemberPickerItemMoreInfoKey = _ConfigProvider$useGe.getMemberPickerItemMoreInfoKey;
   var _useContext = useContext(LocaleContext),
@@ -46,7 +47,7 @@ export default function SelectedMemberTags(props) {
       });
       hasLocked = _index !== -1;
     }
-    return /*#__PURE__*/React.createElement("div", {
+    var originNode = /*#__PURE__*/React.createElement("div", {
       className: 'ald-member-picker-selected-member-tag',
       key: getId(user)
     }, /*#__PURE__*/React.createElement("div", {
@@ -73,5 +74,9 @@ export default function SelectedMemberTags(props) {
         (_props$onRemove = props.onRemove) === null || _props$onRemove === void 0 ? void 0 : _props$onRemove.call(props, user);
       }
     }));
+    if (renderSelectedTag) {
+      return renderSelectedTag(user, originNode);
+    }
+    return originNode;
   }))));
 }

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

@@ -11,6 +11,13 @@ interface IProps {
     width: number;
     lockedIds: Array<TUserValue | TUserGroupValue>;
     filterItem?: (item: IUserGroup) => boolean;
+    renderItem?: (item: IUserGroup, context: {
+        isSelected: boolean;
+        disabled: boolean;
+        onClick: () => void;
+        onNextLevel?: () => void;
+        originNode: React.ReactNode;
+    }) => React.ReactNode;
 }
-declare const UserGroupSelection: ({ className, userGroupList, multiple, onChange, selectedUsersGroup: selectedUsersGroups, loading, width, lockedIds, filterItem, }: IProps) => React.JSX.Element;
+declare const UserGroupSelection: ({ className, userGroupList, multiple, onChange, selectedUsersGroup: selectedUsersGroups, loading, width, lockedIds, filterItem, renderItem, }: IProps) => React.JSX.Element;
 export default UserGroupSelection;

package/dist/MemberPicker/components/UserGroupSelection.js

@@ -35,7 +35,8 @@ var UserGroupSelection = function UserGroupSelection(_ref) {
     loading = _ref.loading,
     width = _ref.width,
     lockedIds = _ref.lockedIds,
-    filterItem = _ref.filterItem;
+    filterItem = _ref.filterItem,
+    renderItem = _ref.renderItem;
   var _useContext = useContext(LocaleContext),
     locale = _useContext.locale;
   var t = getTranslator(locale);
@@ -174,7 +175,16 @@ var UserGroupSelection = function UserGroupSelection(_ref) {
       type: userGroup.type
     });
     var disabled = index !== -1;
-    return multiple ? /*#__PURE__*/React.createElement(MultipleOption, {
+    var hasNextLevel = userGroupList.some(function (group) {
+      return group.parentId === userGroup.groupId;
+    }) || isAsync;
+    var onNextLevel = function onNextLevel() {
+      setGroupPath(function (prev) {
+        return [].concat(_toConsumableArray(prev), [userGroup]);
+      });
+      setSearchKey('');
+    };
+    var originNode = multiple ? /*#__PURE__*/React.createElement(MultipleOption, {
       key: userGroup.groupId,
       user: userGroup,
       disabled: disabled,
@@ -184,15 +194,8 @@ var UserGroupSelection = function UserGroupSelection(_ref) {
           _onChange(selected, userGroup);
         }
       },
-      hasNextLevel: userGroupList.some(function (group) {
-        return group.parentId === userGroup.groupId;
-      }) || isAsync,
-      onNextLevel: function onNextLevel(userGroup) {
-        setGroupPath(function (prev) {
-          return [].concat(_toConsumableArray(prev), [userGroup]);
-        });
-        setSearchKey('');
-      }
+      hasNextLevel: hasNextLevel,
+      onNextLevel: onNextLevel
     }) : /*#__PURE__*/React.createElement(SingleOption, {
       key: userGroup.groupId,
       user: userGroup,
@@ -203,16 +206,25 @@ var UserGroupSelection = function UserGroupSelection(_ref) {
           _onChange(selected, userGroup);
         }
       },
-      hasNextLevel: userGroupList.some(function (group) {
-        return group.parentId === userGroup.groupId;
-      }) || isAsync,
-      onNextLevel: function onNextLevel(userGroup) {
-        setGroupPath(function (prev) {
-          return [].concat(_toConsumableArray(prev), [userGroup]);
-        });
-        setSearchKey('');
-      }
+      hasNextLevel: hasNextLevel,
+      onNextLevel: onNextLevel
     });
+    if (renderItem) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: userGroup.groupId
+      }, renderItem(userGroup, {
+        isSelected: isSelected,
+        disabled: disabled,
+        onClick: function onClick() {
+          if (isUserGroup(userGroup) && !disabled) {
+            _onChange(!isSelected, userGroup);
+          }
+        },
+        onNextLevel: hasNextLevel ? onNextLevel : undefined,
+        originNode: originNode
+      }));
+    }
+    return originNode;
   })))));
 };
 export default UserGroupSelection;

package/dist/MemberPicker/index.js

@@ -1,4 +1,4 @@
-var _excluded = ["value", "type", "onChange", "multiple", "dropdownWidth", "open", "onOpenChange", "placeholder", "className", "allowClear", "disabled", "onClear", "size", "prefix", "lockedIds", "footer", "onCancel", "filterItem", "mode"];
+var _excluded = ["value", "type", "onChange", "multiple", "dropdownWidth", "open", "onOpenChange", "placeholder", "className", "allowClear", "disabled", "onClear", "size", "prefix", "lockedIds", "footer", "onCancel", "filterItem", "mode", "renderItem", "renderSelectedTag"];
 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; }
@@ -60,6 +60,8 @@ var Component = function Component(props) {
     _onCancel = props.onCancel,
     filterItem = props.filterItem,
     propsMode = props.mode,
+    renderItem = props.renderItem,
+    renderSelectedTag = props.renderSelectedTag,
     restProps = _objectWithoutProperties(props, _excluded);
   var _ConfigProvider$useGe = ConfigProvider.useGetUserList(),
     getUsersByIds = _ConfigProvider$useGe.getUsersByIds,
@@ -368,7 +370,9 @@ var Component = function Component(props) {
         onCancel: function onCancel() {
           _onCancel === null || _onCancel === void 0 ? void 0 : _onCancel();
           setDropdownOpen(false);
-        }
+        },
+        renderItem: renderItem,
+        renderSelectedTag: renderSelectedTag
       }));
     }
   }));