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

package/cjs/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/cjs/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/cjs/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"}

package/cjs/select/result-input.js

@@ -0,0 +1,101 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.js");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.string.trim.js");
+var _react = _interopRequireWildcard(require("react"));
+var _result = require("../date-picker/result");
+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 ResultInput = function ResultInput(props) {
+  var _jssStyle$select;
+  var jssStyle = props.jssStyle,
+    value = props.value,
+    values = props.values,
+    inputText = props.inputText,
+    focus = props.focus,
+    trim = props.trim,
+    maxLength = props.maxLength,
+    multiple = props.multiple,
+    onRef = props.onRef,
+    onChange = props.onChange,
+    onBindInput = props.onBindInput,
+    onInputBlur = props.onInputBlur,
+    onResetFilter = props.onResetFilter;
+  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 mirrorRef = (0, _react.useRef)(null);
+  var inputRef = (0, _react.useRef)();
+  var bindInputRef = function bindInputRef(ref) {
+    inputRef.current = ref;
+  };
+  var handleBlur = function handleBlur(e) {
+    if (e.target.value === inputText) {
+      return;
+    }
+    if (trim) {
+      return onInputBlur === null || onInputBlur === void 0 ? void 0 : onInputBlur(inputText === null || inputText === void 0 ? void 0 : inputText.trim());
+    }
+    onInputBlur === null || onInputBlur === void 0 ? void 0 : onInputBlur(inputText);
+  };
+
+  // 设置 input 宽度
+  (0, _react.useEffect)(function () {
+    if (!multiple) return;
+    if (!mirrorRef.current) return;
+    var input = inputRef.current;
+    input.style.width = "".concat(mirrorRef.current.offsetWidth, "px");
+  }, [inputText, focus, value]);
+
+  // 选中结果后，聚焦并全选 input
+  (0, _react.useEffect)(function () {
+    if (!inputRef.current || !multiple || !focus) return;
+    inputRef.current.focus();
+    inputRef.current.select();
+  }, [values]);
+
+  // 聚焦时重置 filter
+  (0, _react.useEffect)(function () {
+    onResetFilter();
+    if (!focus) return;
+    if (inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [focus]);
+
+  // 注册 input ref
+  (0, _react.useEffect)(function () {
+    if (!inputRef.current) return;
+    onRef.current = inputRef.current;
+    onBindInput === null || onBindInput === void 0 ? void 0 : onBindInput(inputRef.current);
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_result.Input, {
+      onRef: bindInputRef,
+      style: {
+        width: multiple ? 12 : '100%'
+      },
+      value: inputText,
+      maxLength: maxLength,
+      onChange: onChange,
+      onBlur: handleBlur,
+      open: focus,
+      onClick: function onClick(e) {
+        e === null || e === void 0 ? void 0 : e.stopPropagation();
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: styles.inputMirror,
+      ref: mirrorRef,
+      children: inputText || value
+    })]
+  });
+};
+var _default = ResultInput;
+exports.default = _default;

package/cjs/select/result-input.type.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { CommonType } from '../common/type';
+import { JssStyleType } from './select.type';
+export interface ResultInputProps extends Pick<CommonType, 'style' | 'className'> {
+    jssStyle?: JssStyleType;
+    value?: string;
+    focus?: boolean;
+    open?: boolean;
+    inputText?: string;
+    filterText?: string;
+    trim?: boolean;
+    values: any;
+    multiple?: boolean;
+    maxLength?: number;
+    onChange: (value: string) => void;
+    onRef: React.MutableRefObject<HTMLInputElement | undefined>;
+    onBindInput?: (input: HTMLInputElement) => void;
+    onInputBlur?: (text?: string) => void;
+    onResetFilter: () => void;
+    onClearCreatedData: () => void;
+}
+//# sourceMappingURL=result-input.type.d.ts.map

package/cjs/select/result-input.type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"result-input.type.d.ts","sourceRoot":"","sources":["result-input.type.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,UAAU,EAAE,OAAO,GAAG,WAAW,CAAC;IAC/E,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,GAAG,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,EAAE,KAAK,CAAC,gBAAgB,CAAC,gBAAgB,GAAG,SAAS,CAAC,CAAC;IAC5D,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAChD,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,kBAAkB,EAAE,MAAM,IAAI,CAAC;CAChC"}

package/cjs/select/result-input.type.js

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

package/cjs/select/result-more.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="react" />
-declare const More: () => JSX.Element;
+import { ReultMoreProps } from './result-more.type';
+export declare function getResetMore(onFilter: boolean, container: HTMLElement, doms: NodeListOf<HTMLElement>): number;
+declare const More: <DataItem, Value>(props: ReultMoreProps<DataItem, Value>) => JSX.Element;
 export default More;
 //# sourceMappingURL=result-more.d.ts.map

package/cjs/select/result-more.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"result-more.d.ts","sourceRoot":"","sources":["result-more.tsx"],"names":[],"mappings":";AAAA,QAAA,MAAM,IAAI,mBAET,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"result-more.d.ts","sourceRoot":"","sources":["result-more.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAKpD,wBAAgB,YAAY,CAC1B,QAAQ,EAAE,OAAO,EACjB,SAAS,EAAE,WAAW,EACtB,IAAI,EAAE,UAAU,CAAC,WAAW,CAAC,UA6D9B;AAED,QAAA,MAAM,IAAI,0EAyDT,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/cjs/select/result-more.js

@@ -1,13 +1,136 @@
 "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;
+exports.getResetMore = getResetMore;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+require("core-js/modules/es.array.from.js");
+require("core-js/modules/es.array.map.js");
+var _react = _interopRequireWildcard(require("react"));
+var _hooks = require("@sheinx/hooks");
+var _tag = _interopRequireDefault(require("../tag"));
+var _popover = _interopRequireDefault(require("../popover"));
 var _jsxRuntime = require("react/jsx-runtime");
-var More = function More() {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    children: "More"
+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 getResetMore(onFilter, container, doms) {
+  if (!container || !doms || !doms.length) return -1;
+  var items = Array.from(doms);
+  var style = getComputedStyle(container);
+  var clientWidth = container.clientWidth;
+  var paddingLeft = (0, _hooks.parsePxToNumber)(style.paddingLeft);
+  var paddingRight = (0, _hooks.parsePxToNumber)(style.paddingRight);
+  var minFilterWidth = onFilter ? 16 : 0;
+  var contentWidth = clientWidth - paddingLeft - paddingRight - minFilterWidth - 1;
+  var hideEl = items.pop();
+  var hideElStyle = getComputedStyle(hideEl);
+  var hideMargin = (0, _hooks.parsePxToNumber)(hideElStyle.marginLeft) + (0, _hooks.parsePxToNumber)(hideElStyle.marginRight);
+  var num = 0;
+  var sumWidth = 0;
+  var itemWidthArr = items.map(function (item) {
+    var itemStyle = getComputedStyle(item);
+    var itemLen = item.offsetWidth + (0, _hooks.parsePxToNumber)(itemStyle.marginLeft) + (0, _hooks.parsePxToNumber)(itemStyle.marginRight);
+    sumWidth += itemLen;
+    return itemLen;
+  });
+  if (sumWidth <= contentWidth) {
+    num = -1;
+  } else {
+    var len = 0;
+    for (var i = 0; i < itemWidthArr.length; i++) {
+      var itemLen = itemWidthArr[i];
+      // number length
+      var resetNum = items.length - 1 - i;
+      var moreWidth = void 0;
+      if (resetNum <= 0) {
+        moreWidth = 0;
+      } else {
+        var reset = "+".concat(resetNum);
+        hideEl.childNodes[0].innerText = reset;
+        // (+num) width
+        moreWidth = hideEl.offsetWidth + hideMargin;
+      }
+      len += itemLen;
+      if (len > contentWidth - moreWidth) {
+        break;
+      }
+      num += 1;
+      if (i === items.length - 1) {
+        // not show more
+        num = -1;
+      }
+    }
+  }
+  // at least show one
+  if (num === 0 && itemWidthArr[0]) {
+    num = 1;
+  }
+  return num;
+}
+var More = function More(props) {
+  var _jssStyle$select;
+  var jssStyle = props.jssStyle,
+    data = props.data,
+    showNum = props.showNum,
+    size = props.size,
+    compressed = props.compressed,
+    compressedClassName = props.compressedClassName;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  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 shouldShowMore = showNum < 0 || showNum >= data.length;
+  var before = [];
+  var after = [];
+  var itemsLength = 0;
+  var tagStlye = shouldShowMore ? {
+    position: 'absolute',
+    zIndex: -100,
+    userSelect: 'none',
+    msUserSelect: 'none',
+    contain: 'layout'
+  } : {};
+  if (!shouldShowMore) {
+    before = new Array(showNum).fill(undefined).map(function (_item, index) {
+      return data[index];
+    });
+    after = new Array(data.length - showNum).fill(undefined).map(function (_item, index) {
+      return data[showNum + index];
+    });
+    itemsLength = after.length;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
+    children: [shouldShowMore ? data : before, /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+      style: {
+        display: 'inline-flex'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_tag.default, {
+        className: styles.tag,
+        jssStyle: jssStyle,
+        size: size,
+        style: tagStlye,
+        mode: visible ? 'fill' : 'bright',
+        color: visible ? 'info' : 'default',
+        children: shouldShowMore ? '+' : "+".concat(itemsLength)
+      }, 'more'), /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.default, {
+        jssStyle: jssStyle,
+        className: compressedClassName,
+        visible: visible,
+        onVisibleChange: setVisible,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: styles.moreWrapper,
+          children: [compressed === 'no-repeat' ? null : before, after]
+        })
+      })]
+    })]
   });
 };
 var _default = More;

package/cjs/select/result-more.type.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { SelectProps } from './select.type';
+export interface ReultMoreProps<DataItem, Value> extends Pick<SelectProps<DataItem, Value>, 'jssStyle' | 'size' | 'multiple' | 'placeholder' | 'keygen' | 'value' | 'compressed' | 'compressedBound' | 'compressedClassName' | 'disabled' | 'onFilter'> {
+    data: React.ReactNode[];
+    more?: number;
+    showNum?: number;
+}
+//# sourceMappingURL=result-more.type.d.ts.map

package/cjs/select/result-more.type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"result-more.type.d.ts","sourceRoot":"","sources":["result-more.type.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,MAAM,WAAW,cAAc,CAAC,QAAQ,EAAE,KAAK,CAC7C,SAAQ,IAAI,CACV,WAAW,CAAC,QAAQ,EAAE,KAAK,CAAC,EAC1B,UAAU,GACV,MAAM,GACN,UAAU,GACV,aAAa,GACb,QAAQ,GACR,OAAO,GACP,YAAY,GACZ,iBAAiB,GACjB,qBAAqB,GACrB,UAAU,GACV,UAAU,CACb;IACD,IAAI,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB"}

package/cjs/select/result-more.type.js

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

package/cjs/select/result.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { ResultProps } from './result.type';
-declare const Result: <DataItem, Value>(props: ResultProps<DataItem, Value extends (infer U)[] ? U : Value>) => JSX.Element;
+declare const Result: <DataItem, Value>(props: ResultProps<DataItem, Value>) => JSX.Element;
 export default Result;
 //# sourceMappingURL=result.d.ts.map

package/cjs/select/result.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"result.d.ts","sourceRoot":"","sources":["result.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,WAAW,EAAc,MAAM,eAAe,CAAC;AAQxD,QAAA,MAAM,MAAM,uGA2HX,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"result.d.ts","sourceRoot":"","sources":["result.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAS5C,QAAA,MAAM,MAAM,uEA6TX,CAAC;AAEF,eAAe,MAAM,CAAC"}