tdesign-react 0.30.0 → 0.30.3-alpha.1

package/dist/tdesign.js

@@ -1,5 +1,5 @@
 /**
- * tdesign v0.30.0
+ * tdesign v0.30.3-alpha.1
  * (c) 2022 tdesign
  * @license MIT
  */
@@ -2739,7 +2739,16 @@
       filterInputPlaceholder: "\u8BF7\u8F93\u5165\u5185\u5BB9\uFF08\u65E0\u9ED8\u8BA4\u503C\uFF09",
       sortAscendingOperationText: "\u70B9\u51FB\u5347\u5E8F",
       sortCancelOperationText: "\u70B9\u51FB\u53D6\u6D88\u6392\u5E8F",
-      sortDescendingOperationText: "\u70B9\u51FB\u964D\u5E8F"
+      sortDescendingOperationText: "\u70B9\u51FB\u964D\u5E8F",
+      clearFilterResultButtonText: "\u6E05\u7A7A\u7B5B\u9009",
+      columnConfigButtonText: "\u5217\u914D\u7F6E",
+      columnConfigTitleText: "\u8868\u683C\u5217\u914D\u7F6E",
+      columnConfigDescriptionText: "\u8BF7\u9009\u62E9\u9700\u8981\u5728\u8868\u683C\u4E2D\u663E\u793A\u7684\u6570\u636E\u5217",
+      confirmText: "\u786E\u8BA4",
+      cancelText: "\u53D6\u6D88",
+      resetText: "\u91CD\u7F6E",
+      selectAllText: "\u5168\u9009",
+      searchResultText: "\u641C\u7D22\u201C{result}\u201D\uFF0C\u627E\u5230 {count} \u6761\u7ED3\u679C"
     },
     select: {
       empty: "\u6682\u65E0\u6570\u636E",
@@ -3987,6 +3996,8 @@
     }, commonContent()) : null;
   };
 
+  Loading$1.displayName = "Loading";
+
   function ownKeys$25(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
   function _objectSpread$25(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$25(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$25(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -26891,8 +26902,8 @@
     };
 
     var handleInputChange = function handleInputChange(value2) {
-      if (selectedLabel === value2) return;
       onInputChange(value2);
+      if (selectedLabel === value2) return;
 
       if (isFunction_1(onSearch)) {
         onSearch(value2);
@@ -27343,6 +27354,7 @@
     }, renderPaginationBtns), theme === "simple" && /* @__PURE__ */React__default["default"].createElement("div", {
       className: "".concat(name, "__select")
     }, /* @__PURE__ */React__default["default"].createElement(Select, {
+      autoWidth: true,
       size: size,
       value: current,
       disabled: disabled,
@@ -28506,8 +28518,7 @@
       return /* @__PURE__ */React__default["default"].createElement("table", {
         ref: tableRef,
         style: {
-          tableLayout: tableLayout,
-          height: "100%"
+          tableLayout: tableLayout
         }
       }, /* @__PURE__ */React__default["default"].createElement(TableColGroup, {
         columns: columns
@@ -30501,7 +30512,8 @@
         disabled = _props$disabled === void 0 ? false : _props$disabled,
         index = props.index,
         _props$onTabRemove = props.onTabRemove,
-        onTabRemove = _props$onTabRemove === void 0 ? noop$1 : _props$onTabRemove;
+        onTabRemove = _props$onTabRemove === void 0 ? noop$1 : _props$onTabRemove,
+        innerRef = props.innerRef;
     var isCard = theme === "card";
 
     var _useTabClass = useTabClass(),
@@ -30512,6 +30524,7 @@
     var rippleRef = React.useRef();
     useRipple(rippleRef);
     return /* @__PURE__ */React__default["default"].createElement("div", {
+      ref: innerRef,
       onClick: disabled ? noop$1 : onClick,
       className: classNames$1(tdTabsClassGenerator("nav-item"), isCard ? tdTabsClassGenerator("nav--card") : "", tdSizeClassGenerator(size), isActive ? tdClassGenerator("is-active") : "", tdClassGenerator("is-".concat(placement)), disabled ? tdClassGenerator("is-disabled") : "")
     }, isCard ? /* @__PURE__ */React__default["default"].createElement("span", {
@@ -30608,9 +30621,155 @@
 
   TabBar.displayName = "TabBar";
 
+  var getDomWidth = function getDomWidth(dom) {
+    return (dom === null || dom === void 0 ? void 0 : dom.offsetWidth) || 0;
+  };
+
+  var tabBase = {
+    calcScrollLeft: function calcScrollLeft(elements, scrollLeft) {
+      var container = elements.navsContainer;
+      var wrap = elements.navsWrap;
+      var rightOperations = elements.rightOperations;
+      var rightOperationsZoneWidth = getDomWidth(rightOperations);
+      if (!wrap || !container) return scrollLeft;
+      var containerWidth = getDomWidth(container);
+      var wrapWidth = getDomWidth(wrap);
+
+      if (wrapWidth <= containerWidth) {
+        return 0;
+      }
+
+      if (scrollLeft + containerWidth - rightOperationsZoneWidth > wrapWidth) {
+        return wrapWidth + rightOperationsZoneWidth - containerWidth;
+      }
+
+      return scrollLeft;
+    },
+    calculateCanToLeft: function calculateCanToLeft(depElement, scrollLeft, placement) {
+      if (["left", "right"].includes(placement.toLowerCase())) {
+        return false;
+      }
+
+      var container = depElement.navsContainer,
+          wrap = depElement.navsWrap,
+          leftOperations = depElement.leftOperations,
+          toLeftBtn = depElement.toLeftBtn;
+
+      if (!wrap || !container) {
+        return false;
+      }
+
+      var leftOperationsZoneWidth = getDomWidth(leftOperations);
+      var leftIconWidth = getDomWidth(toLeftBtn);
+      return scrollLeft + Math.round(leftOperationsZoneWidth - leftIconWidth) > 0;
+    },
+    calculateCanToRight: function calculateCanToRight(depElement, scrollLeft, placement) {
+      if (["left", "right"].includes(placement.toLowerCase())) {
+        return false;
+      }
+
+      var container = depElement.navsContainer,
+          wrap = depElement.navsWrap,
+          rightOperations = depElement.rightOperations,
+          toRightBtn = depElement.toRightBtn;
+
+      if (!wrap || !container) {
+        return false;
+      }
+
+      var rightOperationsZoneWidth = getDomWidth(rightOperations);
+      var rightIconWidth = getDomWidth(toRightBtn);
+      return scrollLeft + getDomWidth(container) - (rightOperationsZoneWidth - rightIconWidth) - getDomWidth(wrap) < -1;
+    },
+    moveActiveTabIntoView: function moveActiveTabIntoView(depElement, scrollLeft) {
+      var activeTab = depElement.activeTab,
+          container = depElement.navsContainer,
+          navsWrap = depElement.navsWrap,
+          leftOperations = depElement.leftOperations,
+          toLeftBtn = depElement.toLeftBtn,
+          rightOperations = depElement.rightOperations,
+          toRightBtn = depElement.toRightBtn;
+      if (!activeTab) return scrollLeft;
+      var totalWidthBeforeActiveTab = activeTab.offsetLeft;
+      if (!container) return scrollLeft;
+
+      var _getLeftCoverWidth = function _getLeftCoverWidth() {
+        var leftOperationsZoneWidth = getDomWidth(leftOperations);
+        var leftIconWidth = getDomWidth(toLeftBtn);
+
+        if (totalWidthBeforeActiveTab === 0) {
+          return leftOperationsZoneWidth - leftIconWidth;
+        }
+
+        return leftOperationsZoneWidth;
+      };
+
+      var leftCoverWidth = _getLeftCoverWidth();
+
+      var isCurrentTabHiddenInLeftZone = scrollLeft + leftCoverWidth > totalWidthBeforeActiveTab;
+
+      if (isCurrentTabHiddenInLeftZone) {
+        return totalWidthBeforeActiveTab - leftCoverWidth;
+      }
+
+      var activeTabWidth = activeTab.offsetWidth;
+      if (!container || !navsWrap) return scrollLeft;
+      var containerWidth = getDomWidth(container);
+
+      var _getRightCoverWidth = function _getRightCoverWidth() {
+        var rightOperationsZoneWidth = getDomWidth(rightOperations);
+        var rightIconWidth = getDomWidth(toRightBtn);
+        var wrapWidth = getDomWidth(navsWrap);
+
+        if (Math.abs(totalWidthBeforeActiveTab + activeTabWidth - wrapWidth) < 1) {
+          return rightOperationsZoneWidth - rightIconWidth;
+        }
+
+        return rightOperationsZoneWidth;
+      };
+
+      var rightCoverWidth = _getRightCoverWidth();
+
+      var isHiddenInRightZone = scrollLeft + containerWidth - rightCoverWidth < totalWidthBeforeActiveTab + activeTabWidth;
+
+      if (isHiddenInRightZone) {
+        return totalWidthBeforeActiveTab + activeTabWidth - containerWidth + rightCoverWidth;
+      }
+
+      return scrollLeft;
+    },
+    scrollToLeft: function scrollToLeft(depElement, scrollLeft) {
+      var container = depElement.navsContainer,
+          leftOperations = depElement.leftOperations,
+          toLeftBtn = depElement.toLeftBtn;
+      if (!container) return 0;
+      var leftOperationsZoneWidth = getDomWidth(leftOperations);
+      var leftIconWidth = getDomWidth(toLeftBtn);
+      var containerWidth = getDomWidth(container);
+      return Math.max(-(leftOperationsZoneWidth - leftIconWidth), scrollLeft - containerWidth);
+    },
+    scrollToRight: function scrollToRight(depElement, scrollLeft) {
+      var container = depElement.navsContainer,
+          wrap = depElement.navsWrap,
+          rightOperations = depElement.rightOperations,
+          toRightBtn = depElement.toRightBtn;
+      var rightOperationsZoneWidth = getDomWidth(rightOperations);
+      var rightIconWidth = getDomWidth(toRightBtn);
+      var containerWidth = getDomWidth(container);
+      var wrapWidth = getDomWidth(wrap);
+      return Math.min(scrollLeft + containerWidth, wrapWidth - containerWidth + rightOperationsZoneWidth - rightIconWidth);
+    }
+  };
+
   function ownKeys$N(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
   function _objectSpread$N(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$N(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$N(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+  var moveActiveTabIntoView = tabBase.moveActiveTabIntoView,
+      calcScrollLeft = tabBase.calcScrollLeft,
+      scrollToLeft = tabBase.scrollToLeft,
+      scrollToRight = tabBase.scrollToRight,
+      calculateCanToLeft = tabBase.calculateCanToLeft,
+      calculateCanToRight = tabBase.calculateCanToRight;
 
   var TabNav = function TabNav(props) {
     var _props$placement = props.placement,
@@ -30637,107 +30796,120 @@
         tdClassGenerator = _useTabClass.tdClassGenerator,
         tdSizeClassGenerator = _useTabClass.tdSizeClassGenerator;
 
-    var navContainerRef = React.useRef(null);
+    var navsContainerRef = React.useRef(null);
+    var navsWrapRef = React.useRef(null);
     var getIndex = React.useCallback(function (value) {
-      var index = 0;
-      itemList.forEach(function (v, i) {
-        if (v.value === value) {
-          index = i;
-        }
+      var index = itemList.findIndex(function (item) {
+        return item.value === value;
       });
-      return index;
+      return index > -1 ? index : 0;
     }, [itemList]);
     var activeIndex = getIndex(activeValue);
 
     var _useState = React.useState(false),
         _useState2 = _slicedToArray(_useState, 2),
-        isScrollVisible = _useState2[0],
-        setIsScrollVisible = _useState2[1];
+        canToLeft = _useState2[0],
+        setToLeftBtnVisible = _useState2[1];
 
     var _useState3 = React.useState(false),
         _useState4 = _slicedToArray(_useState3, 2),
-        leftScrollBtnVisible = _useState4[0],
-        setLeftScrollBtnVisible = _useState4[1];
-
-    var _useState5 = React.useState(false),
-        _useState6 = _slicedToArray(_useState5, 2),
-        rightScrollBtnVisible = _useState6[0],
-        setRightScrollBtnVisible = _useState6[1];
+        canToRight = _useState4[0],
+        setToRightBtnVisible = _useState4[1];
 
     var scrollBarRef = React.useRef(null);
-    var leftScrollBtnRef = React.useRef(null);
-    var rightScrollBtnRef = React.useRef(null);
-
-    var getScrollBtnVisible = function getScrollBtnVisible() {
-      var scrollLeft = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : void 0;
-
-      if (!scrollBarRef.current || !navContainerRef.current) {
-        console.error("[tdesign-tabs]\u6EDA\u52A8\u6761\u548C\u5185\u5BB9\u533A dom \u7ED3\u6784\u5F02\u5E38");
-        return [false, false, false];
-      }
+    var leftOperationsRef = React.useRef(null);
+    var rightOperationsRef = React.useRef(null);
+    var toLeftBtnRef = React.useRef(null);
+    var toRightBtnRef = React.useRef(null);
 
-      var innerScrollLeft = scrollBarRef.current.scrollLeft;
-
-      if (scrollLeft !== void 0) {
-        innerScrollLeft = scrollLeft;
-      }
-
-      var isScrollVisible2 = scrollBarRef.current.clientWidth < navContainerRef.current.clientWidth;
-      var leftVisible = innerScrollLeft > 0;
-      var rightVisible = isScrollVisible2 && innerScrollLeft < navContainerRef.current.clientWidth - scrollBarRef.current.clientWidth;
-      return [isScrollVisible2, leftVisible, rightVisible];
-    };
-
-    var setScrollBtnVisibleHandler = function setScrollBtnVisibleHandler() {
-      var scrollLeft = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : void 0;
-
-      var _getScrollBtnVisible = getScrollBtnVisible(scrollLeft),
-          _getScrollBtnVisible2 = _slicedToArray(_getScrollBtnVisible, 3),
-          isScrollVisible2 = _getScrollBtnVisible2[0],
-          leftVisible = _getScrollBtnVisible2[1],
-          rightVisible = _getScrollBtnVisible2[2];
-
-      setIsScrollVisible(isScrollVisible2);
-      setLeftScrollBtnVisible(leftVisible);
-      setRightScrollBtnVisible(rightVisible);
-    };
-
-    var scrollClickHandler = function scrollClickHandler(position) {
-      var _leftScrollBtnRef$cur, _rightScrollBtnRef$cu;
-
-      var doubleScrollBtnWidth = (((_leftScrollBtnRef$cur = leftScrollBtnRef.current) === null || _leftScrollBtnRef$cur === void 0 ? void 0 : _leftScrollBtnRef$cur.clientWidth) || ((_rightScrollBtnRef$cu = rightScrollBtnRef.current) === null || _rightScrollBtnRef$cu === void 0 ? void 0 : _rightScrollBtnRef$cu.clientWidth) || 0) * 2;
-      var scrollLength = scrollBarRef.current.clientWidth - doubleScrollBtnWidth;
-      var ref = scrollBarRef.current;
+    var _useState5 = React.useState(0),
+        _useState6 = _slicedToArray(_useState5, 2),
+        scrollLeft = _useState6[0],
+        setScrollLeft = _useState6[1];
 
-      if (ref) {
-        var scrollLeft = position === "left" ? ref.scrollLeft - scrollLength : ref.scrollLeft + scrollLength;
-        ref.scrollTo({
-          left: scrollLeft,
-          behavior: "smooth"
-        });
-        setScrollBtnVisibleHandler(scrollLeft);
-      }
-    };
+    var _useState7 = React.useState(null),
+        _useState8 = _slicedToArray(_useState7, 2),
+        activeTab = _useState8[0],
+        setActiveTab = _useState8[1];
 
-    var scrollToRightEnd = function scrollToRightEnd() {
-      if (navContainerRef.current && scrollBarRef.current) {
-        var scrollLeft = navContainerRef.current.clientWidth - scrollBarRef.current.clientWidth;
-        scrollBarRef.current.scrollTo({
-          left: scrollLeft,
-          behavior: "smooth"
-        });
-        setScrollBtnVisibleHandler(scrollLeft);
-      }
+    React.useEffect(function () {
+      var left = moveActiveTabIntoView({
+        activeTab: activeTab,
+        navsContainer: navsContainerRef.current,
+        navsWrap: navsWrapRef.current,
+        toLeftBtn: toLeftBtnRef.current,
+        toRightBtn: toRightBtnRef.current,
+        leftOperations: leftOperationsRef.current,
+        rightOperations: rightOperationsRef.current
+      }, scrollLeft);
+      setScrollLeft(left);
+    }, [activeTab, scrollLeft]);
+    var setScrollBtnVisibleHandler = React.useCallback(function () {
+      var canToleft = calculateCanToLeft({
+        navsContainer: navsContainerRef.current,
+        navsWrap: navsWrapRef.current,
+        leftOperations: leftOperationsRef.current,
+        toLeftBtn: toLeftBtnRef.current
+      }, scrollLeft, placement);
+      var canToRight2 = calculateCanToRight({
+        navsContainer: navsContainerRef.current,
+        navsWrap: navsWrapRef.current,
+        rightOperations: rightOperationsRef.current,
+        toRightBtn: toRightBtnRef.current
+      }, scrollLeft, placement);
+      setToLeftBtnVisible(canToleft);
+      setToRightBtnVisible(canToRight2);
+    }, [scrollLeft, placement]);
+
+    var handleScroll = function handleScroll(position) {
+      var val = position === "left" ? scrollToLeft({
+        navsContainer: navsContainerRef.current,
+        leftOperations: leftOperationsRef.current,
+        toLeftBtn: toLeftBtnRef.current
+      }, scrollLeft) : scrollToRight({
+        navsWrap: navsWrapRef.current,
+        navsContainer: navsContainerRef.current,
+        rightOperations: rightOperationsRef.current,
+        toRightBtn: toRightBtnRef.current
+      }, scrollLeft);
+      setScrollLeft(val);
     };
 
+    React.useEffect(function () {
+      var onResize = debounce_1(function () {
+        if (["top", "bottom"].includes(placement.toLowerCase())) {
+          var left = calcScrollLeft({
+            navsContainer: navsContainerRef.current,
+            navsWrap: navsWrapRef.current,
+            rightOperations: rightOperationsRef.current
+          }, scrollLeft);
+          setScrollLeft(left);
+          setScrollBtnVisibleHandler();
+        }
+      }, 300);
+      window.addEventListener("resize", onResize);
+      return function () {
+        window.removeEventListener("resize", onResize);
+      };
+    });
+    React.useEffect(function () {
+      if (["top", "bottom"].includes(placement.toLowerCase())) {
+        var left = calcScrollLeft({
+          navsContainer: navsContainerRef.current,
+          navsWrap: navsWrapRef.current,
+          rightOperations: rightOperationsRef.current
+        }, scrollLeft);
+        setScrollLeft(left);
+      }
+    }, [itemList.length, scrollLeft, placement]);
     var TabBarCom = isCard ? null : /* @__PURE__ */React__default["default"].createElement(TabBar, {
       tabPosition: placement,
       activeId: activeIndex,
-      containerRef: navContainerRef
+      containerRef: navsWrapRef
     });
     React.useEffect(function () {
       setScrollBtnVisibleHandler();
-    }, [itemList.length]);
+    }, [setScrollBtnVisibleHandler]);
 
     var handleTabItemRemove = function handleTabItemRemove(removeItem) {
       var removeValue = removeItem.value,
@@ -30761,45 +30933,46 @@
       onAdd({
         e: e
       });
-      setTimeout(function () {
-        scrollToRightEnd();
-      }, 0);
     };
 
     return /* @__PURE__ */React__default["default"].createElement("div", {
-      className: classNames$1(tdTabsClassGenerator("header"), tdClassGenerator("is-".concat(placement)))
-    }, /* @__PURE__ */React__default["default"].createElement("div", {
+      ref: navsContainerRef,
       className: classNames$1(tdTabsClassGenerator("nav")),
       style: {
         minHeight: 48
       }
     }, /* @__PURE__ */React__default["default"].createElement("div", {
+      ref: leftOperationsRef,
       className: classNames$1(tdTabsClassGenerator("operations"), tdTabsClassGenerator("operations--left"))
-    }, leftScrollBtnVisible ? /* @__PURE__ */React__default["default"].createElement("div", {
+    }, canToLeft ? /* @__PURE__ */React__default["default"].createElement("div", {
       onClick: function onClick() {
-        scrollClickHandler("left");
+        handleScroll("left");
       },
       className: classNames$1(tdTabsClassGenerator("btn"), tdTabsClassGenerator("btn--left"), tdSizeClassGenerator(size)),
-      ref: leftScrollBtnRef
+      ref: toLeftBtnRef
     }, /* @__PURE__ */React__default["default"].createElement(ChevronLeftIcon, null)) : null), /* @__PURE__ */React__default["default"].createElement("div", {
+      ref: rightOperationsRef,
       className: classNames$1(tdTabsClassGenerator("operations"), tdTabsClassGenerator("operations--right"))
-    }, rightScrollBtnVisible ? /* @__PURE__ */React__default["default"].createElement("div", {
+    }, canToRight ? /* @__PURE__ */React__default["default"].createElement("div", {
       onClick: function onClick() {
-        scrollClickHandler("right");
+        handleScroll("right");
       },
       className: classNames$1(tdTabsClassGenerator("btn"), tdTabsClassGenerator("btn--right"), tdSizeClassGenerator(size)),
-      ref: rightScrollBtnRef
+      ref: toRightBtnRef
     }, /* @__PURE__ */React__default["default"].createElement(ChevronRightIcon, null)) : null, addable ? /* @__PURE__ */React__default["default"].createElement("div", {
       className: classNames$1(tdTabsClassGenerator("add-btn"), tdTabsClassGenerator("btn"), tdSizeClassGenerator(size)),
       onClick: handleTabAdd
     }, /* @__PURE__ */React__default["default"].createElement(AddIcon, null)) : null), /* @__PURE__ */React__default["default"].createElement("div", {
       className: classNames$1(tdTabsClassGenerator("nav-container"), isCard ? tdTabsClassGenerator("nav--card") : "", tdClassGenerator("is-".concat(placement)), addable ? tdClassGenerator("is-addable") : "")
     }, /* @__PURE__ */React__default["default"].createElement("div", {
-      className: classNames$1(tdTabsClassGenerator("nav-scroll"), isScrollVisible ? tdClassGenerator("is-scrollable") : ""),
+      className: classNames$1(tdTabsClassGenerator("nav-scroll"), canToLeft || canToRight ? tdClassGenerator("is-scrollable") : ""),
       ref: scrollBarRef
     }, /* @__PURE__ */React__default["default"].createElement("div", {
-      className: classNames$1(tdTabsClassGenerator("nav-wrap"), ["left", "right"].includes(placement) ? tdClassGenerator("is-vertical") : ""),
-      ref: navContainerRef
+      className: classNames$1(tdTabsClassGenerator("nav-wrap"), ["left", "right"].includes(placement) ? tdClassGenerator("is-vertical") : "", tdClassGenerator("is-smooth")),
+      style: {
+        transform: "translate(".concat(-scrollLeft, "px, 0)")
+      },
+      ref: navsWrapRef
     }, placement !== "bottom" ? TabBarCom : null, !isCard && /* @__PURE__ */React__default["default"].createElement("div", {
       className: classNames$1(tdTabsClassGenerator("bar"), tdClassGenerator("is-".concat(placement)))
     }), itemList.map(function (v, index) {
@@ -30815,9 +30988,14 @@
         onClick: function onClick() {
           return handleTabItemClick(v);
         },
-        onTabRemove: handleTabItemRemove
+        onTabRemove: handleTabItemRemove,
+        innerRef: function innerRef(ref) {
+          if (activeValue === v.value) {
+            setActiveTab(ref);
+          }
+        }
       }));
-    }), placement === "bottom" ? TabBarCom : null)))));
+    }), placement === "bottom" ? TabBarCom : null))));
   };
 
   TabNav.displayName = "TabNav";
@@ -30888,21 +31066,23 @@
       }
     };
 
-    var renderTabNav = function renderTabNav() {
-      return /* @__PURE__ */React__default["default"].createElement(TabNav, _objectSpread$M(_objectSpread$M({}, props), {}, {
+    var renderHeader = function renderHeader() {
+      return /* @__PURE__ */React__default["default"].createElement("div", {
+        className: classNames$1(tdTabsClassGenerator("header"), tdClassGenerator("is-".concat(placement)))
+      }, /* @__PURE__ */React__default["default"].createElement(TabNav, _objectSpread$M(_objectSpread$M({}, props), {}, {
         activeValue: value,
         onRemove: onRemove,
         itemList: itemList,
         tabClick: handleClickTab,
         onChange: handleChange
-      }));
+      })));
     };
 
     return /* @__PURE__ */React__default["default"].createElement("div", {
       ref: ref,
       className: classNames$1(tdTabsClassPrefix, className),
       style: style
-    }, placement !== "bottom" ? renderTabNav() : null, /* @__PURE__ */React__default["default"].createElement("div", {
+    }, placement !== "bottom" ? renderHeader() : null, /* @__PURE__ */React__default["default"].createElement("div", {
       className: classNames$1(tdTabsClassGenerator("content"), tdClassGenerator("is-".concat(placement)))
     }, React__default["default"].Children.map(children, function (child) {
       if (child && child.type === TabPanel$1) {
@@ -30920,11 +31100,14 @@
       }
 
       return null;
-    })), placement === "bottom" ? renderTabNav() : null);
+    })), placement === "bottom" ? renderHeader() : null);
   }, {
     TabPanel: TabPanel$1
   });
   Tabs$1.displayName = "Tabs";
+  Tabs$1.defaultProps = {
+    placement: "top"
+  };
 
   var Tabs = Tabs$1;
 
@@ -32224,8 +32407,7 @@
   function ownKeys$D(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
   function _objectSpread$D(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$D(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$D(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-  var Dialog$1 = function Dialog(props, ref) {
+  var Dialog$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var _useConfig = useConfig$1(),
         classPrefix = _useConfig.classPrefix;
 
@@ -32393,9 +32575,8 @@
       onClose: onClose,
       footer: footer === void 0 ? defaultFooter() : footer
     }));
-  };
-
-  var _Dialog = /*#__PURE__*/React.forwardRef(Dialog$1);
+  });
+  Dialog$1.displayName = "Dialog";
 
   function ownKeys$C(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -32407,7 +32588,7 @@
     var options = _objectSpread$C({}, props);
 
     var div = document.createElement("div");
-    ReactDOM__default["default"].render( /* @__PURE__ */React__default["default"].createElement(_Dialog, _objectSpread$C(_objectSpread$C({}, options), {}, {
+    ReactDOM__default["default"].render( /* @__PURE__ */React__default["default"].createElement(Dialog$1, _objectSpread$C(_objectSpread$C({}, options), {}, {
       visible: true,
       ref: dialogRef,
       isPlugin: true
@@ -32460,7 +32641,7 @@
   createDialog.confirm = confirm;
   var DialogPlugin$1 = createDialog;
 
-  var Dialog = _Dialog;
+  var Dialog = Dialog$1;
   var dialog = DialogPlugin$1;
   var DialogPlugin = DialogPlugin$1;
 
@@ -42221,7 +42402,7 @@
         onError = _ref.onError,
         onProgress = _ref.onProgress,
         onSuccess = _ref.onSuccess;
-    var innerFiles = Array.isArray(files) ? files : [file];
+    var innerFiles = files || [];
     var xhr2 = new XMLHttpRequest();
 
     if (withCredentials) {
@@ -42234,7 +42415,7 @@
       formData.append(key, data[key]);
     });
     innerFiles.forEach(function (f) {
-      formData.append(name, f.raw);
+      formData.append(name, f && f.raw);
     });
     xhr2.open(method, action, true);
     Object.keys(headers).forEach(function (key) {
@@ -42464,7 +42645,7 @@
       }, /* @__PURE__ */React__default["default"].createElement(Loading, {
         loading: true,
         size: "medium"
-      }), /* @__PURE__ */React__default["default"].createElement("p", null, t(locale.progress.uploadingText), " ", Math.min(files[0].percent, 99), "%"))));
+      }), /* @__PURE__ */React__default["default"].createElement("p", null, t(locale.progress.uploadingText), " ", Math.min(files[index].percent, 99), "%"))));
     })), /* @__PURE__ */React__default["default"].createElement(BooleanRender, {
       boolExpression: showTrigger
     }, /* @__PURE__ */React__default["default"].createElement("li", {
@@ -45024,7 +45205,7 @@
       filterRules.length && validate$1("change");
     }, [formValue]);
     React.useEffect(function () {
-      if (!name) return;
+      if (!name || !formItemsRef || !formItemsRef.current) return;
       formItemsRef.current.push(currentFormItemRef);
       return function () {
         var index = formItemsRef.current.indexOf(currentFormItemRef);
@@ -45814,7 +45995,7 @@
 
   function _objectSpread$i(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$i(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$i(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-  var PopContent = function PopContent(props) {
+  var Popcontent = function Popcontent(props) {
     var content = props.content,
         cancelBtn = props.cancelBtn,
         confirmBtn = props.confirmBtn,
@@ -45952,12 +46133,12 @@
     }, renderConfirm())));
   };
 
-  PopContent.displayName = "PopContent";
+  Popcontent.displayName = "Popcontent";
 
   function ownKeys$h(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
   function _objectSpread$h(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$h(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$h(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-  var PopConfirm$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var Popconfirm$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var _useConfig = useConfig$1(),
         classPrefix = _useConfig.classPrefix;
 
@@ -45985,7 +46166,7 @@
         return setVisible(visible2);
       },
       overlayClassName: classNames$1("".concat(classPrefix, "-popconfirm")),
-      content: /* @__PURE__ */React__default["default"].createElement(PopContent, _objectSpread$h(_objectSpread$h({
+      content: /* @__PURE__ */React__default["default"].createElement(Popcontent, _objectSpread$h(_objectSpread$h({
         cancelBtn: cancelBtn,
         confirmBtn: confirmBtn
       }, props), {}, {
@@ -45995,8 +46176,8 @@
       }))
     }, props.popupProps));
   });
-  PopConfirm$1.displayName = "PopConfirm";
-  PopConfirm$1.defaultProps = {
+  Popconfirm$1.displayName = "Popconfirm";
+  Popconfirm$1.defaultProps = {
     destroyOnClose: true,
     showArrow: true,
     onCancel: noop$1,
@@ -46004,7 +46185,10 @@
     theme: "default"
   };
 
-  var PopConfirm = PopConfirm$1;
+  console.error("PopConfirm \u5DF2\u6539\u540D\u4E3A Popconfirm\uFF0C\u5C3D\u5FEB\u8C03\u6574\u4E3A Popconfirm!");
+
+  var Popconfirm = Popconfirm$1;
+  var PopConfirm = Popconfirm$1;
 
   var TEXTAREA_STYLE = "\n  min-height:0 !important;\n  max-height:none !important;\n  height:0 !important;\n  visibility:hidden !important;\n  overflow:hidden !important;\n  position:absolute !important;\n  z-index:-1000 !important;\n  top:0 !important;\n  right:0 !important\n";
   var hiddenTextarea;
@@ -46230,7 +46414,8 @@
 
   var BreadcrumbContext = /*#__PURE__*/React.createContext({
     maxItemWidthInContext: "",
-    theme: "light"
+    theme: "light",
+    separator: null
   });
 
   var _excluded$3 = ["children", "separator", "disabled", "maxItemWidth", "maxWidth", "href", "to", "target", "router", "replace"];
@@ -46240,12 +46425,7 @@
   function _objectSpread$f(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$f(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var BreadcrumbItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var children = props.children,
-        _props$separator = props.separator,
-        separator = _props$separator === void 0 ? /* @__PURE__ */React__default["default"].createElement(ChevronRightIcon, {
-      style: {
-        color: "rgba(0,0,0,.3)"
-      }
-    }) : _props$separator,
+        separator = props.separator,
         disabled = props.disabled,
         maxItemWidth = props.maxItemWidth,
         maxWidth = props.maxWidth,
@@ -46258,7 +46438,8 @@
 
     var _useContext = React.useContext(BreadcrumbContext),
         maxItemWidthInContext = _useContext.maxItemWidthInContext,
-        theme = _useContext.theme;
+        theme = _useContext.theme,
+        separatorInContext = _useContext.separator;
 
     var _useConfig = useConfig$1(),
         classPrefix = _useConfig.classPrefix;
@@ -46296,7 +46477,12 @@
       }, textContent);
     }
 
-    var separatorContent = typeof separator === "function" ? separator() : separator;
+    var separatorInProps = typeof separator === "function" ? separator() : separator;
+    var separatorContent = separatorInProps || separatorInContext || /* @__PURE__ */React__default["default"].createElement(ChevronRightIcon, {
+      style: {
+        color: "rgba(0,0,0,.3)"
+      }
+    });
     return /* @__PURE__ */React__default["default"].createElement("div", _objectSpread$f({
       className: classNames$1(breadcrumbItemClassNames, theme),
       ref: ref
@@ -46344,7 +46530,8 @@
     return /* @__PURE__ */React__default["default"].createElement(BreadcrumbContext.Provider, {
       value: {
         maxItemWidthInContext: maxItemWidth,
-        theme: theme
+        theme: theme,
+        separator: separator
       }
     }, /* @__PURE__ */React__default["default"].createElement("div", _objectSpread$e({
       ref: ref,
@@ -46955,7 +47142,8 @@
         _ref$step = _ref.step,
         step = _ref$step === void 0 ? 1 : _ref$step,
         tooltipProps = _ref.tooltipProps,
-        propsValue = _ref.value,
+        _ref$value = _ref.value,
+        propsValue = _ref$value === void 0 ? min : _ref$value,
         defaultValue = _ref.defaultValue,
         onChange = _ref.onChange,
         className = _ref.className,
@@ -48074,7 +48262,8 @@
     var disabled = props.disabled,
         _props$options = props.options,
         options = _props$options === void 0 ? [] : _props$options,
-        keys = props.keys,
+        _props$keys = props.keys,
+        keys = _props$keys === void 0 ? {} : _props$keys,
         _props$checkStrictly2 = props.checkStrictly,
         checkStrictly = _props$checkStrictly2 === void 0 ? false : _props$checkStrictly2,
         _props$lazy2 = props.lazy,
@@ -48087,9 +48276,14 @@
 
       if (!treeStore) {
         var createStore = function createStore(onLoad) {
+          var treePropsKeys = _objectSpread$9(_objectSpread$9({}, keys), {}, {
+            children: typeof keys.children === "string" ? keys.children : "children"
+          });
+
           var treeProps = {
             onLoad: onLoad,
-            options: options
+            options: options,
+            keys: treePropsKeys
           };
           var store2 = new TreeStore(treeProps);
           store2.append(options);
@@ -48108,7 +48302,7 @@
         treeStoreExpendEffect(treeStore, value, []);
         treeNodesEffect(inputVal, treeStore, setTreeNodes);
       }
-    }, [inputVal, options, value, treeStore]);
+    }, [inputVal, options, value, treeStore, keys]);
     React.useEffect(function () {
       if (!treeStore) return;
       var treeProps = {
@@ -52897,6 +53091,7 @@
   exports.NotificationPlugin = NotificationPlugin;
   exports.Pagination = Pagination;
   exports.PopConfirm = PopConfirm;
+  exports.Popconfirm = Popconfirm;
   exports.Popup = Popup;
   exports.Progress = Progress;
   exports.Radio = Radio;