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

package/form/_story/FieldProps/labelOptional.jsx

@@ -0,0 +1,30 @@
+/* eslint-disable no-unused-vars */
+import React, { useState, useLayoutEffect, useEffect, useRef } from 'react';
+import { storiesOf } from '@storybook/react';
+import { Button, Modal, TreeSelect, Row, Col, Avatar, Tabs, TabPane, Badge, LocaleProvider } from '@douyinfe/semi-ui';
+import {
+    Form,
+} from '../../index';
+
+const { Input, Select, DatePicker, Switch, Slider, CheckboxGroup, Checkbox, RadioGroup, Radio, TimePicker } = Form;
+
+
+const LableOptionalDemo = () => {
+    const helpText = <span style={{ color: 'var(--semi-color-warning)' }}>密码强度：弱</span>;
+    return (
+        <Form>
+            <Form.Input
+                field="semi"
+                label={{ text: 'semi', optional: true }}
+                helpText={helpText}
+            />
+            <Form.Input
+                field="label2"
+                label={{ text: 'semi', optional: true }}
+                helpText={helpText}
+            />
+        </Form>
+    );
+};
+
+export { LableOptionalDemo };

package/form/_story/form.stories.js

@@ -70,6 +70,7 @@ import { HelpAndExtra, ExtraPositionDemo } from './FieldProps/helpAndExtra';
 import { BigNumberFieldDemo } from './FieldProps/bigNumberFieldPath';
 import { UpdateDemo, RuleupdateDemo } from './FieldProps/rulesUpdateDemo';
 import { FieldRefDemo } from './FieldProps/fieldRef';
+import { LableOptionalDemo } from './FieldProps/labelOptional';
 
 // arrayField
 import {
@@ -129,6 +130,12 @@ LayoutInsetLabel.story = {
   name: 'Layout-insetLabel',
 };
 
+export const LableOptional = () => <LableOptionalDemo></LableOptionalDemo>;
+
+LableOptional.story = {
+  name: 'Layout-label show optional',
+};
+
 export const LayoutSlotErrorMessageLabel = () => <AssistComponent />;
 
 LayoutSlotErrorMessageLabel.story = {

package/form/hoc/withField.tsx

@@ -110,6 +110,7 @@ function withField<
             }
         } catch (err) {}
 
+        // FIXME typeof initVal
         const [value, setValue, getVal] = useStateWithGetter(typeof initVal !== undefined ? initVal : null);
         const validateOnMount = trigger.includes('mount');
 

package/form/label.tsx

@@ -2,26 +2,29 @@ import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { cssClasses } from '@douyinfe/semi-foundation/form/constants';
+import LocaleConsumer from '../locale/localeConsumer';
+import { Locale } from '../locale/interface';
 
 const prefixCls = cssClasses.PREFIX;
 
 export interface LabelProps {
+    /** text-align of label */
+    align?: string;
+    className?: string;
+    children?: React.ReactNode;
+    disabled?: boolean;
     id?: string;
     /** Whether to display the required * symbol */
     required?: boolean;
     /** Content of label */
     text?: React.ReactNode;
-    disabled?: boolean;
     /** Used to configure the htmlFor attribute of the label tag */
     name?: string;
-    /** text-align of label */
-    align?: string;
     /** width of label */
     width?: number | string;
     style?: React.CSSProperties;
-    className?: string;
-    children?: React.ReactNode;
     extra?: React.ReactNode;
+    optional?: boolean;
 }
 
 export default class Label extends PureComponent<LabelProps> {
@@ -29,7 +32,8 @@ export default class Label extends PureComponent<LabelProps> {
         required: false,
         name: '',
         align: 'left',
-        className: ''
+        className: '',
+        optional: false,
     };
 
     static propTypes = {
@@ -44,10 +48,11 @@ export default class Label extends PureComponent<LabelProps> {
         style: PropTypes.object,
         className: PropTypes.string,
         extra: PropTypes.node,
+        optional: PropTypes.bool,
     };
 
     render() {
-        const { children, required, text, disabled, name, width, align, style, className, extra, id } = this.props;
+        const { children, required, text, disabled, name, width, align, style, className, extra, id, optional } = this.props;
 
         const labelCls = classNames(className, {
             [`${prefixCls}-field-label`]: true,
@@ -60,9 +65,18 @@ export default class Label extends PureComponent<LabelProps> {
         const labelStyle = style ? style : {};
         width ? labelStyle.width = width : null;
 
+        const optionalText = (
+            <LocaleConsumer<Locale['Form']> componentName="Form" >
+                {(locale: Locale['Form']) => (
+                    <span className={`${prefixCls}-field-label-optional-text`}>{locale.optional}</span>
+                )}
+            </LocaleConsumer>
+        );
+
         const textContent = (
             <div className={`${prefixCls}-field-label-text`} x-semi-prop="label">
                 {typeof text !== 'undefined' ? text : children}
+                {optional ? optionalText : null}
             </div>
         );
 

package/gulpfile.js

@@ -63,8 +63,10 @@ gulp.task('compileScss', function compileScss() {
                 const rootPath = path.join(__dirname, '../../');
                 const scssVarStr = `@import "${rootPath}/packages/semi-theme-default/scss/index.scss";\n`;
                 const cssVarStr = `@import "${rootPath}/packages/semi-theme-default/scss/global.scss";\n`;
+                const animationStr = `@import "${rootPath}/packages/semi-theme-default/scss/animation.scss";\n`;
+                const animationBuffer = Buffer.from(animationStr);
                 const scssBuffer = Buffer.from(scssVarStr);
-                const buffers = [scssBuffer];
+                const buffers = [scssBuffer,animationBuffer];
                 if (/_base\/base\.scss/.test(chunk.path)) {
                     buffers.push(Buffer.from(cssVarStr));
                 }

package/lib/cjs/_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/cjs/anchor/index.js

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

package/lib/cjs/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/cjs/anchor/link.js

@@ -87,10 +87,14 @@ class Link extends _baseComponent.default {
       } = this.props;
 
       if (!this.context.autoCollapse) {
-        return this.props.children;
+        return /*#__PURE__*/_react.default.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.default.createElement("div", {
+        role: "list"
+      }, children) : null;
     };
 
     this.foundation = new _linkFoundation.default(this.adapter);
@@ -166,8 +170,7 @@ class Link extends _baseComponent.default {
       ["".concat(prefixCls, "-link-title-disabled")]: disabled
     });
     const ariaProps = {
-      'aria-disabled': disabled,
-      'aria-label': href
+      'aria-disabled': disabled
     };
 
     if (active) {
@@ -180,7 +183,8 @@ class Link extends _baseComponent.default {
 
     return /*#__PURE__*/_react.default.createElement("div", {
       className: linkCls,
-      style: style
+      style: style,
+      role: "listitem"
     }, /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({
       role: "link",
       tabIndex: 0

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { AutoCompleteAdapter, StateOptionItem, DataItem } from '@douyinfe/semi-foundation/lib/cjs/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/cjs/autoComplete/autoComplete.css';
 import { Motion } from '../_base/base';
 /**

package/lib/cjs/autoComplete/index.js

@@ -48,7 +48,7 @@ var _input = _interopRequireDefault(require("../input"));
 
 var _trigger = _interopRequireDefault(require("../trigger"));
 
-var _option = _interopRequireDefault(require("../select/option"));
+var _option = _interopRequireDefault(require("./option"));
 
 var _warning = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/warning"));
 

package/lib/cjs/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/cjs/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/cjs/autoComplete/option.js

@@ -0,0 +1,218 @@
+"use strict";
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _isString2 = _interopRequireDefault(require("lodash/isString"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/autoComplete/constants");
+
+var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer"));
+
+var _semiIcons = require("@douyinfe/semi-icons");
+
+var _index = require("../_utils/index");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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; }
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && (0, _indexOf.default)(e).call(e, p) < 0) t[p] = s[p];
+
+  if (s != null && typeof _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(s); i < p.length; i++) {
+    if ((0, _indexOf.default)(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 */
+
+
+class Option extends _react.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((0, _assign.default)((0, _assign.default)({}, rest), {
+        value,
+        label: label || children
+      }), event);
+    }
+  }
+
+  renderOptionContent(_ref) {
+    let {
+      config,
+      children,
+      inputValue,
+      prefixCls
+    } = _ref;
+
+    if ((0, _isString2.default)(children) && inputValue) {
+      return (0, _index.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 = (0, _classnames.default)(prefixCls, {
+      ["".concat(prefixCls, "-disabled")]: disabled,
+      ["".concat(prefixCls, "-selected")]: selected,
+      ["".concat(prefixCls, "-focused")]: focused,
+      ["".concat(prefixCls, "-empty")]: empty,
+      [className]: className
+    });
+    const selectedIconClassName = (0, _classnames.default)(["".concat(prefixCls, "-icon")]);
+
+    if (empty) {
+      if (emptyContent === null) {
+        return null;
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
+        componentName: "Select"
+      }, locale => /*#__PURE__*/_react.default.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((0, _assign.default)({
+        disabled,
+        focused,
+        selected,
+        style,
+        label,
+        value,
+        inputValue,
+        onMouseEnter: e => onMouseEnter(e),
+        onClick: e => this.onClick((0, _assign.default)({
+          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.default.createElement("div", {
+        className: optionClassName,
+        onClick: e => {
+          this.onClick((0, _assign.default)({
+            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.default.createElement("div", {
+        className: selectedIconClassName
+      }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconTick, null)) : null, (0, _isString2.default)(children) ? /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(prefixCls, "-text")
+      }, this.renderOptionContent({
+        children,
+        config,
+        inputValue,
+        prefixCls
+      })) : children)
+    );
+  }
+
+}
+
+Option.isSelectOption = true;
+Option.propTypes = {
+  children: _propTypes.default.node,
+  disabled: _propTypes.default.bool,
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  selected: _propTypes.default.bool,
+  label: _propTypes.default.node,
+  empty: _propTypes.default.bool,
+  emptyContent: _propTypes.default.node,
+  onSelect: _propTypes.default.func,
+  focused: _propTypes.default.bool,
+  showTick: _propTypes.default.bool,
+  className: _propTypes.default.string,
+  style: _propTypes.default.object,
+  onMouseEnter: _propTypes.default.func,
+  prefixCls: _propTypes.default.string,
+  renderOptionItem: _propTypes.default.func,
+  inputValue: _propTypes.default.string
+};
+Option.defaultProps = {
+  prefixCls: _constants.cssClasses.PREFIX_OPTION
+};
+var _default = Option;
+exports.default = _default;

package/lib/cjs/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/cjs/calendar/index.js

@@ -97,6 +97,7 @@ Calendar.propTypes = {
   })),
   mode: _propTypes.default.string,
   showCurrTime: _propTypes.default.bool,
+  weekStartsOn: _propTypes.default.number,
   scrollTop: _propTypes.default.number,
   onClick: _propTypes.default.func,
   renderTimeDisplay: _propTypes.default.func,
@@ -113,7 +114,8 @@ Calendar.defaultProps = {
   mode: 'week',
   markWeekend: false,
   height: 600,
-  scrollTop: 400
+  scrollTop: 400,
+  weekStartsOn: 0
 };
 var _default = Calendar;
 exports.default = _default;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { EventObject } from '@douyinfe/semi-foundation/lib/cjs/calendar/foundation';
+import { EventObject, weeekStartsOnEnum } from '@douyinfe/semi-foundation/lib/cjs/calendar/foundation';
 import { strings } from '@douyinfe/semi-foundation/lib/cjs/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/cjs/carousel/index.js

@@ -74,7 +74,7 @@ class Carousel extends _baseComponent.default {
     };
 
     this.handleAutoPlay = () => {
-      if (!this.foundation.getIsControledComponent()) {
+      if (!this.foundation.getIsControlledComponent()) {
         this.foundation.handleAutoPlay();
       }
     };
@@ -94,7 +94,7 @@ class Carousel extends _baseComponent.default {
         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/cjs/checkbox/checkbox.d.ts

@@ -5,6 +5,7 @@ import CheckboxInner from './checkboxInner';
 import BaseComponent from '../_base/baseComponent';
 import '@douyinfe/semi-foundation/lib/cjs/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;