@douyinfe/semi-ui 2.17.1 → 2.19.0-alpha.1

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

@@ -10,6 +10,7 @@ export default class Tag extends Component<TagProps, TagState> {
     static defaultProps: TagProps;
     static propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        tagKey: PropTypes.Requireable<PropTypes.Requireable<string> | PropTypes.Requireable<number>>;
         size: PropTypes.Requireable<string>;
         color: PropTypes.Requireable<string>;
         type: PropTypes.Requireable<string>;
@@ -28,7 +29,7 @@ export default class Tag extends Component<TagProps, TagState> {
         visible: boolean;
     };
     setVisible(visible: boolean): void;
-    close(e: React.MouseEvent<HTMLElement>, value: React.ReactNode): void;
+    close(e: React.MouseEvent<HTMLElement>, value: React.ReactNode, tagKey: string | number): void;
     handleKeyDown(event: any): void;
     renderAvatar(): JSX.Element;
     render(): JSX.Element;

package/lib/cjs/tag/index.js

@@ -118,13 +118,13 @@ class Tag extends _react.Component {
     }
   }
 
-  close(e, value) {
+  close(e, value, tagKey) {
     const {
       onClose
     } = this.props;
     e.stopPropagation();
     e.nativeEvent.stopImmediatePropagation();
-    onClose && onClose(value, e); // when user call e.preventDefault() in onClick callback, tag will not hidden
+    onClose && onClose(value, e, tagKey); // when user call e.preventDefault() in onClick callback, tag will not hidden
 
     if (e.defaultPrevented) {
       return;
@@ -143,7 +143,7 @@ class Tag extends _react.Component {
     switch (event.key) {
       case "Backspace":
       case "Delete":
-        closable && this.close(event, this.props.children);
+        closable && this.close(event, this.props.children, this.props.tagKey);
         (0, _a11y.handlePrevent)(event);
         break;
 
@@ -182,6 +182,7 @@ class Tag extends _react.Component {
 
     const _a = this.props,
           {
+      tagKey,
       children,
       size,
       color,
@@ -195,7 +196,7 @@ class Tag extends _react.Component {
       avatarShape,
       tabIndex
     } = _a,
-          attr = __rest(_a, ["children", "size", "color", "closable", "visible", "onClose", "onClick", "className", "type", "avatarSrc", "avatarShape", "tabIndex"]);
+          attr = __rest(_a, ["tagKey", "children", "size", "color", "closable", "visible", "onClose", "onClick", "className", "type", "avatarSrc", "avatarShape", "tabIndex"]);
 
     const {
       visible: isVisible
@@ -226,7 +227,7 @@ class Tag extends _react.Component {
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events
     _react.default.createElement("div", {
       className: "".concat(prefixCls, "-close"),
-      onClick: e => this.close(e, children)
+      onClick: e => this.close(e, children, tagKey)
     }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, {
       size: "small"
     })) : null;
@@ -254,6 +255,7 @@ Tag.defaultProps = {
 };
 Tag.propTypes = {
   children: _propTypes.default.node,
+  tagKey: _propTypes.default.oneOf([_propTypes.default.string, _propTypes.default.number]),
   size: _propTypes.default.oneOf(tagSize),
   color: _propTypes.default.oneOf(tagColors),
   type: _propTypes.default.oneOf(tagType),

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

@@ -5,12 +5,13 @@ export declare type TagSize = 'default' | 'small' | 'large';
 export declare type AvatarShape = 'circle' | 'square';
 export interface TagProps {
     children?: React.ReactNode;
+    tagKey?: string | number;
     size?: TagSize;
     color?: TagColor;
     type?: TagType;
     closable?: boolean;
     visible?: boolean;
-    onClose?: (tagChildren: React.ReactNode, event: React.MouseEvent<HTMLElement>) => void;
+    onClose?: (tagChildren: React.ReactNode, event: React.MouseEvent<HTMLElement>, tagKey: string | number) => void;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
     style?: React.CSSProperties;
     className?: string;

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

@@ -6,7 +6,7 @@ import BaseComponent from '../_base/baseComponent';
 import Input from '../input/index';
 import TreeNode from './treeNode';
 import '@douyinfe/semi-foundation/lib/cjs/tree/tree.css';
-import { TreeProps, TreeState, TreeNodeProps, TreeNodeData, FlattenNode, KeyEntity } from './interface';
+import { TreeProps, TreeState, TreeNodeProps, TreeNodeData, FlattenNode, KeyEntity, ScrollData } from './interface';
 export * from './interface';
 export { AutoSizerProps } from './autoSizer';
 declare class Tree extends BaseComponent<TreeProps, TreeState> {
@@ -102,6 +102,7 @@ declare class Tree extends BaseComponent<TreeProps, TreeState> {
     onNodeClick: any;
     onMotionEnd: any;
     context: ContextValue;
+    virtualizedListRef: React.RefObject<any>;
     constructor(props: TreeProps);
     /**
      * Process of getDerivedStateFromProps was inspired by rc-tree
@@ -110,6 +111,7 @@ declare class Tree extends BaseComponent<TreeProps, TreeState> {
     static getDerivedStateFromProps(props: TreeProps, prevState: TreeState): Partial<TreeState>;
     get adapter(): TreeAdapter;
     search: (value: string) => void;
+    scrollTo: (scrollData: ScrollData) => void;
     renderInput(): JSX.Element;
     renderEmpty: () => JSX.Element;
     onNodeSelect: (e: MouseEvent | KeyboardEvent, treeNode: TreeNodeProps) => void;

package/lib/cjs/tree/index.js

@@ -17,6 +17,8 @@ _Object$defineProperty(exports, "__esModule", {
 var _exportNames = {};
 exports.default = void 0;
 
+var _findIndex = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find-index"));
+
 var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/promise"));
 
 var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
@@ -101,6 +103,25 @@ class Tree extends _baseComponent.default {
       this.foundation.handleInputChange(value);
     };
 
+    this.scrollTo = scrollData => {
+      var _a;
+
+      const {
+        key,
+        align = 'center'
+      } = scrollData;
+      const {
+        flattenNodes
+      } = this.state;
+
+      if (key) {
+        const index = flattenNodes === null || flattenNodes === void 0 ? void 0 : (0, _findIndex.default)(flattenNodes).call(flattenNodes, node => {
+          return node.key === key;
+        });
+        index >= 0 && ((_a = this.virtualizedListRef.current) === null || _a === void 0 ? void 0 : _a.scrollToItem(index, align));
+      }
+    };
+
     this.renderEmpty = () => {
       const {
         emptyContent
@@ -262,6 +283,7 @@ class Tree extends _baseComponent.default {
     this.optionsRef = /*#__PURE__*/_react.default.createRef();
     this.foundation = new _foundation.default(this.adapter);
     this.dragNode = null;
+    this.virtualizedListRef = /*#__PURE__*/_react.default.createRef();
   }
   /**
    * Process of getDerivedStateFromProps was inspired by rc-tree
@@ -634,6 +656,7 @@ class Tree extends _baseComponent.default {
         width
       } = _ref4;
       return /*#__PURE__*/_react.default.createElement(_reactWindow.FixedSizeList, {
+        ref: this.virtualizedListRef,
         itemCount: flattenNodes.length,
         itemSize: virtualize.itemSize,
         height: height,

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

@@ -118,3 +118,7 @@ export interface NodeListState {
     cachedMotionKeys?: Set<string>;
     cachedData?: FlattenNode[];
 }
+export interface ScrollData {
+    key: string;
+    align?: 'center' | 'start' | 'end' | 'smart' | 'auto';
+}

package/lib/cjs/typography/title.d.ts

@@ -37,7 +37,7 @@ export default class Title extends PureComponent<TitleProps> {
         underline: PropTypes.Requireable<boolean>;
         strong: PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<"warning" | "success" | "primary" | "tertiary" | "secondary" | "danger" | "quaternary">;
-        heading: PropTypes.Requireable<1 | 2 | 3 | 4 | 5 | 6>;
+        heading: PropTypes.Requireable<4 | 2 | 1 | 3 | 5 | 6>;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         component: PropTypes.Requireable<string>;

package/lib/es/_base/base.css

@@ -1,6 +1,41 @@
 /* shadow */
 /* sizing */
 /* spacing */
+body {
+  --semi-transition_duration-slowest:0ms;
+  --semi-transition_duration-slower:0ms;
+  --semi-transition_duration-slow:0ms;
+  --semi-transition_duration-normal:0ms;
+  --semi-transition_duration-fast:0ms;
+  --semi-transition_duration-faster:0ms;
+  --semi-transition_duration-fastest:0ms;
+  --semi-transition_function-linear:linear;
+  --semi-transition_function-ease:ease;
+  --semi-transition_function-easeIn:ease-in;
+  --semi-transition_function-easeOut:ease-out;
+  --semi-transition_function-easeInIOut:ease-in-out;
+  --semi-transition_delay-slowest:0ms;
+  --semi-transition_delay-slower:0ms;
+  --semi-transition_delay-slow:0ms;
+  --semi-transition_delay-normal:0ms;
+  --semi-transition_delay-fast:0ms;
+  --semi-transition_delay-faster:0ms;
+  --semi-transition_delay-fastest:0ms;
+  --semi-transform_scale-none:scale(1,1);
+  --semi-transform_scale-small:scale(1,1);
+  --semi-transform_scale-medium:scale(1,1);
+  --semi-transform_scale-large:scale(1,1);
+  --semi-transform-rotate-none:rotate(0deg);
+  --semi-transform_rotate-clockwise90deg:rotate(90deg);
+  --semi-transform_rotate-clockwise180deg:rotate(180deg);
+  --semi-transform_rotate-clockwise270deg:rotate(270deg);
+  --semi-transform_rotate-clockwise360deg:rotate(360deg);
+  --semi-transform_rotate-anticlockwise90deg:rotate(-90deg);
+  --semi-transform_rotate-anticlockwise180deg:rotate(-180deg);
+  --semi-transform_rotate-anticlockwise270deg:rotate(-270deg);
+  --semi-transform_rotate-anticlockwise360deg:rotate(-360deg);
+}
+
 body,
 body .semi-always-light {
   --semi-amber-0: 254,251,235;

package/lib/es/anchor/index.js

@@ -273,7 +273,8 @@ class Anchor extends BaseComponent {
         top: slideBarTop
       }
     })), /*#__PURE__*/React.createElement("div", {
-      className: anchorWrapper
+      className: anchorWrapper,
+      role: "list"
     }, children)));
   }
 

package/lib/es/anchor/link.d.ts

@@ -36,6 +36,6 @@ export default class Link extends BaseComponent<LinkProps, {}> {
     componentDidUpdate(prevProps: LinkProps): void;
     componentWillUnmount(): void;
     renderTitle: () => string | number | boolean | React.ReactFragment | JSX.Element;
-    renderChildren: () => React.ReactNode;
+    renderChildren: () => JSX.Element;
     render(): JSX.Element;
 }

package/lib/es/anchor/link.js

@@ -65,10 +65,14 @@ export default class Link extends BaseComponent {
       } = this.props;
 
       if (!this.context.autoCollapse) {
-        return this.props.children;
+        return /*#__PURE__*/React.createElement("div", {
+          role: "list"
+        }, children);
       }
 
-      return activeLink === href || childMap[href] && childMap[href].has(activeLink) ? children : null;
+      return activeLink === href || childMap[href] && childMap[href].has(activeLink) ? /*#__PURE__*/React.createElement("div", {
+        role: "list"
+      }, children) : null;
     };
 
     this.foundation = new LinkFoundation(this.adapter);
@@ -144,8 +148,7 @@ export default class Link extends BaseComponent {
       ["".concat(prefixCls, "-link-title-disabled")]: disabled
     });
     const ariaProps = {
-      'aria-disabled': disabled,
-      'aria-label': href
+      'aria-disabled': disabled
     };
 
     if (active) {
@@ -158,7 +161,8 @@ export default class Link extends BaseComponent {
 
     return /*#__PURE__*/React.createElement("div", {
       className: linkCls,
-      style: style
+      style: style,
+      role: "listitem"
     }, /*#__PURE__*/React.createElement("div", _Object$assign({
       role: "link",
       tabIndex: 0

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { AutoCompleteAdapter, StateOptionItem, DataItem } from '@douyinfe/semi-foundation/lib/es/autoComplete/foundation';
 import BaseComponent, { ValidateStatus } from '../_base/baseComponent';
 import { Position } from '../tooltip';
-import Option from '../select/option';
+import Option from './option';
 import '@douyinfe/semi-foundation/lib/es/autoComplete/autoComplete.css';
 import { Motion } from '../_base/base';
 /**

package/lib/es/autoComplete/index.js

@@ -19,7 +19,7 @@ import Spin from '../spin';
 import Popover from '../popover';
 import Input from '../input';
 import Trigger from '../trigger';
-import Option from '../select/option';
+import Option from './option';
 import warning from '@douyinfe/semi-foundation/lib/es/utils/warning';
 import '@douyinfe/semi-foundation/lib/es/autoComplete/autoComplete.css';
 const prefixCls = cssClasses.PREFIX;

package/lib/es/autoComplete/option.d.ts

@@ -0,0 +1,50 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { BasicOptionProps } from '@douyinfe/semi-foundation/lib/es/autoComplete/optionFoundation';
+export interface OptionProps extends BasicOptionProps {
+    [x: string]: any;
+    value?: string | number;
+    label?: string | number | React.ReactNode;
+    children?: React.ReactNode;
+    disabled?: boolean;
+    showTick?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+interface renderOptionContentArgument {
+    config: {
+        searchWords: any;
+        sourceString: React.ReactNode;
+    };
+    children: React.ReactNode;
+    inputValue: string;
+    prefixCls: string;
+}
+declare class Option extends PureComponent<OptionProps> {
+    static isSelectOption: boolean;
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        disabled: PropTypes.Requireable<boolean>;
+        value: PropTypes.Requireable<string | number>;
+        selected: PropTypes.Requireable<boolean>;
+        label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        empty: PropTypes.Requireable<boolean>;
+        emptyContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
+        focused: PropTypes.Requireable<boolean>;
+        showTick: PropTypes.Requireable<boolean>;
+        className: PropTypes.Requireable<string>;
+        style: PropTypes.Requireable<object>;
+        onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
+        prefixCls: PropTypes.Requireable<string>;
+        renderOptionItem: PropTypes.Requireable<(...args: any[]) => any>;
+        inputValue: PropTypes.Requireable<string>;
+    };
+    static defaultProps: {
+        prefixCls: string;
+    };
+    onClick({ value, label, children, ...rest }: Partial<OptionProps>, event: React.MouseEvent): void;
+    renderOptionContent({ config, children, inputValue, prefixCls }: renderOptionContentArgument): React.ReactNode;
+    render(): any;
+}
+export default Option;

package/lib/es/autoComplete/option.js

@@ -0,0 +1,188 @@
+import _isString from "lodash/isString";
+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";
+import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && _indexOfInstanceProperty(e).call(e, p) < 0) t[p] = s[p];
+
+  if (s != null && typeof _Object$getOwnPropertySymbols === "function") for (var i = 0, p = _Object$getOwnPropertySymbols(s); i < p.length; i++) {
+    if (_indexOfInstanceProperty(e).call(e, p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+/* eslint-disable max-len */
+
+
+import React, { PureComponent } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { cssClasses } from '@douyinfe/semi-foundation/lib/es/autoComplete/constants';
+import LocaleConsumer from '../locale/localeConsumer';
+import { IconTick } from '@douyinfe/semi-icons';
+import { getHighLightTextHTML } from '../_utils/index';
+
+class Option extends PureComponent {
+  onClick(_a, event) {
+    var {
+      value,
+      label,
+      children
+    } = _a,
+        rest = __rest(_a, ["value", "label", "children"]);
+
+    const {
+      props
+    } = this;
+    const isDisabled = props.disabled;
+
+    if (!isDisabled) {
+      props.onSelect(_Object$assign(_Object$assign({}, rest), {
+        value,
+        label: label || children
+      }), event);
+    }
+  }
+
+  renderOptionContent(_ref) {
+    let {
+      config,
+      children,
+      inputValue,
+      prefixCls
+    } = _ref;
+
+    if (_isString(children) && inputValue) {
+      return getHighLightTextHTML(config);
+    }
+
+    return children;
+  }
+
+  render() {
+    const _a = this.props,
+          {
+      children,
+      disabled,
+      value,
+      selected,
+      label,
+      empty,
+      emptyContent,
+      onSelect,
+      focused,
+      showTick,
+      className,
+      style,
+      onMouseEnter,
+      prefixCls,
+      renderOptionItem,
+      inputValue
+    } = _a,
+          rest = __rest(_a, ["children", "disabled", "value", "selected", "label", "empty", "emptyContent", "onSelect", "focused", "showTick", "className", "style", "onMouseEnter", "prefixCls", "renderOptionItem", "inputValue"]);
+
+    const optionClassName = classNames(prefixCls, {
+      ["".concat(prefixCls, "-disabled")]: disabled,
+      ["".concat(prefixCls, "-selected")]: selected,
+      ["".concat(prefixCls, "-focused")]: focused,
+      ["".concat(prefixCls, "-empty")]: empty,
+      [className]: className
+    });
+    const selectedIconClassName = classNames(["".concat(prefixCls, "-icon")]);
+
+    if (empty) {
+      if (emptyContent === null) {
+        return null;
+      }
+
+      return /*#__PURE__*/React.createElement(LocaleConsumer, {
+        componentName: "Select"
+      }, locale => /*#__PURE__*/React.createElement("div", {
+        className: optionClassName,
+        "x-semi-prop": "emptyContent"
+      }, emptyContent || locale.emptyText));
+    } // Since there are empty, locale and other logic, the custom renderOptionItem is directly converged to the internal option instead of being placed in Select/index
+
+
+    if (typeof renderOptionItem === 'function') {
+      return renderOptionItem(_Object$assign({
+        disabled,
+        focused,
+        selected,
+        style,
+        label,
+        value,
+        inputValue,
+        onMouseEnter: e => onMouseEnter(e),
+        onClick: e => this.onClick(_Object$assign({
+          value,
+          label,
+          children
+        }, rest), e)
+      }, rest));
+    }
+
+    const config = {
+      searchWords: inputValue,
+      sourceString: children,
+      option: {
+        highlightClassName: "".concat(prefixCls, "-keyword")
+      }
+    };
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/interactive-supports-focus,jsx-a11y/click-events-have-key-events
+      React.createElement("div", {
+        className: optionClassName,
+        onClick: e => {
+          this.onClick(_Object$assign({
+            value,
+            label,
+            children
+          }, rest), e);
+        },
+        onMouseEnter: e => onMouseEnter && onMouseEnter(e),
+        role: "option",
+        "aria-selected": selected ? "true" : "false",
+        "aria-disabled": disabled ? "true" : "false",
+        style: style
+      }, showTick ? /*#__PURE__*/React.createElement("div", {
+        className: selectedIconClassName
+      }, /*#__PURE__*/React.createElement(IconTick, null)) : null, _isString(children) ? /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-text")
+      }, this.renderOptionContent({
+        children,
+        config,
+        inputValue,
+        prefixCls
+      })) : children)
+    );
+  }
+
+}
+
+Option.isSelectOption = true;
+Option.propTypes = {
+  children: PropTypes.node,
+  disabled: PropTypes.bool,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  selected: PropTypes.bool,
+  label: PropTypes.node,
+  empty: PropTypes.bool,
+  emptyContent: PropTypes.node,
+  onSelect: PropTypes.func,
+  focused: PropTypes.bool,
+  showTick: PropTypes.bool,
+  className: PropTypes.string,
+  style: PropTypes.object,
+  onMouseEnter: PropTypes.func,
+  prefixCls: PropTypes.string,
+  renderOptionItem: PropTypes.func,
+  inputValue: PropTypes.string
+};
+Option.defaultProps = {
+  prefixCls: cssClasses.PREFIX_OPTION
+};
+export default Option;

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

@@ -18,6 +18,7 @@ declare class Calendar extends BaseComponent<CalendarProps, {}> {
         }>[]>;
         mode: PropTypes.Requireable<string>;
         showCurrTime: PropTypes.Requireable<boolean>;
+        weekStartsOn: PropTypes.Requireable<number>;
         scrollTop: PropTypes.Requireable<number>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
         renderTimeDisplay: PropTypes.Requireable<(...args: any[]) => any>;
@@ -35,6 +36,7 @@ declare class Calendar extends BaseComponent<CalendarProps, {}> {
         markWeekend: boolean;
         height: number;
         scrollTop: number;
+        weekStartsOn: number;
     };
     render(): React.FunctionComponentElement<any>;
 }

package/lib/es/calendar/index.js

@@ -54,6 +54,7 @@ Calendar.propTypes = {
   })),
   mode: PropTypes.string,
   showCurrTime: PropTypes.bool,
+  weekStartsOn: PropTypes.number,
   scrollTop: PropTypes.number,
   onClick: PropTypes.func,
   renderTimeDisplay: PropTypes.func,
@@ -70,6 +71,7 @@ Calendar.defaultProps = {
   mode: 'week',
   markWeekend: false,
   height: 600,
-  scrollTop: 400
+  scrollTop: 400,
+  weekStartsOn: 0
 };
 export default Calendar;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { EventObject } from '@douyinfe/semi-foundation/lib/es/calendar/foundation';
+import { EventObject, weeekStartsOnEnum } from '@douyinfe/semi-foundation/lib/es/calendar/foundation';
 import { strings } from '@douyinfe/semi-foundation/lib/es/calendar/constants';
 import { ArrayElement } from '../_base/base';
 import { BaseProps } from '../_base/baseComponent';
@@ -10,6 +10,7 @@ export interface CalendarProps extends BaseProps {
     events?: EventObject[];
     mode?: ArrayElement<typeof strings.MODE>;
     showCurrTime?: boolean;
+    weekStartsOn?: weeekStartsOnEnum;
     scrollTop?: number;
     onClick?: (e: React.MouseEvent, value: Date) => void;
     onClose?: (e: React.MouseEvent) => void;

package/lib/es/carousel/index.js

@@ -41,7 +41,7 @@ class Carousel extends BaseComponent {
     };
 
     this.handleAutoPlay = () => {
-      if (!this.foundation.getIsControledComponent()) {
+      if (!this.foundation.getIsControlledComponent()) {
         this.foundation.handleAutoPlay();
       }
     };
@@ -61,7 +61,7 @@ class Carousel extends BaseComponent {
         autoPlay
       } = this.props;
 
-      if ((typeof autoPlay !== 'object' || autoPlay.hoverToPause) && !this.foundation.getIsControledComponent()) {
+      if ((typeof autoPlay !== 'object' || autoPlay.hoverToPause) && !this.foundation.getIsControlledComponent()) {
         this.foundation.handleAutoPlay();
       }
     };

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

@@ -5,6 +5,7 @@ import CheckboxInner from './checkboxInner';
 import BaseComponent from '../_base/baseComponent';
 import '@douyinfe/semi-foundation/lib/es/checkbox/checkbox.css';
 import { CheckboxContextType } from './context';
+import { CheckboxType } from './checkboxGroup';
 export declare type CheckboxEvent = BasicCheckboxEvent;
 export declare type TargetObject = BasicTargetObject;
 export interface CheckboxProps extends BaseCheckboxProps {
@@ -24,6 +25,7 @@ export interface CheckboxProps extends BaseCheckboxProps {
     tabIndex?: number;
     addonId?: string;
     extraId?: string;
+    type?: CheckboxType;
 }
 interface CheckboxState {
     checked: boolean;
@@ -55,6 +57,7 @@ declare class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
         'aria-label': PropTypes.Requireable<string>;
         tabIndex: PropTypes.Requireable<number>;
         preventScroll: PropTypes.Requireable<boolean>;
+        type: PropTypes.Requireable<string>;
     };
     static defaultProps: {
         defaultChecked: boolean;
@@ -62,6 +65,7 @@ declare class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
         onChange: (...args: any[]) => void;
         onMouseEnter: (...args: any[]) => void;
         onMouseLeave: (...args: any[]) => void;
+        type: string;
     };
     checkboxEntity: CheckboxInner;
     context: CheckboxContextType;