@douyinfe/semi-ui 2.51.1 → 2.51.2

package/lib/cjs/image/interface.d.ts

@@ -118,7 +118,7 @@ export interface HeaderProps {
     title?: string;
     titleStyle?: React.CSSProperties;
     className?: string;
-    onClose?: () => void;
+    onClose?: (e: React.MouseEvent<HTMLElement>) => void;
 }
 export interface FooterProps extends SliderProps {
     curPage?: number;

package/lib/cjs/image/previewInner.d.ts

@@ -83,7 +83,7 @@ export default class PreviewInner extends BaseComponent<PreviewInnerProps, Previ
     viewVisibleChange: () => void;
     handleSwitchImage: (direction: string) => void;
     handleDownload: () => void;
-    handlePreviewClose: () => void;
+    handlePreviewClose: (e: React.MouseEvent<HTMLElement>) => void;
     handleAdjustRatio: (type: RatioType) => void;
     handleRotateImage: (direction: any) => void;
     handleZoomImage: (newZoom: number, notify?: boolean) => void;

package/lib/cjs/image/previewInner.js

@@ -136,8 +136,8 @@ class PreviewInner extends _baseComponent.default {
     this.handleDownload = () => {
       this.foundation.handleDownload();
     };
-    this.handlePreviewClose = () => {
-      this.foundation.handlePreviewClose();
+    this.handlePreviewClose = e => {
+      this.foundation.handlePreviewClose(e);
     };
     this.handleAdjustRatio = type => {
       this.foundation.handleAdjustRatio(type);

package/lib/cjs/input/textarea.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _throttle2 = _interopRequireDefault(require("lodash/throttle"));
 var _isObject2 = _interopRequireDefault(require("lodash/isObject"));
 var _isUndefined2 = _interopRequireDefault(require("lodash/isUndefined"));
 var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
@@ -17,6 +18,7 @@ var _constants = require("@douyinfe/semi-foundation/lib/cjs/input/constants");
 var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
 require("@douyinfe/semi-foundation/lib/cjs/input/textarea.css");
 var _semiIcons = require("@douyinfe/semi-icons");
+var _resizeObserver = _interopRequireDefault(require("../resizeObserver"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var __rest = void 0 && (void 0).__rest || function (s, e) {
   var t = {};
@@ -54,7 +56,7 @@ class TextArea extends _baseComponent.default {
     this.focusing = false;
     this.foundation = new _textareaFoundation.default(this.adapter);
     this.libRef = /*#__PURE__*/_react.default.createRef();
-    this._resizeLock = false;
+    this.throttledResizeTextarea = (0, _throttle2.default)(this.foundation.resizeTextarea, 10);
   }
   get adapter() {
     return Object.assign(Object.assign({}, super.adapter), {
@@ -105,29 +107,12 @@ class TextArea extends _baseComponent.default {
     }
     return willUpdateStates;
   }
-  componentDidMount() {
-    this.foundation.init();
-    this._resizeListener = null;
-    if (this.props.autosize) {
-      // Working around Firefox bug which runs resize listeners even when other JS is running at the same moment
-      // causing competing rerenders (due to setState in the listener) in React.
-      // More can be found here - facebook/react#6324
-      // // Reference to https://github.com/andreypopp/react-textarea-autosize/
-      this._resizeListener = () => {
-        if (this._resizeLock) {
-          return;
-        }
-        this._resizeLock = true;
-        this.foundation.resizeTextarea(() => {
-          this._resizeLock = false;
-        });
-      };
-      window.addEventListener('resize', this._resizeListener);
-    }
-  }
   componentWillUnmount() {
-    this.foundation.destroy();
-    this._resizeListener && window.removeEventListener('resize', this._resizeListener);
+    var _a, _b;
+    if (this.throttledResizeTextarea) {
+      (_b = (_a = this.throttledResizeTextarea) === null || _a === void 0 ? void 0 : _a.cancel) === null || _b === void 0 ? void 0 : _b.call(_a);
+      this.throttledResizeTextarea = null;
+    }
   }
   componentDidUpdate(prevProps, prevState) {
     if ((this.props.value !== prevProps.value || this.props.placeholder !== prevProps.placeholder) && this.props.autosize) {
@@ -247,8 +232,12 @@ class TextArea extends _baseComponent.default {
       style: style,
       onMouseEnter: e => this.foundation.handleMouseEnter(e),
       onMouseLeave: e => this.foundation.handleMouseLeave(e)
+    }, autosize ? /*#__PURE__*/_react.default.createElement(_resizeObserver.default, {
+      onResize: this.throttledResizeTextarea
     }, /*#__PURE__*/_react.default.createElement("textarea", Object.assign({}, itemProps, {
       ref: this.setRef
+    }))) : /*#__PURE__*/_react.default.createElement("textarea", Object.assign({}, itemProps, {
+      ref: this.setRef
     })), this.renderClearBtn(), this.renderCounter());
   }
 }

package/lib/es/image/interface.d.ts

@@ -118,7 +118,7 @@ export interface HeaderProps {
     title?: string;
     titleStyle?: React.CSSProperties;
     className?: string;
-    onClose?: () => void;
+    onClose?: (e: React.MouseEvent<HTMLElement>) => void;
 }
 export interface FooterProps extends SliderProps {
     curPage?: number;

package/lib/es/image/previewInner.d.ts

@@ -83,7 +83,7 @@ export default class PreviewInner extends BaseComponent<PreviewInnerProps, Previ
     viewVisibleChange: () => void;
     handleSwitchImage: (direction: string) => void;
     handleDownload: () => void;
-    handlePreviewClose: () => void;
+    handlePreviewClose: (e: React.MouseEvent<HTMLElement>) => void;
     handleAdjustRatio: (type: RatioType) => void;
     handleRotateImage: (direction: any) => void;
     handleZoomImage: (newZoom: number, notify?: boolean) => void;

package/lib/es/image/previewInner.js

@@ -129,8 +129,8 @@ export default class PreviewInner extends BaseComponent {
     this.handleDownload = () => {
       this.foundation.handleDownload();
     };
-    this.handlePreviewClose = () => {
-      this.foundation.handlePreviewClose();
+    this.handlePreviewClose = e => {
+      this.foundation.handlePreviewClose(e);
     };
     this.handleAdjustRatio = type => {
       this.foundation.handleAdjustRatio(type);

package/lib/es/input/textarea.js

@@ -1,3 +1,4 @@
+import _throttle from "lodash/throttle";
 import _isObject from "lodash/isObject";
 import _isUndefined from "lodash/isUndefined";
 import _isFunction from "lodash/isFunction";
@@ -19,6 +20,7 @@ import { cssClasses } from '@douyinfe/semi-foundation/lib/es/input/constants';
 import BaseComponent from '../_base/baseComponent';
 import '@douyinfe/semi-foundation/lib/es/input/textarea.css';
 import { IconClear } from '@douyinfe/semi-icons';
+import ResizeObserver from '../resizeObserver';
 const prefixCls = cssClasses.PREFIX;
 class TextArea extends BaseComponent {
   constructor(props) {
@@ -47,7 +49,7 @@ class TextArea extends BaseComponent {
     this.focusing = false;
     this.foundation = new TextAreaFoundation(this.adapter);
     this.libRef = /*#__PURE__*/React.createRef();
-    this._resizeLock = false;
+    this.throttledResizeTextarea = _throttle(this.foundation.resizeTextarea, 10);
   }
   get adapter() {
     return Object.assign(Object.assign({}, super.adapter), {
@@ -98,29 +100,12 @@ class TextArea extends BaseComponent {
     }
     return willUpdateStates;
   }
-  componentDidMount() {
-    this.foundation.init();
-    this._resizeListener = null;
-    if (this.props.autosize) {
-      // Working around Firefox bug which runs resize listeners even when other JS is running at the same moment
-      // causing competing rerenders (due to setState in the listener) in React.
-      // More can be found here - facebook/react#6324
-      // // Reference to https://github.com/andreypopp/react-textarea-autosize/
-      this._resizeListener = () => {
-        if (this._resizeLock) {
-          return;
-        }
-        this._resizeLock = true;
-        this.foundation.resizeTextarea(() => {
-          this._resizeLock = false;
-        });
-      };
-      window.addEventListener('resize', this._resizeListener);
-    }
-  }
   componentWillUnmount() {
-    this.foundation.destroy();
-    this._resizeListener && window.removeEventListener('resize', this._resizeListener);
+    var _a, _b;
+    if (this.throttledResizeTextarea) {
+      (_b = (_a = this.throttledResizeTextarea) === null || _a === void 0 ? void 0 : _a.cancel) === null || _b === void 0 ? void 0 : _b.call(_a);
+      this.throttledResizeTextarea = null;
+    }
   }
   componentDidUpdate(prevProps, prevState) {
     if ((this.props.value !== prevProps.value || this.props.placeholder !== prevProps.placeholder) && this.props.autosize) {
@@ -240,8 +225,12 @@ class TextArea extends BaseComponent {
       style: style,
       onMouseEnter: e => this.foundation.handleMouseEnter(e),
       onMouseLeave: e => this.foundation.handleMouseLeave(e)
+    }, autosize ? /*#__PURE__*/React.createElement(ResizeObserver, {
+      onResize: this.throttledResizeTextarea
     }, /*#__PURE__*/React.createElement("textarea", Object.assign({}, itemProps, {
       ref: this.setRef
+    }))) : /*#__PURE__*/React.createElement("textarea", Object.assign({}, itemProps, {
+      ref: this.setRef
     })), this.renderClearBtn(), this.renderCounter());
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.51.1",
+    "version": "2.51.2",
     "description": "A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -20,12 +20,12 @@
         "@dnd-kit/core": "^6.0.8",
         "@dnd-kit/sortable": "^7.0.2",
         "@dnd-kit/utilities": "^3.2.1",
-        "@douyinfe/semi-animation": "2.51.1",
-        "@douyinfe/semi-animation-react": "2.51.1",
-        "@douyinfe/semi-foundation": "2.51.1",
-        "@douyinfe/semi-icons": "2.51.1",
-        "@douyinfe/semi-illustrations": "2.51.1",
-        "@douyinfe/semi-theme-default": "2.51.1",
+        "@douyinfe/semi-animation": "2.51.2",
+        "@douyinfe/semi-animation-react": "2.51.2",
+        "@douyinfe/semi-foundation": "2.51.2",
+        "@douyinfe/semi-icons": "2.51.2",
+        "@douyinfe/semi-illustrations": "2.51.2",
+        "@douyinfe/semi-theme-default": "2.51.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -75,7 +75,7 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "c81cf7801f7c7afd385d63e1e7dd1cf533d7fc83",
+    "gitHead": "424e683a18b7d3c2a55e21b625f292e31df13ac2",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",