@douyinfe/semi-ui 2.29.0 → 2.30.0-alpha.1

package/lib/es/sideSheet/index.js

@@ -164,11 +164,11 @@ export default class SideSheet extends BaseComponent {
     const sheetWidth = isVertical ? width ? width : defaultWidthList[size] : '100%';
     const sheetHeight = isHorizontal ? height ? height : defaultHeight : '100%';
     const classList = cls(prefixCls, className, {
-      [`${prefixCls}-${placement}`]: placement,
-      [`${prefixCls}-popup`]: getPopupContainer,
-      [`${prefixCls}-horizontal`]: isHorizontal,
-      [`${prefixCls}-rtl`]: direction === 'rtl',
-      [`${prefixCls}-hidden`]: keepDOM && this.state.displayNone
+      ["".concat(prefixCls, "-").concat(placement)]: placement,
+      ["".concat(prefixCls, "-popup")]: getPopupContainer,
+      ["".concat(prefixCls, "-horizontal")]: isHorizontal,
+      ["".concat(prefixCls, "-rtl")]: direction === 'rtl',
+      ["".concat(prefixCls, "-hidden")]: keepDOM && this.state.displayNone
     });
     const contentProps = Object.assign(Object.assign({}, props), {
       visible,
@@ -185,7 +185,7 @@ export default class SideSheet extends BaseComponent {
     return /*#__PURE__*/React.createElement(CSSAnimation, {
       motion: this.props.motion,
       animationState: visible ? 'enter' : 'leave',
-      startClassName: visible ? `${prefixCls}-animation-mask_show` : `${prefixCls}-animation-mask_hide`,
+      startClassName: visible ? "".concat(prefixCls, "-animation-mask_show") : "".concat(prefixCls, "-animation-mask_hide"),
       onAnimationEnd: this.updateState
     }, _ref => {
       let {
@@ -195,7 +195,7 @@ export default class SideSheet extends BaseComponent {
       return /*#__PURE__*/React.createElement(CSSAnimation, {
         motion: this.props.motion,
         animationState: visible ? 'enter' : 'leave',
-        startClassName: visible ? `${prefixCls}-animation-content_show_${this.props.placement}` : `${prefixCls}-animation-content_hide_${this.props.placement}`,
+        startClassName: visible ? "".concat(prefixCls, "-animation-content_show_").concat(this.props.placement) : "".concat(prefixCls, "-animation-content_hide_").concat(this.props.placement),
         onAnimationEnd: this.updateState
         /* for no mask case*/
 

package/lib/es/skeleton/index.js

@@ -31,7 +31,7 @@ class Skeleton extends PureComponent {
           others = __rest(_a, ["placeholder", "active", "children", "className", "loading", "style"]);
 
     const skCls = cls(prefixCls, {
-      [`${prefixCls}-active`]: Boolean(active)
+      ["".concat(prefixCls, "-active")]: Boolean(active)
     }, className);
     let content;
 

package/lib/es/skeleton/item.js

@@ -34,10 +34,10 @@ class Generic extends PureComponent {
     } = _a,
           others = __rest(_a, ["prefixCls", "className", "type", "size", "shape"]);
 
-    const classString = cls(className, `${prefixCls}-${type}`, {
-      [`${prefixCls}-${type}-${size}`]: type.toUpperCase() === 'AVATAR'
+    const classString = cls(className, "".concat(prefixCls, "-").concat(type), {
+      ["".concat(prefixCls, "-").concat(type, "-").concat(size)]: type.toUpperCase() === 'AVATAR'
     }, {
-      [`${prefixCls}-${type}-${shape}`]: type.toUpperCase() === 'AVATAR'
+      ["".concat(prefixCls, "-").concat(type, "-").concat(shape)]: type.toUpperCase() === 'AVATAR'
     });
     return /*#__PURE__*/React.createElement('div', Object.assign({
       className: classString
@@ -71,7 +71,7 @@ export class Paragraph extends PureComponent {
       style,
       rows
     } = this.props;
-    const classString = cls(className, `${prefixCls}-paragraph`);
+    const classString = cls(className, "".concat(prefixCls, "-paragraph"));
     return /*#__PURE__*/React.createElement("ul", {
       className: classString,
       style: style

package/lib/es/slider/index.js

@@ -55,10 +55,10 @@ export default class Slider extends BaseComponent {
         tipChildren
       } = this.foundation.computeHandleVisibleVal(tooltipVisible && isInRenderTree, tipFormatter, range);
       const minClass = cls(cssClasses.HANDLE, {
-        [`${cssClasses.HANDLE}-clicked`]: chooseMovePos === 'min' && isDrag
+        ["".concat(cssClasses.HANDLE, "-clicked")]: chooseMovePos === 'min' && isDrag
       });
       const maxClass = cls(cssClasses.HANDLE, {
-        [`${cssClasses.HANDLE}-clicked`]: chooseMovePos === 'max' && isDrag
+        ["".concat(cssClasses.HANDLE, "-clicked")]: chooseMovePos === 'max' && isDrag
       });
       const {
         min,
@@ -79,13 +79,13 @@ export default class Slider extends BaseComponent {
         trigger: "custom",
         rePosKey: minPercent,
         visible: isInRenderTree && (tipVisible.min || firstDotFocusVisible),
-        className: `${cssClasses.HANDLE}-tooltip`
+        className: "".concat(cssClasses.HANDLE, "-tooltip")
       }, /*#__PURE__*/React.createElement("span", Object.assign({
         onMouseOver: this.foundation.checkAndUpdateIsInRenderTreeState,
         ref: this.minHanleEl,
         className: minClass,
         style: {
-          [stylePos]: `${minPercent * 100}%`,
+          [stylePos]: "".concat(minPercent * 100, "%"),
           zIndex: chooseMovePos === 'min' && isDrag ? 2 : 1
         },
         onMouseDown: e => {
@@ -131,12 +131,12 @@ export default class Slider extends BaseComponent {
         trigger: "custom",
         rePosKey: minPercent,
         visible: isInRenderTree && (tipVisible.min || firstDotFocusVisible),
-        className: `${cssClasses.HANDLE}-tooltip`
+        className: "".concat(cssClasses.HANDLE, "-tooltip")
       }, /*#__PURE__*/React.createElement("span", Object.assign({
         ref: this.minHanleEl,
         className: minClass,
         style: {
-          [stylePos]: `${minPercent * 100}%`,
+          [stylePos]: "".concat(minPercent * 100, "%"),
           zIndex: chooseMovePos === 'min' ? 2 : 1
         },
         onMouseDown: e => {
@@ -182,12 +182,12 @@ export default class Slider extends BaseComponent {
         trigger: "custom",
         rePosKey: maxPercent,
         visible: isInRenderTree && (tipVisible.max || secondDotFocusVisible),
-        className: `${cssClasses.HANDLE}-tooltip`
+        className: "".concat(cssClasses.HANDLE, "-tooltip")
       }, /*#__PURE__*/React.createElement("span", Object.assign({
         ref: this.maxHanleEl,
         className: maxClass,
         style: {
-          [stylePos]: `${maxPercent * 100}%`,
+          [stylePos]: "".concat(maxPercent * 100, "%"),
           zIndex: chooseMovePos === 'max' ? 2 : 1
         },
         onMouseDown: e => {
@@ -241,11 +241,11 @@ export default class Slider extends BaseComponent {
       const minPercent = percentInfo.min;
       const maxPercent = percentInfo.max;
       let trackStyle = !vertical ? {
-        width: range ? `${(maxPercent - minPercent) * 100}%` : `${minPercent * 100}%`,
-        left: range ? `${minPercent * 100}%` : 0
+        width: range ? "".concat((maxPercent - minPercent) * 100, "%") : "".concat(minPercent * 100, "%"),
+        left: range ? "".concat(minPercent * 100, "%") : 0
       } : {
-        height: range ? `${(maxPercent - minPercent) * 100}%` : `${minPercent * 100}%`,
-        top: range ? `${minPercent * 100}%` : 0
+        height: range ? "".concat((maxPercent - minPercent) * 100, "%") : "".concat(minPercent * 100, "%"),
+        top: range ? "".concat(minPercent * 100, "%") : 0
       };
       trackStyle = included ? trackStyle : {};
       return (
@@ -271,8 +271,8 @@ export default class Slider extends BaseComponent {
         className: cssClasses.DOTS
       }, Object.keys(marks).map(mark => {
         const activeResult = this.foundation.isMarkActive(Number(mark));
-        const markClass = cls(`${prefixCls}-dot`, {
-          [`${prefixCls}-dot-active`]: this.foundation.isMarkActive(Number(mark)) === 'active'
+        const markClass = cls("".concat(prefixCls, "-dot"), {
+          ["".concat(prefixCls, "-dot-active")]: this.foundation.isMarkActive(Number(mark)) === 'active'
         });
         const markPercent = (Number(mark) - min) / (max - min);
         return activeResult ?
@@ -283,7 +283,7 @@ export default class Slider extends BaseComponent {
           onClick: this.foundation.handleWrapClick,
           className: markClass,
           style: {
-            [stylePos]: `calc(${markPercent * 100}% - 2px)`
+            [stylePos]: "calc(".concat(markPercent * 100, "% - 2px)")
           }
         }) : null;
       })) : null;
@@ -309,9 +309,9 @@ export default class Slider extends BaseComponent {
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
         React.createElement("span", {
           key: mark,
-          className: cls(`${prefixCls}-mark${vertical && verticalReverse ? '-reverse' : ''}`),
+          className: cls("".concat(prefixCls, "-mark").concat(vertical && verticalReverse ? '-reverse' : '')),
           style: {
-            [stylePos]: `${markPercent * 100}%`
+            [stylePos]: "".concat(markPercent * 100, "%")
           },
           onClick: this.foundation.handleWrapClick
         }, marks[mark]) : null;
@@ -588,19 +588,19 @@ export default class Slider extends BaseComponent {
       range,
       className
     } = this.props;
-    const wrapperClass = cls(`${prefixCls}-wrapper`, {
-      [`${prefixCls}-disabled`]: disabled,
-      [`${cssClasses.VERTICAL}-wrapper`]: vertical,
-      [`${prefixCls}-reverse`]: vertical && verticalReverse
+    const wrapperClass = cls("".concat(prefixCls, "-wrapper"), {
+      ["".concat(prefixCls, "-disabled")]: disabled,
+      ["".concat(cssClasses.VERTICAL, "-wrapper")]: vertical,
+      ["".concat(prefixCls, "-reverse")]: vertical && verticalReverse
     }, className);
-    const boundaryClass = cls(`${prefixCls}-boundary`, {
-      [`${prefixCls}-boundary-show`]: this.props.showBoundary && this.state.showBoundary
+    const boundaryClass = cls("".concat(prefixCls, "-boundary"), {
+      ["".concat(prefixCls, "-boundary-show")]: this.props.showBoundary && this.state.showBoundary
     });
     const sliderCls = cls({
-      [`${prefixCls}`]: !vertical,
+      ["".concat(prefixCls)]: !vertical,
       [cssClasses.VERTICAL]: vertical
     });
-    const ariaLabel = range ? `Range: ${this._getAriaValueText(currentValue[0], 0)} to ${this._getAriaValueText(currentValue[1], 1)}` : undefined;
+    const ariaLabel = range ? "Range: ".concat(this._getAriaValueText(currentValue[0], 0), " to ").concat(this._getAriaValueText(currentValue[1], 1)) : undefined;
     const slider = /*#__PURE__*/React.createElement("div", {
       className: wrapperClass,
       style: style,
@@ -609,15 +609,15 @@ export default class Slider extends BaseComponent {
       onMouseEnter: () => this.foundation.handleWrapperEnter(),
       onMouseLeave: () => this.foundation.handleWrapperLeave()
     }, /*#__PURE__*/React.createElement("div", {
-      className: `${prefixCls}-rail`,
+      className: "".concat(prefixCls, "-rail"),
       onClick: this.foundation.handleWrapClick,
       style: railStyle
     }), this.renderTrack(), this.renderStepDot(), /*#__PURE__*/React.createElement("div", null, this.renderHandle()), this.renderLabel(), /*#__PURE__*/React.createElement("div", {
       className: boundaryClass
     }, /*#__PURE__*/React.createElement("span", {
-      className: `${prefixCls}-boundary-min`
+      className: "".concat(prefixCls, "-boundary-min")
     }, min), /*#__PURE__*/React.createElement("span", {
-      className: `${prefixCls}-boundary-max`
+      className: "".concat(prefixCls, "-boundary-max")
     }, max)));
 
     if (!vertical) {

package/lib/es/space/index.js

@@ -35,27 +35,27 @@ class Space extends PureComponent {
       if (_isString(spacing[0])) {
         spacingHorizontalType = spacing[0];
       } else if (_isNumber(spacing[0])) {
-        realStyle.columnGap = `${spacing[0]}px`;
+        realStyle.columnGap = "".concat(spacing[0], "px");
       }
 
       if (_isString(spacing[1])) {
         spacingVerticalType = spacing[1];
       } else if (_isNumber(spacing[1])) {
-        realStyle.rowGap = `${spacing[1]}px`;
+        realStyle.rowGap = "".concat(spacing[1], "px");
       }
     }
 
     const classNames = cls(prefixCls, className, {
-      [`${prefixCls}-align-${align}`]: align,
-      [`${prefixCls}-vertical`]: vertical,
-      [`${prefixCls}-horizontal`]: !vertical,
-      [`${prefixCls}-wrap`]: isWrap,
-      [`${prefixCls}-tight-horizontal`]: spacingHorizontalType === strings.SPACING_TIGHT,
-      [`${prefixCls}-tight-vertical`]: spacingVerticalType === strings.SPACING_TIGHT,
-      [`${prefixCls}-medium-horizontal`]: spacingHorizontalType === strings.SPACING_MEDIUM,
-      [`${prefixCls}-medium-vertical`]: spacingVerticalType === strings.SPACING_MEDIUM,
-      [`${prefixCls}-loose-horizontal`]: spacingHorizontalType === strings.SPACING_LOOSE,
-      [`${prefixCls}-loose-vertical`]: spacingVerticalType === strings.SPACING_LOOSE
+      ["".concat(prefixCls, "-align-").concat(align)]: align,
+      ["".concat(prefixCls, "-vertical")]: vertical,
+      ["".concat(prefixCls, "-horizontal")]: !vertical,
+      ["".concat(prefixCls, "-wrap")]: isWrap,
+      ["".concat(prefixCls, "-tight-horizontal")]: spacingHorizontalType === strings.SPACING_TIGHT,
+      ["".concat(prefixCls, "-tight-vertical")]: spacingVerticalType === strings.SPACING_TIGHT,
+      ["".concat(prefixCls, "-medium-horizontal")]: spacingHorizontalType === strings.SPACING_MEDIUM,
+      ["".concat(prefixCls, "-medium-vertical")]: spacingVerticalType === strings.SPACING_MEDIUM,
+      ["".concat(prefixCls, "-loose-horizontal")]: spacingHorizontalType === strings.SPACING_LOOSE,
+      ["".concat(prefixCls, "-loose-vertical")]: spacingVerticalType === strings.SPACING_LOOSE
     });
     const childrenNodes = flatten(children);
     return /*#__PURE__*/React.createElement("div", {

package/lib/es/spin/icon.js

@@ -32,7 +32,7 @@ function Icon() {
     _propsId = _id;
   }
 
-  const id = `linearGradient-${_propsId}`;
+  const id = "linearGradient-".concat(_propsId);
   return /*#__PURE__*/React.createElement("svg", Object.assign({}, rest, {
     className: className,
     width: "48",
@@ -73,7 +73,7 @@ function Icon() {
     height: "36"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M34,18 C34,9.163444 26.836556,2 18,2 C11.6597233,2 6.18078805,5.68784135 3.59122325,11.0354951",
-    stroke: `url(#${id})`,
+    stroke: "url(#".concat(id, ")"),
     strokeWidth: "4",
     strokeLinecap: "round"
   })));

package/lib/es/spin/index.js

@@ -60,9 +60,9 @@ class Spin extends BaseComponent {
       loading
     } = this.state;
     return loading ? /*#__PURE__*/React.createElement("div", {
-      className: `${prefixCls}-wrapper`
+      className: "".concat(prefixCls, "-wrapper")
     }, indicator ? /*#__PURE__*/React.createElement("div", {
-      className: `${prefixCls}-animate`,
+      className: "".concat(prefixCls, "-animate"),
       "x-semi-prop": "indicator"
     }, indicator) : /*#__PURE__*/React.createElement(SpinIcon, null), tip ? /*#__PURE__*/React.createElement("div", {
       "x-semi-prop": "tip"
@@ -82,15 +82,15 @@ class Spin extends BaseComponent {
       loading
     } = this.state;
     const spinCls = cls(prefixCls, wrapperClassName, {
-      [`${prefixCls}-${size}`]: size,
-      [`${prefixCls}-block`]: children,
-      [`${prefixCls}-hidden`]: !loading
+      ["".concat(prefixCls, "-").concat(size)]: size,
+      ["".concat(prefixCls, "-block")]: children,
+      ["".concat(prefixCls, "-hidden")]: !loading
     });
     return /*#__PURE__*/React.createElement("div", {
       className: spinCls,
       style: style
     }, this.renderSpin(), /*#__PURE__*/React.createElement("div", {
-      className: `${prefixCls}-children`,
+      className: "".concat(prefixCls, "-children"),
       style: childStyle,
       "x-semi-prop": "children"
     }, children));

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 = () => {
@@ -46,13 +48,13 @@ const BasicStep = props => {
 
         case 'wait':
           inner = /*#__PURE__*/React.createElement("span", {
-            className: `${prefixCls}-number-icon`
+            className: "".concat(prefixCls, "-number-icon")
           }, stepNumber);
           break;
 
         case 'process':
           inner = /*#__PURE__*/React.createElement("span", {
-            className: `${prefixCls}-number-icon`
+            className: "".concat(prefixCls, "-number-icon")
           }, stepNumber);
           progress = true;
           break;
@@ -76,18 +78,21 @@ const BasicStep = props => {
     }
 
     const cls = classnames({
-      [`${prefixCls}-icon`]: true,
-      [`${prefixCls}-custom-icon`]: 'icon' in props,
-      [`${prefixCls}-icon-process`]: progress
+      ["".concat(prefixCls, "-icon")]: true,
+      ["".concat(prefixCls, "-custom-icon")]: 'icon' in props,
+      ["".concat(prefixCls, "-icon-process")]: progress
     });
     return inner ? /*#__PURE__*/React.createElement("span", {
       className: cls
     }, inner) : null;
   };
 
-  const classString = classnames(prefixCls, `${prefixCls}-${status}`, {
-    [`${prefixCls}-active`]: active,
-    [`${prefixCls}-done`]: done
+  const classString = classnames(prefixCls, "".concat(prefixCls, "-").concat(status), {
+    ["".concat(prefixCls, "-active")]: active,
+    ["".concat(prefixCls, "-done")]: done,
+    ["".concat(prefixCls, "-basic")]: usedInC2D,
+    ["".concat(prefixCls, "-").concat(direction)]: direction,
+    ["".concat(prefixCls, "-small")]: size === 'small'
   }, className);
 
   const handleClick = e => {
@@ -118,17 +123,17 @@ const BasicStep = props => {
     onClick: e => handleClick(e),
     onKeyDown: handleKeyDown
   }, /*#__PURE__*/React.createElement("div", {
-    className: `${prefixCls}-container`
+    className: "".concat(prefixCls, "-container")
   }, /*#__PURE__*/React.createElement("div", {
-    className: `${prefixCls}-left`
+    className: "".concat(prefixCls, "-left")
   }, renderIcon()), /*#__PURE__*/React.createElement("div", {
-    className: `${prefixCls}-content`
+    className: "".concat(prefixCls, "-content")
   }, /*#__PURE__*/React.createElement("div", {
-    className: `${prefixCls}-title`
+    className: "".concat(prefixCls, "-title")
   }, /*#__PURE__*/React.createElement("div", {
-    className: `${prefixCls}-title-text`
+    className: "".concat(prefixCls, "-title-text")
   }, title)), description && /*#__PURE__*/React.createElement("div", {
-    className: `${prefixCls}-description`
+    className: "".concat(prefixCls, "-description")
   }, description))));
 };
 
@@ -151,4 +156,5 @@ BasicStep.defaultProps = {
   status: 'wait',
   className: ''
 };
+BasicStep.elementType = 'Steps.BasicStep';
 export default BasicStep;

package/lib/es/steps/basicSteps.js

@@ -25,13 +25,16 @@ const Steps = props => {
       }
 
       const stepNumber = initial + index;
-      const childProps = Object.assign({
-        stepNumber: `${stepNumber + 1}`,
-        size
-      }, child.props);
+      const childProps = Object.assign(Object.assign({
+        stepNumber: "".concat(stepNumber + 1),
+        size,
+        direction
+      }, child.props), {
+        total: filteredChildren.length
+      });
 
       if (status === 'error' && index === current - 1) {
-        childProps.className = `${prefixCls}-next-error`;
+        childProps.className = "".concat(prefixCls, "-next-error");
       }
 
       if (!child.props.status) {
@@ -58,10 +61,10 @@ const Steps = props => {
     return content;
   }, [children, initial, prefixCls, direction, status, current, size, onChange]);
   const wrapperCls = cls(className, {
-    [`${prefixCls}-basic`]: true,
-    [`${prefixCls}-${direction}`]: true,
-    [`${prefixCls}-${size}`]: size !== 'default',
-    [`${prefixCls}-hasline`]: hasLine
+    ["".concat(prefixCls, "-basic")]: true,
+    ["".concat(prefixCls, "-").concat(direction)]: true,
+    ["".concat(prefixCls, "-").concat(size)]: size !== 'default',
+    ["".concat(prefixCls, "-hasline")]: hasLine
   });
   return /*#__PURE__*/React.createElement("div", {
     "aria-label": props["aria-label"],

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

@@ -61,10 +61,10 @@ const FillStep = props => {
     }
 
     const cls = classnames({
-      [`${prefixCls}-left`]: true,
-      [`${prefixCls}-icon`]: 'icon' in props,
-      [`${prefixCls}-plain`]: !('icon' in props),
-      [`${prefixCls}-icon-process`]: progress
+      ["".concat(prefixCls, "-left")]: true,
+      ["".concat(prefixCls, "-icon")]: 'icon' in props,
+      ["".concat(prefixCls, "-plain")]: !('icon' in props),
+      ["".concat(prefixCls, "-icon-process")]: progress
     });
     return inner ? /*#__PURE__*/React.createElement("div", {
       className: cls
@@ -96,8 +96,9 @@ const FillStep = props => {
     tabIndex: 0,
     className: classnames({
       [prefixCls]: true,
-      [`${prefixCls}-${status}`]: Boolean(status),
-      [`${prefixCls}-clickable`]: onClick
+      ["".concat(prefixCls, "-").concat(status)]: Boolean(status),
+      ["".concat(prefixCls, "-clickable")]: onClick,
+      ["".concat(prefixCls, "-fill")]: props.usedInC2D
     }, className),
     style: style,
     onClick: e => {
@@ -105,14 +106,14 @@ const FillStep = props => {
     },
     onKeyDown: handleKeyDown
   }, renderIcon(), /*#__PURE__*/React.createElement("div", {
-    className: `${prefixCls}-content`
+    className: "".concat(prefixCls, "-content")
   }, /*#__PURE__*/React.createElement("div", {
-    className: `${prefixCls}-title`,
+    className: "".concat(prefixCls, "-title"),
     title: typeof title === 'string' ? title : null
   }, /*#__PURE__*/React.createElement("span", {
-    className: `${prefixCls}-title-text`
+    className: "".concat(prefixCls, "-title-text")
   }, title)), /*#__PURE__*/React.createElement("div", {
-    className: `${prefixCls}-description`,
+    className: "".concat(prefixCls, "-description"),
     title: typeof description === 'string' ? description : null
   }, description)));
 };
@@ -132,4 +133,5 @@ FillStep.defaultProps = {
   status: 'wait',
   className: ''
 };
+FillStep.elementType = 'Steps.FillStep';
 export default FillStep;

package/lib/es/steps/fillSteps.js

@@ -17,23 +17,23 @@ const Steps = props => {
     onChange
   } = props;
   const inner = useMemo(() => {
-    const filteredChildren = Children.toArray(children).filter(c => /*#__PURE__*/isValidElement(c));
-    const colStyle = direction === 'vertical' ? null : {
-      width: `${100 / filteredChildren.length}%`
-    };
+    const filteredChildren = Children.toArray(children).filter(c => /*#__PURE__*/isValidElement(c)); // const colStyle = direction === 'vertical' ? null : { width: `${100 / filteredChildren.length }%` };
+
     const content = Children.map(filteredChildren, (child, index) => {
       if (!child) {
         return null;
       }
 
       const stepNumber = initial + index;
-      const childProps = Object.assign({
-        stepNumber: `${stepNumber + 1}`,
+      const childProps = Object.assign(Object.assign({
+        stepNumber: "".concat(stepNumber + 1),
         direction
-      }, child.props);
+      }, child.props), {
+        total: filteredChildren.length
+      });
 
       if (status === 'error' && index === current - 1) {
-        childProps.className = `${prefixCls}-next-error`;
+        childProps.className = "".concat(prefixCls, "-next-error");
       }
 
       if (!child.props.status) {
@@ -50,17 +50,16 @@ const Steps = props => {
         if (index !== current) {
           onChange(index + initial);
         }
-      };
+      }; // return <Col style={colStyle}>{cloneElement(child, { ...childProps })}</Col>;
+
 
-      return /*#__PURE__*/React.createElement(Col, {
-        style: colStyle
-      }, /*#__PURE__*/cloneElement(child, Object.assign({}, childProps)));
+      return /*#__PURE__*/React.createElement(Col, null, /*#__PURE__*/cloneElement(child, Object.assign({}, childProps)));
     });
     return content;
   }, [children, initial, prefixCls, direction, status, current, onChange]);
   const wrapperCls = cls(className, {
     [prefixCls]: true,
-    [`${prefixCls}-${direction}`]: true
+    ["".concat(prefixCls, "-").concat(direction)]: true
   });
   return /*#__PURE__*/React.createElement("div", {
     className: wrapperCls,

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

@@ -22,7 +22,69 @@ export interface NavStepsAllProps extends NavStepsProps {
 }
 export declare type StepsProps = FillStepsAllProps | BasicStepsAllProps | NavStepsAllProps;
 declare class Steps extends Component<StepsProps> {
-    static Step: (props: import("./step").StepProps) => JSX.Element;
+    static Step: {
+        (props: import("./step").StepProps): JSX.Element;
+        elementType: string;
+    };
+    static FillStep: {
+        (props: import("./fillStep").FillStepProps): JSX.Element;
+        propTypes: {
+            prefixCls: PropTypes.Requireable<string>;
+            description: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            status: PropTypes.Requireable<string>;
+            title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            className: PropTypes.Requireable<string>;
+            style: PropTypes.Requireable<object>;
+            onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        };
+        defaultProps: {
+            prefixCls: string;
+            status: string;
+            className: string;
+        };
+        elementType: string;
+    };
+    static BasicStep: {
+        (props: import("./basicStep").BasicStepProps): JSX.Element;
+        propTypes: {
+            prefixCls: PropTypes.Requireable<string>;
+            description: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            status: PropTypes.Requireable<string>;
+            title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            className: PropTypes.Requireable<string>;
+            style: PropTypes.Requireable<object>;
+            onClick: PropTypes.Requireable<(...args: any[]) => any>;
+            active: PropTypes.Requireable<boolean>;
+            done: PropTypes.Requireable<boolean>;
+        };
+        defaultProps: {
+            prefixCls: string;
+            active: boolean;
+            done: boolean;
+            status: string;
+            className: string;
+        };
+        elementType: string;
+    };
+    static NavStep: {
+        (props: import("./navStep").NavStepProps): JSX.Element;
+        propTypes: {
+            prefixCls: PropTypes.Requireable<string>;
+            title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            className: PropTypes.Requireable<string>;
+            style: PropTypes.Requireable<object>;
+            onClick: PropTypes.Requireable<(...args: any[]) => any>;
+            active: PropTypes.Requireable<boolean>;
+        };
+        defaultProps: {
+            prefixCls: string;
+            active: boolean;
+            className: string;
+        };
+        elementType: string;
+    };
     static propTypes: {
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         type: PropTypes.Requireable<string>;