@douyinfe/semi-ui 2.35.0-beta.0 → 2.36.0-alpha.0

package/dist/umd/semi-ui.js

@@ -39031,6 +39031,10 @@ const item_Avatar = generator('avatar')(Generic);
 const item_Image = generator('image')(Generic);
 const item_Title = generator('title')(Generic);
 const item_Button = generator('button')(Generic);
+item_Avatar.elementType = 'Skeleton.Avatar';
+item_Image.elementType = 'Skeleton.Image';
+item_Title.elementType = 'Skeleton.Title';
+item_Button.elementType = 'Skeleton.Button';
 class item_Paragraph extends external_root_React_commonjs2_react_commonjs_react_amd_react_.PureComponent {
   render() {
     const {
@@ -39059,6 +39063,7 @@ item_Paragraph.defaultProps = {
   prefixCls: skeleton_constants_cssClasses.PREFIX,
   rows: 4
 };
+item_Paragraph.elementType = 'Skeleton.Paragraph';
 ;// CONCATENATED MODULE: ./skeleton/index.tsx
 var skeleton_rest = undefined && undefined.__rest || function (s, e) {
   var t = {};
@@ -39129,6 +39134,7 @@ Skeleton.propTypes = {
   loading: (prop_types_default()).bool,
   children: (prop_types_default()).node
 };
+Skeleton.elementType = 'Skeleton';
 /* harmony default export */ const skeleton_0 = (Skeleton);
 ;// CONCATENATED MODULE: ../semi-foundation/space/constants.ts
 
@@ -47972,7 +47978,7 @@ class CollapsePanel extends external_root_React_commonjs2_react_commonjs_react_a
       activeSet,
       motion
     } = this.context;
-    const active = activeSet.has(itemKey);
+    const active = (activeSet === null || activeSet === void 0 ? void 0 : activeSet.has(itemKey)) || this.props.active;
     const itemCls = classnames_default()(className, {
       [`${collapse_constants_cssClasses.PREFIX}-item`]: true
     });
@@ -48023,6 +48029,7 @@ CollapsePanel.defaultProps = {
   showArrow: true,
   disabled: false
 };
+CollapsePanel.elementType = 'Collapse.Panel';
 // EXTERNAL MODULE: ../semi-foundation/collapse/collapse.scss
 var collapse = __webpack_require__("HnyD");
 ;// CONCATENATED MODULE: ./collapse/index.tsx
@@ -71021,6 +71028,7 @@ const NavContext = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_rea
 
 
 
+
 /* eslint-disable max-len */
 
 /* eslint-disable no-nested-ternary */
@@ -71119,21 +71127,28 @@ class Item_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 === navigation_constants_strings.MODE_HORIZONTAL) {
+    if (!icon && mode === navigation_constants_strings.MODE_HORIZONTAL) {
       return null;
     }
 
@@ -71156,6 +71171,8 @@ class Item_NavItem extends BaseComponent {
   }
 
   render() {
+    var _a;
+
     const {
       text,
       children,
@@ -71171,16 +71188,17 @@ class Item_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)) {
@@ -71228,14 +71246,20 @@ class Item_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_default()(this.props.isInSubNav) ? !this.props.isInSubNav : isUndefined_default()((_a = this.context) === null || _a === void 0 ? void 0 : _a.mode); // Items are divided into normal and sub-wrap
+
       const popoverItemCls = classnames_default()(`${className || `${Item_clsPrefix}-normal`}`, {
         [Item_clsPrefix]: true,
         [`${Item_clsPrefix}-sub`]: isSubNav,
         [`${Item_clsPrefix}-selected`]: selected && !isSubNav,
         [`${Item_clsPrefix}-collapsed`]: isCollapsed,
         [`${Item_clsPrefix}-disabled`]: disabled,
-        [`${Item_clsPrefix}-has-link`]: typeof link === 'string'
+        [`${Item_clsPrefix}-has-link`]: typeof link === 'string',
+        [`${navigation_constants_cssClasses.PREFIX}-first-layer`]: isFirstLayer,
+        [`${Item_clsPrefix}-horizontal`]: modeInProps === navigation_constants_strings.MODE_HORIZONTAL
       });
       const ariaProps = {
         'aria-disabled': disabled
@@ -71314,10 +71338,12 @@ Item_NavItem.defaultProps = {
   disabled: false,
   tabIndex: 0
 };
+Item_NavItem.elementType = 'Nav.Item';
 ;// CONCATENATED MODULE: ./navigation/SubNav.tsx
 
 
 
+
 /* eslint-disable max-len */
 
 /* eslint-disable no-nested-ternary */
@@ -71422,16 +71448,29 @@ class SubNav extends BaseComponent {
 
         return _this._invokeContextFunc('onClick', ...args);
       },
-      getIsSelected: itemKey => Boolean(!isNullOrUndefined(itemKey) && get_default()(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_default()(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 = navigation_constants_cssClasses.PREFIX
     } = this.context;
     let iconSize = 'large';
 
@@ -71439,14 +71478,15 @@ class SubNav extends BaseComponent {
       iconSize = 'default';
     }
 
+    const isOpen = this.adapter.getIsOpen();
     const className = classnames_default()(`${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__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().isValidElement(icon) ? withTransition ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(_cssAnimation, {
       animationState: isOpen ? "enter" : "leave",
-      startClassName: `${navigation_constants_cssClasses.PREFIX}-icon-rotate-${isOpen ? "180" : "0"}`
+      startClassName: `${prefixCls}-icon-rotate-${isOpen ? "180" : "0"}`
     }, _ref => {
       let {
         animationClassName
@@ -71476,17 +71516,22 @@ class SubNav extends BaseComponent {
       level
     } = this.props;
     const {
-      mode,
       isInSubNav,
-      isCollapsed,
-      prefixCls,
+      prefixCls = navigation_constants_cssClasses.PREFIX,
       subNavMotion,
       limitIndent
     } = this.context;
+
+    const isFirstLayer = isUndefined_default()(this.context.mode);
+
+    const mode = this.adapter.getMode();
     const isOpen = this.adapter.getIsOpen();
+    const isCollapsed = this.adapter.getIsCollapsed();
     const titleCls = classnames_default()(`${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 === navigation_constants_strings.MODE_HORIZONTAL
     });
     let withTransition = false;
     let toggleIconType = '';
@@ -71527,6 +71572,7 @@ class SubNav extends BaseComponent {
     }
 
     const isIconChevronRightShow = !isCollapsed && isInSubNav && mode === navigation_constants_strings.MODE_HORIZONTAL || isCollapsed && isInSubNav;
+    const toggleIconPositionLeft = this.context.toggleIconPosition === navigation_constants_strings.TOGGLE_ICON_LEFT;
     const titleDiv = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
       role: "menuitem",
       // to avoid nested horizontal navigation be focused
@@ -71538,9 +71584,9 @@ class SubNav extends BaseComponent {
       "aria-expanded": isOpen ? 'true' : 'false'
     }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
       className: `${prefixCls}-item-inner`
-    }, placeholderIcons, this.context.toggleIconPosition === navigation_constants_strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIconType, navigation_constants_strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-left'), icon || indent || isInSubNav && mode !== navigation_constants_strings.MODE_HORIZONTAL ? this.renderIcon(icon, navigation_constants_strings.ICON_POS_LEFT, false, false, 'key-inSubNav-position-left') : null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
+    }, placeholderIcons, toggleIconPositionLeft && this.renderIcon(toggleIconType, navigation_constants_strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-left'), icon || indent || isInSubNav && mode !== navigation_constants_strings.MODE_HORIZONTAL ? this.renderIcon(icon, navigation_constants_strings.ICON_POS_LEFT, false, false, 'key-inSubNav-position-left') : null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
       className: `${prefixCls}-item-text`
-    }, text), this.context.toggleIconPosition === navigation_constants_strings.TOGGLE_ICON_RIGHT && this.renderIcon(toggleIconType, navigation_constants_strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-right')));
+    }, text), !toggleIconPositionLeft && this.renderIcon(toggleIconType, navigation_constants_strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-right')));
     return titleDiv;
   }
 
@@ -71550,12 +71596,12 @@ class SubNav extends BaseComponent {
       maxHeight
     } = this.props;
     const {
-      isCollapsed,
-      mode,
       subNavMotion,
-      prefixCls
+      prefixCls = navigation_constants_cssClasses.PREFIX
     } = this.context;
+    const isCollapsed = this.adapter.getIsCollapsed();
     const isOpen = this.adapter.getIsOpen();
+    const mode = this.adapter.getMode();
     const isHorizontal = mode === navigation_constants_strings.MODE_HORIZONTAL;
     const subNavCls = classnames_default()(`${prefixCls}-sub`, {
       [`${prefixCls}-sub-open`]: isOpen,
@@ -71584,14 +71630,14 @@ class SubNav extends BaseComponent {
       disabled
     } = this.props;
     const {
-      mode,
       isInSubNav,
-      isCollapsed,
       subNavCloseDelay,
       subNavOpenDelay,
-      prefixCls,
+      prefixCls = navigation_constants_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 = classnames_default()({
@@ -71636,10 +71682,10 @@ class SubNav extends BaseComponent {
       text
     } = this.props;
     const {
-      mode,
-      isCollapsed,
-      prefixCls
+      prefixCls = navigation_constants_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
 
@@ -71657,9 +71703,11 @@ class SubNav extends BaseComponent {
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave,
       disabled: disabled,
-      text: text
+      text: text,
+      mode: mode
     }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(nav_context.Provider, {
       value: Object.assign(Object.assign({}, this.context), {
+        mode: mode,
         isInSubNav: true
       })
     }, titleDiv, subUl));
@@ -71720,7 +71768,8 @@ SubNav.propTypes = {
   onMouseLeave: (prop_types_default()).func,
   // Is it disabled
   disabled: (prop_types_default()).bool,
-  level: (prop_types_default()).number
+  level: (prop_types_default()).number,
+  active: (prop_types_default()).bool
 };
 SubNav.defaultProps = {
   level: 0,
@@ -71736,8 +71785,10 @@ SubNav.defaultProps = {
       "aria-hidden": true
     })
   },
-  disabled: false
+  disabled: false,
+  active: false
 };
+SubNav.elementType = 'Nav.Sub';
 ;// CONCATENATED MODULE: ./navigation/CollapseButton.tsx
 
 
@@ -73657,7 +73708,10 @@ class OverflowList extends BaseComponent {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    if (!isEqual_default()(prevProps.items, this.props.items)) {
+    const prevItemsKeys = prevProps.items.map(item => item.key);
+    const nowItemsKeys = this.props.items.map(item => item.key); // Determine whether to update by comparing key values
+
+    if (!isEqual_default()(prevItemsKeys, nowItemsKeys)) {
       this.itemRefs = {};
       this.setState({
         visibleState: new Map()
@@ -76349,7 +76403,7 @@ class SelectFoundation extends foundation {
 
     const selectedValue = onChangeWithObject && typeof propValue !== 'undefined' ? propValue.value : propValue;
     const selectedOptions = originalOptions.filter(option => option.value === selectedValue);
-    const noMatchOptionInList = !selectedOptions.length && typeof selectedValue !== 'undefined'; // If the current value, there is a matching option in the optionList
+    const noMatchOptionInList = !selectedOptions.length && typeof selectedValue !== 'undefined' && selectedValue !== null; // If the current value, there is a matching option in the optionList
 
     if (selectedOptions.length) {
       const selectedOption = selectedOptions[0];
@@ -83298,7 +83352,7 @@ class SliderFoundation extends foundation {
      */
 
 
-    this.handleMousePos = (pageX, pageY) => {
+    this.handleMousePos = (clientX, clientY) => {
       const parentRect = this._adapter.getParentRect();
 
       const scrollParent = this._adapter.getScrollParentVal();
@@ -83306,8 +83360,8 @@ class SliderFoundation extends foundation {
       const parentX = parentRect ? parentRect.left : 0;
       const parentY = parentRect ? parentRect.top : 0;
       return {
-        x: pageX - parentX + scrollParent.scrollLeft,
-        y: pageY - parentY + scrollParent.scrollTop
+        x: clientX - parentX + scrollParent.scrollLeft,
+        y: clientY - parentY + scrollParent.scrollTop
       };
     };
     /**
@@ -83368,9 +83422,9 @@ class SliderFoundation extends foundation {
         startPos = sliderY + len;
       } else {
         startPos = vertical ? sliderY : sliderX;
-      }
+      } //  startPos = chooseMovePos === 'max' && isDrag ? currentPos[0] : startPos;
+      // eslint-disable-next-line one-var
 
-      startPos = chooseMovePos === 'max' && isDrag ? currentPos[0] : startPos; // eslint-disable-next-line one-var
 
       let endPos;
 
@@ -83378,9 +83432,8 @@ class SliderFoundation extends foundation {
         endPos = sliderY;
       } else {
         endPos = vertical ? sliderY + sliderHeight : sliderX + sliderWidth;
-      }
+      } //   endPos = chooseMovePos === 'min' && isDrag && range ? currentPos[1] : endPos;
 
-      endPos = chooseMovePos === 'min' && isDrag && range ? currentPos[1] : endPos;
 
       if (vertical && verticalReverse) {
         if (position >= startPos) {
@@ -83433,7 +83486,7 @@ class SliderFoundation extends foundation {
       let stepValue;
 
       if (vertical && verticalReverse) {
-        isMin = !isMin;
+        //isMin = !isMin;
         stepValue = (startPos + len - pos) / len * (max - min) + min;
       } else {
         stepValue = (pos - startPos) / len * (max - min) + min;
@@ -83455,11 +83508,7 @@ class SliderFoundation extends foundation {
       }
 
       if (range && stepValue !== compareValue) {
-        if (vertical && verticalReverse) {
-          return isMin ? [currentValue[0], stepValue] : [stepValue, currentValue[1]];
-        } else {
-          return isMin ? [stepValue, currentValue[1]] : [currentValue[0], stepValue];
-        }
+        return isMin ? [stepValue, currentValue[1]] : [currentValue[0], stepValue];
       } else if (!range && stepValue !== compareValue) {
         return stepValue;
       } else {
@@ -83496,11 +83545,7 @@ class SliderFoundation extends foundation {
       const len = vertical ? sliderHeight : sliderWidth;
 
       if (range) {
-        if (vertical && verticalReverse) {
-          return [startPos + len - (value[0] - min) * len / (max - min), startPos + len - (value[1] - min) * len / (max - min)];
-        } else {
-          return [(value[0] - min) * len / (max - min) + startPos, (value[1] - min) * len / (max - min) + startPos];
-        }
+        return [(value[0] - min) * len / (max - min) + startPos, (value[1] - min) * len / (max - min) + startPos];
       } else {
         return (value - min) * len / (max - min) + startPos;
       }
@@ -83658,7 +83703,7 @@ class SliderFoundation extends foundation {
         this._adapter.setDragging([dragging[0], true]);
       }
 
-      const mousePos = this.handleMousePos(e.pageX, e.pageY);
+      const mousePos = this.handleMousePos(e.clientX, e.clientY);
       let pos = vertical ? mousePos.y : mousePos.x;
 
       if (!this._adapter.isEventFromHandle(e)) {
@@ -83694,7 +83739,7 @@ class SliderFoundation extends foundation {
       }
 
       this.onHandleEnter(chooseMovePos);
-      const mousePos = this.handleMousePos(e.pageX, e.pageY);
+      const mousePos = this.handleMousePos(e.clientX, e.clientY);
       let pagePos = vertical ? mousePos.y : mousePos.x;
       pagePos = pagePos - this._dragOffset;
 
@@ -83994,7 +84039,7 @@ class SliderFoundation extends foundation {
       const {
         vertical
       } = this.getProps();
-      const mousePos = this.handleMousePos(e.pageX, e.pageY);
+      const mousePos = this.handleMousePos(e.clientX, e.clientY);
       const position = vertical ? mousePos.y : mousePos.x;
       const isMin = this.checkWhichHandle(position);
       const outPutValue = this.calculateOutputValue(position, isMin);
@@ -84877,7 +84922,9 @@ const BasicStep = props => {
     stepNumber,
     onClick,
     onChange,
-    onKeyDown
+    onKeyDown,
+    usedInC2D,
+    direction: direction
   } = props;
 
   const renderIcon = () => {
@@ -84940,7 +84987,10 @@ const BasicStep = props => {
     [`${prefixCls}-active`]: active,
     [`${prefixCls}-done`]: done,
     [`${prefixCls}-hover`]: onChange || props.onClick,
-    [`${prefixCls}-${status}-hover`]: onChange || props.onClick
+    [`${prefixCls}-${status}-hover`]: onChange || props.onClick,
+    [`${prefixCls}-basic`]: usedInC2D,
+    [`${prefixCls}-${direction}`]: direction,
+    [`${prefixCls}-small`]: size === 'small'
   }, className);
 
   const handleClick = e => {
@@ -84998,6 +85048,7 @@ BasicStep.defaultProps = {
   status: 'wait',
   className: ''
 };
+BasicStep.elementType = 'Steps.BasicStep';
 /* harmony default export */ const basicStep = (BasicStep);
 ;// CONCATENATED MODULE: ./steps/fillStep.tsx
 
@@ -85094,7 +85145,8 @@ const FillStep = props => {
       [prefixCls]: true,
       [`${prefixCls}-${status}`]: Boolean(status),
       [`${prefixCls}-${status}-hover`]: Boolean(status) && (onChange || onClick),
-      [`${prefixCls}-clickable`]: onClick
+      [`${prefixCls}-clickable`]: onClick,
+      [`${prefixCls}-fill`]: props.usedInC2D
     }, className),
     style: style,
     onClick: e => {
@@ -85129,6 +85181,7 @@ FillStep.defaultProps = {
   status: 'wait',
   className: ''
 };
+FillStep.elementType = 'Steps.FillStep';
 /* harmony default export */ const fillStep = (FillStep);
 ;// CONCATENATED MODULE: ./steps/navStep.tsx
 
@@ -85148,10 +85201,13 @@ const NavStep = props => {
     total,
     onClick,
     onKeyDown,
-    onChange
+    onChange,
+    size
   } = props;
   const classString = classnames_default()(prefixCls, {
-    [`${prefixCls}-active`]: active
+    [`${prefixCls}-active`]: active,
+    [`${prefixCls}-nav`]: props.usedInC2D,
+    [`${prefixCls}-small`]: size === 'small'
   }, className);
 
   const handleClick = e => {
@@ -85201,6 +85257,7 @@ NavStep.defaultProps = {
   active: false,
   className: ''
 };
+NavStep.elementType = 'Steps.NavStep';
 /* harmony default export */ const navStep = (NavStep);
 ;// CONCATENATED MODULE: ./steps/context.ts
 
@@ -85236,6 +85293,7 @@ const Step = props => {
   return renderStep();
 };
 
+Step.elementType = 'Steps.Step';
 /* harmony default export */ const step = (Step);
 // EXTERNAL MODULE: ../semi-foundation/steps/steps.scss
 var steps = __webpack_require__("/wkG");
@@ -85259,10 +85317,8 @@ const Steps = props => {
     onChange
   } = props;
   const inner = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(() => {
-    const filteredChildren = external_root_React_commonjs2_react_commonjs_react_amd_react_.Children.toArray(children).filter(c => /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.isValidElement)(c));
-    const colStyle = direction === 'vertical' ? null : {
-      width: `${100 / filteredChildren.length}%`
-    };
+    const filteredChildren = external_root_React_commonjs2_react_commonjs_react_amd_react_.Children.toArray(children).filter(c => /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.isValidElement)(c)); // const colStyle = direction === 'vertical' ? null : { width: `${100 / filteredChildren.length }%` };
+
     const content = external_root_React_commonjs2_react_commonjs_react_amd_react_.Children.map(filteredChildren, (child, index) => {
       if (!child) {
         return null;
@@ -85292,10 +85348,10 @@ const Steps = props => {
         if (index !== current) {
           onChange(index + initial);
         }
-      } : undefined;
-      return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(col, {
-        style: colStyle
-      }, /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.cloneElement)(child, Object.assign({}, childProps)));
+      } : undefined; // Whether colStyle is set has no effect
+      // return <Col style={colStyle}>{cloneElement(child, { ...childProps })}</Col>;
+
+      return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(col, null, /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.cloneElement)(child, Object.assign({}, childProps)));
     });
     return content;
   }, [children, initial, prefixCls, direction, status, current, onChange]);
@@ -85360,7 +85416,8 @@ const basicSteps_Steps = props => {
       const stepNumber = initial + index;
       const childProps = Object.assign({
         stepNumber: `${stepNumber + 1}`,
-        size
+        size,
+        direction
       }, child.props);
 
       if (status === 'error' && index === current - 1) {
@@ -85448,7 +85505,8 @@ const navSteps_Steps = props => {
 
       const childProps = Object.assign({
         index,
-        total
+        total,
+        size
       }, child.props);
       childProps.active = index === current;
       childProps.onChange = onChange ? () => {
@@ -85509,6 +85567,9 @@ var steps_rest = undefined && undefined.__rest || function (s, e) {
 
 
 
+
+
+
 class steps_Steps extends external_root_React_commonjs2_react_commonjs_react_amd_react_.Component {
   renderComponent() {
     const _a = this.props,
@@ -85546,6 +85607,9 @@ class steps_Steps extends external_root_React_commonjs2_react_commonjs_react_amd
 }
 
 steps_Steps.Step = step;
+steps_Steps.FillStep = fillStep;
+steps_Steps.BasicStep = basicStep;
+steps_Steps.NavStep = navStep;
 steps_Steps.propTypes = {
   onChange: (prop_types_default()).func,
   type: prop_types_default().oneOf(['fill', 'basic', 'nav']),
@@ -94380,6 +94444,10 @@ const timeline_constants_strings = {
   ITEM_TYPE: ['ongoing', 'success', 'warning', 'error', 'default']
 };
 
+;// CONCATENATED MODULE: ./timeline/context.tsx
+
+const timeline_context_Context = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createContext(null);
+/* harmony default export */ const timeline_context = (timeline_context_Context);
 ;// CONCATENATED MODULE: ./timeline/item.tsx
 
 
@@ -94387,8 +94455,42 @@ const timeline_constants_strings = {
 
 
 
+
 const timeline_item_prefixCls = timeline_constants_cssClasses.ITEM;
 class timeline_item_Item extends external_root_React_commonjs2_react_commonjs_react_amd_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 = `${timeline_item_prefixCls}-center  ${timeline_item_prefixCls}-left`;
+            break;
+
+          case 'alternate':
+            c2dCls = `${timeline_item_prefixCls}-alternate  ${timeline_item_prefixCls}-${odd ? 'left' : 'right'}`;
+            break;
+
+          default:
+            c2dCls = `${timeline_item_prefixCls}-${mode} ${mode === 'right' ? `${timeline_item_prefixCls}-mode-right` : ''}`;
+            break;
+        }
+
+        c2dCls += ` ${timeline_item_prefixCls}-not-last-child`;
+      }
+
+      return c2dCls;
+    };
+  }
+
   render() {
     const {
       className,
@@ -94401,7 +94503,7 @@ class timeline_item_Item extends external_root_React_commonjs2_react_commonjs_re
       extra,
       onClick
     } = this.props;
-    const itemCls = classnames_default()(timeline_item_prefixCls, className);
+    const itemCls = classnames_default()(timeline_item_prefixCls, className, this.getC2DCls());
     const dotCls = classnames_default()({
       [`${timeline_item_prefixCls}-head`]: true,
       [`${timeline_item_prefixCls}-head-custom`]: dot,
@@ -94432,6 +94534,7 @@ class timeline_item_Item extends external_root_React_commonjs2_react_commonjs_re
   }
 
 }
+timeline_item_Item.contextType = timeline_context;
 timeline_item_Item.propTypes = {
   color: (prop_types_default()).string,
   time: (prop_types_default()).node,
@@ -94441,13 +94544,16 @@ timeline_item_Item.propTypes = {
   position: prop_types_default().oneOf(timeline_constants_strings.ITEM_POS),
   className: (prop_types_default()).string,
   style: (prop_types_default()).object,
-  onClick: (prop_types_default()).func
+  onClick: (prop_types_default()).func,
+  mode: (prop_types_default()).string,
+  lastChild: (prop_types_default()).bool
 };
 timeline_item_Item.defaultProps = {
   type: 'default',
   time: '',
   onClick: (noop_default())
 };
+timeline_item_Item.elementType = 'Timeline.Item';
 ;// CONCATENATED MODULE: ./timeline/index.tsx
 
 
@@ -94456,6 +94562,7 @@ timeline_item_Item.defaultProps = {
 
 
 
+
 const timeline_prefixCls = timeline_constants_cssClasses.PREFIX;
 
 class Timeline extends external_root_React_commonjs2_react_commonjs_react_amd_react_.PureComponent {
@@ -94527,11 +94634,15 @@ class Timeline extends external_root_React_commonjs2_react_commonjs_react_amd_re
     }
 
     const items = childrenList || this.addClassName(children);
-    return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("ul", {
+    return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(timeline_context.Provider, {
+      value: {
+        mode
+      }
+    }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("ul", {
       "aria-label": this.props['aria-label'],
       style: style,
       className: classString
-    }, items);
+    }, items));
   }
 
 }