@douyinfe/semi-ui 2.33.1 → 2.34.0-alpha.1

package/lib/cjs/timeline/context.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare type ModeType = 'left' | 'right' | 'center' | 'alternate';
+export interface TimelineContextValue {
+    mode?: ModeType;
+    sum?: number;
+}
+declare const Context: React.Context<TimelineContextValue>;
+export default Context;

package/lib/cjs/timeline/context.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Context = /*#__PURE__*/_react.default.createContext(null);
+
+var _default = Context;
+exports.default = _default;

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

@@ -2,12 +2,13 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import '@douyinfe/semi-foundation/lib/cjs/timeline/timeline.css';
 import Item, { TimelineItemProps } from './item';
+import { ModeType } from './context';
 export type { TimelineItemProps } from './item';
 export interface Data extends TimelineItemProps {
     content: React.ReactNode;
 }
 export interface TimelineProps extends Pick<React.AriaAttributes, 'aria-label'> {
-    mode?: 'left' | 'right' | 'center' | 'alternate';
+    mode?: ModeType;
     className?: string;
     style?: React.CSSProperties;
     dataSource?: Data[];

package/lib/cjs/timeline/index.js

@@ -19,6 +19,8 @@ var _context = _interopRequireDefault(require("../configProvider/context"));
 
 var _item = _interopRequireDefault(require("./item"));
 
+var _context2 = _interopRequireDefault(require("./context"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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); }
@@ -96,11 +98,15 @@ class Timeline extends _react.PureComponent {
     }
 
     const items = childrenList || this.addClassName(children);
-    return /*#__PURE__*/_react.default.createElement("ul", {
+    return /*#__PURE__*/_react.default.createElement(_context2.default.Provider, {
+      value: {
+        mode
+      }
+    }, /*#__PURE__*/_react.default.createElement("ul", {
       "aria-label": this.props['aria-label'],
       style: style,
       className: classString
-    }, items);
+    }, items));
   }
 
 }

package/lib/cjs/timeline/item.d.ts

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import '@douyinfe/semi-foundation/lib/cjs/timeline/timeline.css';
+import { ModeType, TimelineContextValue } from './context';
 export interface TimelineItemProps {
     color?: string;
     children?: React.ReactNode;
@@ -12,8 +13,13 @@ export interface TimelineItemProps {
     className?: string;
     style?: React.CSSProperties;
     onClick?: React.MouseEventHandler<HTMLLIElement>;
+    mode?: ModeType;
+    odd?: boolean;
+    usedInC2D?: boolean;
 }
 export default class Item extends PureComponent<TimelineItemProps> {
+    static contextType: React.Context<TimelineContextValue>;
+    static elementType: string;
     static propTypes: {
         color: PropTypes.Requireable<string>;
         time: PropTypes.Requireable<PropTypes.ReactNodeLike>;
@@ -24,11 +30,15 @@ export default class Item extends PureComponent<TimelineItemProps> {
         className: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<object>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        mode: PropTypes.Requireable<string>;
+        lastChild: PropTypes.Requireable<boolean>;
     };
+    context: TimelineContextValue;
     static defaultProps: {
         type: string;
         time: string;
         onClick: (...args: any[]) => void;
     };
+    getC2DCls: () => string;
     render(): JSX.Element;
 }

package/lib/cjs/timeline/item.js

@@ -17,6 +17,8 @@ var _constants = require("@douyinfe/semi-foundation/lib/cjs/timeline/constants")
 
 require("@douyinfe/semi-foundation/lib/cjs/timeline/timeline.css");
 
+var _context = _interopRequireDefault(require("./context"));
+
 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; }
@@ -26,6 +28,39 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const prefixCls = _constants.cssClasses.ITEM;
 
 class Item extends _react.PureComponent {
+  constructor() {
+    super(...arguments); // getC2DCls is used in C2D, it does not work in non-C2D scenes
+
+    this.getC2DCls = () => {
+      let c2dCls = '';
+      const {
+        mode,
+        odd,
+        usedInC2D
+      } = this.props;
+
+      if (usedInC2D) {
+        switch (mode) {
+          case 'center':
+            c2dCls = `${prefixCls}-center  ${prefixCls}-left`;
+            break;
+
+          case 'alternate':
+            c2dCls = `${prefixCls}-alternate  ${prefixCls}-${odd ? 'left' : 'right'}`;
+            break;
+
+          default:
+            c2dCls = `${prefixCls}-${mode} ${mode === 'right' ? `${prefixCls}-mode-right` : ''}`;
+            break;
+        }
+
+        c2dCls += ` ${prefixCls}-not-last-child`;
+      }
+
+      return c2dCls;
+    };
+  }
+
   render() {
     const {
       className,
@@ -38,7 +73,7 @@ class Item extends _react.PureComponent {
       extra,
       onClick
     } = this.props;
-    const itemCls = (0, _classnames.default)(prefixCls, className);
+    const itemCls = (0, _classnames.default)(prefixCls, className, this.getC2DCls());
     const dotCls = (0, _classnames.default)({
       [`${prefixCls}-head`]: true,
       [`${prefixCls}-head-custom`]: dot,
@@ -71,6 +106,7 @@ class Item extends _react.PureComponent {
 }
 
 exports.default = Item;
+Item.contextType = _context.default;
 Item.propTypes = {
   color: _propTypes.default.string,
   time: _propTypes.default.node,
@@ -80,10 +116,13 @@ Item.propTypes = {
   position: _propTypes.default.oneOf(_constants.strings.ITEM_POS),
   className: _propTypes.default.string,
   style: _propTypes.default.object,
-  onClick: _propTypes.default.func
+  onClick: _propTypes.default.func,
+  mode: _propTypes.default.string,
+  lastChild: _propTypes.default.bool
 };
 Item.defaultProps = {
   type: 'default',
   time: '',
   onClick: _noop2.default
-};
+};
+Item.elementType = 'Timeline.Item';

package/lib/es/navigation/Item.d.ts

@@ -19,6 +19,9 @@ export interface NavItemProps extends ItemProps, BaseProps {
     onClick?(clickItems: SelectedData): void;
     onMouseEnter?: React.MouseEventHandler<HTMLLIElement>;
     onMouseLeave?: React.MouseEventHandler<HTMLLIElement>;
+    selected?: boolean;
+    mode?: string;
+    isInSubNav?: boolean;
 }
 export interface SelectedData extends SelectedItemProps<NavItemProps> {
     text?: React.ReactNode;
@@ -28,6 +31,7 @@ export interface NavItemState {
 }
 export default class NavItem extends BaseComponent<NavItemProps, NavItemState> {
     static contextType: React.Context<NavContextType>;
+    static elementType: string;
     static propTypes: {
         text: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         itemKey: PropTypes.Requireable<NonNullable<string | number>>;

package/lib/es/navigation/Item.js

@@ -1,3 +1,4 @@
+import _isUndefined from "lodash/isUndefined";
 import _times from "lodash/times";
 import _noop from "lodash/noop";
 
@@ -99,21 +100,28 @@ export default class NavItem extends BaseComponent {
       notifyMouseLeave: function () {
         return _this.props.onMouseLeave(...arguments);
       },
-      getIsCollapsed: () => this.props.isCollapsed || Boolean(this.context && this.context.isCollapsed) || false,
-      getSelected: () => Boolean(this.context && this.context.selectedKeys && this.context.selectedKeys.includes(this.props.itemKey)),
-      getIsOpen: () => Boolean(this.context && this.context.openKeys && this.context.openKeys.includes(this.props.itemKey))
+      getIsCollapsed: () => this.props.isCollapsed || Boolean(this.context && this.context.isCollapsed),
+      getSelected: () => this.props.selected || Boolean(this.context && this.context.selectedKeys && this.context.selectedKeys.includes(this.props.itemKey)),
+      getIsOpen: () => Boolean(this.context && this.context.openKeys && this.context.openKeys.includes(this.props.itemKey)),
+      getIsInSubNav: () => this.props.isInSubNav || Boolean(this.context && this.context.isInSubNav),
+      getMode: () => {
+        var _a, _b;
+
+        return (_a = this.props.mode) !== null && _a !== void 0 ? _a : (_b = this.context) === null || _b === void 0 ? void 0 : _b.mode;
+      }
     });
   }
 
   renderIcon(icon, pos) {
     let isToggleIcon = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     let key = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+    const mode = this.adapter.getMode();
 
     if (this.props.isSubNav) {
       return null;
     }
 
-    if (!icon && this.context.mode === strings.MODE_HORIZONTAL) {
+    if (!icon && mode === strings.MODE_HORIZONTAL) {
       return null;
     }
 
@@ -136,6 +144,8 @@ export default class NavItem extends BaseComponent {
   }
 
   render() {
+    var _a;
+
     const {
       text,
       children,
@@ -151,16 +161,17 @@ export default class NavItem extends BaseComponent {
       linkOptions,
       disabled,
       level = 0,
-      tabIndex
+      tabIndex,
+      mode: modeInProps
     } = this.props;
     const {
-      mode,
-      isInSubNav,
       prefixCls,
       limitIndent
     } = this.context;
     const isCollapsed = this.adapter.getIsCollapsed();
     const selected = this.adapter.getSelected();
+    const isInSubNav = this.adapter.getIsInSubNav();
+    const mode = this.adapter.getMode();
     let itemChildren = null;
 
     if (!isNullOrUndefined(children)) {
@@ -208,14 +219,20 @@ export default class NavItem extends BaseComponent {
         onKeyDown: this.handleKeyPress
       }, itemChildren);
     } else {
-      // Items are divided into normal and sub-wrap
+      // isFirstLayer 用于决定 semi-navigation-first-layers（仅在 c2中使用) 是否生效
+      // 当 this.props.isInSubNav 存在是，则由 this.props.isInSubNav 决定
+      // 否则由 this.context?.mode 决定，因为第一层节点无context
+      const isFirstLayer = !_isUndefined(this.props.isInSubNav) ? !this.props.isInSubNav : _isUndefined((_a = this.context) === null || _a === void 0 ? void 0 : _a.mode); // Items are divided into normal and sub-wrap
+
       const popoverItemCls = cls(`${className || `${clsPrefix}-normal`}`, {
         [clsPrefix]: true,
         [`${clsPrefix}-sub`]: isSubNav,
         [`${clsPrefix}-selected`]: selected && !isSubNav,
         [`${clsPrefix}-collapsed`]: isCollapsed,
         [`${clsPrefix}-disabled`]: disabled,
-        [`${clsPrefix}-has-link`]: typeof link === 'string'
+        [`${clsPrefix}-has-link`]: typeof link === 'string',
+        [`${cssClasses.PREFIX}-first-layer`]: isFirstLayer,
+        [`${clsPrefix}-horizontal`]: modeInProps === strings.MODE_HORIZONTAL
       });
       const ariaProps = {
         'aria-disabled': disabled
@@ -293,4 +310,5 @@ NavItem.defaultProps = {
   onMouseLeave: _noop,
   disabled: false,
   tabIndex: 0
-};
+};
+NavItem.elementType = 'Nav.Item';

package/lib/es/navigation/SubNav.d.ts

@@ -22,11 +22,14 @@ export interface SubNavProps extends BaseProps {
     onMouseLeave?: React.MouseEventHandler<HTMLLIElement>;
     text?: React.ReactNode;
     toggleIcon?: ToggleIcon;
+    active?: boolean;
+    mode?: string;
 }
 export interface SubNavState {
     isHovered: boolean;
 }
 export default class SubNav extends BaseComponent<SubNavProps, SubNavState> {
+    static elementType: string;
     static contextType: React.Context<NavContextType>;
     static propTypes: {
         /**
@@ -70,6 +73,7 @@ export default class SubNav extends BaseComponent<SubNavProps, SubNavState> {
         onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
         disabled: PropTypes.Requireable<boolean>;
         level: PropTypes.Requireable<number>;
+        active: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
         level: number;
@@ -82,6 +86,7 @@ export default class SubNav extends BaseComponent<SubNavProps, SubNavState> {
             closed: JSX.Element;
         };
         disabled: boolean;
+        active: boolean;
     };
     titleRef: React.RefObject<HTMLDivElement>;
     itemRef: React.RefObject<HTMLLIElement>;

package/lib/es/navigation/SubNav.js

@@ -1,3 +1,4 @@
+import _isUndefined from "lodash/isUndefined";
 import _get from "lodash/get";
 import _times from "lodash/times";
 
@@ -105,16 +106,29 @@ export default class SubNav extends BaseComponent {
 
         return _this._invokeContextFunc('onClick', ...args);
       },
-      getIsSelected: itemKey => Boolean(!isNullOrUndefined(itemKey) && _get(this.context, 'selectedKeys', []).includes(String(itemKey))),
-      getIsOpen: () => Boolean(this.context && this.context.openKeys && this.context.openKeys.includes(String(this.props.itemKey)))
+      getIsSelected: itemKey => this.props.active || Boolean(!isNullOrUndefined(itemKey) && _get(this.context, 'selectedKeys', []).includes(String(itemKey))),
+      getIsOpen: () => this.props.isOpen || Boolean(this.context && this.context.openKeys && this.context.openKeys.includes(String(this.props.itemKey))),
+      getIsCollapsed: () => {
+        var _a;
+
+        return this.props.isCollapsed || Boolean((_a = this.context) === null || _a === void 0 ? void 0 : _a.isCollapsed);
+      },
+      getMode: () => {
+        var _a, _b;
+
+        return (_a = this.props.mode) !== null && _a !== void 0 ? _a : (_b = this.context) === null || _b === void 0 ? void 0 : _b.mode;
+      }
     });
   }
 
   renderIcon(icon, pos, withTransition) {
     let isToggleIcon = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
     let key = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+
+    var _a;
+
     const {
-      prefixCls
+      prefixCls = cssClasses.PREFIX
     } = this.context;
     let iconSize = 'large';
 
@@ -122,14 +136,15 @@ export default class SubNav extends BaseComponent {
       iconSize = 'default';
     }
 
+    const isOpen = this.adapter.getIsOpen();
     const className = cls(`${prefixCls}-item-icon`, {
-      [`${prefixCls}-item-icon-toggle-${this.context.toggleIconPosition}`]: isToggleIcon,
-      [`${prefixCls}-item-icon-info`]: !isToggleIcon
+      [`${prefixCls}-item-icon-toggle-${(_a = this.context.toggleIconPosition) !== null && _a !== void 0 ? _a : 'right'}`]: isToggleIcon,
+      [`${prefixCls}-item-icon-info`]: !isToggleIcon,
+      [`${prefixCls}-icon-rotate-${isOpen ? "180" : "0"}-no-transition`]: !withTransition && isToggleIcon
     });
-    const isOpen = this.adapter.getIsOpen();
     const iconElem = /*#__PURE__*/React.isValidElement(icon) ? withTransition ? /*#__PURE__*/React.createElement(CSSAnimation, {
       animationState: isOpen ? "enter" : "leave",
-      startClassName: `${cssClasses.PREFIX}-icon-rotate-${isOpen ? "180" : "0"}`
+      startClassName: `${prefixCls}-icon-rotate-${isOpen ? "180" : "0"}`
     }, _ref => {
       let {
         animationClassName
@@ -159,17 +174,22 @@ export default class SubNav extends BaseComponent {
       level
     } = this.props;
     const {
-      mode,
       isInSubNav,
-      isCollapsed,
-      prefixCls,
+      prefixCls = cssClasses.PREFIX,
       subNavMotion,
       limitIndent
     } = this.context;
+
+    const isFirstLayer = _isUndefined(this.context.mode);
+
+    const mode = this.adapter.getMode();
     const isOpen = this.adapter.getIsOpen();
+    const isCollapsed = this.adapter.getIsCollapsed();
     const titleCls = cls(`${prefixCls}-sub-title`, {
       [`${prefixCls}-sub-title-selected`]: this.adapter.getIsSelected(itemKey),
-      [`${prefixCls}-sub-title-disabled`]: disabled
+      [`${prefixCls}-sub-title-disabled`]: disabled,
+      [`${prefixCls}-first-layer`]: isFirstLayer,
+      [`${prefixCls}-sub-title-horizontal`]: mode === strings.MODE_HORIZONTAL
     });
     let withTransition = false;
     let toggleIconType = '';
@@ -210,6 +230,7 @@ export default class SubNav extends BaseComponent {
     }
 
     const isIconChevronRightShow = !isCollapsed && isInSubNav && mode === strings.MODE_HORIZONTAL || isCollapsed && isInSubNav;
+    const toggleIconPositionLeft = this.context.toggleIconPosition === strings.TOGGLE_ICON_LEFT;
     const titleDiv = /*#__PURE__*/React.createElement("div", {
       role: "menuitem",
       // to avoid nested horizontal navigation be focused
@@ -221,9 +242,9 @@ export default class SubNav extends BaseComponent {
       "aria-expanded": isOpen ? 'true' : 'false'
     }, /*#__PURE__*/React.createElement("div", {
       className: `${prefixCls}-item-inner`
-    }, placeholderIcons, this.context.toggleIconPosition === strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIconType, strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-left'), icon || indent || isInSubNav && mode !== strings.MODE_HORIZONTAL ? this.renderIcon(icon, strings.ICON_POS_LEFT, false, false, 'key-inSubNav-position-left') : null, /*#__PURE__*/React.createElement("span", {
+    }, placeholderIcons, toggleIconPositionLeft && this.renderIcon(toggleIconType, strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-left'), icon || indent || isInSubNav && mode !== strings.MODE_HORIZONTAL ? this.renderIcon(icon, strings.ICON_POS_LEFT, false, false, 'key-inSubNav-position-left') : null, /*#__PURE__*/React.createElement("span", {
       className: `${prefixCls}-item-text`
-    }, text), this.context.toggleIconPosition === strings.TOGGLE_ICON_RIGHT && this.renderIcon(toggleIconType, strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-right')));
+    }, text), !toggleIconPositionLeft && this.renderIcon(toggleIconType, strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-right')));
     return titleDiv;
   }
 
@@ -233,12 +254,12 @@ export default class SubNav extends BaseComponent {
       maxHeight
     } = this.props;
     const {
-      isCollapsed,
-      mode,
       subNavMotion,
-      prefixCls
+      prefixCls = cssClasses.PREFIX
     } = this.context;
+    const isCollapsed = this.adapter.getIsCollapsed();
     const isOpen = this.adapter.getIsOpen();
+    const mode = this.adapter.getMode();
     const isHorizontal = mode === strings.MODE_HORIZONTAL;
     const subNavCls = cls(`${prefixCls}-sub`, {
       [`${prefixCls}-sub-open`]: isOpen,
@@ -267,14 +288,14 @@ export default class SubNav extends BaseComponent {
       disabled
     } = this.props;
     const {
-      mode,
       isInSubNav,
-      isCollapsed,
       subNavCloseDelay,
       subNavOpenDelay,
-      prefixCls,
+      prefixCls = cssClasses.PREFIX,
       getPopupContainer
     } = this.context;
+    const isCollapsed = this.adapter.getIsCollapsed();
+    const mode = this.adapter.getMode();
     const isOpen = this.adapter.getIsOpen();
     const openKeysIsControlled = this.adapter.getOpenKeysIsControlled();
     const subNavCls = cls({
@@ -319,10 +340,10 @@ export default class SubNav extends BaseComponent {
       text
     } = this.props;
     const {
-      mode,
-      isCollapsed,
-      prefixCls
+      prefixCls = cssClasses.PREFIX
     } = this.context;
+    const mode = this.adapter.getMode();
+    const isCollapsed = this.adapter.getIsCollapsed();
     let titleDiv = this.renderTitleDiv();
     const subUl = this.renderSubUl(); // When mode=horizontal, it is displayed in Dropdown
 
@@ -340,9 +361,11 @@ export default class SubNav extends BaseComponent {
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave,
       disabled: disabled,
-      text: text
+      text: text,
+      mode: mode
     }, /*#__PURE__*/React.createElement(NavContext.Provider, {
       value: Object.assign(Object.assign({}, this.context), {
+        mode: mode,
         isInSubNav: true
       })
     }, titleDiv, subUl));
@@ -403,7 +426,8 @@ SubNav.propTypes = {
   onMouseLeave: PropTypes.func,
   // Is it disabled
   disabled: PropTypes.bool,
-  level: PropTypes.number
+  level: PropTypes.number,
+  active: PropTypes.bool
 };
 SubNav.defaultProps = {
   level: 0,
@@ -419,5 +443,7 @@ SubNav.defaultProps = {
       "aria-hidden": true
     })
   },
-  disabled: false
-};
+  disabled: false,
+  active: false
+};
+SubNav.elementType = 'Nav.Sub';

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

@@ -12,6 +12,7 @@ export interface SkeletonProps {
     style?: CSSProperties;
 }
 declare class Skeleton extends PureComponent<SkeletonProps> {
+    static elementType: string;
     static Avatar: React.FC<import("./item").AvatarProps>;
     static Title: React.FC<import("./item").BasicProps>;
     static Button: React.FC<import("./item").BasicProps>;

package/lib/es/skeleton/index.js

@@ -67,4 +67,5 @@ Skeleton.propTypes = {
   loading: PropTypes.bool,
   children: PropTypes.node
 };
+Skeleton.elementType = 'Skeleton';
 export default Skeleton;

package/lib/es/skeleton/item.d.ts

@@ -21,6 +21,7 @@ export declare const Image: React.FC<BasicProps>;
 export declare const Title: React.FC<BasicProps>;
 export declare const Button: React.FC<BasicProps>;
 export declare class Paragraph extends PureComponent<ParagraphProps> {
+    static elementType: string;
     static propTypes: {
         rows: PropTypes.Requireable<number>;
         prefixCls: PropTypes.Requireable<string>;

package/lib/es/skeleton/item.js

@@ -63,6 +63,10 @@ export const Avatar = generator('avatar')(Generic);
 export const Image = generator('image')(Generic);
 export const Title = generator('title')(Generic);
 export const Button = generator('button')(Generic);
+Avatar.elementType = 'Skeleton.Avatar';
+Image.elementType = 'Skeleton.Image';
+Title.elementType = 'Skeleton.Title';
+Button.elementType = 'Skeleton.Button';
 export class Paragraph extends PureComponent {
   render() {
     const {
@@ -90,4 +94,5 @@ Paragraph.propTypes = {
 Paragraph.defaultProps = {
   prefixCls: cssClasses.PREFIX,
   rows: 4
-};
+};
+Paragraph.elementType = 'Skeleton.Paragraph';

package/lib/es/steps/basicStep.d.ts

@@ -19,6 +19,8 @@ export interface BasicStepProps {
     onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
     "role"?: React.AriaRole;
     "aria-label"?: React.AriaAttributes["aria-label"];
+    usedInC2D?: string;
+    direction?: string;
 }
 export declare enum stepSizeMapIconSize {
     small = "large",
@@ -45,5 +47,6 @@ declare const BasicStep: {
         status: string;
         className: string;
     };
+    elementType: string;
 };
 export default BasicStep;

package/lib/es/steps/basicStep.js

@@ -26,7 +26,9 @@ const BasicStep = props => {
     stepNumber,
     onClick,
     onChange,
-    onKeyDown
+    onKeyDown,
+    usedInC2D,
+    direction: direction
   } = props;
 
   const renderIcon = () => {
@@ -87,7 +89,10 @@ const BasicStep = props => {
 
   const classString = classnames(prefixCls, `${prefixCls}-${status}`, {
     [`${prefixCls}-active`]: active,
-    [`${prefixCls}-done`]: done
+    [`${prefixCls}-done`]: done,
+    [`${prefixCls}-basic`]: usedInC2D,
+    [`${prefixCls}-${direction}`]: direction,
+    [`${prefixCls}-small`]: size === 'small'
   }, className);
 
   const handleClick = e => {
@@ -151,4 +156,5 @@ BasicStep.defaultProps = {
   status: 'wait',
   className: ''
 };
+BasicStep.elementType = 'Steps.BasicStep';
 export default BasicStep;

package/lib/es/steps/basicSteps.js

@@ -27,7 +27,8 @@ const Steps = props => {
       const stepNumber = initial + index;
       const childProps = Object.assign({
         stepNumber: `${stepNumber + 1}`,
-        size
+        size,
+        direction
       }, child.props);
 
       if (status === 'error' && index === current - 1) {

package/lib/es/steps/fillStep.d.ts

@@ -15,6 +15,7 @@ export interface FillStepProps {
     onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
     "role"?: React.AriaRole;
     "aria-label"?: React.AriaAttributes["aria-label"];
+    usedInC2D?: boolean;
 }
 declare const FillStep: {
     (props: FillStepProps): JSX.Element;
@@ -33,5 +34,6 @@ declare const FillStep: {
         status: string;
         className: string;
     };
+    elementType: string;
 };
 export default FillStep;

package/lib/es/steps/fillStep.js

@@ -97,7 +97,8 @@ const FillStep = props => {
     className: classnames({
       [prefixCls]: true,
       [`${prefixCls}-${status}`]: Boolean(status),
-      [`${prefixCls}-clickable`]: onClick
+      [`${prefixCls}-clickable`]: onClick,
+      [`${prefixCls}-fill`]: props.usedInC2D
     }, className),
     style: style,
     onClick: e => {
@@ -132,4 +133,5 @@ FillStep.defaultProps = {
   status: 'wait',
   className: ''
 };
+FillStep.elementType = 'Steps.FillStep';
 export default FillStep;