@kdcloudjs/table 1.2.1-canary.7 → 1.2.2-canary.4

package/dist/@kdcloudjs/table.js

@@ -1,6 +1,6 @@
 /*!
  * 
- *   @kdcloudjs/table v1.2.1-canary.6
+ *   @kdcloudjs/table v1.2.2-canary.3
  * 
  *   Copyright 2020-present, Kingdee, Inc.
  *   All rights reserved.
@@ -149,8 +149,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _defaultConfig__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./defaultConfig */ "./components/config-provider/defaultConfig.tsx");
-/**
- * 提供外层注入属性的context
+/**
+ * 提供外层注入属性的context
  */
 
 
@@ -169,11 +169,11 @@ var ConfigContext = /*#__PURE__*/Object(react__WEBPACK_IMPORTED_MODULE_0__["crea
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 // import * as React from 'react'
-/**
- * 组件默认属性，所有组件的默认属性都在这里写，
- * 而不是在组件文件中以“componentName.defaultProps”的方式去写
- * componentName: defaultPropsObj
- * （用于处理用户自定义默认属性）
+/**
+ * 组件默认属性，所有组件的默认属性都在这里写，
+ * 而不是在组件文件中以“componentName.defaultProps”的方式去写
+ * componentName: defaultPropsObj
+ * （用于处理用户自定义默认属性）
  */
 var compDefaultProps = {};
 /* harmony default export */ __webpack_exports__["default"] = (compDefaultProps);
@@ -196,8 +196,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _ConfigContext__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./ConfigContext */ "./components/config-provider/ConfigContext.tsx");
 /* harmony import */ var _defaultConfig__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./defaultConfig */ "./components/config-provider/defaultConfig.tsx");
 /* harmony import */ var _locale_index__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../locale/index */ "./components/locale/index.ts");
-/**
- * 对外暴露用于注入全局配置属性的Context.Provider
+/**
+ * 对外暴露用于注入全局配置属性的Context.Provider
  */
 
 
@@ -569,10 +569,10 @@ var LocaleCache = /*#__PURE__*/function () {
     this.localesData = localesData;
   }
 
-  /**
-   * 设置语言包并切换当前语言
-   * @param {LocaleDataType | string} localeData 语言数据集合 | 语言类型
-   * @returns 设置后的语言对应的语言包
+  /**
+   * 设置语言包并切换当前语言
+   * @param {LocaleDataType | string} localeData 语言数据集合 | 语言类型
+   * @returns 设置后的语言对应的语言包
    */
   return _babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_2___default()(LocaleCache, [{
     key: "setLocalesData",
@@ -587,8 +587,8 @@ var LocaleCache = /*#__PURE__*/function () {
       return localeData;
     }
 
-    /**
-     * 获取当前语言包数据
+    /**
+     * 获取当前语言包数据
      */
   }, {
     key: "getLocalData",
@@ -596,8 +596,8 @@ var LocaleCache = /*#__PURE__*/function () {
       return this.localesData[this.locale];
     }
 
-    /**
-     * 获取当前语言类型
+    /**
+     * 获取当前语言类型
      */
   }, {
     key: "getLocal",
@@ -605,8 +605,8 @@ var LocaleCache = /*#__PURE__*/function () {
       return this.locale;
     }
 
-    /**
-     * 获取所有语言包数据
+    /**
+     * 获取所有语言包数据
      */
   }, {
     key: "getLocalesData",
@@ -623,10 +623,10 @@ var getLangMsg = function getLangMsg(componentName, labelName, params) {
   return analysVariables(msg, params);
 };
 
-/**
- * 解析模板字符串中的变量
- * @param {*} msg
- * @param {*} variables
+/**
+ * 解析模板字符串中的变量
+ * @param {*} msg
+ * @param {*} variables
  */
 function analysVariables(msg, variables) {
   var reg = /{[\w\W]*?}/g;
@@ -672,10 +672,10 @@ function analysVariables(msg, variables) {
   return eleVar.length > 0 ? msgArr : msg;
 }
 
-/**
- * 替换基本类型的变量
- * @param {*} msg
- * @param {*} stringVar
+/**
+ * 替换基本类型的变量
+ * @param {*} msg
+ * @param {*} stringVar
  */
 function formatText(msg, stringVar) {
   stringVar.forEach(function (item) {
@@ -687,11 +687,11 @@ function formatText(msg, stringVar) {
   return msg;
 }
 
-/**
- * 替换React元素类型的变量
- * @param {*} msg
- * @param {*} eleVar
- * @param {*} variables
+/**
+ * 替换React元素类型的变量
+ * @param {*} msg
+ * @param {*} eleVar
+ * @param {*} variables
  */
 function formatElement(msg, variables) {
   var splitByElement = function splitByElement(msg) {
@@ -729,11 +729,11 @@ function formatElement(msg, variables) {
     var t = item.t,
       v = item.v;
     if (t === 0 && v !== '') {
-      elements.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_21___default.a.createElement("span", {
+      elements.push(/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_21___default.a.createElement("span", {
         key: index
       }, v));
     } else if (t === 1) {
-      elements.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_21___default.a.cloneElement(variables[v], {
+      elements.push(/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_21___default.a.cloneElement(variables[v], {
         key: index
       }));
     }
@@ -1294,6 +1294,58 @@ function EmptyHtmlTable(_ref) {
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(EmptyContent, null)));
 }
 
+/***/ }),
+
+/***/ "./components/table/base/globalStyleComponent.tsx":
+/*!********************************************************!*\
+  !*** ./components/table/base/globalStyleComponent.tsx ***!
+  \********************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return GlobalStyleComponent; });
+/* harmony import */ var core_js_modules_es_reflect_construct_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core-js/modules/es.reflect.construct.js */ "./node_modules/core-js/modules/es.reflect.construct.js");
+/* harmony import */ var core_js_modules_es_reflect_construct_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_reflect_construct_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/classCallCheck */ "./node_modules/@babel/runtime/helpers/classCallCheck.js");
+/* harmony import */ var _babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babel/runtime/helpers/createClass */ "./node_modules/@babel/runtime/helpers/createClass.js");
+/* harmony import */ var _babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _babel_runtime_helpers_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @babel/runtime/helpers/possibleConstructorReturn */ "./node_modules/@babel/runtime/helpers/possibleConstructorReturn.js");
+/* harmony import */ var _babel_runtime_helpers_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _babel_runtime_helpers_getPrototypeOf__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @babel/runtime/helpers/getPrototypeOf */ "./node_modules/@babel/runtime/helpers/getPrototypeOf.js");
+/* harmony import */ var _babel_runtime_helpers_getPrototypeOf__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_getPrototypeOf__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _babel_runtime_helpers_inherits__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @babel/runtime/helpers/inherits */ "./node_modules/@babel/runtime/helpers/inherits.js");
+/* harmony import */ var _babel_runtime_helpers_inherits__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_inherits__WEBPACK_IMPORTED_MODULE_5__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_6__);
+/* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./styles */ "./components/table/base/styles.ts");
+
+
+
+
+
+
+function _callSuper(t, o, e) { return o = _babel_runtime_helpers_getPrototypeOf__WEBPACK_IMPORTED_MODULE_4___default()(o), _babel_runtime_helpers_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_3___default()(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _babel_runtime_helpers_getPrototypeOf__WEBPACK_IMPORTED_MODULE_4___default()(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+
+
+var GlobalStyleComponent = /*#__PURE__*/function (_PureComponent) {
+  function GlobalStyleComponent() {
+    _babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_1___default()(this, GlobalStyleComponent);
+    return _callSuper(this, GlobalStyleComponent, arguments);
+  }
+  _babel_runtime_helpers_inherits__WEBPACK_IMPORTED_MODULE_5___default()(GlobalStyleComponent, _PureComponent);
+  return _babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_2___default()(GlobalStyleComponent, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_6___default.a.createElement(_styles__WEBPACK_IMPORTED_MODULE_7__["GlobalStyle"], null);
+    }
+  }]);
+}(react__WEBPACK_IMPORTED_MODULE_6__["PureComponent"]);
+
+
 /***/ }),
 
 /***/ "./components/table/base/header.tsx":
@@ -1694,8 +1746,8 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-/** 在表格的单元格的渲染过程中，先渲染的单元格的 colSpan/rowSpan 会影响到后续单元格是否被渲染
- * `SpanManager` 会在内部维护一份状态来记录最近渲染单元格的 colSpan/rowSpan，
+/** 在表格的单元格的渲染过程中，先渲染的单元格的 colSpan/rowSpan 会影响到后续单元格是否被渲染
+ * `SpanManager` 会在内部维护一份状态来记录最近渲染单元格的 colSpan/rowSpan，
  * 方便后续的单元格快速判断 "是否需要跳过渲染" */
 var SpanManager = /*#__PURE__*/function () {
   function SpanManager() {
@@ -1986,9 +2038,9 @@ function accumulateScrollOffset(start, stop, scrollOffsetKey) {
   return result;
 }
 
-/**
- * 获取 target 相对于 base 的布局大小和相对位置。
- * 注意该方法会考虑滚动所带来的影响
+/**
+ * 获取 target 相对于 base 的布局大小和相对位置。
+ * 注意该方法会考虑滚动所带来的影响
  */
 function getRelativeLayoutRect(base, target) {
   if (isWindow(target) || isHtmlOrBody(target)) {
@@ -2669,10 +2721,10 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 
 
 
-/*
- * @Author: wqhui
- * @Date: 2022-03-14 11:21:12
- * @Description: 不同情况的渲染模板，比如IE下的
+/*
+ * @Author: wqhui
+ * @Date: 2022-03-14 11:21:12
+ * @Description: 不同情况的渲染模板，比如IE下的
  */
 
 
@@ -2963,7 +3015,7 @@ function renderRowDetailInIE(params) {
   if (!domHelper) return;
   var artTable = domHelper.artTable;
   var rowDetailContainer = artTable && artTable.querySelector(".".concat(_styles__WEBPACK_IMPORTED_MODULE_21__["Classes"].rowDetailContainer));
-  return /*#__PURE__*/react_dom__WEBPACK_IMPORTED_MODULE_18___default.a.createPortal( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement(RowDetail, params), rowDetailContainer);
+  return /*#__PURE__*/react_dom__WEBPACK_IMPORTED_MODULE_18___default.a.createPortal(/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement(RowDetail, params), rowDetailContainer);
 }
 function RowDetail(props) {
   var detailRef = Object(react__WEBPACK_IMPORTED_MODULE_17__["useRef"])(null);
@@ -3012,7 +3064,7 @@ function getTableHeaderRenderTemplate(type) {
 /*!*****************************************!*\
   !*** ./components/table/base/styles.ts ***!
   \*****************************************/
-/*! exports provided: LOCK_SHADOW_PADDING, Classes, MenuClasses, defaultCSSVariables, variableConst, StyledArtTableWrapper, ButtonCSS */
+/*! exports provided: LOCK_SHADOW_PADDING, Classes, MenuClasses, GlobalStyle, defaultCSSVariables, variableConst, StyledArtTableWrapper, ButtonCSS */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -3020,6 +3072,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "LOCK_SHADOW_PADDING", function() { return LOCK_SHADOW_PADDING; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Classes", function() { return Classes; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "MenuClasses", function() { return MenuClasses; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "GlobalStyle", function() { return GlobalStyle; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "defaultCSSVariables", function() { return defaultCSSVariables; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "variableConst", function() { return variableConst; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "StyledArtTableWrapper", function() { return StyledArtTableWrapper; });
@@ -3034,7 +3087,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_3__);
 /* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! styled-components */ "./node_modules/styled-components/dist/styled-components.browser.esm.js");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 
 
@@ -3058,6 +3111,7 @@ var Classes = {
   tableHeaderRow: "".concat(prefix, "table-header-row"),
   /** 单元格 */
   tableCell: "".concat(prefix, "table-cell"),
+  tableExtendCell: "".concat(prefix, "table-extend-cell"),
   /** 表头的单元格 */
   tableHeaderCell: "".concat(prefix, "table-header-cell"),
   tableHeaderCellContent: "".concat(prefix, "table-header-cell-content"),
@@ -3115,9 +3169,17 @@ var Classes = {
   rowDragging: "".concat(prefix, "row-dragging"),
   rowDragStart: "".concat(prefix, "row-drag-start"),
   rowDragEnd: "".concat(prefix, "row-drag-end"),
+  rowDragEndParent: "".concat(prefix, "row-drag-end-parent"),
   rowDragEndToTop: "".concat(prefix, "row-drag-end-to-top"),
   rowDragEndToBottom: "".concat(prefix, "row-drag-end-to-bottom"),
+  rowDragEndInto: "".concat(prefix, "row-drag-end-into"),
   rowDragElement: "".concat(prefix, "row-drag-element"),
+  rowDragElementIcon: "".concat(prefix, "row-drag-element-icon"),
+  rowDragElementLabel: "".concat(prefix, "row-drag-element-label"),
+  rowDragLine: "".concat(prefix, "row-drag-line"),
+  treeTableRowDragLine: "".concat(prefix, "tree-table-row-drag-line"),
+  iconNotAllowed: "".concat(prefix, "icon-not-allowed"),
+  iconMove: "".concat(prefix, "icon-move"),
   rowDragCell: "".concat(prefix, "row-drag-cell")
 };
 var MenuClasses = {
@@ -3137,7 +3199,8 @@ var Z = {
   scrollItem: 30,
   loadingIndicator: 40
 };
-var outerBorderStyleMixin = Object(styled_components__WEBPACK_IMPORTED_MODULE_4__["css"])(_templateObject || (_templateObject = _babel_runtime_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_0___default()(["\n  border-top: 1px solid #cccccc;\n  border-right: 1px solid #cccccc;\n  border-bottom: 1px solid #cccccc;\n  border-left: 1px solid #cccccc;\n\n  td.", ",\n  th.", " {\n    border-left: none;\n  }\n  td.", ",\n  th.", " {\n    border-right: none;\n  }\n\n  thead tr.", " th,\n  tbody tr.", " td {\n    border-top: none;\n  }\n  &.has-footer tfoot tr.", " td {\n    border-bottom: none;\n  }\n  &:not(.has-footer) tbody tr.", " td {\n    border-bottom: none;\n  }\n  td.", ":not(.", "){\n    border-left: var(---cell-border-vertical);\n  }\n  td.", ":not(.", "){\n    border-right: var(---cell-border-vertical);\n  }\n"])), Classes.first, Classes.first, Classes.last, Classes.last, Classes.first, Classes.first, Classes.last, Classes.last, Classes.rowSpan, Classes.first, Classes.rowSpan, Classes.last);
+var GlobalStyle = Object(styled_components__WEBPACK_IMPORTED_MODULE_4__["createGlobalStyle"])(_templateObject || (_templateObject = _babel_runtime_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_0___default()(["\n  .", "{\n    position: absolute;\n    top:0;\n    left:0;\n    z-index: 9999;\n    pointer-events:none;\n    user-select: none;\n\n    display:flex;\n    opacity: 0.9;\n    align-items:center;\n    min-width:80px;\n    padding: 0px 8px;\n    border: 1px solid #d9d9d9;\n    box-shadow: 0px 6px 16px 3px rgba(0,0,0,0.08);\n    border-radius: 2px;\n    background: #fff;\n\n    .", "{\n      font-size:12px;\n      overflow:hidden;\n      text-overflow: ellipsis;\n      white-space:nowrap;\n    }\n    \n  }\n\n  .", "{\n    position: absolute;\n    top:0;\n    left:0;\n    z-index: 9998;\n    pointer-events:none;\n    user-select: none;\n    height: 2px;\n    background: var(--primary-color);\n  }\n  .", ":before{\n    content: \" \";\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    top:-4px;\n    border: 2px solid var(--primary-color);\n    border-radius: 50%;\n    background:#fff;\n  }\n"])), Classes.rowDragElement, Classes.rowDragElementLabel, Classes.rowDragLine, Classes.treeTableRowDragLine);
+var outerBorderStyleMixin = Object(styled_components__WEBPACK_IMPORTED_MODULE_4__["css"])(_templateObject2 || (_templateObject2 = _babel_runtime_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_0___default()(["\n  border-top: 1px solid #cccccc;\n  border-right: 1px solid #cccccc;\n  border-bottom: 1px solid #cccccc;\n  border-left: 1px solid #cccccc;\n\n  td.", ",\n  th.", " {\n    border-left: none;\n  }\n  td.", ",\n  th.", " {\n    border-right: none;\n  }\n\n  thead tr.", " th,\n  tbody tr.", " td {\n    border-top: none;\n  }\n  &.has-footer tfoot tr.", " td {\n    border-bottom: none;\n  }\n  &:not(.has-footer) tbody tr.", " td {\n    border-bottom: none;\n  }\n  td.", ":not(.", "){\n    border-left: var(---cell-border-vertical);\n  }\n  td.", ":not(.", "){\n    border-right: var(---cell-border-vertical);\n  }\n"])), Classes.first, Classes.first, Classes.last, Classes.last, Classes.first, Classes.first, Classes.last, Classes.last, Classes.rowSpan, Classes.first, Classes.rowSpan, Classes.last);
 var defaultCSSVariables = {
   '--row-height': '48px',
   '--color': '#333',
@@ -3168,10 +3231,10 @@ var defaultCSSVariables = {
   '--header-cell-border-vertical': '1px solid #dfe3e8'
 };
 var variableConst = getCssVariableText(defaultCSSVariables);
-var notBorderedStyleMixin = Object(styled_components__WEBPACK_IMPORTED_MODULE_4__["css"])(_templateObject2 || (_templateObject2 = _babel_runtime_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_0___default()(["\n  --cell-border-vertical: none;\n  --header-cell-border-vertical: none;\n"])));
-var borderedStyleMixin = Object(styled_components__WEBPACK_IMPORTED_MODULE_4__["css"])(_templateObject3 || (_templateObject3 = _babel_runtime_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_0___default()(["\n  //th\u9690\u85CF\u5217\u5BBD\u62D6\u62FD\u7684\u80CC\u666F\u8272\uFF0C\u4F7F\u7528th\u7684\u53F3\u8FB9\u6846\u4EE3\u66FF\n  .", "::after{\n    background-color: inherit;\n  }\n"])), Classes.tableHeaderCellResize);
-var StyledArtTableWrapper = styled_components__WEBPACK_IMPORTED_MODULE_4__["default"].div(_templateObject4 || (_templateObject4 = _babel_runtime_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_0___default()(["\n  :root {\n    ", "\n  }\n  ", "\n\n  box-sizing: border-box;\n  * {\n    box-sizing: border-box;\n  }\n  cursor: default;\n  color: var(--color);\n  font-size: var(--font-size);\n  line-height: var(--line-height);\n  position: relative;\n\n  // \u8868\u683C\u5916\u8FB9\u6846\u7531 art-table-wrapper \u63D0\u4F9B\uFF0C\u800C\u4E0D\u662F\u7531\u5355\u5143\u683C\u63D0\u4F9B\n  &.use-outer-border {\n    ", ";\n  }\n\n  // \u8868\u683C\u4E0D\u542F\u7528\u8FB9\u6846\u7EBF\uFF0C\u9690\u85CFth\u3001td\u7684\u5355\u5143\u683C\u5DE6\u53F3\u8FB9\u6846\u7EBF\n  &:not(.", ") {\n    ", "\n  }\n  &.", "{\n    ", "\n  }\n\n  .no-scrollbar {\n    ::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  .", " {\n    overflow: auto;\n    flex-shrink: 1;\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .", " {\n    overflow: hidden;\n    background: var(--header-bgcolor);\n    display: flex;\n    flex-shrink: 0;\n    border-bottom: var(--header-cell-border-horizontal);\n  }\n\n  .", " {\n    display: flex;\n    // justify-content: flex-start;\n    align-items: center;\n    height: inherit;\n  }\n\n  .", " {\n     overflow-x:auto;\n     flex-shrink: 0;\n     flex-grow: 0;\n     scrollbar-width: none; // \u517C\u5BB9\u706B\u72D0\n     & {\n       ::-webkit-scrollbar {\n         display:none;\n       }\n     }\n   }\n\n  .", " {\n    display: flex;\n    flex: none;\n  }\n  .", ", .", " {\n    background: var(--bgcolor);\n    overflow: auto;\n    overflow-x: hidden;\n    overflow-anchor: none;\n    position:relative;\n    &.empty {\n      position: relative;\n    }\n  }\n\n  .", " {\n    position: relative;\n  }\n  .", ", .", "  {\n    .", "{\n      background-color: #e6effb !important;\n    }\n    .", "{\n      border-top: 1px solid #0E5FD8 !important;\n    }\n    .", "{\n      border-left: 1px solid #0E5FD8 !important;\n    }\n    .", "{\n      border-bottom: 1px solid #0E5FD8 !important;\n    }\n    .", "{\n      border-right: 1px solid #0E5FD8 !important;\n    }\n  }\n\n  .", " {\n    user-select:none;\n  }\n\n  .", " {\n    user-select:none;\n    .", " .", " >td{\n        cursor:move;\n    }\n\n    .", " .", " >td{\n        cursor:no-drop;\n    }\n    \n  }\n\n  .", "{\n    opacity: 0.5;\n  }\n\n\n  .", " td{\n    border-top: 1px solid var(--primary-color) !important;\n  }\n\n  .", " td{\n    border-bottom: 1px solid var(--primary-color) !important;\n   \n  }\n\n  .", " {\n    cursor:pointer;\n  }\n\n\n  &.sticky-header .", " {\n    position: sticky;\n    top: 0;\n    z-index: ", ";\n  }\n\n  &.sticky-footer .", " {\n    position: sticky;\n    bottom: 0;\n    z-index: ", ";\n  }\n\n  table {\n    width: 0;\n    table-layout: fixed;\n    border-collapse: separate;\n    border-spacing: 0;\n    display: table;\n    margin: 0;\n    padding: 0;\n    flex-shrink: 0;\n    flex-grow: 0;\n    position:relative;\n  }\n\n  // \u5728 tr \u4E0A\u8BBE\u7F6E .no-hover \u53EF\u4EE5\u7981\u7528\u9F20\u6807\u60AC\u505C\u6548\u679C\n  tr:not(.no-hover):hover > td {\n    background: var(--hover-bgcolor);\n  }\n  // \u4F7F\u7528 js \u6DFB\u52A0\u60AC\u6D6E\u6548\u679C\n  tr:not(.no-hover).row-hover > td {\n    background: var(--hover-bgcolor);\n  }\n  // \u5728 tr \u8BBE\u7F6E highlight \u53EF\u4EE5\u4E3A\u5E95\u4E0B\u7684 td \u8BBE\u7F6E\u4E3A\u9AD8\u4EAE\u8272\n  // \u800C\u8BBE\u7F6E .no-highlight \u7684\u8BDD\u5219\u53EF\u4EE5\u7981\u7528\u9AD8\u4EAE\u6548\u679C\uFF1B\n  tr:not(.no-highlight).highlight > td {\n    background: var(--highlight-bgcolor);\n  }\n\n  th {\n    font-weight: normal;\n    text-align: left;\n    padding: var(--cell-padding);\n    height: var(--header-row-height);\n    color: var(--header-color);\n    background: var(--header-bgcolor);\n    border:1px solid transparent;\n    border-right: var(--header-cell-border-vertical);\n    border-bottom: var(--header-cell-border-horizontal);\n    position: relative;\n  }\n\n  th.resizeable{\n    border-right: var(--header-cell-border-vertical)\n  }\n\n  th.", " {\n    border-right: var(--header-cell-border-vertical);\n    border-bottom: none;\n  }\n\n  tr.", " th {\n    border-top: var(--header-cell-border-horizontal);\n  }\n  th.", " {\n    border-left: var(--header-cell-border-vertical);\n  }\n\n  td {\n    padding: var(--cell-padding);\n    background: var(--bgcolor);\n    height: var(--row-height);\n    border:1px solid transparent;\n    border-right: var(--cell-border-vertical);\n    border-bottom: var(--cell-border-horizontal);\n    word-break: break-all;\n  }\n  td.", " {\n    border-left: var(--cell-border-vertical);\n  }\n  tr.", " td {\n    border-top: var(--cell-border-horizontal);\n  }\n  &.has-header tbody tr.", " td {\n    border-top: none;\n  }\n  &.has-footer tbody tr.", " td {\n    border-bottom: none;\n  }\n\n  .", ",\n  .", " {\n    z-index: ", ";\n  }\n\n  //#region \u9501\u5217\u9634\u5F71\n  .", " {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    z-index: ", ";\n    pointer-events: none;\n    overflow: hidden;\n\n    .", " {\n      height: 100%;\n    }\n\n    .", " {\n      margin-right: ", "px;\n      box-shadow: none;\n\n      &.show-shadow {\n        box-shadow: var(--lock-shadow);\n        border-right: var(--cell-border-vertical);\n      }\n    }\n\n    .", " {\n      margin-left: ", "px;\n      box-shadow: none;\n\n      &.show-shadow {\n        box-shadow: var(--lock-shadow);\n        border-left: var(--cell-border-vertical);\n      }\n    }\n  }\n  //#endregion\n\n  //#region \u7A7A\u8868\u683C\u5C55\u73B0\n  .", " {\n    pointer-events: none;\n    color: #99a3b3;\n    font-size: 12px;\n    text-align: center;\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n\n    .empty-image {\n      width: 50px;\n      height: 50px;\n    }\n\n    .empty-tips {\n      margin-top: 16px;\n      line-height: 1.5;\n    }\n  }\n  //#endregion\n\n  //#region sticky\u517C\u5BB9\n  &.sticky-polyfill-wrapper{\n    //\u9501\u5B9A\u5217\u517C\u5BB9 \u4EC5\u5728\u9501\u5B9A\u5217\u7684\u60C5\u51B5\u4E0B\u751F\u6548\n    .", " {\n      overflow-x: hidden;\n    }\n    .", ", .", " {\n      position:relative;\n    }\n    .", " {\n      overflow: hidden;\n      display: flex;\n    }\n    .", " {\n      position: relative;\n    }\n\n    .", " {\n      display: flex;\n      overflow: auto;\n      overflow-x: hidden;\n      overflow-anchor: none;\n    }\n\n    .", ", .", "{\n      position: absolute;\n      z-index: ", ";\n      top: 0;\n    }\n    .", "{\n      left:0;\n    }\n    .", "{\n      right:0;\n    }\n\n    .", "{\n      .", "{\n        position: absolute;\n        top: 0;\n        width: 100%;\n        z-index: ", ";\n      }\n    }\n\n    tr:not(.no-hover).row-hover > td {\n      background: var(--hover-bgcolor);\n    }\n  }\n  //#endregion sticky\u517C\u5BB9\n\n  //#region \u7C98\u6027\u6EDA\u52A8\u6761\n  .", "{\n    display:flex;\n    background: var(--bgcolor);\n  }\n  .", "{\n    height: 1px;\n    flex-shrink: 0;\n    border-top: 1px solid var(--border-color);\n  }\n\n  .", "{\n    height: 1px;\n    flex-shrink: 0;\n    border-top: 1px solid var(--border-color);\n  }\n  .", " {\n    overflow-y: hidden;\n    overflow-x: auto;\n    z-index: ", ";\n    flex-shrink: 1;\n    flex-grow: 0;\n    border-top: 1px solid var(--border-color);\n  }\n\n  .", " {\n    // \u5FC5\u987B\u6709\u9AD8\u5EA6\u624D\u80FD\u51FA\u73B0\u6EDA\u52A8\u6761\n    height: 1px;\n    visibility: hidden;\n  }\n  //#endregion\n\n  //#region \u52A0\u8F7D\u6837\u5F0F\n  .", " {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    overflow: auto;\n\n    .", " {\n      filter: none;\n      width: 100%;\n      height: 100%;\n      overflow: hidden;//\u5217\u5168\u90E8\u56FA\u5B9A\u65F6\uFF0C\u5B58\u5728\u53CC\u6A2A\u5411\u6EDA\u52A8\u6761\n      display: flex;\n      position: relative;\n      flex-direction: column;\n    }\n\n    .", " {\n      position: absolute;\n      left: 0;\n      right: 0;\n      top: 0;\n      bottom: 0;\n      pointer-events: none;\n    }\n\n    .", " {\n      position: sticky;\n      z-index: ", ";\n      transform: translateY(-50%);\n    }\n  }\n  //#endregion\n\n  //#region \u8868\u683C\u8FC7\u6EE4\n  .", " {\n    color:var(--icon-color);\n    &.active{\n      color:var(--primary-color);\n    }\n    padding: 6px 4px;\n    &:hover{\n      background-color: #e5e5e5;\n    }\n    &:focus {\n      outline: none\n    }\n  }\n  //#endregion\n\n  //#region \u8868\u683C\u6392\u5E8F\n  .", " {\n    color:var(--icon-color);\n    &.active{\n      color:var(--primary-color);\n    }\n  }\n  .", " {\n    color:var(--icon-color);\n    &.active{\n      color:var(--primary-color);\n    }\n  }\n  //#endregion\n\n  //#region \u6EDA\u52A8\u6761\u5360\u4F4D\n  .", " {\n    visibility: hidden;\n    flex-shrink: 0;\n  }\n  .", " .", " {\n    border-top: var(--cell-border-horizontal);\n  }\n  //#endregion\n\n  //#region \u62D6\u62FD\u5217\u5BBD\u5927\u5C0F\n  .", "::after{\n    background-color: var(--border-color);\n  }\n  //\u89E3\u51B3\u90E8\u5206\u6D4F\u89C8\u5668(chrome109)\u6700\u540E\u4E00\u4E2A\u5355\u5143\u683C\u7684\u5217\u5BBD\u62D6\u62FD\u533A\u57DF\u7EDD\u5BF9\u5B9A\u4F4D\u8D85\u51FA\u8868\u683C\uFF0C\u5BFC\u81F4\u8868\u683C\u7AD6\u5206\u5272\u7EBF\u65E0\u6CD5\u5BF9\u9F50\n  .", " th.", " .", "{\n    right: 0;\n    width: 5px;\n    &::after{\n      left: 4px;\n    }\n  }\n  //#endregion\n\n  "])), variableConst, variableConst, outerBorderStyleMixin, Classes.artTableBordered, notBorderedStyleMixin, Classes.artTableBordered, borderedStyleMixin, Classes.artTable, Classes.tableHeader, Classes.tableHeaderCellContent, Classes.virtual, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableRow, Classes.tableBody, Classes.tableFooter, Classes.tableCellRangeSelected, Classes.tableCellRangeTop, Classes.tableCellRangeLeft, Classes.tableCellRangeBottom, Classes.tableCellRangeRight, Classes.rangeSelection, Classes.rowDragging, Classes.tableBody, Classes.tableRow, Classes.tableFooter, Classes.tableRow, Classes.rowDragStart, Classes.rowDragEndToTop, Classes.rowDragEndToBottom, Classes.rowDragCell, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Classes.leaf, Classes.first, Classes.first, Classes.first, Classes.first, Classes.first, Classes.last, Classes.lockLeft, Classes.lockRight, Z.lock, Classes.lockShadowMask, Z.lockShadow, Classes.lockShadow, Classes.leftLockShadow, LOCK_SHADOW_PADDING, Classes.rightLockShadow, LOCK_SHADOW_PADDING, Classes.emptyWrapper, Classes.virtual, Classes.tableBody, Classes.tableFooter, Classes.tableHeaderMain, Classes.tableHeader, Classes.tableFooterMain, Classes.fixedLeft, Classes.fixedRight, Z.lock, Classes.fixedLeft, Classes.fixedRight, Classes.rowDetailContainer, Classes.rowDetailItem, Z.rowDetail, Classes.horizontalStickyScrollContainer, Classes.horizontalScrollLeftSpacer, Classes.horizontalScrollRightSpacer, Classes.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingContentWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator, Classes.tableFilterTrigger, Classes.tableSortIcon, Classes.tableExtendIcon, Classes.verticalScrollPlaceholder, Classes.tableFooter, Classes.verticalScrollPlaceholder, Classes.tableHeaderCellResize, Classes.tableHeaderRow, Classes.last, Classes.tableHeaderCellResize);
-var ButtonCSS = Object(styled_components__WEBPACK_IMPORTED_MODULE_4__["css"])(_templateObject5 || (_templateObject5 = _babel_runtime_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_0___default()(["\n  ", "\n  //#region \u6309\u94AE\n  .", "{\n    color: var(--color);\n    background:#ffffff;\n    border:1px solid var(--strong-border-color);\n    border-radius: 2px;\n    cursor: pointer;\n    &:hover{\n      color: var(--primary-color);\n      border:1px solid var(--primary-color);\n    }\n  }\n  .", " {\n    color:#ffffff;\n    background-color: var(--primary-color);\n    border:none;\n    &:hover{\n      color:#ffffff;\n      background-color: var(--primary-color-level2);\n      border:none;\n    }\n  }\n//#endregion\n"])), variableConst, Classes.button, Classes.buttonPrimary);
+var notBorderedStyleMixin = Object(styled_components__WEBPACK_IMPORTED_MODULE_4__["css"])(_templateObject3 || (_templateObject3 = _babel_runtime_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_0___default()(["\n  --cell-border-vertical: none;\n  --header-cell-border-vertical: none;\n"])));
+var borderedStyleMixin = Object(styled_components__WEBPACK_IMPORTED_MODULE_4__["css"])(_templateObject4 || (_templateObject4 = _babel_runtime_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_0___default()(["\n  //th\u9690\u85CF\u5217\u5BBD\u62D6\u62FD\u7684\u80CC\u666F\u8272\uFF0C\u4F7F\u7528th\u7684\u53F3\u8FB9\u6846\u4EE3\u66FF\n  .", "::after{\n    background-color: inherit;\n  }\n"])), Classes.tableHeaderCellResize);
+var StyledArtTableWrapper = styled_components__WEBPACK_IMPORTED_MODULE_4__["default"].div(_templateObject5 || (_templateObject5 = _babel_runtime_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_0___default()(["\n  :root {\n    ", "\n  }\n  ", "\n\n  box-sizing: border-box;\n  * {\n    box-sizing: border-box;\n  }\n  cursor: default;\n  color: var(--color);\n  font-size: var(--font-size);\n  line-height: var(--line-height);\n  position: relative;\n\n  // \u8868\u683C\u5916\u8FB9\u6846\u7531 art-table-wrapper \u63D0\u4F9B\uFF0C\u800C\u4E0D\u662F\u7531\u5355\u5143\u683C\u63D0\u4F9B\n  &.use-outer-border {\n    ", ";\n  }\n\n  // \u8868\u683C\u4E0D\u542F\u7528\u8FB9\u6846\u7EBF\uFF0C\u9690\u85CFth\u3001td\u7684\u5355\u5143\u683C\u5DE6\u53F3\u8FB9\u6846\u7EBF\n  &:not(.", ") {\n    ", "\n  }\n  &.", "{\n    ", "\n  }\n\n  .no-scrollbar {\n    ::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  .", " {\n    overflow: auto;\n    flex-shrink: 1;\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .", " {\n    overflow: hidden;\n    background: var(--header-bgcolor);\n    display: flex;\n    flex-shrink: 0;\n    border-bottom: var(--header-cell-border-horizontal);\n  }\n\n  .", " {\n    display: flex;\n    // justify-content: flex-start;\n    align-items: center;\n    height: inherit;\n  }\n\n  .", " {\n     overflow-x:auto;\n     flex-shrink: 0;\n     flex-grow: 0;\n     scrollbar-width: none; // \u517C\u5BB9\u706B\u72D0\n     & {\n       ::-webkit-scrollbar {\n         display:none;\n       }\n     }\n   }\n\n  .", " {\n    display: flex;\n    flex: none;\n  }\n  .", ", .", " {\n    background: var(--bgcolor);\n    overflow: auto;\n    overflow-x: hidden;\n    overflow-anchor: none;\n    position:relative;\n    &.empty {\n      position: relative;\n    }\n  }\n\n  .", " {\n    position: relative;\n  }\n  .", ", .", "  {\n    .", "{\n      background-color: #e6effb !important;\n    }\n    .", "{\n      border-top: 1px solid #0E5FD8 !important;\n    }\n    .", "{\n      border-left: 1px solid #0E5FD8 !important;\n    }\n    .", "{\n      border-bottom: 1px solid #0E5FD8 !important;\n    }\n    .", "{\n      border-right: 1px solid #0E5FD8 !important;\n    }\n  }\n\n  .", " {\n    user-select:none;\n  }\n\n  .", " {\n    user-select:none;\n    // .", " .", " >td{\n    //     cursor:move;\n    // }\n\n    // .", " .", " >td{\n    //     cursor:no-drop;\n    // }\n    \n  }\n\n  .", "{\n    opacity: 0.5;\n  }\n\n  .", " td{\n    border-top: 1px solid var(--primary-color) !important;\n    border-bottom: 1px solid var(--primary-color) !important;\n    \n  }\n  .", " td:first-child{\n    border-left: 1px solid var(--primary-color) !important;\n    \n  }\n  .", " td:last-child{\n    border-right: 1px solid var(--primary-color) !important;\n    \n  }\n\n\n  // .", " td{\n  //   border-top: 1px solid var(--primary-color) !important;\n  // }\n\n  .", " td{\n    border-top: 1px solid var(--primary-color) !important;\n    border-bottom: 1px solid var(--primary-color) !important;\n  }\n\n  .", " td:first-child{\n    border-left: 1px solid var(--primary-color) !important;\n  }\n\n  .", " td:last-child{\n    border-right: 1px solid var(--primary-color) !important;\n  }\n\n  // .", " td{\n  //   border-bottom: 1px solid var(--primary-color) !important;\n  // }\n\n  .", " {\n    cursor:pointer;\n  }\n\n\n  &.sticky-header .", " {\n    position: sticky;\n    top: 0;\n    z-index: ", ";\n  }\n\n  &.sticky-footer .", " {\n    position: sticky;\n    bottom: 0;\n    z-index: ", ";\n  }\n\n  table {\n    width: 0;\n    table-layout: fixed;\n    border-collapse: separate;\n    border-spacing: 0;\n    display: table;\n    margin: 0;\n    padding: 0;\n    flex-shrink: 0;\n    flex-grow: 0;\n    position:relative;\n  }\n\n  // \u5728 tr \u4E0A\u8BBE\u7F6E .no-hover \u53EF\u4EE5\u7981\u7528\u9F20\u6807\u60AC\u505C\u6548\u679C\n  tr:not(.no-hover):hover > td {\n    background: var(--hover-bgcolor);\n  }\n  // \u4F7F\u7528 js \u6DFB\u52A0\u60AC\u6D6E\u6548\u679C\n  tr:not(.no-hover).row-hover > td {\n    background: var(--hover-bgcolor);\n  }\n  // \u5728 tr \u8BBE\u7F6E highlight \u53EF\u4EE5\u4E3A\u5E95\u4E0B\u7684 td \u8BBE\u7F6E\u4E3A\u9AD8\u4EAE\u8272\n  // \u800C\u8BBE\u7F6E .no-highlight \u7684\u8BDD\u5219\u53EF\u4EE5\u7981\u7528\u9AD8\u4EAE\u6548\u679C\uFF1B\n  tr:not(.no-highlight).highlight > td {\n    background: var(--highlight-bgcolor);\n  }\n\n  th {\n    font-weight: normal;\n    text-align: left;\n    padding: var(--cell-padding);\n    height: var(--header-row-height);\n    color: var(--header-color);\n    background: var(--header-bgcolor);\n    border:1px solid transparent;\n    border-right: var(--header-cell-border-vertical);\n    border-bottom: var(--header-cell-border-horizontal);\n    position: relative;\n  }\n\n  th.resizeable{\n    border-right: var(--header-cell-border-vertical)\n  }\n\n  th.", " {\n    border-right: var(--header-cell-border-vertical);\n    border-bottom: none;\n  }\n\n  tr.", " th {\n    border-top: var(--header-cell-border-horizontal);\n  }\n  th.", " {\n    border-left: var(--header-cell-border-vertical);\n  }\n\n  td {\n    padding: var(--cell-padding);\n    background: var(--bgcolor);\n    height: var(--row-height);\n    border:1px solid transparent;\n    border-right: var(--cell-border-vertical);\n    border-bottom: var(--cell-border-horizontal);\n    word-break: break-all;\n  }\n  td.", " {\n    border-left: var(--cell-border-vertical);\n  }\n  tr.", " td {\n    border-top: var(--cell-border-horizontal);\n  }\n  &.has-header tbody tr.", " td {\n    border-top: none;\n  }\n  &.has-footer tbody tr.", " td {\n    border-bottom: none;\n  }\n\n  .", ",\n  .", " {\n    z-index: ", ";\n  }\n\n  //#region \u9501\u5217\u9634\u5F71\n  .", " {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    z-index: ", ";\n    pointer-events: none;\n    overflow: hidden;\n\n    .", " {\n      height: 100%;\n    }\n\n    .", " {\n      margin-right: ", "px;\n      box-shadow: none;\n\n      &.show-shadow {\n        box-shadow: var(--lock-shadow);\n        border-right: var(--cell-border-vertical);\n      }\n    }\n\n    .", " {\n      margin-left: ", "px;\n      box-shadow: none;\n\n      &.show-shadow {\n        box-shadow: var(--lock-shadow);\n        border-left: var(--cell-border-vertical);\n      }\n    }\n  }\n  //#endregion\n\n  //#region \u7A7A\u8868\u683C\u5C55\u73B0\n  .", " {\n    pointer-events: none;\n    color: #99a3b3;\n    font-size: 12px;\n    text-align: center;\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n\n    .empty-image {\n      width: 50px;\n      height: 50px;\n    }\n\n    .empty-tips {\n      margin-top: 16px;\n      line-height: 1.5;\n    }\n  }\n  //#endregion\n\n  //#region sticky\u517C\u5BB9\n  &.sticky-polyfill-wrapper{\n    //\u9501\u5B9A\u5217\u517C\u5BB9 \u4EC5\u5728\u9501\u5B9A\u5217\u7684\u60C5\u51B5\u4E0B\u751F\u6548\n    .", " {\n      overflow-x: hidden;\n    }\n    .", ", .", " {\n      position:relative;\n    }\n    .", " {\n      overflow: hidden;\n      display: flex;\n    }\n    .", " {\n      position: relative;\n    }\n\n    .", " {\n      display: flex;\n      overflow: auto;\n      overflow-x: hidden;\n      overflow-anchor: none;\n    }\n\n    .", ", .", "{\n      position: absolute;\n      z-index: ", ";\n      top: 0;\n    }\n    .", "{\n      left:0;\n    }\n    .", "{\n      right:0;\n    }\n\n    .", "{\n      .", "{\n        position: absolute;\n        top: 0;\n        width: 100%;\n        z-index: ", ";\n      }\n    }\n\n    tr:not(.no-hover).row-hover > td {\n      background: var(--hover-bgcolor);\n    }\n  }\n  //#endregion sticky\u517C\u5BB9\n\n  //#region \u7C98\u6027\u6EDA\u52A8\u6761\n  .", "{\n    display:flex;\n    background: var(--bgcolor);\n  }\n  .", "{\n    height: 1px;\n    flex-shrink: 0;\n    border-top: 1px solid var(--border-color);\n  }\n\n  .", "{\n    height: 1px;\n    flex-shrink: 0;\n    border-top: 1px solid var(--border-color);\n  }\n  .", " {\n    overflow-y: hidden;\n    overflow-x: auto;\n    z-index: ", ";\n    flex-shrink: 1;\n    flex-grow: 0;\n    border-top: 1px solid var(--border-color);\n  }\n\n  .", " {\n    // \u5FC5\u987B\u6709\u9AD8\u5EA6\u624D\u80FD\u51FA\u73B0\u6EDA\u52A8\u6761\n    height: 1px;\n    visibility: hidden;\n  }\n  //#endregion\n\n  //#region \u52A0\u8F7D\u6837\u5F0F\n  .", " {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    overflow: auto;\n\n    .", " {\n      filter: none;\n      width: 100%;\n      height: 100%;\n      overflow: hidden;//\u5217\u5168\u90E8\u56FA\u5B9A\u65F6\uFF0C\u5B58\u5728\u53CC\u6A2A\u5411\u6EDA\u52A8\u6761\n      display: flex;\n      position: relative;\n      flex-direction: column;\n    }\n\n    .", " {\n      position: absolute;\n      left: 0;\n      right: 0;\n      top: 0;\n      bottom: 0;\n      pointer-events: none;\n    }\n\n    .", " {\n      position: sticky;\n      z-index: ", ";\n      transform: translateY(-50%);\n    }\n  }\n  //#endregion\n\n  //#region \u8868\u683C\u8FC7\u6EE4\n  .", " {\n    color:var(--icon-color);\n    &.active{\n      color:var(--primary-color);\n    }\n    padding: 6px 4px;\n    &:hover{\n      background-color: #e5e5e5;\n    }\n    &:focus {\n      outline: none\n    }\n  }\n  //#endregion\n\n  //#region \u8868\u683C\u6392\u5E8F\n  .", " {\n    color:var(--icon-color);\n    &.active{\n      color:var(--primary-color);\n    }\n  }\n  .", " {\n    color:var(--icon-color);\n    &.active{\n      color:var(--primary-color);\n    }\n  }\n  //#endregion\n\n  //#region \u6EDA\u52A8\u6761\u5360\u4F4D\n  .", " {\n    visibility: hidden;\n    flex-shrink: 0;\n  }\n  .", " .", " {\n    border-top: var(--cell-border-horizontal);\n  }\n  //#endregion\n\n  //#region \u62D6\u62FD\u5217\u5BBD\u5927\u5C0F\n  .", "::after{\n    background-color: var(--border-color);\n  }\n  //\u89E3\u51B3\u90E8\u5206\u6D4F\u89C8\u5668(chrome109)\u6700\u540E\u4E00\u4E2A\u5355\u5143\u683C\u7684\u5217\u5BBD\u62D6\u62FD\u533A\u57DF\u7EDD\u5BF9\u5B9A\u4F4D\u8D85\u51FA\u8868\u683C\uFF0C\u5BFC\u81F4\u8868\u683C\u7AD6\u5206\u5272\u7EBF\u65E0\u6CD5\u5BF9\u9F50\n  .", " th.", " .", "{\n    right: 0;\n    width: 5px;\n    &::after{\n      left: 4px;\n    }\n  }\n  //#endregion\n\n  "])), variableConst, variableConst, outerBorderStyleMixin, Classes.artTableBordered, notBorderedStyleMixin, Classes.artTableBordered, borderedStyleMixin, Classes.artTable, Classes.tableHeader, Classes.tableHeaderCellContent, Classes.virtual, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableRow, Classes.tableBody, Classes.tableFooter, Classes.tableCellRangeSelected, Classes.tableCellRangeTop, Classes.tableCellRangeLeft, Classes.tableCellRangeBottom, Classes.tableCellRangeRight, Classes.rangeSelection, Classes.rowDragging, Classes.tableBody, Classes.tableRow, Classes.tableFooter, Classes.tableRow, Classes.rowDragStart, Classes.rowDragEndParent, Classes.rowDragEndParent, Classes.rowDragEndParent, Classes.rowDragEndToTop, Classes.rowDragEndInto, Classes.rowDragEndInto, Classes.rowDragEndInto, Classes.rowDragEndToBottom, Classes.rowDragCell, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Classes.leaf, Classes.first, Classes.first, Classes.first, Classes.first, Classes.first, Classes.last, Classes.lockLeft, Classes.lockRight, Z.lock, Classes.lockShadowMask, Z.lockShadow, Classes.lockShadow, Classes.leftLockShadow, LOCK_SHADOW_PADDING, Classes.rightLockShadow, LOCK_SHADOW_PADDING, Classes.emptyWrapper, Classes.virtual, Classes.tableBody, Classes.tableFooter, Classes.tableHeaderMain, Classes.tableHeader, Classes.tableFooterMain, Classes.fixedLeft, Classes.fixedRight, Z.lock, Classes.fixedLeft, Classes.fixedRight, Classes.rowDetailContainer, Classes.rowDetailItem, Z.rowDetail, Classes.horizontalStickyScrollContainer, Classes.horizontalScrollLeftSpacer, Classes.horizontalScrollRightSpacer, Classes.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingContentWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator, Classes.tableFilterTrigger, Classes.tableSortIcon, Classes.tableExtendIcon, Classes.verticalScrollPlaceholder, Classes.tableFooter, Classes.verticalScrollPlaceholder, Classes.tableHeaderCellResize, Classes.tableHeaderRow, Classes.last, Classes.tableHeaderCellResize);
+var ButtonCSS = Object(styled_components__WEBPACK_IMPORTED_MODULE_4__["css"])(_templateObject6 || (_templateObject6 = _babel_runtime_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_0___default()(["\n  ", "\n  //#region \u6309\u94AE\n  .", "{\n    color: var(--color);\n    background:#ffffff;\n    border:1px solid var(--strong-border-color);\n    border-radius: 2px;\n    cursor: pointer;\n    &:hover{\n      color: var(--primary-color);\n      border:1px solid var(--primary-color);\n    }\n  }\n  .", " {\n    color:#ffffff;\n    background-color: var(--primary-color);\n    border:none;\n    &:hover{\n      color:#ffffff;\n      background-color: var(--primary-color-level2);\n      border:none;\n    }\n  }\n//#endregion\n"])), variableConst, Classes.button, Classes.buttonPrimary);
 function getCssVariableText(obj) {
   return Object.keys(obj).reduce(function (acc, key) {
     acc += "".concat(key, ":").concat(obj[key], ";");
@@ -3258,9 +3321,10 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _html_table__WEBPACK_IMPORTED_MODULE_36__ = __webpack_require__(/*! ./html-table */ "./components/table/base/html-table.tsx");
 /* harmony import */ var _loading__WEBPACK_IMPORTED_MODULE_37__ = __webpack_require__(/*! ./loading */ "./components/table/base/loading.tsx");
 /* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_38__ = __webpack_require__(/*! ./styles */ "./components/table/base/styles.ts");
-/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_39__ = __webpack_require__(/*! ./utils */ "./components/table/base/utils.tsx");
-/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_40__ = __webpack_require__(/*! ../utils */ "./components/table/utils/index.tsx");
-/* harmony import */ var _renderTemplates__WEBPACK_IMPORTED_MODULE_41__ = __webpack_require__(/*! ./renderTemplates */ "./components/table/base/renderTemplates.tsx");
+/* harmony import */ var _globalStyleComponent__WEBPACK_IMPORTED_MODULE_39__ = __webpack_require__(/*! ./globalStyleComponent */ "./components/table/base/globalStyleComponent.tsx");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_40__ = __webpack_require__(/*! ./utils */ "./components/table/base/utils.tsx");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_41__ = __webpack_require__(/*! ../utils */ "./components/table/utils/index.tsx");
+/* harmony import */ var _renderTemplates__WEBPACK_IMPORTED_MODULE_42__ = __webpack_require__(/*! ./renderTemplates */ "./components/table/base/renderTemplates.tsx");
 
 
 
@@ -3308,11 +3372,12 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 
 
 
+
 var propsDotEmptyContentDeprecatedWarned = false;
 function warnPropsDotEmptyContentIsDeprecated() {
   if (!propsDotEmptyContentDeprecatedWarned) {
     propsDotEmptyContentDeprecatedWarned = true;
-    _utils__WEBPACK_IMPORTED_MODULE_40__["console"].warn('BaseTable props.emptyContent 已经过时，请使用 props.components.EmptyContent 来自定义数据为空时的表格表现');
+    _utils__WEBPACK_IMPORTED_MODULE_41__["console"].warn('BaseTable props.emptyContent 已经过时，请使用 props.components.EmptyContent 来自定义数据为空时的表格表现');
   }
 }
 var BaseTable = /*#__PURE__*/function (_React$Component) {
@@ -3355,7 +3420,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
       var tableBodyClassName = classnames__WEBPACK_IMPORTED_MODULE_26___default()(_styles__WEBPACK_IMPORTED_MODULE_38__["Classes"].tableBody, _styles__WEBPACK_IMPORTED_MODULE_38__["Classes"].horizontalScrollContainer);
 
       // 低版本Edge浏览器下也会出现双滚动条，这里设置overflow: 'hidden'，先去掉edge的方向键控制滚动条的功能
-      var virtualStyle = _utils__WEBPACK_IMPORTED_MODULE_40__["browserType"].isIE || _utils__WEBPACK_IMPORTED_MODULE_40__["browserType"].isEdge ? {
+      var virtualStyle = _utils__WEBPACK_IMPORTED_MODULE_41__["browserType"].isIE || _utils__WEBPACK_IMPORTED_MODULE_41__["browserType"].isEdge ? {
         overflow: 'hidden'
       } : {};
       if (dataSource.length === 0) {
@@ -3387,7 +3452,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
         bottomBlank = _info$verticalRenderR.bottomBlank,
         topBlank = _info$verticalRenderR.topBlank,
         bottomIndex = _info$verticalRenderR.bottomIndex;
-      var renderBody = Object(_renderTemplates__WEBPACK_IMPORTED_MODULE_41__["default"])('body');
+      var renderBody = Object(_renderTemplates__WEBPACK_IMPORTED_MODULE_42__["default"])('body');
       if (typeof renderBody === 'function') {
         return renderBody(info, _this.props, {
           rowProps: {
@@ -3449,7 +3514,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
     key: "getDoms",
     value: /** @deprecated BaseTable.getDoms() 已经过时，请勿调用 */
     function getDoms() {
-      _utils__WEBPACK_IMPORTED_MODULE_40__["console"].warn('[kd-table] BaseTable.getDoms() 已经过时');
+      _utils__WEBPACK_IMPORTED_MODULE_41__["console"].warn('[kd-table] BaseTable.getDoms() 已经过时');
       return this.domHelper;
     }
   }, {
@@ -3522,7 +3587,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
       var _this$props4 = this.props,
         stickyTop = _this$props4.stickyTop,
         hasHeader = _this$props4.hasHeader;
-      var renderHeader = Object(_renderTemplates__WEBPACK_IMPORTED_MODULE_41__["default"])('header');
+      var renderHeader = Object(_renderTemplates__WEBPACK_IMPORTED_MODULE_42__["default"])('header');
       var stickyRightOffset = this.hasScrollY ? this.getScrollBarWidth() : 0;
       if (typeof renderHeader === 'function') {
         return renderHeader(info, this.props, {
@@ -3549,7 +3614,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
     key: "updateOffsetX",
     value: function updateOffsetX(nextOffsetX) {
       if (this.lastInfo.useVirtual.horizontal) {
-        if (Math.abs(nextOffsetX - this.state.offsetX) >= _utils__WEBPACK_IMPORTED_MODULE_39__["OVERSCAN_SIZE"] / 2) {
+        if (Math.abs(nextOffsetX - this.state.offsetX) >= _utils__WEBPACK_IMPORTED_MODULE_40__["OVERSCAN_SIZE"] / 2) {
           this.setState({
             offsetX: nextOffsetX
           });
@@ -3612,7 +3677,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
         primaryKey = _this$props5.primaryKey,
         stickyBottom = _this$props5.stickyBottom;
       var stickyRightOffset = this.hasScrollY ? this.getScrollBarWidth() : 0;
-      var renderFooter = Object(_renderTemplates__WEBPACK_IMPORTED_MODULE_41__["default"])('footer');
+      var renderFooter = Object(_renderTemplates__WEBPACK_IMPORTED_MODULE_42__["default"])('footer');
       if (typeof renderFooter === 'function') {
         return renderFooter(info, this.props, {
           rowProps: {
@@ -3709,7 +3774,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "getScrollBarWidth",
     value: function getScrollBarWidth() {
-      return this.props.scrollbarWidth || Object(_utils__WEBPACK_IMPORTED_MODULE_39__["getScrollbarSize"])().width;
+      return this.props.scrollbarWidth || Object(_utils__WEBPACK_IMPORTED_MODULE_40__["getScrollbarSize"])().width;
     }
   }, {
     key: "getStickyScrollContainerStyle",
@@ -3755,19 +3820,19 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
         'sticky-header': isStickyHeader !== null && isStickyHeader !== void 0 ? isStickyHeader : isStickyHead,
         'has-footer': footerDataSource.length > 0,
         'sticky-footer': isStickyFooter
-      }, _styles__WEBPACK_IMPORTED_MODULE_38__["Classes"].artTableBordered, bordered), 'ie-polyfill-wrapper', _utils__WEBPACK_IMPORTED_MODULE_40__["browserType"].isIE), 'sticky-polyfill-wrapper', Object(_utils__WEBPACK_IMPORTED_MODULE_40__["isStickyUIDegrade"])()), className);
+      }, _styles__WEBPACK_IMPORTED_MODULE_38__["Classes"].artTableBordered, bordered), 'ie-polyfill-wrapper', _utils__WEBPACK_IMPORTED_MODULE_41__["browserType"].isIE), 'sticky-polyfill-wrapper', Object(_utils__WEBPACK_IMPORTED_MODULE_41__["isStickyUIDegrade"])()), className);
       var artTableWrapperProps = _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_18___default()({
         className: artTableWrapperClassName,
         style: style
-      }, _utils__WEBPACK_IMPORTED_MODULE_39__["STYLED_REF_PROP"], this.artTableWrapperRef);
+      }, _utils__WEBPACK_IMPORTED_MODULE_40__["STYLED_REF_PROP"], this.artTableWrapperRef);
       var tableProps = getTableProps() || {};
-      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_27___default.a.createElement(_styles__WEBPACK_IMPORTED_MODULE_38__["StyledArtTableWrapper"], artTableWrapperProps, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_27___default.a.createElement(_loading__WEBPACK_IMPORTED_MODULE_37__["default"], {
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_27___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_27___default.a.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_27___default.a.createElement(_globalStyleComponent__WEBPACK_IMPORTED_MODULE_39__["default"], null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_27___default.a.createElement(_styles__WEBPACK_IMPORTED_MODULE_38__["StyledArtTableWrapper"], artTableWrapperProps, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_27___default.a.createElement(_loading__WEBPACK_IMPORTED_MODULE_37__["default"], {
         visible: isLoading,
         LoadingIcon: components.LoadingIcon,
         LoadingContentWrapper: components.LoadingContentWrapper
       }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_27___default.a.createElement("div", _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_12___default()({}, tableProps, {
         className: classnames__WEBPACK_IMPORTED_MODULE_26___default()(_styles__WEBPACK_IMPORTED_MODULE_38__["Classes"].artTable, tableProps.className)
-      }), this.renderTableHeader(info), this.renderTableBody(info), this.renderTableFooter(info), this.renderLockShadows(info)), this.renderStickyScroll(info)));
+      }), this.renderTableHeader(info), this.renderTableBody(info), this.renderTableFooter(info), this.renderLockShadows(info)), this.renderStickyScroll(info))));
     }
   }, {
     key: "componentDidMount",
@@ -3784,7 +3849,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
         cssVariables = _this$props9.cssVariables,
         enableCSSVariables = _this$props9.enableCSSVariables,
         bordered = _this$props9.bordered;
-      Object(_utils__WEBPACK_IMPORTED_MODULE_39__["cssPolifill"])({
+      Object(_utils__WEBPACK_IMPORTED_MODULE_40__["cssPolifill"])({
         variables: cssVariables || {},
         enableCSSVariables: enableCSSVariables,
         bordered: bordered
@@ -3802,8 +3867,8 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
         cssVariables = _this$props13.cssVariables,
         enableCSSVariables = _this$props13.enableCSSVariables,
         bordered = _this$props13.bordered;
-      if (!Object(_utils__WEBPACK_IMPORTED_MODULE_39__["shallowEqual"])(prevProps === null || prevProps === void 0 ? void 0 : prevProps.cssVariables, (_this$props14 = this.props) === null || _this$props14 === void 0 ? void 0 : _this$props14.cssVariables)) {
-        Object(_utils__WEBPACK_IMPORTED_MODULE_39__["cssPolifill"])({
+      if (!Object(_utils__WEBPACK_IMPORTED_MODULE_40__["shallowEqual"])(prevProps === null || prevProps === void 0 ? void 0 : prevProps.cssVariables, (_this$props14 = this.props) === null || _this$props14 === void 0 ? void 0 : _this$props14.cssVariables)) {
+        Object(_utils__WEBPACK_IMPORTED_MODULE_40__["cssPolifill"])({
           variables: cssVariables || {},
           enableCSSVariables: enableCSSVariables,
           bordered: bordered
@@ -3835,7 +3900,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
         var prevHasFooter = prevProps.footerDataSource.length > 0;
         var currentHasFooter = this.props.footerDataSource.length > 0;
         if (!prevHasFooter && currentHasFooter) {
-          Object(_utils__WEBPACK_IMPORTED_MODULE_39__["getTableScrollFooterDOM"])(this.domHelper).scrollLeft = this.domHelper.virtual.scrollLeft;
+          Object(_utils__WEBPACK_IMPORTED_MODULE_40__["getTableScrollFooterDOM"])(this.domHelper).scrollLeft = this.domHelper.virtual.scrollLeft;
         }
       }
     }
@@ -3846,7 +3911,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
       var _this$domHelper2 = this.domHelper,
         virtual = _this$domHelper2.virtual,
         stickyScroll = _this$domHelper2.stickyScroll;
-      this.rootSubscription.add(_utils__WEBPACK_IMPORTED_MODULE_39__["throttledWindowResize$"].subscribe(function () {
+      this.rootSubscription.add(_utils__WEBPACK_IMPORTED_MODULE_40__["throttledWindowResize$"].subscribe(function () {
         _this2.updateStickyScroll();
         _this2.adjustNeedRenderLock();
       }));
@@ -3857,10 +3922,10 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
       var handleTableWrapperResize = function handleTableWrapperResize() {
         _this2.resizeSubject.next();
       };
-      this.resizeObserver = Object(_utils__WEBPACK_IMPORTED_MODULE_39__["addResizeObserver"])(this.domHelper.artTableWrapper, handleTableWrapperResize);
+      this.resizeObserver = Object(_utils__WEBPACK_IMPORTED_MODULE_40__["addResizeObserver"])(this.domHelper.artTableWrapper, handleTableWrapperResize);
 
       // 滚动同步
-      this.rootSubscription.add(Object(_utils__WEBPACK_IMPORTED_MODULE_39__["syncScrollLeft"])([Object(_utils__WEBPACK_IMPORTED_MODULE_39__["getTableScrollHeaderDOM"])(this.domHelper), virtual, Object(_utils__WEBPACK_IMPORTED_MODULE_39__["getTableScrollFooterDOM"])(this.domHelper), stickyScroll], function (scrollLeft) {
+      this.rootSubscription.add(Object(_utils__WEBPACK_IMPORTED_MODULE_40__["syncScrollLeft"])([Object(_utils__WEBPACK_IMPORTED_MODULE_40__["getTableScrollHeaderDOM"])(this.domHelper), virtual, Object(_utils__WEBPACK_IMPORTED_MODULE_40__["getTableScrollFooterDOM"])(this.domHelper), stickyScroll], function (scrollLeft) {
         _this2.syncHorizontalScroll(scrollLeft);
       }));
       var richVisibleRects$ = Object(_helpers_getRichVisibleRectsStream__WEBPACK_IMPORTED_MODULE_33__["getRichVisibleRectsStream"])(this.domHelper.virtual, this.props$.pipe(rxjs_operators__WEBPACK_IMPORTED_MODULE_29__["skip"](1), rxjs_operators__WEBPACK_IMPORTED_MODULE_29__["mapTo"]('structure-may-change')), this.props.virtualDebugLabel).pipe(rxjs_operators__WEBPACK_IMPORTED_MODULE_29__["shareReplay"]());
@@ -3868,7 +3933,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
       // 每当可见部分发生变化的时候，调整 loading icon 的未知（如果 loading icon 存在的话）
       this.rootSubscription.add(Object(rxjs__WEBPACK_IMPORTED_MODULE_28__["combineLatest"])([richVisibleRects$.pipe(rxjs_operators__WEBPACK_IMPORTED_MODULE_29__["map"](function (p) {
         return p.clipRect;
-      }), rxjs_operators__WEBPACK_IMPORTED_MODULE_29__["distinctUntilChanged"](_utils__WEBPACK_IMPORTED_MODULE_39__["shallowEqual"])), this.props$.pipe(rxjs_operators__WEBPACK_IMPORTED_MODULE_29__["startWith"](null), rxjs_operators__WEBPACK_IMPORTED_MODULE_29__["pairwise"](), rxjs_operators__WEBPACK_IMPORTED_MODULE_29__["filter"](function (_ref) {
+      }), rxjs_operators__WEBPACK_IMPORTED_MODULE_29__["distinctUntilChanged"](_utils__WEBPACK_IMPORTED_MODULE_40__["shallowEqual"])), this.props$.pipe(rxjs_operators__WEBPACK_IMPORTED_MODULE_29__["startWith"](null), rxjs_operators__WEBPACK_IMPORTED_MODULE_29__["pairwise"](), rxjs_operators__WEBPACK_IMPORTED_MODULE_29__["filter"](function (_ref) {
         var _ref2 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_11___default()(_ref, 2),
           prevProps = _ref2[0],
           props = _ref2[1];
@@ -3906,7 +3971,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
           return true;
         }
         // 因为 overscan 的存在，滚动较小的距离时不需要触发组件重渲染
-        return Math.abs(x.maxRenderWidth - y.maxRenderWidth) < _utils__WEBPACK_IMPORTED_MODULE_39__["OVERSCAN_SIZE"] / 2 && Math.abs(x.maxRenderHeight - y.maxRenderHeight) < _utils__WEBPACK_IMPORTED_MODULE_39__["OVERSCAN_SIZE"] / 2 && Math.abs(x.offsetY - y.offsetY) < _utils__WEBPACK_IMPORTED_MODULE_39__["OVERSCAN_SIZE"] / 2;
+        return Math.abs(x.maxRenderWidth - y.maxRenderWidth) < _utils__WEBPACK_IMPORTED_MODULE_40__["OVERSCAN_SIZE"] / 2 && Math.abs(x.maxRenderHeight - y.maxRenderHeight) < _utils__WEBPACK_IMPORTED_MODULE_40__["OVERSCAN_SIZE"] / 2 && Math.abs(x.offsetY - y.offsetY) < _utils__WEBPACK_IMPORTED_MODULE_40__["OVERSCAN_SIZE"] / 2;
       })).subscribe(function (sizeAndOffset) {
         _this2.setState(sizeAndOffset);
       }));
@@ -4022,7 +4087,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
         flat = _this$lastInfo2.flat,
         hasLockColumn = _this$lastInfo2.hasLockColumn;
       if (hasLockColumn) {
-        var sumOfColWidth = Object(_utils__WEBPACK_IMPORTED_MODULE_39__["sum"])(flat.full.map(function (col) {
+        var sumOfColWidth = Object(_utils__WEBPACK_IMPORTED_MODULE_40__["sum"])(flat.full.map(function (col) {
           return col.width;
         }));
         var nextNeedRenderLock = sumOfColWidth > this.domHelper.artTable.clientWidth;
@@ -4287,10 +4352,10 @@ function syncScrollLeft(elements, callback) {
   return subscription;
 }
 
-/**
- * Performs equality by iterating through keys on an object and returning false
- * when any key has values which are not strictly equal between the arguments.
- * Returns true when the values of all keys are strictly equal.
+/**
+ * Performs equality by iterating through keys on an object and returning false
+ * when any key has values which are not strictly equal between the arguments.
+ * Returns true when the values of all keys are strictly equal.
  */
 function shallowEqual(objA, objB) {
   var hasOwnProperty = Object.prototype.hasOwnProperty;
@@ -4669,6 +4734,22 @@ var internals = {
 
 /***/ }),
 
+/***/ "./components/table/pipeline/const.ts":
+/*!********************************************!*\
+  !*** ./components/table/pipeline/const.ts ***!
+  \********************************************/
+/*! exports provided: FeatureName */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FeatureName", function() { return FeatureName; });
+var FeatureName = {
+  rowDrag: 'rowDrag'
+};
+
+/***/ }),
+
 /***/ "./components/table/pipeline/features/autoFill.tsx":
 /*!*********************************************************!*\
   !*** ./components/table/pipeline/features/autoFill.tsx ***!
@@ -6554,6 +6635,125 @@ function getCopyItem(v) {
 
 /***/ }),
 
+/***/ "./components/table/pipeline/features/featureApi/RowDragApi.ts":
+/*!*********************************************************************!*\
+  !*** ./components/table/pipeline/features/featureApi/RowDragApi.ts ***!
+  \*********************************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return RowDragApi; });
+/* harmony import */ var _babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/classCallCheck */ "./node_modules/@babel/runtime/helpers/classCallCheck.js");
+/* harmony import */ var _babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/createClass */ "./node_modules/@babel/runtime/helpers/createClass.js");
+/* harmony import */ var _babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ "./node_modules/@babel/runtime/helpers/defineProperty.js");
+/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var core_js_modules_es_array_filter_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! core-js/modules/es.array.filter.js */ "./node_modules/core-js/modules/es.array.filter.js");
+/* harmony import */ var core_js_modules_es_array_filter_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_filter_js__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! core-js/modules/es.object.to-string.js */ "./node_modules/core-js/modules/es.object.to-string.js");
+/* harmony import */ var core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_4__);
+
+
+
+
+
+var ROW_DRAG_STATUS = 'rowDragStatus';
+var RowDragApi = /*#__PURE__*/function () {
+  function RowDragApi(pipeline) {
+    _babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0___default()(this, RowDragApi);
+    _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_2___default()(this, "pipeline", void 0);
+    _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_2___default()(this, "rowDropZoneParams", void 0);
+    _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_2___default()(this, "rowDropZones", void 0);
+    _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_2___default()(this, "dragStatus", void 0);
+    this.pipeline = pipeline;
+    this.rowDropZoneParams = null;
+    this.rowDropZones = [];
+    this.dragStatus = 'finished';
+  }
+  return _babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_1___default()(RowDragApi, [{
+    key: "getRowDropZoneParams",
+    value: function getRowDropZoneParams() {
+      return this.rowDropZoneParams;
+    }
+  }, {
+    key: "setRowDropZoneParams",
+    value: function setRowDropZoneParams(params) {
+      this.rowDropZoneParams = params;
+    }
+  }, {
+    key: "addRowDropZone",
+    value: function addRowDropZone(rowDropZone) {
+      if (!rowDropZone || !(rowDropZone !== null && rowDropZone !== void 0 && rowDropZone.getContainer())) {
+        return;
+      }
+      var isExist = this.rowDropZones.some(function (zone) {
+        return zone.getContainer() === rowDropZone.getContainer();
+      });
+      if (isExist) {
+        return;
+      }
+      this.rowDropZones.push(rowDropZone);
+    }
+  }, {
+    key: "getRowDropZone",
+    value: function getRowDropZone() {
+      return this.rowDropZones;
+    }
+  }, {
+    key: "removeRowDropZone",
+    value: function removeRowDropZone(rowDropZone) {
+      this.rowDropZones = this.rowDropZones.filter(function (zone) {
+        return zone.getContainer() !== rowDropZone.getContainer();
+      });
+    }
+  }, {
+    key: "setDragStatus",
+    value: function setDragStatus(status) {
+      var currentStatus = this.dragStatus;
+      this.dragStatus = status;
+      if (currentStatus !== status) {
+        this.pipeline.setStateAtKey(ROW_DRAG_STATUS, status);
+      }
+    }
+  }, {
+    key: "getDragStatus",
+    value: function getDragStatus() {
+      return this.dragStatus;
+    }
+  }]);
+}();
+
+
+/***/ }),
+
+/***/ "./components/table/pipeline/features/featureApi/utils.ts":
+/*!****************************************************************!*\
+  !*** ./components/table/pipeline/features/featureApi/utils.ts ***!
+  \****************************************************************/
+/*! exports provided: createFeatureApi */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "createFeatureApi", function() { return createFeatureApi; });
+/* harmony import */ var _RowDragApi__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./RowDragApi */ "./components/table/pipeline/features/featureApi/RowDragApi.ts");
+/* harmony import */ var _const__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../const */ "./components/table/pipeline/const.ts");
+
+
+function createFeatureApi(type, pipeline) {
+  switch (type) {
+    case _const__WEBPACK_IMPORTED_MODULE_1__["FeatureName"].rowDrag:
+      return new _RowDragApi__WEBPACK_IMPORTED_MODULE_0__["default"](pipeline);
+    default:
+      break;
+  }
+}
+
+/***/ }),
+
 /***/ "./components/table/pipeline/features/filter/DefaultFilterContent.tsx":
 /*!****************************************************************************!*\
   !*** ./components/table/pipeline/features/filter/DefaultFilterContent.tsx ***!
@@ -6885,7 +7085,7 @@ function Filter(_ref2) {
   }, displayFilterIcon || /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(_DefaultFilterIcon__WEBPACK_IMPORTED_MODULE_10__["default"], {
     width: size,
     height: size
-  })), showPanel && /*#__PURE__*/Object(react_dom__WEBPACK_IMPORTED_MODULE_4__["createPortal"])( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(Panel, {
+  })), showPanel && /*#__PURE__*/Object(react_dom__WEBPACK_IMPORTED_MODULE_4__["createPortal"])(/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(Panel, {
     ele: hideFilterPopupHeader ? iconWrapRef.current : iconRef.current,
     filterIcon: displayFilterIcon,
     hidePanel: hidePanel,
@@ -8544,27 +8744,44 @@ function rowDetail() {
 /*!********************************************************!*\
   !*** ./components/table/pipeline/features/rowDrag.tsx ***!
   \********************************************************/
-/*! exports provided: ROW_DRAG_COLUMN_CODE, rowDragKey, rowDrag */
+/*! exports provided: ROW_DRAG_COLUMN_CODE, rowDragKey, rowDragOptionsKey, rowDrag */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ROW_DRAG_COLUMN_CODE", function() { return ROW_DRAG_COLUMN_CODE; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "rowDragKey", function() { return rowDragKey; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "rowDragOptionsKey", function() { return rowDragOptionsKey; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "rowDrag", function() { return rowDrag; });
 /* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ "./node_modules/@babel/runtime/helpers/defineProperty.js");
 /* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var core_js_modules_es_array_concat_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! core-js/modules/es.array.concat.js */ "./node_modules/core-js/modules/es.array.concat.js");
 /* harmony import */ var core_js_modules_es_array_concat_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_concat_js__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var core_js_modules_es_array_slice_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! core-js/modules/es.array.slice.js */ "./node_modules/core-js/modules/es.array.slice.js");
-/* harmony import */ var core_js_modules_es_array_slice_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_slice_js__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var rxjs__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! rxjs */ "./node_modules/rxjs/_esm5/index.js");
-/* harmony import */ var rxjs_operators__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! rxjs/operators */ "./node_modules/rxjs/_esm5/operators/index.js");
-/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! classnames */ "./node_modules/classnames/index.js");
-/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_6__);
-/* harmony import */ var _base_styles__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../base/styles */ "./components/table/base/styles.ts");
+/* harmony import */ var core_js_modules_es_array_find_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! core-js/modules/es.array.find.js */ "./node_modules/core-js/modules/es.array.find.js");
+/* harmony import */ var core_js_modules_es_array_find_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_find_js__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var core_js_modules_es_array_find_index_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! core-js/modules/es.array.find-index.js */ "./node_modules/core-js/modules/es.array.find-index.js");
+/* harmony import */ var core_js_modules_es_array_find_index_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_find_index_js__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var core_js_modules_es_array_slice_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! core-js/modules/es.array.slice.js */ "./node_modules/core-js/modules/es.array.slice.js");
+/* harmony import */ var core_js_modules_es_array_slice_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_slice_js__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! core-js/modules/es.object.to-string.js */ "./node_modules/core-js/modules/es.object.to-string.js");
+/* harmony import */ var core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_5__);
+/* harmony import */ var core_js_modules_es_regexp_to_string_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! core-js/modules/es.regexp.to-string.js */ "./node_modules/core-js/modules/es.regexp.to-string.js");
+/* harmony import */ var core_js_modules_es_regexp_to_string_js__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_regexp_to_string_js__WEBPACK_IMPORTED_MODULE_6__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_7__);
+/* harmony import */ var rxjs__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! rxjs */ "./node_modules/rxjs/_esm5/index.js");
+/* harmony import */ var rxjs_operators__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! rxjs/operators */ "./node_modules/rxjs/_esm5/operators/index.js");
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! classnames */ "./node_modules/classnames/index.js");
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_10___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_10__);
+/* harmony import */ var _base_styles__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../base/styles */ "./components/table/base/styles.ts");
+/* harmony import */ var _const__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../const */ "./components/table/pipeline/const.ts");
+/* harmony import */ var _internals__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../../internals */ "./components/table/internals.ts");
+
+
+
+
+
+
 
 
 
@@ -8575,7 +8792,9 @@ __webpack_require__.r(__webpack_exports__);
 
 var ROW_DRAG_COLUMN_CODE = '$_row_drag_column_&';
 var rowDragKey = 'rowDragKey';
+var rowDragOptionsKey = 'rowDragOptions';
 var SCROLL_OFFSET = 30;
+var SCROLL_START_OFFSET = 20;
 var defaultRowDragColumn = {
   name: '拖拽列',
   code: ROW_DRAG_COLUMN_CODE,
@@ -8585,18 +8804,18 @@ var defaultRowDragColumn = {
   align: 'center',
   getCellProps: function getCellProps(value, row, rowIndex) {
     return {
-      className: classnames__WEBPACK_IMPORTED_MODULE_6___default()(_base_styles__WEBPACK_IMPORTED_MODULE_7__["Classes"].rowDragCell)
+      className: classnames__WEBPACK_IMPORTED_MODULE_10___default()(_base_styles__WEBPACK_IMPORTED_MODULE_11__["Classes"].rowDragCell)
     };
   },
   render: function render(value, row, rowIndex) {
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("svg", {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_7___default.a.createElement("svg", {
       viewBox: "0 0 1024 1024",
       version: "1.1",
       xmlns: "http://www.w3.org/1999/xlink",
       "data-icon": "drag",
       width: "16",
       height: "16"
-    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("path", {
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_7___default.a.createElement("path", {
       d: "M298.688 192a64 64 0 1 0 128 0 64 64 0 0 0-128 0z m298.624 0a64 64 0 1 0 128 0 64 64 0 0 0-128 0zM298.688 512a64 64 0 1 0 128 0 64 64 0 0 0-128 0z m298.624 0a64 64 0 1 0 128 0 64 64 0 0 0-128 0z m-298.624 320a64 64 0 1 0 128 0 64 64 0 0 0-128 0z m298.624 0a64 64 0 1 0 128 0 64 64 0 0 0-128 0z",
       "p-id": "4278"
     }));
@@ -8606,165 +8825,283 @@ function rowDrag(opt) {
   return function rowDragStep(pipeline) {
     var tableBody = pipeline.ref.current.domHelper && pipeline.ref.current.domHelper.tableBody;
     var artTable = pipeline.ref.current.domHelper && pipeline.ref.current.domHelper.artTable;
+    var rowDragApi = pipeline.addFeatureApi(_const__WEBPACK_IMPORTED_MODULE_12__["FeatureName"].rowDrag);
+    pipeline.setFeatureOptions(rowDragOptionsKey, opt);
     if (!tableBody) return pipeline;
     var dataSource = pipeline.getDataSource();
-    var rowHeight = (opt === null || opt === void 0 ? void 0 : opt.rowHeight) || 48;
-    var handleDragStrat = function handleDragStrat(event) {
-      var _opt$onDragStart;
-      // 开始拖拽
-      artTable.classList.add(classnames__WEBPACK_IMPORTED_MODULE_6___default()(_base_styles__WEBPACK_IMPORTED_MODULE_7__["Classes"].rowDragging));
-      opt === null || opt === void 0 || (_opt$onDragStart = opt.onDragStart) === null || _opt$onDragStart === void 0 || _opt$onDragStart.call(opt, event);
-    };
-    var handleDragMove = function handleDragMove(event) {
-      var _opt$onDragMove;
-      opt === null || opt === void 0 || (_opt$onDragMove = opt.onDragMove) === null || _opt$onDragMove === void 0 || _opt$onDragMove.call(opt, event);
-      pipeline.setStateAtKey(rowDragKey, event);
-    };
-    var handleDragEnd = function handleDragEnd(event, isValid) {
-      artTable.classList.remove(classnames__WEBPACK_IMPORTED_MODULE_6___default()(_base_styles__WEBPACK_IMPORTED_MODULE_7__["Classes"].rowDragging));
-      pipeline.setStateAtKey(rowDragKey, event);
-      // 超出拖拽范围不触发dragend事件
-      if (isValid) {
-        var _opt$onDragEnd;
-        opt === null || opt === void 0 || (_opt$onDragEnd = opt.onDragEnd) === null || _opt$onDragEnd === void 0 || _opt$onDragEnd.call(opt, event);
+    var getRowDragEvent = function getRowDragEvent(dropTargetEvent, isFinished) {
+      var dragItem = dropTargetEvent.dragItem,
+        x = dropTargetEvent.x,
+        y = dropTargetEvent.y,
+        dropZoneTarget = dropTargetEvent.dropZoneTarget,
+        startDropZoneTagret = dropTargetEvent.startDropZoneTagret,
+        commonParams = dropTargetEvent.commonParams,
+        startCommonParams = dropTargetEvent.startCommonParams,
+        event = dropTargetEvent.event,
+        dropZoneTableParams = dropTargetEvent.dropZoneTableParams;
+      var getDataSource = dropZoneTableParams.getDataSource,
+        getTreeModeOptions = dropZoneTableParams.getTreeModeOptions,
+        getRowDragOptions = dropZoneTableParams.getRowDragOptions;
+      var dataSource = getDataSource();
+      var treeModeOptions = getTreeModeOptions();
+      var rowDragOptions = getRowDragOptions();
+      var allowDragIntoRow = !!treeModeOptions && (rowDragOptions === null || rowDragOptions === void 0 ? void 0 : rowDragOptions.allowDragIntoRow);
+      var isLeave = !isMouseOnDropTarget(event, dropZoneTarget);
+      var overIndex = -1;
+      var direction = 'bottom';
+      if (!isLeave) {
+        var overDragItem = getDragRowItem(event.target, dropZoneTarget, dataSource);
+        if (overDragItem) {
+          var rowIndex = overDragItem.rowIndex,
+            cell = overDragItem.cell;
+          overIndex = rowIndex;
+          direction = getDirection(cell, event.clientY, allowDragIntoRow);
+        }
       }
-    };
-    var getDragEvent = function getDragEvent(startRowInfo, endRowInfo, _ref) {
-      var isFinished = _ref.isFinished,
-        _ref$dragPosition = _ref.dragPosition,
-        dragPosition = _ref$dragPosition === void 0 ? 'bottom' : _ref$dragPosition;
+      var overRow = overIndex >= 0 ? dataSource[overIndex] : null;
       return {
-        startRowIndex: startRowInfo.rowIndex,
-        startRow: startRowInfo.row,
-        endRowIndex: endRowInfo.rowIndex,
-        endRow: endRowInfo.row,
-        dragPosition: dragPosition,
-        isFinished: isFinished
+        startRowIndex: dragItem.rowIndex,
+        startRow: dragItem.row,
+        endRowIndex: overIndex,
+        endRow: overRow,
+        startDropZoneTagret: startDropZoneTagret,
+        startCommonParams: startCommonParams,
+        commonParams: commonParams,
+        dropZoneTarget: dropZoneTarget,
+        event: event,
+        dragPosition: direction,
+        isFinished: isFinished,
+        x: x,
+        y: y
       };
     };
-    var updateScrollPosition = function updateScrollPosition(mouseMoveEvent) {
-      if (opt !== null && opt !== void 0 && opt.suppressScrollMove) return;
-      var clientY = mouseMoveEvent.clientY;
-      var tableBodyClientRect = tableBody.getBoundingClientRect();
-      var top = tableBodyClientRect.top,
-        height = tableBodyClientRect.height;
-      if (clientY + SCROLL_OFFSET >= top + height) {
-        pipeline.ref.current.domHelper.tableBody.scrollTop += SCROLL_OFFSET;
-      }
-      if (clientY + SCROLL_OFFSET <= top) {
-        pipeline.ref.current.domHelper.tableBody.scrollTop -= SCROLL_OFFSET;
+    var onDragging = function onDragging(event) {
+      var _opt$onDragMove;
+      var rowDragEvent = getRowDragEvent(event, false);
+      opt === null || opt === void 0 || (_opt$onDragMove = opt.onDragMove) === null || _opt$onDragMove === void 0 || _opt$onDragMove.call(opt, rowDragEvent);
+      pipeline.setStateAtKey(rowDragKey, rowDragEvent);
+    };
+    var onDragStop = function onDragStop(event) {
+      var _opt$onDragEnd;
+      var rowDragEvent = getRowDragEvent(event, true);
+      pipeline.setStateAtKey(rowDragKey, rowDragEvent);
+      opt === null || opt === void 0 || (_opt$onDragEnd = opt.onDragEnd) === null || _opt$onDragEnd === void 0 || _opt$onDragEnd.call(opt, rowDragEvent);
+    };
+    var onDragStart = function onDragStart(event) {
+      var _opt$onDragStart;
+      var rowDragEvent = getRowDragEvent(event, false);
+      opt === null || opt === void 0 || (_opt$onDragStart = opt.onDragStart) === null || _opt$onDragStart === void 0 || _opt$onDragStart.call(opt, rowDragEvent);
+    };
+    var onDragLeave = function onDragLeave(event) {
+      var _opt$onDragLeave;
+      var rowDragEvent = getRowDragEvent(event, false);
+      pipeline.setStateAtKey(rowDragKey, rowDragEvent);
+      opt === null || opt === void 0 || (_opt$onDragLeave = opt.onDragLeave) === null || _opt$onDragLeave === void 0 || _opt$onDragLeave.call(opt, rowDragEvent);
+    };
+    var onDragEnter = function onDragEnter(event) {
+      var _opt$onDragEnter;
+      var rowDragEvent = getRowDragEvent(event, false);
+      pipeline.setStateAtKey(rowDragKey, rowDragEvent);
+      opt === null || opt === void 0 || (_opt$onDragEnter = opt.onDragEnter) === null || _opt$onDragEnter === void 0 || _opt$onDragEnter.call(opt, rowDragEvent);
+    };
+    var currentDropZone = {
+      getContainer: function getContainer() {
+        var lastPipeline = pipeline.getLastPipeline();
+        return lastPipeline.ref.current.domHelper.tableBody;
+      },
+      onDragEnter: onDragEnter,
+      onDragLeave: onDragLeave,
+      onDragging: onDragging,
+      onDragStop: onDragStop,
+      isTable: true,
+      tableParams: {
+        getDataSource: function getDataSource() {
+          var lastPipeline = pipeline.getLastPipeline();
+          return lastPipeline.getDataSource();
+        },
+        getTreeModeOptions: function getTreeModeOptions() {
+          var lastPipeline = pipeline.getLastPipeline();
+          return lastPipeline.getFeatureOptions('treeModeOptions');
+        },
+        getRowDragOptions: function getRowDragOptions() {
+          var lastPipeline = pipeline.getLastPipeline();
+          return lastPipeline.getFeatureOptions('rowDragOptions');
+        }
       }
     };
-    var onMouseDown = function onMouseDown(mouseDownEvent) {
+    var onMouseDown = function onMouseDown(event) {
       var _opt$isDisabled;
-      var startRowInfo = getTargetRowInfo(mouseDownEvent.target, tableBody, dataSource);
-      var endRowInfo = startRowInfo;
-      if (!startRowInfo || startRowInfo.code !== rowDragColumn.code) return;
-      if (opt !== null && opt !== void 0 && (_opt$isDisabled = opt.isDisabled) !== null && _opt$isDisabled !== void 0 && _opt$isDisabled.call(opt, startRowInfo.row, startRowInfo.rowIndex)) return;
-
-      // 默认拖拽插入的位置是向下
-      var dragPosition = 'bottom';
-      var isOutOfRange = false;
+      var mouseDownEvent = event.nativeEvent;
+      var startDataItem = getDragRowItem(mouseDownEvent.target, tableBody, dataSource);
+      if (!startDataItem || startDataItem.code !== rowDragColumn.code) return;
+      if (opt !== null && opt !== void 0 && (_opt$isDisabled = opt.isDisabled) !== null && _opt$isDisabled !== void 0 && _opt$isDisabled.call(opt, startDataItem.row, startDataItem.rowIndex)) return;
       var isValidDrag = false;
-      var dragStartEvent = getDragEvent(startRowInfo, endRowInfo, {
-        isFinished: false,
-        dragPosition: 'bottom'
-      });
-      handleDragStrat(dragStartEvent);
-      var tableWidth = tableBody.clientWidth;
-      var startRowRects = startRowInfo.cell.getBoundingClientRect();
-      // 光标位置距离初始拖拽行的偏移量
-      var mouseDownClientY = mouseDownEvent.clientY;
-      var startOffset = mouseDownEvent.clientY - startRowRects.top;
-      var dragElement = createDragElement(startRowRects, tableWidth, rowHeight);
-      // 可拖拽的范围
-      var dragRange = getDragRange(tableBody, {
-        startOffset: startOffset,
-        rowHeight: rowHeight
-      });
-      var mousePosition = {
-        x: mouseDownEvent.clientX,
-        y: mouseDownEvent.clientY
+      var isDragging = false;
+      var dragElement = null;
+      var dragLine = null;
+      var lastDropTarget = null;
+      var timeoutId = null;
+      var intervalId = null;
+      var expandRowTimeoutId = null;
+      var expandRowCallBackList = [];
+      var updateScrollPosition = function updateScrollPosition(tableBody, mouseMoveEvent) {
+        if (opt !== null && opt !== void 0 && opt.suppressScrollMove) return;
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+        }
+        if (intervalId) {
+          clearInterval(intervalId);
+        }
+        var moveOffset = getScrollMoveOffset(tableBody, mouseMoveEvent);
+        if (moveOffset === 0) {
+          return;
+        }
+        timeoutId = setTimeout(function () {
+          intervalId = setInterval(function () {
+            tableBody.scrollTop += moveOffset;
+          }, 100);
+        }, 500);
+      };
+      var handleDragStart = function handleDragStart(mouseDownEvent) {
+        var _opt$rowDragText;
+        dragElement = createDragElement(mouseDownEvent, tableBody); // 创建拖拽悬浮框
+        var isTreeTable = !!pipeline.getFeatureOptions('treeModeOptions');
+        dragLine = createDragLine(isTreeTable); // 创建拖拽插入指示线
+        var dragText = opt !== null && opt !== void 0 && opt.rowDragText ? opt === null || opt === void 0 || (_opt$rowDragText = opt.rowDragText) === null || _opt$rowDragText === void 0 ? void 0 : _opt$rowDragText.call(opt, startDataItem.row, startDataItem.rowIndex) : "\u7B2C".concat(startDataItem.rowIndex, "\u884C\u5185\u5BB9");
+        setDragText(dragElement, dragText); // 设置悬浮框显示文本
+        artTable.classList.add(classnames__WEBPACK_IMPORTED_MODULE_10___default()(_base_styles__WEBPACK_IMPORTED_MODULE_11__["Classes"].rowDragging));
+        rowDragApi.setDragStatus('start');
+        var dragEvent = createDropTargetEvent(currentDropZone, mouseDownEvent, startDataItem, currentDropZone);
+        onDragStart(dragEvent);
+      };
+      var handleDragMove = function handleDragMove(mouseMoveEvent) {
+        positionDragElemment(dragElement, mouseMoveEvent); // 更新拖拽悬浮框位置
+        rowDragApi.setDragStatus('dragging');
+        setDragElementIcon(dragElement, 'move');
+        var rowDropZones = rowDragApi.getRowDropZone();
+        var validDropZones = rowDropZones.concat(currentDropZone); // 可放置区域加上自身
+        var dropTarget = validDropZones.find(function (zone) {
+          return isMouseOnDropTarget(mouseMoveEvent, zone.getContainer());
+        }) || null;
+        if (dropTarget !== lastDropTarget) {
+          // 拖拽离开表格
+          if (lastDropTarget !== null && dropTarget === null) {
+            if (lastDropTarget.onDragLeave) {
+              setDragElementIcon(dragElement, 'notAllowed');
+              hiddenDragLine(dragLine);
+              var dragEvent = createDropTargetEvent(lastDropTarget, mouseMoveEvent, startDataItem, currentDropZone);
+              lastDropTarget.onDragLeave(dragEvent);
+            }
+          }
+
+          // 拖拽进入表格
+          if (lastDropTarget === null && dropTarget !== null) {
+            if (dropTarget.onDragEnter) {
+              setDragElementIcon(dragElement, 'move');
+              if (dropTarget.isTable) {
+                showDragLine(dragLine);
+              }
+              var _dragEvent = createDropTargetEvent(dropTarget, mouseMoveEvent, startDataItem, currentDropZone);
+              dropTarget.onDragEnter(_dragEvent);
+            }
+          }
+          lastDropTarget = dropTarget;
+        }
+        if (dropTarget) {
+          var _dropTarget$tablePara;
+          // 拖拽区域在表格中，更新拖拽插入指示线位置
+          if (dropTarget.isTable) {
+            positionDragLine({
+              lineElement: dragLine,
+              dragZone: dropTarget,
+              event: mouseMoveEvent
+            });
+            updateScrollPosition(dropTarget.getContainer(), mouseMoveEvent); // 拖拽到底时让滚动条可以滚动
+          }
+
+          // 树形表格悬停1s展开对应行节点
+          if (dropTarget !== null && dropTarget !== void 0 && (_dropTarget$tablePara = dropTarget.tableParams) !== null && _dropTarget$tablePara !== void 0 && _dropTarget$tablePara.getTreeModeOptions()) {
+            if (expandRowTimeoutId) {
+              clearTimeout(expandRowTimeoutId);
+            }
+            expandRowTimeoutId = setTimeout(function () {
+              var treeModeOptions = dropTarget.tableParams.getTreeModeOptions();
+              var treeMetaKey = treeModeOptions.treeMetaKey,
+                onExpand = treeModeOptions.onExpand,
+                isExpanded = treeModeOptions.isExpanded,
+                onCollapse = treeModeOptions.onCollapse;
+              // 鼠标悬停所在的拖拽行信息
+              var dataSource = dropTarget.tableParams.getDataSource();
+              var dragItem = getDragRowItem(mouseMoveEvent.target, dropTarget.getContainer(), dataSource);
+              if (!dragItem) return;
+              var row = dragItem.row;
+              var rowKey = row[treeMetaKey].rowKey;
+              if (!isExpanded(rowKey)) {
+                onExpand(rowKey);
+                expandRowCallBackList.push(function () {
+                  return onCollapse(rowKey);
+                });
+              }
+            }, 1000);
+          }
+          if (dropTarget.onDragging) {
+            var _dragEvent2 = createDropTargetEvent(dropTarget, mouseMoveEvent, startDataItem, currentDropZone);
+            dropTarget.onDragging(_dragEvent2);
+          }
+        }
       };
-      var mousemove$ = Object(rxjs__WEBPACK_IMPORTED_MODULE_4__["fromEvent"])(window, 'mousemove');
-      var mouseup$ = Object(rxjs__WEBPACK_IMPORTED_MODULE_4__["fromEvent"])(window, 'mouseup');
-      var scrollCallback = function scrollCallback(event) {
-        // 在当前表格内滚动不处理
-        if (event.target === tableBody) return;
-        dragRange = getDragRange(tableBody, {
-          startOffset: startOffset,
-          rowHeight: rowHeight
+      var handleDragStop = function handleDragStop(mouseUpEvent) {
+        removeElement(dragElement);
+        removeElement(dragLine);
+        artTable.classList.remove(classnames__WEBPACK_IMPORTED_MODULE_10___default()(_base_styles__WEBPACK_IMPORTED_MODULE_11__["Classes"].rowDragging));
+        rowDragApi.setDragStatus('finished');
+        clearTimeout(timeoutId);
+        clearInterval(intervalId);
+        clearTimeout(expandRowTimeoutId);
+        while (expandRowCallBackList.length > 0) {
+          var callback = expandRowCallBackList.pop();
+          callback();
+        }
+        var rowDropZones = rowDragApi.getRowDropZone();
+        var validDropZones = rowDropZones.concat(currentDropZone);
+        var dropTarget = validDropZones.find(function (zone) {
+          return isMouseOnDropTarget(mouseUpEvent, zone.getContainer());
         });
-        var isOutOfRange = isOutOfDragRange(mousePosition, dragRange);
-        updateCurSorStyle(isOutOfRange);
+        if (dropTarget && dropTarget.onDragStop) {
+          var dragEvent = createDropTargetEvent(dropTarget, mouseUpEvent, startDataItem, currentDropZone);
+          dropTarget.onDragStop(dragEvent);
+        }
       };
-      document.addEventListener('scroll', scrollCallback, true);
-      var rowDrag$ = mousemove$.pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_5__["filter"])(function (mouseMoveEvent) {
+      var mousemove$ = Object(rxjs__WEBPACK_IMPORTED_MODULE_8__["fromEvent"])(window, 'mousemove');
+      var mouseup$ = Object(rxjs__WEBPACK_IMPORTED_MODULE_8__["fromEvent"])(window, 'mouseup');
+      var rowDragMove$ = mousemove$.pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_9__["filter"])(function (mouseMoveEvent) {
         var mouseMoveClientY = mouseMoveEvent.clientY;
+        var mouseDownClientY = mouseDownEvent.clientY;
         // 上下移动偏移量大于5才是有效的拖拽
         if (Math.abs(mouseMoveClientY - mouseDownClientY) > 5) {
           isValidDrag = true;
         }
         return isValidDrag;
-      }), Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_5__["map"])(function (mouseMoveEvent) {
-        var clientX = mouseMoveEvent.clientX,
-          clientY = mouseMoveEvent.clientY;
-        var tagretRow = getTargetRowInfo(mouseMoveEvent.target, tableBody, dataSource);
-        if (tagretRow) {
-          endRowInfo = tagretRow;
-        }
-        var targetRowRects = endRowInfo.cell.getBoundingClientRect();
-
-        // 判断拖拽插入的位置，拖拽框上边框位于目标行之上则向上插入，否则向下插入
-        var isMoveToTop = clientY - startOffset < targetRowRects.top;
-        dragPosition = isMoveToTop ? 'top' : 'bottom';
-        isOutOfRange = isOutOfDragRange({
-          x: clientX,
-          y: clientY
-        }, dragRange);
-        mousePosition = {
-          x: clientX,
-          y: clientY
-        };
-        updateScrollPosition(mouseMoveEvent); // 拖拽到底时让滚动条可以滚动
-        updateDragElementPosition(dragElement, dragRange, {
-          x: clientX,
-          y: clientY,
-          startOffset: startOffset
-        });
-        updateCurSorStyle(isOutOfRange);
-        return {
-          startRowInfo: startRowInfo,
-          endRowInfo: endRowInfo,
-          dragPosition: dragPosition
-        };
-      }), Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_5__["takeUntil"])(mouseup$));
-      rowDrag$.subscribe({
-        next: function next(_ref2) {
-          var startRowInfo = _ref2.startRowInfo,
-            endRowInfo = _ref2.endRowInfo,
-            dragPosition = _ref2.dragPosition;
-          var dragMoveEvent = getDragEvent(startRowInfo, endRowInfo, {
-            isFinished: false,
-            dragPosition: dragPosition
-          });
-          handleDragMove(dragMoveEvent);
-        },
-        complete: function complete() {
-          var dragEndEvent = getDragEvent(startRowInfo, endRowInfo, {
-            isFinished: true,
-            dragPosition: dragPosition
-          });
-          var isValid = isValidDrag && !isOutOfRange;
-          handleDragEnd(dragEndEvent, isValid);
-          removeDragElement(dragElement);
-          removeCurSorStyle();
-          document.removeEventListener('scroll', scrollCallback, true);
+      }), Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_9__["map"])(function (mouseMoveEvent) {
+        if (!isDragging) {
+          isDragging = true;
+          handleDragStart(mouseDownEvent);
+          handleDragMove(mouseDownEvent);
+        }
+        handleDragMove(mouseMoveEvent);
+      }), Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_9__["takeUntil"])(mouseup$));
+      rowDragMove$.subscribe();
+      var rowDragEnd$ = mouseup$.pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_9__["map"])(function (mouseUpEvent) {
+        handleDragStop(mouseUpEvent);
+      })).subscribe({
+        next: function next() {
+          rowDragEnd$.unsubscribe();
         }
       });
     };
     var rowDragColumn = (opt === null || opt === void 0 ? void 0 : opt.rowDragColumn) || defaultRowDragColumn;
     pipeline.setFeatureOptions('rowDragColumnKey', rowDragColumn.code);
+    rowDragApi.setRowDropZoneParams(currentDropZone);
     var nextColumns = pipeline.getColumns().slice();
     nextColumns.unshift(rowDragColumn);
     pipeline.columns(nextColumns);
@@ -8773,13 +9110,26 @@ function rowDrag(opt) {
     });
     pipeline.appendRowPropsGetter(function (row, rowIndex) {
       var rowDragEvent = pipeline.getStateAtKey(rowDragKey) || {};
+      var dragStatus = rowDragApi.getDragStatus();
       var startRowIndex = rowDragEvent.startRowIndex,
         endRowIndex = rowDragEvent.endRowIndex,
+        endRow = rowDragEvent.endRow,
         isFinished = rowDragEvent.isFinished,
         dragPosition = rowDragEvent.dragPosition;
       var isFooterCell = row[pipeline.getFeatureOptions('footerRowMetaKey')];
-      if (isFooterCell || isFinished || rowIndex !== startRowIndex && rowIndex !== endRowIndex) return;
-      var className = classnames__WEBPACK_IMPORTED_MODULE_6___default()(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()({}, _base_styles__WEBPACK_IMPORTED_MODULE_7__["Classes"].rowDragStart, rowIndex === startRowIndex), _base_styles__WEBPACK_IMPORTED_MODULE_7__["Classes"].rowDragEnd, rowIndex === endRowIndex), _base_styles__WEBPACK_IMPORTED_MODULE_7__["Classes"].rowDragEndToTop, rowIndex === endRowIndex && dragPosition === 'top'), _base_styles__WEBPACK_IMPORTED_MODULE_7__["Classes"].rowDragEndToBottom, rowIndex === endRowIndex && dragPosition === 'bottom'));
+      var treeModeOptions = pipeline.getFeatureOptions('treeModeOptions');
+      var isTreeTable = !!treeModeOptions;
+      if (isFooterCell || isFinished || !isTreeTable && rowIndex !== startRowIndex && rowIndex !== endRowIndex) return;
+      var parentRowKeyIndex = -1;
+      if (isTreeTable && endRow) {
+        var treeMetaKey = treeModeOptions.treeMetaKey;
+        var parentRowKey = endRow[treeMetaKey].parentRowKey;
+        var primaryKey = pipeline.ensurePrimaryKey('rowDrag');
+        parentRowKeyIndex = pipeline.getDataSource().findIndex(function (row) {
+          return _internals__WEBPACK_IMPORTED_MODULE_13__["internals"].safeGetRowKey(primaryKey, row, -1) === parentRowKey;
+        });
+      }
+      var className = classnames__WEBPACK_IMPORTED_MODULE_10___default()(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()({}, _base_styles__WEBPACK_IMPORTED_MODULE_11__["Classes"].rowDragStart, rowIndex === startRowIndex && dragStatus !== 'finished'), _base_styles__WEBPACK_IMPORTED_MODULE_11__["Classes"].rowDragEnd, rowIndex === endRowIndex), _base_styles__WEBPACK_IMPORTED_MODULE_11__["Classes"].rowDragEndParent, isTreeTable && rowIndex === parentRowKeyIndex && dragPosition !== 'into'), _base_styles__WEBPACK_IMPORTED_MODULE_11__["Classes"].rowDragEndInto, rowIndex === endRowIndex && dragPosition === 'into'), _base_styles__WEBPACK_IMPORTED_MODULE_11__["Classes"].rowDragEndToTop, rowIndex === endRowIndex && dragPosition === 'top'), _base_styles__WEBPACK_IMPORTED_MODULE_11__["Classes"].rowDragEndToBottom, rowIndex === endRowIndex && dragPosition === 'bottom'));
       return {
         className: className
       };
@@ -8787,7 +9137,7 @@ function rowDrag(opt) {
     return pipeline;
   };
 }
-function getTargetRowInfo(target, tableBody, record) {
+function getDragRowItem(target, tableBody, record) {
   while (target && tableBody.contains(target)) {
     if (target.getAttribute('data-role') === 'table-cell') {
       var code = target.getAttribute('data-code');
@@ -8806,85 +9156,278 @@ function getTargetRowInfo(target, tableBody, record) {
   }
   return null;
 }
+function findTargetRow(target, tableBody) {
+  while (target && tableBody.contains(target)) {
+    if (target.getAttribute('data-role') === 'table-row') {
+      return target;
+    }
+    target = target.parentElement;
+  }
+  return null;
+}
 function isEleInFooter(target) {
-  while (target && !target.classList.contains(_base_styles__WEBPACK_IMPORTED_MODULE_7__["Classes"].artTable)) {
-    if (target.classList.contains(_base_styles__WEBPACK_IMPORTED_MODULE_7__["Classes"].tableFooter)) {
+  while (target && !target.classList.contains(_base_styles__WEBPACK_IMPORTED_MODULE_11__["Classes"].artTable)) {
+    if (target.classList.contains(_base_styles__WEBPACK_IMPORTED_MODULE_11__["Classes"].tableFooter)) {
       return true;
     }
     target = target.parentElement;
   }
   return false;
 }
-function createDragElement(rects, tableWidth, rowHeight) {
-  var x = rects.x,
-    y = rects.y;
-  var dragMoveElement = document.createElement('div');
-  dragMoveElement.className = classnames__WEBPACK_IMPORTED_MODULE_6___default()(_base_styles__WEBPACK_IMPORTED_MODULE_7__["Classes"].rowDragElement);
-  dragMoveElement.style.cssText = "position:fixed;z-index:9999;left:".concat(x, "px;top:").concat(y, "px;pointer-events:none;width:").concat(tableWidth, "px;height:").concat(rowHeight, "px;background:var(--primary-color);opacity: 0.1;");
-  document.body.appendChild(dragMoveElement);
-  return dragMoveElement;
-}
-function updateDragElementPosition(element, dragRange, _ref3) {
-  var x = _ref3.x,
-    y = _ref3.y,
-    startOffset = _ref3.startOffset;
-  var validPosition = getValidPosition({
-    x: x,
-    y: y
-  }, dragRange);
-  element.style.top = validPosition.y - startOffset + 'px';
-  return element;
+function createDragElement(mouseDownEvent, tableBody) {
+  var ELEMENT_TEMPLATE = "<div class='".concat(_base_styles__WEBPACK_IMPORTED_MODULE_11__["Classes"].rowDragElement, "'>\n      <span class='").concat(_base_styles__WEBPACK_IMPORTED_MODULE_11__["Classes"].rowDragElementIcon, "'></span>\n      <div class='").concat(_base_styles__WEBPACK_IMPORTED_MODULE_11__["Classes"].rowDragElementLabel, "'></div>\n    </div>");
+  var element = document.createElement('div');
+  element.innerHTML = ELEMENT_TEMPLATE;
+  var dragElement = element.firstChild;
+  var targetRow = findTargetRow(mouseDownEvent.target, tableBody);
+  if (targetRow) {
+    var rect = targetRow.getBoundingClientRect();
+    dragElement.style.height = rect.height + 'px';
+  }
+  var bodyRect = tableBody.getBoundingClientRect();
+  dragElement.style.maxWidth = bodyRect.width + 'px';
+  document.body.appendChild(dragElement);
+  return dragElement;
+}
+function createDragLine(isTreeTable) {
+  var dragLine = document.createElement('div');
+  dragLine.classList.add(_base_styles__WEBPACK_IMPORTED_MODULE_11__["Classes"].rowDragLine);
+  if (isTreeTable) {
+    dragLine.classList.add(_base_styles__WEBPACK_IMPORTED_MODULE_11__["Classes"].treeTableRowDragLine);
+  }
+  document.body.appendChild(dragLine);
+  return dragLine;
+}
+function positionDragLine(_ref) {
+  var lineElement = _ref.lineElement,
+    dragZone = _ref.dragZone,
+    event = _ref.event;
+  var tableContainer = dragZone.getContainer();
+  var _dragZone$tableParams = dragZone.tableParams,
+    getDataSource = _dragZone$tableParams.getDataSource,
+    getTreeModeOptions = _dragZone$tableParams.getTreeModeOptions,
+    getRowDragOptions = _dragZone$tableParams.getRowDragOptions;
+  var dataSource = getDataSource();
+  var treeModeOptions = getTreeModeOptions();
+  var rowDragOptions = getRowDragOptions() || {};
+  var allowDragIntoRow = rowDragOptions.allowDragIntoRow;
+  // 鼠标悬停所在的拖拽行信息
+  var dragItem = getDragRowItem(event.target, tableContainer, dataSource);
+  if (!dragItem) return;
+  var cell = dragItem.cell,
+    rowIndex = dragItem.rowIndex,
+    row = dragItem.row;
+  var bodyRect = tableContainer.getBoundingClientRect();
+  var offsetParentSize = getElementRectWithOffset(document.body);
+  var isTreeTable = !!treeModeOptions;
+  var allowDragInto = isTreeTable && allowDragIntoRow;
+  var direction = getDirection(cell, event.clientY, allowDragInto);
+  if (isTreeTable) {
+    var iconWidth = treeModeOptions.iconWidth,
+      iconIndent = treeModeOptions.iconIndent,
+      iconGap = treeModeOptions.iconGap,
+      indentSize = treeModeOptions.indentSize,
+      treeMetaKey = treeModeOptions.treeMetaKey;
+    var expandCell = tableContainer.querySelector("tr[data-rowindex=\"".concat(rowIndex, "\"] .").concat(_base_styles__WEBPACK_IMPORTED_MODULE_11__["Classes"].tableExtendCell));
+    if (expandCell) {
+      var _getElementSize2 = _getElementSize(expandCell),
+        paddingLeft = _getElementSize2.paddingLeft;
+      var expandCellRect = expandCell.getBoundingClientRect();
+      var _row$treeMetaKey = row[treeMetaKey],
+        rowKey = _row$treeMetaKey.rowKey,
+        depth = _row$treeMetaKey.depth,
+        isLeaf = _row$treeMetaKey.isLeaf,
+        expanded = _row$treeMetaKey.expanded;
+      var addWidth = isLeaf ? iconWidth + iconGap : 0;
+      var indent = iconIndent + depth * indentSize + addWidth;
+      var x = expandCellRect.x,
+        _y = expandCellRect.y,
+        _height = expandCellRect.height;
+      var _top = direction === 'bottom' ? _y + _height - offsetParentSize.top : _y - offsetParentSize.top;
+      var offsetX = Math.max(x + paddingLeft + indent - bodyRect.x, 0);
+      var _left = bodyRect.x + offsetX - offsetParentSize.left;
+      lineElement.style.left = "".concat(_left, "px");
+      lineElement.style.top = "".concat(_top, "px");
+      lineElement.style.width = "".concat(bodyRect.width - offsetX, "px");
+      if (direction === 'into') {
+        lineElement.style.display = 'none';
+      } else {
+        lineElement.style.display = 'block';
+      }
+      return;
+    }
+  }
+  // 根据鼠标悬停位置所在单元格和显示位置计算拖拽线的位置
+  var rect = cell.getBoundingClientRect();
+  var y = rect.y,
+    height = rect.height;
+  var top = direction === 'bottom' ? y + height - offsetParentSize.top : y - offsetParentSize.top;
+  var left = bodyRect.x - offsetParentSize.left;
+  lineElement.style.left = "".concat(left, "px");
+  lineElement.style.top = "".concat(top, "px");
+  lineElement.style.width = "".concat(bodyRect.width, "px");
+}
+function showDragLine(lineElement) {
+  lineElement.style.display = 'block';
+}
+function hiddenDragLine(lineElement) {
+  lineElement.style.display = 'none';
+}
+function positionDragElemment(element, event) {
+  var _document$body$client, _document$body, _document$documentEle, _document$body$client2, _document$body2, _document$documentEle2;
+  if (!element) return;
+  var elementRect = element.getBoundingClientRect();
+  var eleHeight = elementRect.height;
+  var browserWidth = (_document$body$client = (_document$body = document.body) === null || _document$body === void 0 ? void 0 : _document$body.clientWidth) !== null && _document$body$client !== void 0 ? _document$body$client : window.innerHeight || ((_document$documentEle = document.documentElement) === null || _document$documentEle === void 0 ? void 0 : _document$documentEle.clientWidth) || 0;
+  var browserHeight = (_document$body$client2 = (_document$body2 = document.body) === null || _document$body2 === void 0 ? void 0 : _document$body2.clientHeight) !== null && _document$body$client2 !== void 0 ? _document$body$client2 : window.innerHeight || ((_document$documentEle2 = document.documentElement) === null || _document$documentEle2 === void 0 ? void 0 : _document$documentEle2.clientHeight) || 0;
+  var offsetParentSize = getElementRectWithOffset(element.offsetParent);
+  var clientX = event.clientX,
+    clientY = event.clientY;
+  var top = clientY - offsetParentSize.top - eleHeight / 2;
+  var left = clientX - offsetParentSize.left;
+  var windowScrollX = window.pageXOffset;
+  var windowScrollY = window.pageYOffset;
+  if (browserWidth > 0 && left + element.clientWidth > browserWidth + windowScrollX) {
+    left = Math.max(browserWidth + windowScrollX - element.clientWidth, 0);
+  }
+  if (browserHeight > 0 && top + element.clientHeight > browserHeight + windowScrollY) {
+    top = Math.max(browserHeight + windowScrollY - element.clientHeight, 0);
+  }
+  element.style.left = "".concat(left, "px");
+  element.style.top = "".concat(top, "px");
+}
+function getElementRectWithOffset(el) {
+  var offsetElementRect = el.getBoundingClientRect();
+  var _getElementSize3 = _getElementSize(el),
+    borderTopWidth = _getElementSize3.borderTopWidth,
+    borderLeftWidth = _getElementSize3.borderLeftWidth,
+    borderRightWidth = _getElementSize3.borderRightWidth,
+    borderBottomWidth = _getElementSize3.borderBottomWidth;
+  return {
+    top: offsetElementRect.top + (borderTopWidth || 0),
+    left: offsetElementRect.left + (borderLeftWidth || 0),
+    right: offsetElementRect.right + (borderRightWidth || 0),
+    bottom: offsetElementRect.bottom + (borderBottomWidth || 0)
+  };
 }
-function removeDragElement(element) {
+function _getElementSize(el) {
+  var _window$getComputedSt = window.getComputedStyle(el),
+    height = _window$getComputedSt.height,
+    width = _window$getComputedSt.width,
+    borderTopWidth = _window$getComputedSt.borderTopWidth,
+    borderRightWidth = _window$getComputedSt.borderRightWidth,
+    borderBottomWidth = _window$getComputedSt.borderBottomWidth,
+    borderLeftWidth = _window$getComputedSt.borderLeftWidth,
+    paddingTop = _window$getComputedSt.paddingTop,
+    paddingRight = _window$getComputedSt.paddingRight,
+    paddingBottom = _window$getComputedSt.paddingBottom,
+    paddingLeft = _window$getComputedSt.paddingLeft,
+    marginTop = _window$getComputedSt.marginTop,
+    marginRight = _window$getComputedSt.marginRight,
+    marginBottom = _window$getComputedSt.marginBottom,
+    marginLeft = _window$getComputedSt.marginLeft,
+    boxSizing = _window$getComputedSt.boxSizing;
+  return {
+    height: parseFloat(height || '0'),
+    width: parseFloat(width || '0'),
+    borderTopWidth: parseFloat(borderTopWidth || '0'),
+    borderRightWidth: parseFloat(borderRightWidth || '0'),
+    borderBottomWidth: parseFloat(borderBottomWidth || '0'),
+    borderLeftWidth: parseFloat(borderLeftWidth || '0'),
+    paddingTop: parseFloat(paddingTop || '0'),
+    paddingRight: parseFloat(paddingRight || '0'),
+    paddingBottom: parseFloat(paddingBottom || '0'),
+    paddingLeft: parseFloat(paddingLeft || '0'),
+    marginTop: parseFloat(marginTop || '0'),
+    marginRight: parseFloat(marginRight || '0'),
+    marginBottom: parseFloat(marginBottom || '0'),
+    marginLeft: parseFloat(marginLeft || '0'),
+    boxSizing: boxSizing
+  };
+}
+function removeElement(element) {
   document.body.removeChild(element);
 }
-function updateCurSorStyle(isOutOfRange) {
-  if (isOutOfRange) {
-    document.body.style.cursor = 'no-drop';
-  } else {
-    document.body.style.cursor = 'move';
+function setDragElementIcon(element, iconName) {
+  var elementIcon = element.querySelector(".".concat(_base_styles__WEBPACK_IMPORTED_MODULE_11__["Classes"].rowDragElementIcon));
+  clearElementChildren(elementIcon);
+  iconName = iconName || 'notAllowed';
+  var iconElement = document.createElement('span');
+  if (iconName === 'move') {
+    iconElement.classList.add(_base_styles__WEBPACK_IMPORTED_MODULE_11__["Classes"].iconMove);
+  } else if (iconName === 'notAllowed') {
+    iconElement.classList.add(_base_styles__WEBPACK_IMPORTED_MODULE_11__["Classes"].iconNotAllowed);
   }
+  elementIcon.appendChild(iconElement);
 }
-function removeCurSorStyle() {
-  document.body.style.cursor = 'default';
+function clearElementChildren(element) {
+  while (element && element.firstChild) {
+    element.removeChild(element.firstChild);
+  }
 }
-function getDragRange(tableBody, _ref4) {
-  var startOffset = _ref4.startOffset,
-    rowHeight = _ref4.rowHeight;
+function getScrollMoveOffset(tableBody, mouseMoveEvent) {
+  var clientY = mouseMoveEvent.clientY;
   var tableBodyClientRect = tableBody.getBoundingClientRect();
-  var height = tableBodyClientRect.height,
-    width = tableBodyClientRect.width,
-    top = tableBodyClientRect.top,
-    left = tableBodyClientRect.left;
-  return {
-    minX: left,
-    maxX: left + width,
-    minY: top - rowHeight + startOffset,
-    maxY: top + height + startOffset
-  };
+  var top = tableBodyClientRect.top,
+    height = tableBodyClientRect.height;
+  if (clientY >= top + height - SCROLL_START_OFFSET && clientY <= top + height) {
+    return SCROLL_OFFSET;
+  }
+  if (clientY >= top && clientY <= top + SCROLL_START_OFFSET) {
+    return -SCROLL_OFFSET;
+  }
+  return 0;
 }
-function getValidPosition(position, dragRange) {
-  var x = position.x,
-    y = position.y;
-  var minX = dragRange.minX,
-    maxX = dragRange.maxX,
-    minY = dragRange.minY,
-    maxY = dragRange.maxY;
-  var newX = x < minX ? minX : x > maxX ? maxX : x;
-  var newY = y < minY ? minY : y > maxY ? maxY : y;
-  return {
-    x: newX,
-    y: newY
+function setDragText(element, dragText) {
+  var dragTextString = dragText.toString();
+  var elementIcon = element.querySelector(".".concat(_base_styles__WEBPACK_IMPORTED_MODULE_11__["Classes"].rowDragElementLabel));
+  var stringNode = document.createTextNode(dragTextString);
+  elementIcon.appendChild(stringNode);
+}
+function isMouseOnDropTarget(mouseEvent, target) {
+  return target.contains(mouseEvent.target);
+}
+function createDropTargetEvent(dropZone, event, dragItem, startDropZone) {
+  var dropZoneTarget = dropZone.getContainer();
+  var startDropZoneTagret = startDropZone.getContainer();
+  var rect = dropZoneTarget.getBoundingClientRect();
+  var x = event.clientX - rect.left;
+  var y = event.clientY - rect.top;
+  var startDropZoneOptions = startDropZone.tableParams.getRowDragOptions();
+  var startCommonParams = startDropZoneOptions === null || startDropZoneOptions === void 0 ? void 0 : startDropZoneOptions.commonParams;
+  var targetEvent = {
+    dragItem: dragItem,
+    startDropZoneTagret: startDropZoneTagret,
+    startCommonParams: startCommonParams,
+    dropZoneTarget: dropZoneTarget,
+    event: event,
+    x: x,
+    y: y
   };
+  if (dropZone.isTable) {
+    var dropZoneOptions = dropZone.tableParams.getRowDragOptions();
+    var commonParams = dropZoneOptions === null || dropZoneOptions === void 0 ? void 0 : dropZoneOptions.commonParams;
+    targetEvent.dropZoneTableParams = dropZone.tableParams;
+    targetEvent.commonParams = commonParams;
+  }
+  return targetEvent;
 }
-function isOutOfDragRange(position, dragRange) {
-  var x = position.x,
-    y = position.y;
-  var minX = dragRange.minX,
-    maxX = dragRange.maxX,
-    minY = dragRange.minY,
-    maxY = dragRange.maxY;
-  return x > maxX || x < minX || y > maxY || y < minY;
+function getDirection(cell, clientY) {
+  var isTreeTable = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var _cell$getBoundingClie = cell.getBoundingClientRect(),
+    height = _cell$getBoundingClie.height,
+    y = _cell$getBoundingClie.y;
+  var direction = 'bottom';
+  if (isTreeTable) {
+    if (y + height / 4 > clientY) {
+      direction = 'top';
+    } else if (y + height * 3 / 4 > clientY) {
+      direction = 'into';
+    }
+  } else if (y + height / 2 > clientY) {
+    direction = 'top';
+  }
+  return direction;
 }
 
 /***/ }),
@@ -9749,12 +10292,13 @@ function tips() {
 /*!*********************************************************!*\
   !*** ./components/table/pipeline/features/treeMode.tsx ***!
   \*********************************************************/
-/*! exports provided: treeMetaSymbol, treeMode */
+/*! exports provided: treeMetaSymbol, treeModeOptionsKey, treeMode */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "treeMetaSymbol", function() { return treeMetaSymbol; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "treeModeOptionsKey", function() { return treeModeOptionsKey; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "treeMode", function() { return treeMode; });
 /* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ "./node_modules/@babel/runtime/helpers/defineProperty.js");
 /* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__);
@@ -9842,6 +10386,7 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 
 
 var treeMetaSymbol = Symbol('treeMetaSymbol');
+var treeModeOptionsKey = 'treeModeOptions';
 function treeMode() {
   var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return function treeModeStep(pipeline) {
@@ -9879,16 +10424,35 @@ function treeMode() {
     var iconIndent = (_opts$iconIndent = opts.iconIndent) !== null && _opts$iconIndent !== void 0 ? _opts$iconIndent : ctx.indents.iconIndent;
     var iconGap = (_opts$iconGap = opts.iconGap) !== null && _opts$iconGap !== void 0 ? _opts$iconGap : ctx.indents.iconGap;
     var indentSize = (_opts$indentSize = opts.indentSize) !== null && _opts$indentSize !== void 0 ? _opts$indentSize : ctx.indents.indentSize;
+    pipeline.setFeatureOptions(treeModeOptionsKey, {
+      iconWidth: iconWidth,
+      iconIndent: iconIndent,
+      iconGap: iconGap,
+      indentSize: indentSize,
+      treeMetaKey: treeMetaKey,
+      isExpanded: function isExpanded(rowKey) {
+        return openKeySet.has(rowKey);
+      },
+      onExpand: function onExpand(rowKey) {
+        onChangeOpenKeys([].concat(_babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_1___default()(openKeys), [rowKey]), rowKey, 'expand');
+      },
+      onCollapse: function onCollapse(rowKey) {
+        onChangeOpenKeys(openKeys.filter(function (key) {
+          return key !== rowKey;
+        }), rowKey, 'collapse');
+      }
+    });
     var Icon = opts.icon;
     return pipeline.mapDataSource(processDataSource).mapColumns(processColumns);
     function processDataSource(input) {
       if (pipeline.isSameInputDataSource() && openKeys === pipeline.getFeatureOptions('lastOpenKeys')) {
         return pipeline.getFeatureOptions('lastTreeMode');
       }
-      pipeline.setFeatureOptions('lastOpenKeys', pipeline.getStateAtKey(stateKey));
+      pipeline.setFeatureOptions('lastOpenKeys', pipeline.getStateAtKey(stateKey) || openKeys);
       var result = [];
       dfs(input, 0);
       function dfs(nodes, depth) {
+        var parentNode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
         if (nodes == null) {
           return;
         }
@@ -9898,6 +10462,7 @@ function treeMode() {
           for (_iterator.s(); !(_step = _iterator.n()).done;) {
             var _node = _step.value;
             var rowKey = _internals__WEBPACK_IMPORTED_MODULE_25__["internals"].safeGetRowKey(primaryKey, _node, -1);
+            var parentRowKey = parentNode ? _internals__WEBPACK_IMPORTED_MODULE_25__["internals"].safeGetRowKey(primaryKey, parentNode, -1) : null;
             var expanded = openKeySet.has(rowKey);
             var isLeaf = isLeafNode(_node, {
               depth: depth,
@@ -9908,11 +10473,12 @@ function treeMode() {
               depth: depth,
               isLeaf: isLeaf,
               expanded: expanded,
-              rowKey: rowKey
+              rowKey: rowKey,
+              parentRowKey: parentRowKey
             };
             result.push(_objectSpread(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()({}, treeMetaKey, treeMeta), _node));
             if (!isLeaf && expanded) {
-              dfs(_node.children, depth + 1);
+              dfs(_node.children, depth + 1, _node);
             }
           }
         } catch (err) {
@@ -9989,15 +10555,19 @@ function treeMode() {
       };
       var getCellProps = function getCellProps(value, record, rowIndex) {
         var prevProps = _internals__WEBPACK_IMPORTED_MODULE_25__["internals"].safeGetCellProps(expandCol, record, rowIndex);
-        if (record[treeMetaKey] == null) {
+        if (record[treeMetaKey] == null || clickArea !== 'cell') {
           // 没有 treeMeta 信息的话，就返回原先的 cellProps
-          return prevProps;
+          return Object(_utils__WEBPACK_IMPORTED_MODULE_26__["mergeCellProps"])(prevProps, {
+            className: _base_styles__WEBPACK_IMPORTED_MODULE_27__["Classes"].tableExtendCell
+          });
         }
         var _record$treeMetaKey2 = record[treeMetaKey],
           isLeaf = _record$treeMetaKey2.isLeaf,
           rowKey = _record$treeMetaKey2.rowKey;
         if (isLeaf) {
-          return prevProps;
+          return Object(_utils__WEBPACK_IMPORTED_MODULE_26__["mergeCellProps"])(prevProps, {
+            className: _base_styles__WEBPACK_IMPORTED_MODULE_27__["Classes"].tableExtendCell
+          });
         }
         return Object(_utils__WEBPACK_IMPORTED_MODULE_26__["mergeCellProps"])(prevProps, {
           onClick: function onClick(e) {
@@ -10008,7 +10578,8 @@ function treeMode() {
           },
           style: {
             cursor: 'pointer'
-          }
+          },
+          className: _base_styles__WEBPACK_IMPORTED_MODULE_27__["Classes"].tableExtendCell
         });
       };
       columns[expandColIndex] = _objectSpread(_objectSpread({}, expandCol), {}, {
@@ -10019,7 +10590,7 @@ function treeMode() {
           }
         }, _internals__WEBPACK_IMPORTED_MODULE_25__["internals"].safeRenderHeader(expandCol)),
         render: render,
-        getCellProps: clickArea === 'cell' ? getCellProps : expandCol.getCellProps
+        getCellProps: getCellProps
       });
       return _babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_1___default()(columns);
     }
@@ -10266,6 +10837,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_15___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_15__);
 /* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../utils */ "./components/table/utils/index.tsx");
 /* harmony import */ var _features_autoFill__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./features/autoFill */ "./components/table/pipeline/features/autoFill.tsx");
+/* harmony import */ var _features_featureApi_utils__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./features/featureApi/utils */ "./components/table/pipeline/features/featureApi/utils.ts");
 
 
 
@@ -10286,18 +10858,19 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 
 
 
-/**
- * 表格数据处理流水线。TablePipeline 提供了表格数据处理过程中的一些上下方与工具方法，包括……
- *
- * 1. ctx：上下文环境对象，step（流水线上的一步）可以对 ctx 中的字段进行读写。
- * ctx 中部分字段名称有特定的含义（例如 primaryKey 表示行的主键），使用自定义的上下文信息时注意避开这些名称。
- *
- * 2. rowPropsGetters：getRowProps 回调队列，step 可以通过 pipeline.appendRowPropsGetter 向队列中追加回调函数，
- *   在调用 pipeline.props() 队列中的所有函数会组合形成最终的 getRowProps
- *
- * 3. 当前流水线的状态，包括 dataSource, columns, rowPropsGetters 三个部分
- *
- * 4. snapshots，调用 pipeline.snapshot(name) 可以记录当前的状态，后续可以通过 name 来读取保存的状态
+
+/**
+ * 表格数据处理流水线。TablePipeline 提供了表格数据处理过程中的一些上下方与工具方法，包括……
+ *
+ * 1. ctx：上下文环境对象，step（流水线上的一步）可以对 ctx 中的字段进行读写。
+ * ctx 中部分字段名称有特定的含义（例如 primaryKey 表示行的主键），使用自定义的上下文信息时注意避开这些名称。
+ *
+ * 2. rowPropsGetters：getRowProps 回调队列，step 可以通过 pipeline.appendRowPropsGetter 向队列中追加回调函数，
+ *   在调用 pipeline.props() 队列中的所有函数会组合形成最终的 getRowProps
+ *
+ * 3. 当前流水线的状态，包括 dataSource, columns, rowPropsGetters 三个部分
+ *
+ * 4. snapshots，调用 pipeline.snapshot(name) 可以记录当前的状态，后续可以通过 name 来读取保存的状态
  * */
 var TablePipeline = /*#__PURE__*/function () {
   function TablePipeline(_ref) {
@@ -10412,6 +10985,7 @@ var TablePipeline = /*#__PURE__*/function () {
       this._isSameInputDataSource = _input.dataSource === this.ref.current._lastInputDataSource;
       this._dataSource = _input.dataSource;
       this.ref.current._lastInputDataSource = _input.dataSource;
+      this.ref.current.lastPipeline = this;
       this._columns = _input.columns.map(function (col) {
         return _objectSpread(_objectSpread({}, col), {}, {
           key: _this.guid()
@@ -10465,7 +11039,7 @@ var TablePipeline = /*#__PURE__*/function () {
       return this;
     }
 
-    /** @deprecated
+    /** @deprecated
      *  应用一个 kd-table Table transform */
   }, {
     key: "useTransform",
@@ -10553,6 +11127,25 @@ var TablePipeline = /*#__PURE__*/function () {
       };
       return result;
     }
+  }, {
+    key: "getFeatureApi",
+    value: function getFeatureApi(featureName) {
+      var _this$ref$current$fea2;
+      return (_this$ref$current$fea2 = this.ref.current.featureApi) === null || _this$ref$current$fea2 === void 0 ? void 0 : _this$ref$current$fea2[featureName];
+    }
+  }, {
+    key: "addFeatureApi",
+    value: function addFeatureApi(featureName) {
+      if (!this.getFeatureApi(featureName)) {
+        this.ref.current.featureApi[featureName] = Object(_features_featureApi_utils__WEBPACK_IMPORTED_MODULE_18__["createFeatureApi"])(featureName, this);
+      }
+      return this.ref.current.featureApi[featureName];
+    }
+  }, {
+    key: "getLastPipeline",
+    value: function getLastPipeline() {
+      return this.ref.current.lastPipeline;
+    }
   }]);
 }();
 _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_4___default()(TablePipeline, "defaultIndents", {
@@ -10567,7 +11160,8 @@ function useTablePipeline(ctx) {
     state = _useState2[0],
     setState = _useState2[1];
   var ref = Object(react__WEBPACK_IMPORTED_MODULE_15__["useRef"])({
-    featureOptions: {}
+    featureOptions: {},
+    featureApi: {}
   });
   return new TablePipeline({
     state: state,
@@ -10783,21 +11377,21 @@ function isSameArray(arr1, arr2) {
   });
 }
 
-/** 自适应列宽
- *
- * @deprecated transform 用法已经过时，请使用 pipeline 来对表格进行拓展
- *
- * @param tableRef BaseTable 的 ref
- * @param options 参数
- * @param deps 重新调整列宽的依赖数组，每当依赖数组发生变化时， useAutoWidthTransform 会根据单元格内容的实际渲染宽度 设置单元格的宽度
- *
- * options 说明：
- * - options.appendExpander 是否在列的末尾追加可伸缩列
- * - options.expanderVisibility 设置为 `'hidden'` 可以隐藏可伸缩列
- * - options.wrapperStyle 单元格中 div.auto-width-wrapper 的样式
- * - options.initColumnWidth 自适应的初始列宽
- *
- * 注意 useAutoWidthTransform 是一个 React hooks，要遵循 hooks 的用法规范
+/** 自适应列宽
+ *
+ * @deprecated transform 用法已经过时，请使用 pipeline 来对表格进行拓展
+ *
+ * @param tableRef BaseTable 的 ref
+ * @param options 参数
+ * @param deps 重新调整列宽的依赖数组，每当依赖数组发生变化时， useAutoWidthTransform 会根据单元格内容的实际渲染宽度 设置单元格的宽度
+ *
+ * options 说明：
+ * - options.appendExpander 是否在列的末尾追加可伸缩列
+ * - options.expanderVisibility 设置为 `'hidden'` 可以隐藏可伸缩列
+ * - options.wrapperStyle 单元格中 div.auto-width-wrapper 的样式
+ * - options.initColumnWidth 自适应的初始列宽
+ *
+ * 注意 useAutoWidthTransform 是一个 React hooks，要遵循 hooks 的用法规范
  * */
 function useAutoWidthTransform(tableRef, options, deps) {
   Object(_warnTransformsDeprecated__WEBPACK_IMPORTED_MODULE_18__["warnTransformsDeprecated"])('useAutoWidthTransform');
@@ -12373,9 +12967,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core-js/modules/es.object.to-string.js */ "./node_modules/core-js/modules/es.object.to-string.js");
 /* harmony import */ var core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_0__);
 
-/**
- * 以 input 作为输入，按序使用 transform.
- *
+/**
+ * 以 input 作为输入，按序使用 transform.
+ *
  * `applyTransform(input, f1, f2, f3)` 等价于 `f3(f2(f1(input)))` */
 function applyTransforms(input) {
   for (var _len = arguments.length, transforms = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
@@ -12408,11 +13002,11 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-/*
- * @Author: wqhui
- * @Date: 2022-05-13 17:06:51
- * @LastEditTime: 2024-05-29 16:25:48
- * @Description:
+/*
+ * @Author: wqhui
+ * @Date: 2022-05-13 17:06:51
+ * @LastEditTime: 2024-05-29 16:25:48
+ * @Description:
  */
 
 var browserData = getBrowserData();
@@ -12557,34 +13151,34 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 
 
 
-/**
- * 根据 idProp 与 parentIdProp 从对象数组中构建对应的树
- * 当 A[parentIdProp] === B[idProp] 时，对象A会被移动到对象B的children。
- * 当一个对象的 parentIdProp 不与其他对象的 idProp 字段相等时，该对象被作为树的顶层节点
- * @example
- * const array = [
- *   { id: 'node-1', parent: 'root' },
- *   { id: 'node-2', parent: 'root' },
- *   { id: 'node-3', parent: 'node-2' },
- *   { id: 'node-4', parent: 'node-2' },
- *   { id: 'node-5', parent: 'node-4' },
- * ]
- * const tree = buildTree('id', 'parent', array)
- * expect(tree).toEqual([
- *   { id: 'node-1', parent: 'root' },
- *   {
- *     id: 'node-2',
- *     parent: 'root',
- *     children: [
- *       { id: 'node-3', parent: 'node-2' },
- *       {
- *         id: 'node-4',
- *         parent: 'node-2',
- *         children: [{ id: 'node-5', parent: 'node-4' }],
- *       },
- *     ],
- *   },
- * ])
+/**
+ * 根据 idProp 与 parentIdProp 从对象数组中构建对应的树
+ * 当 A[parentIdProp] === B[idProp] 时，对象A会被移动到对象B的children。
+ * 当一个对象的 parentIdProp 不与其他对象的 idProp 字段相等时，该对象被作为树的顶层节点
+ * @example
+ * const array = [
+ *   { id: 'node-1', parent: 'root' },
+ *   { id: 'node-2', parent: 'root' },
+ *   { id: 'node-3', parent: 'node-2' },
+ *   { id: 'node-4', parent: 'node-2' },
+ *   { id: 'node-5', parent: 'node-4' },
+ * ]
+ * const tree = buildTree('id', 'parent', array)
+ * expect(tree).toEqual([
+ *   { id: 'node-1', parent: 'root' },
+ *   {
+ *     id: 'node-2',
+ *     parent: 'root',
+ *     children: [
+ *       { id: 'node-3', parent: 'node-2' },
+ *       {
+ *         id: 'node-4',
+ *         parent: 'node-2',
+ *         children: [{ id: 'node-5', parent: 'node-4' }],
+ *       },
+ *     ],
+ *   },
+ * ])
  */
 function buildTree(idProp, parentIdProp, items) {
   var wrapperMap = new Map();
@@ -12703,11 +13297,11 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 
 
-/** 遍历所有节点，并将节点收集到一个数组中.
- * order 参数可用于指定遍历规则：
- * * `pre` 前序遍历 （默认）
- * * `post` 后续遍历
- * * `leaf-only` 忽略内部节点，只收集叶子节点
+/** 遍历所有节点，并将节点收集到一个数组中.
+ * order 参数可用于指定遍历规则：
+ * * `pre` 前序遍历 （默认）
+ * * `post` 后续遍历
+ * * `leaf-only` 忽略内部节点，只收集叶子节点
  * */
 function collectNodes(nodes) {
   var order = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'pre';
@@ -12941,10 +13535,10 @@ function createEventPath(event) {
 }
 ;
 
-/**
- * 获取点击事件是否发生在元素内部
- * @param ele 
- * @param event 
+/**
+ * 获取点击事件是否发生在元素内部
+ * @param ele 
+ * @param event 
  */
 function isElementInEventPath(ele, event) {
   if (!ele || !event) {
@@ -12954,10 +13548,10 @@ function isElementInEventPath(ele, event) {
   return path.indexOf(ele) >= 0;
 }
 
-/**
- * 根据点击路径获取对应元素
- * @param path 
- * @param isTargetCb 
+/**
+ * 根据点击路径获取对应元素
+ * @param path 
+ * @param isTargetCb 
  */
 function getTargetEleInEventPath(path, isTargetCb) {
   var target;
@@ -12972,10 +13566,10 @@ function getTargetEleInEventPath(path, isTargetCb) {
   return target;
 }
 
-/**
- * 获得鼠标点击相对父面板位置
- * @param event 
- * @param popupParent 
+/**
+ * 获得鼠标点击相对父面板位置
+ * @param event 
+ * @param popupParent 
  */
 function calculatePointerRelative(event, popupParent) {
   var parentRect = popupParent.getBoundingClientRect();
@@ -12985,10 +13579,10 @@ function calculatePointerRelative(event, popupParent) {
     y: event.clientY - (popupParent === document.body ? documentRect.top : parentRect.top)
   };
 }
-/**
- * 获取面板相对父面板位置
- * @param event 
- * @param popupParent 
+/**
+ * 获取面板相对父面板位置
+ * @param event 
+ * @param popupParent 
  */
 function calculatePopupRelative(trigger, popupParent, offset) {
   var triggerRect = trigger.getBoundingClientRect();
@@ -13710,8 +14304,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 
 
 
-/** 对树状结构的数据进行排序.
- * layeredSort 是一个递归的过程，针对树上的每一个父节点，该函数都会重新对其子节点数组（children) 进行排序.
+/** 对树状结构的数据进行排序.
+ * layeredSort 是一个递归的过程，针对树上的每一个父节点，该函数都会重新对其子节点数组（children) 进行排序.
  * */
 function layeredSort(array, compare) {
   return dfs(array);
@@ -13894,11 +14488,11 @@ function composeEventHandler(handler1, handler2) {
   };
 }
 
-/** 合并两个 cellProps（单元格属性）对象，返回一个合并后的全新对象。
- *
- * mergeCellProps 会按照以下规则来合并两个对象：
- * * 对于 数字、字符串、布尔值类型的字段，extra 中的字段值将直接覆盖 base 中的字段值（className 是个特例，会进行字符串拼接）
- * * 对于函数/方法类型的字段（对应单元格的事件回调函数），mergeCellProps 将生成一个新的函数，新函数将按序调用 base 和 extra 中的方法
+/** 合并两个 cellProps（单元格属性）对象，返回一个合并后的全新对象。
+ *
+ * mergeCellProps 会按照以下规则来合并两个对象：
+ * * 对于 数字、字符串、布尔值类型的字段，extra 中的字段值将直接覆盖 base 中的字段值（className 是个特例，会进行字符串拼接）
+ * * 对于函数/方法类型的字段（对应单元格的事件回调函数），mergeCellProps 将生成一个新的函数，新函数将按序调用 base 和 extra 中的方法
  * * 对于普通对象类型的字段（对应单元格的样式），mergeCellProps 将合并两个对象 */
 function mergeCellProps(base, extra) {
   if (base == null) {
@@ -14215,13 +14809,13 @@ function isSelectColumn(column) {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return smartCompare; });
-/** 比较函数，支持字符串、数字、数组和 null。
- * * 对于字符串将比较两者的字典序；
- * * 对数字将比较两者大小；
- * * null 值在比较时总是小于另一个值；
- * * 对于数组来说，将逐个比较数组中的元素，第一个不相等的比较结果将作为整个数组的比较结果
- *
- * 数组的比较可参考 python 中的元祖比较：
+/** 比较函数，支持字符串、数字、数组和 null。
+ * * 对于字符串将比较两者的字典序；
+ * * 对数字将比较两者大小；
+ * * null 值在比较时总是小于另一个值；
+ * * 对于数组来说，将逐个比较数组中的元素，第一个不相等的比较结果将作为整个数组的比较结果
+ *
+ * 数组的比较可参考 python 中的元祖比较：
  * https://stackoverflow.com/questions/5292303/how-does-tuple-comparison-work-in-python */
 function smartCompare(x, y) {
   // 将 null 排在最后面
@@ -14993,11 +15587,11 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _browserType__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./browserType */ "./components/table/utils/browserType.tsx");
 
 
-/*
- * @Author: wqhui
- * @Date: 2024-05-06 16:16:16
- * @LastEditTime: 2024-05-06 16:41:24
- * @Description:
+/*
+ * @Author: wqhui
+ * @Date: 2024-05-06 16:16:16
+ * @LastEditTime: 2024-05-06 16:41:24
+ * @Description:
  */
 
 var isStickyUIDegradeFlag;
@@ -15190,13 +15784,13 @@ module.exports = _defineProperty, module.exports.__esModule = true, module.expor
 /***/ (function(module, exports) {
 
 function _extends() {
-  return (module.exports = _extends = Object.assign ? Object.assign.bind() : function (n) {
+  return module.exports = _extends = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
       var t = arguments[e];
       for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
     return n;
-  }, module.exports.__esModule = true, module.exports["default"] = module.exports), _extends.apply(null, arguments);
+  }, module.exports.__esModule = true, module.exports["default"] = module.exports, _extends.apply(null, arguments);
 }
 module.exports = _extends, module.exports.__esModule = true, module.exports["default"] = module.exports;
 
@@ -15210,9 +15804,9 @@ module.exports = _extends, module.exports.__esModule = true, module.exports["def
 /***/ (function(module, exports) {
 
 function _getPrototypeOf(t) {
-  return (module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) {
+  return module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) {
     return t.__proto__ || Object.getPrototypeOf(t);
-  }, module.exports.__esModule = true, module.exports["default"] = module.exports), _getPrototypeOf(t);
+  }, module.exports.__esModule = true, module.exports["default"] = module.exports, _getPrototypeOf(t);
 }
 module.exports = _getPrototypeOf, module.exports.__esModule = true, module.exports["default"] = module.exports;
 
@@ -15391,9 +15985,9 @@ module.exports = _possibleConstructorReturn, module.exports.__esModule = true, m
 /***/ (function(module, exports) {
 
 function _setPrototypeOf(t, e) {
-  return (module.exports = _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
+  return module.exports = _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
     return t.__proto__ = e, t;
-  }, module.exports.__esModule = true, module.exports["default"] = module.exports), _setPrototypeOf(t, e);
+  }, module.exports.__esModule = true, module.exports["default"] = module.exports, _setPrototypeOf(t, e);
 }
 module.exports = _setPrototypeOf, module.exports.__esModule = true, module.exports["default"] = module.exports;
 
@@ -15520,11 +16114,11 @@ module.exports = toPropertyKey, module.exports.__esModule = true, module.exports
 function _typeof(o) {
   "@babel/helpers - typeof";
 
-  return (module.exports = _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+  return module.exports = _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
     return typeof o;
   } : function (o) {
     return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-  }, module.exports.__esModule = true, module.exports["default"] = module.exports), _typeof(o);
+  }, module.exports.__esModule = true, module.exports["default"] = module.exports, _typeof(o);
 }
 module.exports = _typeof, module.exports.__esModule = true, module.exports["default"] = module.exports;
 
@@ -15563,7 +16157,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 // eslint-disable-next-line no-undef
-var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|disableRemotePlayback|download|draggable|encType|enterKeyHint|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23
+var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|disableRemotePlayback|download|draggable|encType|enterKeyHint|fetchpriority|fetchPriority|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23
 
 var isPropValid = /* #__PURE__ */Object(_emotion_memoize__WEBPACK_IMPORTED_MODULE_0__["default"])(function (prop) {
   return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111
@@ -17535,8 +18129,8 @@ module.exports = {
       setInternalState(that, {
         type: CONSTRUCTOR_NAME,
         index: create(null),
-        first: undefined,
-        last: undefined,
+        first: null,
+        last: null,
         size: 0
       });
       if (!DESCRIPTORS) that.size = 0;
@@ -17561,7 +18155,7 @@ module.exports = {
           key: key,
           value: value,
           previous: previous = state.last,
-          next: undefined,
+          next: null,
           removed: false
         };
         if (!state.first) state.first = entry;
@@ -17595,10 +18189,10 @@ module.exports = {
         var entry = state.first;
         while (entry) {
           entry.removed = true;
-          if (entry.previous) entry.previous = entry.previous.next = undefined;
+          if (entry.previous) entry.previous = entry.previous.next = null;
           entry = entry.next;
         }
-        state.first = state.last = undefined;
+        state.first = state.last = null;
         state.index = create(null);
         if (DESCRIPTORS) state.size = 0;
         else that.size = 0;
@@ -17690,7 +18284,7 @@ module.exports = {
         target: iterated,
         state: getInternalCollectionState(iterated),
         kind: kind,
-        last: undefined
+        last: null
       });
     }, function () {
       var state = getInternalIteratorState(this);
@@ -17701,7 +18295,7 @@ module.exports = {
       // get next entry
       if (!state.target || !(state.last = entry = entry ? entry.next : state.state.first)) {
         // or finish the iteration
-        state.target = undefined;
+        state.target = null;
         return createIterResultObject(undefined, true);
       }
       // return step by kind
@@ -21246,10 +21840,10 @@ var SHARED = '__core-js_shared__';
 var store = module.exports = globalThis[SHARED] || defineGlobalProperty(SHARED, {});
 
 (store.versions || (store.versions = [])).push({
-  version: '3.38.0',
+  version: '3.38.1',
   mode: IS_PURE ? 'pure' : 'global',
   copyright: '© 2014-2024 Denis Pushkarev (zloirock.ru)',
-  license: 'https://github.com/zloirock/core-js/blob/v3.38.0/LICENSE',
+  license: 'https://github.com/zloirock/core-js/blob/v3.38.1/LICENSE',
   source: 'https://github.com/zloirock/core-js'
 });
 
@@ -22203,7 +22797,7 @@ module.exports = defineIterator(Array, 'Array', function (iterated, kind) {
   var target = state.target;
   var index = state.index++;
   if (!target || index >= target.length) {
-    state.target = undefined;
+    state.target = null;
     return createIterResultObject(undefined, true);
   }
   switch (state.kind) {
@@ -23131,6 +23725,7 @@ var BASE_FORCED = DESCRIPTORS &&
   (!CORRECT_NEW || MISSED_STICKY || UNSUPPORTED_DOT_ALL || UNSUPPORTED_NCG || fails(function () {
     re2[MATCH] = false;
     // RegExp constructor can alter flags and IsRegExp works correct with @@match
+    // eslint-disable-next-line sonar/inconsistent-function-call -- required for testing
     return NativeRegExp(re1) !== re1 || NativeRegExp(re2) === re2 || String(NativeRegExp(re1, 'i')) !== '/a/i';
   }));
 
@@ -23977,6 +24572,7 @@ if (DESCRIPTORS && isCallable(NativeSymbol) && (!('description' in SymbolPrototy
   var SymbolWrapper = function Symbol() {
     var description = arguments.length < 1 || arguments[0] === undefined ? undefined : toString(arguments[0]);
     var result = isPrototypeOf(SymbolPrototype, this)
+      // eslint-disable-next-line sonar/inconsistent-function-call -- ok
       ? new NativeSymbol(description)
       // in Edge 13, String(Symbol(undefined)) === 'Symbol(undefined)'
       : description === undefined ? NativeSymbol() : NativeSymbol(description);
@@ -25815,7 +26411,7 @@ function resetCssNodes(rootElement) {
 "use strict";
 
 
-var reactIs = __webpack_require__(/*! react-is */ "./node_modules/react-is/index.js");
+var reactIs = __webpack_require__(/*! react-is */ "./node_modules/hoist-non-react-statics/node_modules/react-is/index.js");
 
 /**
  * Copyright 2015, Yahoo! Inc.
@@ -25918,6 +26514,216 @@ function hoistNonReactStatics(targetComponent, sourceComponent, blacklist) {
 module.exports = hoistNonReactStatics;
 
 
+/***/ }),
+
+/***/ "./node_modules/hoist-non-react-statics/node_modules/react-is/cjs/react-is.development.js":
+/*!************************************************************************************************!*\
+  !*** ./node_modules/hoist-non-react-statics/node_modules/react-is/cjs/react-is.development.js ***!
+  \************************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/** @license React v16.13.1
+ * react-is.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+
+
+
+
+if (true) {
+  (function() {
+'use strict';
+
+// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
+// nor polyfill, then a plain number is used for performance.
+var hasSymbol = typeof Symbol === 'function' && Symbol.for;
+var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for('react.element') : 0xeac7;
+var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for('react.portal') : 0xeaca;
+var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for('react.fragment') : 0xeacb;
+var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for('react.strict_mode') : 0xeacc;
+var REACT_PROFILER_TYPE = hasSymbol ? Symbol.for('react.profiler') : 0xead2;
+var REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for('react.provider') : 0xeacd;
+var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace; // TODO: We don't use AsyncMode or ConcurrentMode anymore. They were temporary
+// (unstable) APIs that have been removed. Can we remove the symbols?
+
+var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol.for('react.async_mode') : 0xeacf;
+var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for('react.concurrent_mode') : 0xeacf;
+var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
+var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for('react.suspense') : 0xead1;
+var REACT_SUSPENSE_LIST_TYPE = hasSymbol ? Symbol.for('react.suspense_list') : 0xead8;
+var REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
+var REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;
+var REACT_BLOCK_TYPE = hasSymbol ? Symbol.for('react.block') : 0xead9;
+var REACT_FUNDAMENTAL_TYPE = hasSymbol ? Symbol.for('react.fundamental') : 0xead5;
+var REACT_RESPONDER_TYPE = hasSymbol ? Symbol.for('react.responder') : 0xead6;
+var REACT_SCOPE_TYPE = hasSymbol ? Symbol.for('react.scope') : 0xead7;
+
+function isValidElementType(type) {
+  return typeof type === 'string' || typeof type === 'function' || // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
+  type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || typeof type === 'object' && type !== null && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_RESPONDER_TYPE || type.$$typeof === REACT_SCOPE_TYPE || type.$$typeof === REACT_BLOCK_TYPE);
+}
+
+function typeOf(object) {
+  if (typeof object === 'object' && object !== null) {
+    var $$typeof = object.$$typeof;
+
+    switch ($$typeof) {
+      case REACT_ELEMENT_TYPE:
+        var type = object.type;
+
+        switch (type) {
+          case REACT_ASYNC_MODE_TYPE:
+          case REACT_CONCURRENT_MODE_TYPE:
+          case REACT_FRAGMENT_TYPE:
+          case REACT_PROFILER_TYPE:
+          case REACT_STRICT_MODE_TYPE:
+          case REACT_SUSPENSE_TYPE:
+            return type;
+
+          default:
+            var $$typeofType = type && type.$$typeof;
+
+            switch ($$typeofType) {
+              case REACT_CONTEXT_TYPE:
+              case REACT_FORWARD_REF_TYPE:
+              case REACT_LAZY_TYPE:
+              case REACT_MEMO_TYPE:
+              case REACT_PROVIDER_TYPE:
+                return $$typeofType;
+
+              default:
+                return $$typeof;
+            }
+
+        }
+
+      case REACT_PORTAL_TYPE:
+        return $$typeof;
+    }
+  }
+
+  return undefined;
+} // AsyncMode is deprecated along with isAsyncMode
+
+var AsyncMode = REACT_ASYNC_MODE_TYPE;
+var ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
+var ContextConsumer = REACT_CONTEXT_TYPE;
+var ContextProvider = REACT_PROVIDER_TYPE;
+var Element = REACT_ELEMENT_TYPE;
+var ForwardRef = REACT_FORWARD_REF_TYPE;
+var Fragment = REACT_FRAGMENT_TYPE;
+var Lazy = REACT_LAZY_TYPE;
+var Memo = REACT_MEMO_TYPE;
+var Portal = REACT_PORTAL_TYPE;
+var Profiler = REACT_PROFILER_TYPE;
+var StrictMode = REACT_STRICT_MODE_TYPE;
+var Suspense = REACT_SUSPENSE_TYPE;
+var hasWarnedAboutDeprecatedIsAsyncMode = false; // AsyncMode should be deprecated
+
+function isAsyncMode(object) {
+  {
+    if (!hasWarnedAboutDeprecatedIsAsyncMode) {
+      hasWarnedAboutDeprecatedIsAsyncMode = true; // Using console['warn'] to evade Babel and ESLint
+
+      console['warn']('The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 17+. Update your code to use ' + 'ReactIs.isConcurrentMode() instead. It has the exact same API.');
+    }
+  }
+
+  return isConcurrentMode(object) || typeOf(object) === REACT_ASYNC_MODE_TYPE;
+}
+function isConcurrentMode(object) {
+  return typeOf(object) === REACT_CONCURRENT_MODE_TYPE;
+}
+function isContextConsumer(object) {
+  return typeOf(object) === REACT_CONTEXT_TYPE;
+}
+function isContextProvider(object) {
+  return typeOf(object) === REACT_PROVIDER_TYPE;
+}
+function isElement(object) {
+  return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
+}
+function isForwardRef(object) {
+  return typeOf(object) === REACT_FORWARD_REF_TYPE;
+}
+function isFragment(object) {
+  return typeOf(object) === REACT_FRAGMENT_TYPE;
+}
+function isLazy(object) {
+  return typeOf(object) === REACT_LAZY_TYPE;
+}
+function isMemo(object) {
+  return typeOf(object) === REACT_MEMO_TYPE;
+}
+function isPortal(object) {
+  return typeOf(object) === REACT_PORTAL_TYPE;
+}
+function isProfiler(object) {
+  return typeOf(object) === REACT_PROFILER_TYPE;
+}
+function isStrictMode(object) {
+  return typeOf(object) === REACT_STRICT_MODE_TYPE;
+}
+function isSuspense(object) {
+  return typeOf(object) === REACT_SUSPENSE_TYPE;
+}
+
+exports.AsyncMode = AsyncMode;
+exports.ConcurrentMode = ConcurrentMode;
+exports.ContextConsumer = ContextConsumer;
+exports.ContextProvider = ContextProvider;
+exports.Element = Element;
+exports.ForwardRef = ForwardRef;
+exports.Fragment = Fragment;
+exports.Lazy = Lazy;
+exports.Memo = Memo;
+exports.Portal = Portal;
+exports.Profiler = Profiler;
+exports.StrictMode = StrictMode;
+exports.Suspense = Suspense;
+exports.isAsyncMode = isAsyncMode;
+exports.isConcurrentMode = isConcurrentMode;
+exports.isContextConsumer = isContextConsumer;
+exports.isContextProvider = isContextProvider;
+exports.isElement = isElement;
+exports.isForwardRef = isForwardRef;
+exports.isFragment = isFragment;
+exports.isLazy = isLazy;
+exports.isMemo = isMemo;
+exports.isPortal = isPortal;
+exports.isProfiler = isProfiler;
+exports.isStrictMode = isStrictMode;
+exports.isSuspense = isSuspense;
+exports.isValidElementType = isValidElementType;
+exports.typeOf = typeOf;
+  })();
+}
+
+
+/***/ }),
+
+/***/ "./node_modules/hoist-non-react-statics/node_modules/react-is/index.js":
+/*!*****************************************************************************!*\
+  !*** ./node_modules/hoist-non-react-statics/node_modules/react-is/index.js ***!
+  \*****************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+if (false) {} else {
+  module.exports = __webpack_require__(/*! ./cjs/react-is.development.js */ "./node_modules/hoist-non-react-statics/node_modules/react-is/cjs/react-is.development.js");
+}
+
+
 /***/ }),
 
 /***/ "./node_modules/lodash/_Symbol.js":
@@ -28012,7 +28818,8 @@ process.umask = function() { return 0; };
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-/** @license React v16.13.1
+/**
+ * @license React
  * react-is.development.js
  *
  * Copyright (c) Facebook, Inc. and its affiliates.
@@ -28023,39 +28830,68 @@ process.umask = function() { return 0; };
 
 
 
-
-
 if (true) {
   (function() {
 'use strict';
 
-// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
-// nor polyfill, then a plain number is used for performance.
-var hasSymbol = typeof Symbol === 'function' && Symbol.for;
-var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for('react.element') : 0xeac7;
-var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for('react.portal') : 0xeaca;
-var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for('react.fragment') : 0xeacb;
-var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for('react.strict_mode') : 0xeacc;
-var REACT_PROFILER_TYPE = hasSymbol ? Symbol.for('react.profiler') : 0xead2;
-var REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for('react.provider') : 0xeacd;
-var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace; // TODO: We don't use AsyncMode or ConcurrentMode anymore. They were temporary
-// (unstable) APIs that have been removed. Can we remove the symbols?
+// ATTENTION
+// When adding new symbols to this file,
+// Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
+// The Symbol used to tag the ReactElement-like types.
+var REACT_ELEMENT_TYPE = Symbol.for('react.element');
+var REACT_PORTAL_TYPE = Symbol.for('react.portal');
+var REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
+var REACT_STRICT_MODE_TYPE = Symbol.for('react.strict_mode');
+var REACT_PROFILER_TYPE = Symbol.for('react.profiler');
+var REACT_PROVIDER_TYPE = Symbol.for('react.provider');
+var REACT_CONTEXT_TYPE = Symbol.for('react.context');
+var REACT_SERVER_CONTEXT_TYPE = Symbol.for('react.server_context');
+var REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
+var REACT_SUSPENSE_TYPE = Symbol.for('react.suspense');
+var REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list');
+var REACT_MEMO_TYPE = Symbol.for('react.memo');
+var REACT_LAZY_TYPE = Symbol.for('react.lazy');
+var REACT_OFFSCREEN_TYPE = Symbol.for('react.offscreen');
 
-var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol.for('react.async_mode') : 0xeacf;
-var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for('react.concurrent_mode') : 0xeacf;
-var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
-var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for('react.suspense') : 0xead1;
-var REACT_SUSPENSE_LIST_TYPE = hasSymbol ? Symbol.for('react.suspense_list') : 0xead8;
-var REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
-var REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;
-var REACT_BLOCK_TYPE = hasSymbol ? Symbol.for('react.block') : 0xead9;
-var REACT_FUNDAMENTAL_TYPE = hasSymbol ? Symbol.for('react.fundamental') : 0xead5;
-var REACT_RESPONDER_TYPE = hasSymbol ? Symbol.for('react.responder') : 0xead6;
-var REACT_SCOPE_TYPE = hasSymbol ? Symbol.for('react.scope') : 0xead7;
+// -----------------------------------------------------------------------------
+
+var enableScopeAPI = false; // Experimental Create Event Handle API.
+var enableCacheElement = false;
+var enableTransitionTracing = false; // No known bugs, but needs performance testing
+
+var enableLegacyHidden = false; // Enables unstable_avoidThisFallback feature in Fiber
+// stuff. Intended to enable React core members to more easily debug scheduling
+// issues in DEV builds.
+
+var enableDebugTracing = false; // Track which Fiber(s) schedule render work.
+
+var REACT_MODULE_REFERENCE;
+
+{
+  REACT_MODULE_REFERENCE = Symbol.for('react.module.reference');
+}
 
 function isValidElementType(type) {
-  return typeof type === 'string' || typeof type === 'function' || // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
-  type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || typeof type === 'object' && type !== null && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_RESPONDER_TYPE || type.$$typeof === REACT_SCOPE_TYPE || type.$$typeof === REACT_BLOCK_TYPE);
+  if (typeof type === 'string' || typeof type === 'function') {
+    return true;
+  } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill).
+
+
+  if (type === REACT_FRAGMENT_TYPE || type === REACT_PROFILER_TYPE || enableDebugTracing  || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || enableLegacyHidden  || type === REACT_OFFSCREEN_TYPE || enableScopeAPI  || enableCacheElement  || enableTransitionTracing ) {
+    return true;
+  }
+
+  if (typeof type === 'object' && type !== null) {
+    if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || // This needs to include all possible module reference object
+    // types supported by any Flight configuration anywhere since
+    // we don't know which Flight build this will end up being used
+    // with.
+    type.$$typeof === REACT_MODULE_REFERENCE || type.getModuleId !== undefined) {
+      return true;
+    }
+  }
+
+  return false;
 }
 
 function typeOf(object) {
@@ -28067,18 +28903,18 @@ function typeOf(object) {
         var type = object.type;
 
         switch (type) {
-          case REACT_ASYNC_MODE_TYPE:
-          case REACT_CONCURRENT_MODE_TYPE:
           case REACT_FRAGMENT_TYPE:
           case REACT_PROFILER_TYPE:
           case REACT_STRICT_MODE_TYPE:
           case REACT_SUSPENSE_TYPE:
+          case REACT_SUSPENSE_LIST_TYPE:
             return type;
 
           default:
             var $$typeofType = type && type.$$typeof;
 
             switch ($$typeofType) {
+              case REACT_SERVER_CONTEXT_TYPE:
               case REACT_CONTEXT_TYPE:
               case REACT_FORWARD_REF_TYPE:
               case REACT_LAZY_TYPE:
@@ -28098,10 +28934,7 @@ function typeOf(object) {
   }
 
   return undefined;
-} // AsyncMode is deprecated along with isAsyncMode
-
-var AsyncMode = REACT_ASYNC_MODE_TYPE;
-var ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
+}
 var ContextConsumer = REACT_CONTEXT_TYPE;
 var ContextProvider = REACT_PROVIDER_TYPE;
 var Element = REACT_ELEMENT_TYPE;
@@ -28113,21 +28946,31 @@ var Portal = REACT_PORTAL_TYPE;
 var Profiler = REACT_PROFILER_TYPE;
 var StrictMode = REACT_STRICT_MODE_TYPE;
 var Suspense = REACT_SUSPENSE_TYPE;
-var hasWarnedAboutDeprecatedIsAsyncMode = false; // AsyncMode should be deprecated
+var SuspenseList = REACT_SUSPENSE_LIST_TYPE;
+var hasWarnedAboutDeprecatedIsAsyncMode = false;
+var hasWarnedAboutDeprecatedIsConcurrentMode = false; // AsyncMode should be deprecated
 
 function isAsyncMode(object) {
   {
     if (!hasWarnedAboutDeprecatedIsAsyncMode) {
       hasWarnedAboutDeprecatedIsAsyncMode = true; // Using console['warn'] to evade Babel and ESLint
 
-      console['warn']('The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 17+. Update your code to use ' + 'ReactIs.isConcurrentMode() instead. It has the exact same API.');
+      console['warn']('The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 18+.');
     }
   }
 
-  return isConcurrentMode(object) || typeOf(object) === REACT_ASYNC_MODE_TYPE;
+  return false;
 }
 function isConcurrentMode(object) {
-  return typeOf(object) === REACT_CONCURRENT_MODE_TYPE;
+  {
+    if (!hasWarnedAboutDeprecatedIsConcurrentMode) {
+      hasWarnedAboutDeprecatedIsConcurrentMode = true; // Using console['warn'] to evade Babel and ESLint
+
+      console['warn']('The ReactIs.isConcurrentMode() alias has been deprecated, ' + 'and will be removed in React 18+.');
+    }
+  }
+
+  return false;
 }
 function isContextConsumer(object) {
   return typeOf(object) === REACT_CONTEXT_TYPE;
@@ -28162,9 +29005,10 @@ function isStrictMode(object) {
 function isSuspense(object) {
   return typeOf(object) === REACT_SUSPENSE_TYPE;
 }
+function isSuspenseList(object) {
+  return typeOf(object) === REACT_SUSPENSE_LIST_TYPE;
+}
 
-exports.AsyncMode = AsyncMode;
-exports.ConcurrentMode = ConcurrentMode;
 exports.ContextConsumer = ContextConsumer;
 exports.ContextProvider = ContextProvider;
 exports.Element = Element;
@@ -28176,6 +29020,7 @@ exports.Portal = Portal;
 exports.Profiler = Profiler;
 exports.StrictMode = StrictMode;
 exports.Suspense = Suspense;
+exports.SuspenseList = SuspenseList;
 exports.isAsyncMode = isAsyncMode;
 exports.isConcurrentMode = isConcurrentMode;
 exports.isContextConsumer = isContextConsumer;
@@ -28189,6 +29034,7 @@ exports.isPortal = isPortal;
 exports.isProfiler = isProfiler;
 exports.isStrictMode = isStrictMode;
 exports.isSuspense = isSuspense;
+exports.isSuspenseList = isSuspenseList;
 exports.isValidElementType = isValidElementType;
 exports.typeOf = typeOf;
   })();