@qsxy/element-plus-react 1.0.1 → 1.0.2

package/dist/Select/SelectDropdown.js

@@ -1,4 +1,4 @@
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 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."); }
@@ -7,21 +7,18 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import classNames from 'classnames';
-import trim from 'lodash/trim';
 import React, { Children, cloneElement, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext";
-import { Divider } from "../Divider";
-import Icon from "../Icon/Icon";
-import Input from "../Input/Input";
 import Scrollbar from "../Scrollbar/Scrollbar";
-import { isEmpty, isNotEmpty } from "../Util";
+import { isNotEmpty } from "../Util";
 import { useClassNames } from "../hooks";
 import Option from "./Option";
 import { SelectContext } from "./SelectContext";
 var SelectDropdown = /*#__PURE__*/forwardRef(function (props, ref) {
   var value = props.value,
     filterable = props.filterable,
+    allowCreate = props.allowCreate,
     _props$multiple = props.multiple,
     multiple = _props$multiple === void 0 ? false : _props$multiple,
     filterMethod = props.filterMethod,
@@ -29,22 +26,22 @@ var SelectDropdown = /*#__PURE__*/forwardRef(function (props, ref) {
     remote = _props$remote === void 0 ? false : _props$remote,
     remoteMethod = props.remoteMethod,
     loadingText = props.loadingText,
+    loadingIcon = props.loadingIcon,
     noMatchText = props.noMatchText,
     noDataText = props.noDataText,
-    searchInstance = props.searchInstance,
-    createItem = props.createItem,
-    setCreateItem = props.setCreateItem,
-    createInputRef = props.createInputRef,
+    searchText = props.inputValue,
+    setInputValue = props.setInputValue,
     onChoose = props.onChoose,
     popperInstRef = props.popperInstRef,
-    contentRef = props.contentRef;
+    contentRef = props.contentRef,
+    header = props.header,
+    footer = props.footer;
   var _useClassNames = useClassNames('select'),
     b = _useClassNames.b,
     e = _useClassNames.e,
     be = _useClassNames.be,
     is = _useClassNames.is;
   var ulRef = useRef(null);
-  var remoteSearchRef = useRef(null);
   var _useConfigProvider = useConfigProvider(),
     locale = _useConfigProvider.locale;
   var _useTranslation = useTranslation(),
@@ -55,13 +52,6 @@ var SelectDropdown = /*#__PURE__*/forwardRef(function (props, ref) {
     _useState2 = _slicedToArray(_useState, 2),
     hover = _useState2[0],
     setHover = _useState2[1];
-  // 搜索关键词
-  var _useState3 = useState(''),
-    _useState4 = _slicedToArray(_useState3, 2),
-    searchText = _useState4[0],
-    setSearchText = _useState4[1];
-  // const [remoteSearch, setRemoteSearch] = useState('');
-  // const remoteSearch = useMemo(() => searchInstance.current?.getValue(), [searchInstance]);
 
   /** 搜索时 */
   useEffect(function () {
@@ -69,30 +59,12 @@ var SelectDropdown = /*#__PURE__*/forwardRef(function (props, ref) {
       var _popperInstRef$curren;
       (_popperInstRef$curren = popperInstRef.current) === null || _popperInstRef$curren === void 0 || _popperInstRef$curren.update();
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [searchText]);
-
-  /** 清除搜索关键词 */
-  var onClearSearch = useCallback(function (event) {
-    event === null || event === void 0 || event.stopPropagation();
-    setSearchText('');
-  }, []);
-
-  /** 搜索 */
-  var onSearch = useCallback(function (val) {
-    var keywords = trim(val + '');
-    if (keywords === searchText) {
-      return;
-    } else if (isEmpty(keywords)) {
-      setSearchText('');
+    if (filterable && remote) {
+      remoteMethod === null || remoteMethod === void 0 || remoteMethod(searchText);
     }
-    setSearchText(keywords);
-  }, [searchText]);
 
-  /** 搜索 */
-  var onRemote = useCallback(function (val) {
-    remoteMethod === null || remoteMethod === void 0 || remoteMethod(val);
-  }, [remoteMethod]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchText]);
   var filterAction = useCallback(function (p) {
     if (isNotEmpty(searchText) && isNotEmpty(p.value)) {
       if (filterMethod) {
@@ -100,9 +72,9 @@ var SelectDropdown = /*#__PURE__*/forwardRef(function (props, ref) {
         var filterResult = filterMethod((_p$label = p.label) !== null && _p$label !== void 0 ? _p$label : p.value.toString(), searchText);
         return filterResult;
       } else {
-        var _p$label2;
+        var _ref, _p$label2;
         var regex = new RegExp(searchText, 'gi');
-        var res = null !== ((_p$label2 = p.label) !== null && _p$label2 !== void 0 ? _p$label2 : p.value.toString()).match(regex);
+        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;
       }
     } else {
@@ -128,40 +100,56 @@ var SelectDropdown = /*#__PURE__*/forwardRef(function (props, ref) {
   useImperativeHandle(ref, function () {
     return {
       clear: function clear() {
-        setSearchText('');
         remoteMethod === null || remoteMethod === void 0 || remoteMethod('');
       },
-      onEnter: function onEnter() {
-        setTimeout(function () {
-          var _searchInstance$curre, _remoteSearchRef$curr;
-          (_searchInstance$curre = searchInstance.current) === null || _searchInstance$curre === void 0 || _searchInstance$curre.focus();
-          (_remoteSearchRef$curr = remoteSearchRef.current) === null || _remoteSearchRef$curr === void 0 || _remoteSearchRef$curr.focus();
-        }, 500);
-      },
       hover: setHover,
       scrollToSelected: scrollToSelected
     };
   });
   var loading = useMemo(function () {
-    return /*#__PURE__*/React.createElement(Option, {
-      className: "no-data",
-      value: ""
-    }, loadingText);
-  }, [loadingText]);
+    if (loadingIcon) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: be('dropdown', 'loading')
+      }, loadingIcon);
+    } else if (loadingText) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: be('dropdown', 'empty')
+      }, loadingText);
+    }
+  }, [be, loadingIcon, loadingText]);
   var options = useMemo(function () {
+    // 正在创建新的选项
+    if (filterable && allowCreate && isNotEmpty(searchText)) {
+      // 单选时的创建项显示在下拉项里
+      if (!multiple && value === searchText) {
+        return /*#__PURE__*/React.createElement(React.Fragment, null, searchText && !multiple && /*#__PURE__*/React.createElement(Option, {
+          value: searchText,
+          label: searchText
+        }), props.children);
+      }
+      return /*#__PURE__*/React.createElement(Option, {
+        value: searchText,
+        label: searchText,
+        onClick: function onClick() {
+          if (multiple) {
+            setInputValue('');
+          }
+        }
+      });
+    }
     // 搜索
-    if (isNotEmpty(searchText)) {
+    if (filterable && !remote && isNotEmpty(searchText)) {
       var match = false;
       return props.children ? /*#__PURE__*/React.createElement(React.Fragment, null, Children.toArray(props.children).map(function (item) {
         var _nodeType;
         var nodeType = item === null || item === void 0 ? void 0 : item.type;
         nodeType = ((_nodeType = nodeType) === null || _nodeType === void 0 ? void 0 : _nodeType.displayName) || nodeType;
-        if (nodeType === 'Select.Option') {
+        if (nodeType === 'ElOption') {
           if (filterAction(item.props)) {
             match = true;
             return item;
           }
-        } else if (nodeType === 'OptionGroup') {
+        } else if (nodeType === 'ElOptionGroup') {
           if (item.props.children) {
             var matchChildren = Children.toArray(item.props.children).filter(function (item1) {
               if (filterAction(item1.props)) {
@@ -179,104 +167,33 @@ var SelectDropdown = /*#__PURE__*/forwardRef(function (props, ref) {
         //     match = true;
         //     return item;
         // }
-      }), !match && /*#__PURE__*/React.createElement(Option, {
-        className: "no-data",
-        value: "",
-        key: 'noMatchText'
+      }), !match && /*#__PURE__*/React.createElement("div", {
+        className: be('dropdown', 'empty')
       }, noMatchText)) : null;
-    }
-    // 正在创建新的选项
-    else if (isNotEmpty(createItem)) {
-      // 单选时的创建项显示在下拉项里
-      if (!multiple && value === createItem) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, createItem && !multiple && /*#__PURE__*/React.createElement(Option, {
-          value: createItem,
-          label: createItem
-        }), props.children);
-      }
-      return /*#__PURE__*/React.createElement(Option, {
-        value: createItem,
-        label: createItem,
-        onClick: function onClick() {
-          if (multiple) {
-            setCreateItem('');
-            if (createInputRef.current) {
-              createInputRef.current.value = '';
-            }
-          }
-        }
-      });
     } else {
       if (Children.count(props.children) > 0) {
         return props.children;
       } else {
-        return /*#__PURE__*/React.createElement(Option, {
-          className: "no-data",
-          value: ""
-        }, noDataText);
+        return /*#__PURE__*/React.createElement("div", {
+          className: be('dropdown', 'empty')
+        }, remote ? noMatchText : noDataText);
       }
     }
-  }, [searchText, createItem, props.children, noMatchText, filterAction, multiple, value, setCreateItem, createInputRef, noDataText]);
+  }, [filterable, allowCreate, searchText, remote, multiple, value, props.children, setInputValue, noMatchText, filterAction, be, noDataText]);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(b(_templateObject || (_templateObject = _taggedTemplateLiteral(["dorpdown"]))), is({
       multiple: multiple
-    })),
-    onClick: function onClick(event) {
-      return event.stopPropagation();
-    },
-    ref: contentRef
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, filterable && !remote ? /*#__PURE__*/React.createElement("div", {
-    className: e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["search"]))),
-    onClick: function onClick(event) {
-      return event.stopPropagation();
-    }
-  }, /*#__PURE__*/React.createElement(Input, {
-    ref: searchInstance,
-    placeholder: t('el.select.search', {
-      lng: locale
+    }), {
+      'custom-header': header,
+      'custom-footer': footer
     }),
-    clearable: true,
-    plain: true
-    // debounceInput
-    ,
-    onClear: onClearSearch,
-    onChange: onSearch,
-    prefix: /*#__PURE__*/React.createElement(Icon, {
-      prefix: "fal",
-      name: "search"
-    })
-  }), /*#__PURE__*/React.createElement(Divider, {
-    style: {
-      margin: 0
-    }
-  })) : null, filterable && remote ? /*#__PURE__*/React.createElement("div", {
-    className: e(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["search"]))),
     onClick: function onClick(event) {
       return event.stopPropagation();
-    }
-  }, /*#__PURE__*/React.createElement(Input, {
-    ref: remoteSearchRef
-    // value={remoteSearch}
-    ,
-    placeholder: t('el.select.search', {
-      lng: locale
-    }),
-    clearable: true,
-    plain: true,
-    debounceInput: true,
-    onClear: function onClear() {
-      return onRemote('');
     },
-    onChange: onRemote,
-    prefix: /*#__PURE__*/React.createElement(Icon, {
-      prefix: "fal",
-      name: "search"
-    })
-  }), /*#__PURE__*/React.createElement(Divider, {
-    style: {
-      margin: 0
-    }
-  })) : null, /*#__PURE__*/React.createElement(SelectContext.Provider, {
+    ref: contentRef
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, header ? /*#__PURE__*/React.createElement("div", {
+    className: be('dropdown', 'header')
+  }, header) : null, /*#__PURE__*/React.createElement(SelectContext.Provider, {
     value: {
       value: value,
       onChoose: onChoose,
@@ -285,10 +202,15 @@ var SelectDropdown = /*#__PURE__*/forwardRef(function (props, ref) {
       multiple: multiple
     }
   }, /*#__PURE__*/React.createElement(Scrollbar, {
-    wrapClass: be('dropdown', 'wrap')
+    wrapClass: be('dropdown', 'wrap'),
+    wrapStyle: {
+      display: props.loading ? 'none' : undefined
+    }
   }, /*#__PURE__*/React.createElement("ul", {
     className: be('dropdown', 'list'),
     ref: ulRef
-  }, props.loading ? loading : options)))));
+  }, options)), props.loading ? loading : null), footer ? /*#__PURE__*/React.createElement("div", {
+    className: be('dropdown', 'footer')
+  }, footer) : null));
 });
 export default SelectDropdown;

package/dist/Select/typings.d.ts

@@ -1,14 +1,11 @@
 import React, { RefObject } from 'react';
-import { InputRef } from '../Input/typings';
+import { IconName } from '../Icon';
 import { PopperOptionRef, PopperOptions } from '../Popper';
 import { AnimationEventProps, BaseProps, FormControlBaseProps, NativeProps, TypeAttributes } from '../types/common';
-export type ValueType = string | number | (string | number)[];
+export type OptionValue = string | number | boolean;
+export type ValueType = OptionValue | OptionValue[];
 export type SelectRef = {
-    inputInstance?: RefObject<InputRef>;
-    searchInstance?: RefObject<InputRef>;
     popperInstRef: RefObject<PopperOptionRef>;
-    selectedLabel: string | string[];
-    setLabel: (label: string) => void;
     getValue: () => ValueType;
     setValue: (value: ValueType) => void;
     onClear: (event?: any) => void;
@@ -24,6 +21,8 @@ export interface SelectProps<V = ValueType> extends Omit<FormControlBaseProps<V>
     valueKey?: string;
     /** 是否可以清空选项 */
     clearable?: boolean;
+    /** 自定义清除图标 */
+    clearIcon?: IconName;
     /** 占位符 */
     placeholder?: string;
     /** 是否可搜索 */
@@ -31,13 +30,15 @@ export interface SelectProps<V = ValueType> extends Omit<FormControlBaseProps<V>
     /** 自定义搜索方法 */
     filterMethod?: (val: ValueType, searchText: string) => boolean;
     /** 选项为空时显示的文字 */
-    noDataText?: React.ReactElement | string;
+    noDataText?: string;
     /** 搜索条件无匹配时显示的文字 */
-    noMatchText?: React.ReactElement | string;
+    noMatchText?: string;
     /** 是否正在从远程获取数据 */
     loading?: boolean;
     /** 远程加载时显示的文字 */
-    loadingText?: React.ReactElement | string;
+    loadingText?: string;
+    /** 远程加载时显示的图标 */
+    loadingIcon?: React.ReactElement;
     /**  */
     max?: boolean;
     /** 下拉菜单的内容是否有箭头 */
@@ -74,29 +75,53 @@ export interface SelectProps<V = ValueType> extends Omit<FormControlBaseProps<V>
     remote?: boolean;
     /** 自定义搜索方法 */
     remoteMethod?: (searchText: string) => void;
+    /** 远程搜索方法显示后缀图标 */
+    remoteShowSuffix?: boolean;
+    /** 自定义后缀图标组件 */
+    suffixIcon?: IconName;
     /** 标签类型 */
     tagType?: TypeAttributes.Appearance;
     /** 标签效果 */
     tagEffect?: 'light' | 'dark' | 'plain';
+    labelFormat?: (index: number, value: OptionValue, label?: OptionValue) => React.ReactElement;
     /** 选中值发生变化时触发 */
-    onChange?: (value: ValueType, label?: string | (string | number)[]) => void;
+    onChange?: (value: ValueType, data?: OptionData | OptionData[]) => void;
     /** 下拉框出现/隐藏时触发   */
     onVisibleChange?: (visible: boolean) => void;
     /** 多选模式下移除tag时触发/隐藏时触发   */
     onRemoveTag?: (tagValue: any) => void;
     /** 可清空的单选模式下用户点击清空按钮时触发  */
     onClear?: () => void;
-    /** 数据加载成功时调用 */
-    onLoadSuccess?: (value: ValueType, label?: (string | number | undefined)[]) => void;
+    /** 对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单 */
+    automaticDropdown?: boolean;
+    /** 下拉列表顶部的内容 */
+    header?: React.ReactElement;
+    /** 下拉列表底部的内容 */
+    footer?: React.ReactElement;
+    /** 作为 Select 组件的内容时 */
+    tag?: (params: {
+        data: OptionData[];
+        selectDisabled: boolean;
+        deleteTag: (event: React.MouseEvent<HTMLElement, MouseEvent>, tag: OptionData) => void;
+    }) => React.ReactElement;
 }
 export interface SelectOptionProps extends BaseProps, NativeProps {
     /** 选项的值 */
-    value: string | number;
+    value: OptionValue;
     /** 选项的标签，若不设置则默认与 value 相同 */
-    label?: string;
+    label?: OptionValue;
+    /** option 的附加数据，会传递到 onClick 事件的参数 data 中 */
+    data?: any;
     /** 是否禁用该选项 */
     disabled?: boolean;
-    onClick?: (value: ValueType, label: string, e: Event) => void;
+    onClick?: (value: ValueType, data: OptionData) => void;
+}
+export interface OptionData {
+    index?: number;
+    value: OptionValue;
+    label: OptionValue;
+    disabled?: boolean;
+    data?: any;
 }
 export interface SelectOptionGroupProps extends BaseProps<React.ReactElement<SelectOptionProps> | React.ReactElement<SelectOptionProps>[]>, NativeProps {
     /** 分组的组名 */
@@ -106,17 +131,18 @@ export interface SelectOptionGroupProps extends BaseProps<React.ReactElement<Sel
 }
 export interface SelectDropdownProps extends SelectProps {
     value: ValueType;
-    searchInstance: RefObject<InputRef>;
-    createItem: string;
-    setCreateItem: (createItem: string) => void;
-    onChoose: (val: string, text: string, event: any) => void;
+    inputValue: string;
+    setInputValue: (value: string) => void;
+    onChoose: (val: string, data: OptionData, event: any) => void;
     contentRef: RefObject<HTMLDivElement>;
-    createInputRef: RefObject<HTMLInputElement>;
     popperInstRef: RefObject<PopperOptionRef>;
+    /** 下拉列表顶部的内容 */
+    header?: React.ReactElement;
+    /** 下拉列表底部的内容 */
+    footer?: React.ReactElement;
 }
 export interface SelectDropdownRef {
     clear: () => void;
-    onEnter: () => void;
     hover: (value: ValueType) => void;
     scrollToSelected: () => void;
 }

package/dist/Select/useSelect.d.ts

@@ -0,0 +1,125 @@
+import React from 'react';
+import { PopperOptionRef } from '../Popper/typings';
+import { TooltipRef } from '../Tooltip/typings';
+import { OptionData, OptionValue, SelectDropdownRef, SelectOptionGroupProps, SelectOptionProps, SelectProps, ValueType } from './typings';
+declare const useSelect: (props: SelectProps) => {
+    nsSelect: {
+        wb: (...classes: import("../hooks/useClassNames").ClassValue[]) => string;
+        b: (...classes: import("../hooks/useClassNames").ClassValue[]) => string;
+        e: (...classes: import("../hooks/useClassNames").ClassValue[]) => string;
+        m: (...classes: import("../hooks/useClassNames").ClassValue[]) => string;
+        be: (prefix: string, sub: string, compName?: boolean) => string;
+        em: (sub: string, modifier: string, compName?: boolean) => string;
+        bm: (prefix: string, modifier: string, compName?: boolean) => string;
+        bem: (prefix: string, sub: string, modifier: string, compName?: boolean) => string;
+        ebm: (sub: string, prefix: string, modifier: string, compName?: boolean) => string;
+        is: (...classes: import("../hooks/useClassNames").ClassValue[]) => string;
+        cssVarBlock: (object: Record<string, string>) => Record<string, string>;
+        cssVarBlockName: (name: string) => string;
+        cssVarName: (name: string) => string;
+    };
+    containerRef: React.MutableRefObject<HTMLDivElement>;
+    contentRef: React.MutableRefObject<HTMLDivElement>;
+    wrapperRef: React.MutableRefObject<HTMLInputElement>;
+    popperInstRef: React.MutableRefObject<PopperOptionRef>;
+    selectDropdownRef: React.MutableRefObject<SelectDropdownRef>;
+    tagTooltipRef: React.MutableRefObject<TooltipRef>;
+    inputRef: React.MutableRefObject<HTMLInputElement>;
+    suffixWrapperRef: React.MutableRefObject<HTMLDivElement>;
+    inputValue: string;
+    setInputHovering: (hovering: boolean) => void;
+    setInputValue: React.Dispatch<React.SetStateAction<string>>;
+    setIsFocused: (focused: boolean) => void;
+    filterable: boolean;
+    clearable: boolean;
+    clearIcon: import("..").IconName;
+    multiple: boolean;
+    onChange: (value: ValueType, data?: OptionData | OptionData[]) => void;
+    allowCreate: boolean;
+    onEnter: (node?: HTMLElement | Text) => void;
+    afterLeave: (node?: HTMLElement | Text) => void;
+    onVisibleChange: (visible: boolean) => void;
+    onRemoveTag: (tagValue: any) => void;
+    htmlInputProps: React.AllHTMLAttributes<any>;
+    transitionProps: import("..").TransitionProps;
+    popperProps: Partial<import("../Popper/typings").PopperProps>;
+    value: ValueType;
+    setValue: (value: ValueType) => void;
+    disabled: boolean;
+    size: import("..").TypeAttributes.Size;
+    optionData: OptionData[];
+    multiValue: OptionValue[];
+    multiOptionData: OptionData[];
+    selected: OptionData | OptionData[];
+    label: string;
+    visible: boolean;
+    setVisible: React.Dispatch<React.SetStateAction<boolean>>;
+    popperStyle: React.CSSProperties;
+    placeholder: string;
+    shouldShowPlaceholder: boolean;
+    handleEnter: (node: any) => void;
+    handleAfterLeave: (node?: any) => 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;
+    labelFormat: (index: number, value: OptionValue, label?: OptionValue) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    iconComponent: import("..").IconName;
+    iconReverse: string;
+    isComposing: React.MutableRefObject<boolean>;
+    remote: boolean;
+    handleCompositionStart: (event: React.CompositionEvent<HTMLInputElement>) => void;
+    handleCompositionUpdate: (event: React.CompositionEvent<HTMLInputElement>) => void;
+    handleCompositionEnd: (event: React.CompositionEvent<HTMLInputElement>) => void;
+    valueKey?: string;
+    filterMethod?: (val: ValueType, searchText: string) => boolean;
+    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;
+    collapseTagsTooltip?: boolean;
+    collapseTips?: (collapseNum: number, total: number) => string;
+    plain?: boolean;
+    prepend?: string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    append?: string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    appendToBody?: boolean;
+    remoteMethod?: (searchText: string) => void;
+    tagType?: import("..").TypeAttributes.Appearance;
+    tagEffect?: "light" | "dark" | "plain";
+    automaticDropdown?: boolean;
+    header?: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    footer?: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    tag?: (params: {
+        data: OptionData[];
+        selectDisabled: boolean;
+        deleteTag: (event: React.MouseEvent<HTMLElement, MouseEvent>, tag: OptionData) => void;
+    }) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    name?: string;
+    readOnly?: boolean;
+    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>>;
+    beforeEnter?: (node?: HTMLElement | Text) => void;
+    afterEnter?: (node?: HTMLElement | Text) => void;
+    beforeLeave?: (node?: HTMLElement | Text) => void;
+    onLeave?: (node?: HTMLElement | Text) => void;
+    offset?: number;
+    placement?: import("@popperjs/core/lib/enums").Placement;
+    arrowOffset?: number;
+    popperClass?: string;
+    effect?: string;
+    popperOptions?: import("@popperjs/core/lib/types").Options;
+    fallbackPlacements?: import("@popperjs/core/lib/enums").Placement[] | ((placement?: import("@popperjs/core/lib/enums").Placement) => import("@popperjs/core/lib/enums").Placement[]);
+};
+export default useSelect;