@aloudata/aloudata-design 2.13.17 → 2.14.0

package/dist/AldSelect/BaseSelect.d.ts

@@ -0,0 +1,70 @@
+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';
+export type RenderNode = React.ReactNode | ((props: any) => React.ReactNode);
+export type RenderDOMFunc = (props: any) => HTMLElement;
+export type Mode = 'multiple' | {
+    type: 'multiple';
+    responsive?: boolean;
+    maxRows?: number;
+};
+export type RawValueType = string | number;
+export type CustomTagProps = {
+    label: React.ReactNode;
+    value: any;
+    disabled: boolean;
+    onClose: (event?: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    closable: boolean;
+};
+export interface BaseSelectPrivateProps {
+    omitDomProps?: string[];
+    displayValues: LabelInValueType[];
+    onDisplayValuesChange: (values: LabelInValueType[], info: {
+        type: 'add' | 'remove' | 'clear';
+        values: LabelInValueType[];
+    }) => void;
+    /** Current dropdown list active item string value */
+    activeValue?: string;
+    /** Link search input with target element */
+    activeDescendantId?: string;
+    onActiveValueChange?: (value: string | null) => void;
+}
+export type BaseSelectPropsWithoutPrivate = Omit<BaseSelectProps, keyof BaseSelectPrivateProps>;
+export interface BaseSelectProps extends BaseSelectPrivateProps, ISelectProps, React.AriaAttributes {
+    className?: string;
+    style?: React.CSSProperties;
+    notFoundContent?: React.ReactNode;
+    placeholder?: string;
+    onClear?: () => void;
+    innerSearchValue?: string;
+    setInnerSearchValue?: (value: string) => void;
+    displayMenu?: MenuProps;
+    status?: 'success' | 'error';
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onOptionSelect?: (val: RawValueType) => void;
+    allowClear?: boolean;
+    showArrow?: boolean;
+    suffixIcon?: React.ReactNode;
+    dropdownRender?: (menu: React.ReactNode) => React.ReactNode;
+    dropdownAlign?: AlignType;
+    placement?: PlacementType;
+    getPopupContainer?: RenderDOMFunc;
+    onBlur?: React.FocusEventHandler<HTMLElement>;
+    onFocus?: React.FocusEventHandler<HTMLElement>;
+    onKeyUp?: React.KeyboardEventHandler<HTMLDivElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+    onMouseDown?: React.MouseEventHandler<HTMLDivElement>;
+    onPopupScroll?: React.UIEventHandler<HTMLDivElement>;
+    onInputKeyDown?: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+}
+export declare function isMultiple(mode?: Mode): boolean;
+export declare function isResponsive(mode?: Mode): boolean | undefined;
+declare const BaseSelect: React.ForwardRefExoticComponent<BaseSelectProps & React.RefAttributes<BaseSelectRef>>;
+export default BaseSelect;

package/dist/AldSelect/BaseSelect.js

@@ -0,0 +1,236 @@
+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; }
+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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+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 _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';
+import classNames from 'classnames';
+import prefixCls from "../_utils/prefixCls";
+import SelectTrigger from "./SelectTrigger";
+import Selector from "./Selector";
+import _ from 'lodash';
+import { useContext, useRef, useState } from 'react';
+import { FormItemInputContext } from 'antd/lib/form/context';
+import getWidthStyle from "./utils/getWidthStyle";
+import Suffix from "./components/Suffix";
+import SizeContext from "../ConfigProvider/sizeContext";
+import { ConfigContext } from "../ConfigProvider";
+import { useCompactItemContext } from 'antd/lib/space/Compact';
+export function isMultiple(mode) {
+  return !!mode;
+}
+export function isResponsive(mode) {
+  return _typeof(mode) === 'object' && (mode === null || mode === void 0 ? void 0 : mode.responsive);
+}
+var BaseSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _setClassNames;
+  var id = props.id,
+    className = props.className,
+    displayValues = props.displayValues,
+    onDisplayValuesChange = props.onDisplayValuesChange,
+    displayMenu = props.displayMenu,
+    notFoundContent = props.notFoundContent,
+    _onClear = props.onClear,
+    width = props.width,
+    mode = props.mode,
+    customStatus = props.status,
+    onOptionSelect = props.onOptionSelect,
+    onClick = props.onClick,
+    customSize = props.size,
+    _props$borderLess = props.borderLess,
+    borderLess = _props$borderLess === void 0 ? false : _props$borderLess,
+    disabled = props.disabled,
+    placeholder = props.placeholder,
+    open = props.open,
+    defaultOpen = props.defaultOpen,
+    onOpenChange = props.onOpenChange,
+    showSearch = props.showSearch,
+    innerSearchValue = props.innerSearchValue,
+    setInnerSearchValue = props.setInnerSearchValue,
+    allowClear = props.allowClear,
+    _props$showArrow = props.showArrow,
+    showArrow = _props$showArrow === void 0 ? true : _props$showArrow,
+    prefix = props.prefix,
+    suffixIcon = props.suffixIcon,
+    dropdownRender = props.dropdownRender,
+    overlayStyle = props.overlayStyle,
+    dropdownStyle = props.dropdownStyle,
+    _props$popupMatchSele = props.popupMatchSelectWidth,
+    popupMatchSelectWidth = _props$popupMatchSele === void 0 ? true : _props$popupMatchSele,
+    placement = props.placement,
+    popupClassName = props.popupClassName;
+  var setClassNames = prefixCls('select');
+  var selectRef = useRef(null);
+  var widthStyle = getWidthStyle(width);
+  var isResponsiveMode = isResponsive(mode);
+  var isMultipleMode = isMultiple(mode);
+  /** Used for component focused management */
+  var contentSize = useContext(SizeContext);
+  var _React$useContext = React.useContext(ConfigContext),
+    direction = _React$useContext.direction;
+  // ===================== Compact Item =====================
+  var _useCompactItemContex = useCompactItemContext('ald-select', direction),
+    compactSize = _useCompactItemContex.compactSize,
+    compactItemClassnames = _useCompactItemContex.compactItemClassnames;
+  var size = compactSize || customSize || contentSize || 'middle';
+  var _useContext = useContext(FormItemInputContext),
+    contextStatus = _useContext.status;
+  var mergedStatus = customStatus || contextStatus || undefined;
+  // =========================== Imperative ===========================
+  React.useImperativeHandle(ref, function () {
+    return {
+      focus: function focus() {
+        return setFocus(true);
+      },
+      blur: function blur() {
+        return setFocus(false);
+      },
+      open: function open() {
+        return onToggleOpen(true);
+      },
+      close: function close() {
+        onToggleOpen(false);
+      }
+    };
+  });
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    focus = _useState2[0],
+    setFocus = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isHover = _useState4[0],
+    setIsHover = _useState4[1];
+  // ============================== Open ==============================
+  var _useMergedState = useMergedState(false, {
+      defaultValue: defaultOpen,
+      value: open
+    }),
+    _useMergedState2 = _slicedToArray(_useMergedState, 2),
+    innerOpen = _useMergedState2[0],
+    setInnerOpen = _useMergedState2[1];
+  var mergedOpen = innerOpen;
+  var onToggleOpen = React.useCallback(function (newOpen) {
+    var nextOpen = newOpen !== undefined ? newOpen : !mergedOpen;
+    if (!nextOpen) {
+      setShowResponsiveSelectedSection(false);
+      setInnerSearchValue === null || setInnerSearchValue === void 0 ? void 0 : setInnerSearchValue('');
+    }
+    if (mergedOpen !== nextOpen && !disabled) {
+      setInnerOpen(nextOpen);
+      onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(nextOpen);
+    }
+  }, [mergedOpen, disabled, setInnerSearchValue, setInnerOpen, onOpenChange]);
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    showResponsiveSelectedSection = _useState6[0],
+    setShowResponsiveSelectedSection = _useState6[1];
+
+  // ============================ Selector ============================
+  var onSelectorRemove = function onSelectorRemove(val) {
+    var newValues = displayValues.filter(function (i) {
+      return i !== val;
+    });
+    onDisplayValuesChange(newValues, {
+      type: 'remove',
+      values: [{
+        label: val.label,
+        value: val.value
+      }]
+    });
+  };
+  var mergedClassName = classNames(setClassNames('beta-ald-select', size, (_setClassNames = {
+    active: mergedOpen || focus,
+    borderless: borderLess,
+    disabled: disabled
+  }, _defineProperty(_setClassNames, "".concat(mergedStatus), !!mergedStatus), _defineProperty(_setClassNames, 'multiple-responsive', isResponsiveMode), _defineProperty(_setClassNames, 'multiple-default', isMultipleMode && !isResponsiveMode), _setClassNames)), className, compactItemClassnames);
+  var showMenu = React.useMemo(function () {
+    if (!displayMenu) {
+      return undefined;
+    }
+    return _objectSpread(_objectSpread({}, displayMenu), {}, {
+      onClick: function onClick(info) {
+        var _displayMenu$onClick;
+        displayMenu === null || displayMenu === void 0 ? void 0 : (_displayMenu$onClick = displayMenu.onClick) === null || _displayMenu$onClick === void 0 ? void 0 : _displayMenu$onClick.call(displayMenu, info);
+        if (displayMenu && !isMultipleMode) {
+          onToggleOpen(false);
+        }
+        setIsHover(false);
+        onOptionSelect === null || onOptionSelect === void 0 ? void 0 : onOptionSelect(info.key);
+      }
+    });
+  }, [displayMenu, isMultipleMode, onToggleOpen, onOptionSelect]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: mergedClassName,
+    style: widthStyle,
+    ref: selectRef,
+    id: id,
+    onClick: onClick,
+    onMouseEnter: function onMouseEnter() {
+      setIsHover(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      setIsHover(false);
+    }
+  }, /*#__PURE__*/React.createElement(SelectTrigger, {
+    open: !!mergedOpen,
+    notFoundContent: notFoundContent,
+    menu: showMenu,
+    showSearch: showSearch,
+    searchValue: innerSearchValue,
+    setInnerSearchValue: setInnerSearchValue,
+    popupMatchSelectWidth: popupMatchSelectWidth,
+    overlayClassName: popupClassName,
+    dropdownRender: dropdownRender,
+    overlayStyle: overlayStyle || dropdownStyle,
+    placement: placement,
+    onOpenChange: function onOpenChange(open) {
+      if (isResponsiveMode) {
+        if (!mergedOpen && !showResponsiveSelectedSection && displayValues.length > 0) {
+          setShowResponsiveSelectedSection(true);
+        } else {
+          onToggleOpen(open);
+        }
+      } else {
+        onToggleOpen(open);
+      }
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: setClassNames('trigger')
+  }, prefix && /*#__PURE__*/React.createElement("div", {
+    className: setClassNames('prefix')
+  }, prefix), _.isEmpty(displayValues) && /*#__PURE__*/React.createElement("div", {
+    className: setClassNames('placeholder')
+  }, placeholder), !_.isEmpty(displayValues) && /*#__PURE__*/React.createElement(Selector, _extends({}, props, {
+    size: size,
+    displayValues: displayValues,
+    onToggleOpen: onToggleOpen,
+    onRemove: onSelectorRemove,
+    showResponsiveSelectedSection: showResponsiveSelectedSection
+  })))), /*#__PURE__*/React.createElement(Suffix, {
+    showArrow: showArrow,
+    allowClear: allowClear,
+    isHover: isHover,
+    onClear: function onClear() {
+      onToggleOpen(false);
+      onDisplayValuesChange([], {
+        type: 'clear',
+        values: displayValues
+      });
+      _onClear === null || _onClear === void 0 ? void 0 : _onClear();
+    },
+    isActive: innerOpen,
+    icon: suffixIcon,
+    displayValues: displayValues
+  }));
+});
+export default BaseSelect;

package/dist/AldSelect/SelectTrigger.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { ScrollTo } from 'rc-virtual-list/lib/List';
+import { DropdownProps } from '..';
+import { SelectOptionType } from '../Select';
+export interface RefTriggerProps {
+    getPopupElement: () => HTMLDivElement | null;
+}
+export interface RefSelectorProps {
+    focus: (options?: FocusOptions) => void;
+    blur: () => void;
+    scrollTo?: ScrollTo;
+}
+export interface SelectTriggerProps extends DropdownProps {
+    open: boolean;
+    notFoundContent?: React.ReactNode;
+    popupMatchSelectWidth?: boolean;
+    showSearch?: boolean;
+    searchValue?: string;
+    setInnerSearchValue?: (value: string) => void;
+    filterOption?: (inputValue: string, option: SelectOptionType) => boolean;
+}
+declare const RefSelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<RefTriggerProps>>;
+export default RefSelectTrigger;

package/dist/AldSelect/SelectTrigger.js

@@ -0,0 +1,73 @@
+var _excluded = ["overlayStyle", "disabled", "open", "children", "dropdownRender", "getPopupContainer", "onOpenChange", "showSearch", "searchValue", "setInnerSearchValue", "menu", "overlayClassName", "popupMatchSelectWidth", "notFoundContent"];
+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 _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 React, { useCallback } from 'react';
+import Dropdown from "../Dropdown";
+import classnames from 'classnames';
+import { Empty } from '..';
+import SearchBox from "./components/SearchBox";
+import PopupContent from "./components/PopupContent";
+var RefSelectTrigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var overlayStyle = props.overlayStyle,
+    disabled = props.disabled,
+    open = props.open,
+    children = props.children,
+    dropdownRender = props.dropdownRender,
+    getPopupContainer = props.getPopupContainer,
+    _onOpenChange = props.onOpenChange,
+    showSearch = props.showSearch,
+    searchValue = props.searchValue,
+    setInnerSearchValue = props.setInnerSearchValue,
+    menuProps = props.menu,
+    overlayClassName = props.overlayClassName,
+    popupMatchSelectWidth = props.popupMatchSelectWidth,
+    _props$notFoundConten = props.notFoundContent,
+    notFoundContent = _props$notFoundConten === void 0 ? /*#__PURE__*/React.createElement(Empty, {
+      size: "small"
+    }) : _props$notFoundConten,
+    restProps = _objectWithoutProperties(props, _excluded);
+
+  // ======================= Ref =======================
+  var popupRef = React.useRef(null);
+  React.useImperativeHandle(ref, function () {
+    return {
+      getPopupElement: function getPopupElement() {
+        return popupRef.current;
+      }
+    };
+  });
+  var customDropdownRender = useCallback(function (menu) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "beta-ald-select-popup",
+      ref: popupRef
+    }, /*#__PURE__*/React.createElement(SearchBox, {
+      showSearch: showSearch,
+      value: searchValue,
+      onChange: function onChange(value) {
+        setInnerSearchValue === null || setInnerSearchValue === void 0 ? void 0 : setInnerSearchValue(value);
+      }
+    }), /*#__PURE__*/React.createElement(PopupContent, {
+      content: menu,
+      notFoundContent: notFoundContent,
+      dropdownRender: dropdownRender,
+      menuProps: menuProps
+    }));
+  }, [dropdownRender, menuProps, notFoundContent, searchValue, setInnerSearchValue, showSearch]);
+  return /*#__PURE__*/React.createElement(Dropdown, _extends({}, restProps, {
+    disabled: disabled,
+    open: open,
+    menu: menuProps,
+    popupMatchTriggerWidth: popupMatchSelectWidth,
+    overlayStyle: overlayStyle,
+    overlayClassName: classnames('beta-ald-select-popup-container', overlayClassName),
+    autoUpdatePos: true,
+    dropdownRender: customDropdownRender,
+    getPopupContainer: getPopupContainer,
+    onOpenChange: function onOpenChange(o) {
+      _onOpenChange === null || _onOpenChange === void 0 ? void 0 : _onOpenChange(o);
+    }
+  }), children);
+});
+RefSelectTrigger.displayName = 'SelectTrigger';
+export default RefSelectTrigger;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { DisplayValueType } from '../interface';
+export default function MultipleResponsiveSelectedSection(params: {
+    displayValues: DisplayValueType[];
+    renderItem: (valueItem: DisplayValueType) => React.JSX.Element | null;
+    onToggleOpen: (open: boolean) => void;
+}): React.JSX.Element;

package/dist/AldSelect/Selector/MultipleResponsiveSelectedSection.js

@@ -0,0 +1,32 @@
+import React, { useEffect, useRef } from 'react';
+export default function MultipleResponsiveSelectedSection(params) {
+  var displayValues = params.displayValues,
+    renderItem = params.renderItem,
+    onToggleOpen = params.onToggleOpen;
+  var multipleSelectedSectionRef = useRef(null);
+  useEffect(function () {
+    function getSelect() {
+      var _multipleSelectedSect, _multipleSelectedSect2, _multipleSelectedSect3;
+      var select = (_multipleSelectedSect = multipleSelectedSectionRef.current) === null || _multipleSelectedSect === void 0 ? void 0 : (_multipleSelectedSect2 = _multipleSelectedSect.parentElement) === null || _multipleSelectedSect2 === void 0 ? void 0 : (_multipleSelectedSect3 = _multipleSelectedSect2.parentElement) === null || _multipleSelectedSect3 === void 0 ? void 0 : _multipleSelectedSect3.parentElement;
+      if (select && select.classList.contains('beta-ald-select')) {
+        return select;
+      }
+      return null;
+    }
+    function close(e) {
+      var target = e.target;
+      var select = getSelect();
+      if (select && target.contains(select)) {
+        onToggleOpen(false);
+      }
+    }
+    document.addEventListener('click', close);
+    return function () {
+      document.removeEventListener('click', close);
+    };
+  }, [onToggleOpen]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: multipleSelectedSectionRef,
+    className: "beta-ald-select-selector-multiple-responsive-selected-section"
+  }, displayValues.map(renderItem));
+}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SelectorProps } from './index';
+import { DisplayValueType } from '../interface';
+import { CustomTagProps } from '../BaseSelect';
+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);
+}
+export default function MultipleSelector(props: MultipleSelectorProps): React.JSX.Element;
+export {};

package/dist/AldSelect/Selector/MultipleSelector.js

@@ -0,0 +1,148 @@
+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); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+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; }
+import React, { useMemo, useState } from 'react';
+import Tag from "../../Tag";
+import { isMultiple, isResponsive } from "../BaseSelect";
+import ScrollArea from "../../ScrollArea";
+import _ from 'lodash';
+import Overflow from 'rc-overflow';
+import MultipleResponsiveSelectedSection from "./MultipleResponsiveSelectedSection";
+var overflowPrefixCls = 'beta-ald-select-selector-overflow';
+var tagHeight = 20;
+var gap = 4;
+var onPreventMouseDown = function onPreventMouseDown(event) {
+  event.preventDefault();
+  event.stopPropagation();
+};
+function itemKey(value) {
+  var _value$key;
+  return ((_value$key = value.key) !== null && _value$key !== void 0 ? _value$key : value.value) || '';
+}
+export default function MultipleSelector(props) {
+  var displayValues = props.displayValues,
+    tagRender = props.tagRender,
+    onRemove = props.onRemove,
+    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;
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    showItemIndex = _useState2[0],
+    setShowItemIndex = _useState2[1];
+  var customizeRenderSelector = function customizeRenderSelector(value, content, itemDisabled, closable, onClose, isPreview) {
+    var onMouseDown = function onMouseDown(e) {
+      onPreventMouseDown(e);
+      onToggleOpen(!open);
+    };
+    return /*#__PURE__*/React.createElement("span", {
+      onMouseDown: onMouseDown,
+      key: value
+    }, tagRender === null || tagRender === void 0 ? void 0 : tagRender({
+      label: content,
+      value: value,
+      disabled: itemDisabled,
+      closable: isPreview ? false : closable !== null && closable !== void 0 ? closable : false,
+      onClose: onClose !== null && onClose !== void 0 ? onClose : function () {}
+    }, isPreview));
+  };
+  var defaultRenderSelector = function defaultRenderSelector(item, content, itemDisabled, closable, _onClose, isPreview) {
+    return /*#__PURE__*/React.createElement(Tag, {
+      disabled: itemDisabled,
+      key: item === null || item === void 0 ? void 0 : item.value,
+      size: "small",
+      closable: isPreview ? false : closable,
+      onClose: function onClose(e) {
+        onPreventMouseDown(e);
+        _onClose === null || _onClose === void 0 ? void 0 : _onClose(e);
+      }
+    }, content);
+  };
+  var isResponsiveMode = isResponsive(mode);
+  var renderItem = function renderItem(valueItem) {
+    var itemDisabled = valueItem.disabled,
+      label = valueItem.label,
+      value = valueItem.value;
+    var closable = !disabled && !itemDisabled;
+    var isPreview = !showResponsiveSelectedSection;
+    if (!isResponsiveMode) {
+      isPreview = false;
+    }
+    var displayLabel = label;
+    var onClose = function onClose(event) {
+      if (event) {
+        event.stopPropagation();
+      }
+      onRemove(valueItem);
+    };
+    if (_.isNil(value)) {
+      return null;
+    }
+    return typeof tagRender === 'function' ? customizeRenderSelector(value, displayLabel, !!itemDisabled, closable, onClose, isPreview) : defaultRenderSelector(valueItem, displayLabel, !!itemDisabled, closable, onClose, isPreview);
+  };
+  var renderRest = function renderRest(omittedValues) {
+    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({
+      title: content
+    }, content, false);
+  };
+  var onVisibleChange = function onVisibleChange(visibleCount) {
+    setShowItemIndex(visibleCount);
+  };
+  var maxHeight = useMemo(function () {
+    if (isMultiple(mode)) {
+      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;
+        }
+      }
+    }
+    return undefined;
+  }, [mode]);
+  if (isResponsiveMode) {
+    return /*#__PURE__*/React.createElement("div", {
+      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, {
+      prefixCls: overflowPrefixCls,
+      data: displayValues,
+      renderItem: renderItem,
+      renderRest: renderRest,
+      suffix: null,
+      itemKey: itemKey,
+      maxCount: "responsive",
+      onVisibleChange: onVisibleChange
+    }), showResponsiveSelectedSection && /*#__PURE__*/React.createElement(MultipleResponsiveSelectedSection, {
+      displayValues: displayValues,
+      renderItem: renderItem,
+      onToggleOpen: onToggleOpen
+    }));
+  }
+  return /*#__PURE__*/React.createElement(ScrollArea, {
+    innerClassName: "beta-ald-select-selector-multiple-default-inner",
+    className: "beta-ald-select-selector beta-ald-select-selector-multiple-default",
+    innerStyle: {
+      maxHeight: maxHeight
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "beta-ald-select-selector-multiple-default-tags"
+  }, displayValues.map(renderItem)));
+}

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

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

package/dist/AldSelect/Selector/index.js

@@ -0,0 +1,25 @@
+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 prefixCls from "../../_utils/prefixCls";
+import React from 'react';
+import MultipleSelector from "./MultipleSelector";
+import { isMultiple } from "../BaseSelect";
+export default function Selector(props) {
+  var classNames = prefixCls('select-selector');
+  var mode = props.mode,
+    displayValues = props.displayValues,
+    onRemove = props.onRemove,
+    onToggleOpen = props.onToggleOpen,
+    showResponsiveSelectedSection = props.showResponsiveSelectedSection;
+  if (isMultiple(mode)) {
+    return /*#__PURE__*/React.createElement(MultipleSelector, _extends({}, props, {
+      onRemove: onRemove,
+      onToggleOpen: onToggleOpen,
+      showResponsiveSelectedSection: showResponsiveSelectedSection
+    }));
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames('beta-ald-select-selector')
+  }, displayValues.map(function (item) {
+    return item.label;
+  }));
+}

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

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