amis-ui 6.14.0-beta.9 → 7.0.0-next.1

package/esm/components/Tabs.js

@@ -1,15 +1,14 @@
 /**
- * amis-ui v6.14.0-beta.9
+ * amis-ui v7.0.0-next.1
  * Copyright 2018-2025 fex
  */
 
 import { __extends, __spreadArray, __read, __assign, __decorate, __metadata } from 'tslib';
 import React__default from 'react';
-import { noop, autobind, themeable, guid, resizeSensor, isObjectShallowModified, filter, localeable, uncontrollable } from 'amis-core';
+import { noop, autobind, themeable, guid, resizeSensor, isObjectShallowModified, findDomCompat, filter, localeable, uncontrollable } from 'amis-core';
 import Transition, { ENTERING, ENTERED } from 'react-transition-group/Transition';
 import { Icon } from './icons.js';
 import debounce from 'lodash/debounce';
-import { findDOMNode } from 'react-dom';
 import TooltipWrapper from './TooltipWrapper.js';
 import { PopOverContainer } from './PopOverContainer.js';
 import Sortable from 'sortablejs';
@@ -30,6 +29,7 @@ var TabComponent = /** @class */ (function (_super) {
         var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
         _this.touch = {};
         _this.contentRef = function (ref) { return (_this.contentDom = ref); };
+        _this.transitionRef = React__default.createRef();
         return _this;
     }
     TabComponent.prototype.onTouchStart = function (event) {
@@ -63,11 +63,14 @@ var TabComponent = /** @class */ (function (_super) {
     TabComponent.prototype.render = function () {
         var _this = this;
         var _a = this.props, cx = _a.classnames, mountOnEnter = _a.mountOnEnter, reload = _a.reload, unmountOnExit = _a.unmountOnExit, eventKey = _a.eventKey, activeKey = _a.activeKey, children = _a.children, className = _a.className, swipeable = _a.swipeable, mobileUI = _a.mobileUI, testIdBuilder = _a.testIdBuilder;
-        return (React__default.createElement(Transition, { in: activeKey === eventKey, mountOnEnter: mountOnEnter, unmountOnExit: typeof reload === 'boolean' ? reload : unmountOnExit, timeout: 500 }, function (status) {
+        return (React__default.createElement(Transition, { in: activeKey === eventKey, mountOnEnter: mountOnEnter, unmountOnExit: typeof reload === 'boolean' ? reload : unmountOnExit, timeout: 500, nodeRef: this.transitionRef }, function (status) {
             if (status === ENTERING) {
                 _this.contentDom.offsetWidth;
             }
-            return (React__default.createElement("div", __assign({ ref: _this.contentRef, className: cx(transitionStyles[status], activeKey === eventKey ? 'is-active' : '', 'Tabs-pane', className), onTouchStart: swipeable && mobileUI ? _this.onTouchStart : noop, onTouchMove: swipeable && mobileUI ? _this.onTouchMove : noop, onTouchEnd: swipeable && mobileUI ? _this.onTouchEnd : noop, onTouchCancel: swipeable && mobileUI ? _this.onTouchEnd : noop }, testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getTestId()), children));
+            return (React__default.createElement("div", __assign({ ref: function (node) {
+                    _this.contentRef(node);
+                    _this.transitionRef.current = node;
+                }, className: cx(transitionStyles[status], activeKey === eventKey ? 'is-active' : '', 'Tabs-pane', className), onTouchStart: swipeable && mobileUI ? _this.onTouchStart : noop, onTouchMove: swipeable && mobileUI ? _this.onTouchMove : noop, onTouchEnd: swipeable && mobileUI ? _this.onTouchEnd : noop, onTouchCancel: swipeable && mobileUI ? _this.onTouchEnd : noop }, testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getTestId()), children));
         }));
     };
     __decorate([
@@ -199,7 +202,7 @@ var Tabs = /** @class */ (function (_super) {
         var _b = this.props; _b.classPrefix; var activeKey = _b.activeKey, mobileUI = _b.mobileUI;
         if (mobileUI && preProps.activeKey !== activeKey) {
             var ns_1 = this.props.classPrefix;
-            var dom = findDOMNode(this);
+            var dom = findDomCompat(this);
             var activeTab = dom.querySelector(".".concat(ns_1, "Tabs-link.is-active"));
             var parentWidth = ((_a = activeTab.parentNode) === null || _a === void 0 ? void 0 : _a.parentNode).offsetWidth;
             var offsetLeft = activeTab.offsetLeft;
@@ -328,7 +331,7 @@ var Tabs = /** @class */ (function (_super) {
     Tabs.prototype.initDragging = function () {
         var _this = this;
         var _a = this.props, ns = _a.classPrefix, onDragChange = _a.onDragChange;
-        var dom = findDOMNode(this);
+        var dom = findDomCompat(this);
         this.sortable = new Sortable(dom.querySelector(".".concat(ns, "Tabs-links")), {
             group: this.id,
             animation: 250,
@@ -490,7 +493,7 @@ var Tabs = /** @class */ (function (_super) {
             collapseOnExceed &&
             doms.length > collapseOnExceed) {
             var rest_1 = doms.splice(collapseOnExceed - 1, doms.length + 1 - collapseOnExceed);
-            doms.push(React__default.createElement(PopOverContainer, { key: "togglor", placement: "center-bottom-center-top center-top-center-bottom", popOverClassName: cx('Tabs-PopOver'), popOverContainer: popOverContainer || (function () { return findDOMNode(_this); }), popOverRender: function (_a) {
+            doms.push(React__default.createElement(PopOverContainer, { key: "togglor", placement: "center-bottom-center-top center-top-center-bottom", popOverClassName: cx('Tabs-PopOver'), popOverContainer: popOverContainer || (function () { return findDomCompat(_this); }), popOverRender: function (_a) {
                     var onClose = _a.onClose;
                     return (React__default.createElement("ul", { className: cx('Tabs-PopOverList', 'DropDown-menu'), onClick: onClose }, rest_1));
                 } }, function (_a) {