@qsxy/element-plus-react 1.0.2 → 2.0.0

package/dist/Select/SelectCore.js

@@ -1,20 +1,24 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23;
-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); }
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import classNames from 'classnames';
-import React, { forwardRef, useImperativeHandle } from 'react';
+import React, { Children, forwardRef, useImperativeHandle, useMemo } from 'react';
 import Icon from "../Icon/Icon";
 import Popper from "../Popper/Popper";
 import Tag from "../Tag/Tag";
 import Tooltip from "../Tooltip/Tooltip";
 import { isEmpty, isNotEmpty } from "../Util";
+import { ValidateComponentsMap } from "../Util/icons";
+import { useClassNames } from "../hooks";
 import { useCalcInputWidth } from "../hooks/useCalcInputWidth";
+import Option from "./Option";
+import OptionGroup from "./OptionGroup";
 import SelectDropdown from "./SelectDropdown";
 import useSelect from "./useSelect";
 var SelectCore = /*#__PURE__*/forwardRef(function (props, ref) {
@@ -51,6 +55,7 @@ var SelectCore = /*#__PURE__*/forwardRef(function (props, ref) {
     value = _props.value,
     setValue = _props.setValue,
     disabled = _props.disabled,
+    plain = _props.plain,
     size = _props.size,
     multiValue = _props.multiValue,
     multiOptionData = _props.multiOptionData,
@@ -72,14 +77,54 @@ var SelectCore = /*#__PURE__*/forwardRef(function (props, ref) {
     handleCompositionStart = _props.handleCompositionStart,
     handleCompositionUpdate = _props.handleCompositionUpdate,
     handleCompositionEnd = _props.handleCompositionEnd,
-    tag = _props.tag;
+    tag = _props.tag,
+    cachedOptions = _props.cachedOptions,
+    aliasProps = _props.aliasProps,
+    options = _props.options,
+    validateIcon = _props.validateIcon,
+    statusIcon = _props.statusIcon,
+    validateState = _props.validateState;
   var b = nsSelect.b,
     e = nsSelect.e,
     m = nsSelect.m,
     is = nsSelect.is;
+  var nsInput = useClassNames('input');
   var _useCalcInputWidth = useCalcInputWidth(),
     calculatorRef = _useCalcInputWidth.calculatorRef,
     inputStyle = _useCalcInputWidth.inputStyle;
+  var optionChilds = useMemo(function () {
+    if (Children.count(props.children) > 0) {
+      return props.children;
+    }
+    if (options.length > 0) {
+      var radios = options.map(function (item) {
+        var _item$aliasProps$opti;
+        if (((_item$aliasProps$opti = item[aliasProps.options]) === null || _item$aliasProps$opti === void 0 ? void 0 : _item$aliasProps$opti.length) > 0) {
+          return /*#__PURE__*/React.createElement(OptionGroup, {
+            key: item[aliasProps.value],
+            label: item[aliasProps.label],
+            disabled: item[aliasProps.disabled]
+          }, item[aliasProps.options].map(function (child) {
+            return /*#__PURE__*/React.createElement(Option, {
+              key: child[aliasProps.value],
+              value: child[aliasProps.value],
+              label: child[aliasProps.label],
+              disabled: child[aliasProps.disabled],
+              data: child[aliasProps.data]
+            });
+          }));
+        }
+        return /*#__PURE__*/React.createElement(Option, {
+          key: item[aliasProps.value],
+          value: item[aliasProps.value],
+          label: item[aliasProps.label],
+          disabled: item[aliasProps.disabled],
+          data: item[aliasProps.data]
+        });
+      });
+      return radios;
+    }
+  }, [options, props.children, aliasProps.data, aliasProps.disabled, aliasProps.label, aliasProps.options, aliasProps.value]);
   useImperativeHandle(ref, function () {
     return {
       popperInstRef: popperInstRef,
@@ -89,7 +134,9 @@ var SelectCore = /*#__PURE__*/forwardRef(function (props, ref) {
       setValue: setValue,
       onClear: onClear,
       clear: onClear,
-      setVisible: setVisible
+      setVisible: setVisible,
+      cachedOptions: cachedOptions,
+      onChoose: onChoose
     };
   });
   return /*#__PURE__*/React.createElement("div", {
@@ -108,9 +155,10 @@ var SelectCore = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: wrapperRef,
     className: classNames(e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["wrapper"]))), is({
       disabled: disabled,
-      filterable: filterable
+      filterable: filterable,
+      plain: plain
     })),
-    style: props.style,
+    style: append || prepend ? props.style : {},
     onClick: toggleMenu
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames(e(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["selection"]))), is({
@@ -203,8 +251,6 @@ var SelectCore = /*#__PURE__*/forwardRef(function (props, ref) {
     onBlur: function onBlur() {
       return setIsFocused(false);
     }
-    // error={error}
-    // warning={warning}
     // style={multiple ? { height: inputHeight } : {}}
     // suffix={<Icon prefix="fal" name="angle-down" rotate={visible ? 180 : null} onClick={toggleMenu} />}
   }), filterable ? /*#__PURE__*/React.createElement("span", {
@@ -215,7 +261,7 @@ var SelectCore = /*#__PURE__*/forwardRef(function (props, ref) {
     className: classNames(e(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["selected-item"]))), e(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["placeholder"]))), is({
       transparent: isEmpty(label) || visible && !inputValue
     }))
-  }, isNotEmpty(value) && typeof value === 'string' && labelFormat ? labelFormat === null || labelFormat === void 0 ? void 0 : labelFormat(-1, value, placeholder) : /*#__PURE__*/React.createElement("span", null, placeholder))), /*#__PURE__*/React.createElement("div", {
+  }, isNotEmpty(value) && typeof value === 'string' && labelFormat ? labelFormat === null || labelFormat === void 0 ? void 0 : labelFormat(-1, value, placeholder) : /*#__PURE__*/React.createElement("span", null, placeholder))), !plain && /*#__PURE__*/React.createElement("div", {
     ref: suffixWrapperRef,
     className: classNames(e(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["suffix"]))), is(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["hidden-clear"]))))
   }, iconComponent ? /*#__PURE__*/React.createElement(Icon, {
@@ -227,10 +273,12 @@ var SelectCore = /*#__PURE__*/forwardRef(function (props, ref) {
     name: clearIcon,
     className: classNames(e(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["caret"]))), e(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["icon"]))), e(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["clear"])))),
     onClick: onClear
-  }) : null)), /*#__PURE__*/React.createElement(Popper, _extends({
+  }) : null, validateState && validateIcon && statusIcon && /*#__PURE__*/React.createElement(Icon, _extends({}, ValidateComponentsMap[validateState], {
+    className: classNames(nsInput.e('icon'), nsInput.e('validateIcon'), is('loading', validateState === 'validating'))
+  })))), /*#__PURE__*/React.createElement(Popper, _extends({
     referenceElement: containerRef,
     visible: visible,
-    popperClass: e(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["popper"]))),
+    popperClass: classNames(e(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["popper"]))), is(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["pure"])))),
     popperInstRef: popperInstRef,
     popperStyle: _objectSpread(_objectSpread({}, popperStyle), {}, {
       visibility: filterable && remote && isEmpty(inputValue) ? 'hidden' : 'visible'
@@ -244,7 +292,7 @@ var SelectCore = /*#__PURE__*/forwardRef(function (props, ref) {
     afterLeave: handleAfterLeave,
     placement: 'bottom-start',
     transitionAppear: true,
-    unmountOnExit: true,
+    unmountOnExit: props.unmountOnExit,
     showArrow: showArrow
   }, transitionProps, popperProps), /*#__PURE__*/React.createElement(SelectDropdown, _extends({
     ref: selectDropdownRef,
@@ -255,8 +303,9 @@ var SelectCore = /*#__PURE__*/forwardRef(function (props, ref) {
     contentRef: contentRef,
     popperInstRef: popperInstRef
   }, _props, {
-    onClear: props.onClear
-  }), props.children)));
+    onClear: props.onClear,
+    cachedOptions: cachedOptions
+  }), optionChilds)));
 });
 SelectCore.displayName = 'SelectCore';
 export default SelectCore;

package/dist/Select/SelectDropdown.js

@@ -35,7 +35,8 @@ var SelectDropdown = /*#__PURE__*/forwardRef(function (props, ref) {
     popperInstRef = props.popperInstRef,
     contentRef = props.contentRef,
     header = props.header,
-    footer = props.footer;
+    footer = props.footer,
+    cachedOptions = props.cachedOptions;
   var _useClassNames = useClassNames('select'),
     b = _useClassNames.b,
     e = _useClassNames.e,
@@ -62,25 +63,27 @@ var SelectDropdown = /*#__PURE__*/forwardRef(function (props, ref) {
     if (filterable && remote) {
       remoteMethod === null || remoteMethod === void 0 || remoteMethod(searchText);
     }
+    if (filterable && filterMethod) {
+      filterMethod === null || filterMethod === void 0 || filterMethod(searchText);
+    }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchText]);
   var filterAction = useCallback(function (p) {
     if (isNotEmpty(searchText) && isNotEmpty(p.value)) {
-      if (filterMethod) {
-        var _p$label;
-        var filterResult = filterMethod((_p$label = p.label) !== null && _p$label !== void 0 ? _p$label : p.value.toString(), searchText);
-        return filterResult;
-      } else {
-        var _ref, _p$label2;
-        var regex = new RegExp(searchText, 'gi');
-        var res = null !== "".concat((_ref = (_p$label2 = p.label) !== null && _p$label2 !== void 0 ? _p$label2 : p.value) !== null && _ref !== void 0 ? _ref : '').match(regex);
-        return res;
-      }
+      var _ref, _p$label;
+      // if (filterMethod) {
+      //     const filterResult = filterMethod(p.label ?? p.value.toString(), searchText);
+      //     return filterResult;
+      // } else {
+      // }
+      var regex = new RegExp(searchText, 'gi');
+      var res = null !== "".concat((_ref = (_p$label = p.label) !== null && _p$label !== void 0 ? _p$label : p.value) !== null && _ref !== void 0 ? _ref : '').match(regex);
+      return res;
     } else {
       return true;
     }
-  }, [filterMethod, searchText]);
+  }, [searchText]);
   var scrollToSelected = useCallback(function () {
     // const node = ulRef.current?.querySelectorAll('.selected');
     // if (node && node.length > 0) {
@@ -138,7 +141,7 @@ var SelectDropdown = /*#__PURE__*/forwardRef(function (props, ref) {
       });
     }
     // 搜索
-    if (filterable && !remote && isNotEmpty(searchText)) {
+    if (filterable && !remote && isNotEmpty(searchText) && !filterMethod) {
       var match = false;
       return props.children ? /*#__PURE__*/React.createElement(React.Fragment, null, Children.toArray(props.children).map(function (item) {
         var _nodeType;
@@ -161,6 +164,10 @@ var SelectDropdown = /*#__PURE__*/forwardRef(function (props, ref) {
           } else {
             return null;
           }
+        } else if (nodeType === 'ElTree') {
+          // filterAction(item.props);
+          match = true;
+          return item;
         }
 
         // if (filterAction(item.props)) {
@@ -179,7 +186,7 @@ var SelectDropdown = /*#__PURE__*/forwardRef(function (props, ref) {
         }, remote ? noMatchText : noDataText);
       }
     }
-  }, [filterable, allowCreate, searchText, remote, multiple, value, props.children, setInputValue, noMatchText, filterAction, be, noDataText]);
+  }, [filterable, allowCreate, searchText, remote, filterMethod, multiple, value, props.children, setInputValue, be, noMatchText, filterAction, noDataText]);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(b(_templateObject || (_templateObject = _taggedTemplateLiteral(["dorpdown"]))), is({
       multiple: multiple
@@ -199,7 +206,8 @@ var SelectDropdown = /*#__PURE__*/forwardRef(function (props, ref) {
       onChoose: onChoose,
       hover: hover,
       setHover: setHover,
-      multiple: multiple
+      multiple: multiple,
+      cachedOptions: cachedOptions
     }
   }, /*#__PURE__*/React.createElement(Scrollbar, {
     wrapClass: be('dropdown', 'wrap'),

package/dist/Select/index.d.ts

@@ -1,4 +1,4 @@
 export { default as Option } from './Option';
 export { default as OptionGroup } from './OptionGroup';
 export { default as Select } from './Select';
-export type { SelectOptionGroupProps, SelectOptionProps, SelectProps, SelectRef } from './typings';
+export type { OptionData, SelectOptionGroupProps, SelectOptionProps, SelectProps, SelectRef } from './typings';

package/dist/Select/typings.d.ts

@@ -10,9 +10,11 @@ export type SelectRef = {
     setValue: (value: ValueType) => void;
     onClear: (event?: any) => void;
     setVisible: (value: boolean) => void;
+    cachedOptions: React.RefObject<Map<OptionValue, OptionData>>;
+    onChoose: <T = any>(val: string, data: OptionData<T>, event?: any) => ValueType;
 };
 type Child = React.ReactElement<SelectOptionGroupProps | SelectOptionProps> | React.ReactElement<SelectOptionGroupProps | SelectOptionProps>[];
-export interface SelectProps<V = ValueType> extends Omit<FormControlBaseProps<V>, 'onChange'>, BaseProps<Child | Child[]>, NativeProps, AnimationEventProps, PopperOptions {
+export interface SelectProps<V = ValueType> extends Omit<FormControlBaseProps<V>, 'onChange'>, BaseProps<Child | Child[]>, NativeProps<'--el-select-border-color-hover' | '--el-select-disabled-color' | '--el-select-disabled-border' | '--el-select-font-size' | '--el-select-close-hover-color' | '--el-select-input-color' | '--el-select-multiple-input-color' | '--el-select-input-focus-border-color' | '--el-select-input-font-size' | '--el-select-width'>, AnimationEventProps, PopperOptions {
     /** 是否多选 */
     multiple?: boolean;
     /** 是否禁用 */
@@ -28,7 +30,7 @@ export interface SelectProps<V = ValueType> extends Omit<FormControlBaseProps<V>
     /** 是否可搜索 */
     filterable?: boolean;
     /** 自定义搜索方法 */
-    filterMethod?: (val: ValueType, searchText: string) => boolean;
+    filterMethod?: (searchText: string) => void;
     /** 选项为空时显示的文字 */
     noDataText?: string;
     /** 搜索条件无匹配时显示的文字 */
@@ -40,15 +42,9 @@ export interface SelectProps<V = ValueType> extends Omit<FormControlBaseProps<V>
     /** 远程加载时显示的图标 */
     loadingIcon?: React.ReactElement;
     /**  */
-    max?: boolean;
     /** 下拉菜单的内容是否有箭头 */
     showArrow?: boolean;
     /**  */
-    required?: boolean;
-    /** 表单校验错误提示 */
-    error?: boolean;
-    /** 表单校验警告提示 */
-    warning?: boolean;
     /** 下拉项最大宽度 */
     maxWidth?: number;
     /** 多选时是否将选中值按文字的形式展示 */
@@ -85,7 +81,7 @@ export interface SelectProps<V = ValueType> extends Omit<FormControlBaseProps<V>
     tagEffect?: 'light' | 'dark' | 'plain';
     labelFormat?: (index: number, value: OptionValue, label?: OptionValue) => React.ReactElement;
     /** 选中值发生变化时触发 */
-    onChange?: (value: ValueType, data?: OptionData | OptionData[]) => void;
+    onChange?: <T = any>(value: ValueType, data?: OptionData<T> | OptionData<T>[]) => void;
     /** 下拉框出现/隐藏时触发   */
     onVisibleChange?: (visible: boolean) => void;
     /** 多选模式下移除tag时触发/隐藏时触发   */
@@ -93,17 +89,29 @@ export interface SelectProps<V = ValueType> extends Omit<FormControlBaseProps<V>
     /** 可清空的单选模式下用户点击清空按钮时触发  */
     onClear?: () => void;
     /** 对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单 */
-    automaticDropdown?: boolean;
     /** 下拉列表顶部的内容 */
     header?: React.ReactElement;
     /** 下拉列表底部的内容 */
     footer?: React.ReactElement;
     /** 作为 Select 组件的内容时 */
-    tag?: (params: {
-        data: OptionData[];
+    tag?: <T = any>(params: {
+        data: OptionData<T>[];
         selectDisabled: boolean;
-        deleteTag: (event: React.MouseEvent<HTMLElement, MouseEvent>, tag: OptionData) => void;
+        deleteTag: (event: React.MouseEvent<HTMLElement, MouseEvent>, tag: OptionData<T>) => void;
     }) => React.ReactElement;
+    unmountOnExit?: boolean;
+    /** 选项的数据源， value 的 key 和 label 和  disabled可以通过 props自定义. */
+    options?: Array<{
+        [key: string]: any;
+    }>;
+    /** options 的配置 */
+    props?: {
+        value?: string;
+        label?: string;
+        disabled?: string;
+        options?: string;
+        data?: string;
+    };
 }
 export interface SelectOptionProps extends BaseProps, NativeProps {
     /** 选项的值 */
@@ -114,14 +122,14 @@ export interface SelectOptionProps extends BaseProps, NativeProps {
     data?: any;
     /** 是否禁用该选项 */
     disabled?: boolean;
-    onClick?: (value: ValueType, data: OptionData) => void;
+    onClick?: <T = any>(value: ValueType, data: OptionData<T>) => void;
 }
-export interface OptionData {
+export interface OptionData<T = any> {
     index?: number;
     value: OptionValue;
     label: OptionValue;
     disabled?: boolean;
-    data?: any;
+    data?: T;
 }
 export interface SelectOptionGroupProps extends BaseProps<React.ReactElement<SelectOptionProps> | React.ReactElement<SelectOptionProps>[]>, NativeProps {
     /** 分组的组名 */
@@ -133,13 +141,14 @@ export interface SelectDropdownProps extends SelectProps {
     value: ValueType;
     inputValue: string;
     setInputValue: (value: string) => void;
-    onChoose: (val: string, data: OptionData, event: any) => void;
+    onChoose: <T = any>(val: string, data: OptionData<T>, event: any) => void;
     contentRef: RefObject<HTMLDivElement>;
     popperInstRef: RefObject<PopperOptionRef>;
     /** 下拉列表顶部的内容 */
     header?: React.ReactElement;
     /** 下拉列表底部的内容 */
     footer?: React.ReactElement;
+    cachedOptions: React.RefObject<Map<OptionValue, OptionData>>;
 }
 export interface SelectDropdownRef {
     clear: () => void;

package/dist/Select/useSelect.d.ts

@@ -34,7 +34,7 @@ declare const useSelect: (props: SelectProps) => {
     clearable: boolean;
     clearIcon: import("..").IconName;
     multiple: boolean;
-    onChange: (value: ValueType, data?: OptionData | OptionData[]) => void;
+    onChange: <T = any>(value: ValueType, data?: OptionData<T> | OptionData<T>[]) => void;
     allowCreate: boolean;
     onEnter: (node?: HTMLElement | Text) => void;
     afterLeave: (node?: HTMLElement | Text) => void;
@@ -47,10 +47,10 @@ declare const useSelect: (props: SelectProps) => {
     setValue: (value: ValueType) => void;
     disabled: boolean;
     size: import("..").TypeAttributes.Size;
-    optionData: OptionData[];
+    optionData: OptionData<any>[];
     multiValue: OptionValue[];
-    multiOptionData: OptionData[];
-    selected: OptionData | OptionData[];
+    multiOptionData: OptionData<any>[];
+    selected: OptionData<any> | OptionData<any>[];
     label: string;
     visible: boolean;
     setVisible: React.Dispatch<React.SetStateAction<boolean>>;
@@ -59,10 +59,10 @@ declare const useSelect: (props: SelectProps) => {
     shouldShowPlaceholder: boolean;
     handleEnter: (node: any) => void;
     handleAfterLeave: (node?: any) => void;
-    toggleMenu: (event: React.MouseEvent<HTMLSpanElement>) => void;
+    toggleMenu: (event?: React.MouseEvent<HTMLSpanElement>) => void;
     onCloseTag: (event: React.MouseEvent<HTMLElement, MouseEvent>, item: OptionData) => void;
     onClear: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-    onChoose: (val: string, data: OptionData, event?: any) => void;
+    onChoose: (val: string, data: OptionData, event?: any) => string | OptionValue[];
     labelFormat: (index: number, value: OptionValue, label?: OptionValue) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
     iconComponent: import("..").IconName;
     iconReverse: string;
@@ -71,18 +71,25 @@ declare const useSelect: (props: SelectProps) => {
     handleCompositionStart: (event: React.CompositionEvent<HTMLInputElement>) => void;
     handleCompositionUpdate: (event: React.CompositionEvent<HTMLInputElement>) => void;
     handleCompositionEnd: (event: React.CompositionEvent<HTMLInputElement>) => void;
+    cachedOptions: React.MutableRefObject<Map<OptionValue, OptionData<any>>>;
+    aliasProps: {
+        value?: string;
+        label?: string;
+        disabled?: string;
+        options?: string;
+        data?: string;
+    };
+    validateIcon: import("..").IconProps;
+    statusIcon: boolean;
+    validateState: "" | "error" | "success" | "validating";
     valueKey?: string;
-    filterMethod?: (val: ValueType, searchText: string) => boolean;
+    filterMethod?: (searchText: string) => void;
     noDataText?: string;
     noMatchText?: string;
     loading?: boolean;
     loadingText?: string;
     loadingIcon?: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-    max?: boolean;
     showArrow?: boolean;
-    required?: boolean;
-    error?: boolean;
-    warning?: boolean;
     maxWidth?: number;
     collapseTags?: boolean;
     maxCollapseTags?: number;
@@ -94,22 +101,32 @@ declare const useSelect: (props: SelectProps) => {
     appendToBody?: boolean;
     remoteMethod?: (searchText: string) => void;
     tagType?: import("..").TypeAttributes.Appearance;
-    tagEffect?: "light" | "dark" | "plain";
-    automaticDropdown?: boolean;
+    tagEffect?: "dark" | "light" | "plain";
     header?: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
     footer?: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-    tag?: (params: {
-        data: OptionData[];
+    tag?: <T_1 = any>(params: {
+        data: OptionData<T_1>[];
         selectDisabled: boolean;
-        deleteTag: (event: React.MouseEvent<HTMLElement, MouseEvent>, tag: OptionData) => void;
+        deleteTag: (event: React.MouseEvent<HTMLElement, MouseEvent>, tag: OptionData<T_1>) => void;
     }) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-    name?: string;
+    unmountOnExit?: boolean;
+    options?: {
+        [key: string]: any;
+    }[];
+    props?: {
+        value?: string;
+        label?: string;
+        disabled?: string;
+        options?: string;
+        data?: string;
+    };
     readOnly?: boolean;
+    name?: string;
     defaultValue?: ValueType;
     classPrefix?: string;
     children?: (React.ReactElement<SelectOptionGroupProps | SelectOptionProps, string | React.JSXElementConstructor<any>> | React.ReactElement<SelectOptionGroupProps | SelectOptionProps, string | React.JSXElementConstructor<any>>[]) | (React.ReactElement<SelectOptionGroupProps | SelectOptionProps, string | React.JSXElementConstructor<any>> | React.ReactElement<SelectOptionGroupProps | SelectOptionProps, string | React.JSXElementConstructor<any>>[])[];
     className?: string;
-    style?: React.CSSProperties & Partial<Record<never, string>>;
+    style?: React.CSSProperties & Partial<Record<"--el-select-border-color-hover" | "--el-select-disabled-color" | "--el-select-disabled-border" | "--el-select-font-size" | "--el-select-close-hover-color" | "--el-select-input-color" | "--el-select-multiple-input-color" | "--el-select-input-focus-border-color" | "--el-select-input-font-size" | "--el-select-width", string>>;
     beforeEnter?: (node?: HTMLElement | Text) => void;
     afterEnter?: (node?: HTMLElement | Text) => void;
     beforeLeave?: (node?: HTMLElement | Text) => void;