@para-ui/core 3.0.86 → 4.0.0-alpha

package/Modal/index.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty } from '../_verture/defineProperty-62acccfc.js';
+import { _ as _defineProperty } from '../_verture/defineProperty-1d116156.js';
 import { _ as __rest } from '../_verture/tslib.es6-55ed4bd2.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React__default from 'react';
@@ -9,16 +9,17 @@ import { u as useFormatMessage } from '../_verture/useFormatMessage-703f8b20.js'
 import { d as defaultModalLocale } from '../_verture/index-e2881a53.js';
 import ReactDOM from 'react-dom';
 import clsx from 'clsx';
-import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
+import { $ as $prefixCls } from '../_verture/constant-0d9802f7.js';
+import AutoTips from '../AutoTips/index.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 import CompleteIcon from '@para-ui/icons/CheckCircleF';
-import CloseCircleFilled from '@para-ui/icons/CloseCircleF';
+import CloseCircleF from '@para-ui/icons/CloseCircleF';
 import InfoOutlined from '@para-ui/icons/WarningCircle';
 import WarningCircleF from '@para-ui/icons/WarningCircleF';
 import { UUID } from '@paraview/lib';
 import { getConfirmLocale } from '@para-ui/core/GlobalContext';
-import '../_verture/typeof-498dd2b1.js';
-import '../_verture/slicedToArray-76060636.js';
+import '../_verture/typeof-adeedc13.js';
+import '../_verture/slicedToArray-a8206399.js';
 import '../_verture/unsupportedIterableToArray-cb478f24.js';
 import '@para-ui/icons/LoadingF';
 import '@para-ui/icons/Forbid';
@@ -26,12 +27,12 @@ import '../Tooltip/index.js';
 import 'rc-tooltip';
 import 'rc-tooltip/lib/placements';
 import '@para-ui/icons/Down';
-import '../_verture/index-77f9e0fb.js';
+import '../_verture/index-e9007d6a.js';
 import 'rc-dropdown';
 import '../_verture/usePopupContainer-87febeb9.js';
 import 'dayjs';
 
-var css_248z$1 = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/2 下午7:00\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-confirm.paraui-v3-modal .paraui-v3-modal-body {\n  padding: 0;\n}\n.paraui-v3-confirm .confirm-wrapper {\n  width: 416px;\n  outline: none;\n}\n.paraui-v3-confirm .confirm-content {\n  position: relative;\n  padding: 32px 32px 24px;\n}\n.paraui-v3-confirm .confirm-content-close {\n  position: absolute;\n  right: 16px;\n  top: 16px;\n  border: none;\n}\n.paraui-v3-confirm .confirm-content-close svg {\n  font-size: 18px;\n}\n.paraui-v3-confirm .confirm-content-icon {\n  float: left;\n  margin-top: 3px;\n  color: rgb(255, 161, 80);\n}\n.paraui-v3-confirm .confirm-content-icon svg {\n  color: inherit;\n  font-size: 16px;\n}\n.paraui-v3-confirm .confirm-content-icon--warn, .paraui-v3-confirm .confirm-content-icon-warning {\n  color: rgb(255, 161, 80);\n}\n.paraui-v3-confirm .confirm-content-icon--error {\n  color: rgb(235, 96, 84);\n}\n.paraui-v3-confirm .confirm-content-icon--success {\n  color: rgb(83, 195, 27);\n}\n.paraui-v3-confirm .confirm-content-icon--info {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-confirm .confirm-content-body {\n  margin: 0 16px 0 30px;\n  color: rgb(46, 55, 67);\n  font-size: 14px;\n}\n.paraui-v3-confirm .confirm-content-body .confirm-body-title {\n  display: block;\n  margin-bottom: 8px;\n  font-weight: 700;\n  font-size: 14px;\n}\n.paraui-v3-confirm .confirm-content-actions {\n  margin-top: 24px;\n  text-align: right;\n}\n.paraui-v3-confirm .confirm-content-actions > button + button {\n  margin-left: 16px;\n}";
+var css_248z$1 = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/2 下午7:00\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-confirm.paraui-v4-modal .paraui-v4-modal-body {\n  padding: 0;\n}\n.paraui-v4-confirm .confirm-wrapper {\n  width: 416px;\n  outline: none;\n}\n.paraui-v4-confirm .confirm-content {\n  position: relative;\n  padding: 32px 32px 24px;\n}\n.paraui-v4-confirm .confirm-content-close {\n  position: absolute;\n  right: 16px;\n  top: 16px;\n  border: none;\n}\n.paraui-v4-confirm .confirm-content-close svg {\n  font-size: 18px;\n}\n.paraui-v4-confirm .confirm-content-icon {\n  float: left;\n  margin-top: 3px;\n  color: rgb(255, 147, 38);\n}\n.paraui-v4-confirm .confirm-content-icon svg {\n  color: inherit;\n  font-size: 14px;\n}\n.paraui-v4-confirm .confirm-content-icon--warn, .paraui-v4-confirm .confirm-content-icon-warning {\n  color: rgb(255, 147, 38);\n}\n.paraui-v4-confirm .confirm-content-icon--error {\n  color: rgb(244, 66, 66);\n}\n.paraui-v4-confirm .confirm-content-icon--success {\n  color: rgb(19, 191, 76);\n}\n.paraui-v4-confirm .confirm-content-icon--info {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-confirm .confirm-content-body {\n  margin: 0 16px 0 30px;\n  color: rgba(29, 33, 38, 0.9);\n  font-size: 14px;\n}\n.paraui-v4-confirm .confirm-content-body .confirm-body-title {\n  display: block;\n  margin-bottom: 8px;\n  font-weight: 700;\n  font-size: 500;\n}\n.paraui-v4-confirm .confirm-content-actions {\n  margin-top: 24px;\n  text-align: right;\n}\n.paraui-v4-confirm .confirm-content-actions > button + button {\n  margin-left: 16px;\n}";
 styleInject(css_248z$1);
 
 //图标
@@ -39,7 +40,7 @@ var iconMap = {
   "success": jsx(CompleteIcon, {}),
   "warn": jsx(WarningCircleF, {}),
   "warning": jsx(WarningCircleF, {}),
-  "error": jsx(CloseCircleFilled, {}),
+  "error": jsx(CloseCircleF, {}),
   "info": jsx(InfoOutlined, {})
 };
 //confirm modal
@@ -226,7 +227,7 @@ var Confirm = {
   destroyAll: destroyAllConfirm
 };
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/6/13 下午6:54\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-modal {\n  color: rgb(46, 55, 67);\n  font-size: 14px;\n  line-height: 1.5715;\n  pointer-events: none;\n  position: relative;\n  top: 100px;\n  width: auto;\n  max-width: calc(100vw - 32px);\n  margin: 0 auto;\n  padding-bottom: 24px;\n}\n.paraui-v3-modal.paraui-v3-modal-sm .paraui-v3-modal-content {\n  width: 430px;\n  max-height: 250px;\n}\n.paraui-v3-modal.paraui-v3-modal-md .paraui-v3-modal-content {\n  width: 486px;\n  max-height: 610px;\n}\n.paraui-v3-modal.paraui-v3-modal-lg .paraui-v3-modal-content {\n  width: 948px;\n  max-height: 610px;\n}\n.paraui-v3-modal.paraui-v3-modal-fullscreen {\n  max-width: 100%;\n  width: 100%;\n  height: 100%;\n}\n.paraui-v3-modal.paraui-v3-modal-zoom-enter, .paraui-v3-modal.paraui-v3-modal-zoom-appear {\n  transform: none;\n  opacity: 0;\n  animation-duration: 0.3s;\n  user-select: none;\n}\n.paraui-v3-modal-mask {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1500;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.45);\n}\n.paraui-v3-modal-mask-hidden {\n  display: none;\n}\n.paraui-v3-modal-wrap {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow: auto;\n  outline: 0;\n  z-index: 1500;\n  -webkit-overflow-scrolling: touch;\n}\n.paraui-v3-modal .paraui-v3-modal-content {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  position: relative;\n  border-radius: 4px;\n  background-color: rgb(255, 255, 255);\n  box-shadow: 0px 2px 8px 0px rgba(171, 176, 185, 0.4);\n  pointer-events: auto;\n  overflow-y: auto;\n}\n.paraui-v3-modal .paraui-v3-modal-title {\n  position: relative;\n  height: 44px;\n  padding: 12px 24px;\n  font-size: 14px;\n  color: rgb(46, 55, 67);\n  font-weight: 700;\n  line-height: 20px;\n  border-bottom: 1px solid rgba(171, 176, 185, 0.2);\n  overflow-wrap: break-word;\n}\n.paraui-v3-modal .paraui-v3-modal-title .paraui-v3-modal-close {\n  position: absolute;\n  top: 8px;\n  right: 14px;\n  z-index: 10;\n  border: 0;\n}\n.paraui-v3-modal .paraui-v3-modal-title .paraui-v3-modal-close .paraui-v3-modal-close-icon {\n  font-size: 20px;\n}\n.paraui-v3-modal .paraui-v3-modal-body {\n  flex: auto;\n  padding: 16px 24px;\n  overflow-y: auto;\n  overflow-wrap: break-word;\n}\n.paraui-v3-modal .paraui-v3-modal-footer {\n  padding: 8px 24px 24px;\n  text-align: right;\n}\n.paraui-v3-modal .paraui-v3-modal-footer > button + button {\n  margin-left: 16px;\n}\n.paraui-v3-modal-open {\n  overflow: hidden;\n}\n.paraui-v3-modal-centered {\n  text-align: center;\n}\n.paraui-v3-modal-centered::before {\n  display: inline-block;\n  width: 0;\n  height: 100%;\n  vertical-align: middle;\n  content: \"\";\n}\n.paraui-v3-modal-centered .paraui-v3-modal {\n  top: 0;\n  display: inline-block;\n  padding-bottom: 0;\n  text-align: left;\n  vertical-align: middle;\n}\n@media (max-width: 767px) {\n  .paraui-v3-modal .paraui-v3-modal {\n    max-width: calc(100vw - 16px);\n    margin: 8px auto;\n  }\n  .paraui-v3-modal .paraui-v3-modal-centered .paraui-v3-modal {\n    flex: 1;\n  }\n}\n\n.paraui-v3-modal-zoom-enter,\n.paraui-v3-modal-zoom-appear {\n  animation-duration: 0.2s;\n  animation-fill-mode: both;\n  animation-play-state: paused;\n  transform: scale(0);\n  opacity: 0;\n  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);\n}\n\n.paraui-v3-modal-zoom-leave {\n  animation-duration: 0.2s;\n  animation-fill-mode: both;\n  animation-play-state: paused;\n}\n\n.paraui-v3-modal-zoom-enter.paraui-v3-modal-zoom-enter-active,\n.paraui-v3-modal-zoom-appear.paraui-v3-modal-zoom-appear-active {\n  animation-name: paraui-v3ModalZoomIn;\n  animation-play-state: running;\n}\n\n.paraui-v3-modal-zoom-leave.paraui-v3-modal-zoom-leave-active {\n  animation-name: paraui-v3ModalZoomOut;\n  animation-play-state: running;\n  pointer-events: none;\n}\n\n.paraui-v3-modal-zoom-enter-prepare,\n.paraui-v3-modal-zoom-appear-prepare {\n  transform: none;\n}\n\n.paraui-v3-modal-zoom-leave {\n  animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);\n}\n\n.paraui-v3-modal-fade-enter,\n.paraui-v3-modal-fade-appear {\n  animation-duration: 0.2s;\n  animation-fill-mode: both;\n  animation-play-state: paused;\n}\n\n.paraui-v3-modal-fade-leave {\n  animation-duration: 0.2s;\n  animation-fill-mode: both;\n  animation-play-state: paused;\n}\n\n.paraui-v3-modal-fade-enter.paraui-v3-modal-fade-enter-active,\n.paraui-v3-modal-fade-appear.paraui-v3-modal-fade-appear-active {\n  animation-name: paraui-v3ModalFadeIn;\n  animation-play-state: running;\n}\n\n.paraui-v3-modal-fade-leave.paraui-v3-modal-fade-leave-active {\n  animation-name: paraui-v3ModalFadeOut;\n  animation-play-state: running;\n  pointer-events: none;\n}\n\n.paraui-v3-modal-fade-enter,\n.paraui-v3-modal-fade-appear {\n  opacity: 0;\n  animation-timing-function: linear;\n}\n\n.paraui-v3-modal-fade-leave {\n  animation-timing-function: linear;\n}\n\n@keyframes paraui-v3ModalZoomIn {\n  0% {\n    transform: scale(0.2);\n    opacity: 0;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n@keyframes paraui-v3ModalZoomOut {\n  0% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0.2);\n    opacity: 0;\n  }\n}\n@keyframes paraui-v3ModalFadeIn {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n@keyframes paraui-v3ModalFadeOut {\n  0% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/6/13 下午6:54\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-modal-close {\n  color: rgb(92, 101, 115);\n}\n\n.paraui-v4-modal {\n  color: rgba(29, 33, 38, 0.9);\n  font-size: 14px;\n  line-height: 1.5715;\n  pointer-events: none;\n  position: relative;\n  top: 100px;\n  width: auto;\n  max-width: calc(100vw - 32px);\n  margin: 0 auto;\n  padding-bottom: 24px;\n}\n.paraui-v4-modal.paraui-v4-modal-sm .paraui-v4-modal-content {\n  width: 430px;\n  max-height: 250px;\n}\n.paraui-v4-modal.paraui-v4-modal-md .paraui-v4-modal-content {\n  width: 486px;\n  max-height: 610px;\n}\n.paraui-v4-modal.paraui-v4-modal-lg .paraui-v4-modal-content {\n  width: 948px;\n  max-height: 610px;\n}\n.paraui-v4-modal.paraui-v4-modal-fullscreen {\n  max-width: 100%;\n  width: 100%;\n  height: 100%;\n}\n.paraui-v4-modal.paraui-v4-modal-zoom-enter, .paraui-v4-modal.paraui-v4-modal-zoom-appear {\n  transform: none;\n  opacity: 0;\n  animation-duration: 0.3s;\n  user-select: none;\n}\n.paraui-v4-modal-mask {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1500;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.45);\n}\n.paraui-v4-modal-mask-hidden {\n  display: none;\n}\n.paraui-v4-modal-wrap {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow: auto;\n  outline: 0;\n  z-index: 1500;\n  -webkit-overflow-scrolling: touch;\n}\n.paraui-v4-modal .paraui-v4-modal-content {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  position: relative;\n  border-radius: 4px;\n  background-color: white;\n  pointer-events: auto;\n  overflow-y: auto;\n}\n.paraui-v4-modal.paraui-v4-modal-without-mask .paraui-v4-modal-content {\n  box-shadow: 0 2px 8px 0 rgb(234, 236, 241);\n}\n.paraui-v4-modal .paraui-v4-modal-title {\n  position: relative;\n  height: 50px;\n  padding: 15px 20px;\n  font-size: 14px;\n  color: rgb(29, 33, 38);\n  font-weight: 700;\n  line-height: 20px;\n  overflow-wrap: break-word;\n}\n.paraui-v4-modal .paraui-v4-modal-title .paraui-v4-modal-close {\n  position: absolute;\n  top: 11px;\n  right: 15px;\n  z-index: 10;\n  border: 0;\n}\n.paraui-v4-modal .paraui-v4-modal-title .paraui-v4-modal-close .paraui-v4-modal-close-icon {\n  font-size: 18px;\n}\n.paraui-v4-modal .paraui-v4-modal-title .paraui-v4-modal-title-text {\n  width: calc(100% - 28px);\n}\n.paraui-v4-modal .paraui-v4-modal-body {\n  flex: auto;\n  padding: 0 20px;\n  overflow-y: auto;\n  overflow-wrap: break-word;\n}\n.paraui-v4-modal .paraui-v4-modal-footer {\n  height: 72px;\n  padding: 0 20px;\n  text-align: right;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n}\n.paraui-v4-modal .paraui-v4-modal-footer > button + button {\n  margin-left: 16px;\n}\n.paraui-v4-modal-open {\n  overflow: hidden;\n}\n.paraui-v4-modal-centered {\n  text-align: center;\n}\n.paraui-v4-modal-centered::before {\n  display: inline-block;\n  width: 0;\n  height: 100%;\n  vertical-align: middle;\n  content: \"\";\n}\n.paraui-v4-modal-centered .paraui-v4-modal {\n  top: 0;\n  display: inline-block;\n  padding-bottom: 0;\n  text-align: left;\n  vertical-align: middle;\n}\n@media (max-width: 767px) {\n  .paraui-v4-modal .paraui-v4-modal {\n    max-width: calc(100vw - 16px);\n    margin: 8px auto;\n  }\n  .paraui-v4-modal .paraui-v4-modal-centered .paraui-v4-modal {\n    flex: 1;\n  }\n}\n\n.paraui-v4-modal-zoom-enter,\n.paraui-v4-modal-zoom-appear {\n  animation-duration: 0.2s;\n  animation-fill-mode: both;\n  animation-play-state: paused;\n  transform: scale(0);\n  opacity: 0;\n  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);\n}\n\n.paraui-v4-modal-zoom-leave {\n  animation-duration: 0.2s;\n  animation-fill-mode: both;\n  animation-play-state: paused;\n}\n\n.paraui-v4-modal-zoom-enter.paraui-v4-modal-zoom-enter-active,\n.paraui-v4-modal-zoom-appear.paraui-v4-modal-zoom-appear-active {\n  animation-name: paraui-v4ModalZoomIn;\n  animation-play-state: running;\n}\n\n.paraui-v4-modal-zoom-leave.paraui-v4-modal-zoom-leave-active {\n  animation-name: paraui-v4ModalZoomOut;\n  animation-play-state: running;\n  pointer-events: none;\n}\n\n.paraui-v4-modal-zoom-enter-prepare,\n.paraui-v4-modal-zoom-appear-prepare {\n  transform: none;\n}\n\n.paraui-v4-modal-zoom-leave {\n  animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);\n}\n\n.paraui-v4-modal-fade-enter,\n.paraui-v4-modal-fade-appear {\n  animation-duration: 0.2s;\n  animation-fill-mode: both;\n  animation-play-state: paused;\n}\n\n.paraui-v4-modal-fade-leave {\n  animation-duration: 0.2s;\n  animation-fill-mode: both;\n  animation-play-state: paused;\n}\n\n.paraui-v4-modal-fade-enter.paraui-v4-modal-fade-enter-active,\n.paraui-v4-modal-fade-appear.paraui-v4-modal-fade-appear-active {\n  animation-name: paraui-v4ModalFadeIn;\n  animation-play-state: running;\n}\n\n.paraui-v4-modal-fade-leave.paraui-v4-modal-fade-leave-active {\n  animation-name: paraui-v4ModalFadeOut;\n  animation-play-state: running;\n  pointer-events: none;\n}\n\n.paraui-v4-modal-fade-enter,\n.paraui-v4-modal-fade-appear {\n  opacity: 0;\n  animation-timing-function: linear;\n}\n\n.paraui-v4-modal-fade-leave {\n  animation-timing-function: linear;\n}\n\n@keyframes paraui-v4ModalZoomIn {\n  0% {\n    transform: scale(0.2);\n    opacity: 0;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n@keyframes paraui-v4ModalZoomOut {\n  0% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0.2);\n    opacity: 0;\n  }\n}\n@keyframes paraui-v4ModalFadeIn {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n@keyframes paraui-v4ModalFadeOut {\n  0% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n}";
 styleInject(css_248z);
 
 //鼠标位置内部使用
@@ -284,7 +285,9 @@ var Modal = function Modal(props) {
     children = props.children,
     _props$closable = props.closable,
     closable = _props$closable === void 0 ? true : _props$closable,
-    restProps = __rest(props, ["open", "visible", "closeIcon", "centered", "focusTriggerAfterClose", "title", "footer", "showActions", "actions", "header", "hideHeader", "showCancel", "maskClosable", "disableBackdropClick", "keyboard", "disableEscapeKeyDown", "fullScreen", "customizeSize", "style", "bodyStyle", "contentWidth", "contentHeight", "contentStyle", "size", "children", "closable"]);
+    _props$mask = props.mask,
+    mask = _props$mask === void 0 ? true : _props$mask,
+    restProps = __rest(props, ["open", "visible", "closeIcon", "centered", "focusTriggerAfterClose", "title", "footer", "showActions", "actions", "header", "hideHeader", "showCancel", "maskClosable", "disableBackdropClick", "keyboard", "disableEscapeKeyDown", "fullScreen", "customizeSize", "style", "bodyStyle", "contentWidth", "contentHeight", "contentStyle", "size", "children", "closable", "mask"]);
   var isFullScreen = fullScreen || size === 'fullScreen'; //是否全屏
   var intl = useFormatMessage('Modal', defaultModalLocale);
   var prefixCls = "".concat($prefixCls, "-modal");
@@ -311,6 +314,10 @@ var Modal = function Modal(props) {
     if (isFullScreen) return sizeMap['fullScreen'];
     return sizeMap[size];
   };
+  var getModalCls = function getModalCls() {
+    if (mask) return "".concat(prefixCls, "-with-mask");
+    return "".concat(prefixCls, "-without-mask");
+  };
   //自定义样式
   var getCStyle = function getCStyle() {
     return Object.assign(Object.assign({}, customizeSize), style);
@@ -319,7 +326,9 @@ var Modal = function Modal(props) {
   var getContentStyle = function getContentStyle() {
     return Object.assign(Object.assign(Object.assign({}, bodyStyle), {
       width: contentWidth,
-      height: contentHeight
+      height: contentHeight,
+      maxHeight: 478,
+      minHeight: 118
     }), contentStyle);
   };
   //header
@@ -338,7 +347,11 @@ var Modal = function Modal(props) {
       })
     }));
     return jsxs(Fragment, {
-      children: [title, closeNode]
+      children: [jsx(AutoTips, Object.assign({
+        className: "".concat(prefixCls, "-title-text")
+      }, {
+        children: title
+      })), closeNode]
     });
   };
   //footer
@@ -352,7 +365,7 @@ var Modal = function Modal(props) {
       confirmLoading = _props$confirmLoading === void 0 ? false : _props$confirmLoading;
     var okBtn = jsx(Button, Object.assign({
       variant: "contained",
-      size: "medium",
+      size: "large",
       loading: confirmLoading,
       onClick: handleOk
     }, okButtonProps, {
@@ -362,7 +375,7 @@ var Modal = function Modal(props) {
     }));
     var cancelBtn = showCancel && jsx(Button, Object.assign({
       variant: "outlined",
-      size: "medium",
+      size: "large",
       onClick: handleCancel
     }, cancelButtonProps, {
       children: cancelText !== null && cancelText !== void 0 ? cancelText : intl({
@@ -394,8 +407,9 @@ var Modal = function Modal(props) {
   //wrap cls
   var makeWrapClassName = clsx(props.wrapClassName, _defineProperty({}, "".concat(prefixCls, "-centered"), centered));
   //modal cls
-  var makeModalClassName = clsx(props.className, "".concat($prefixCls, "-scrollbar-small"), makeSizeCls());
+  var makeModalClassName = clsx(props.className, "".concat($prefixCls, "-scrollbar-small"), makeSizeCls(), getModalCls());
   return jsx(Dialog, Object.assign({}, restProps, {
+    mask: mask,
     visible: open !== null && open !== void 0 ? open : visible,
     title: renderHeader(),
     footer: renderFooter(),

package/MultiBox/index.js

@@ -1,6 +1,6 @@
-import { _ as _typeof } from '../_verture/typeof-498dd2b1.js';
-import { _ as _toConsumableArray } from '../_verture/toConsumableArray-81040c9e.js';
-import { _ as _slicedToArray } from '../_verture/slicedToArray-76060636.js';
+import { _ as _typeof } from '../_verture/typeof-adeedc13.js';
+import { _ as _toConsumableArray } from '../_verture/toConsumableArray-8f4c9589.js';
+import { _ as _slicedToArray } from '../_verture/slicedToArray-a8206399.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import { TextField } from '../TextField/index.js';
@@ -8,7 +8,7 @@ import Label from '../Label/index.js';
 import HelperText from '../HelperText/index.js';
 import Delete from '@para-ui/icons/Delete';
 import PlusCircleF from '@para-ui/icons/PlusCircleF';
-import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
+import { $ as $prefixCls } from '../_verture/constant-0d9802f7.js';
 import { u as useFormatMessage } from '../_verture/useFormatMessage-703f8b20.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 import '../_verture/unsupportedIterableToArray-cb478f24.js';
@@ -16,17 +16,18 @@ import '../_verture/tslib.es6-55ed4bd2.js';
 import '@paraview/lib';
 import '@para-ui/icons/PreviewClose';
 import '@para-ui/icons/PreviewOpen';
-import '@para-ui/icons/CloseCircle';
+import '@para-ui/icons/CloseCircleF';
 import '../AutoTips/index.js';
 import '../Tooltip/index.js';
 import 'rc-tooltip';
 import 'rc-tooltip/lib/placements';
 import 'clsx';
+import '@para-ui/icons/Forbid';
 import '../Loading/index.js';
 import '@para-ui/icons/LoadingF';
 import '../_verture/useGlobalProps-1b846a65.js';
 import '@para-ui/core/GlobalContext';
-import '../_verture/index-77f9e0fb.js';
+import '../_verture/index-e9007d6a.js';
 import 'rc-dropdown';
 import '../_verture/usePopupContainer-87febeb9.js';
 import 'dayjs';
@@ -38,7 +39,7 @@ var en = {
 };
 
 var zh = {
-  add: '新增'
+  add: '添 加'
 };
 
 var localeJson = {
@@ -46,7 +47,7 @@ var localeJson = {
   en: en
 };
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-multi-box {\n  width: 100%;\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}\n.paraui-v3-multi-box > .multi-box-content > .multi-box-content-item {\n  display: flex;\n}\n.paraui-v3-multi-box > .multi-box-content > .multi-box-content-item > .multi-box-content-item-input {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  align-items: flex-start;\n}\n.paraui-v3-multi-box > .multi-box-content > .multi-box-content-item > .multi-box-content-item-input > .multi-box-text-field:first-child {\n  margin-right: 12px;\n}\n.paraui-v3-multi-box > .multi-box-content > .multi-box-content-item > .multi-box-content-item-input > .multi-box-text-field {\n  flex: 1;\n}\n.paraui-v3-multi-box > .multi-box-content > .multi-box-content-item > .multi-box-content-item-input > .multi-box-text-field .paraui-v3-helper-text {\n  min-height: 12px;\n}\n.paraui-v3-multi-box > .multi-box-content > .multi-box-content-item > .multi-box-content-item-input > .multi-box-separator {\n  padding-bottom: 20px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  margin: 0 12px;\n  line-height: 1;\n}\n.paraui-v3-multi-box > .multi-box-content > .multi-box-content-item > .opera-box {\n  display: flex;\n  align-items: center;\n  margin-left: 12px;\n}\n.paraui-v3-multi-box > .multi-box-content > .multi-box-content-item > .opera-box > .del-box {\n  cursor: pointer;\n  border-radius: 4px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v3-multi-box > .multi-box-content > .multi-box-content-item > .opera-box > .del-box:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-multi-box > .multi-box-content > .multi-box-content-item > .opera-box > .del-box:hover svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-multi-box > .multi-box-content > .multi-box-content-item > .opera-box > .del-box svg {\n  font-size: 24px;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-multi-box > .multi-box-add {\n  text-align: center;\n  border: 1px dashed;\n  border-color: rgba(171, 176, 185, 0.4);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  cursor: pointer;\n  background-color: rgba(171, 176, 185, 0.12);\n  color: rgb(54, 102, 214);\n  font-size: 14px;\n}\n.paraui-v3-multi-box > .multi-box-add > svg {\n  font-size: 16px;\n  color: rgb(54, 102, 214);\n  margin-right: 8px;\n}\n.paraui-v3-multi-box > .multi-box-add:hover {\n  border-color: rgba(54, 102, 214, 0.4);\n  background-color: rgba(54, 102, 214, 0.05);\n}\n.paraui-v3-multi-box.paraui-v3-multi-box-separator > .multi-box-content > .multi-box-content-item > .multi-box-content-item-input > .multi-box-text-field:first-child {\n  margin-right: 0;\n}\n.paraui-v3-multi-box.paraui-v3-multi-box-small > .multi-box-add {\n  height: 28px;\n}\n.paraui-v3-multi-box.paraui-v3-multi-box-small > .multi-box-content > .multi-box-content-item > .opera-box {\n  height: 28px;\n}\n.paraui-v3-multi-box.paraui-v3-multi-box-small > .multi-box-content > .multi-box-content-item > .opera-box > .del-box {\n  width: 28px;\n  height: 28px;\n}\n.paraui-v3-multi-box.paraui-v3-multi-box-medium > .multi-box-add {\n  height: 32px;\n}\n.paraui-v3-multi-box.paraui-v3-multi-box-medium > .multi-box-content > .multi-box-content-item > .opera-box {\n  height: 32px;\n}\n.paraui-v3-multi-box.paraui-v3-multi-box-medium > .multi-box-content > .multi-box-content-item > .opera-box > .del-box {\n  width: 32px;\n  height: 32px;\n}\n.paraui-v3-multi-box.paraui-v3-multi-box-large > .multi-box-add {\n  height: 36px;\n}\n.paraui-v3-multi-box.paraui-v3-multi-box-large > .multi-box-content > .multi-box-content-item > .opera-box {\n  height: 36px;\n}\n.paraui-v3-multi-box.paraui-v3-multi-box-large > .multi-box-content > .multi-box-content-item > .opera-box > .del-box {\n  width: 36px;\n  height: 36px;\n}\n.paraui-v3-multi-box.paraui-v3-multi-box-disabled > .multi-box-content > .multi-box-content-item > .opera-box > .del-box {\n  cursor: not-allowed;\n}\n.paraui-v3-multi-box.paraui-v3-multi-box-disabled > .multi-box-content > .multi-box-content-item > .opera-box > .del-box:hover {\n  background-color: transparent;\n}\n.paraui-v3-multi-box.paraui-v3-multi-box-disabled > .multi-box-content > .multi-box-content-item > .opera-box > .del-box:hover svg {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-multi-box.paraui-v3-multi-box-disabled > .multi-box-content > .multi-box-content-item > .opera-box > .del-box svg {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-multi-box.paraui-v3-multi-box-disabled > .multi-box-add {\n  border-color: rgba(171, 176, 185, 0.4);\n  cursor: not-allowed;\n  background-color: rgba(171, 176, 185, 0.12);\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-multi-box.paraui-v3-multi-box-disabled > .multi-box-add > svg {\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-multi-box.paraui-v3-multi-box-disabled > .multi-box-add:hover {\n  border-color: rgba(171, 176, 185, 0.4);\n  color: rgba(46, 55, 67, 0.4);\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-multi-box {\n  width: 100%;\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}\n.paraui-v4-multi-box > .multi-box-content > .multi-box-content-item {\n  display: flex;\n}\n.paraui-v4-multi-box > .multi-box-content > .multi-box-content-item > .multi-box-content-item-input {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  align-items: flex-start;\n}\n.paraui-v4-multi-box > .multi-box-content > .multi-box-content-item > .multi-box-content-item-input > .multi-box-text-field:first-child {\n  margin-right: 10px;\n}\n.paraui-v4-multi-box > .multi-box-content > .multi-box-content-item > .multi-box-content-item-input > .multi-box-text-field {\n  flex: 1;\n}\n.paraui-v4-multi-box > .multi-box-content > .multi-box-content-item > .multi-box-content-item-input > .multi-box-text-field .paraui-v4-helper-text {\n  min-height: 10px;\n}\n.paraui-v4-multi-box > .multi-box-content > .multi-box-content-item > .multi-box-content-item-input > .multi-box-separator {\n  padding-bottom: 20px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  margin: 0 10px;\n  line-height: 1;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-multi-box > .multi-box-content > .multi-box-content-item > .opera-box {\n  display: flex;\n  align-items: center;\n  margin-left: 10px;\n}\n.paraui-v4-multi-box > .multi-box-content > .multi-box-content-item > .opera-box > .del-box {\n  cursor: pointer;\n  border-radius: 4px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v4-multi-box > .multi-box-content > .multi-box-content-item > .opera-box > .del-box:hover {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-multi-box > .multi-box-content > .multi-box-content-item > .opera-box > .del-box:hover svg {\n  color: rgb(87, 131, 235);\n}\n.paraui-v4-multi-box > .multi-box-content > .multi-box-content-item > .opera-box > .del-box svg {\n  font-size: 20px;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-multi-box > .multi-box-add {\n  text-align: center;\n  border: 1px dashed;\n  border-color: rgb(212, 218, 227);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  cursor: pointer;\n  background-color: rgb(247, 248, 250);\n  color: rgb(46, 101, 230);\n  font-size: 14px;\n}\n.paraui-v4-multi-box > .multi-box-add > svg {\n  font-size: 16px;\n  color: rgb(46, 101, 230);\n  margin-right: 10px;\n}\n.paraui-v4-multi-box > .multi-box-add:hover {\n  border-color: rgb(87, 131, 235);\n  background-color: rgb(240, 245, 255);\n}\n.paraui-v4-multi-box.paraui-v4-multi-box-separator > .multi-box-content > .multi-box-content-item > .multi-box-content-item-input > .multi-box-text-field:first-child {\n  margin-right: 0;\n}\n.paraui-v4-multi-box.paraui-v4-multi-box-disabled > .multi-box-content > .multi-box-content-item > .opera-box > .del-box {\n  cursor: not-allowed;\n}\n.paraui-v4-multi-box.paraui-v4-multi-box-disabled > .multi-box-content > .multi-box-content-item > .opera-box > .del-box:hover {\n  background-color: transparent;\n}\n.paraui-v4-multi-box.paraui-v4-multi-box-disabled > .multi-box-content > .multi-box-content-item > .opera-box > .del-box:hover svg {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-multi-box.paraui-v4-multi-box-disabled > .multi-box-content > .multi-box-content-item > .opera-box > .del-box svg {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-multi-box.paraui-v4-multi-box-disabled > .multi-box-add {\n  border-color: rgb(212, 218, 227);\n  cursor: not-allowed;\n  background-color: rgb(247, 248, 250);\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-multi-box.paraui-v4-multi-box-disabled > .multi-box-add > svg {\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-multi-box.paraui-v4-multi-box-disabled > .multi-box-add:hover {\n  border-color: rgb(212, 218, 227);\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-multi-box.paraui-v4-multi-box-small > .multi-box-add {\n  height: 28px;\n}\n.paraui-v4-multi-box.paraui-v4-multi-box-small > .multi-box-content > .multi-box-content-item > .opera-box {\n  height: 28px;\n}\n.paraui-v4-multi-box.paraui-v4-multi-box-small > .multi-box-content > .multi-box-content-item > .opera-box > .del-box {\n  width: 28px;\n  height: 28px;\n}\n.paraui-v4-multi-box.paraui-v4-multi-box-medium > .multi-box-add {\n  height: 32px;\n}\n.paraui-v4-multi-box.paraui-v4-multi-box-medium > .multi-box-content > .multi-box-content-item > .opera-box {\n  height: 32px;\n}\n.paraui-v4-multi-box.paraui-v4-multi-box-medium > .multi-box-content > .multi-box-content-item > .opera-box > .del-box {\n  width: 32px;\n  height: 32px;\n}\n.paraui-v4-multi-box.paraui-v4-multi-box-large > .multi-box-add {\n  height: 32px;\n}\n.paraui-v4-multi-box.paraui-v4-multi-box-large > .multi-box-content > .multi-box-content-item > .opera-box {\n  height: 32px;\n}\n.paraui-v4-multi-box.paraui-v4-multi-box-large > .multi-box-content > .multi-box-content-item > .opera-box > .del-box {\n  width: 32px;\n  height: 32px;\n}";
 styleInject(css_248z);
 
 var MultiBox = function MultiBox(props) {

package/Notification/index.d.ts

@@ -12,6 +12,10 @@ export interface ConfigProps {
     top?: number;
     /** 消息从底部弹出时，距离底部的位置，单位像素 */
     bottom?: number;
+    /** 距离左侧的位置，单位像素 */
+    left?: number;
+    /** 距离右侧的位置，单位像素 */
+    right?: number;
     /** 默认自动关闭延时，单位秒 */
     duration?: number;
     /** 弹出位置 */
@@ -34,7 +38,7 @@ export interface ArgsProps {
     key?: string;
     /** 关闭时触发 */
     onClose?: () => void;
-    /** 默认 4.5 秒后自动关闭，配置为 null 则不自动关闭 */
+    /** 默认 5 秒后自动关闭，配置为 null 则不自动关闭 */
     duration?: number | null;
     /** 自定义图标 */
     icon?: React.ReactNode;
@@ -52,6 +56,10 @@ export interface ArgsProps {
     top?: number;
     /** 消息从底部弹出时，距离底部的位置，单位像素 */
     bottom?: number;
+    /** 距离左侧的位置，单位像素 */
+    left?: number;
+    /** 距离右侧的位置，单位像素 */
+    right?: number;
     /** 渲染容器 */
     getContainer?: () => HTMLElement;
     /** 自定义关闭图标 */

package/Notification/index.js

@@ -1,25 +1,27 @@
-import { _ as _defineProperty } from '../_verture/defineProperty-62acccfc.js';
+import { _ as _defineProperty } from '../_verture/defineProperty-1d116156.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default from 'react';
 import Notification from 'rc-notification';
 import WarningCircleF from '@para-ui/icons/WarningCircleF';
 import CompleteIcon from '@para-ui/icons/CheckCircleF';
 import CloseIcon from '@para-ui/icons/Close';
-import CloseCircleFilled from '@para-ui/icons/CloseCircleF';
+import CloseCircleF from '@para-ui/icons/CloseCircleF';
 import clsx from 'clsx';
-import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
+import { $ as $prefixCls } from '../_verture/constant-0d9802f7.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
-import '../_verture/typeof-498dd2b1.js';
+import '../_verture/typeof-adeedc13.js';
 
-var css_248z = "@charset \"UTF-8\";\n/**\n * @author Hanz\n * @date 2022/1/13 上午10:30\n * @description 通知提醒框\n */\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-notification {\n  position: fixed;\n  margin: 0 24px 0 0;\n  padding: 0;\n  color: rgb(46, 55, 67);\n  font-size: 14px;\n  z-index: 9999;\n}\n.paraui-v3-notification-topLeft, .paraui-v3-notification-bottomLeft {\n  margin-right: 0;\n  margin-left: 24px;\n}\n.paraui-v3-notification-topLeft .paraui-v3-notification-fade-enter.paraui-v3-notification-fade-enter-active, .paraui-v3-notification-bottomLeft .paraui-v3-notification-fade-enter.paraui-v3-notification-fade-enter-active, .paraui-v3-notification-topLeft .paraui-v3-notification-fade-appear.paraui-v3-notification-fade-appear-active, .paraui-v3-notification-bottomLeft .paraui-v3-notification-fade-appear.paraui-v3-notification-fade-appear-active {\n  animation-name: NotificationLeftFadeIn;\n}\n.paraui-v3-notification-hook-holder, .paraui-v3-notification-notice {\n  position: relative;\n  width: 430px;\n  max-width: calc(100vw - 48px);\n  margin-bottom: 16px;\n  margin-left: auto;\n  overflow: hidden;\n  word-wrap: break-word;\n  background: rgb(255, 255, 255);\n  border-radius: 4px;\n  box-shadow: 0px 2px 8px 0px rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-notification-topLeft .paraui-v3-notification-hook-holder, .paraui-v3-notification-topLeft .paraui-v3-notification-notice, .paraui-v3-notification-bottomLeft .paraui-v3-notification-hook-holder, .paraui-v3-notification-bottomLeft .paraui-v3-notification-notice {\n  margin-right: auto;\n  margin-left: 0;\n}\n.paraui-v3-notification-hook-holder > .paraui-v3-notification-notice {\n  margin-bottom: 0;\n  box-shadow: none;\n}\n.paraui-v3-notification-notice {\n  padding: 20px;\n  line-height: 1.5715;\n}\n.paraui-v3-notification-notice-content {\n  position: relative;\n}\n.paraui-v3-notification-notice-message {\n  margin-bottom: 8px;\n  color: rgb(46, 55, 67);\n  font-size: 14px;\n  font-weight: 700;\n  line-height: 24px;\n}\n.paraui-v3-notification-notice-message-single-line-auto-margin {\n  display: block;\n  width: calc(264px - 100%);\n  max-width: 4px;\n  background-color: transparent;\n  pointer-events: none;\n}\n.paraui-v3-notification-notice-message-single-line-auto-margin::before {\n  display: block;\n  content: \"\";\n}\n.paraui-v3-notification-notice-description {\n  font-size: 14px;\n  font-weight: 400;\n}\n.paraui-v3-notification-notice-closable .paraui-v3-notification-notice-message {\n  padding-right: 24px;\n}\n.paraui-v3-notification-notice-with-icon .paraui-v3-notification-notice-message {\n  margin-bottom: 4px;\n  margin-left: 24px;\n}\n.paraui-v3-notification-notice-with-icon .paraui-v3-notification-notice-description {\n  margin-left: 24px;\n}\n.paraui-v3-notification-notice-without-description .paraui-v3-notification-notice-message {\n  margin-bottom: 0;\n}\n.paraui-v3-notification .paraui-v3-notification-notice-icon {\n  position: absolute;\n  top: 4px;\n  font-size: 16px;\n  line-height: 24px;\n}\n.paraui-v3-notification .paraui-v3-notification-notice-icon-success {\n  color: rgb(83, 195, 27);\n}\n.paraui-v3-notification .paraui-v3-notification-notice-icon-info {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-notification .paraui-v3-notification-notice-icon-warning {\n  color: rgb(255, 161, 80);\n}\n.paraui-v3-notification .paraui-v3-notification-notice-icon-error {\n  color: rgb(235, 96, 84);\n}\n.paraui-v3-notification-notice-close {\n  position: absolute;\n  top: 16px;\n  right: 22px;\n  color: rgba(46, 55, 67, 0.7);\n  outline: none;\n}\n.paraui-v3-notification-notice-close:hover {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-notification .paraui-v3-notification-close-icon {\n  font-size: 18px;\n  cursor: pointer;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-notification-notice-btn {\n  float: right;\n  margin-top: 16px;\n}\n.paraui-v3-notification .notification-fade-effect {\n  animation-duration: 0.24s;\n  animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);\n  animation-fill-mode: both;\n}\n.paraui-v3-notification-fade-enter, .paraui-v3-notification-fade-appear {\n  animation-duration: 0.24s;\n  animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);\n  animation-fill-mode: both;\n  opacity: 0;\n  animation-play-state: paused;\n}\n.paraui-v3-notification-fade-leave {\n  animation-duration: 0.24s;\n  animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);\n  animation-fill-mode: both;\n  animation-play-state: paused;\n}\n.paraui-v3-notification-fade-enter.paraui-v3-notification-fade-enter-active, .paraui-v3-notification-fade-appear.paraui-v3-notification-fade-appear-active {\n  animation-name: NotificationFadeIn;\n  animation-play-state: running;\n}\n.paraui-v3-notification-fade-leave.paraui-v3-notification-fade-leave-active {\n  animation-name: NotificationFadeOut;\n  animation-play-state: running;\n}\n@keyframes NotificationFadeIn {\n  0% {\n    left: 430px;\n    opacity: 0;\n  }\n  100% {\n    left: 0;\n    opacity: 1;\n  }\n}\n@keyframes NotificationLeftFadeIn {\n  0% {\n    right: 430px;\n    opacity: 0;\n  }\n  100% {\n    right: 0;\n    opacity: 1;\n  }\n}\n@keyframes NotificationFadeOut {\n  0% {\n    max-height: 150px;\n    margin-bottom: 16px;\n    opacity: 1;\n  }\n  100% {\n    max-height: 0;\n    margin-bottom: 0;\n    padding-top: 0;\n    padding-bottom: 0;\n    opacity: 0;\n  }\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n * @author Hanz\n * @date 2022/1/13 上午10:30\n * @description 通知提醒框\n */\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-notification {\n  position: fixed;\n  padding: 0;\n  color: rgb(29, 33, 38);\n  font-size: 14px;\n  z-index: 9999;\n}\n.paraui-v4-notification-topLeft .paraui-v4-notification-fade-enter.paraui-v4-notification-fade-enter-active, .paraui-v4-notification-bottomLeft .paraui-v4-notification-fade-enter.paraui-v4-notification-fade-enter-active, .paraui-v4-notification-topLeft .paraui-v4-notification-fade-appear.paraui-v4-notification-fade-appear-active, .paraui-v4-notification-bottomLeft .paraui-v4-notification-fade-appear.paraui-v4-notification-fade-appear-active {\n  animation-name: NotificationLeftFadeIn;\n}\n.paraui-v4-notification-hook-holder, .paraui-v4-notification-notice {\n  position: relative;\n  width: 440px;\n  max-width: calc(100vw - 48px);\n  margin-top: 20px;\n  margin-left: auto;\n  overflow: hidden;\n  word-wrap: break-word;\n  background: #fff;\n  border-radius: 4px;\n  box-shadow: 0px 2px 8px 0px rgb(234, 236, 241);\n}\n.paraui-v4-notification-hook-holder:first-child, .paraui-v4-notification-notice:first-child {\n  margin-top: 0;\n}\n.paraui-v4-notification-topLeft .paraui-v4-notification-hook-holder, .paraui-v4-notification-topLeft .paraui-v4-notification-notice, .paraui-v4-notification-bottomLeft .paraui-v4-notification-hook-holder, .paraui-v4-notification-bottomLeft .paraui-v4-notification-notice {\n  margin-right: auto;\n  margin-left: 0;\n}\n.paraui-v4-notification-hook-holder > .paraui-v4-notification-notice {\n  margin-bottom: 0;\n  box-shadow: none;\n}\n.paraui-v4-notification-notice {\n  padding: 16px;\n  line-height: 1.5715;\n}\n.paraui-v4-notification-notice-content {\n  position: relative;\n}\n.paraui-v4-notification-notice-message {\n  margin-bottom: 10px;\n  color: rgb(29, 33, 38);\n  font-size: 14px;\n  font-weight: 700;\n  line-height: 20px;\n}\n.paraui-v4-notification-notice-message-single-line-auto-margin {\n  display: block;\n  width: calc(264px - 100%);\n  max-width: 4px;\n  background-color: transparent;\n  pointer-events: none;\n}\n.paraui-v4-notification-notice-message-single-line-auto-margin::before {\n  display: block;\n  content: \"\";\n}\n.paraui-v4-notification-notice-description {\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 20px;\n}\n.paraui-v4-notification-notice-closable .paraui-v4-notification-notice-message {\n  padding-right: 24px;\n}\n.paraui-v4-notification-notice-with-icon .paraui-v4-notification-notice-message {\n  margin-bottom: 10px;\n  margin-left: 24px;\n}\n.paraui-v4-notification-notice-with-icon .paraui-v4-notification-notice-description {\n  margin-left: 24px;\n}\n.paraui-v4-notification-notice-without-description .paraui-v4-notification-notice-message {\n  margin-bottom: 0;\n}\n.paraui-v4-notification .paraui-v4-notification-notice-icon {\n  position: absolute;\n  top: 2px;\n  font-size: 500;\n  line-height: 24px;\n}\n.paraui-v4-notification .paraui-v4-notification-notice-icon-success {\n  color: rgb(19, 191, 76);\n}\n.paraui-v4-notification .paraui-v4-notification-notice-icon-info {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-notification .paraui-v4-notification-notice-icon-warning {\n  color: rgb(255, 147, 38);\n}\n.paraui-v4-notification .paraui-v4-notification-notice-icon-error {\n  color: rgb(244, 66, 66);\n}\n.paraui-v4-notification-notice-close {\n  position: absolute;\n  top: 16px;\n  right: 16px;\n  color: rgb(92, 101, 115);\n  outline: none;\n}\n.paraui-v4-notification-notice-close:hover {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-notification .paraui-v4-notification-close-icon {\n  font-size: 18px;\n  cursor: pointer;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-notification .paraui-v4-notification-close-icon:hover {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-notification-notice-btn {\n  float: right;\n  margin-top: 12px;\n}\n.paraui-v4-notification .notification-fade-effect {\n  animation-duration: 0.24s;\n  animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);\n  animation-fill-mode: both;\n}\n.paraui-v4-notification-fade-enter, .paraui-v4-notification-fade-appear {\n  animation-duration: 0.24s;\n  animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);\n  animation-fill-mode: both;\n  opacity: 0;\n  animation-play-state: paused;\n}\n.paraui-v4-notification-fade-leave {\n  animation-duration: 0.24s;\n  animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);\n  animation-fill-mode: both;\n  animation-play-state: paused;\n}\n.paraui-v4-notification-fade-enter.paraui-v4-notification-fade-enter-active, .paraui-v4-notification-fade-appear.paraui-v4-notification-fade-appear-active {\n  animation-name: NotificationFadeIn;\n  animation-play-state: running;\n}\n.paraui-v4-notification-fade-leave.paraui-v4-notification-fade-leave-active {\n  animation-name: NotificationFadeOut;\n  animation-play-state: running;\n}\n@keyframes NotificationFadeIn {\n  0% {\n    left: 440px;\n    opacity: 0;\n  }\n  100% {\n    left: 0;\n    opacity: 1;\n  }\n}\n@keyframes NotificationLeftFadeIn {\n  0% {\n    right: 440px;\n    opacity: 0;\n  }\n  100% {\n    right: 0;\n    opacity: 1;\n  }\n}\n@keyframes NotificationFadeOut {\n  0% {\n    max-height: 150px;\n    margin-bottom: 16px;\n    opacity: 1;\n  }\n  100% {\n    max-height: 0;\n    margin-bottom: 0;\n    padding-top: 0;\n    padding-bottom: 0;\n    opacity: 0;\n  }\n}";
 styleInject(css_248z);
 
 //通知框实例存储
 var notificationInstance = {};
 // 默认值
-var defaultDuration = 4.5; //默认 4.5 秒后自动关闭，配置为 null 则不自动关闭
-var defaultTop = 24;
-var defaultBottom = 24;
+var defaultDuration = 5; //默认 5 秒后自动关闭，配置为 null 则不自动关闭
+var defaultTop = 20;
+var defaultBottom = 20;
+var defaultLeft = 20;
+var defaultRight = 20;
 var defaultPlacement = 'topRight';
 var defaultGetContainer;
 var prefixCls = "".concat($prefixCls, "-notification");
@@ -34,6 +36,8 @@ function setNotificationConfig(options) {
     placement = options.placement,
     bottom = options.bottom,
     top = options.top,
+    left = options.left,
+    right = options.right,
     getContainer = options.getContainer,
     closeIcon = options.closeIcon;
   if (duration !== undefined) {
@@ -48,6 +52,12 @@ function setNotificationConfig(options) {
   if (top !== undefined) {
     defaultTop = top;
   }
+  if (left !== undefined) {
+    defaultLeft = left;
+  }
+  if (right !== undefined) {
+    defaultRight = right;
+  }
   if (getContainer !== undefined) {
     defaultGetContainer = getContainer;
   }
@@ -62,32 +72,34 @@ function setNotificationConfig(options) {
 function getPlacementStyle(placement) {
   var top = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultTop;
   var bottom = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultBottom;
+  var left = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : defaultLeft;
+  var right = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : defaultRight;
   var style;
   switch (placement) {
     case 'topLeft':
       style = {
-        left: 0,
+        left: left,
         top: top,
         bottom: 'auto'
       };
       break;
     case 'topRight':
       style = {
-        right: 0,
+        right: right,
         top: top,
         bottom: 'auto'
       };
       break;
     case 'bottomLeft':
       style = {
-        left: 0,
+        left: left,
         top: 'auto',
         bottom: bottom
       };
       break;
     default:
       style = {
-        right: 0,
+        right: right,
         top: 'auto',
         bottom: bottom
       };
@@ -101,11 +113,13 @@ function getNotificationInstance(args, callback) {
     placement = _args$placement === void 0 ? defaultPlacement : _args$placement,
     top = args.top,
     bottom = args.bottom,
+    left = args.left,
+    right = args.right,
     _args$getContainer = args.getContainer,
     getContainer = _args$getContainer === void 0 ? defaultGetContainer : _args$getContainer,
     _args$closeIcon = args.closeIcon,
     closeIcon = _args$closeIcon === void 0 ? defaultCloseIcon : _args$closeIcon;
-  // const prefixCls = `${$prefixCls}-notification`;
+  var prefixCls = "".concat($prefixCls, "-notification");
   var cacheKey = "".concat(prefixCls, "-").concat(placement);
   var cacheInstance = notificationInstance[cacheKey];
   if (cacheInstance) {
@@ -131,7 +145,7 @@ function getNotificationInstance(args, callback) {
     Notification.newInstance({
       prefixCls: prefixCls,
       className: notificationCls,
-      style: getPlacementStyle(placement, top, bottom),
+      style: getPlacementStyle(placement, top, bottom, left, right),
       getContainer: getContainer,
       closeIcon: closeIconToRender,
       maxCount: maxCount
@@ -148,7 +162,7 @@ function getNotificationInstance(args, callback) {
 var typeToIcon = {
   success: CompleteIcon,
   info: WarningCircleF,
-  error: CloseCircleFilled,
+  error: CloseCircleF,
   warning: WarningCircleF
 };
 //创建通知框内容配置

package/OperateBtn/index.js

@@ -1,32 +1,33 @@
-import { _ as _slicedToArray } from '../_verture/slicedToArray-76060636.js';
-import { r as regenerator } from '../_verture/index-beef914f.js';
+import { _ as _slicedToArray } from '../_verture/slicedToArray-a8206399.js';
+import { r as regenerator } from '../_verture/index-d63bd287.js';
 import { a as __awaiter } from '../_verture/tslib.es6-55ed4bd2.js';
 import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { useState, Fragment } from 'react';
 import More from '@para-ui/icons/More';
 import { Button } from '../Button/index.js';
+import { Tooltip } from '../Tooltip/index.js';
 import { Popover } from '../Popover/index.js';
 import AutoTips from '../AutoTips/index.js';
-import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
+import { $ as $prefixCls } from '../_verture/constant-0d9802f7.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 import '../_verture/unsupportedIterableToArray-cb478f24.js';
-import '../_verture/typeof-498dd2b1.js';
+import '../_verture/typeof-b240b062.js';
+import '../_verture/typeof-adeedc13.js';
 import 'clsx';
 import '@para-ui/icons/LoadingF';
 import '@para-ui/icons/Forbid';
-import '../Tooltip/index.js';
-import 'rc-tooltip';
-import 'rc-tooltip/lib/placements';
 import '@para-ui/icons/Down';
-import '../_verture/index-77f9e0fb.js';
+import '../_verture/index-e9007d6a.js';
 import 'rc-dropdown';
 import '../_verture/usePopupContainer-87febeb9.js';
 import 'dayjs';
 import '@paraview/lib';
 import '../_verture/useFormatMessage-703f8b20.js';
 import '@para-ui/core/GlobalContext';
+import 'rc-tooltip';
+import 'rc-tooltip/lib/placements';
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2022/4/13 10:48 AM\n* @description 表格操作按钮\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-operate-btn {\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  display: flex;\n  align-items: center;\n}\n.paraui-v3-operate-btn > .operate-btn-line {\n  display: inline-block;\n  width: 1px;\n  background-color: rgba(54, 102, 214, 0.2);\n  margin: 0 12px;\n}\n.paraui-v3-operate-btn.paraui-v3-operate-btn-small > .operate-btn-line {\n  height: 12px;\n}\n.paraui-v3-operate-btn.paraui-v3-operate-btn-small button svg {\n  font-size: 18px;\n}\n.paraui-v3-operate-btn.paraui-v3-operate-btn-medium > .operate-btn-line {\n  height: 14px;\n}\n.paraui-v3-operate-btn.paraui-v3-operate-btn-medium button svg {\n  font-size: 24px;\n}\n.paraui-v3-operate-btn.paraui-v3-operate-btn-large > .operate-btn-line {\n  height: 16px;\n}\n.paraui-v3-operate-btn.paraui-v3-operate-btn-large button > svg {\n  font-size: 28px;\n}\n\n.paraui-v3-operate-btn-popover .operate-btn-list {\n  padding: 8px 0;\n}\n.paraui-v3-operate-btn-popover .operate-btn-list > .operate-btn-list-item {\n  padding: 0 12px;\n  max-width: 120px;\n  cursor: pointer;\n  color: rgb(46, 55, 67);\n  line-height: 36px;\n  text-align: left;\n}\n.paraui-v3-operate-btn-popover .operate-btn-list > .operate-btn-list-item:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-operate-btn-popover .operate-btn-list > .operate-btn-list-item-disabled {\n  cursor: not-allowed;\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-operate-btn-popover .operate-btn-list > .operate-btn-list-item-danger {\n  color: rgb(235, 96, 84);\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2022/4/13 10:48 AM\n* @description 表格操作按钮\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-operate-btn {\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  display: flex;\n  align-items: center;\n}\n.paraui-v4-operate-btn > .operate-btn-line {\n  display: inline-block;\n  width: 1px;\n  background-color: rgb(213, 224, 250);\n  margin: 0 10px;\n}\n.paraui-v4-operate-btn.paraui-v4-operate-btn-small > .operate-btn-line {\n  height: 12px;\n}\n.paraui-v4-operate-btn.paraui-v4-operate-btn-small button svg {\n  font-size: 18px;\n}\n.paraui-v4-operate-btn.paraui-v4-operate-btn-medium > .operate-btn-line {\n  height: 12px;\n}\n.paraui-v4-operate-btn.paraui-v4-operate-btn-medium button svg {\n  font-size: 18px;\n}\n.paraui-v4-operate-btn.paraui-v4-operate-btn-large > .operate-btn-line {\n  height: 12px;\n}\n.paraui-v4-operate-btn.paraui-v4-operate-btn-large button svg {\n  font-size: 18px;\n}\n\n.paraui-v4-operate-btn-popover .operate-btn-list {\n  padding: 4px 0;\n}\n.paraui-v4-operate-btn-popover .operate-btn-list > .operate-btn-list-item {\n  padding: 0 10px;\n  max-width: 120px;\n  cursor: pointer;\n  color: rgb(29, 33, 38);\n  line-height: 30px;\n  text-align: left;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.paraui-v4-operate-btn-popover .operate-btn-list > .operate-btn-list-item:hover {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-operate-btn-popover .operate-btn-list > .operate-btn-list-item-disabled {\n  cursor: not-allowed;\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-operate-btn-popover .operate-btn-list > .operate-btn-list-item-disabled:hover {\n  background-color: white;\n}\n.paraui-v4-operate-btn-popover .operate-btn-list > .operate-btn-list-item-danger {\n  color: rgb(244, 66, 66);\n}";
 styleInject(css_248z);
 
 var OperateBtn = function OperateBtn(props) {
@@ -148,14 +149,30 @@ var OperateBtn = function OperateBtn(props) {
       className: "operate-btn-list"
     }, {
       children: arr.map(function (item, index) {
+        if (item.disabled) {
+          return jsx(Tooltip, Object.assign({
+            disabled: true,
+            title: item.label || item.toolTipTitle
+          }, {
+            children: jsx("div", Object.assign({
+              className: handPopoverClass(item),
+              onClick: clickItem(item, index + showNum),
+              style: style
+            }, {
+              children: item.label || item.toolTipTitle
+            }), index)
+          }), index);
+        }
         return jsx("div", Object.assign({
           className: handPopoverClass(item),
           onClick: clickItem(item, index + showNum),
           style: style
         }, {
-          children: jsx(AutoTips, {
+          children: jsx(AutoTips, Object.assign({
+            tipMaxWidth: 'none'
+          }, {
             children: item.label || item.toolTipTitle
-          })
+          }))
         }), index);
       })
     }));