@para-ui/core 3.0.35 → 3.0.37

package/SelectorPicker/index.js

@@ -1,18 +1,20 @@
 import { _ as _defineProperty } from '../_verture/defineProperty-62acccfc.js';
 import { _ as _toConsumableArray } from '../_verture/toConsumableArray-87c7d895.js';
 import { _ as _slicedToArray } from '../_verture/slicedToArray-77980792.js';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useState, useRef, Fragment as Fragment$1 } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
 import clsx from 'clsx';
 import HelperText from '../HelperText/index.js';
 import Label from '../Label/index.js';
 import { D as Dropdown } from '../_verture/index-be4faaee.js';
 import Selector, { handFieldConfig } from '../Selector/index.js';
 import AutoTips from '../AutoTips/index.js';
+import { Popover } from '../Popover/index.js';
 import CloseCircle from '@para-ui/icons/CloseCircle';
 import Down from '@para-ui/icons/Down';
 import CloseIcon from '@para-ui/icons/Close';
 import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
+import { u as useFormatMessage } from '../_verture/useFormatMessage-703f8b20.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 import '../_verture/typeof-498dd2b1.js';
 import '../Help/index.js';
@@ -28,16 +30,14 @@ import '@paraview/lib';
 import '../_verture/index-06fea29b.js';
 import '../Radio/index.js';
 import '../Checkbox/index.js';
-import '../Popover/index.js';
 import '../Loading/index.js';
 import '@para-ui/icons/LoadingF';
-import '../_verture/useFormatMessage-703f8b20.js';
-import '@para-ui/core/GlobalContext';
 import '../Search/index.js';
 import '../TextField/index.js';
 import '@para-ui/icons/PreviewClose';
 import '@para-ui/icons/PreviewOpen';
 import '../_verture/useGlobalProps-1b846a65.js';
+import '@para-ui/core/GlobalContext';
 import '../Button/index.js';
 import '@para-ui/icons/Forbid';
 import '@para-ui/icons/Search';
@@ -47,7 +47,20 @@ import '@para-ui/icons/Return';
 import '../Empty/index.js';
 import '@para-ui/icons/Refresh';
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/8/2 5:57 PM\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-selector-picker > .selector-picker-wrapper {\n  position: relative;\n  display: flex;\n  min-height: 36px;\n  padding: 0 42px 0 12px;\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  border-radius: 4px;\n  background-color: rgb(255, 255, 255);\n  cursor: pointer;\n  transition: 0.3s;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper:hover {\n  border-color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-placeholder {\n  position: absolute;\n  top: 50%;\n  left: 12px;\n  right: 42px;\n  transform: translateY(-50%);\n  font-size: 14px;\n  color: rgba(46, 55, 67, 0.4);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-arrow {\n  position: absolute;\n  top: 7px;\n  right: 12px;\n  line-height: 0;\n  transition: 0.3s;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-arrow svg {\n  color: rgba(46, 55, 67, 0.7);\n  font-size: 20px;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-clear {\n  position: absolute;\n  top: 9px;\n  right: 12px;\n  opacity: 0;\n  line-height: 0;\n  cursor: pointer;\n  transition: 0.3s;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-clear svg {\n  color: rgba(46, 55, 67, 0.7);\n  font-size: 16px;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-overflow {\n  position: relative;\n  display: flex;\n  width: 100%;\n  flex: auto;\n  flex-wrap: wrap;\n  padding-top: 5px;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-overflow.selector-picker-overflow-single {\n  padding-top: 0;\n  align-items: center;\n  overflow: hidden;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-overflow.selector-picker-overflow-single > .selector-picker-single-content {\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 14px;\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-overflow > .selector-picker-overflow-item {\n  flex: none;\n  max-width: 100%;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-overflow > .selector-picker-overflow-item > .selector-picker-item {\n  display: inline-flex;\n  align-items: center;\n  padding: 0 12px;\n  height: 24px;\n  margin: 0 8px 5px 0;\n  max-width: 100%;\n  color: rgb(46, 55, 67);\n  line-height: 24px;\n  background-color: rgba(171, 176, 185, 0.2);\n  border-radius: 4px;\n  user-select: none;\n  transition: 0.3s;\n  cursor: default;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-overflow > .selector-picker-overflow-item > .selector-picker-item > .selector-picker-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-v3-selector-picker > .selector-picker-wrapper > .selector-picker-overflow > .selector-picker-overflow-item > .selector-picker-item > .selector-picker-item-remove {\n  display: inline-flex;\n  cursor: pointer;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-overflow > .selector-picker-overflow-item > .selector-picker-item > .selector-picker-item-remove svg {\n  font-size: 16px;\n  color: inherit;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-focused > .selector-picker-wrapper {\n  border-color: rgb(54, 102, 214);\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-focused > .selector-picker-wrapper > .selector-picker-arrow {\n  transform: rotate(180deg);\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-disabled {\n  cursor: not-allowed;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-disabled > .selector-picker-wrapper {\n  background-color: rgba(171, 176, 185, 0.12);\n  border-color: rgba(171, 176, 185, 0.4);\n  pointer-events: none;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-error > .selector-picker-wrapper {\n  border-color: rgb(235, 96, 84);\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-error > .selector-picker-wrapper:hover {\n  border-color: rgb(235, 96, 84);\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-clear > .selector-picker-wrapper:hover > .selector-picker-arrow {\n  opacity: 0;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-clear > .selector-picker-wrapper:hover > .selector-picker-clear {\n  opacity: 1;\n}\n.paraui-v3-selector-picker-dropdown .paraui-v3-selector {\n  border: 0;\n}\n.paraui-v3-selector-picker-dropdown .selector-picker-dropdown-content {\n  max-height: 300px;\n  overflow: auto;\n}";
+var en = {
+  selected: 'Selected'
+};
+
+var zh = {
+  selected: '已选中'
+};
+
+var localeJson = {
+  zh: zh,
+  en: en
+};
+
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/8/2 5:57 PM\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-selector-picker {\n  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  width: 100%;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 0 42px 0 12px;\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  border-radius: 4px;\n  background-color: rgb(255, 255, 255);\n  cursor: pointer;\n  transition: 0.3s;\n  padding-right: 40px;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper:hover {\n  border-color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper:hover > .selector-picker-arrow > svg {\n  color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  width: 100%;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n  height: 100%;\n  overflow: hidden;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item {\n  display: inline-block;\n  background-color: rgba(171, 176, 185, 0.2);\n  border-radius: 4px;\n  padding: 0 12px 0 12px;\n  color: rgb(46, 55, 67);\n  margin-right: 8px;\n  vertical-align: top;\n  max-width: 100%;\n  white-space: nowrap;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item.check-select-content-item-more {\n  cursor: pointer;\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item.check-select-content-item-more > span {\n  max-width: none;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > span {\n  color: rgb(46, 55, 67);\n  display: inline-block;\n  height: 100%;\n  vertical-align: top;\n  max-width: calc(100% - 20px);\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > svg {\n  cursor: pointer;\n  margin-left: 8px;\n  color: rgb(46, 55, 67);\n  font-size: 16px;\n  position: relative;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > svg:hover {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check.check-select-content-item-noclose > span {\n  max-width: none;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  font-size: 14px;\n  line-height: 1.429;\n  color: rgb(46, 55, 67);\n  word-break: break-all;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-placeholder {\n  flex: 1;\n  color: rgba(46, 55, 67, 0.4);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-arrow {\n  position: absolute;\n  right: 12px;\n  top: 0;\n  z-index: 2;\n  line-height: 0;\n  width: 20px;\n  height: 20px;\n  transition: all 0.3s;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-arrow > svg {\n  font-size: 20px;\n  color: rgba(46, 55, 67, 0.7);\n  transition: all 0.3s;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-clear {\n  position: absolute;\n  right: 12px;\n  top: 0;\n  z-index: 2;\n  line-height: 0;\n  opacity: 0;\n  transition: all 0.3s;\n  width: 20px;\n  height: 20px;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-clear > svg {\n  font-size: 16px;\n  color: rgba(46, 55, 67, 0.7);\n  position: absolute;\n  left: 2px;\n  top: 2px;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-clear:hover > svg {\n  color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-focused > .selector-picker-wrapper {\n  border-color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-focused > .selector-picker-wrapper > .selector-picker-arrow svg {\n  transform: rotate(180deg);\n  color: #3666d6;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-disabled > .selector-picker-wrapper {\n  background-color: rgba(171, 176, 185, 0.12);\n  cursor: not-allowed;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-disabled > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > span {\n  max-width: 100%;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-disabled > .selector-picker-wrapper:hover {\n  border-color: rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-disabled > .selector-picker-wrapper:hover > .selector-picker-arrow > svg {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-error > .selector-picker-wrapper {\n  border-color: rgb(235, 96, 84) !important;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-clear > .selector-picker-wrapper:hover > .selector-picker-arrow {\n  opacity: 0;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-clear > .selector-picker-wrapper:hover > .selector-picker-clear {\n  opacity: 1;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-clear.paraui-v3-selector-picker-disabled > .selector-picker-wrapper:hover > .selector-picker-arrow {\n  opacity: 1;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-large.paraui-v3-selector-picker-wrap > .selector-picker-wrapper {\n  min-height: 36px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-large.paraui-v3-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  min-height: 34px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-large.paraui-v3-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n  padding-bottom: 5px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-large.paraui-v3-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  min-height: 34px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-large.paraui-v3-selector-picker-nowrap > .selector-picker-wrapper {\n  height: 36px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-large.paraui-v3-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  height: 34px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-large.paraui-v3-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  height: 34px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-large > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item {\n  margin-top: 5px;\n  height: 24px;\n  line-height: 24px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-large > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > svg {\n  top: 3px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-large > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  padding: 7px 0;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-large > .selector-picker-wrapper > .selector-picker-placeholder {\n  height: 34px;\n  line-height: 34px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-large > .selector-picker-wrapper > .selector-picker-arrow {\n  top: 8px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-large > .selector-picker-wrapper > .selector-picker-clear {\n  top: 8px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-medium.paraui-v3-selector-picker-wrap > .selector-picker-wrapper {\n  min-height: 32px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-medium.paraui-v3-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  min-height: 30px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-medium.paraui-v3-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n  padding-bottom: 4px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-medium.paraui-v3-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  min-height: 30px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-medium.paraui-v3-selector-picker-nowrap > .selector-picker-wrapper {\n  height: 32px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-medium.paraui-v3-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  height: 30px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-medium.paraui-v3-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  height: 30px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-medium > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item {\n  margin-top: 4px;\n  height: 22px;\n  line-height: 22px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-medium > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > svg {\n  top: 3px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-medium > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  padding: 5px 0;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-medium > .selector-picker-wrapper > .selector-picker-placeholder {\n  height: 30px;\n  line-height: 30px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-medium > .selector-picker-wrapper > .selector-picker-arrow {\n  top: 6px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-medium > .selector-picker-wrapper > .selector-picker-clear {\n  top: 6px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-small.paraui-v3-selector-picker-wrap > .selector-picker-wrapper {\n  min-height: 28px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-small.paraui-v3-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  min-height: 26px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-small.paraui-v3-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n  padding-bottom: 3px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-small.paraui-v3-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  min-height: 26px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-small.paraui-v3-selector-picker-nowrap > .selector-picker-wrapper {\n  height: 28px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-small.paraui-v3-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  height: 26px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-small.paraui-v3-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  height: 26px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-small > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item {\n  margin-top: 3px;\n  height: 20px;\n  line-height: 20px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-small > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > svg {\n  top: 2px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-small > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  padding: 3px 0;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-small > .selector-picker-wrapper > .selector-picker-placeholder {\n  height: 26px;\n  line-height: 26px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-small > .selector-picker-wrapper > .selector-picker-arrow {\n  top: 4px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-small > .selector-picker-wrapper > .selector-picker-clear {\n  top: 4px;\n}\n\n.paraui-v3-selector-picker-dropdown .paraui-v3-selector {\n  border: 0;\n}\n.paraui-v3-selector-picker-dropdown .selector-picker-dropdown-content {\n  max-height: 300px;\n  overflow: auto;\n}\n\n.paraui-v3-selector-more-popover {\n  padding-left: 16px;\n}\n.paraui-v3-selector-more-popover .select-more {\n  width: 300px;\n}\n.paraui-v3-selector-more-popover .select-more > .select-more-title {\n  font-size: 14px;\n  padding: 0 12px;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-selector-more-popover .select-more > .select-more-content {\n  max-height: 300px;\n  overflow: auto;\n}\n.paraui-v3-selector-more-popover .select-more > .select-more-content > .select-more-content-item {\n  padding: 0 12px;\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n}\n.paraui-v3-selector-more-popover .select-more > .select-more-content > .select-more-content-item > span {\n  width: calc(100% - 25px);\n  display: inline-block;\n  font-size: 14px;\n}\n.paraui-v3-selector-more-popover .select-more > .select-more-content > .select-more-content-item > svg {\n  font-size: 20px;\n  position: relative;\n  cursor: pointer;\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-selector-more-popover .select-more > .select-more-content > .select-more-content-item > svg:hover {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-selector-more-popover.paraui-v3-selector-more-popover-small .select-more > .select-more-title {\n  line-height: 28px;\n}\n.paraui-v3-selector-more-popover.paraui-v3-selector-more-popover-small .select-more > .select-more-content > .select-more-content-item {\n  line-height: 28px;\n}\n.paraui-v3-selector-more-popover.paraui-v3-selector-more-popover-medium .select-more > .select-more-title {\n  line-height: 32px;\n}\n.paraui-v3-selector-more-popover.paraui-v3-selector-more-popover-medium .select-more > .select-more-content > .select-more-content-item {\n  line-height: 32px;\n}\n.paraui-v3-selector-more-popover.paraui-v3-selector-more-popover-large .select-more > .select-more-title {\n  line-height: 36px;\n}\n.paraui-v3-selector-more-popover.paraui-v3-selector-more-popover-large .select-more > .select-more-content > .select-more-content-item {\n  line-height: 36px;\n}";
 styleInject(css_248z);
 
 //下拉选择器
@@ -65,7 +78,7 @@ var SelectorPicker = function SelectorPicker(props) {
     hideErrorDom = props.hideErrorDom,
     helperText = props.helperText,
     _props$size = props.size,
-    size = _props$size === void 0 ? 'medium' : _props$size,
+    size = _props$size === void 0 ? 'large' : _props$size,
     _props$disabled = props.disabled,
     disabled = _props$disabled === void 0 ? false : _props$disabled,
     style = props.style,
@@ -73,14 +86,17 @@ var SelectorPicker = function SelectorPicker(props) {
     placeholder = _props$placeholder === void 0 ? '请选择' : _props$placeholder,
     _props$multiple = props.multiple,
     multiple = _props$multiple === void 0 ? false : _props$multiple,
-    maxCount = props.maxCount,
     _props$allowClear = props.allowClear,
     allowClear = _props$allowClear === void 0 ? false : _props$allowClear,
+    _props$overLine = props.overLine,
+    overLine = _props$overLine === void 0 ? false : _props$overLine,
     selectorProps = props.selectorProps,
     onChange = props.onChange,
     onClear = props.onClear,
     tagRender = props.tagRender,
+    morePopoverClassName = props.morePopoverClassName,
     getPopupContainer = props.getPopupContainer;
+  var intl = useFormatMessage('Selector', localeJson);
   var fieldConfigHand = handFieldConfig((_a = props.selectorProps) === null || _a === void 0 ? void 0 : _a.fieldConfig, ((_b = props.selectorProps) === null || _b === void 0 ? void 0 : _b.rowKey) || 'key'); // 字段配置,对应数据字段
   var selectorFieldConfigHand = Object.assign(Object.assign({}, fieldConfigHand), (_c = props.selectorProps) === null || _c === void 0 ? void 0 : _c.backDataFieldConfig); // 选中值字段配置,对应数据字段
   var _useState = useState(!defaultValue ? [] : defaultValue),
@@ -91,20 +107,25 @@ var SelectorPicker = function SelectorPicker(props) {
     _useState4 = _slicedToArray(_useState3, 2),
     open = _useState4[0],
     setOpen = _useState4[1]; // 显示下拉
-  var posDom = useRef(null);
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    openMore = _useState6[0],
+    setOpenMore = _useState6[1]; // 显示更多
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    morePos = _useState8[0],
+    setMorePos = _useState8[1]; // 超出在原始位置
+  var refDom = useRef(null); // 容器
+  var constData = useRef({
+    list: []
+  });
   var prefixCls = $prefixCls + '-selector-picker';
-  /** 改变事件 val绑定值, node处理过的数据 rowData原始数据 */
-  var onChangeCom = function onChangeCom(val, node, rowData) {
-    onChange && onChange(val, node, rowData);
-    if (!multiple) setOpen(false);
-    if (value === undefined) {
-      setValueCom(!val ? [] : val);
-    }
-  };
+  constData.current.value = value;
+  constData.current.valueCom = valueCom;
   /** 处理value,defaultValue */
   var handValue = function handValue() {
-    if (value !== undefined) return value;
-    return valueCom;
+    if (constData.current.value !== undefined) return constData.current.value;
+    return constData.current.valueCom;
   };
   /** 处理组件绑定的值 */
   var handComVal = function handComVal() {
@@ -115,17 +136,64 @@ var SelectorPicker = function SelectorPicker(props) {
     }
     return handVal;
   };
-  //打开浮层
-  var openSelector = function openSelector() {
-    setOpen(true);
+  constData.current.list = handComVal();
+  useEffect(function () {
+    if (!overLine && multiple) {
+      window.addEventListener('resize', changeSize);
+    } else {
+      window.removeEventListener("resize", changeSize);
+    }
+    return function () {
+      window.removeEventListener("resize", changeSize);
+    };
+  }, [overLine, multiple]);
+  useEffect(function () {
+    changeSize();
+  }, [valueCom, value]);
+  /**
+   * 多选 不换行 计算
+   * @param index 数组下标
+   */
+  var handMultiline = function handMultiline(index) {
+    if (index === null || index === 0) return;
+    if (index === undefined) index = constData.current.list.length;
+    var refEle = refDom.current;
+    if (!refEle) return;
+    var boxDom = refEle.querySelector('.selector-picker-wrapper-content-check');
+    if (!boxDom) return;
+    if (boxDom.scrollHeight > boxDom.clientHeight) {
+      var num = Number(index) - 1;
+      // 超出
+      setMorePos(num);
+      handMultiline(num);
+    } else {
+      // 一行
+      if (constData.current.list.length <= index) handleCloseMore();
+    }
+  };
+  /** 改变屏幕大小 */
+  var changeSize = function changeSize() {
+    clearTimeout(constData.current.resizeTimer);
+    constData.current.resizeTimer = setTimeout(function () {
+      setMorePos(constData.current.list.length);
+      handMultiline();
+    }, 100);
   };
-  //生成cls
-  var makeCls = function makeCls() {
-    var _clsx;
-    var list = handComVal();
-    return clsx(prefixCls, className, (_clsx = {}, _defineProperty(_clsx, "".concat(prefixCls, "-focused"), open), _defineProperty(_clsx, "".concat(prefixCls, "-disabled"), disabled), _defineProperty(_clsx, "".concat(prefixCls, "-error"), error), _defineProperty(_clsx, "".concat(prefixCls, "-clear"), allowClear && list.length), _defineProperty(_clsx, "".concat(prefixCls, "-").concat(size), size !== 'medium'), _clsx));
+  //删除当前选中项
+  var handleTagRemove = function handleTagRemove(opt, index, e) {
+    e.stopPropagation();
+    constData.current.list.splice(index, 1);
+    onChangeCom(_toConsumableArray(constData.current.list), {}, {});
+  };
+  /** 改变事件 val绑定值, node处理过的数据 rowData原始数据 */
+  var onChangeCom = function onChangeCom(val, node, rowData) {
+    onChange && onChange(val, node, rowData);
+    if (!multiple) setOpen(false);
+    if (value === undefined) {
+      setValueCom(!val ? [] : val);
+    }
   };
-  //渲染label
+  /** 处理标题 */
   var renderLabel = function renderLabel() {
     if (label || required) {
       return jsx(Label, Object.assign({
@@ -135,97 +203,7 @@ var SelectorPicker = function SelectorPicker(props) {
     }
     return null;
   };
-  //删除当前选中项
-  var handleTagRemove = function handleTagRemove(opt, index, e) {
-    e.stopPropagation();
-    var list = handComVal();
-    list.splice(index, 1);
-    onChangeCom(_toConsumableArray(list), {}, {});
-  };
-  //全部清空
-  var handleAllClear = function handleAllClear(e) {
-    e.stopPropagation();
-    setOpen(false);
-    onClear === null || onClear === void 0 ? void 0 : onClear();
-    onChangeCom(multiple ? [] : {}, {}, {});
-  };
-  /** 处理tag标签 */
-  var handTagDom = function handTagDom(item, index) {
-    var labelStr = selectorFieldConfigHand.mainTitle || '';
-    var valKey = selectorFieldConfigHand.key || '';
-    var val = item[labelStr] || item[valKey];
-    var renderVal = tagRender && tagRender(item);
-    return jsx("div", Object.assign({
-      className: "selector-picker-overflow-item"
-    }, {
-      children: jsxs("span", Object.assign({
-        className: "selector-picker-item"
-      }, {
-        children: [jsx("span", Object.assign({
-          className: "selector-picker-item-content"
-        }, {
-          children: jsx(AutoTips, {
-            children: renderVal || val
-          })
-        })), jsx("span", Object.assign({
-          className: "selector-picker-item-remove",
-          onClick: function onClick(e) {
-            return handleTagRemove === null || handleTagRemove === void 0 ? void 0 : handleTagRemove(item, index, e);
-          }
-        }, {
-          children: jsx(CloseIcon, {})
-        }))]
-      }))
-    }));
-  };
-  //tag memo
-  var tagMemo = function tagMemo() {
-    var _a, _b;
-    var list = handComVal();
-    if (!list.length) return;
-    if (!multiple) {
-      //单选
-      var labelStr = selectorFieldConfigHand.mainTitle || '';
-      var valKey = selectorFieldConfigHand.key || '';
-      var val = ((_a = list[0]) === null || _a === void 0 ? void 0 : _a[labelStr]) || ((_b = list[0]) === null || _b === void 0 ? void 0 : _b[valKey]);
-      var renderVal = tagRender && tagRender(list[0]);
-      return jsx("span", Object.assign({
-        className: "selector-picker-single-content"
-      }, {
-        children: renderVal || val
-      }));
-    }
-    var realShowList = _toConsumableArray(list); //实际
-    var overList = []; //超出显示
-    if (maxCount) {
-      if (list.length > maxCount) {
-        overList = list.slice(maxCount);
-        realShowList = list.slice(0, maxCount);
-      }
-    }
-    //超出部分
-    var renderOverTag = (overList === null || overList === void 0 ? void 0 : overList.length) ? jsx("div", Object.assign({
-      className: "selector-picker-overflow-item"
-    }, {
-      children: jsx("span", Object.assign({
-        className: "selector-picker-item"
-      }, {
-        children: jsx("span", Object.assign({
-          className: "selector-picker-item-content"
-        }, {
-          children: "+".concat(overList === null || overList === void 0 ? void 0 : overList.length)
-        }))
-      }))
-    })) : null;
-    return jsxs(Fragment, {
-      children: [realShowList.map(function (item, idx) {
-        return jsx(Fragment$1, {
-          children: handTagDom(item, idx)
-        }, idx);
-      }), renderOverTag]
-    });
-  };
-  /** dropdown 下拉浮层 */
+  /** 下拉浮层 */
   var renderOverlay = function renderOverlay() {
     var handSelectorProps = function handSelectorProps() {
       var obj = Object.assign({
@@ -241,61 +219,218 @@ var SelectorPicker = function SelectorPicker(props) {
     return jsx("div", Object.assign({
       className: 'selector-picker-dropdown-content',
       style: {
-        width: (posDom && posDom.current ? posDom.current.offsetWidth : 0) + 'px'
+        width: (refDom && refDom.current ? refDom.current.offsetWidth : 0) + 'px'
       }
     }, {
       children: jsx(Selector, Object.assign({}, handSelectorProps()))
     }));
   };
-  //dropdown anchor
-  var renderAnchor = function renderAnchor() {
-    var list = handComVal();
-    var overflowCls = clsx("selector-picker-overflow", !multiple && "selector-picker-overflow-single");
-    //清除图标
-    var clearBtn = allowClear && list.length ? jsx("span", Object.assign({
-      className: "selector-picker-clear",
-      onClick: handleAllClear
+  /**
+   * 点击显示更多
+   * @param e 点击元素
+   */
+  var clickMore = function clickMore(e) {
+    e.stopPropagation();
+    setOpenMore(true);
+    setOpen(false);
+  };
+  // 关闭显示更多
+  var handleCloseMore = function handleCloseMore() {
+    setOpenMore(false);
+  };
+  //全部清空
+  var handleAllClear = function handleAllClear(e) {
+    e.stopPropagation();
+    setOpen(false);
+    onClear === null || onClear === void 0 ? void 0 : onClear();
+    onChangeCom(null, {}, {});
+  };
+  /** 显示下拉 */
+  var onVisibleChange = function onVisibleChange(bol) {
+    if (disabled) return;
+    setOpen(bol);
+  };
+  /** 处理单/多选内容 */
+  var handDetail = function handDetail() {
+    var _a, _b;
+    if (multiple) {
+      // 多选
+      return jsxs("div", Object.assign({
+        className: 'selector-picker-wrapper-content-check'
+      }, {
+        children: [constData.current.list.map(function (item, index) {
+          if (morePos !== null && morePos <= index) return null;
+          var labelStr = selectorFieldConfigHand.mainTitle || '';
+          var valKey = selectorFieldConfigHand.key || '';
+          var val = item[labelStr] || item[valKey];
+          var renderVal = tagRender && tagRender(item);
+          var isClose = true;
+          if (disabled === true) {
+            isClose = false; // 禁用不显示×
+          }
+
+          return jsxs("div", Object.assign({
+            className: isClose ? 'check-select-content-item' : 'check-select-content-item check-select-content-item-noclose'
+          }, {
+            children: [jsx("span", {
+              children: jsx(AutoTips, {
+                children: renderVal || val
+              })
+            }), isClose && jsx(CloseIcon, {
+              onClick: function onClick(e) {
+                return handleTagRemove === null || handleTagRemove === void 0 ? void 0 : handleTagRemove(item, index, e);
+              }
+            })]
+          }), index);
+        }), function () {
+          if (morePos !== null && constData.current.list.length > morePos) {
+            return jsx("div", Object.assign({
+              className: "check-select-content-item check-select-content-item-more",
+              onClick: clickMore
+            }, {
+              children: jsxs("span", {
+                children: ["+", constData.current.list.length - morePos]
+              })
+            }));
+          }
+        }()]
+      }));
+    }
+    // 单选
+    var labelStr = selectorFieldConfigHand.mainTitle || '';
+    var valKey = selectorFieldConfigHand.key || '';
+    var val = ((_a = constData.current.list[0]) === null || _a === void 0 ? void 0 : _a[labelStr]) || ((_b = constData.current.list[0]) === null || _b === void 0 ? void 0 : _b[valKey]);
+    var renderVal = tagRender && tagRender(constData.current.list[0]);
+    var resultVal = renderVal || val;
+    return jsx("div", Object.assign({
+      className: 'selector-picker-wrapper-content-radio'
     }, {
-      children: jsx(CloseCircle, {})
-    })) : null;
+      children: overLine ? resultVal : jsx(AutoTips, {
+        children: resultVal
+      })
+    }));
+  };
+  /** 处理内容 */
+  var renderTagContent = function renderTagContent() {
+    if (!constData.current.list.length) return null;
+    return jsx("div", Object.assign({
+      className: 'selector-picker-wrapper-content'
+    }, {
+      children: handDetail()
+    }));
+  };
+  /** dropdown 主体 */
+  var renderAnchor = function renderAnchor() {
     return jsxs("div", Object.assign({
-      className: "selector-picker-wrapper",
-      onClick: openSelector
+      className: "selector-picker-wrapper"
     }, {
-      children: [jsx("div", Object.assign({
-        className: overflowCls
+      children: [renderTagContent(), !constData.current.list.length && jsx("span", Object.assign({
+        className: 'selector-picker-placeholder'
       }, {
-        children: tagMemo()
+        children: placeholder
       })), jsx("span", Object.assign({
-        className: "selector-picker-arrow"
+        className: 'selector-picker-arrow'
       }, {
         children: jsx(Down, {})
-      })), clearBtn, !list.length && jsx("span", Object.assign({
-        className: "selector-picker-placeholder"
+      })), allowClear && constData.current.list.length && !disabled ? jsx("span", Object.assign({
+        className: "selector-picker-clear",
+        onClick: handleAllClear
       }, {
-        children: placeholder
+        children: jsx(CloseCircle, {})
+      })) : null]
+    }));
+  };
+  /** 多选更多弹窗内容 */
+  var morePopoverContent = function morePopoverContent() {
+    return jsxs("div", Object.assign({
+      className: "select-more"
+    }, {
+      children: [jsxs("div", Object.assign({
+        className: "select-more-title"
+      }, {
+        children: [jsx("span", {
+          children: intl({
+            id: 'selected'
+          })
+        }), jsxs("span", {
+          children: ["(", constData.current.list.length - Number(morePos), ")"]
+        })]
+      })), jsx("div", Object.assign({
+        className: "select-more-content"
+      }, {
+        children: constData.current.list.map(function (item, index) {
+          if (morePos !== null && morePos > index) return null;
+          var labelStr = selectorFieldConfigHand.mainTitle || '';
+          var valKey = selectorFieldConfigHand.key || '';
+          var val = item[labelStr] || item[valKey];
+          var renderVal = tagRender && tagRender(item);
+          var isClose = true;
+          if (disabled === true) {
+            isClose = false; // 禁用不显示×
+          }
+
+          return jsxs("div", Object.assign({
+            className: "select-more-content-item"
+          }, {
+            children: [jsx("span", {
+              children: jsx(AutoTips, {
+                children: renderVal || val
+              })
+            }), isClose && jsx(CloseIcon, {
+              onClick: function onClick(e) {
+                return handleTagRemove === null || handleTagRemove === void 0 ? void 0 : handleTagRemove(item, index, e);
+              }
+            })]
+          }), index);
+        })
       }))]
     }));
   };
-  return jsxs("div", Object.assign({
-    className: makeCls(),
-    style: style,
-    ref: posDom
-  }, {
-    children: [renderLabel(), jsx(Dropdown, Object.assign({
+  // 处理下拉框更多class
+  var handleClassMorePopover = function handleClassMorePopover() {
+    var str = "".concat($prefixCls, "-selector-more-popover ").concat($prefixCls, "-scrollbar-small");
+    if (size) str += " ".concat($prefixCls, "-selector-more-popover-").concat(size);
+    if (morePopoverClassName) str += ' ' + morePopoverClassName;
+    return str;
+  };
+  /** 多选超出popover */
+  var morePopover = function morePopover() {
+    return jsx(Popover, Object.assign({
+      placement: "rightTop",
+      visible: openMore,
+      content: morePopoverContent(),
+      onVisibleChange: handleCloseMore,
+      overlayClassName: handleClassMorePopover()
+    }, {
+      children: renderAnchor()
+    }));
+  };
+  /** 处理内容 */
+  var renderContent = function renderContent() {
+    return jsx(Dropdown, Object.assign({
       visible: open,
       destroyPopupOnHide: true,
       overlay: renderOverlay(),
       placement: 'bottomLeft',
       trigger: ['click'],
-      onVisibleChange: function onVisibleChange(vis) {
-        return setOpen(vis);
-      },
+      onVisibleChange: onVisibleChange,
       overlayClassName: $prefixCls + '-selector-picker-dropdown',
       getPopupContainer: getPopupContainer
     }, {
-      children: renderAnchor()
-    })), jsx(HelperText, {
+      children: morePopover()
+    }));
+  };
+  /** 生成cls */
+  var makeCls = function makeCls() {
+    var _clsx;
+    return clsx(prefixCls, className, (_clsx = {}, _defineProperty(_clsx, "".concat(prefixCls, "-focused"), open), _defineProperty(_clsx, "".concat(prefixCls, "-disabled"), disabled), _defineProperty(_clsx, "".concat(prefixCls, "-error"), error), _defineProperty(_clsx, "".concat(prefixCls, "-clear"), allowClear && constData.current.list.length), _defineProperty(_clsx, "".concat(prefixCls, "-").concat(size), size), _defineProperty(_clsx, "".concat(prefixCls, "-wrap"), overLine), _defineProperty(_clsx, "".concat(prefixCls, "-nowrap"), !overLine), _clsx));
+  };
+  return jsxs("div", Object.assign({
+    className: makeCls(),
+    style: style,
+    ref: refDom
+  }, {
+    children: [renderLabel(), renderContent(), jsx(HelperText, {
       error: error,
       helperText: helperText,
       hideErrorDom: hideErrorDom

package/SelectorPicker/lang/en_US.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    selected: string;
+};
+export default _default;

package/SelectorPicker/lang/index.d.ts

@@ -0,0 +1,9 @@
+declare const _default: {
+    zh: {
+        selected: string;
+    };
+    en: {
+        selected: string;
+    };
+};
+export default _default;

package/SelectorPicker/lang/zh_CN.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    selected: string;
+};
+export default _default;