@sheinx/base 3.0.0-alpha.2 → 3.0.0-alpha.21

package/esm/select/list-columns.js

@@ -1,15 +1,187 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.reduce.js");
+var _react = _interopRequireDefault(require("react"));
+var _hooks = require("@sheinx/hooks");
+var _virtualScroll = require("../virtual-scroll");
+var _listColumnsOption = _interopRequireDefault(require("./list-columns-option"));
+var _simpleCheckbox = _interopRequireDefault(require("../checkbox/simple-checkbox"));
 var _jsxRuntime = require("react/jsx-runtime");
-// import { BaseListProps } from './select.type';
+var ColumnsList = function ColumnsList(props) {
+  var _jssStyle$select;
+  var jssStyle = props.jssStyle,
+    data = props.data,
+    height = props.height,
+    header = props.header,
+    keygen = props.keygen,
+    datum = props.datum,
+    multiple = props.multiple,
+    _props$itemsInView = props.itemsInView,
+    itemsInView = _props$itemsInView === void 0 ? 10 : _props$itemsInView,
+    lineHeightProp = props.lineHeight,
+    loading = props.loading,
+    value = props.value,
+    size = props.size,
+    _props$columns = props.columns,
+    columns = _props$columns === void 0 ? 1 : _props$columns,
+    columnWidth = props.columnWidth,
+    columnsTitle = props.columnsTitle,
+    groupKeyProp = props.groupKey,
+    renderItemProp = props.renderItem,
+    closePop = props.closePop;
+  var groupKey = groupKeyProp;
+  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 ColumnsList = function ColumnsList() {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    children: "ColumnsList"
+  // columns 模式无上下边距，故而 lineHeight 需要调整
+  var getLineHeight = function getLineHeight() {
+    if (lineHeightProp) return lineHeightProp;
+    if (size === 'small') return 24;
+    if (size === 'default') return 32;
+    if (size === 'large') return 40;
+    return 32;
+  };
+  var lineHeight = getLineHeight();
+  var getChecked = function getChecked() {
+    if (!value) return false;
+    if (_hooks.util.isArray(value) && value.length === 0) {
+      return false;
+    }
+    var every = true;
+    var some = false;
+    if (data.length === 0) return false;
+    data.forEach(function (item) {
+      if (groupKey && item[groupKey]) return;
+      if (!datum.check(item)) {
+        every = false;
+      } else {
+        some = true;
+      }
+    });
+    if (every) return true;
+    if (some) return 'indeterminate';
+    return false;
+  };
+  var checked = getChecked();
+  var handleChange = function handleChange(isChecked) {
+    if (!isChecked) {
+      var _next = data.filter(function (item) {
+        return !item[groupKey] && datum.check(item) && !datum.disabledCheck(item);
+      });
+      datum.remove(_next);
+      return;
+    }
+    var next = data.filter(function (item) {
+      return !item[groupKey] && !datum.check(item) && !datum.disabledCheck(item);
+    });
+    datum.add(next);
+  };
+  var renderLoading = function renderLoading() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: "loading"
+    });
+  };
+  var renderHeader = function renderHeader() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: "header"
+    });
+  };
+  var renderGroupTitle = function renderGroupTitle(item, key) {
+    if (item[groupKey]) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: styles.optionGroupTitle,
+        children: item[groupKey]
+      }, key);
+    }
+    return null;
+  };
+  var renderItem = function renderItem(data, currentIndex) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: styles === null || styles === void 0 ? void 0 : styles.columns,
+      style: {
+        height: lineHeight
+      },
+      children: data.map(function (item, index) {
+        var isGroupTitleRow = groupKey && Object.keys(item).length === 0 || item[groupKey];
+        if (isGroupTitleRow) {
+          return renderGroupTitle(item, "__".concat(currentIndex, "__").concat(index, "__").concat(item[groupKey], "__"));
+        }
+        var key = _hooks.util.getKey(keygen, item, currentIndex + index);
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_listColumnsOption.default, {
+          jssStyle: jssStyle,
+          data: item,
+          size: size,
+          datum: datum,
+          multiple: multiple,
+          columnWidth: columnWidth,
+          renderItem: renderItemProp,
+          closePop: closePop
+        }, key);
+      })
+    }, currentIndex);
+  };
+  var renderList = function renderList() {
+    if (loading) return renderLoading();
+    var sliceData = data.reduce(function (red, item) {
+      var lastItem = red[red.length - 1];
+
+      // 如果item有groupKey属性，创建一个新的数组，只包含这个item，剩余位置用空对象填充
+      if (item[groupKey]) {
+        var newItemArray = new Array(columns).fill({});
+        newItemArray[0] = item;
+        red.push(newItemArray);
+        return red;
+      }
+      if (!lastItem) {
+        lastItem = [];
+        red.push(lastItem);
+      }
+      if (lastItem.length >= columns) red.push([item]);else {
+        lastItem.push(item);
+      }
+      return red;
+    }, []);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_virtualScroll.VirtualScrollList, {
+      data: sliceData,
+      tag: 'ul',
+      keygen: keygen,
+      groupKey: groupKey,
+      tagClassName: styles.virtualList,
+      height: height,
+      colNum: columns,
+      lineHeight: lineHeight,
+      rowsInView: itemsInView,
+      renderItem: renderItem
+    });
+  };
+  var renderSelectAll = function renderSelectAll() {
+    if (!multiple) return;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: styles.header,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_simpleCheckbox.default, {
+        className: styles.columnsCheckbox,
+        size: size,
+        jssStyle: jssStyle,
+        checked: checked,
+        onChange: handleChange,
+        children: "\u5168\u9009"
+      }), columnsTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: styles.columnsTitle,
+        children: columnsTitle
+      })]
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: styles.list,
+    children: [header && renderHeader(), multiple && renderSelectAll(), renderList()]
   });
 };
 var _default = ColumnsList;

package/esm/select/list-option.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list-option.d.ts","sourceRoot":"","sources":["list-option.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAGrD,QAAA,MAAM,UAAU,2EAiCf,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"list-option.d.ts","sourceRoot":"","sources":["list-option.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAGrD,QAAA,MAAM,UAAU,2EA8Df,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/esm/select/list-option.js

@@ -10,24 +10,35 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _icons = _interopRequireDefault(require("../icons"));
 var _jsxRuntime = require("react/jsx-runtime");
 var ListOption = function ListOption(props) {
-  var _jssStyle$select, _classNames;
+  var _jssStyle$select, _classNames2;
   var jssStyle = props.jssStyle,
     datum = props.datum,
     index = props.index,
     data = props.data,
     multiple = props.multiple,
-    renderItem = props.renderItem;
+    isHover = props.isHover,
+    closePop = props.closePop,
+    renderItem = props.renderItem,
+    onHover = props.onHover,
+    onOptionClick = props.onOptionClick;
   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 isChecked = datum.check(data);
   var isDisabled = datum.disabledCheck(data);
-  var rootClass = (0, _classnames.default)(styles === null || styles === void 0 ? void 0 : styles.option, "option-".concat(index), {});
-  var innerClass = (0, _classnames.default)(styles === null || styles === void 0 ? void 0 : styles.optionInner, (_classNames = {}, (0, _defineProperty2.default)(_classNames, styles === null || styles === void 0 ? void 0 : styles.optionActive, isChecked), (0, _defineProperty2.default)(_classNames, styles === null || styles === void 0 ? void 0 : styles.optionDisabled, isDisabled), _classNames));
+  var rootClass = (0, _classnames.default)(styles === null || styles === void 0 ? void 0 : styles.option, "option-".concat(index), (0, _defineProperty2.default)({}, styles === null || styles === void 0 ? void 0 : styles.optionHover, isHover));
+  var innerClass = (0, _classnames.default)(styles === null || styles === void 0 ? void 0 : styles.optionInner, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, styles === null || styles === void 0 ? void 0 : styles.optionActive, isChecked), (0, _defineProperty2.default)(_classNames2, styles === null || styles === void 0 ? void 0 : styles.optionDisabled, isDisabled), _classNames2));
+  var handleEnter = function handleEnter() {
+    onHover(index);
+  };
   var handleClick = function handleClick() {
     if (isChecked) {
-      datum.remove(data);
+      if (multiple) datum.remove(data);
     } else {
       datum.add(data);
     }
+    if (!multiple) {
+      closePop();
+    }
+    onOptionClick(data, index);
   };
   var renderCheckedIcon = function renderCheckedIcon() {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -35,12 +46,17 @@ var ListOption = function ListOption(props) {
       children: _icons.default.Check
     });
   };
+  var result = renderItem(data);
+  var title = typeof result === 'string' ? result : '';
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+    tabIndex: -1,
     className: rootClass,
+    title: title,
     onClick: handleClick,
+    onMouseEnter: handleEnter,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: innerClass,
-      children: [renderItem(data), multiple && isChecked && renderCheckedIcon()]
+      children: [result, multiple && isChecked && renderCheckedIcon()]
     })
   });
 };

package/esm/select/list-option.type.d.ts

@@ -1,8 +1,14 @@
+/// <reference types="react" />
 import { JssStyleType, SelectProps, DatumType } from './select.type';
-export interface ListOptionProps<DataItem, Value> extends Pick<SelectProps<DataItem, Value>, 'renderItem' | 'multiple'> {
+export interface ListOptionProps<DataItem, Value> extends Pick<SelectProps<DataItem, Value>, 'multiple'> {
     jssStyle?: JssStyleType;
     index: number;
     data: DataItem;
     datum: DatumType<DataItem, Value>;
+    isHover: boolean;
+    closePop: () => void;
+    renderItem: (data: DataItem, index?: number) => React.ReactNode;
+    onHover: (index: number, force?: boolean) => void;
+    onOptionClick: (data: DataItem, index: number) => void;
 }
 //# sourceMappingURL=list-option.type.d.ts.map

package/esm/select/list-option.type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list-option.type.d.ts","sourceRoot":"","sources":["list-option.type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAErE,MAAM,WAAW,eAAe,CAAC,QAAQ,EAAE,KAAK,CAC9C,SAAQ,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACrE,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,SAAS,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;CACnC"}
+{"version":3,"file":"list-option.type.d.ts","sourceRoot":"","sources":["list-option.type.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAErE,MAAM,WAAW,eAAe,CAAC,QAAQ,EAAE,KAAK,CAC9C,SAAQ,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC;IACtD,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,SAAS,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAChE,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,aAAa,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACxD"}

package/esm/select/list-tree.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
-declare const TreeList: () => JSX.Element;
+import { ListTreeProps } from './list-tree.type';
+declare const TreeList: <DataItem, Value>(props: ListTreeProps<DataItem, Value>) => JSX.Element;
 export default TreeList;
 //# sourceMappingURL=list-tree.d.ts.map

package/esm/select/list-tree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list-tree.d.ts","sourceRoot":"","sources":["list-tree.tsx"],"names":[],"mappings":";AAAA,QAAA,MAAM,QAAQ,mBAEb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"list-tree.d.ts","sourceRoot":"","sources":["list-tree.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGjD,QAAA,MAAM,QAAQ,yEA2Eb,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/esm/select/list-tree.js

@@ -1,13 +1,81 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _tree = _interopRequireDefault(require("../tree"));
 var _jsxRuntime = require("react/jsx-runtime");
-var TreeList = function TreeList() {
+var TreeList = function TreeList(props) {
+  var _jssStyle$select;
+  var jssStyle = props.jssStyle,
+    data = props.data,
+    keygen = props.keygen,
+    multiple = props.multiple,
+    height = props.height,
+    allowOnFilter = props.allowOnFilter,
+    renderItemProp = props.renderItem,
+    datum = props.datum,
+    expanded = props.expanded,
+    childrenKey = props.childrenKey,
+    defaultExpanded = props.defaultExpanded,
+    defaultExpandAll = props.defaultExpandAll,
+    onExpand = props.onExpand,
+    closePop = props.closePop;
+  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)(styles.tree);
+  var style = {
+    maxHeight: height
+  };
+  var getContentClass = function getContentClass(data) {
+    var isDisabled = datum.disabledCheck(data);
+    if (isDisabled) {
+      return (0, _classnames.default)(styles.optionDisabled);
+    }
+    var isCheck = datum.check(data);
+    if (isCheck) {
+      return (0, _classnames.default)(styles.optionActive);
+    }
+    return '';
+  };
+  var handleClick = function handleClick(data) {
+    if (datum.disabledCheck(data)) return;
+    var isCheck = datum.check(data);
+    if (isCheck) {
+      datum.remove(data);
+      return;
+    }
+    datum.add(data);
+    if (!multiple) {
+      closePop();
+    }
+  };
+
+  // tree 的 renderItem 与 list 的 renderItem 不同，需要转换，且 tree 无 index 返回
+  var renderItem = function renderItem(item) {
+    return renderItemProp(item);
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    children: "treeList"
+    className: rootClass,
+    style: style,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tree.default, {
+      line: false,
+      jssStyle: jssStyle,
+      onClick: handleClick,
+      data: data,
+      expanded: allowOnFilter ? expanded : undefined,
+      keygen: keygen,
+      defaultExpanded: defaultExpanded,
+      defaultExpandAll: defaultExpandAll,
+      childrenKey: childrenKey,
+      onExpand: onExpand,
+      nodeClass: (0, _classnames.default)(styles.treeOption),
+      contentClass: getContentClass,
+      renderItem: renderItem
+      // isControlled={'expanded' in props}
+    })
   });
 };
 var _default = TreeList;

package/esm/select/list-tree.type.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { KeygenType, ObjectKey } from '@sheinx/hooks';
+import { JssStyleType, SelectProps, DatumType } from './select.type';
+export interface ListTreeProps<DataItem, Value> extends Pick<SelectProps<DataItem, Value>, 'multiple' | 'defaultExpandAll' | 'defaultExpanded' | 'onExpand' | 'expanded'> {
+    jssStyle?: JssStyleType;
+    height: number;
+    data: DataItem[];
+    keygen: KeygenType<DataItem>;
+    childrenKey: ObjectKey<DataItem>;
+    allowOnFilter: boolean;
+    datum: DatumType<DataItem, Value>;
+    closePop: () => void;
+    renderItem: (data: DataItem, index?: number) => React.ReactNode;
+}
+//# sourceMappingURL=list-tree.type.d.ts.map

package/esm/select/list-tree.type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-tree.type.d.ts","sourceRoot":"","sources":["list-tree.type.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAErE,MAAM,WAAW,aAAa,CAAC,QAAQ,EAAE,KAAK,CAC5C,SAAQ,IAAI,CACV,WAAW,CAAC,QAAQ,EAAE,KAAK,CAAC,EAC5B,UAAU,GAAG,kBAAkB,GAAG,iBAAiB,GAAG,UAAU,GAAG,UAAU,CAC9E;IACD,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,MAAM,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IAC7B,WAAW,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC;IACjC,aAAa,EAAE,OAAO,CAAC;IACvB,KAAK,EAAE,SAAS,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;IAClC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CACjE"}

package/esm/select/list-tree.type.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/esm/select/list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["list.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAI9C,QAAA,MAAM,IAAI,yEAoET,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["list.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAK9C,QAAA,MAAM,IAAI,yEAmMT,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/esm/select/list.js

@@ -1,38 +1,135 @@
 "use strict";
 
+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 _react = _interopRequireDefault(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _hooks = require("@sheinx/hooks");
 var _virtualScroll = require("../virtual-scroll");
 var _listOption = _interopRequireDefault(require("./list-option"));
 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; }
 var List = function List(props) {
-  var _jssStyle$select;
+  var _jssStyle$select, _classNames;
   var jssStyle = props.jssStyle,
     data = props.data,
     height = props.height,
-    optionWidth = props.optionWidth,
+    size = props.size,
     header = props.header,
     keygen = props.keygen,
     datum = props.datum,
     multiple = props.multiple,
+    groupKey = props.groupKey,
     _props$itemsInView = props.itemsInView,
     itemsInView = _props$itemsInView === void 0 ? 10 : _props$itemsInView,
-    _props$lineHeight = props.lineHeight,
-    lineHeight = _props$lineHeight === void 0 ? 34 : _props$lineHeight,
+    lineHeightProp = props.lineHeight,
     loading = props.loading,
+    controlType = props.controlType,
+    hideCreateOption = props.hideCreateOption,
+    optionListRef = props.optionListRef,
     _props$renderItem = props.renderItem,
     renderItemProp = _props$renderItem === void 0 ? function (d) {
       return d;
-    } : _props$renderItem;
-  var style = {
-    width: optionWidth,
-    height: height
-  };
+    } : _props$renderItem,
+    closePop = props.closePop,
+    onControlTypeChange = props.onControlTypeChange,
+    onOptionClick = props.onOptionClick;
   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)(styles.list, (_classNames = {}, (0, _defineProperty2.default)(_classNames, styles.controlMouse, controlType === 'mouse'), (0, _defineProperty2.default)(_classNames, styles.controlKeyboard, controlType === 'keyboard'), _classNames));
+  var _useState = (0, _react.useState)(hideCreateOption ? -1 : 0),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    hoverIndex = _useState2[0],
+    setHoverIndex = _useState2[1];
+  var virtualRef = (0, _react.useRef)({
+    scrollByStep: undefined,
+    getCurrentIndex: undefined,
+    getHoverIndex: undefined
+  });
+  var getHoverIndex = (0, _hooks.usePersistFn)(function () {
+    return hoverIndex;
+  });
+  var getLineHeight = function getLineHeight() {
+    if (lineHeightProp) return lineHeightProp;
+    if (size === 'small') return 26;
+    if (size === 'default') return 34;
+    if (size === 'large') return 42;
+    return 34;
+  };
+  var lineHeight = getLineHeight();
+  var handleHover = (0, _hooks.usePersistFn)(function (index, force) {
+    if ((controlType === 'mouse' || force) && hoverIndex !== index) {
+      setHoverIndex(index);
+    }
+  });
+  var handleHoverByStep = (0, _hooks.usePersistFn)(function (step) {
+    var next = hoverIndex + step;
+    handleHover(next, true);
+  });
+  var handleMove = (0, _hooks.usePersistFn)(function (step, force) {
+    var _virtualRef$current$g, _virtualRef$current2, _virtualRef$current$g2, _virtualRef$current3;
+    if (force) {
+      var _virtualRef$current, _virtualRef$current$s;
+      setHoverIndex(step);
+      (_virtualRef$current = virtualRef.current) === null || _virtualRef$current === void 0 ? void 0 : (_virtualRef$current$s = _virtualRef$current.scrollByStep) === null || _virtualRef$current$s === void 0 ? void 0 : _virtualRef$current$s.call(_virtualRef$current, step);
+      return;
+    }
+    var max = data.length;
+    var listHeight = height;
+    var nextHoverIndex = hoverIndex;
+    var currentHoverData = data[hoverIndex];
+    // 遇到 group item 数据时，跳过
+    if (currentHoverData && currentHoverData[groupKey]) {
+      if (step > 0) nextHoverIndex += 1;else nextHoverIndex -= 1;
+    }
+    nextHoverIndex = nextHoverIndex + step;
+    if (nextHoverIndex >= max) {
+      nextHoverIndex = 0;
+    }
+    if (nextHoverIndex < 0) nextHoverIndex = max;
+    setHoverIndex(nextHoverIndex);
+    var currentIndex = (_virtualRef$current$g = (_virtualRef$current2 = virtualRef.current).getCurrentIndex) === null || _virtualRef$current$g === void 0 ? void 0 : _virtualRef$current$g.call(_virtualRef$current2);
+    // 列表中，能容纳完整高度项的个数
+    var maxViewCount = Math.floor(listHeight / lineHeight);
+    // 列表中，未完全展示的那一项被遮挡部分的高度
+    var overViewHeight = Math.ceil(listHeight / lineHeight) * lineHeight - listHeight;
+    var top = (_virtualRef$current$g2 = (_virtualRef$current3 = virtualRef.current).getTop) === null || _virtualRef$current$g2 === void 0 ? void 0 : _virtualRef$current$g2.call(_virtualRef$current3);
+
+    // 触底，回到顶部
+    if (nextHoverIndex === 0) {
+      var _virtualRef$current$s2, _virtualRef$current4;
+      (_virtualRef$current$s2 = (_virtualRef$current4 = virtualRef.current).scrollByStep) === null || _virtualRef$current$s2 === void 0 ? void 0 : _virtualRef$current$s2.call(_virtualRef$current4, -currentIndex, 0);
+      return;
+    }
+    if (nextHoverIndex === max) {
+      var _virtualRef$current$s3, _virtualRef$current5;
+      (_virtualRef$current$s3 = (_virtualRef$current5 = virtualRef.current).scrollByStep) === null || _virtualRef$current$s3 === void 0 ? void 0 : _virtualRef$current$s3.call(_virtualRef$current5, nextHoverIndex, overViewHeight);
+      return;
+    }
+
+    // 向上滚动一格
+    if (nextHoverIndex <= currentIndex) {
+      var _virtualRef$current$s4, _virtualRef$current6;
+      (_virtualRef$current$s4 = (_virtualRef$current6 = virtualRef.current).scrollByStep) === null || _virtualRef$current$s4 === void 0 ? void 0 : _virtualRef$current$s4.call(_virtualRef$current6, nextHoverIndex === currentIndex ? 0 : -1, top !== 0 ? 0 : undefined);
+    }
+
+    // 向下滚动一格
+    if (maxViewCount && listHeight % lineHeight !== 0 && listHeight % lineHeight !== listHeight) {
+      if (nextHoverIndex >= currentIndex + maxViewCount) {
+        var _virtualRef$current$s5, _virtualRef$current7;
+        (_virtualRef$current$s5 = (_virtualRef$current7 = virtualRef.current).scrollByStep) === null || _virtualRef$current$s5 === void 0 ? void 0 : _virtualRef$current$s5.call(_virtualRef$current7, nextHoverIndex === currentIndex + maxViewCount ? 0 : 1, overViewHeight);
+      }
+    }
+  });
   var renderLoading = function renderLoading() {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       children: "loading"
@@ -47,30 +144,54 @@ var List = function List(props) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_listOption.default, {
         datum: datum,
+        closePop: closePop,
         jssStyle: jssStyle,
         index: index,
         data: item,
+        isHover: hoverIndex === index,
         multiple: multiple,
-        renderItem: renderItemProp
+        renderItem: renderItemProp,
+        onHover: handleHover,
+        onOptionClick: onOptionClick
       })
     }, key);
   };
+  var renderGroupTitle = function renderGroupTitle(d) {
+    var title = d[groupKey];
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: styles.optionGroupTitle,
+      title: title,
+      children: title
+    });
+  };
   var renderList = function renderList() {
     if (loading) return renderLoading();
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_virtualScroll.VirtualScrollList, {
+      virtualRef: virtualRef,
       data: data,
       keygen: keygen,
       tag: 'ul',
+      groupKey: groupKey,
       tagClassName: styles.virtualList,
       height: height,
       lineHeight: lineHeight,
       rowsInView: itemsInView,
-      renderItem: renderItem
+      renderItem: renderItem,
+      customRenderItem: renderGroupTitle,
+      onControlTypeChange: onControlTypeChange
     });
   };
+  (0, _react.useEffect)(function () {
+    if (optionListRef) {
+      optionListRef.current = {
+        hoverMove: handleMove,
+        hoverHover: handleHoverByStep,
+        getHoverIndex: getHoverIndex
+      };
+    }
+  }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: styles.list,
-    style: style,
+    className: rootClass,
     children: [header && renderHeader(), renderList()]
   });
 };

package/esm/select/result-input.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ResultInputProps } from './result-input.type';
+declare const ResultInput: (props: ResultInputProps) => JSX.Element;
+export default ResultInput;
+//# sourceMappingURL=result-input.d.ts.map

package/esm/select/result-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"result-input.d.ts","sourceRoot":"","sources":["result-input.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAGvD,QAAA,MAAM,WAAW,UAAW,gBAAgB,gBAsF3C,CAAC;AAEF,eAAe,WAAW,CAAC"}