@para-ui/core 4.0.19 → 4.0.20

package/ComboSelect/index.js

@@ -1,6 +1,6 @@
 import { a as __awaiter } from '../_verture/tslib.es6-55ed4bd2.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React__default, { useRef, useState, useMemo, useImperativeHandle, useEffect } from 'react';
+import React__default, { useRef, useState, useEffect, useMemo, useImperativeHandle } from 'react';
 import Down from '@para-ui/icons/Down';
 import SearchIcon from '@para-ui/icons/Search';
 import CloseIcon from '@para-ui/icons/Close';
@@ -96,7 +96,7 @@ var localeJson = {
   en
 };
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/18 上午10:16\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-comboselect .comboselect-wrapper {\n  position: relative;\n  display: flex;\n  width: 100%;\n  min-height: 32px;\n  padding: 0 10px;\n  font-size: 14px;\n  border: 1px solid rgb(212, 218, 227);\n  border-radius: 4px;\n  background-color: rgb(255, 255, 255);\n  cursor: pointer;\n  transition: 0.3s;\n}\n.paraui-v4-comboselect .comboselect-wrapper:hover {\n  border-color: rgb(87, 131, 235);\n}\n.paraui-v4-comboselect .comboselect-wrapper .comboselect-placeholder {\n  position: absolute;\n  top: 50%;\n  left: 12px;\n  right: 42px;\n  transform: translateY(-50%);\n  font-size: 14px;\n  color: rgb(161, 168, 179);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.paraui-v4-comboselect .comboselect-wrapper .comboselect-arrow {\n  position: absolute;\n  top: 5px;\n  right: 12px;\n  line-height: 0;\n  transition: 0.3s;\n}\n.paraui-v4-comboselect .comboselect-wrapper .comboselect-arrow svg {\n  color: rgb(92, 101, 115);\n  font-size: 20px;\n}\n.paraui-v4-comboselect .comboselect-wrapper .comboselect-clear {\n  position: absolute;\n  top: 7px;\n  right: 12px;\n  opacity: 0;\n  line-height: 0;\n  cursor: pointer;\n  transition: 0.3s;\n}\n.paraui-v4-comboselect .comboselect-wrapper .comboselect-clear svg {\n  color: rgb(161, 168, 179);\n  font-size: 16px;\n}\n.paraui-v4-comboselect .comboselect-wrapper .comboselect-clear svg:hover {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-comboselect .comboselect-wrapper .comboselect-overflow {\n  position: relative;\n  display: flex;\n  width: 100%;\n  flex: auto;\n  flex-wrap: wrap;\n  padding: 3px 30px 0 0;\n}\n.paraui-v4-comboselect .comboselect-wrapper .comboselect-overflow-single.comboselect-overflow {\n  height: 30px;\n  padding: 0 30px 0 0;\n  align-items: center;\n  overflow: hidden;\n}\n.paraui-v4-comboselect .comboselect-wrapper .comboselect-overflow-single.comboselect-overflow .comboselect-single-content {\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 14px;\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-comboselect .comboselect-wrapper .comboselect-overflow-item {\n  flex: none;\n  max-width: 100%;\n}\n.paraui-v4-comboselect .comboselect-wrapper .comboselect-overflow-item .comboselect-item {\n  display: inline-flex;\n  align-items: center;\n  padding: 0 10px;\n  height: 24px;\n  margin: 0 4px 3px 0;\n  max-width: 100%;\n  color: rgb(29, 33, 38);\n  line-height: 24px;\n  background-color: rgb(234, 236, 241);\n  border-radius: 2px;\n  user-select: none;\n  transition: 0.3s;\n  cursor: default;\n}\n.paraui-v4-comboselect .comboselect-wrapper .comboselect-overflow-item .comboselect-item .comboselect-item-content {\n  display: inline-block;\n  margin-right: 4px;\n  overflow: hidden;\n  font-size: 12px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.paraui-v4-comboselect .comboselect-wrapper .comboselect-overflow-item .comboselect-item .comboselect-item-remove {\n  display: inline-flex;\n  cursor: pointer;\n}\n.paraui-v4-comboselect .comboselect-wrapper .comboselect-overflow-item .comboselect-item .comboselect-item-remove svg {\n  font-size: 16px;\n  color: inherit;\n}\n.paraui-v4-comboselect .comboselect-wrapper .comboselect-overflow-item .comboselect-item .comboselect-item-remove svg:hover {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-comboselect .comboselect-wrapper .comboselect-overflow-item .comboselect-item--disabled {\n  color: rgb(161, 168, 179);\n  background-color: rgb(212, 218, 227);\n  cursor: not-allowed;\n}\n.paraui-v4-comboselect .comboselect-wrapper .comboselect-overflow-item .comboselect-item--disabled .comboselect-item-remove {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-comboselect .comboselect-wrapper .comboselect-overflow-item .comboselect-item--unclosable .comboselect-item-content {\n  margin-right: 0;\n}\n.paraui-v4-comboselect-focused .comboselect-wrapper {\n  border-color: rgb(46, 101, 230);\n}\n.paraui-v4-comboselect-focused .comboselect-wrapper .comboselect-arrow {\n  transform: rotate(180deg);\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-comboselect-focused .comboselect-wrapper .comboselect-arrow svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-comboselect-disabled {\n  cursor: not-allowed;\n}\n.paraui-v4-comboselect-disabled .comboselect-wrapper {\n  background-color: rgb(247, 248, 250);\n  border-color: rgb(212, 218, 227);\n  pointer-events: none;\n}\n.paraui-v4-comboselect-disabled .comboselect-single-content {\n  color: rgb(92, 101, 115) !important;\n}\n.paraui-v4-comboselect-small .comboselect-wrapper, .paraui-v4-comboselect-medium .comboselect-wrapper {\n  min-height: 28px;\n}\n.paraui-v4-comboselect-small .comboselect-wrapper .comboselect-overflow, .paraui-v4-comboselect-medium .comboselect-wrapper .comboselect-overflow {\n  padding-top: 3px;\n}\n.paraui-v4-comboselect-small .comboselect-wrapper .comboselect-overflow-item .comboselect-item, .paraui-v4-comboselect-medium .comboselect-wrapper .comboselect-overflow-item .comboselect-item {\n  height: 20px;\n  margin-bottom: 3px;\n  line-height: 20px;\n}\n.paraui-v4-comboselect-small .comboselect-wrapper .comboselect-overflow-single.comboselect-overflow, .paraui-v4-comboselect-medium .comboselect-wrapper .comboselect-overflow-single.comboselect-overflow {\n  height: 26px;\n}\n.paraui-v4-comboselect-small .comboselect-wrapper .comboselect-arrow, .paraui-v4-comboselect-medium .comboselect-wrapper .comboselect-arrow {\n  top: 3px;\n}\n.paraui-v4-comboselect-small .comboselect-wrapper .comboselect-clear, .paraui-v4-comboselect-medium .comboselect-wrapper .comboselect-clear {\n  top: 5px;\n}\n.paraui-v4-comboselect-error .comboselect-wrapper {\n  border-color: rgb(244, 66, 66);\n}\n.paraui-v4-comboselect-error .comboselect-wrapper:hover {\n  border-color: rgb(244, 66, 66);\n}\n.paraui-v4-comboselect-clear .comboselect-wrapper:hover .comboselect-arrow {\n  opacity: 0;\n}\n.paraui-v4-comboselect-clear .comboselect-wrapper:hover .comboselect-clear {\n  opacity: 1;\n}\n.paraui-v4-comboselect-non-popup {\n  border: 1px solid rgb(212, 218, 227);\n  border-radius: 4px;\n  background-color: rgb(255, 255, 255);\n}\n.paraui-v4-comboselect-non-popup .comboselect-wrapper {\n  border: none;\n  border-bottom: 1px solid rgb(212, 218, 227);\n  border-bottom-right-radius: 0;\n  border-bottom-left-radius: 0;\n  cursor: default;\n}\n.paraui-v4-comboselect-non-popup .comboselect-wrapper:hover {\n  border-color: rgb(212, 218, 227);\n}\n.paraui-v4-comboselect-non-popup .comboselect-non-popup-content {\n  position: relative;\n}\n.paraui-v4-comboselect-non-popup .comboselect-non-popup-content .comboselect-search {\n  display: flex;\n  align-items: center;\n  height: 40px;\n  border-bottom: 1px solid rgb(234, 236, 241);\n}\n.paraui-v4-comboselect-non-popup .comboselect-non-popup-content .comboselect-search-icon {\n  line-height: 0;\n  cursor: pointer;\n}\n.paraui-v4-comboselect-non-popup .comboselect-non-popup-content .comboselect-search-icon svg {\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-comboselect-non-popup .comboselect-non-popup-content .comboselect-search-input {\n  width: 100%;\n  flex: auto;\n  border: none;\n}\n.paraui-v4-comboselect-non-popup .comboselect-non-popup-content .comboselect-search-input .text-field-content {\n  border: unset;\n  height: unset;\n  border-radius: unset;\n}\n.paraui-v4-comboselect-non-popup .comboselect-non-popup-content .comboselect-search-input::placeholder {\n  color: rgb(161, 168, 179);\n  font-size: 14px;\n}\n.paraui-v4-comboselect-non-popup .comboselect-non-popup-content .comboselect-search .comboselect-clear-icon {\n  display: inline-flex;\n  cursor: pointer;\n}\n.paraui-v4-comboselect-non-popup .comboselect-non-popup-content .comboselect-search .comboselect-clear-icon svg {\n  font-size: 16px;\n  color: rgb(161, 168, 179);\n  transition: all 0.3s;\n}\n.paraui-v4-comboselect-non-popup .comboselect-non-popup-content .comboselect-search .comboselect-clear-icon svg:hover {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-comboselect-non-popup .comboselect-non-popup-content .comboselect-table {\n  padding-bottom: 10px;\n}\n.paraui-v4-comboselect-non-popup .comboselect-non-popup-content .comboselect-table .table-pagination {\n  height: 52px;\n  padding-right: 20px;\n}\n.paraui-v4-comboselect-non-popup .comboselect-non-popup-content .comboselect-table .paraui-v4-table {\n  box-shadow: none;\n}\n.paraui-v4-comboselect-non-popup .comboselect-non-popup-content .comboselect-tree {\n  padding: 6px 7px;\n}\n.paraui-v4-comboselect-non-popup .comboselect-non-popup-content .comboselect-tree .paraui-v4-tree-empty {\n  padding: 52px 0 73px 0;\n}\n.paraui-v4-comboselect-dropdown .comboselect-dropdown-wrapper {\n  position: relative;\n  color: initial;\n  overflow: hidden;\n  padding: 4px 0;\n}\n.paraui-v4-comboselect-dropdown .comboselect-dropdown-wrapper.show-search {\n  padding-top: 0;\n}\n.paraui-v4-comboselect-dropdown .comboselect-dropdown-wrapper.mode-table {\n  padding-top: 0;\n}\n.paraui-v4-comboselect-dropdown .dropdown-content {\n  display: flex;\n  flex-direction: column;\n}\n.paraui-v4-comboselect-dropdown .comboselect-search {\n  display: flex;\n  align-items: center;\n  height: 30px;\n  min-height: 30px;\n  border-bottom: 1px solid rgb(234, 236, 241);\n}\n.paraui-v4-comboselect-dropdown .comboselect-search-icon {\n  line-height: 0;\n  cursor: pointer;\n}\n.paraui-v4-comboselect-dropdown .comboselect-search-icon svg {\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-comboselect-dropdown .comboselect-search-input {\n  width: 100%;\n  flex: auto;\n  border: none;\n}\n.paraui-v4-comboselect-dropdown .comboselect-search-input .text-field-content {\n  border: unset;\n  height: unset;\n  border-radius: unset;\n}\n.paraui-v4-comboselect-dropdown .comboselect-search-input::placeholder {\n  color: rgb(161, 168, 179);\n  font-size: 14px;\n}\n.paraui-v4-comboselect-dropdown .comboselect-search .comboselect-clear-icon {\n  display: inline-flex;\n  cursor: pointer;\n}\n.paraui-v4-comboselect-dropdown .comboselect-search .comboselect-clear-icon svg {\n  font-size: 16px;\n  color: rgb(161, 168, 179);\n  transition: all 0.3s;\n}\n.paraui-v4-comboselect-dropdown .comboselect-search .comboselect-clear-icon svg:hover {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-comboselect-dropdown .comboselect-table {\n  flex: 1 1;\n  overflow-y: auto;\n  height: 100%;\n  padding-bottom: 2px;\n}\n.paraui-v4-comboselect-dropdown .comboselect-table .paraui-v4-table {\n  box-shadow: none;\n}\n.paraui-v4-comboselect-dropdown .comboselect-table .paraui-v4-table .table-pagination {\n  height: 38px;\n  padding-right: 10px;\n}\n.paraui-v4-comboselect-dropdown .comboselect-table .paraui-v4-table .table-contain {\n  height: calc(100% - 38px);\n}\n.paraui-v4-comboselect-dropdown .comboselect-tree {\n  flex: 1 1;\n  overflow-y: auto;\n  height: 100%;\n}\n.paraui-v4-comboselect-dropdown .comboselect-tree .paraui-v4-tree-empty {\n  height: 100%;\n  padding: 52px 0 73px 0;\n}\n.paraui-v4-comboselect-dropdown .comboselect-tree .loading-node-content {\n  display: flex;\n  justify-content: center;\n}\n@keyframes rotateLoading {\n  0% {\n    transformOrigin: 50% 50%;\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.paraui-v4-comboselect-dropdown .comboselect-tree .loading-node-content .loading-icon {\n  margin-right: 4px;\n}\n.paraui-v4-comboselect-dropdown .comboselect-tree .loading-node-content .loading-icon > svg {\n  transition: all 0.3s ease-in-out;\n  animation: rotateLoading 1s infinite linear;\n  font-size: 20px;\n}\n.paraui-v4-comboselect-dropdown .comboselect-actions {\n  display: flex;\n  align-items: center;\n  padding: 8px 20px 8px 0;\n  justify-content: flex-end;\n  border-top: 1px solid rgb(234, 236, 241);\n}\n.paraui-v4-comboselect-dropdown .comboselect-actions button + button {\n  margin-left: 10px;\n}\n.paraui-v4-comboselect-dropdown .comboselect-fullPath {\n  height: 34px;\n  line-height: 34px;\n  padding: 0 10px;\n  border-top: 1px solid rgb(234, 236, 241);\n  font-size: 14px;\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-comboselect-dropdown .comboselect-fullPath span {\n  display: inline-block;\n  height: 100%;\n  padding-right: 10px;\n  border-right: 1px solid rgb(234, 236, 241);\n}\n.paraui-v4-comboselect-dropdown .comboselect-list .paraui-v4-tree-empty {\n  padding: 50px 0 72px 0;\n}\n.paraui-v4-comboselect-dropdown .comboselect-list .paraui-v4-tree-treenode {\n  width: 100%;\n}\n.paraui-v4-comboselect-dropdown .comboselect-list .paraui-v4-tree-treenode .paraui-v4-tree-switcher {\n  display: none;\n}\n.paraui-v4-comboselect-dropdown .comboselect-list .paraui-v4-tree-treenode .paraui-v4-tree-checkbox {\n  display: none;\n}\n.paraui-v4-comboselect-dropdown .comboselect-list .paraui-v4-tree-treenode .paraui-v4-tree-node-content-wrapper {\n  width: 100%;\n  margin: 0;\n  padding: 3px 28px 3px 12px;\n}\n.paraui-v4-comboselect-dropdown .comboselect-list .paraui-v4-tree-treenode .paraui-v4-tree-node-content-wrapper:hover {\n  background-color: rgb(247, 248, 250);\n  border-radius: 0 !important;\n}\n.paraui-v4-comboselect-dropdown .comboselect-list .paraui-v4-tree-treenode-checkbox-checked .paraui-v4-tree-node-content-wrapper {\n  position: relative;\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-comboselect-dropdown .comboselect-list .paraui-v4-tree-treenode-checkbox-checked .paraui-v4-tree-node-content-wrapper::after {\n  position: absolute;\n  content: \" \";\n  width: 15px;\n  height: 10px;\n  right: 12px;\n  top: 50%;\n  background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAVCAYAAABR915hAAAABHNCSVQICAgIfAhkiAAAAPhJREFUSEu91TsKwkAQANBZ0drOIjaWIkTiCcSbaLHgbTxAFPUGHkFvEAh4hASs7BXH3WBC/tmv24TAJG8/M7ME/jRcGq8JfnYIJAj3zor8w01QwGNqvaG/sA6XUUQ4sxWziVgcTSgnrcFtqDW4C7UCi6DGYVE0g2f04d39UaCTZzJoArs0urIMWyLgKfTHGxVcFk3gOY2e7DnkLyq4CvpbcbGryOCqaHbGlR8IbLsOWshqGVwXrZSTCG4Cra3jNtwU2thA6nCA3i1/taW3jEr5tXauMp4HdNHOllmHm0A7YR6Qx02hQjAPmm7jyeCFXnhwLqpnWv7uCxqa4b8ke3ZZAAAAAElFTkSuQmCC\");\n  transform: translateY(-50%);\n  background-size: 15px 10px;\n  background-repeat: no-repeat;\n}\n.paraui-v4-comboselect-dropdown .comboselect-list .paraui-v4-tree-treenode-disabled .paraui-v4-tree-node-content-wrapper:hover {\n  background-color: transparent;\n}\n.paraui-v4-comboselect-dropdown .comboselect-list-single .paraui-v4-tree-treenode-checkbox-checked .paraui-v4-tree-node-content-wrapper::after {\n  display: none;\n}\n.paraui-v4-comboselect-more-popover {\n  padding-left: 12px;\n}\n.paraui-v4-comboselect-more-popover .comboselect-more-wrapper {\n  width: 300px;\n  padding: 4px 0;\n}\n.paraui-v4-comboselect-more-popover .comboselect-more-wrapper .comboselect-more-title {\n  display: flex;\n  align-items: center;\n  height: 30px;\n  padding: 0 10px;\n  font-size: 12px;\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-comboselect-more-popover .comboselect-more-wrapper .comboselect-more-content {\n  max-height: 300px;\n  overflow-y: auto;\n}\n.paraui-v4-comboselect-more-popover .comboselect-more-wrapper .comboselect-more-item {\n  display: flex;\n  align-items: center;\n  height: 30px;\n  font-size: 14px;\n  color: rgb(29, 33, 38);\n  padding: 0 10px;\n}\n.paraui-v4-comboselect-more-popover .comboselect-more-wrapper .comboselect-more-item:hover {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-comboselect-more-popover .comboselect-more-wrapper .comboselect-more-item-text {\n  display: inline-block;\n  max-width: calc(100% - 25px);\n}\n.paraui-v4-comboselect-more-popover .comboselect-more-wrapper .comboselect-more-item-remove {\n  display: inline-flex;\n  margin-left: auto;\n}\n.paraui-v4-comboselect-more-popover .comboselect-more-wrapper .comboselect-more-item-remove svg {\n  font-size: 18px;\n  color: rgb(92, 101, 115);\n  cursor: pointer;\n}\n.paraui-v4-comboselect-more-popover .comboselect-more-wrapper .comboselect-more-item-remove svg:hover {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-comboselect-dropdown .comboselect-search-input::-ms-clear, .paraui-v4-comboselect-non-popup .comboselect-search-input::-ms-clear {\n  display: none;\n}\n.paraui-v4-comboselect-dropdown .comboselect-search-input::-ms-reveal, .paraui-v4-comboselect-non-popup .comboselect-search-input::-ms-reveal {\n  display: none;\n}\n.paraui-v4-comboselect-dropdown .comboselect-search-input:-moz-placeholder, .paraui-v4-comboselect-non-popup .comboselect-search-input:-moz-placeholder {\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-comboselect-dropdown .comboselect-search-input::-moz-placeholder, .paraui-v4-comboselect-non-popup .comboselect-search-input::-moz-placeholder {\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-comboselect-dropdown .comboselect-search-input:-ms-input-placeholder, .paraui-v4-comboselect-non-popup .comboselect-search-input:-ms-input-placeholder {\n  /* Internet Explorer 10-11 */\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-comboselect-dropdown .comboselect-search-input::-ms-input-placeholder, .paraui-v4-comboselect-non-popup .comboselect-search-input::-ms-input-placeholder {\n  /* Microsoft Edge */\n  color: rgb(161, 168, 179);\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/18 上午10:16\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-comboselect .comboselect-wrapper {\n  position: relative;\n  display: flex;\n  width: 100%;\n  min-height: 32px;\n  padding: 0 10px;\n  font-size: 14px;\n  border: 1px solid rgb(212, 218, 227);\n  border-radius: 4px;\n  background-color: rgb(255, 255, 255);\n  cursor: pointer;\n  transition: 0.3s;\n}\n.paraui-v4-comboselect .comboselect-wrapper:hover {\n  border-color: rgb(87, 131, 235);\n}\n.paraui-v4-comboselect .comboselect-wrapper .comboselect-placeholder {\n  position: absolute;\n  top: 50%;\n  left: 12px;\n  right: 42px;\n  transform: translateY(-50%);\n  font-size: 14px;\n  color: rgb(161, 168, 179);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.paraui-v4-comboselect .comboselect-wrapper .comboselect-arrow {\n  position: absolute;\n  top: 5px;\n  right: 12px;\n  line-height: 0;\n  transition: 0.3s;\n}\n.paraui-v4-comboselect .comboselect-wrapper .comboselect-arrow svg {\n  color: rgb(92, 101, 115);\n  font-size: 20px;\n}\n.paraui-v4-comboselect .comboselect-wrapper .comboselect-clear {\n  position: absolute;\n  top: 7px;\n  right: 12px;\n  opacity: 0;\n  line-height: 0;\n  cursor: pointer;\n  transition: 0.3s;\n}\n.paraui-v4-comboselect .comboselect-wrapper .comboselect-clear svg {\n  color: rgb(161, 168, 179);\n  font-size: 16px;\n}\n.paraui-v4-comboselect .comboselect-wrapper .comboselect-clear svg:hover {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-comboselect .comboselect-wrapper .comboselect-overflow {\n  position: relative;\n  display: flex;\n  width: 100%;\n  flex: auto;\n  flex-wrap: wrap;\n  padding: 0 30px 0 0;\n}\n.paraui-v4-comboselect .comboselect-wrapper .comboselect-overflow-single.comboselect-overflow {\n  height: 30px;\n  padding: 0 30px 0 0;\n  align-items: center;\n  overflow: hidden;\n}\n.paraui-v4-comboselect .comboselect-wrapper .comboselect-overflow-single.comboselect-overflow .comboselect-single-content {\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 14px;\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-comboselect .comboselect-wrapper .comboselect-overflow-item {\n  flex: none;\n  max-width: 100%;\n}\n.paraui-v4-comboselect .comboselect-wrapper .comboselect-overflow-item .comboselect-item {\n  display: inline-flex;\n  align-items: center;\n  padding: 0 10px;\n  height: 24px;\n  margin: 3px 4px 0 0;\n  max-width: 100%;\n  color: rgb(29, 33, 38);\n  line-height: 24px;\n  background-color: rgb(234, 236, 241);\n  border-radius: 2px;\n  user-select: none;\n  transition: 0.3s;\n  cursor: default;\n}\n.paraui-v4-comboselect .comboselect-wrapper .comboselect-overflow-item .comboselect-item .comboselect-item-content {\n  display: inline-block;\n  margin-right: 4px;\n  overflow: hidden;\n  font-size: 12px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.paraui-v4-comboselect .comboselect-wrapper .comboselect-overflow-item .comboselect-item .comboselect-item-remove {\n  display: inline-flex;\n  cursor: pointer;\n}\n.paraui-v4-comboselect .comboselect-wrapper .comboselect-overflow-item .comboselect-item .comboselect-item-remove svg {\n  font-size: 16px;\n  color: inherit;\n}\n.paraui-v4-comboselect .comboselect-wrapper .comboselect-overflow-item .comboselect-item .comboselect-item-remove svg:hover {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-comboselect .comboselect-wrapper .comboselect-overflow-item .comboselect-item--disabled {\n  color: rgb(161, 168, 179);\n  background-color: rgb(212, 218, 227);\n  cursor: not-allowed;\n}\n.paraui-v4-comboselect .comboselect-wrapper .comboselect-overflow-item .comboselect-item--disabled .comboselect-item-remove {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-comboselect .comboselect-wrapper .comboselect-overflow-item .comboselect-item--unclosable .comboselect-item-content {\n  margin-right: 0;\n}\n.paraui-v4-comboselect .comboselect-wrapper .comboselect-overflow-list {\n  overflow: hidden;\n  height: 30px;\n  display: flex;\n  flex-wrap: wrap;\n}\n.paraui-v4-comboselect-focused .comboselect-wrapper {\n  border-color: rgb(46, 101, 230);\n}\n.paraui-v4-comboselect-focused .comboselect-wrapper .comboselect-arrow {\n  transform: rotate(180deg);\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-comboselect-focused .comboselect-wrapper .comboselect-arrow svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-comboselect-disabled {\n  cursor: not-allowed;\n}\n.paraui-v4-comboselect-disabled .comboselect-wrapper {\n  background-color: rgb(247, 248, 250);\n  border-color: rgb(212, 218, 227);\n  pointer-events: none;\n}\n.paraui-v4-comboselect-disabled .comboselect-single-content {\n  color: rgb(92, 101, 115) !important;\n}\n.paraui-v4-comboselect-small .comboselect-wrapper, .paraui-v4-comboselect-medium .comboselect-wrapper {\n  min-height: 28px;\n}\n.paraui-v4-comboselect-small .comboselect-wrapper .comboselect-overflow, .paraui-v4-comboselect-medium .comboselect-wrapper .comboselect-overflow {\n  padding-top: 3px;\n}\n.paraui-v4-comboselect-small .comboselect-wrapper .comboselect-overflow-item .comboselect-item, .paraui-v4-comboselect-medium .comboselect-wrapper .comboselect-overflow-item .comboselect-item {\n  height: 20px;\n  margin-bottom: 3px;\n  line-height: 20px;\n}\n.paraui-v4-comboselect-small .comboselect-wrapper .comboselect-overflow-single.comboselect-overflow, .paraui-v4-comboselect-medium .comboselect-wrapper .comboselect-overflow-single.comboselect-overflow {\n  height: 26px;\n}\n.paraui-v4-comboselect-small .comboselect-wrapper .comboselect-arrow, .paraui-v4-comboselect-medium .comboselect-wrapper .comboselect-arrow {\n  top: 3px;\n}\n.paraui-v4-comboselect-small .comboselect-wrapper .comboselect-clear, .paraui-v4-comboselect-medium .comboselect-wrapper .comboselect-clear {\n  top: 5px;\n}\n.paraui-v4-comboselect-error .comboselect-wrapper {\n  border-color: rgb(244, 66, 66);\n}\n.paraui-v4-comboselect-error .comboselect-wrapper:hover {\n  border-color: rgb(244, 66, 66);\n}\n.paraui-v4-comboselect-clear .comboselect-wrapper:hover .comboselect-arrow {\n  opacity: 0;\n}\n.paraui-v4-comboselect-clear .comboselect-wrapper:hover .comboselect-clear {\n  opacity: 1;\n}\n.paraui-v4-comboselect-non-popup {\n  border: 1px solid rgb(212, 218, 227);\n  border-radius: 4px;\n  background-color: rgb(255, 255, 255);\n}\n.paraui-v4-comboselect-non-popup .comboselect-wrapper {\n  border: none;\n  border-bottom: 1px solid rgb(212, 218, 227);\n  border-bottom-right-radius: 0;\n  border-bottom-left-radius: 0;\n  cursor: default;\n}\n.paraui-v4-comboselect-non-popup .comboselect-wrapper:hover {\n  border-color: rgb(212, 218, 227);\n}\n.paraui-v4-comboselect-non-popup .comboselect-non-popup-content {\n  position: relative;\n}\n.paraui-v4-comboselect-non-popup .comboselect-non-popup-content .comboselect-search {\n  display: flex;\n  align-items: center;\n  height: 40px;\n  border-bottom: 1px solid rgb(234, 236, 241);\n}\n.paraui-v4-comboselect-non-popup .comboselect-non-popup-content .comboselect-search-icon {\n  line-height: 0;\n  cursor: pointer;\n}\n.paraui-v4-comboselect-non-popup .comboselect-non-popup-content .comboselect-search-icon svg {\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-comboselect-non-popup .comboselect-non-popup-content .comboselect-search-input {\n  width: 100%;\n  flex: auto;\n  border: none;\n}\n.paraui-v4-comboselect-non-popup .comboselect-non-popup-content .comboselect-search-input .text-field-content {\n  border: unset;\n  height: unset;\n  border-radius: unset;\n}\n.paraui-v4-comboselect-non-popup .comboselect-non-popup-content .comboselect-search-input::placeholder {\n  color: rgb(161, 168, 179);\n  font-size: 14px;\n}\n.paraui-v4-comboselect-non-popup .comboselect-non-popup-content .comboselect-search .comboselect-clear-icon {\n  display: inline-flex;\n  cursor: pointer;\n}\n.paraui-v4-comboselect-non-popup .comboselect-non-popup-content .comboselect-search .comboselect-clear-icon svg {\n  font-size: 16px;\n  color: rgb(161, 168, 179);\n  transition: all 0.3s;\n}\n.paraui-v4-comboselect-non-popup .comboselect-non-popup-content .comboselect-search .comboselect-clear-icon svg:hover {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-comboselect-non-popup .comboselect-non-popup-content .comboselect-table {\n  padding-bottom: 10px;\n}\n.paraui-v4-comboselect-non-popup .comboselect-non-popup-content .comboselect-table .table-pagination {\n  height: 52px;\n  padding-right: 20px;\n}\n.paraui-v4-comboselect-non-popup .comboselect-non-popup-content .comboselect-table .paraui-v4-table {\n  box-shadow: none;\n}\n.paraui-v4-comboselect-non-popup .comboselect-non-popup-content .comboselect-tree {\n  padding: 6px 7px;\n}\n.paraui-v4-comboselect-non-popup .comboselect-non-popup-content .comboselect-tree .paraui-v4-tree-empty {\n  padding: 52px 0 73px 0;\n}\n.paraui-v4-comboselect-dropdown .comboselect-dropdown-wrapper {\n  position: relative;\n  color: initial;\n  overflow: hidden;\n  padding: 4px 0;\n}\n.paraui-v4-comboselect-dropdown .comboselect-dropdown-wrapper.show-search {\n  padding-top: 0;\n}\n.paraui-v4-comboselect-dropdown .comboselect-dropdown-wrapper.mode-table {\n  padding-top: 0;\n}\n.paraui-v4-comboselect-dropdown .dropdown-content {\n  display: flex;\n  flex-direction: column;\n}\n.paraui-v4-comboselect-dropdown .comboselect-search {\n  display: flex;\n  align-items: center;\n  height: 30px;\n  min-height: 30px;\n  border-bottom: 1px solid rgb(234, 236, 241);\n}\n.paraui-v4-comboselect-dropdown .comboselect-search-icon {\n  line-height: 0;\n  cursor: pointer;\n}\n.paraui-v4-comboselect-dropdown .comboselect-search-icon svg {\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-comboselect-dropdown .comboselect-search-input {\n  width: 100%;\n  flex: auto;\n  border: none;\n}\n.paraui-v4-comboselect-dropdown .comboselect-search-input .text-field-content {\n  border: unset;\n  height: unset;\n  border-radius: unset;\n}\n.paraui-v4-comboselect-dropdown .comboselect-search-input::placeholder {\n  color: rgb(161, 168, 179);\n  font-size: 14px;\n}\n.paraui-v4-comboselect-dropdown .comboselect-search .comboselect-clear-icon {\n  display: inline-flex;\n  cursor: pointer;\n}\n.paraui-v4-comboselect-dropdown .comboselect-search .comboselect-clear-icon svg {\n  font-size: 16px;\n  color: rgb(161, 168, 179);\n  transition: all 0.3s;\n}\n.paraui-v4-comboselect-dropdown .comboselect-search .comboselect-clear-icon svg:hover {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-comboselect-dropdown .comboselect-table {\n  flex: 1 1;\n  overflow-y: auto;\n  height: 100%;\n  padding-bottom: 2px;\n}\n.paraui-v4-comboselect-dropdown .comboselect-table .paraui-v4-table {\n  box-shadow: none;\n}\n.paraui-v4-comboselect-dropdown .comboselect-table .paraui-v4-table .table-pagination {\n  height: 38px;\n  padding-right: 10px;\n}\n.paraui-v4-comboselect-dropdown .comboselect-table .paraui-v4-table .table-contain {\n  height: calc(100% - 38px);\n}\n.paraui-v4-comboselect-dropdown .comboselect-tree {\n  flex: 1 1;\n  overflow-y: auto;\n  height: 100%;\n}\n.paraui-v4-comboselect-dropdown .comboselect-tree .paraui-v4-tree-empty {\n  height: 100%;\n  padding: 52px 0 73px 0;\n}\n.paraui-v4-comboselect-dropdown .comboselect-tree .loading-node-content {\n  display: flex;\n  justify-content: center;\n}\n@keyframes rotateLoading {\n  0% {\n    transformOrigin: 50% 50%;\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.paraui-v4-comboselect-dropdown .comboselect-tree .loading-node-content .loading-icon {\n  margin-right: 4px;\n}\n.paraui-v4-comboselect-dropdown .comboselect-tree .loading-node-content .loading-icon > svg {\n  transition: all 0.3s ease-in-out;\n  animation: rotateLoading 1s infinite linear;\n  font-size: 20px;\n}\n.paraui-v4-comboselect-dropdown .comboselect-actions {\n  display: flex;\n  align-items: center;\n  padding: 8px 20px 8px 0;\n  justify-content: flex-end;\n  border-top: 1px solid rgb(234, 236, 241);\n}\n.paraui-v4-comboselect-dropdown .comboselect-actions button + button {\n  margin-left: 10px;\n}\n.paraui-v4-comboselect-dropdown .comboselect-fullPath {\n  height: 34px;\n  line-height: 34px;\n  padding: 0 10px;\n  border-top: 1px solid rgb(234, 236, 241);\n  font-size: 14px;\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-comboselect-dropdown .comboselect-fullPath span {\n  display: inline-block;\n  height: 100%;\n  padding-right: 10px;\n  border-right: 1px solid rgb(234, 236, 241);\n}\n.paraui-v4-comboselect-dropdown .comboselect-list .paraui-v4-tree-empty {\n  padding: 50px 0 72px 0;\n}\n.paraui-v4-comboselect-dropdown .comboselect-list .paraui-v4-tree-treenode {\n  width: 100%;\n}\n.paraui-v4-comboselect-dropdown .comboselect-list .paraui-v4-tree-treenode .paraui-v4-tree-switcher {\n  display: none;\n}\n.paraui-v4-comboselect-dropdown .comboselect-list .paraui-v4-tree-treenode .paraui-v4-tree-checkbox {\n  display: none;\n}\n.paraui-v4-comboselect-dropdown .comboselect-list .paraui-v4-tree-treenode .paraui-v4-tree-node-content-wrapper {\n  width: 100%;\n  margin: 0;\n  padding: 3px 28px 3px 12px;\n}\n.paraui-v4-comboselect-dropdown .comboselect-list .paraui-v4-tree-treenode .paraui-v4-tree-node-content-wrapper:hover {\n  background-color: rgb(247, 248, 250);\n  border-radius: 0 !important;\n}\n.paraui-v4-comboselect-dropdown .comboselect-list .paraui-v4-tree-treenode-checkbox-checked .paraui-v4-tree-node-content-wrapper {\n  position: relative;\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-comboselect-dropdown .comboselect-list .paraui-v4-tree-treenode-checkbox-checked .paraui-v4-tree-node-content-wrapper::after {\n  position: absolute;\n  content: \" \";\n  width: 15px;\n  height: 10px;\n  right: 12px;\n  top: 50%;\n  background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAVCAYAAABR915hAAAABHNCSVQICAgIfAhkiAAAAPhJREFUSEu91TsKwkAQANBZ0drOIjaWIkTiCcSbaLHgbTxAFPUGHkFvEAh4hASs7BXH3WBC/tmv24TAJG8/M7ME/jRcGq8JfnYIJAj3zor8w01QwGNqvaG/sA6XUUQ4sxWziVgcTSgnrcFtqDW4C7UCi6DGYVE0g2f04d39UaCTZzJoArs0urIMWyLgKfTHGxVcFk3gOY2e7DnkLyq4CvpbcbGryOCqaHbGlR8IbLsOWshqGVwXrZSTCG4Cra3jNtwU2thA6nCA3i1/taW3jEr5tXauMp4HdNHOllmHm0A7YR6Qx02hQjAPmm7jyeCFXnhwLqpnWv7uCxqa4b8ke3ZZAAAAAElFTkSuQmCC\");\n  transform: translateY(-50%);\n  background-size: 15px 10px;\n  background-repeat: no-repeat;\n}\n.paraui-v4-comboselect-dropdown .comboselect-list .paraui-v4-tree-treenode-disabled .paraui-v4-tree-node-content-wrapper:hover {\n  background-color: transparent;\n}\n.paraui-v4-comboselect-dropdown .comboselect-list-single .paraui-v4-tree-treenode-checkbox-checked .paraui-v4-tree-node-content-wrapper::after {\n  display: none;\n}\n.paraui-v4-comboselect-more-popover {\n  padding-left: 12px;\n}\n.paraui-v4-comboselect-more-popover .comboselect-more-wrapper {\n  width: 300px;\n  padding: 4px 0;\n}\n.paraui-v4-comboselect-more-popover .comboselect-more-wrapper .comboselect-more-title {\n  display: flex;\n  align-items: center;\n  height: 30px;\n  padding: 0 10px;\n  font-size: 12px;\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-comboselect-more-popover .comboselect-more-wrapper .comboselect-more-content {\n  max-height: 300px;\n  overflow-y: auto;\n}\n.paraui-v4-comboselect-more-popover .comboselect-more-wrapper .comboselect-more-item {\n  display: flex;\n  align-items: center;\n  height: 30px;\n  font-size: 14px;\n  color: rgb(29, 33, 38);\n  padding: 0 10px;\n}\n.paraui-v4-comboselect-more-popover .comboselect-more-wrapper .comboselect-more-item:hover {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-comboselect-more-popover .comboselect-more-wrapper .comboselect-more-item-text {\n  display: inline-block;\n  max-width: calc(100% - 25px);\n}\n.paraui-v4-comboselect-more-popover .comboselect-more-wrapper .comboselect-more-item-remove {\n  display: inline-flex;\n  margin-left: auto;\n}\n.paraui-v4-comboselect-more-popover .comboselect-more-wrapper .comboselect-more-item-remove svg {\n  font-size: 18px;\n  color: rgb(92, 101, 115);\n  cursor: pointer;\n}\n.paraui-v4-comboselect-more-popover .comboselect-more-wrapper .comboselect-more-item-remove svg:hover {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-comboselect-dropdown .comboselect-search-input::-ms-clear, .paraui-v4-comboselect-non-popup .comboselect-search-input::-ms-clear {\n  display: none;\n}\n.paraui-v4-comboselect-dropdown .comboselect-search-input::-ms-reveal, .paraui-v4-comboselect-non-popup .comboselect-search-input::-ms-reveal {\n  display: none;\n}\n.paraui-v4-comboselect-dropdown .comboselect-search-input:-moz-placeholder, .paraui-v4-comboselect-non-popup .comboselect-search-input:-moz-placeholder {\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-comboselect-dropdown .comboselect-search-input::-moz-placeholder, .paraui-v4-comboselect-non-popup .comboselect-search-input::-moz-placeholder {\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-comboselect-dropdown .comboselect-search-input:-ms-input-placeholder, .paraui-v4-comboselect-non-popup .comboselect-search-input:-ms-input-placeholder {\n  /* Internet Explorer 10-11 */\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-comboselect-dropdown .comboselect-search-input::-ms-input-placeholder, .paraui-v4-comboselect-non-popup .comboselect-search-input::-ms-input-placeholder {\n  /* Microsoft Edge */\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-comboselect.paraui-v4-comboselect-overLine .comboselect-wrapper .comboselect-overflow-list {\n  height: 100%;\n  padding-bottom: 3px;\n}";
 styleInject(css_248z);
 
 //组合选择器
@@ -106,6 +106,7 @@ const ComboSelect = props => {
     placeholder,
     searchPlaceholder,
     maxCount,
+    overLine = false,
     disabled = false,
     allowClear = false,
     className,
@@ -182,7 +183,6 @@ const ComboSelect = props => {
   const [hasAllClear, setHasAllClear] = useState(false); //显示清除按钮
   const [inRefresh, setInRefresh] = useState(0); //内部刷新组件
   const [openMore, setOpenMore] = useState(false); //显示更过选中
-  const [moreTagList, setMoreTagList] = useState([]); //更多tag列表
   const originValueRef = useRef([]); // 保存value
   const hasPopup = useRef(false); //显示弹框标识
   const popUpNodeRef = useRef(); //popup dom
@@ -200,6 +200,63 @@ const ComboSelect = props => {
   const intl = useFormatMessage('ComboSelect', localeJson);
   const isRemoteLoadRef = useRef(isRemoteLoad(mode, mode === 'table' ? TableProps : TreeProps)); //是否远程加载数据
   const [loadedKeys, setLoadKeys] = useState(); //加载过的key
+  const constData = useRef({
+    list: []
+  });
+  const [morePos, setMorePos] = useState(null); // 超出在原始位置
+  const currentDom = useRef(null); // 容器
+  constData.current.openMore = openMore;
+  constData.current.list = [...checkList];
+  // 关闭显示更多
+  const handleCloseMore = () => {
+    if (constData.current.openMore) setOpenMore(false);
+  };
+  /**
+   * 多选 不换行 计算
+   * @param index 数组下标
+   */
+  const handMultiline = index => {
+    if (index === null || index === 0) return;
+    if (index === undefined) index = constData.current.list.length;
+    if (!currentDom.current) return;
+    const boxDom = currentDom.current.querySelector('.comboselect-overflow-list');
+    if (!boxDom) return;
+    if (boxDom.scrollHeight > boxDom.clientHeight) {
+      const num = Number(index) - 1;
+      // 超出
+      setMorePos(num);
+      handMultiline(num);
+    } else {
+      // 一行
+      if (constData.current.list.length <= index) handleCloseMore();
+    }
+  };
+  /** 改变屏幕大小 */
+  const changeSize = () => {
+    if (constData.current.list.length === 0) return setMorePos(null);
+    clearTimeout(constData.current.resizeTimer);
+    constData.current.resizeTimer = setTimeout(() => {
+      setMorePos(constData.current.list.length);
+      handMultiline();
+    }, 50);
+  };
+  useEffect(() => {
+    changeSize();
+    return () => {
+      clearTimeout(constData.current.resizeTimer);
+    };
+  }, [checkList]);
+  // 多选换行
+  useEffect(() => {
+    if (!overLine && checkable) {
+      window.addEventListener('resize', changeSize);
+    } else {
+      window.removeEventListener('resize', changeSize);
+    }
+    return () => {
+      window.removeEventListener('resize', changeSize);
+    };
+  }, [overLine, checkable]);
   //选择框点击
   const handleSelectorClick = event => {
     if (disablePopup) return;
@@ -228,7 +285,6 @@ const ComboSelect = props => {
   const clearSelectorData = () => {
     setCheckKeys([]);
     setCheckList([]);
-    setMoreTagList([]);
   };
   //处理选中
   const handleChecked = (keys, values) => {
@@ -312,7 +368,8 @@ const ComboSelect = props => {
       ["".concat($prefixCls, "-comboselect-radioable")]: !checkable,
       ["".concat($prefixCls, "-comboselect-error")]: error,
       ["".concat($prefixCls, "-comboselect-clear")]: hasAllClear,
-      ["".concat($prefixCls, "-comboselect-non-popup")]: disablePopup
+      ["".concat($prefixCls, "-comboselect-non-popup")]: disablePopup,
+      ["".concat($prefixCls, "-comboselect-overLine")]: overLine
     }, "".concat($prefixCls, "-comboselect-").concat(size));
   };
   //格式化选中数据
@@ -559,35 +616,8 @@ const ComboSelect = props => {
         })
       }));
     }
-    let realShowList = [...checkList]; //实际显示
-    let overList = [];
-    if (maxCount) {
-      if (checkList.length > maxCount) {
-        overList = checkList.slice(maxCount); //超出
-        realShowList = checkList.slice(0, maxCount);
-        setMoreTagList(overList);
-      } else {
-        setMoreTagList([]);
-        setOpenMore(false);
-      }
-    }
-    //超出tag渲染
-    const renderOverTag = () => {
-      return (overList === null || overList === void 0 ? void 0 : overList.length) ? jsx("div", Object.assign({
-        className: 'comboselect-overflow-item'
-      }, {
-        children: jsx("span", Object.assign({
-          className: 'comboselect-item',
-          onClick: handleOpenMore
-        }, {
-          children: jsx("span", Object.assign({
-            className: 'comboselect-item-content'
-          }, {
-            children: "+".concat(overList === null || overList === void 0 ? void 0 : overList.length)
-          }))
-        }))
-      })) : null;
-    };
+    // 多选
+    if (!checkList.length) return;
     //渲染tag item
     const renderTagItem = item => {
       if (tagRender) return tagRender(item);
@@ -642,16 +672,40 @@ const ComboSelect = props => {
         }))]
       }));
     };
-    return jsxs(Fragment, {
-      children: [realShowList.map((item, idx) => {
+    //超出tag渲染
+    const renderOverTag = () => {
+      if (morePos !== null && constData.current.list.length > morePos) {
         return jsx("div", Object.assign({
           className: 'comboselect-overflow-item'
         }, {
-          children: renderTagItem(item)
-        }), idx);
-      }), renderOverTag()]
+          children: jsx("span", Object.assign({
+            className: 'comboselect-item',
+            onClick: handleOpenMore
+          }, {
+            children: jsxs("span", Object.assign({
+              className: 'comboselect-item-content'
+            }, {
+              children: ["+", constData.current.list.length - morePos]
+            }))
+          }))
+        }));
+      }
+      return null;
+    };
+    const list = checkList.map((item, index) => {
+      if (morePos !== null && morePos <= index) return null;
+      return jsx("div", Object.assign({
+        className: 'comboselect-overflow-item'
+      }, {
+        children: renderTagItem(item)
+      }), index);
     });
-  }, [checkList, onChange, checkable]);
+    return jsxs("div", Object.assign({
+      className: "comboselect-overflow-list"
+    }, {
+      children: [list, renderOverTag()]
+    }));
+  }, [checkList, onChange, checkable, morePos, maxTagTextLength, outputTitle, tagRender, renderInputContent, overLine]);
   //处理参数
   const getParams = useMemo(() => {
     let P = params || emptyParamsRef.current;
@@ -695,7 +749,8 @@ const ComboSelect = props => {
         refresh: refresh !== null && refresh !== void 0 ? refresh : inRefresh,
         autoSize: false,
         refreshInside: false,
-        checkCount: false
+        checkCount: false,
+        paginationType: "simple"
       }))
     }));
   }, [checkKeys, refresh, params, inRefresh, disablePopup, open, getParams, fieldKey, checkable]);
@@ -801,32 +856,34 @@ const ComboSelect = props => {
     }));
   }, [checkKeys, refresh, params, inRefresh, disablePopup, open, loadedKeys, mode, getParams, checkable]);
   //组合选择器输入框
-  const comboSelectorInput = jsxs("div", Object.assign({
-    className: 'comboselect-wrapper',
-    ref: selectRef,
-    onClick: handleSelectorClick
-  }, {
-    children: [jsx("div", Object.assign({
-      className: clsx('comboselect-overflow', !checkable && 'comboselect-overflow-single')
-    }, {
-      children: tagMemo
-    })), !disablePopup && jsx("span", Object.assign({
-      className: 'comboselect-arrow'
-    }, {
-      children: jsx(Down, {})
-    })), hasAllClear && jsx("span", Object.assign({
-      className: 'comboselect-clear',
-      onClick: handleAllClear
-    }, {
-      children: jsx(CloseCircleF, {})
-    })), !(checkList === null || checkList === void 0 ? void 0 : checkList.length) && jsx("span", Object.assign({
-      className: 'comboselect-placeholder'
+  const comboSelectorInput = useMemo(() => {
+    return jsxs("div", Object.assign({
+      className: 'comboselect-wrapper',
+      ref: selectRef,
+      onClick: handleSelectorClick
     }, {
-      children: placeholder !== null && placeholder !== void 0 ? placeholder : intl({
-        id: 'pleaseSelect'
-      })
-    }))]
-  }));
+      children: [jsx("div", Object.assign({
+        className: clsx('comboselect-overflow', !checkable && 'comboselect-overflow-single')
+      }, {
+        children: tagMemo
+      })), !disablePopup && jsx("span", Object.assign({
+        className: 'comboselect-arrow'
+      }, {
+        children: jsx(Down, {})
+      })), hasAllClear && jsx("span", Object.assign({
+        className: 'comboselect-clear',
+        onClick: handleAllClear
+      }, {
+        children: jsx(CloseCircleF, {})
+      })), !(checkList === null || checkList === void 0 ? void 0 : checkList.length) && jsx("span", Object.assign({
+        className: 'comboselect-placeholder'
+      }, {
+        children: placeholder !== null && placeholder !== void 0 ? placeholder : intl({
+          id: 'pleaseSelect'
+        })
+      }))]
+    }));
+  }, [checkList, tagMemo, checkable, hasAllClear, disablePopup, placeholder]);
   //渲染label
   const renderLabel = () => {
     if (label || required) {
@@ -837,16 +894,6 @@ const ComboSelect = props => {
     }
     return null;
   };
-  //非popover 模式
-  const nonPopoverMemo = useMemo(() => {
-    return jsxs(Fragment, {
-      children: [comboSelectorInput, jsxs("div", Object.assign({
-        className: 'comboselect-non-popup-content'
-      }, {
-        children: [showSearch && renderSearch(), mode === 'table' ? tableMemo : treeMemo, renderFullPath(), showPopoverActions && renderActions()]
-      }))]
-    });
-  }, [checkKeys, inputValue, refresh, params, fullPath, hasAllClear, helperText, language, locale, onChange, onClear]);
   //popover 浮层
   const renderOverlay = () => {
     return jsx("div", Object.assign({
@@ -864,8 +911,8 @@ const ComboSelect = props => {
   //popover 渲染更多节点
   const renderPopoverMore = () => {
     const generateMoreTag = () => {
-      if (!(moreTagList === null || moreTagList === void 0 ? void 0 : moreTagList.length)) return null;
-      return moreTagList.map((item, idx) => {
+      return checkList.map((item, idx) => {
+        if (morePos !== null && morePos > idx) return null;
         return jsxs("div", Object.assign({
           className: "comboselect-more-item"
         }, {
@@ -923,10 +970,30 @@ const ComboSelect = props => {
         children: comboSelectorInput
       }))
     }));
-  }, [open, checkKeys, inputValue, refresh, params, fullPath, inRefresh, hasAllClear, helperText, language, locale, openMore, moreTagList, loadedKeys, onChange, onClear]);
+  }, [open, checkKeys, inputValue, refresh, params, fullPath, inRefresh, hasAllClear, helperText, language, locale, openMore, loadedKeys, onChange, onClear, comboSelectorInput, checkList]);
+  //非popover 模式
+  const nonPopoverMemo = useMemo(() => {
+    return jsxs(Fragment, {
+      children: [jsx(Popover, Object.assign({
+        visible: openMore,
+        destroyTooltipOnHide: true,
+        placement: "rightTop",
+        content: renderPopoverMore(),
+        onVisibleChange: () => setOpenMore(false),
+        overlayClassName: "".concat($prefixCls, "-comboselect-more-popover")
+      }, {
+        children: comboSelectorInput
+      })), jsxs("div", Object.assign({
+        className: 'comboselect-non-popup-content'
+      }, {
+        children: [showSearch && renderSearch(), mode === 'table' ? tableMemo : treeMemo, renderFullPath(), showPopoverActions && renderActions()]
+      }))]
+    });
+  }, [checkKeys, inputValue, refresh, params, fullPath, hasAllClear, helperText, language, locale, onChange, onClear, tableMemo, treeMemo, comboSelectorInput, openMore, checkList]);
   return jsxs("div", Object.assign({
     className: makeSelectCls(),
-    style: style
+    style: style,
+    ref: currentDom
   }, {
     children: [renderLabel(), disablePopup ? nonPopoverMemo : popoverMemo, !disablePopup ? jsx(HelperText, {
       error: error,

package/ComboSelect/interface.d.ts

@@ -35,7 +35,10 @@ export interface ComboSelectProps extends HelperTextDetailProps {
     /**search 占位符*/
     searchPlaceholder?: string;
     /**最大显示数*/
+    /** @deprecated This attribute has been deprecated */
     maxCount?: number;
+    /** 超出换行 */
+    overLine?: boolean;
     /**禁用选择器*/
     disabled?: boolean;
     /** 支持清除 */

package/DragVerify/index.js

@@ -101,8 +101,8 @@ const DragVerify = props => {
       imgBg.style.display = 'inline-block';
       if (!refDom.current) return;
       const sliderImgEle = refDom.current.querySelector('.slider-img');
-      const sliderImgEleRect = sliderImgEle === null || sliderImgEle === void 0 ? void 0 : sliderImgEle.getBoundingClientRect();
-      const b = sliderImgEleRect.width;
+      //const sliderImgEleRect = sliderImgEle?.getBoundingClientRect();
+      const b = sliderImgEle === null || sliderImgEle === void 0 ? void 0 : sliderImgEle.clientWidth;
       constData.current.imgScale = a / b;
       sliderImgEle === null || sliderImgEle === void 0 ? void 0 : sliderImgEle.append(imgMove);
       imgMove.onload = () => {
@@ -129,50 +129,74 @@ const DragVerify = props => {
     const moveDomRect = moveDom.getBoundingClientRect();
     const moveDomWidth = moveDomRect.width; // 移动箭头的框
     const moveSliderWidth = moveSliderRect.width; // 进度条的宽
+    // 移动
+    const moveFunc = (event, e) => {
+      let moveW = event.pageX - e.pageX; // 鼠标移动的距离
+      if (moveW < 0) moveW = 0;
+      if (moveW + moveDomWidth > imgBg.width) moveW = imgBg.width - moveDomWidth;
+      moveDom.style.left = "".concat(moveW - 1, "px");
+      // 加一防止滑块与进度条之间有间隙
+      moveProgress.style.width = "".concat(moveW < 2 ? 2 : moveW, "px");
+      // 进度条走过的比例
+      const ratio = moveW / (moveSliderWidth - moveDomWidth);
+      const imgMoveWidth = (imgBg.width - imgMove.width) * ratio;
+      imgMove.style.left = "".concat(imgMoveWidth, "px");
+      sliderText.innerHTML = '';
+    };
+    // 抬起
+    const endFunc = () => {
+      sliderBox.classList.remove("".concat(prefixCls, "-move"));
+      constData.current.padding = true;
+      const X = parseFloat(imgMove.style.left);
+      const handX = X * constData.current.imgScale;
+      sliderPosiCheck(handX, result => {
+        if (!result) {
+          // 错误
+          sliderBox.classList.add("".concat(prefixCls, "-error"));
+          constData.current.timerError = setTimeout(() => {
+            constData.current.padding = false;
+            reset();
+            sliderText.innerHTML = intl({
+              id: 'tryAgain'
+            }); // 再试一次
+            getImgInfoReq();
+          }, 1000);
+          return;
+        }
+        sliderBox.classList.add("".concat(prefixCls, "-success"));
+        /*constData.current.timerSuccess = setTimeout(() => {
+            //constData.current.padding = false;
+            //sliderBox.classList.remove(prefixCls + '-success');
+        }, 1000);*/
+      });
+    };
     moveDom.onmousedown = e => {
       if (constData.current.padding) return;
       sliderBox.classList.add("".concat(prefixCls, "-move"));
       document.onmousemove = event => {
-        let moveW = event.pageX - e.pageX; // 鼠标移动的距离
-        if (moveW < 0) moveW = 0;
-        if (moveW + moveDomWidth > imgBg.width) moveW = imgBg.width - moveDomWidth;
-        moveDom.style.left = "".concat(moveW - 1, "px");
-        // 加一防止滑块与进度条之间有间隙
-        moveProgress.style.width = "".concat(moveW < 2 ? 2 : moveW, "px");
-        // 进度条走过的比例
-        const ratio = moveW / (moveSliderWidth - moveDomWidth);
-        const imgMoveWidth = (imgBg.width - imgMove.width) * ratio;
-        imgMove.style.left = "".concat(imgMoveWidth, "px");
-        sliderText.innerHTML = '';
+        moveFunc(event, e);
       };
       // 鼠标抬起
       document.onmouseup = () => {
         document.onmousemove = null;
         document.onmouseup = null;
-        sliderBox.classList.remove("".concat(prefixCls, "-move"));
-        constData.current.padding = true;
-        const X = parseFloat(imgMove.style.left);
-        const handX = X * constData.current.imgScale;
-        sliderPosiCheck(handX, result => {
-          if (!result) {
-            // 错误
-            sliderBox.classList.add("".concat(prefixCls, "-error"));
-            constData.current.timerError = setTimeout(() => {
-              constData.current.padding = false;
-              reset();
-              sliderText.innerHTML = intl({
-                id: 'tryAgain'
-              }); // 再试一次
-              getImgInfoReq();
-            }, 1000);
-            return;
-          }
-          sliderBox.classList.add("".concat(prefixCls, "-success"));
-          /*constData.current.timerSuccess = setTimeout(() => {
-              //constData.current.padding = false;
-              //sliderBox.classList.remove(prefixCls + '-success');
-          }, 1000);*/
-        });
+        endFunc();
+      };
+    };
+    moveDom.ontouchstart = touchE => {
+      if (constData.current.padding) return;
+      const e = touchE.touches[0];
+      sliderBox.classList.add("".concat(prefixCls, "-move"));
+      // 鼠标移动
+      document.ontouchmove = touchEvent => {
+        const event = touchEvent.touches[0];
+        moveFunc(event, e);
+      };
+      // 鼠标抬起
+      document.ontouchend = () => {
+        document.ontouchmove = null;
+        document.ontouchend = null;
+        endFunc();
       };
     };
   };

package/Form/index.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { DeepClone } from '@paraview/lib';
 import React__default from 'react';
-import { F as FormItem, l as localeJson, v as validate } from '../_verture/index-cb2c05c7.js';
+import { F as FormItem, l as localeJson, v as validate } from '../_verture/index-356d88fa.js';
 import { $ as $prefixCls } from '../_verture/constant-5317fc89.js';
 import { u as useFormatMessage } from '../_verture/useFormatMessage-eb13cf56.js';
 import '../TextField/index.js';

package/FormItem/index.js

@@ -1,6 +1,6 @@
 import 'react/jsx-runtime';
 import 'react';
-export { F as default } from '../_verture/index-cb2c05c7.js';
+export { F as default } from '../_verture/index-356d88fa.js';
 import 'clsx';
 import '../Label/index.js';
 import '../_verture/constant-5317fc89.js';

package/OperateBtn/index.js

@@ -62,6 +62,7 @@ const OperateBtn = props => {
   const [loadingInside, setLoadingInside] = useState({}); // 内部loading
   // 点击选项
   const clickItem = (item, index) => e => __awaiter(void 0, void 0, void 0, function* () {
+    e.stopPropagation();
     if (item.disabled || handLoadStatus(item, index)) return;
     if (clickCloseMore) closeMore();
     const handKey = item[key];
@@ -174,7 +175,10 @@ const OperateBtn = props => {
               arrow: false
           }}*/
           //onClick={clickMore}
-          className: 'operate-btn-more'
+          className: 'operate-btn-more',
+          onClick: e => {
+            e.stopPropagation();
+          }
         }, {
           children: jsx(More, {})
         }))

package/README.md

@@ -1,3 +1,9 @@
+## 版本: 4.0.20
+        【组合选择器-ComboSelect】选中项新增超出收起、表格固定分页样式
+        【滑块验证码-DragVerify】适配移动端
+        【表格操作按钮-OperateBtn】阻止事件冒泡
+        【表格-Table】修复表格拖拽，过滤不显示列宽度叠加
+
 ## 版本: 4.0.19
     para-ui/core@4.0.19 发布
         【下拉框-Select】修改多选模式，布局方式，防止火狐浏览器宽度足够出现...

package/Table/index.js

@@ -2760,7 +2760,7 @@ const Table = propsInit => {
       width: result.width
     };
     setHeadDataConfig(Object.assign({}, constData.current.headDataConfig)); // 设置表格列配置,被拖动的width
-    handHeadDataCom([...headData]); // 重新计算表格的最小宽度
+    handHeadDataCom([...headDataCom]); // 重新计算表格的最小宽度
     // 本地记住拖动列宽度
     setLocalStorageHeadCom({
       headDataConfig: constData.current.headDataConfig,

package/index.js

@@ -25,7 +25,7 @@ export { D as Dropdown } from './_verture/index-389675ab.js';
 export { default as DynamicMultiBox } from './DynamicMultiBox/index.js';
 export { default as Empty } from './Empty/index.js';
 export { default as Form } from './Form/index.js';
-export { F as FormItem } from './_verture/index-cb2c05c7.js';
+export { F as FormItem } from './_verture/index-356d88fa.js';
 export { u as FunctionModal, F as FunctionModalProvider, a as useClose } from './_verture/modalContext-3ba6ca8f.js';
 export { default as GlobalContext, changeConfirmLocale, getConfirmLocale } from './GlobalContext/index.js';
 export { default as Help } from './Help/index.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@para-ui/core",
   "private": false,
-  "version": "4.0.19",
+  "version": "4.0.20",
   "main": "./index.js",
   "typings": "./index.d.ts",
   "description": "Powered by Para FED",