@sheinx/base 3.0.0-alpha.1 → 3.0.0-alpha.3

package/cjs/select/select.js

@@ -3,32 +3,45 @@
 require("core-js/modules/es.array.filter.js");
 require("core-js/modules/web.dom-collections.for-each.js");
 require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
+require("core-js/modules/es.string.trim.js");
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _hooks = require("@sheinx/hooks");
 var _absoluteList = require("../absolute-list");
 var _useInnerTitle = _interopRequireDefault(require("../common/use-inner-title"));
 var _animationList = _interopRequireDefault(require("../animation-list"));
+var _spin = _interopRequireDefault(require("../spin"));
 var _result = _interopRequireDefault(require("./result"));
 var _list = _interopRequireDefault(require("./list"));
 var _listTree = _interopRequireDefault(require("./list-tree"));
+var _icons = _interopRequireDefault(require("../icons"));
+var _listColumns = _interopRequireDefault(require("./list-columns"));
 var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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) { (0, _defineProperty2.default)(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; }
-// import ColumnsList from './list-columns';
-
-var Select = function Select(props) {
+function Select(props) {
   var _jssStyle$select;
   var jssStyle = props.jssStyle,
     className = props.className,
     size = props.size,
     data = props.data,
+    treeData = props.treeData,
+    header = props.header,
+    footer = props.footer,
     format = props.format,
     valueProp = props.value,
     defaultValue = props.defaultValue,
@@ -38,9 +51,20 @@ var Select = function Select(props) {
     _props$border = props.border,
     border = _props$border === void 0 ? true : _props$border,
     status = props.status,
+    _props$columns = props.columns,
+    columns = _props$columns === void 0 ? 1 : _props$columns,
+    columnsTitle = props.columnsTitle,
+    _props$columnWidth = props.columnWidth,
+    columnWidth = _props$columnWidth === void 0 ? 160 : _props$columnWidth,
     width = props.width,
+    trim = props.trim,
+    maxLength = props.maxLength,
+    style = props.style,
     multiple = props.multiple,
+    loading = props.loading,
     keygen = props.keygen,
+    _props$focusSelected = props.focusSelected,
+    focusSelected = _props$focusSelected === void 0 ? true : _props$focusSelected,
     _props$optionWidth = props.optionWidth,
     optionWidth = _props$optionWidth === void 0 ? '100%' : _props$optionWidth,
     _props$height = props.height,
@@ -50,33 +74,123 @@ var Select = function Select(props) {
     positionProp = _props$position === void 0 ? 'bottom-left' : _props$position,
     lineHeight = props.lineHeight,
     itemsInView = props.itemsInView,
+    _props$showArrow = props.showArrow,
+    showArrow = _props$showArrow === void 0 ? true : _props$showArrow,
     disabled = props.disabled,
+    separator = props.separator,
+    _props$clearable = props.clearable,
+    clearable = _props$clearable === void 0 ? true : _props$clearable,
     beforeChange = props.beforeChange,
     compressed = props.compressed,
     compressedBound = props.compressedBound,
-    renderItem = props.renderItem,
+    compressedClassName = props.compressedClassName,
+    placeholder = props.placeholder,
+    autoAdapt = props.autoAdapt,
+    groupBy = props.groupBy,
+    _props$renderItem = props.renderItem,
+    renderItemProp = _props$renderItem === void 0 ? function (d) {
+      return d;
+    } : _props$renderItem,
     renderResultProp = props.renderResult,
     renderUnmatched = props.renderUnmatched,
     resultClassName = props.resultClassName,
-    onChange = props.onChange;
+    hideCreateOption = props.hideCreateOption,
+    filterSingleSelect = props.filterSingleSelect,
+    childrenKey = props.childrenKey,
+    expandedProp = props.expanded,
+    defaultExpanded = props.defaultExpanded,
+    defaultExpandAll = props.defaultExpandAll,
+    showHitDescendants = props.showHitDescendants,
+    renderOptionList = props.renderOptionList,
+    onExpand = props.onExpand,
+    onChange = props.onChange,
+    onCreateProp = props.onCreate,
+    onFilterProp = props.onFilter,
+    onBlur = props.onBlur,
+    onFocus = props.onFocus,
+    onCollapseProp = props.onCollapse,
+    onEnterExpand = props.onEnterExpand,
+    onFilterWidthCreate = props.onFilterWidthCreate;
   var styles = jssStyle === null || jssStyle === void 0 ? void 0 : (_jssStyle$select = jssStyle.select) === null || _jssStyle$select === void 0 ? void 0 : _jssStyle$select.call(jssStyle);
-  var rootClass = (0, _classnames.default)(className, styles === null || styles === void 0 ? void 0 : styles.wrapper, innerTitle && (styles === null || styles === void 0 ? void 0 : styles.wrapperInnerTitle), size === 'small' && (styles === null || styles === void 0 ? void 0 : styles.wrapperSmall), size === 'large' && (styles === null || styles === void 0 ? void 0 : styles.wrapperLarge), status === 'error' && (styles === null || styles === void 0 ? void 0 : styles.wrapperError), !border && (styles === null || styles === void 0 ? void 0 : styles.wrapperNoBorder), !!underline && (styles === null || styles === void 0 ? void 0 : styles.wrapperUnderline), (0, _defineProperty2.default)({}, styles === null || styles === void 0 ? void 0 : styles.multiple, multiple));
+  var rootStyle = _objectSpread(_objectSpread({}, style), {}, {
+    width: width
+  });
+  var _useState = (0, _react.useState)('keyboard'),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    controlType = _useState2[0],
+    setControlType = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    focused = _useState4[0],
+    setFocused = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    enter = _useState6[0],
+    setEnter = _useState6[1];
+  var isKeydown = (0, _react.useRef)(false);
+  var isPreventBlur = (0, _react.useRef)(false);
+  var blurEvent = (0, _react.useRef)();
+  var inputRef = (0, _react.useRef)();
+  var selectRef = (0, _react.useRef)();
+  var optionListRef = (0, _react.useRef)();
+  var _useFilter = (0, _hooks.useFilter)({
+      data: data,
+      treeData: treeData,
+      keygen: keygen,
+      childrenKey: childrenKey,
+      expanded: expandedProp,
+      showHitDescendants: showHitDescendants,
+      hideCreateOption: hideCreateOption,
+      onAdvancedFilter: 'onAdvancedFilter' in props,
+      onCreate: onCreateProp,
+      onFilter: onFilterProp,
+      onFilterWidthCreate: onFilterWidthCreate
+    }),
+    filterText = _useFilter.filterText,
+    inputText = _useFilter.inputText,
+    filterData = _useFilter.filterData,
+    createdData = _useFilter.createdData,
+    expanded = _useFilter.expanded,
+    setInputText = _useFilter.setInputText,
+    onFilter = _useFilter.onFilter,
+    onResetFilter = _useFilter.onResetFilter,
+    onCreate = _useFilter.onCreate,
+    onClearCreatedData = _useFilter.onClearCreatedData;
   var _useSelect = (0, _hooks.useSelect)({
       value: valueProp,
       data: data,
+      separator: separator,
+      treeData: treeData,
+      childrenKey: childrenKey,
       multiple: multiple,
       defaultValue: defaultValue,
       control: 'value' in props,
       format: format,
       disabled: disabled,
+      groupBy: groupBy,
       prediction: prediction,
       beforeChange: beforeChange,
       onChange: onChange
     }),
     datum = _useSelect.datum,
     value = _useSelect.value;
-  var onCollapse = (0, _hooks.usePersistFn)(function (isOpen) {
-    console.log(isOpen);
+  var _useGroup = (0, _hooks.useGroup)({
+      data: filterData,
+      groupBy: groupBy
+    }),
+    groupData = _useGroup.data,
+    groupKey = _useGroup.groupKey;
+  var onCollapse = (0, _hooks.usePersistFn)(function (collapse) {
+    onCollapseProp === null || onCollapseProp === void 0 ? void 0 : onCollapseProp(collapse);
+    if (isPreventBlur.current) {
+      isPreventBlur.current = false;
+      return;
+    }
+    if (blurEvent.current && !collapse) {
+      blurEvent.current();
+      blurEvent.current = null;
+    }
+    onClearCreatedData();
   });
   var _usePopup = (0, _hooks.usePopup)({
       open: openProp,
@@ -89,39 +203,285 @@ var Select = function Select(props) {
     position = _usePopup.position,
     targetRef = _usePopup.targetRef,
     popupRef = _usePopup.popupRef,
-    openPop = _usePopup.openPop;
+    openPop = _usePopup.openPop,
+    closePop = _usePopup.closePop;
+  var rootClass = (0, _classnames.default)(className, styles === null || styles === void 0 ? void 0 : styles.wrapper, disabled === true && (styles === null || styles === void 0 ? void 0 : styles.wrapperDisabled), !!open && (styles === null || styles === void 0 ? void 0 : styles.wrapperFocus), disabled !== true && focused && (styles === null || styles === void 0 ? void 0 : styles.wrapperFocus), innerTitle && (styles === null || styles === void 0 ? void 0 : styles.wrapperInnerTitle), size === 'small' && (styles === null || styles === void 0 ? void 0 : styles.wrapperSmall), size === 'large' && (styles === null || styles === void 0 ? void 0 : styles.wrapperLarge), status === 'error' && (styles === null || styles === void 0 ? void 0 : styles.wrapperError), clearable && (styles === null || styles === void 0 ? void 0 : styles.clearable), !border && (styles === null || styles === void 0 ? void 0 : styles.wrapperNoBorder), !!underline && (styles === null || styles === void 0 ? void 0 : styles.wrapperUnderline), (0, _defineProperty2.default)({}, styles === null || styles === void 0 ? void 0 : styles.multiple, multiple));
+  var getRenderItem = function getRenderItem(data, index) {
+    return typeof renderItemProp === 'function' ? renderItemProp(data, index) : data[renderItemProp];
+  };
+  var renderItem = getRenderItem;
+  var handleFocus = (0, _hooks.usePersistFn)(function (e) {
+    setFocused(true);
+    onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+  });
+  var handleBlur = (0, _hooks.usePersistFn)(function (e) {
+    setFocused(false);
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+  });
+  var handleChange = function handleChange(item) {
+    var _inputRef$current;
+    if (multiple) {
+      var unMatchData = item;
+      if (_hooks.util.isObject(item) && unMatchData.IS_NOT_MATCHED_VALUE) {
+        datum.remove(item);
+      } else {
+        var _checked = datum.check(item);
+        if (_checked) datum.remove(item);else datum.add(item);
+      }
+      return;
+    }
+    var checked = datum.check(item);
+    if (!checked) datum.add(item);
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.blur();
+    if (!multiple) {
+      closePop();
+      onClearCreatedData();
+    }
+
+    // 单选模式下，关闭列表后需要聚焦外层容器，以便继续键盘操作
+    if (selectRef.current) {
+      selectRef.current.focus();
+    }
+  };
+
+  // 点击 Select 结果框的处理方法
   var handleResultClick = (0, _hooks.usePersistFn)(function () {
-    openPop();
+    if (disabled === true) return;
+    if (!open) {
+      var _inputRef$current2;
+      openPop();
+      (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
+    } else {
+      var _inputRef$current3;
+      closePop();
+      (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.blur();
+    }
   });
+
+  // 创建选项时，开启隐藏创建项目后的处理方法
+  var handleHideOption = function handleHideOption() {
+    handleChange(createdData);
+  };
+
+  // 回车时的处理方法
+  var handleEnter = function handleEnter() {
+    var _optionListRef$curren;
+    var hoverIndex = ((_optionListRef$curren = optionListRef.current) === null || _optionListRef$curren === void 0 ? void 0 : _optionListRef$curren.getHoverIndex()) || 0;
+    if (onCreate && hideCreateOption && createdData) {
+      handleHideOption();
+      setInputText('');
+      return;
+    }
+    var currentDataItem = filterData === null || filterData === void 0 ? void 0 : filterData[hoverIndex];
+    if (currentDataItem && !currentDataItem[groupKey]) {
+      isKeydown.current = true;
+      handleChange(currentDataItem);
+      setInputText('');
+    }
+  };
+
+  // input blur 时的处理方法
+  // 注意，在点击 option 的时候也会触发 blur 事件，此时要规避点击 option 后的 blur 事件
+  var handleInputBlur = function handleInputBlur(text) {
+    if (onFilterProp && text && filterSingleSelect && (data === null || data === void 0 ? void 0 : data.length) === 1) {
+      handleChange(data[0]);
+      return;
+    }
+    if (!onCreate) return;
+    if (multiple && !text) return;
+    if (isKeydown.current) {
+      isKeydown.current = false;
+      return;
+    }
+    // 防止点击 option 后触发 blur 事件，先把要做的事情存起来，后面再看要不要执行
+    blurEvent.current = function () {
+      if (createdData) {
+        handleChange(createdData);
+      }
+      onClearCreatedData();
+    };
+  };
+  var handleFilter = function handleFilter(text) {
+    var hideCreate = onCreate && hideCreateOption;
+    if (onCreate && !hideCreateOption) {
+      var _optionListRef$curren2;
+      (_optionListRef$curren2 = optionListRef.current) === null || _optionListRef$curren2 === void 0 ? void 0 : _optionListRef$curren2.hoverMove(0, true);
+    }
+    if (hideCreate) {
+      // optionListRef.current?.hoverMove(filterData.length - 1, true);
+    }
+    onFilter === null || onFilter === void 0 ? void 0 : onFilter(trim ? text.trim() : text);
+  };
+  var handleOptionClick = function handleOptionClick() {
+    isPreventBlur.current = true;
+    if (multiple) return;
+    // 单选结束后需要清除创建项
+    onClearCreatedData();
+  };
+
+  // 退格键可删除选项，仅在多选模式下生效
+  var handleDelete = function handleDelete(e) {
+    if (!multiple) return;
+    if (inputText) return;
+    e.preventDefault();
+    var raws = Array.isArray(value) ? value : [value];
+    var values = (0, _toConsumableArray2.default)(raws);
+    var last = values.pop();
+    if (last) {
+      datum.remove(last);
+    }
+  };
+  var handleMouseEnter = function handleMouseEnter() {
+    setEnter(true);
+  };
+  var handleMouseLeave = function handleMouseLeave() {
+    setEnter(false);
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    var _optionListRef$curren3, _optionListRef$curren4, _optionListRef$curren5, _optionListRef$curren6;
+    // 回车或下箭头可打开下拉列表
+    if ((e.keyCode === 13 || e.code === 'Enter' || e.keyCode === 13 || e.code === 'ArrowDown') && !open) {
+      if (typeof onEnterExpand === 'function') {
+        var canOpen = onEnterExpand(e);
+        if (canOpen === false) return;
+      }
+      handleResultClick();
+      return;
+    }
+
+    // tab 可关闭下拉列表
+    if (e.keyCode === 9 || e.code === 'Tab') {
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+      if (open) closePop();
+      return;
+    }
+    if (!open) return;
+    setControlType('keyboard');
+    switch (e.keyCode || e.code) {
+      case 38 || 'ArrowUp':
+        if ((_optionListRef$curren3 = optionListRef.current) !== null && _optionListRef$curren3 !== void 0 && _optionListRef$curren3.hoverHover) (_optionListRef$curren4 = optionListRef.current) === null || _optionListRef$curren4 === void 0 ? void 0 : _optionListRef$curren4.hoverMove(-1);
+        e.preventDefault();
+        break;
+      case 40 || 'ArrowDown':
+        if ((_optionListRef$curren5 = optionListRef.current) !== null && _optionListRef$curren5 !== void 0 && _optionListRef$curren5.hoverHover) (_optionListRef$curren6 = optionListRef.current) === null || _optionListRef$curren6 === void 0 ? void 0 : _optionListRef$curren6.hoverMove(1);
+        e.preventDefault();
+        break;
+      case 13 || 'Enter':
+        handleEnter();
+        e.preventDefault();
+        e.stopPropagation();
+        break;
+      case 8 || 'Backspace':
+        handleDelete(e);
+        break;
+    }
+  };
+  var handleKeyUp = function handleKeyUp() {};
+  var handleClear = function handleClear(e) {
+    e.stopPropagation();
+    datum.removeAll();
+    setInputText('');
+    if (open) closePop();
+  };
+  var getRenderResult = function getRenderResult(data, index) {
+    if (!renderResultProp) return renderItem(data, index);
+    return typeof renderResultProp === 'function' ? renderResultProp(data, index) : data[renderResultProp];
+  };
+  var getDataByValues = function getDataByValues(values) {
+    return datum.getDataByValues(values, {
+      childrenKey: childrenKey
+    });
+  };
+  var checkUnMatched = function checkUnMatched(item) {
+    return datum.isUnMatchedData(item);
+  };
+  var handleRemove = function handleRemove(item) {
+    return datum.remove(item);
+  };
+  var renderLoading = function renderLoading() {
+    if (loading !== true) {
+      return loading;
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: styles === null || styles === void 0 ? void 0 : styles.loading,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_spin.default, {
+        jssStyle: jssStyle,
+        size: 14,
+        name: "ring"
+      })
+    });
+  };
+
+  // innerTitle 模式
   var renderInnerTitle = (0, _useInnerTitle.default)({
-    open: open,
+    open: open || !!value,
     size: size,
     jssStyle: jssStyle,
     innerTitle: innerTitle
   });
-  var getRenderResult = function getRenderResult(data, index) {
-    if (!renderResultProp) return renderItem(data, index);
-    return typeof renderResultProp === 'function' ? renderResultProp(data, index) : data[renderResultProp];
+  var renderClearable = function renderClearable() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: styles.clearIcon,
+      onClick: handleClear,
+      children: _icons.default.PcCloseCircleFill
+    });
+  };
+  var renderIcon = function renderIcon() {
+    var isEmpty;
+    if (multiple) {
+      isEmpty = !value || Array.isArray(value) && value.length === 0;
+    } else {
+      isEmpty = _hooks.util.isEmpty(value);
+    }
+    if (clearable && !isEmpty && open || clearable && !isEmpty && enter && disabled !== true) {
+      return renderClearable();
+    }
+    if (!multiple && !showArrow) return null;
+    var defaultIcon = compressed ? _icons.default.More : _icons.default.ArrowDown;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _classnames.default)(styles.arrowIcon, open && !compressed && styles.arrowIconOpen),
+      onClick: handleResultClick,
+      children: defaultIcon
+    });
   };
   var renderResult = function renderResult() {
     var result = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _classnames.default)(styles === null || styles === void 0 ? void 0 : styles.result),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_result.default, {
+        trim: trim,
         jssStyle: jssStyle,
-        datum: datum,
+        size: size,
+        separator: separator,
         value: value,
-        data: data,
+        data: groupBy ? groupData : filterData,
         focus: open,
         keygen: keygen,
         disabled: disabled,
+        maxLength: maxLength,
         compressed: compressed,
         compressedBound: compressedBound,
+        compressedClassName: compressedClassName,
         multiple: multiple,
-        prediction: prediction,
+        placeholder: placeholder,
         renderItem: renderItem,
+        childrenKey: childrenKey,
         renderResult: getRenderResult,
         resultClassName: resultClassName,
-        renderUnmatched: renderUnmatched
+        renderUnmatched: renderUnmatched,
+        allowOnFilter: 'onFilter' in props || 'onCreate' in props,
+        focusSelected: focusSelected,
+        inputText: inputText,
+        filterText: filterText,
+        setInputText: setInputText,
+        onFilter: handleFilter,
+        onRef: inputRef,
+        onCreate: onCreate,
+        onInputBlur: handleInputBlur,
+        onResetFilter: onResetFilter,
+        onClearCreatedData: onClearCreatedData,
+        getDataByValues: getDataByValues,
+        checkUnMatched: checkUnMatched,
+        onRemove: handleRemove
       })
     });
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -133,61 +493,126 @@ var Select = function Select(props) {
   };
   var renderList = function renderList() {
     var listProps = {
-      data: data,
+      data: groupBy ? groupData : filterData,
       datum: datum,
+      value: value,
+      size: size,
+      originalData: data,
+      filterData: filterData,
       keygen: keygen,
       width: width,
       height: height,
       jssStyle: jssStyle,
       multiple: multiple,
       optionWidth: optionWidth,
+      groupKey: groupKey,
       lineHeight: lineHeight,
+      columnsTitle: columnsTitle,
+      columnWidth: columnWidth,
       itemsInView: itemsInView,
-      renderItem: renderItem
+      renderItem: renderItem,
+      controlType: controlType,
+      onControlTypeChange: setControlType,
+      closePop: closePop,
+      optionListRef: optionListRef,
+      onOptionClick: handleOptionClick
     };
     // 自定义列
-    // if ((typeof columns === 'number' && columns! >= 1) || columns === -1) {
-    //   return <ColumnsList {...listProps}></ColumnsList>;
-    // }
-
+    if ('columns' in props && typeof columns === 'number' && columns >= 1 || columns === -1) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_listColumns.default, _objectSpread({
+        columns: columns
+      }, listProps));
+    }
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_list.default, _objectSpread({}, listProps));
   };
   var renderTreeList = function renderTreeList() {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_listTree.default, {});
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_listTree.default, {
+      jssStyle: jssStyle,
+      data: filterData,
+      datum: datum,
+      multiple: multiple,
+      keygen: keygen,
+      allowOnFilter: 'onFilter' in props,
+      height: height,
+      defaultExpandAll: defaultExpandAll,
+      defaultExpanded: defaultExpanded,
+      expanded: expanded,
+      onExpand: onExpand,
+      childrenKey: childrenKey,
+      closePop: closePop,
+      renderItem: renderItem
+    });
   };
   var renderOptions = function renderOptions() {
-    if ('treeData' in props) {
-      return renderTreeList();
+    if (loading) return renderLoading();
+    var options = 'treeData' in props ? renderTreeList() : renderList();
+    if (renderOptionList) {
+      return renderOptionList(options, {
+        loading: loading
+      });
+    }
+    return options;
+  };
+  var renderHeader = function renderHeader() {
+    if (!header) return null;
+    return header;
+  };
+  var renderFooter = function renderFooter() {
+    if (!footer) return null;
+    return footer;
+  };
+  var getListStyle = function getListStyle() {
+    var style = {};
+    if (autoAdapt) {
+      if (width) {
+        style.minWidth = width || 'auto';
+      } else {
+        style.width = width || 'auto';
+      }
+      return style;
+    } else {
+      if (columns > 1) {
+        style.width = columns * columnWidth;
+      } else {
+        style.width = ('optionWidth' in props ? optionWidth : undefined) || width || '100%';
+      }
     }
-    return renderList();
+    return style;
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    ref: selectRef,
+    tabIndex: disabled === true ? -1 : 0,
     "data-soui-type": 'input',
     className: rootClass,
-    children: [renderResult(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_absoluteList.AbsoluteList, {
+    style: rootStyle,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onKeyDown: handleKeyDown,
+    onKeyUp: handleKeyUp,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    children: [renderResult(), renderIcon(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_absoluteList.AbsoluteList, {
       adjust: true,
       focus: open,
-      fixedWidth: false,
+      fixedWidth: autoAdapt ? 'min' : true,
       absolute: props.absolute,
       zIndex: props.zIndex,
       position: position,
       popupGap: 4,
       popupEl: popupRef.current,
       parentElement: targetRef.current,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_animationList.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_animationList.default, {
         onRef: popupRef,
         show: open,
         className: (0, _classnames.default)(styles === null || styles === void 0 ? void 0 : styles.pickerWrapper),
         display: 'block',
-        type: 'fade',
+        type: "scale-y",
         duration: 'fast',
-        style: {
-          width: '100%'
-        },
-        children: renderOptions()
+        style: getListStyle(),
+        children: [renderHeader(), renderOptions(), renderFooter()]
       })
     })]
   });
-};
+}
 var _default = Select;
 exports.default = _default;