@douyinfe/semi-ui 2.10.0-alpha.0 → 2.10.1

package/lib/es/carousel/index.js

@@ -0,0 +1,309 @@
+import _debounce from "lodash/debounce";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+import React, { Children } from 'react';
+import cls from 'classnames';
+import PropTypes from 'prop-types';
+import BaseComponent from "../_base/baseComponent";
+import { cssClasses, numbers, strings } from '@douyinfe/semi-foundation/lib/es/carousel/constants';
+import CarouselFoundation from '@douyinfe/semi-foundation/lib/es/carousel/foundation';
+import CarouselIndicator from './CarouselIndicator';
+import CarouselArrow from './CarouselArrow';
+import '@douyinfe/semi-foundation/lib/es/carousel/carousel.css';
+import isNullOrUndefined from '@douyinfe/semi-foundation/lib/es/utils/isNullOrUndefined';
+
+class Carousel extends BaseComponent {
+  constructor(props) {
+    super(props);
+
+    this.play = () => {
+      return this.foundation.handleAutoPlay();
+    };
+
+    this.stop = () => {
+      return this.foundation.stop();
+    };
+
+    this.goTo = targetIndex => {
+      return this.foundation.goTo(targetIndex);
+    };
+
+    this.prev = () => {
+      return this.foundation.prev();
+    };
+
+    this.next = () => {
+      return this.foundation.next();
+    };
+
+    this.handleAutoPlay = () => {
+      if (!this.foundation.getIsControledComponent()) {
+        this.foundation.handleAutoPlay();
+      }
+    };
+
+    this.handleMouseEnter = () => {
+      const {
+        autoPlay
+      } = this.props;
+
+      if (typeof autoPlay !== 'object' || autoPlay.hoverToPause) {
+        this.foundation.stop();
+      }
+    };
+
+    this.handleMouseLeave = () => {
+      const {
+        autoPlay
+      } = this.props;
+
+      if ((typeof autoPlay !== 'object' || autoPlay.hoverToPause) && !this.foundation.getIsControledComponent()) {
+        this.foundation.handleAutoPlay();
+      }
+    };
+
+    this.onIndicatorChange = activeIndex => {
+      return this.foundation.onIndicatorChange(activeIndex);
+    };
+
+    this.getChildren = () => {
+      var _context;
+
+      const {
+        children: originChildren
+      } = this.props;
+      return _filterInstanceProperty(_context = Children.toArray(originChildren)).call(_context, child => {
+        return /*#__PURE__*/React.isValidElement(child);
+      });
+    };
+
+    this.getValidIndex = activeIndex => {
+      return this.foundation.getValidIndex(activeIndex);
+    };
+
+    this.renderChildren = () => {
+      const {
+        speed,
+        animation
+      } = this.props;
+      const {
+        activeIndex,
+        children,
+        preIndex,
+        isInit
+      } = this.state;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, _mapInstanceProperty(children).call(children, (child, index) => {
+        const isCurrent = index === activeIndex;
+        const isPrev = index === this.getValidIndex(activeIndex - 1);
+        const isNext = index === this.getValidIndex(activeIndex + 1);
+        const animateStyle = {
+          transitionTimingFunction: 'ease',
+          transitionDuration: "".concat(speed, "ms"),
+          animationTimingFunction: 'ease',
+          animationDuration: "".concat(speed, "ms")
+        };
+        return /*#__PURE__*/React.cloneElement(child, {
+          style: _Object$assign(_Object$assign({}, child.props.style), animateStyle),
+          className: cls(child.props.className, {
+            ["".concat(cssClasses.CAROUSEL_CONTENT, "-item-prev")]: isPrev,
+            ["".concat(cssClasses.CAROUSEL_CONTENT, "-item-next")]: isNext,
+            ["".concat(cssClasses.CAROUSEL_CONTENT, "-item-current")]: isCurrent,
+            ["".concat(cssClasses.CAROUSEL_CONTENT, "-item")]: true,
+            ["".concat(cssClasses.CAROUSEL_CONTENT, "-item-active")]: isCurrent,
+            ["".concat(cssClasses.CAROUSEL_CONTENT, "-item-slide-in")]: animation === 'slide' && !isInit && isCurrent,
+            ["".concat(cssClasses.CAROUSEL_CONTENT, "-item-slide-out")]: animation === 'slide' && !isInit && index === preIndex
+          })
+        });
+      }));
+    };
+
+    this.renderIndicator = () => {
+      const {
+        children,
+        activeIndex
+      } = this.state;
+      const {
+        showIndicator,
+        indicatorType,
+        theme,
+        indicatorPosition,
+        indicatorSize,
+        trigger
+      } = this.props;
+      const carouselIndicatorCls = cls({
+        [cssClasses.CAROUSEL_INDICATOR]: true
+      });
+
+      if (showIndicator && children.length > 1) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: carouselIndicatorCls
+        }, /*#__PURE__*/React.createElement(CarouselIndicator, {
+          type: indicatorType,
+          total: children.length,
+          activeIndex: activeIndex,
+          position: indicatorPosition,
+          trigger: trigger,
+          size: indicatorSize,
+          theme: theme,
+          onIndicatorChange: this.onIndicatorChange
+        }));
+      }
+
+      return null;
+    };
+
+    this.renderArrow = () => {
+      const {
+        children
+      } = this.state;
+      const {
+        showArrow,
+        arrowType,
+        theme,
+        arrowProps
+      } = this.props;
+
+      if (showArrow && children.length > 1) {
+        return /*#__PURE__*/React.createElement(CarouselArrow, {
+          type: arrowType,
+          theme: theme,
+          prev: this.prev,
+          next: this.next,
+          arrowProps: arrowProps
+        });
+      }
+
+      return null;
+    };
+
+    this.foundation = new CarouselFoundation(this.adapter);
+    const defaultActiveIndex = this.foundation.getDefaultActiveIndex();
+    this.state = {
+      activeIndex: defaultActiveIndex,
+      children: this.getChildren(),
+      preIndex: defaultActiveIndex,
+      isReverse: false,
+      isInit: true
+    };
+  }
+
+  get adapter() {
+    return _Object$assign(_Object$assign({}, super.adapter), {
+      notifyChange: (activeIndex, preIndex) => {
+        this.props.onChange(activeIndex, preIndex);
+      },
+      setNewActiveIndex: activeIndex => {
+        this.setState({
+          activeIndex
+        });
+      },
+      setPreActiveIndex: preIndex => {
+        this.setState({
+          preIndex
+        });
+      },
+      setIsReverse: isReverse => {
+        this.setState({
+          isReverse
+        });
+      },
+      setIsInit: isInit => {
+        this.setState({
+          isInit
+        });
+      }
+    });
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    const states = {};
+
+    if (!isNullOrUndefined(props.activeIndex) && props.activeIndex !== state.activeIndex) {
+      states.activeIndex = props.activeIndex;
+    }
+
+    return states;
+  }
+
+  componentDidMount() {
+    this.handleAutoPlay();
+  }
+
+  componentWillUnmount() {
+    this.foundation.destroy();
+  }
+
+  render() {
+    var _context2;
+
+    const {
+      animation,
+      className,
+      style,
+      slideDirection
+    } = this.props;
+    const {
+      isReverse
+    } = this.state;
+    const carouselWrapperCls = cls(className, {
+      [cssClasses.CAROUSEL]: true
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      // role='listbox'
+      // tabIndex={0}
+      className: carouselWrapperCls,
+      style: style,
+      onMouseEnter: _debounce(this.handleMouseEnter, 400),
+      onMouseLeave: _debounce(this.handleMouseLeave, 400)
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cls([_concatInstanceProperty(_context2 = "".concat(cssClasses.CAROUSEL_CONTENT, "-")).call(_context2, animation)], {
+        ["".concat(cssClasses.CAROUSEL_CONTENT)]: true,
+        ["".concat(cssClasses.CAROUSEL_CONTENT, "-reverse")]: slideDirection === 'left' ? isReverse : !isReverse
+      })
+    }, this.renderChildren()), this.renderIndicator(), this.renderArrow());
+  }
+
+}
+
+Carousel.propTypes = {
+  activeIndex: PropTypes.number,
+  animation: PropTypes.oneOf(strings.ANIMATION_MAP),
+  arrowProps: PropTypes.object,
+  autoPlay: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
+  className: PropTypes.string,
+  defaultActiveIndex: PropTypes.number,
+  indicatorPosition: PropTypes.oneOf(strings.POSITION_MAP),
+  indicatorSize: PropTypes.oneOf(strings.SIZE),
+  indicatorType: PropTypes.oneOf(strings.TYPE_MAP),
+  theme: PropTypes.oneOf(strings.THEME_MAP),
+  onChange: PropTypes.func,
+  arrowType: PropTypes.oneOf(strings.ARROW_MAP),
+  showArrow: PropTypes.bool,
+  showIndicator: PropTypes.bool,
+  slideDirection: PropTypes.oneOf(strings.DIRECTION),
+  speed: PropTypes.number,
+  style: PropTypes.object,
+  trigger: PropTypes.oneOf(strings.TRIGGER)
+};
+Carousel.defaultProps = {
+  children: [],
+  animation: 'slide',
+  autoPlay: true,
+  arrowType: 'always',
+  defaultActiveIndex: numbers.DEFAULT_ACTIVE_INDEX,
+  indicatorPosition: 'center',
+  indicatorSize: 'small',
+  indicatorType: 'dot',
+  theme: 'light',
+  onChange: () => undefined,
+  showArrow: true,
+  showIndicator: true,
+  slideDirection: 'left',
+  speed: numbers.DEFAULT_SPEED,
+  trigger: 'click'
+};
+export default Carousel;

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

@@ -0,0 +1,61 @@
+import React, { ReactNode } from "react";
+import { strings } from '@douyinfe/semi-foundation/lib/es/carousel/constants';
+export interface CarouselMethod {
+    next?: () => void;
+    prev?: () => void;
+    goTo?: (tagetIndex: number) => void;
+    play?: () => void;
+    stop?: () => void;
+}
+export interface CarouselProps {
+    activeIndex?: number;
+    animation?: typeof strings.ANIMATION_MAP[number];
+    arrowProps?: ArrowProps;
+    autoPlay?: boolean | {
+        interval?: number;
+        hoverToPause?: boolean;
+    };
+    arrowType?: typeof strings.ARROW_MAP[number];
+    children?: ReactNode | Array<ReactNode>;
+    className?: string;
+    defaultActiveIndex?: number;
+    indicatorPosition?: typeof strings.POSITION_MAP[number];
+    indicatorSize?: typeof strings.SIZE[number];
+    theme?: typeof strings.THEME_MAP[number];
+    indicatorType?: typeof strings.TYPE_MAP[number];
+    onChange?: (index: number, preIndex: number) => void;
+    showArrow?: boolean;
+    showIndicator?: boolean;
+    slideDirection?: typeof strings.DIRECTION[number];
+    speed?: number;
+    style?: React.CSSProperties;
+    trigger?: typeof strings.TRIGGER[number];
+}
+export interface CarouselIndicatorProps {
+    activeIndex?: number;
+    className?: string;
+    defaultActiveIndex?: number;
+    position?: typeof strings.POSITION_MAP[number];
+    size?: typeof strings.SIZE[number];
+    total?: number;
+    theme?: typeof strings.THEME_MAP[number];
+    type?: typeof strings.TYPE_MAP[number];
+    onIndicatorChange?: (activeIndex: number) => void;
+    style?: React.CSSProperties;
+    trigger?: typeof strings.TRIGGER[number];
+}
+export interface CarouselArrowProps {
+    type?: typeof strings.ARROW_MAP[number];
+    theme?: typeof strings.THEME_MAP[number];
+    prev?: () => void;
+    next?: () => void;
+    arrowProps?: ArrowProps;
+}
+export interface ArrowButton {
+    props?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+    children?: React.ReactNode;
+}
+export interface ArrowProps {
+    leftArrow?: ArrowButton;
+    rightArrow?: ArrowButton;
+}

package/lib/es/carousel/interface.js

@@ -0,0 +1 @@
+export {};

package/lib/es/cascader/index.js

@@ -84,7 +84,7 @@ class Cascader extends BaseComponent {
               e.preventDefault();
               this.handleTagRemove(e, keyEntities[nodeKey].valuePath);
             }
-          }, displayProp === 'label' && keyEntities[nodeKey].data.label, displayProp === 'value' && keyEntities[nodeKey].data.value);
+          }, keyEntities[nodeKey].data[displayProp]);
         }
       }
 

package/lib/es/checkbox/checkbox.d.ts

@@ -22,13 +22,9 @@ export interface CheckboxProps extends BaseCheckboxProps {
     'aria-label'?: React.AriaAttributes['aria-label'];
     role?: React.HTMLAttributes<HTMLSpanElement>['role'];
     tabIndex?: number;
-    addonId?: string;
-    extraId?: string;
 }
 interface CheckboxState {
     checked: boolean;
-    addonId?: string;
-    extraId?: string;
 }
 declare class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
     static contextType: React.Context<CheckboxContextType>;

package/lib/es/checkbox/checkbox.js

@@ -26,11 +26,15 @@ class Checkbox extends BaseComponent {
 
     const checked = false;
     this.state = {
-      checked: props.checked || props.defaultChecked || checked,
-      addonId: props.addonId,
-      extraId: props.extraId
+      checked: props.checked || props.defaultChecked || checked
     };
     this.checkboxEntity = null;
+    this.addonId = getUuidShort({
+      prefix: 'addon'
+    });
+    this.extraId = getUuidShort({
+      prefix: 'extra'
+    });
     this.foundation = new CheckboxFoundation(this.adapter);
   }
 
@@ -52,21 +56,7 @@ class Checkbox extends BaseComponent {
       notifyGroupChange: cbContent => {
         this.context.checkboxGroup.onChange(cbContent);
       },
-      getGroupDisabled: () => this.context && this.context.checkboxGroup.disabled,
-      setAddonId: () => {
-        this.setState({
-          addonId: getUuidShort({
-            prefix: 'addon'
-          })
-        });
-      },
-      setExtraId: () => {
-        this.setState({
-          extraId: getUuidShort({
-            prefix: 'extra'
-          })
-        });
-      }
+      getGroupDisabled: () => this.context && this.context.checkboxGroup.disabled
     });
   }
 
@@ -109,9 +99,7 @@ class Checkbox extends BaseComponent {
       id
     } = this.props;
     const {
-      checked,
-      addonId,
-      extraId
+      checked
     } = this.state;
     const props = {
       checked,
@@ -159,10 +147,10 @@ class Checkbox extends BaseComponent {
     const name = inGroup && this.context.checkboxGroup.name;
 
     const renderContent = () => /*#__PURE__*/React.createElement(React.Fragment, null, children ? /*#__PURE__*/React.createElement("span", {
-      id: addonId,
+      id: this.addonId,
       className: "".concat(prefix, "-addon")
     }, children) : null, extra ? /*#__PURE__*/React.createElement("div", {
-      id: extraId,
+      id: this.extraId,
       className: extraCls
     }, extra) : null);
 
@@ -182,8 +170,8 @@ class Checkbox extends BaseComponent {
         onKeyPress: this.handleEnterPress,
         "aria-labelledby": this.props['aria-labelledby']
       }, /*#__PURE__*/React.createElement(CheckboxInner, _Object$assign({}, this.props, props, {
-        addonId: children && addonId,
-        extraId: extra && extraId,
+        addonId: children && this.addonId,
+        extraId: extra && this.extraId,
         name: name,
         isPureCardType: props.isPureCardType,
         ref: ref => {

package/lib/es/datePicker/dateInput.d.ts

@@ -26,7 +26,7 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         value: PropTypes.Requireable<any[]>;
         disabled: PropTypes.Requireable<boolean>;
-        type: PropTypes.Requireable<"date" | "month" | "dateTime" | "dateRange" | "year" | "dateTimeRange">;
+        type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
         showClear: PropTypes.Requireable<boolean>;
         format: PropTypes.Requireable<string>;
         inputStyle: PropTypes.Requireable<object>;

package/lib/es/datePicker/datePicker.d.ts

@@ -41,7 +41,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         'aria-invalid': PropTypes.Requireable<boolean>;
         'aria-labelledby': PropTypes.Requireable<string>;
         'aria-required': PropTypes.Requireable<boolean>;
-        type: PropTypes.Requireable<"date" | "month" | "dateTime" | "dateRange" | "year" | "dateTimeRange">;
+        type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
         size: PropTypes.Requireable<"default" | "small" | "large">;
         density: PropTypes.Requireable<"default" | "compact">;
         defaultValue: PropTypes.Requireable<string | number | object>;

package/lib/es/datePicker/insetInput.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { InsetInputValue, Type, InsetInputChangeFoundationProps } from '@douyinfe/semi-foundation/lib/es/datePicker/inputFoundation';
 import { InputProps } from '../input';
 export interface InsetDateInputProps {

package/lib/es/datePicker/monthsGrid.d.ts

@@ -17,7 +17,7 @@ export interface MonthsGridProps extends MonthsGridFoundationProps, BaseProps {
 export declare type MonthsGridState = MonthsGridFoundationState;
 export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGridState> {
     static propTypes: {
-        type: PropTypes.Requireable<"date" | "month" | "dateTime" | "dateRange" | "year" | "dateTimeRange">;
+        type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
         defaultValue: PropTypes.Requireable<string | number | object>;
         defaultPickerValue: PropTypes.Requireable<string | number | object>;
         multiple: PropTypes.Requireable<boolean>;

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/dropdown/dropdownMenu.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import PropTypes from 'prop-types';
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 export declare type DropdownMenuProps = BaseProps;

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

@@ -125,7 +125,7 @@ declare class Form extends BaseComponent<BaseFormProps, BaseFormState> {
         onBlur?: (e: React.FocusEvent<Element, Element>) => void;
         onListScroll?: (e: React.UIEvent<HTMLDivElement, UIEvent>) => void;
         children?: React.ReactNode;
-    } & Pick<import("../tooltip").TooltipProps, "getPopupContainer" | "stopPropagation" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay" | "motion"> & React.RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
+    } & Pick<import("../tooltip").TooltipProps, "stopPropagation" | "getPopupContainer" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay" | "motion"> & React.RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
     static Checkbox: React.ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../checkbox").CheckboxProps & import("./interface").RCIncludeType>;
     static CheckboxGroup: React.ComponentType<import("utility-types").Subtract<import("../checkbox").CheckboxGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps>;
     static Radio: React.ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../radio").RadioProps & import("./interface").RCIncludeType>;
@@ -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,6 +62,10 @@ class Form extends BaseComponent {
     }
   }
 
+  componentDidMount() {
+    this.foundation.init();
+  }
+
   componentWillUnmount() {
     this.foundation.destroy();
     this.foundation = null;
@@ -89,6 +93,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/field.d.ts

@@ -73,7 +73,7 @@ declare const FormSelect: import("react").ComponentType<import("utility-types").
     onBlur?: (e: import("react").FocusEvent<Element, Element>) => void;
     onListScroll?: (e: import("react").UIEvent<HTMLDivElement, UIEvent>) => void;
     children?: import("react").ReactNode;
-} & Pick<import("../tooltip").TooltipProps, "getPopupContainer" | "stopPropagation" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay" | "motion"> & import("react").RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
+} & Pick<import("../tooltip").TooltipProps, "stopPropagation" | "getPopupContainer" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay" | "motion"> & import("react").RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
 declare const FormCheckboxGroup: import("react").ComponentType<import("utility-types").Subtract<import("../checkbox/checkboxGroup").CheckboxGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps>;
 declare const FormCheckbox: import("react").ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../checkbox/checkbox").CheckboxProps & import("./interface").RCIncludeType>;
 declare const FormRadioGroup: import("react").ComponentType<import("utility-types").Subtract<import("../radio/radioGroup").RadioGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps>;