@aloudata/aloudata-design 2.14.5 → 2.14.7

package/dist/AldSelect/BaseSelect.d.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import type { AlignType } from 'rc-trigger/lib/interface';
 import { PlacementType } from '../Dropdown';
-import { BaseSelectRef, ISelectProps, LabelInValueType } from './interface';
-import { MenuProps } from '../Menu';
+import { BaseSelectRef, ISelectProps, LabelInValueType, SelectMenuProps } from './interface';
 export type RenderNode = React.ReactNode | ((props: any) => React.ReactNode);
 export type RenderDOMFunc = (props: any) => HTMLElement;
 export type Mode = 'multiple' | {
@@ -36,11 +35,10 @@ export interface BaseSelectProps extends BaseSelectPrivateProps, ISelectProps, R
     className?: string;
     style?: React.CSSProperties;
     notFoundContent?: React.ReactNode;
-    placeholder?: string;
     onClear?: () => void;
     innerSearchValue?: string;
     setInnerSearchValue?: (value: string) => void;
-    displayMenu?: MenuProps;
+    displayMenu?: SelectMenuProps;
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
@@ -48,7 +46,6 @@ export interface BaseSelectProps extends BaseSelectPrivateProps, ISelectProps, R
     allowClear?: boolean;
     showArrow?: boolean;
     suffixIcon?: React.ReactNode;
-    dropdownRender?: (menu: React.ReactNode) => React.ReactNode;
     dropdownAlign?: AlignType;
     placement?: PlacementType;
     getPopupContainer?: RenderDOMFunc;

package/dist/AldSelect/BaseSelect.js

@@ -1,3 +1,4 @@
+var _excluded = ["id", "className", "displayValues", "onDisplayValuesChange", "displayMenu", "notFoundContent", "onClear", "width", "mode", "status", "onOptionSelect", "onClick", "size", "borderLess", "disabled", "placeholder", "open", "defaultOpen", "onOpenChange", "showSearch", "innerSearchValue", "setInnerSearchValue", "allowClear", "showArrow", "prefix", "suffixIcon", "dropdownRender", "overlayStyle", "dropdownStyle", "popupMatchSelectWidth", "placement", "popupClassName", "style", "listHeight"];
 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; }
@@ -10,6 +11,8 @@ 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; }
 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); }
 import * as React from 'react';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
@@ -29,7 +32,7 @@ export function isMultiple(mode) {
   return !!mode;
 }
 export function isResponsive(mode) {
-  return _typeof(mode) === 'object' && (mode === null || mode === void 0 ? void 0 : mode.responsive);
+  return mode === 'multiple' || _typeof(mode) === 'object' && (mode === null || mode === void 0 ? void 0 : mode.responsive);
 }
 var BaseSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _setClassNames;
@@ -69,10 +72,12 @@ var BaseSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
     placement = props.placement,
     popupClassName = props.popupClassName,
     style = props.style,
-    listHeight = props.listHeight;
+    listHeight = props.listHeight,
+    restProps = _objectWithoutProperties(props, _excluded);
   var setClassNames = prefixCls('select');
   var selectRef = useRef(null);
   var widthStyle = getWidthStyle(width);
+  var dropdownRef = useRef(null);
   var isResponsiveMode = isResponsive(mode);
   var isMultipleMode = isMultiple(mode);
   /** Used for component focused management */
@@ -189,11 +194,14 @@ var BaseSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
     open: !!mergedOpen,
     notFoundContent: notFoundContent,
     menu: showMenu,
+    ref: dropdownRef,
     showSearch: showSearch,
     searchValue: innerSearchValue,
     setInnerSearchValue: setInnerSearchValue,
     popupMatchSelectWidth: popupMatchSelectWidth,
-    overlayClassName: popupClassName,
+    overlayClassName: popupClassName
+    // @ts-ignore
+    ,
     dropdownRender: dropdownRender,
     overlayStyle: overlayStyle || dropdownStyle,
     listHeight: listHeight,
@@ -215,8 +223,11 @@ var BaseSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
     className: setClassNames('prefix')
   }, prefix), _.isEmpty(displayValues) && /*#__PURE__*/React.createElement("div", {
     className: setClassNames('placeholder')
-  }, placeholder), !_.isEmpty(displayValues) && /*#__PURE__*/React.createElement(Selector, _extends({}, props, {
+  }, placeholder), !_.isEmpty(displayValues) && /*#__PURE__*/React.createElement(Selector, _extends({}, restProps, {
+    suffixIcon: suffixIcon,
     size: size,
+    mode: mode,
+    dropdownRef: dropdownRef,
     displayValues: displayValues,
     onToggleOpen: onToggleOpen,
     onRemove: onSelectorRemove,

package/dist/AldSelect/SelectTrigger.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ScrollTo } from 'rc-virtual-list/lib/List';
-import { DropdownProps } from '..';
+import { IDropdownProps } from '../Dropdown';
 import { SelectOptionType } from '../Select';
 export interface RefTriggerProps {
     getPopupElement: () => HTMLDivElement | null;
@@ -10,10 +10,10 @@ export interface RefSelectorProps {
     blur: () => void;
     scrollTo?: ScrollTo;
 }
-export interface SelectTriggerProps extends DropdownProps {
+export interface SelectTriggerProps extends IDropdownProps {
     open: boolean;
     notFoundContent?: React.ReactNode;
-    popupMatchSelectWidth?: boolean;
+    popupMatchSelectWidth?: boolean | number;
     showSearch?: boolean;
     searchValue?: string;
     setInnerSearchValue?: (value: string) => void;

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

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

package/dist/AldSelect/Selector/MultipleResponsiveSelectedSection.js

@@ -1,8 +1,13 @@
 import React, { useEffect, useRef } from 'react';
+import ScrollArea from "../../ScrollArea";
+import Suffix from "../components/Suffix";
 export default function MultipleResponsiveSelectedSection(params) {
   var displayValues = params.displayValues,
     renderItem = params.renderItem,
-    onToggleOpen = params.onToggleOpen;
+    onToggleOpen = params.onToggleOpen,
+    dropdownRef = params.dropdownRef,
+    maxHeight = params.maxHeight,
+    suffixIcon = params.suffixIcon;
   var multipleSelectedSectionRef = useRef(null);
   useEffect(function () {
     function getSelect() {
@@ -14,9 +19,10 @@ export default function MultipleResponsiveSelectedSection(params) {
       return null;
     }
     function close(e) {
+      var _dropdownRef$current, _dropdownRef$current$;
       var target = e.target;
       var select = getSelect();
-      if (select && target.contains(select)) {
+      if (select && !select.contains(target) && !((_dropdownRef$current = dropdownRef.current) !== null && _dropdownRef$current !== void 0 && (_dropdownRef$current$ = _dropdownRef$current.getPopupElement()) !== null && _dropdownRef$current$ !== void 0 && _dropdownRef$current$.contains(target))) {
         onToggleOpen(false);
       }
     }
@@ -24,9 +30,21 @@ export default function MultipleResponsiveSelectedSection(params) {
     return function () {
       document.removeEventListener('click', close);
     };
-  }, [onToggleOpen]);
+  }, [onToggleOpen, dropdownRef]);
   return /*#__PURE__*/React.createElement("div", {
     ref: multipleSelectedSectionRef,
     className: "beta-ald-select-selector-multiple-responsive-selected-section"
-  }, displayValues.map(renderItem));
+  }, /*#__PURE__*/React.createElement(ScrollArea, {
+    innerClassName: "beta-ald-select-selector-multiple-responsive-selected-section-inner",
+    innerStyle: {
+      maxHeight: maxHeight
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "beta-ald-select-selector-multiple-responsive-selected-section-tags"
+  }, displayValues.map(renderItem))), /*#__PURE__*/React.createElement(Suffix, {
+    showArrow: true,
+    allowClear: false,
+    icon: suffixIcon,
+    displayValues: displayValues
+  }));
 }

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

@@ -1,12 +1,14 @@
-import React from 'react';
+import React, { RefObject } from 'react';
 import { SelectorProps } from './index';
 import { DisplayValueType } from '../interface';
 import { CustomTagProps } from '../BaseSelect';
+import { RefTriggerProps } from '../SelectTrigger';
 interface MultipleSelectorProps extends SelectorProps {
     onRemove: (value: DisplayValueType) => void;
     onToggleOpen: (open?: boolean) => void;
     tagRender?: (props: CustomTagProps, isPreview?: boolean) => React.ReactNode;
     maxTagPlaceholder?: React.ReactNode | ((omittedValues: DisplayValueType[]) => React.ReactNode);
+    dropdownRef: RefObject<RefTriggerProps>;
 }
 export default function MultipleSelector(props: MultipleSelectorProps): React.JSX.Element;
 export {};

package/dist/AldSelect/Selector/MultipleSelector.js

@@ -9,6 +9,7 @@ import React, { useMemo, useState } from 'react';
 import Tag from "../../Tag";
 import { isMultiple, isResponsive } from "../BaseSelect";
 import ScrollArea from "../../ScrollArea";
+import classNames from 'classnames';
 import _ from 'lodash';
 import Overflow from 'rc-overflow';
 import MultipleResponsiveSelectedSection from "./MultipleResponsiveSelectedSection";
@@ -30,11 +31,13 @@ export default function MultipleSelector(props) {
     onToggleOpen = props.onToggleOpen,
     mode = props.mode,
     disabled = props.disabled,
-    _props$maxTagPlacehol = props.maxTagPlaceholder,
-    maxTagPlaceholder = _props$maxTagPlacehol === void 0 ? function (omittedValues) {
-      return "+ ".concat(omittedValues.length === displayValues.length ? omittedValues.length - 1 : omittedValues.length, " ...");
-    } : _props$maxTagPlacehol,
-    showResponsiveSelectedSection = props.showResponsiveSelectedSection;
+    maxTagPlaceholder = props.maxTagPlaceholder,
+    showResponsiveSelectedSection = props.showResponsiveSelectedSection,
+    dropdownRef = props.dropdownRef,
+    suffixIcon = props.suffixIcon;
+  var innerMaxTagPlaceholder = function innerMaxTagPlaceholder(omittedValues) {
+    return "+ ".concat(omittedValues.length === displayValues.length ? omittedValues.length - 1 : omittedValues.length);
+  };
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     showItemIndex = _useState2[0],
@@ -42,9 +45,9 @@ export default function MultipleSelector(props) {
   var customizeRenderSelector = function customizeRenderSelector(value, content, itemDisabled, closable, onClose, isPreview) {
     var onMouseDown = function onMouseDown(e) {
       onPreventMouseDown(e);
-      onToggleOpen(!open);
     };
     return /*#__PURE__*/React.createElement("span", {
+      className: "beta-ald-select-custom-tag-render-wrapper",
       onMouseDown: onMouseDown,
       key: value
     }, tagRender === null || tagRender === void 0 ? void 0 : tagRender({
@@ -93,8 +96,8 @@ export default function MultipleSelector(props) {
     if (displayValues.length === 1) {
       return null;
     }
-    var content = typeof maxTagPlaceholder === 'function' ? maxTagPlaceholder(omittedValues.length === displayValues.length ? omittedValues.slice(1, omittedValues.length) : omittedValues) : maxTagPlaceholder;
-    return typeof tagRender === 'function' ? customizeRenderSelector(undefined, content, false, false, undefined) : defaultRenderSelector({
+    var content = typeof maxTagPlaceholder === 'function' ? maxTagPlaceholder(omittedValues.length === displayValues.length ? omittedValues.slice(1, omittedValues.length) : omittedValues) : innerMaxTagPlaceholder(omittedValues.length === displayValues.length ? omittedValues.slice(1, omittedValues.length) : omittedValues);
+    return typeof maxTagPlaceholder === 'function' ? content : defaultRenderSelector({
       title: content
     }, content, false);
   };
@@ -103,15 +106,16 @@ export default function MultipleSelector(props) {
   };
   var maxHeight = useMemo(function () {
     if (isMultiple(mode)) {
+      var maxRows;
       if (_typeof(mode) === 'object') {
-        var maxRows = mode.maxRows;
-        if (!maxRows) {
-          // 2.5行高+2行间距
-          return 2.5 * tagHeight + 2 * gap;
-        } else {
-          // 总行高+总行间距
-          return maxRows * tagHeight + (maxRows - 1) * gap;
-        }
+        maxRows = mode.maxRows;
+      }
+      if (!maxRows) {
+        // 2.5行高+2行间距
+        return 2.5 * tagHeight + 2 * gap;
+      } else {
+        // 总行高+总行间距
+        return maxRows * tagHeight + (maxRows - 1) * gap;
       }
     }
     return undefined;
@@ -125,6 +129,9 @@ export default function MultipleSelector(props) {
       prefixCls: overflowPrefixCls,
       data: displayValues,
       renderItem: renderItem,
+      className: classNames({
+        'beta-ald-select-selector-overflow-hidden': showItemIndex === -1 && displayValues.length === 1
+      }),
       renderRest: renderRest,
       suffix: null,
       itemKey: itemKey,
@@ -133,7 +140,10 @@ export default function MultipleSelector(props) {
     }), showResponsiveSelectedSection && /*#__PURE__*/React.createElement(MultipleResponsiveSelectedSection, {
       displayValues: displayValues,
       renderItem: renderItem,
-      onToggleOpen: onToggleOpen
+      maxHeight: maxHeight,
+      suffixIcon: suffixIcon,
+      onToggleOpen: onToggleOpen,
+      dropdownRef: dropdownRef
     }));
   }
   return /*#__PURE__*/React.createElement(ScrollArea, {

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

@@ -1,9 +1,11 @@
 import { DisplayValueType, ISelectProps, LabelInValueType } from '../interface';
-import React from 'react';
+import React, { RefObject } from 'react';
+import { RefTriggerProps } from '../SelectTrigger';
 export interface SelectorProps extends ISelectProps {
     displayValues: LabelInValueType[];
     onRemove: (value: DisplayValueType) => void;
     onToggleOpen: (open?: boolean) => void;
     showResponsiveSelectedSection: boolean;
+    dropdownRef: RefObject<RefTriggerProps>;
 }
 export default function Selector(props: SelectorProps): React.JSX.Element;

package/dist/AldSelect/Selector/index.js

@@ -9,10 +9,12 @@ export default function Selector(props) {
     displayValues = props.displayValues,
     onRemove = props.onRemove,
     onToggleOpen = props.onToggleOpen,
-    showResponsiveSelectedSection = props.showResponsiveSelectedSection;
+    showResponsiveSelectedSection = props.showResponsiveSelectedSection,
+    dropdownRef = props.dropdownRef;
   if (isMultiple(mode)) {
     return /*#__PURE__*/React.createElement(MultipleSelector, _extends({}, props, {
       onRemove: onRemove,
+      dropdownRef: dropdownRef,
       onToggleOpen: onToggleOpen,
       showResponsiveSelectedSection: showResponsiveSelectedSection
     }));

package/dist/AldSelect/components/PopupContent.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import { MenuProps } from '../../Menu';
+import { SelectMenuProps } from '../interface';
 export default function PopupContent(props: {
     content: React.ReactNode;
     notFoundContent: React.ReactNode;
     dropdownRender?: (menu: React.ReactNode) => React.ReactNode;
-    menuProps?: MenuProps;
+    menuProps?: SelectMenuProps;
 }): React.JSX.Element;

package/dist/AldSelect/hooks/useDisplayMenu.d.ts

@@ -1,3 +1,2 @@
-import { MenuProps } from '../../Menu';
-import { DefaultOptionType } from '../interface';
-export default function useDisplayMenu(menu: MenuProps, filterOptions?: (inputValue: string, option: DefaultOptionType) => boolean, innerSearchValue?: string): MenuProps;
+import { DefaultOptionType, SelectMenuProps } from '../interface';
+export default function useDisplayMenu(menu: SelectMenuProps, filterOptions?: (inputValue: string, option: DefaultOptionType) => boolean, innerSearchValue?: string): SelectMenuProps;

package/dist/AldSelect/hooks/useOptions.d.ts

@@ -1,11 +1,12 @@
-import type { DefaultOptionType, DraftValueType, RawValueType } from '../interface';
-import { ItemType, MenuProps, SubMenuType } from '../../Menu';
+import * as React from 'react';
+import type { DefaultOptionType, DraftValueType, RawValueType, SelectItemType, SelectMenuItemType, SelectMenuProps } from '../interface';
 export declare function isRawValue(value: DraftValueType): value is RawValueType;
 /**
  * Parse `children` to `options` if `options` is not provided.
  * Then flatten the `options`.
  */
-export default function useOptions<OptionType extends DefaultOptionType>(menu?: MenuProps, options?: OptionType[], value?: DraftValueType): {
-    menu: MenuProps;
-    keyMenuItems: Map<string, ItemType | SubMenuType>;
+export default function useOptions<OptionType extends DefaultOptionType>(menu?: SelectMenuProps, options?: OptionType[], value?: DraftValueType, optionLabelProp?: string): {
+    menu: SelectMenuProps;
+    keyMenuItems: Map<string, SelectItemType>;
+    labelMenuItems: Map<React.ReactNode, SelectMenuItemType>;
 };

package/dist/AldSelect/hooks/useOptions.js

@@ -14,7 +14,7 @@ export function isRawValue(value) {
  * Parse `children` to `options` if `options` is not provided.
  * Then flatten the `options`.
  */
-export default function useOptions(menu, options, value) {
+export default function useOptions(menu, options, value, optionLabelProp) {
   return React.useMemo(function () {
     var selectedKeys = [];
     if (value) {
@@ -35,8 +35,7 @@ export default function useOptions(menu, options, value) {
       selectedKeys: selectedKeys
     }) : convertOptionsToMenu(options || [], selectedKeys);
     var keyMenuItems = new Map();
-    // const labelMenuItems = new Map<React.ReactNode, MenuItemType>();
-
+    var labelMenuItems = new Map();
     function dig(menuItems) {
       // for loop to speed up collection speed
       for (var i = 0; i < menuItems.length; i += 1) {
@@ -49,15 +48,17 @@ export default function useOptions(menu, options, value) {
           continue;
         } else {
           keyMenuItems.set(menuItem.key, menuItem);
-          // labelMenuItems.set(menuItem.label, menuItem);
+          if (optionLabelProp) {
+            labelMenuItems.set(menuItem[optionLabelProp], menuItem);
+          }
         }
       }
     }
-
     dig(mergedMenu.items || []);
     return {
       menu: mergedMenu,
-      keyMenuItems: keyMenuItems
+      keyMenuItems: keyMenuItems,
+      labelMenuItems: labelMenuItems
     };
-  }, [options, menu, value]);
+  }, [value, menu, options, optionLabelProp]);
 }

package/dist/AldSelect/index.js

@@ -34,7 +34,8 @@ export default /*#__PURE__*/forwardRef(function AldSelect(props, ref) {
     onDeselect = props.onDeselect,
     labelInValue = props.labelInValue,
     filterOption = props.filterOption,
-    searchValue = props.searchValue;
+    searchValue = props.searchValue,
+    optionLabelProp = props.optionLabelProp;
 
   // =========================== Values ===========================
   var _useMergedState = useMergedState(defaultValue, {
@@ -67,14 +68,20 @@ export default /*#__PURE__*/forwardRef(function AldSelect(props, ref) {
       if (isRawValue(val)) {
         rawValue = val;
       } else {
+        var _ref;
         rawLabel = val.label;
-        rawValue = val.value;
+        // @ts-ignore val.key是为了兼容存在key的情况
+        rawValue = (_ref = val.value) !== null && _ref !== void 0 ? _ref : val.key;
       }
       var menuItem = keyMenuItems.get(rawValue.toString());
       if (menuItem) {
         // Fill missing props
         if (rawLabel === undefined) {
-          rawLabel = menuItem.label;
+          if (optionLabelProp) {
+            rawLabel = menuItem[optionLabelProp] || menuItem.label;
+          } else {
+            rawLabel = menuItem.label;
+          }
         }
         rawDisabled = menuItem.disabled;
       }
@@ -84,7 +91,7 @@ export default /*#__PURE__*/forwardRef(function AldSelect(props, ref) {
         disabled: rawDisabled
       };
     });
-  }, [keyMenuItems]);
+  }, [keyMenuItems, optionLabelProp]);
 
   // Merged value with LabelValueType
   var rawLabeledValues = React.useMemo(function () {

package/dist/AldSelect/interface.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { PlacementType } from '../Dropdown';
-import { MenuProps } from '../Menu';
+import { ItemType, MenuDividerType, MenuHeaderType, MenuProps, SubMenuType } from '../Menu';
 import { CustomTagProps, Mode } from './BaseSelect';
 type ArrayElementType<T> = T extends (infer E)[] ? E : T;
 export interface ISelectProps<ValueType = any, OptionType extends BaseOptionType = DefaultOptionType> {
@@ -24,13 +24,13 @@ export interface ISelectProps<ValueType = any, OptionType extends BaseOptionType
     placement?: PlacementType;
     labelInValue?: boolean;
     options?: OptionType[];
-    menu?: MenuProps;
+    menu?: SelectMenuProps;
     value?: ValueType | null;
     defaultValue?: ValueType | null;
     onChange?: (value: ValueType, option: OptionType | OptionType[]) => void;
-    placeholder?: string;
+    placeholder?: React.ReactNode;
     onClear?: () => void;
-    dropdownRender?: (menu: React.ReactNode) => React.ReactNode;
+    dropdownRender?: (menu: React.ReactElement) => React.ReactElement;
     dropdownStyle?: React.CSSProperties;
     overlayStyle?: React.CSSProperties;
     style?: React.CSSProperties;
@@ -38,7 +38,7 @@ export interface ISelectProps<ValueType = any, OptionType extends BaseOptionType
     onOpenChange?: (open: boolean) => void;
     getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
     onInputKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-    popupMatchSelectWidth?: boolean;
+    popupMatchSelectWidth?: boolean | number;
     onSelect?: SelectHandler<ArrayElementType<ValueType>, OptionType>;
     onDeselect?: SelectHandler<ArrayElementType<ValueType>, OptionType>;
     notFoundContent?: React.ReactNode;
@@ -46,6 +46,7 @@ export interface ISelectProps<ValueType = any, OptionType extends BaseOptionType
     tagRender?: (props: CustomTagProps, isPreview?: boolean) => React.ReactNode;
     maxTagPlaceholder?: React.ReactNode | ((omittedValues: DisplayValueType[]) => React.ReactNode);
     onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    optionLabelProp?: string;
 }
 export interface BaseOptionType {
     disabled?: boolean;
@@ -89,4 +90,11 @@ export interface DefaultOptionType extends BaseOptionType {
     value?: string | number | null;
     children?: Omit<DefaultOptionType, 'children'>[];
 }
+export interface SelectItemType extends ItemType {
+    [key: string]: any;
+}
+export type SelectMenuItemType = SelectItemType | MenuDividerType | SubMenuType | MenuHeaderType;
+export interface SelectMenuProps extends Omit<MenuProps, 'items'> {
+    items: SelectMenuItemType[];
+}
 export {};

package/dist/AldSelect/style/index.less

@@ -46,7 +46,7 @@
     }
 
     .beta-ald-select-selector:not(.beta-ald-select-selector-multiple-default) {
-      min-width: 0;
+      min-width: 10px;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
@@ -55,17 +55,19 @@
     .beta-ald-select-selector-multiple-responsive {
       display: flex;
       align-items: center;
-      line-height: 0;
+      // line-height: 0;
       gap: 4px;
 
       .beta-ald-select-selector-overflow {
-        width: 100%;
-        flex-grow: 1;
-        flex-shrink: 1;
+        max-width: 100%;
         display: flex;
         gap: 4px;
+        flex: auto;
 
         .beta-ald-select-selector-overflow-item {
+          display: flex;
+          align-items: center;
+
           .ald-tag-content {
             display: flex;
             align-items: center;
@@ -74,9 +76,18 @@
             text-overflow: ellipsis;
             white-space: nowrap;
           }
+
+          .beta-ald-select-custom-tag-render-wrapper {
+            display: flex;
+            align-items: center;
+          }
         }
       }
 
+      .beta-ald-select-selector-overflow-hidden {
+        display: none;
+      }
+
       .beta-ald-select-selector-overflow-item-first {
         display: flex;
         min-width: 32px;
@@ -84,6 +95,23 @@
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
+
+        > div,
+        > span {
+          min-width: 0;
+          flex: 1;
+        }
+
+        .beta-ald-select-custom-tag-render-wrapper {
+          display: flex;
+          align-items: center;
+
+          > div,
+          > span {
+            min-width: 0;
+            flex: 1;
+          }
+        }
       }
 
       .beta-ald-select-selector-multiple-responsive-selected-section {
@@ -91,13 +119,17 @@
         position: absolute;
         top: -1px;
         left: -1px;
-        display: flex;
-        gap: 4px;
-        flex-wrap: wrap;
-        align-items: flex-start;
         border-width: 1px;
         border-style: solid;
         background-color: #fff;
+        z-index: 1;
+
+        .beta-ald-select-selector-multiple-responsive-selected-section-tags {
+          align-items: flex-start;
+          display: flex !important;
+          flex-wrap: wrap;
+          gap: 4px;
+        }
       }
     }
 
@@ -124,7 +156,7 @@
 }
 
 .beta-ald-select-popup-container.ald-dropdown-overlay {
-  min-width: 194px;
+  min-width: 0;
 
   .beta-ald-select-popup {
     width: 100%;
@@ -137,6 +169,7 @@
     .ald-menu {
       .szh-menu {
         border-radius: 0;
+        min-width: 0;
       }
     }
   }

package/dist/AldSelect/utils/commonUtil.d.ts

@@ -1,8 +1,7 @@
 /// <reference types="react" />
-import { MenuProps } from '../../Menu';
-import { DefaultOptionType } from '../interface';
+import { DefaultOptionType, SelectMenuProps } from '../interface';
 export declare function toArray<T>(value: T | T[]): T[];
 export declare const isClient: false | HTMLElement;
 /** Is client side and not jsdom */
 export declare const isBrowserClient: false | HTMLElement;
-export declare function convertOptionsToMenu(options: DefaultOptionType[], selectedKeys: React.Key[]): MenuProps;
+export declare function convertOptionsToMenu(options: DefaultOptionType[], selectedKeys: React.Key[]): SelectMenuProps;