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

package/form/baseForm.tsx

@@ -122,7 +122,7 @@ class Form extends BaseComponent<BaseFormProps, BaseFormState> {
     constructor(props: BaseFormProps) {
         super(props);
         this.state = {
-            formId: getUuidv4(),
+            formId: '',
         };
         warning(
             Boolean(props.component && props.render),
@@ -145,6 +145,10 @@ class Form extends BaseComponent<BaseFormProps, BaseFormState> {
         }
     }
 
+    componentDidMount() {
+        this.foundation.init();
+    }
+
     componentWillUnmount() {
         this.foundation.destroy();
         this.foundation = null;
@@ -173,6 +177,11 @@ class Form extends BaseComponent<BaseFormProps, BaseFormState> {
             notifyReset: () => {
                 this.props.onReset();
             },
+            initFormId: () => {
+                this.setState({
+                    formId: getUuidv4()
+                });
+            },
             getInitValues: () => this.props.initValues,
             getFormProps: (keys: undefined | string | Array<string>) => {
                 if (typeof keys === 'undefined') {

package/form/hoc/withField.tsx

@@ -379,12 +379,24 @@ function withField<
                 return () => {};
             }
             // log('register: ' + field);
-            updater.register(field, fieldState, {
+
+            // field value may change after field component mounted, we use ref value here to get changed value
+            const refValue = getVal();
+            updater.register(
                 field,
-                fieldApi,
-                keepState,
-                allowEmpty: allowEmpty || allowEmptyString,
-            });
+                {
+                    value: refValue,
+                    error,
+                    touched,
+                    status,
+                },
+                {
+                    field,
+                    fieldApi,
+                    keepState,
+                    allowEmpty: allowEmpty || allowEmptyString,
+                }
+            );
             // return unRegister cb
             return () => {
                 updater.unRegister(field);

package/inputNumber/__test__/inputNumber.test.js

@@ -6,7 +6,7 @@ import keyCode from '@douyinfe/semi-foundation/utils/keyCode';
 import * as _ from 'lodash';
 import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
 import { numbers } from '@douyinfe/semi-foundation/inputNumber/constants';
-import { Form, withField } from '../../index';
+import { Form, withField, useFormApi } from '../../index';
 
 const log = (...args) => console.log(...args);
 const times = (n = 0, fn) => {
@@ -182,8 +182,9 @@ describe(`InputNumber`, () => {
         const inputElem = inputNumber.find('input');
 
         inputElem.simulate('change', event);
-        expect(onChange.calledOnce).toBe(true);
-        expect(onChange.calledWithMatch(Number(newValue.toFixed(precision)))).toBe(true);
+        expect(onChange.calledTwice).toBe(true);
+        expect(onChange.getCall(1).args[0]).toEqual(Number(newValue.toFixed(precision)));
+        // expect(onChange.calledWithMatch(Number(newValue.toFixed(precision)))).toBe(true);
         expect(inputElem.instance().value).toBe(formatter(newValue));
 
         inputElem.simulate('blur');
@@ -395,4 +396,40 @@ describe(`InputNumber`, () => {
         expect(onUpClick.called).toBe(false);
         expect(onDownClick.called).toBe(false);
     });
+
+    it('fix controlled min value didMount', () => {
+        const spyChange = sinon.spy();
+        const inputNumber = mount(
+            <InputNumber min={1} value={0} onChange={spyChange} />
+        );
+        expect(spyChange.calledOnce).toBe(true);
+    });
+
+    it('fix controlled min value didUpdate', () => {
+        const spyChange = sinon.spy();
+        const value = undefined;
+        const inputNumber = mount(
+            <InputNumber min={1} value={value} onChange={spyChange} />
+        );
+        inputNumber.setProps({ value: 0 });
+        expect(spyChange.calledTwice).toBe(true);
+        expect(spyChange.getCall(0).args[0]).toEqual('');
+        expect(spyChange.getCall(1).args[0]).toEqual(1);
+    });
+
+    it('fix controlled min value form field', () => {
+        const spyChange = sinon.spy();
+        let formApi = null;
+        let getFormApi = api => {
+            formApi = api;
+        };
+        const inputNumber = mount(
+            <Form initValues={{ minControlled: 0 }} getFormApi={getFormApi}>
+                <Form.InputNumber field="minControlled" min={1} onChange={spyChange} />
+            </Form>
+        );
+        expect(spyChange.calledOnce).toBe(true);
+        expect(spyChange.getCall(0).args[0]).toEqual(1);
+        expect(formApi.getValue('minControlled')).toBe(1);
+    });
 });

package/inputNumber/_story/inputNumber.stories.js

@@ -4,6 +4,7 @@ import './inputNumber.scss';
 import InputNumber from '../index';
 import Button from '../../button/index';
 import { withField, Form } from '../../index';
+import { useFormApi } from '../../form';
 
 export default {
   title: 'InputNumber',
@@ -656,4 +657,58 @@ export const FixPrecision = () => {
         <InputNumber keepFocus onBlur={() => console.log('blur')} onChange={v => setValue2(v)} value={value2} style={{ width: 190 }} precision={2} />
     </div>
   );
-}
+}
+
+/**
+ * 受控传超出 min value 的值，需要触发 onChange
+ * 不然在 Form 中使用可能会导致 Form State 与 InputNumber 展示的值不同问题
+ */
+export const FixMinValue = () => {
+  const [value, setValue] = useState();
+  const formRef = useFormApi();
+  return (
+      <div style={{ width: 280 }}>
+          <Button onClick={() => setValue(0)}>min=1, setValue=0</Button>
+          <InputNumber
+            min={1}
+            value={value} 
+            onChange={(v, e) => {
+              console.log('inputNumber1 change', `'${v}'`, e);
+              setValue(v);
+            }} 
+          />
+          <InputNumber
+            min={1}
+            value={0} 
+            onChange={(v, e) => {
+              console.log('inputNumber2 change', v, e);
+            }}
+          />
+          <Form initValues={{ minControlled: 0 }}>
+            <Form.InputNumber
+              field='minControlled'
+              min={1}
+              onChange={(v, e) => {
+                console.log('form inputNumber change', v, e);
+              }}
+            />
+          </Form>
+          <Button onClick={() => formRef.current.setValue('minControlled', 0) }>set form value</Button>
+          <Button onClick={() => { console.log('form value', JSON.stringify(formRef.current.getValues()))}}>get form values</Button>
+      </div>
+  );
+}
+FixMinValue.storyName = 'fix min value';
+
+/**
+ * fix InputNumber precision 删除后，输入非法字符显示 0.00
+ * https://github.com/DouyinFE/semi-design/issues/786
+ */
+export const FixPrecision786 = () => {
+  return (
+    <div data-cy="fix-precision-786">
+        <InputNumber defaultValue={10.00} precision={2} />
+    </div>
+  );
+}
+FixPrecision786.storyName = 'fix precision 删除后输入非法值会显示 0.00';

package/inputNumber/index.tsx

@@ -10,13 +10,13 @@ import Input, { InputProps } from '../input';
 import { forwardStatics } from '@douyinfe/semi-foundation/utils/object';
 import isNullOrUndefined from '@douyinfe/semi-foundation/utils/isNullOrUndefined';
 import isBothNaN from '@douyinfe/semi-foundation/utils/isBothNaN';
-import InputNumberFoundation, { InputNumberAdapter } from '@douyinfe/semi-foundation/inputNumber/foundation';
+import InputNumberFoundation, { BaseInputNumberState, InputNumberAdapter } from '@douyinfe/semi-foundation/inputNumber/foundation';
 import BaseComponent from '../_base/baseComponent';
 import { cssClasses, numbers, strings } from '@douyinfe/semi-foundation/inputNumber/constants';
 import { IconChevronUp, IconChevronDown } from '@douyinfe/semi-icons';
 
 import '@douyinfe/semi-foundation/inputNumber/inputNumber.scss';
-import { isNaN, noop } from 'lodash';
+import { isNaN, isString, noop } from 'lodash';
 import { ArrayElement } from '../_base/base';
 
 export interface InputNumberProps extends InputProps {
@@ -54,12 +54,7 @@ export interface InputNumberProps extends InputProps {
     onUpClick?: (value: string, e: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
-export interface InputNumberState {
-    value?: number | string;
-    number?: number | null; // Current parsed numbers
-    focusing?: boolean;
-    hovering?: boolean;
-}
+export interface InputNumberState extends BaseInputNumberState {}
 
 class InputNumber extends BaseComponent<InputNumberProps, InputNumberState> {
     static propTypes = {
@@ -222,6 +217,9 @@ class InputNumber extends BaseComponent<InputNumberProps, InputNumberState> {
             },
             setClickUpOrDown: value => {
                 this.clickUpOrDown = value;
+            },
+            updateStates: (states, callback) => {
+                this.setState(states, callback);
             }
         };
     }
@@ -250,13 +248,15 @@ class InputNumber extends BaseComponent<InputNumberProps, InputNumberState> {
     componentDidUpdate(prevProps: InputNumberProps) {
         const { value } = this.props;
         const { focusing } = this.state;
+        let newValue;
         /**
          * To determine whether the front and back are equal
          * NaN need to check whether both are NaN
          */
         if (value !== prevProps.value && !isBothNaN(value, prevProps.value)) {
             if (isNullOrUndefined(value) || value === '') {
-                this.setState({ value: '', number: null });
+                newValue = '';
+                this.foundation.updateStates({ value: newValue, number: null });
             } else {
                 let valueStr = value;
                 if (typeof value === 'number') {
@@ -306,22 +306,30 @@ class InputNumber extends BaseComponent<InputNumberProps, InputNumberState> {
                          */
                         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({ number: parsedNum, value: this.foundation.doFormat(parsedNum) });
+                    newValue = this.foundation.doFormat(parsedNum);
+                    this.foundation.updateStates({ number: parsedNum, value: newValue });
                 } else {
                     // Invalid digital analog blurring effect instead of controlled failure
-                    this.setState({ number: null, value: '' });
+                    newValue = '';
+                    this.foundation.updateStates({ number: null, value: newValue });
                 }
             }
+            if (isString(newValue) && newValue !== String(this.props.value)) {
+                this.foundation.notifyChange(newValue, null);
+            }
         }
 
         if (!this.clickUpOrDown) {

package/lib/cjs/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/cjs/carousel/CarouselArrow.js

@@ -14,8 +14,6 @@ var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 
 var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
 
-var _throttle2 = _interopRequireDefault(require("lodash/throttle"));
-
 var _get2 = _interopRequireDefault(require("lodash/get"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -55,8 +53,7 @@ class CarouselArrow extends _react.default.PureComponent {
       type,
       theme,
       prev,
-      next,
-      timing
+      next
     } = this.props;
     const classNames = (0, _classnames.default)({
       [_constants.cssClasses.CAROUSEL_ARROW]: true,
@@ -76,12 +73,12 @@ class CarouselArrow extends _react.default.PureComponent {
     }, /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({
       // role='button'
       className: leftClassNames,
-      onClick: (0, _throttle2.default)(prev, timing)
+      onClick: prev
     }, (0, _get2.default)(this.props, 'arrowProps.leftArrow.props')), this.renderLeftIcon()), /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({
       // role='button'
       // tabIndex={0} 
       className: rightClassNames,
-      onClick: (0, _throttle2.default)(next, timing)
+      onClick: next
     }, (0, _get2.default)(this.props, 'arrowProps.rightArrow.props')), this.renderRightIcon()));
   }
 

package/lib/cjs/carousel/index.js

@@ -100,7 +100,7 @@ class Carousel extends _baseComponent.default {
     };
 
     this.onIndicatorChange = activeIndex => {
-      return this.foundation.throttleChange(activeIndex);
+      return this.foundation.onIndicatorChange(activeIndex);
     };
 
     this.getChildren = () => {
@@ -199,7 +199,6 @@ class Carousel extends _baseComponent.default {
         theme,
         arrowProps
       } = this.props;
-      const timing = this.foundation.getSwitchingTime();
 
       if (showArrow && children.length > 1) {
         return /*#__PURE__*/_react.default.createElement(_CarouselArrow.default, {
@@ -207,7 +206,6 @@ class Carousel extends _baseComponent.default {
           theme: theme,
           prev: this.prev,
           next: this.next,
-          timing: timing,
           arrowProps: arrowProps
         });
       }

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

@@ -3,7 +3,7 @@ import { strings } from '@douyinfe/semi-foundation/lib/cjs/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/cjs/datePicker/monthsGrid.js

@@ -505,7 +505,7 @@ class MonthsGrid extends _baseComponent.default {
     const dateFormat = this.foundation.getValidDateFormat();
     let startDate, endDate;
 
-    if (type === 'dateTimeRange' && rangeStart && rangeEnd && (0, _dateFns.isSameDay)(startDate = (0, _parser.compatiableParse)(rangeStart, dateFormat, undefined, dateFnsLocale), endDate = (0, _parser.compatiableParse)(rangeEnd, dateFormat, undefined, dateFnsLocale))) {
+    if (type === 'dateTimeRange' && rangeStart && rangeEnd && (0, _dateFns.isSameDay)(startDate = (0, _parser.compatibleParse)(rangeStart, dateFormat, undefined, dateFnsLocale), endDate = (0, _parser.compatibleParse)(rangeEnd, dateFormat, undefined, dateFnsLocale))) {
       if (panelType === _constants.strings.PANEL_TYPE_RIGHT) {
         rangeStart && (restProps.startDate = startDate);
       } else {
@@ -591,10 +591,10 @@ class MonthsGrid extends _baseComponent.default {
 
     if (panelType === _constants.strings.PANEL_TYPE_LEFT) {
       panelDetail = monthLeft;
-      dateText = rangeStart ? (0, _dateFns.format)((0, _parser.compatiableParse)(rangeStart, dateFormat, undefined, dateFnsLocale), FORMAT_SWITCH_DATE) : '';
+      dateText = rangeStart ? (0, _dateFns.format)((0, _parser.compatibleParse)(rangeStart, dateFormat, undefined, dateFnsLocale), FORMAT_SWITCH_DATE) : '';
     } else {
       panelDetail = monthRight;
-      dateText = rangeEnd ? (0, _dateFns.format)((0, _parser.compatiableParse)(rangeEnd, dateFormat, undefined, dateFnsLocale), FORMAT_SWITCH_DATE) : '';
+      dateText = rangeEnd ? (0, _dateFns.format)((0, _parser.compatibleParse)(rangeEnd, dateFormat, undefined, dateFnsLocale), FORMAT_SWITCH_DATE) : '';
     }
 
     const {
@@ -603,7 +603,7 @@ class MonthsGrid extends _baseComponent.default {
     } = panelDetail;
     const monthText = showDate ? (0, _dateFns.format)(showDate, FORMAT_SWITCH_DATE) : '';
     const timeText = showDate ? (0, _dateFns.format)(showDate, formatTimePicker) : '';
-    const showSwithIcon = (0, _includes.default)(_context3 = ['default']).call(_context3, density);
+    const showSwitchIcon = (0, _includes.default)(_context3 = ['default']).call(_context3, density);
     const switchCls = (0, _classnames.default)("".concat(prefixCls, "-switch"));
     const dateCls = (0, _classnames.default)({
       ["".concat(prefixCls, "-switch-date")]: true,
@@ -623,7 +623,7 @@ class MonthsGrid extends _baseComponent.default {
       "aria-label": "Switch to date panel",
       className: dateCls,
       onClick: e => this.foundation.showDatePanel(panelType)
-    }, showSwithIcon && /*#__PURE__*/_react.default.createElement(_semiIcons.IconCalendar, {
+    }, showSwitchIcon && /*#__PURE__*/_react.default.createElement(_semiIcons.IconCalendar, {
       "aria-hidden": true
     }), /*#__PURE__*/_react.default.createElement("span", {
       className: textCls
@@ -632,7 +632,7 @@ class MonthsGrid extends _baseComponent.default {
       "aria-label": "Switch to time panel",
       className: timeCls,
       onClick: e => this.foundation.showTimePicker(panelType, true)
-    }, showSwithIcon && /*#__PURE__*/_react.default.createElement(_semiIcons.IconClock, {
+    }, showSwitchIcon && /*#__PURE__*/_react.default.createElement(_semiIcons.IconClock, {
       "aria-hidden": true
     }), /*#__PURE__*/_react.default.createElement("span", {
       className: textCls

package/lib/cjs/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/cjs/form/baseForm.js

@@ -85,7 +85,7 @@ class Form extends _baseComponent.default {
 
     super(props);
     this.state = {
-      formId: (0, _uuid.getUuidv4)()
+      formId: ''
     };
     (0, _warning.default)(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');
     (0, _warning.default)(props.component && props.children && !(0, _reactUtils.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');
@@ -100,6 +100,10 @@ class Form extends _baseComponent.default {
     }
   }
 
+  componentDidMount() {
+    this.foundation.init();
+  }
+
   componentWillUnmount() {
     this.foundation.destroy();
     this.foundation = null;
@@ -127,6 +131,11 @@ class Form extends _baseComponent.default {
       notifyReset: () => {
         this.props.onReset();
       },
+      initFormId: () => {
+        this.setState({
+          formId: (0, _uuid.getUuidv4)()
+        });
+      },
       getInitValues: () => this.props.initValues,
       getFormProps: keys => {
         if (typeof keys === 'undefined') {

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

@@ -413,9 +413,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/cjs/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/cjs/inputNumber/foundation';
+import InputNumberFoundation, { BaseInputNumberState, InputNumberAdapter } from '@douyinfe/semi-foundation/lib/cjs/inputNumber/foundation';
 import BaseComponent from '../_base/baseComponent';
 import { strings } from '@douyinfe/semi-foundation/lib/cjs/inputNumber/constants';
 import '@douyinfe/semi-foundation/lib/cjs/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/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/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> {