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

package/lib/cjs/switch/index.js

@@ -30,13 +30,23 @@ require("@douyinfe/semi-foundation/lib/cjs/switch/switch.css");
 
 var _spin = _interopRequireDefault(require("../spin"));
 
-/* eslint-disable max-len, jsx-a11y/role-supports-aria-props */
+/* eslint-disable max-len */
 class Switch extends _baseComponent.default {
   constructor(props) {
     super(props);
+
+    this.handleFocusVisible = event => {
+      this.foundation.handleFocusVisible(event);
+    };
+
+    this.handleBlur = event => {
+      this.foundation.handleBlur();
+    };
+
     this.state = {
       nativeControlChecked: false,
-      nativeControlDisabled: false
+      nativeControlDisabled: false,
+      focusVisible: false
     };
     this.switchRef = /*#__PURE__*/_react.default.createRef();
     this.foundation = new _foundation.default(this.adapter);
@@ -72,6 +82,11 @@ class Switch extends _baseComponent.default {
           nativeControlDisabled
         });
       },
+      setFocusVisible: focusVisible => {
+        this.setState({
+          focusVisible
+        });
+      },
       notifyChange: (checked, e) => {
         this.props.onChange(checked, e);
       }
@@ -81,7 +96,8 @@ class Switch extends _baseComponent.default {
   render() {
     const {
       nativeControlChecked,
-      nativeControlDisabled
+      nativeControlDisabled,
+      focusVisible
     } = this.state;
     const {
       className,
@@ -100,11 +116,11 @@ class Switch extends _baseComponent.default {
       [_constants.cssClasses.DISABLED]: nativeControlDisabled,
       [_constants.cssClasses.LARGE]: size === 'large',
       [_constants.cssClasses.SMALL]: size === 'small',
-      [_constants.cssClasses.LOADING]: loading
+      [_constants.cssClasses.LOADING]: loading,
+      [_constants.cssClasses.FOCUS]: focusVisible
     });
     const switchProps = {
       type: 'checkbox',
-      role: 'switch',
       className: _constants.cssClasses.NATIVE_CONTROL,
       disabled: nativeControlDisabled || loading,
       checked: nativeControlChecked || false
@@ -129,13 +145,17 @@ class Switch extends _baseComponent.default {
     }, uncheckedText) : null, /*#__PURE__*/_react.default.createElement("input", (0, _assign.default)({}, switchProps, {
       ref: this.switchRef,
       id: id,
+      role: 'switch',
       "aria-checked": nativeControlChecked,
       "aria-invalid": this.props['aria-invalid'],
       "aria-errormessage": this.props['aria-errormessage'],
       "aria-label": this.props['aria-label'],
       "aria-labelledby": this.props['aria-labelledby'],
       "aria-describedby": this.props["aria-describedby"],
-      onChange: e => this.foundation.handleChange(e.target.checked, e)
+      "aria-disabled": this.props['disabled'],
+      onChange: e => this.foundation.handleChange(e.target.checked, e),
+      onFocus: e => this.handleFocusVisible(e),
+      onBlur: e => this.handleBlur(e)
     })));
   }
 

package/lib/cjs/timePicker/Combobox.d.ts

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

package/lib/cjs/timePicker/TimePicker.d.ts

@@ -97,11 +97,11 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
         'aria-required': PropTypes.Requireable<boolean>;
         prefixCls: PropTypes.Requireable<string>;
         clearText: PropTypes.Requireable<string>;
-        value: PropTypes.Requireable<string | number | string[] | Date | number[] | Date[]>;
+        value: PropTypes.Requireable<string | number | string[] | number[] | Date | Date[]>;
         inputReadOnly: PropTypes.Requireable<boolean>;
         disabled: PropTypes.Requireable<boolean>;
         showClear: PropTypes.Requireable<boolean>;
-        defaultValue: PropTypes.Requireable<string | number | string[] | Date | number[] | Date[]>;
+        defaultValue: PropTypes.Requireable<string | number | string[] | number[] | Date | Date[]>;
         open: PropTypes.Requireable<boolean>;
         defaultOpen: PropTypes.Requireable<boolean>;
         onOpenChange: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/cjs/timePicker/TimeShape.d.ts

@@ -6,5 +6,5 @@ import PropTypes from 'prop-types';
  * - \[12:00:12, 12:21:12]
  * - \[[12:00:12, 12:21:12], [12:11:12, 12:32:12]]
  */
-declare const TimeShape: PropTypes.Requireable<string | number | string[] | Date | number[] | Date[]>;
+declare const TimeShape: PropTypes.Requireable<string | number | string[] | number[] | Date | Date[]>;
 export { TimeShape };

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

@@ -18,11 +18,11 @@ export default class LocaleTimePicker extends React.PureComponent<LocalePickerPr
         'aria-required': import("prop-types").Requireable<boolean>;
         prefixCls: import("prop-types").Requireable<string>;
         clearText: import("prop-types").Requireable<string>;
-        value: import("prop-types").Requireable<string | number | string[] | Date | number[] | Date[]>;
+        value: import("prop-types").Requireable<string | number | string[] | number[] | Date | Date[]>;
         inputReadOnly: import("prop-types").Requireable<boolean>;
         disabled: import("prop-types").Requireable<boolean>;
         showClear: import("prop-types").Requireable<boolean>;
-        defaultValue: import("prop-types").Requireable<string | number | string[] | Date | number[] | Date[]>;
+        defaultValue: import("prop-types").Requireable<string | number | string[] | number[] | Date | Date[]>;
         open: import("prop-types").Requireable<boolean>;
         defaultOpen: import("prop-types").Requireable<boolean>;
         onOpenChange: import("prop-types").Requireable<(...args: any[]) => any>;

package/lib/cjs/toast/useToast/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ToastProps } from '@douyinfe/semi-foundation/lib/cjs/toast/toastFoundation';
 export default function useToast(): (JSX.Element | {
     success: (config: ToastProps) => string;

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

@@ -53,7 +53,6 @@ export interface TooltipProps extends BaseProps {
     guardFocus?: boolean;
     returnFocusOnClose?: boolean;
     onEscKeyDown?: (e: React.KeyboardEvent) => void;
-    wrapperId?: string;
 }
 interface TooltipState {
     visible: boolean;
@@ -165,6 +164,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
     componentDidUpdate(prevProps: TooltipProps, prevState: TooltipState): void;
     renderIcon: () => any;
     handlePortalInnerClick: (e: React.MouseEvent) => void;
+    handlePortalMouseDown: (e: React.MouseEvent) => void;
     handlePortalInnerKeyDown: (e: React.KeyboardEvent) => void;
     renderContentNode: (content: TooltipProps['content']) => React.ReactNode;
     renderPortal: () => JSX.Element;

package/lib/cjs/tooltip/index.js

@@ -187,6 +187,12 @@ class Tooltip extends _baseComponent.default {
       }
     };
 
+    this.handlePortalMouseDown = e => {
+      if (this.props.stopPropagation) {
+        (0, _utils.stopPropagation)(e);
+      }
+    };
+
     this.handlePortalInnerKeyDown = e => {
       this.foundation.handleContainerKeydown(e);
     };
@@ -258,7 +264,7 @@ class Tooltip extends _baseComponent.default {
       }, portalEventSet, {
         "x-placement": placement,
         style: (0, _assign.default)({
-          visibility: motion ? undefined : 'visible'
+          visibility: motion ? 'hidden' : 'visible'
         }, style)
       }), contentNode, icon);
       return /*#__PURE__*/_react.default.createElement(_index.default, {
@@ -271,6 +277,7 @@ class Tooltip extends _baseComponent.default {
         style: portalInnerStyle,
         ref: this.setContainerEl,
         onClick: this.handlePortalInnerClick,
+        onMouseDown: this.handlePortalMouseDown,
         onKeyDown: this.handlePortalInnerKeyDown
       }, inner));
     };
@@ -327,7 +334,7 @@ class Tooltip extends _baseComponent.default {
       placement: props.position || 'top',
       transitionStyle: {},
       isPositionUpdated: false,
-      id: props.wrapperId // auto generate id, will be used by children.aria-describedby & content.id, improve a11y
+      id: (0, _uuid.getUuidShort)() // auto generate id, will be used by children.aria-describedby & content.id, improve a11y
 
     };
     this.foundation = new _foundation.default(this.adapter);
@@ -498,15 +505,11 @@ class Tooltip extends _baseComponent.default {
           }
         };
 
-        document.addEventListener('mousedown', this.clickOutsideHandler, {
-          capture: true
-        });
+        window.addEventListener('mousedown', this.clickOutsideHandler);
       },
       unregisterClickOutsideHandler: () => {
         if (this.clickOutsideHandler) {
-          document.removeEventListener('mousedown', this.clickOutsideHandler, {
-            capture: true
-          });
+          window.removeEventListener('mousedown', this.clickOutsideHandler);
           this.clickOutsideHandler = null;
         }
       },
@@ -600,11 +603,6 @@ class Tooltip extends _baseComponent.default {
       },
       notifyEscKeydown: event => {
         this.props.onEscKeyDown(event);
-      },
-      setId: () => {
-        this.setState({
-          id: (0, _uuid.getUuidShort)()
-        });
       }
     });
   }

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/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<4 | 2 | 1 | 3 | 6 | 5>;
+        heading: PropTypes.Requireable<1 | 2 | 3 | 4 | 5 | 6>;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         component: PropTypes.Requireable<string>;

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

@@ -140,7 +140,7 @@ declare class Upload extends BaseComponent<UploadProps, UploadState> {
         style: PropTypes.Requireable<object>;
         timeout: PropTypes.Requireable<number>;
         transformFile: PropTypes.Requireable<(...args: any[]) => any>;
-        uploadTrigger: PropTypes.Requireable<"custom" | "auto">;
+        uploadTrigger: PropTypes.Requireable<"auto" | "custom">;
         validateMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">;
         withCredentials: PropTypes.Requireable<boolean>;

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

@@ -33,6 +33,6 @@ declare class Portal extends PureComponent<PortalProps, PortalState> {
     componentWillUnmount(): void;
     addStyle: (style?: {}) => void;
     addClass: (prefixCls: string, ...classNames: string[]) => void;
-    render(): import("react").ReactPortal;
+    render(): React.ReactPortal;
 }
 export default Portal;

package/lib/es/banner/index.js

@@ -67,7 +67,9 @@ export default class Banner extends BaseComponent {
     const closer = /*#__PURE__*/React.createElement(Button, {
       className: "".concat(prefixCls, "-close"),
       onClick: this.remove,
-      icon: closeIcon || /*#__PURE__*/React.createElement(IconClose, null),
+      icon: closeIcon || /*#__PURE__*/React.createElement(IconClose, {
+        "aria-hidden": true
+      }),
       theme: "borderless",
       size: "small",
       type: "tertiary",
@@ -83,16 +85,20 @@ export default class Banner extends BaseComponent {
     } = this.props;
     const iconMap = {
       warning: /*#__PURE__*/React.createElement(IconAlertTriangle, {
-        size: "large"
+        size: "large",
+        "aria-label": 'warning'
       }),
       success: /*#__PURE__*/React.createElement(IconTickCircle, {
-        size: "large"
+        size: "large",
+        "aria-label": 'success'
       }),
       info: /*#__PURE__*/React.createElement(IconInfoCircle, {
-        size: "large"
+        size: "large",
+        "aria-label": 'info'
       }),
       danger: /*#__PURE__*/React.createElement(IconAlertCircle, {
-        size: "large"
+        size: "large",
+        "aria-label": 'danger'
       })
     };
     let iconType = iconMap[type];

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

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

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

@@ -0,0 +1,8 @@
+import React, { ReactNode } from "react";
+import { CarouselArrowProps } from "./interface";
+declare class CarouselArrow extends React.PureComponent<CarouselArrowProps> {
+    renderLeftIcon: () => any;
+    renderRightIcon: () => any;
+    render(): ReactNode;
+}
+export default CarouselArrow;

package/lib/es/carousel/CarouselArrow.js

@@ -0,0 +1,70 @@
+import _get from "lodash/get";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
+
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+import React from "react";
+import cls from 'classnames';
+import { cssClasses } from '@douyinfe/semi-foundation/lib/es/carousel/constants';
+import { IconChevronLeft, IconChevronRight } from "@douyinfe/semi-icons";
+
+class CarouselArrow extends React.PureComponent {
+  constructor() {
+    super(...arguments);
+
+    this.renderLeftIcon = () => {
+      return _get(this.props, 'arrowProps.leftArrow.children', /*#__PURE__*/React.createElement(IconChevronLeft, {
+        "aria-label": "Previous index",
+        size: "inherit"
+      }));
+    };
+
+    this.renderRightIcon = () => {
+      return _get(this.props, 'arrowProps.rightArrow.children', /*#__PURE__*/React.createElement(IconChevronRight, {
+        "aria-label": "Next index",
+        size: "inherit"
+      }));
+    };
+  }
+
+  render() {
+    var _context, _context2, _context3;
+
+    const {
+      type,
+      theme,
+      prev,
+      next
+    } = this.props;
+    const classNames = cls({
+      [cssClasses.CAROUSEL_ARROW]: true,
+      [_concatInstanceProperty(_context = "".concat(cssClasses.CAROUSEL_ARROW, "-")).call(_context, theme)]: theme,
+      ["".concat(cssClasses.CAROUSEL_ARROW, "-hover")]: type === 'hover'
+    });
+    const leftClassNames = cls({
+      ["".concat(cssClasses.CAROUSEL_ARROW, "-prev")]: true,
+      [_concatInstanceProperty(_context2 = "".concat(cssClasses.CAROUSEL_ARROW, "-")).call(_context2, theme)]: theme
+    });
+    const rightClassNames = cls({
+      ["".concat(cssClasses.CAROUSEL_ARROW, "-next")]: true,
+      [_concatInstanceProperty(_context3 = "".concat(cssClasses.CAROUSEL_ARROW, "-")).call(_context3, theme)]: theme
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames
+    }, /*#__PURE__*/React.createElement("div", _Object$assign({
+      // role='button'
+      className: leftClassNames,
+      onClick: prev
+    }, _get(this.props, 'arrowProps.leftArrow.props')), this.renderLeftIcon()), /*#__PURE__*/React.createElement("div", _Object$assign({
+      // role='button'
+      // tabIndex={0} 
+      className: rightClassNames,
+      onClick: next
+    }, _get(this.props, 'arrowProps.rightArrow.props')), this.renderRightIcon()));
+  }
+
+}
+
+export default CarouselArrow;

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

@@ -0,0 +1,23 @@
+import React, { ReactNode } from "react";
+import PropTypes from 'prop-types';
+import { CarouselIndicatorProps } from "./interface";
+declare class CarouselIndicator extends React.PureComponent<CarouselIndicatorProps> {
+    static propTypes: {
+        activeKey: PropTypes.Requireable<number>;
+        className: PropTypes.Requireable<string>;
+        position: PropTypes.Requireable<"left" | "right" | "center">;
+        size: PropTypes.Requireable<"small" | "medium">;
+        style: PropTypes.Requireable<object>;
+        theme: PropTypes.Requireable<"primary" | "dark" | "light">;
+        total: PropTypes.Requireable<number>;
+        onIndicatorChange: PropTypes.Requireable<(...args: any[]) => any>;
+        type: PropTypes.Requireable<"line" | "dot" | "columnar">;
+        trigger: PropTypes.Requireable<"hover" | "click">;
+    };
+    onIndicatorChange: (activeIndex: number) => void;
+    handleIndicatorClick: (activeIndex: number) => void;
+    handleIndicatorHover: (activeIndex: number) => void;
+    renderIndicatorContent(): ReactNode;
+    render(): ReactNode;
+}
+export default CarouselIndicator;

package/lib/es/carousel/CarouselIndicator.js

@@ -0,0 +1,125 @@
+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 _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+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 jsx-a11y/no-static-element-interactions */
+
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+
+
+import React from "react";
+import cls from 'classnames';
+import PropTypes from 'prop-types';
+import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/carousel/constants';
+import getDataAttr from '@douyinfe/semi-foundation/lib/es/utils/getDataAttr';
+
+class CarouselIndicator extends React.PureComponent {
+  constructor() {
+    super(...arguments);
+
+    this.onIndicatorChange = activeIndex => {
+      this.props.onIndicatorChange(activeIndex);
+    };
+
+    this.handleIndicatorClick = activeIndex => {
+      const {
+        trigger
+      } = this.props;
+
+      if (trigger === 'click') {
+        this.onIndicatorChange(activeIndex);
+      }
+    };
+
+    this.handleIndicatorHover = activeIndex => {
+      const {
+        trigger
+      } = this.props;
+
+      if (trigger === 'hover') {
+        this.onIndicatorChange(activeIndex);
+      }
+    };
+  }
+
+  renderIndicatorContent() {
+    const {
+      total,
+      theme,
+      size,
+      activeIndex
+    } = this.props;
+    const indicatorContent = [];
+
+    for (let i = 0; i < total; i++) {
+      var _context, _context2;
+
+      indicatorContent.push( /*#__PURE__*/React.createElement("span", {
+        // role='none' 
+        key: i,
+        "data-index": i,
+        className: cls(["".concat(cssClasses.CAROUSEL_INDICATOR, "-item")], {
+          ["".concat(cssClasses.CAROUSEL_INDICATOR, "-item-active")]: i === activeIndex,
+          [_concatInstanceProperty(_context = "".concat(cssClasses.CAROUSEL_INDICATOR, "-item-")).call(_context, theme)]: theme,
+          [_concatInstanceProperty(_context2 = "".concat(cssClasses.CAROUSEL_INDICATOR, "-item-")).call(_context2, size)]: size
+        }),
+        onClick: () => this.handleIndicatorClick(i),
+        onMouseEnter: () => this.handleIndicatorHover(i)
+      }));
+    }
+
+    return indicatorContent;
+  }
+
+  render() {
+    var _context3, _context4;
+
+    const _a = this.props,
+          {
+      type,
+      size,
+      theme,
+      style,
+      className,
+      position
+    } = _a,
+          restProps = __rest(_a, ["type", "size", "theme", "style", "className", "position"]);
+
+    const classNames = cls(className, {
+      [cssClasses.CAROUSEL_INDICATOR]: true,
+      [_concatInstanceProperty(_context3 = "".concat(cssClasses.CAROUSEL_INDICATOR, "-")).call(_context3, type)]: type,
+      [_concatInstanceProperty(_context4 = "".concat(cssClasses.CAROUSEL_INDICATOR, "-")).call(_context4, position)]: position
+    });
+    const indicatorContent = this.renderIndicatorContent();
+    return /*#__PURE__*/React.createElement("div", _Object$assign({
+      className: classNames,
+      style: style
+    }, getDataAttr(restProps)), indicatorContent);
+  }
+
+}
+
+CarouselIndicator.propTypes = {
+  activeKey: PropTypes.number,
+  className: PropTypes.string,
+  position: PropTypes.oneOf(strings.POSITION_MAP),
+  size: PropTypes.oneOf(strings.SIZE),
+  style: PropTypes.object,
+  theme: PropTypes.oneOf(strings.THEME_MAP),
+  total: PropTypes.number,
+  onIndicatorChange: PropTypes.func,
+  type: PropTypes.oneOf(strings.TYPE_MAP),
+  trigger: PropTypes.oneOf(strings.TRIGGER)
+};
+export default CarouselIndicator;

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

@@ -0,0 +1,58 @@
+import { ReactNode, ReactChild, ReactFragment, ReactPortal } from 'react';
+import PropTypes from 'prop-types';
+import BaseComponent from "../_base/baseComponent";
+import { CarouselProps } from './interface';
+import CarouselFoundation, { CarouselAdapter } from '@douyinfe/semi-foundation/lib/es/carousel/foundation';
+import '@douyinfe/semi-foundation/lib/es/carousel/carousel.css';
+export interface CarouselState {
+    activeIndex: number;
+    children: (ReactChild | ReactFragment | ReactPortal)[];
+    preIndex: number;
+    isReverse: boolean;
+    isInit: boolean;
+}
+declare class Carousel extends BaseComponent<CarouselProps, CarouselState> {
+    static propTypes: {
+        activeIndex: PropTypes.Requireable<number>;
+        animation: PropTypes.Requireable<"slide" | "fade">;
+        arrowProps: PropTypes.Requireable<object>;
+        autoPlay: PropTypes.Requireable<boolean | object>;
+        className: PropTypes.Requireable<string>;
+        defaultActiveIndex: PropTypes.Requireable<number>;
+        indicatorPosition: PropTypes.Requireable<"left" | "right" | "center">;
+        indicatorSize: PropTypes.Requireable<"small" | "medium">;
+        indicatorType: PropTypes.Requireable<"line" | "dot" | "columnar">;
+        theme: PropTypes.Requireable<"primary" | "dark" | "light">;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        arrowType: PropTypes.Requireable<"hover" | "always">;
+        showArrow: PropTypes.Requireable<boolean>;
+        showIndicator: PropTypes.Requireable<boolean>;
+        slideDirection: PropTypes.Requireable<"left" | "right">;
+        speed: PropTypes.Requireable<number>;
+        style: PropTypes.Requireable<object>;
+        trigger: PropTypes.Requireable<"hover" | "click">;
+    };
+    static defaultProps: CarouselProps;
+    foundation: CarouselFoundation;
+    constructor(props: CarouselProps);
+    get adapter(): CarouselAdapter<CarouselProps, CarouselState>;
+    static getDerivedStateFromProps(props: CarouselProps, state: CarouselState): Partial<CarouselState>;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    play: () => void;
+    stop: () => void;
+    goTo: (targetIndex: number) => void;
+    prev: () => void;
+    next: () => void;
+    handleAutoPlay: () => void;
+    handleMouseEnter: () => void;
+    handleMouseLeave: () => void;
+    onIndicatorChange: (activeIndex: number) => void;
+    getChildren: () => (ReactChild | ReactFragment | ReactPortal)[];
+    getValidIndex: (activeIndex: number) => number;
+    renderChildren: () => JSX.Element;
+    renderIndicator: () => JSX.Element;
+    renderArrow: () => JSX.Element;
+    render(): ReactNode;
+}
+export default Carousel;