@douyinfe/semi-ui 2.10.0-beta.0 → 2.10.2-alpha.0

package/lib/cjs/inputNumber/index.js

@@ -24,6 +24,8 @@ var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 
 var _noop2 = _interopRequireDefault(require("lodash/noop"));
 
+var _isString2 = _interopRequireDefault(require("lodash/isString"));
+
 var _isNaN2 = _interopRequireDefault(require("lodash/isNaN"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -300,6 +302,9 @@ class InputNumber extends _baseComponent.default {
       },
       setClickUpOrDown: value => {
         this.clickUpOrDown = value;
+      },
+      updateStates: (states, callback) => {
+        this.setState(states, callback);
       }
     });
   }
@@ -311,6 +316,7 @@ class InputNumber extends _baseComponent.default {
     const {
       focusing
     } = this.state;
+    let newValue;
     /**
      * To determine whether the front and back are equal
      * NaN need to check whether both are NaN
@@ -318,8 +324,9 @@ class InputNumber extends _baseComponent.default {
 
     if (value !== prevProps.value && !(0, _isBothNaN.default)(value, prevProps.value)) {
       if ((0, _isNullOrUndefined.default)(value) || value === '') {
-        this.setState({
-          value: '',
+        newValue = '';
+        this.foundation.updateStates({
+          value: newValue,
           number: null
         });
       } else {
@@ -375,33 +382,42 @@ class InputNumber extends _baseComponent.default {
 
             if (this.clickUpOrDown) {
               obj.value = this.foundation.doFormat(valueStr, true);
+              newValue = obj.value;
             }
 
-            this.setState(obj, () => this.adapter.restoreCursor());
+            this.foundation.updateStates(obj, () => this.adapter.restoreCursor());
           } else if (!(0, _isNaN2.default)(toNum)) {
             // Update input content when controlled input is illegal and not NaN
-            this.setState({
-              value: this.foundation.doFormat(toNum, false)
+            newValue = this.foundation.doFormat(toNum, false);
+            this.foundation.updateStates({
+              value: newValue
             });
           } else {
             // Update input content when controlled input NaN
-            this.setState({
-              value: this.foundation.doFormat(valueStr, false)
+            newValue = this.foundation.doFormat(valueStr, false);
+            this.foundation.updateStates({
+              value: newValue
             });
           }
         } else if (this.foundation.isValidNumber(parsedNum)) {
-          this.setState({
+          newValue = this.foundation.doFormat(parsedNum);
+          this.foundation.updateStates({
             number: parsedNum,
-            value: this.foundation.doFormat(parsedNum)
+            value: newValue
           });
         } else {
           // Invalid digital analog blurring effect instead of controlled failure
-          this.setState({
+          newValue = '';
+          this.foundation.updateStates({
             number: null,
-            value: ''
+            value: newValue
           });
         }
       }
+
+      if ((0, _isString2.default)(newValue) && newValue !== String(this.props.value)) {
+        this.foundation.notifyChange(newValue, null);
+      }
     }
 
     if (!this.clickUpOrDown) {

package/lib/cjs/tooltip/index.d.ts

@@ -164,6 +164,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
     componentDidUpdate(prevProps: TooltipProps, prevState: TooltipState): void;
     renderIcon: () => any;
     handlePortalInnerClick: (e: React.MouseEvent) => void;
+    handlePortalMouseDown: (e: React.MouseEvent) => void;
     handlePortalInnerKeyDown: (e: React.KeyboardEvent) => void;
     renderContentNode: (content: TooltipProps['content']) => React.ReactNode;
     renderPortal: () => JSX.Element;

package/lib/cjs/tooltip/index.js

@@ -187,6 +187,12 @@ class Tooltip extends _baseComponent.default {
       }
     };
 
+    this.handlePortalMouseDown = e => {
+      if (this.props.stopPropagation) {
+        (0, _utils.stopPropagation)(e);
+      }
+    };
+
     this.handlePortalInnerKeyDown = e => {
       this.foundation.handleContainerKeydown(e);
     };
@@ -271,6 +277,7 @@ class Tooltip extends _baseComponent.default {
         style: portalInnerStyle,
         ref: this.setContainerEl,
         onClick: this.handlePortalInnerClick,
+        onMouseDown: this.handlePortalMouseDown,
         onKeyDown: this.handlePortalInnerKeyDown
       }, inner));
     };
@@ -498,15 +505,11 @@ class Tooltip extends _baseComponent.default {
           }
         };
 
-        document.addEventListener('mousedown', this.clickOutsideHandler, {
-          capture: true
-        });
+        window.addEventListener('mousedown', this.clickOutsideHandler);
       },
       unregisterClickOutsideHandler: () => {
         if (this.clickOutsideHandler) {
-          document.removeEventListener('mousedown', this.clickOutsideHandler, {
-            capture: true
-          });
+          window.removeEventListener('mousedown', this.clickOutsideHandler);
           this.clickOutsideHandler = null;
         }
       },

package/lib/cjs/transfer/index.js

@@ -52,7 +52,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/transfer/foundation"));
 
-var _transferUtlls = require("@douyinfe/semi-foundation/lib/cjs/transfer/transferUtlls");
+var _transferUtils = require("@douyinfe/semi-foundation/lib/cjs/transfer/transferUtils");
 
 var _constants = require("@douyinfe/semi-foundation/lib/cjs/transfer/constants");
 
@@ -98,13 +98,13 @@ class Transfer extends _baseComponent.default {
     if (Boolean(dataSource) && (0, _isArray3.default)(dataSource)) {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore Avoid reporting errors this.state.xxx is read-only
-      this.state.data = (0, _transferUtlls._generateDataByType)(dataSource, type);
+      this.state.data = (0, _transferUtils._generateDataByType)(dataSource, type);
     }
 
     if (Boolean(defaultValue) && (0, _isArray3.default)(defaultValue)) {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore Avoid reporting errors this.state.xxx is read-only
-      this.state.selectedItems = (0, _transferUtlls._generateSelectedItems)(defaultValue, this.state.data);
+      this.state.selectedItems = (0, _transferUtils._generateSelectedItems)(defaultValue, this.state.data);
     }
 
     this.onSelectOrRemove = (0, _bind.default)(_context = this.onSelectOrRemove).call(_context, this);
@@ -124,12 +124,12 @@ class Transfer extends _baseComponent.default {
     let newSelectedItems = state.selectedItems;
 
     if (Boolean(dataSource) && (0, _isArray2.default)(dataSource)) {
-      newData = (0, _transferUtlls._generateDataByType)(dataSource, type);
+      newData = (0, _transferUtils._generateDataByType)(dataSource, type);
       mergedState.data = newData;
     }
 
     if (Boolean(value) && (0, _isArray2.default)(value)) {
-      newSelectedItems = (0, _transferUtlls._generateSelectedItems)(value, newData);
+      newSelectedItems = (0, _transferUtils._generateSelectedItems)(value, newData);
       mergedState.selectedItems = newSelectedItems;
     }
 

package/lib/cjs/treeSelect/index.js

@@ -101,7 +101,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 const prefixcls = _constants.cssClasses.PREFIX;
-const prefixTree = _constants.cssClasses.PREFIXTREE;
+const prefixTree = _constants.cssClasses.PREFIX_TREE;
 const key = 0;
 
 class TreeSelect extends _baseComponent.default {

package/lib/es/button/buttonGroup.d.ts

@@ -10,7 +10,7 @@ export interface ButtonGroupProps extends BaseProps {
     size?: Size;
     theme?: Theme;
     className?: string;
-    children?: React.ReactChild;
+    children?: React.ReactNode;
     'aria-label'?: React.AriaAttributes['aria-label'];
 }
 export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {

package/lib/es/carousel/CarouselArrow.js

@@ -1,4 +1,3 @@
-import _throttle from "lodash/throttle";
 import _get from "lodash/get";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
@@ -37,8 +36,7 @@ class CarouselArrow extends React.PureComponent {
       type,
       theme,
       prev,
-      next,
-      timing
+      next
     } = this.props;
     const classNames = cls({
       [cssClasses.CAROUSEL_ARROW]: true,
@@ -58,12 +56,12 @@ class CarouselArrow extends React.PureComponent {
     }, /*#__PURE__*/React.createElement("div", _Object$assign({
       // role='button'
       className: leftClassNames,
-      onClick: _throttle(prev, timing)
+      onClick: prev
     }, _get(this.props, 'arrowProps.leftArrow.props')), this.renderLeftIcon()), /*#__PURE__*/React.createElement("div", _Object$assign({
       // role='button'
       // tabIndex={0} 
       className: rightClassNames,
-      onClick: _throttle(next, timing)
+      onClick: next
     }, _get(this.props, 'arrowProps.rightArrow.props')), this.renderRightIcon()));
   }
 

package/lib/es/carousel/index.js

@@ -67,7 +67,7 @@ class Carousel extends BaseComponent {
     };
 
     this.onIndicatorChange = activeIndex => {
-      return this.foundation.throttleChange(activeIndex);
+      return this.foundation.onIndicatorChange(activeIndex);
     };
 
     this.getChildren = () => {
@@ -166,7 +166,6 @@ class Carousel extends BaseComponent {
         theme,
         arrowProps
       } = this.props;
-      const timing = this.foundation.getSwitchingTime();
 
       if (showArrow && children.length > 1) {
         return /*#__PURE__*/React.createElement(CarouselArrow, {
@@ -174,7 +173,6 @@ class Carousel extends BaseComponent {
           theme: theme,
           prev: this.prev,
           next: this.next,
-          timing: timing,
           arrowProps: arrowProps
         });
       }

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

@@ -3,7 +3,7 @@ import { strings } from '@douyinfe/semi-foundation/lib/es/carousel/constants';
 export interface CarouselMethod {
     next?: () => void;
     prev?: () => void;
-    goTo?: () => void;
+    goTo?: (tagetIndex: number) => void;
     play?: () => void;
     stop?: () => void;
 }
@@ -50,7 +50,6 @@ export interface CarouselArrowProps {
     prev?: () => void;
     next?: () => void;
     arrowProps?: ArrowProps;
-    timing: number;
 }
 export interface ArrowButton {
     props?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;

package/lib/es/checkbox/checkbox.js

@@ -126,6 +126,7 @@ class Checkbox extends BaseComponent {
       } = this.context.checkboxGroup;
       props.isCardType = isCardType;
       props.isPureCardType = isPureCardType;
+      props['name'] = this.context.checkboxGroup.name;
     }
 
     const prefix = prefixCls || css.PREFIX;
@@ -144,7 +145,6 @@ class Checkbox extends BaseComponent {
     const extraCls = classnames("".concat(prefix, "-extra"), {
       ["".concat(prefix, "-cardType_extra_noChildren")]: props.isCardType && !children
     });
-    const name = inGroup && this.context.checkboxGroup.name;
 
     const renderContent = () => /*#__PURE__*/React.createElement(React.Fragment, null, children ? /*#__PURE__*/React.createElement("span", {
       id: this.addonId,
@@ -172,7 +172,6 @@ class Checkbox extends BaseComponent {
       }, /*#__PURE__*/React.createElement(CheckboxInner, _Object$assign({}, this.props, props, {
         addonId: children && this.addonId,
         extraId: extra && this.extraId,
-        name: name,
         isPureCardType: props.isPureCardType,
         ref: ref => {
           this.checkboxEntity = ref;

package/lib/es/checkbox/checkboxInner.js

@@ -1,4 +1,5 @@
 import _noop from "lodash/noop";
+import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 
 /* eslint-disable no-nested-ternary */
 import React, { PureComponent } from 'react';
@@ -38,27 +39,29 @@ class CheckboxInner extends PureComponent {
       ["".concat(prefix, "-inner-display")]: true
     });
     const icon = checked ? /*#__PURE__*/React.createElement(IconCheckboxTick, null) : indeterminate ? /*#__PURE__*/React.createElement(IconCheckboxIndeterminate, null) : null;
-    return /*#__PURE__*/React.createElement("span", {
-      className: wrapper
-    }, /*#__PURE__*/React.createElement("input", {
+    const inputProps = {
       type: "checkbox",
-      "aria-label": this.props['aria-label'],
-      "aria-disabled": disabled,
-      "aria-checked": checked,
-      "aria-labelledby": addonId,
-      "aria-describedby": extraId || this.props['aria-describedby'],
-      "aria-invalid": this.props['aria-invalid'],
-      "aria-errormessage": this.props['aria-errormessage'],
-      "aria-required": this.props['aria-required'],
-      ref: ref => {
-        this.inputEntity = ref;
-      },
+      'aria-label': this.props['aria-label'],
+      'aria-disabled': disabled,
+      'aria-checked': checked,
+      'aria-labelledby': addonId,
+      'aria-describedby': extraId || this.props['aria-describedby'],
+      'aria-invalid': this.props['aria-invalid'],
+      'aria-errormessage': this.props['aria-errormessage'],
+      'aria-required': this.props['aria-required'],
       className: css.INPUT,
       onChange: _noop,
       checked: checked,
-      disabled: disabled,
-      name: name
-    }), /*#__PURE__*/React.createElement("span", {
+      disabled: disabled
+    };
+    name && (inputProps['name'] = name);
+    return /*#__PURE__*/React.createElement("span", {
+      className: wrapper
+    }, /*#__PURE__*/React.createElement("input", _Object$assign({}, inputProps, {
+      ref: ref => {
+        this.inputEntity = ref;
+      }
+    })), /*#__PURE__*/React.createElement("span", {
       className: inner
     }, icon));
   }

package/lib/es/datePicker/monthsGrid.js

@@ -21,7 +21,7 @@ import PropTypes from 'prop-types';
 import { format as formatFn, isSameDay } from 'date-fns';
 import MonthsGridFoundation from '@douyinfe/semi-foundation/lib/es/datePicker/monthsGridFoundation';
 import { strings, numbers, cssClasses } from '@douyinfe/semi-foundation/lib/es/datePicker/constants';
-import { compatiableParse } from '@douyinfe/semi-foundation/lib/es/datePicker/_utils/parser';
+import { compatibleParse } from '@douyinfe/semi-foundation/lib/es/datePicker/_utils/parser';
 import BaseComponent from '../_base/baseComponent';
 import Navigation from './navigation';
 import Month from './month';
@@ -474,7 +474,7 @@ export default class MonthsGrid extends BaseComponent {
     const dateFormat = this.foundation.getValidDateFormat();
     let startDate, endDate;
 
-    if (type === 'dateTimeRange' && rangeStart && rangeEnd && isSameDay(startDate = compatiableParse(rangeStart, dateFormat, undefined, dateFnsLocale), endDate = compatiableParse(rangeEnd, dateFormat, undefined, dateFnsLocale))) {
+    if (type === 'dateTimeRange' && rangeStart && rangeEnd && isSameDay(startDate = compatibleParse(rangeStart, dateFormat, undefined, dateFnsLocale), endDate = compatibleParse(rangeEnd, dateFormat, undefined, dateFnsLocale))) {
       if (panelType === strings.PANEL_TYPE_RIGHT) {
         rangeStart && (restProps.startDate = startDate);
       } else {
@@ -560,10 +560,10 @@ export default class MonthsGrid extends BaseComponent {
 
     if (panelType === strings.PANEL_TYPE_LEFT) {
       panelDetail = monthLeft;
-      dateText = rangeStart ? formatFn(compatiableParse(rangeStart, dateFormat, undefined, dateFnsLocale), FORMAT_SWITCH_DATE) : '';
+      dateText = rangeStart ? formatFn(compatibleParse(rangeStart, dateFormat, undefined, dateFnsLocale), FORMAT_SWITCH_DATE) : '';
     } else {
       panelDetail = monthRight;
-      dateText = rangeEnd ? formatFn(compatiableParse(rangeEnd, dateFormat, undefined, dateFnsLocale), FORMAT_SWITCH_DATE) : '';
+      dateText = rangeEnd ? formatFn(compatibleParse(rangeEnd, dateFormat, undefined, dateFnsLocale), FORMAT_SWITCH_DATE) : '';
     }
 
     const {
@@ -573,7 +573,7 @@ export default class MonthsGrid extends BaseComponent {
     const monthText = showDate ? formatFn(showDate, FORMAT_SWITCH_DATE) : '';
     const timeText = showDate ? formatFn(showDate, formatTimePicker) : '';
 
-    const showSwithIcon = _includesInstanceProperty(_context3 = ['default']).call(_context3, density);
+    const showSwitchIcon = _includesInstanceProperty(_context3 = ['default']).call(_context3, density);
 
     const switchCls = classnames("".concat(prefixCls, "-switch"));
     const dateCls = classnames({
@@ -594,7 +594,7 @@ export default class MonthsGrid extends BaseComponent {
       "aria-label": "Switch to date panel",
       className: dateCls,
       onClick: e => this.foundation.showDatePanel(panelType)
-    }, showSwithIcon && /*#__PURE__*/React.createElement(IconCalendar, {
+    }, showSwitchIcon && /*#__PURE__*/React.createElement(IconCalendar, {
       "aria-hidden": true
     }), /*#__PURE__*/React.createElement("span", {
       className: textCls
@@ -603,7 +603,7 @@ export default class MonthsGrid extends BaseComponent {
       "aria-label": "Switch to time panel",
       className: timeCls,
       onClick: e => this.foundation.showTimePicker(panelType, true)
-    }, showSwithIcon && /*#__PURE__*/React.createElement(IconClock, {
+    }, showSwitchIcon && /*#__PURE__*/React.createElement(IconClock, {
       "aria-hidden": true
     }), /*#__PURE__*/React.createElement("span", {
       className: textCls

package/lib/es/form/baseForm.d.ts

@@ -147,6 +147,7 @@ declare class Form extends BaseComponent<BaseFormProps, BaseFormState> {
     static Section: typeof Section;
     formApi: FormApi;
     constructor(props: BaseFormProps);
+    componentDidMount(): void;
     componentWillUnmount(): void;
     get adapter(): BaseFormAdapter<BaseFormProps, BaseFormState>;
     get content(): React.ReactNode;

package/lib/es/form/baseForm.js

@@ -47,7 +47,7 @@ class Form extends BaseComponent {
 
     super(props);
     this.state = {
-      formId: getUuidv4()
+      formId: ''
     };
     warning(Boolean(props.component && props.render), '[Semi Form] You should not use <Form component> and <Form render> in ths same time; <Form render> will be ignored');
     warning(props.component && props.children && !isEmptyChildren(props.children), '[Semi Form] You should not use <Form component> and <Form>{children}</Form> in ths same time; <Form>{children}</Form> will be ignored');
@@ -62,9 +62,12 @@ class Form extends BaseComponent {
     }
   }
 
+  componentDidMount() {
+    this.foundation.init();
+  }
+
   componentWillUnmount() {
     this.foundation.destroy();
-    this.foundation = null;
     this.formApi = null;
   }
 
@@ -89,6 +92,11 @@ class Form extends BaseComponent {
       notifyReset: () => {
         this.props.onReset();
       },
+      initFormId: () => {
+        this.setState({
+          formId: getUuidv4()
+        });
+      },
       getInitValues: () => this.props.initValues,
       getFormProps: keys => {
         if (typeof keys === 'undefined') {

package/lib/es/form/hoc/withField.js

@@ -380,9 +380,16 @@ function withField(Component, opts) {
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         return () => {};
       } // log('register: ' + field);
+      // field value may change after field component mounted, we use ref value here to get changed value
 
 
-      updater.register(field, fieldState, {
+      const refValue = getVal();
+      updater.register(field, {
+        value: refValue,
+        error,
+        touched,
+        status
+      }, {
         field,
         fieldApi,
         keepState,

package/lib/es/inputNumber/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { InputProps } from '../input';
-import InputNumberFoundation, { InputNumberAdapter } from '@douyinfe/semi-foundation/lib/es/inputNumber/foundation';
+import InputNumberFoundation, { BaseInputNumberState, InputNumberAdapter } from '@douyinfe/semi-foundation/lib/es/inputNumber/foundation';
 import BaseComponent from '../_base/baseComponent';
 import { strings } from '@douyinfe/semi-foundation/lib/es/inputNumber/constants';
 import '@douyinfe/semi-foundation/lib/es/inputNumber/inputNumber.css';
@@ -40,11 +40,7 @@ export interface InputNumberProps extends InputProps {
     onNumberChange?: (value: number, e?: React.ChangeEvent) => void;
     onUpClick?: (value: string, e: React.MouseEvent<HTMLButtonElement>) => void;
 }
-export interface InputNumberState {
-    value?: number | string;
-    number?: number | null;
-    focusing?: boolean;
-    hovering?: boolean;
+export interface InputNumberState extends BaseInputNumberState {
 }
 declare class InputNumber extends BaseComponent<InputNumberProps, InputNumberState> {
     static propTypes: {

package/lib/es/inputNumber/index.js

@@ -1,4 +1,5 @@
 import _noop from "lodash/noop";
+import _isString from "lodash/isString";
 import _isNaN from "lodash/isNaN";
 import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
@@ -271,6 +272,9 @@ class InputNumber extends BaseComponent {
       },
       setClickUpOrDown: value => {
         this.clickUpOrDown = value;
+      },
+      updateStates: (states, callback) => {
+        this.setState(states, callback);
       }
     });
   }
@@ -282,6 +286,7 @@ class InputNumber extends BaseComponent {
     const {
       focusing
     } = this.state;
+    let newValue;
     /**
      * To determine whether the front and back are equal
      * NaN need to check whether both are NaN
@@ -289,8 +294,9 @@ class InputNumber extends BaseComponent {
 
     if (value !== prevProps.value && !isBothNaN(value, prevProps.value)) {
       if (isNullOrUndefined(value) || value === '') {
-        this.setState({
-          value: '',
+        newValue = '';
+        this.foundation.updateStates({
+          value: newValue,
           number: null
         });
       } else {
@@ -346,33 +352,42 @@ class InputNumber extends BaseComponent {
 
             if (this.clickUpOrDown) {
               obj.value = this.foundation.doFormat(valueStr, true);
+              newValue = obj.value;
             }
 
-            this.setState(obj, () => this.adapter.restoreCursor());
+            this.foundation.updateStates(obj, () => this.adapter.restoreCursor());
           } else if (!_isNaN(toNum)) {
             // Update input content when controlled input is illegal and not NaN
-            this.setState({
-              value: this.foundation.doFormat(toNum, false)
+            newValue = this.foundation.doFormat(toNum, false);
+            this.foundation.updateStates({
+              value: newValue
             });
           } else {
             // Update input content when controlled input NaN
-            this.setState({
-              value: this.foundation.doFormat(valueStr, false)
+            newValue = this.foundation.doFormat(valueStr, false);
+            this.foundation.updateStates({
+              value: newValue
             });
           }
         } else if (this.foundation.isValidNumber(parsedNum)) {
-          this.setState({
+          newValue = this.foundation.doFormat(parsedNum);
+          this.foundation.updateStates({
             number: parsedNum,
-            value: this.foundation.doFormat(parsedNum)
+            value: newValue
           });
         } else {
           // Invalid digital analog blurring effect instead of controlled failure
-          this.setState({
+          newValue = '';
+          this.foundation.updateStates({
             number: null,
-            value: ''
+            value: newValue
           });
         }
       }
+
+      if (_isString(newValue) && newValue !== String(this.props.value)) {
+        this.foundation.notifyChange(newValue, null);
+      }
     }
 
     if (!this.clickUpOrDown) {

package/lib/es/tooltip/index.d.ts

@@ -164,6 +164,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
     componentDidUpdate(prevProps: TooltipProps, prevState: TooltipState): void;
     renderIcon: () => any;
     handlePortalInnerClick: (e: React.MouseEvent) => void;
+    handlePortalMouseDown: (e: React.MouseEvent) => void;
     handlePortalInnerKeyDown: (e: React.KeyboardEvent) => void;
     renderContentNode: (content: TooltipProps['content']) => React.ReactNode;
     renderPortal: () => JSX.Element;

package/lib/es/tooltip/index.js

@@ -138,6 +138,12 @@ export default class Tooltip extends BaseComponent {
       }
     };
 
+    this.handlePortalMouseDown = e => {
+      if (this.props.stopPropagation) {
+        stopPropagation(e);
+      }
+    };
+
     this.handlePortalInnerKeyDown = e => {
       this.foundation.handleContainerKeydown(e);
     };
@@ -225,6 +231,7 @@ export default class Tooltip extends BaseComponent {
         style: portalInnerStyle,
         ref: this.setContainerEl,
         onClick: this.handlePortalInnerClick,
+        onMouseDown: this.handlePortalMouseDown,
         onKeyDown: this.handlePortalInnerKeyDown
       }, inner));
     };
@@ -457,15 +464,11 @@ export default class Tooltip extends BaseComponent {
           }
         };
 
-        document.addEventListener('mousedown', this.clickOutsideHandler, {
-          capture: true
-        });
+        window.addEventListener('mousedown', this.clickOutsideHandler);
       },
       unregisterClickOutsideHandler: () => {
         if (this.clickOutsideHandler) {
-          document.removeEventListener('mousedown', this.clickOutsideHandler, {
-            capture: true
-          });
+          window.removeEventListener('mousedown', this.clickOutsideHandler);
           this.clickOutsideHandler = null;
         }
       },

package/lib/es/transfer/index.js

@@ -19,7 +19,7 @@ import cls from 'classnames';
 import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
 import PropTypes from 'prop-types';
 import TransferFoundation from '@douyinfe/semi-foundation/lib/es/transfer/foundation';
-import { _generateDataByType, _generateSelectedItems } from '@douyinfe/semi-foundation/lib/es/transfer/transferUtlls';
+import { _generateDataByType, _generateSelectedItems } from '@douyinfe/semi-foundation/lib/es/transfer/transferUtils';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/transfer/constants';
 import '@douyinfe/semi-foundation/lib/es/transfer/transfer.css';
 import BaseComponent from '../_base/baseComponent';

package/lib/es/treeSelect/index.js

@@ -40,7 +40,7 @@ import TagInput from '../tagInput';
 import { isSemiIcon } from '../_utils';
 import { IconChevronDown, IconClear, IconSearch } from '@douyinfe/semi-icons';
 const prefixcls = cssClasses.PREFIX;
-const prefixTree = cssClasses.PREFIXTREE;
+const prefixTree = cssClasses.PREFIX_TREE;
 const key = 0;
 
 class TreeSelect extends BaseComponent {