@douyinfe/semi-ui 2.1.0-alpha.1 → 2.1.0-alpha.2

package/lib/es/select/index.js

@@ -1,6 +1,3 @@
-import _noop from "lodash/noop";
-import _isString from "lodash/isString";
-import _isEqual from "lodash/isEqual";
 import _Map from "@babel/runtime-corejs3/core-js-stable/map";
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
 import _bindInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/bind";
@@ -25,9 +22,10 @@ import ConfigContext from '../configProvider/context';
 import SelectFoundation from '@douyinfe/semi-foundation/lib/es/select/foundation';
 import { cssClasses, strings, numbers } from '@douyinfe/semi-foundation/lib/es/select/constants';
 import BaseComponent from '../_base/baseComponent';
+import { isEqual, isString, noop, get, isNumber } from 'lodash-es';
 import Tag from '../tag/index';
 import TagGroup from '../tag/group';
-import LocaleCosumer from '../locale/localeConsumer';
+import LocaleConsumer from '../locale/localeConsumer';
 import Popover from '../popover/index';
 import { numbers as popoverNumbers } from '@douyinfe/semi-foundation/lib/es/popover/constants';
 import { FixedSizeList as List } from 'react-window';
@@ -42,7 +40,6 @@ import { IconChevronDown, IconClear } from '@douyinfe/semi-icons';
 import { isSemiIcon } from '../_utils';
 import warning from '@douyinfe/semi-foundation/lib/es/utils/warning';
 import '@douyinfe/semi-foundation/lib/es/select/select.css';
-import '@douyinfe/semi-foundation/lib/es/select/option.css';
 const prefixcls = cssClasses.PREFIX;
 const key = 0; // Notes: Use the label of the option as the identifier, that is, the option in Select, the value is allowed to be the same, but the label must be unique
 
@@ -87,8 +84,6 @@ class Select extends BaseComponent {
   }
 
   get adapter() {
-    var _this = this;
-
     const keyboardAdapter = {
       registerKeyDown: cb => {
         const keyboardEventSet = {
@@ -171,18 +166,18 @@ class Select extends BaseComponent {
     };
     return _Object$assign(_Object$assign(_Object$assign(_Object$assign(_Object$assign({}, super.adapter), keyboardAdapter), filterAdapter), multipleAdapter), {
       // Collect all subitems, each item is visible by default when collected, and is not selected
-      getOptionsFromChildren: function () {
-        let children = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props.children;
+      getOptionsFromChildren: (children = this.props.children) => {
         let optionGroups = [];
         let options = [];
         const {
           optionList
-        } = _this.props;
+        } = this.props;
 
         if (optionList && optionList.length) {
-          options = _mapInstanceProperty(optionList).call(optionList, itemOpt => _Object$assign({
+          options = _mapInstanceProperty(optionList).call(optionList, (itemOpt, index) => _Object$assign({
             _show: true,
-            _selected: false
+            _selected: false,
+            _scrollIndex: index
           }, itemOpt));
           optionGroups[0] = {
             children: options,
@@ -194,10 +189,9 @@ class Select extends BaseComponent {
           options = result.options;
         }
 
-        _this.setState({
+        this.setState({
           optionGroups
         });
-
         return options;
       },
       updateOptions: options => {
@@ -321,7 +315,7 @@ class Select extends BaseComponent {
 
     let isOptionsChanged = false;
 
-    if (!_isEqual(prevChildrenKeys, nowChildrenKeys) || !_isEqual(prevProps.optionList, this.props.optionList)) {
+    if (!isEqual(prevChildrenKeys, nowChildrenKeys) || !isEqual(prevProps.optionList, this.props.optionList)) {
       isOptionsChanged = true;
       this.foundation.handleOptionListChange();
     } // Add isOptionChanged: There may be cases where the value is unchanged, but the optionList is updated. At this time, the label corresponding to the value may change, and the selected item needs to be updated
@@ -477,7 +471,7 @@ class Select extends BaseComponent {
       }, option, {
         focused: isFocused,
         style: style
-      }), /*#__PURE__*/React.createElement(LocaleCosumer, {
+      }), /*#__PURE__*/React.createElement(LocaleConsumer, {
         componentName: "Select"
       }, locale => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
         className: "".concat(prefixcls, "-create-tips")
@@ -757,15 +751,21 @@ class Select extends BaseComponent {
     }
 
     if (virtualize) {
-      let minKey;
+      let minItemIndex = -1;
+
+      _forEachInstanceProperty(selections).call(selections, item => {
+        const itemIndex = get(item, '_scrollIndex');
+        /* When the itemIndex is legal */
 
-      _forEachInstanceProperty(selections).call(selections, (v, k) => {
-        const tempKey = Number(String(k).match(/option-(.*)/)[1]);
-        minKey = typeof minKey === 'number' && minKey < tempKey ? minKey : tempKey;
+        if (isNumber(itemIndex) && itemIndex >= 0) {
+          minItemIndex = minItemIndex !== -1 && minItemIndex < itemIndex ? minItemIndex : itemIndex;
+        }
       });
 
-      if (minKey) {
-        this.virtualizeListRef.current.scrollToItem(minKey, 'center');
+      if (minItemIndex !== -1) {
+        try {
+          this.virtualizeListRef.current.scrollToItem(minItemIndex, 'center');
+        } catch (error) {}
       }
     } else {
       this.foundation.updateScrollTop();
@@ -778,7 +778,7 @@ class Select extends BaseComponent {
     } = this.props;
     const suffixWrapperCls = cls({
       ["".concat(prefixcls, "-suffix")]: true,
-      ["".concat(prefixcls, "-suffix-text")]: suffix && _isString(suffix),
+      ["".concat(prefixcls, "-suffix-text")]: suffix && isString(suffix),
       ["".concat(prefixcls, "-suffix-icon")]: isSemiIcon(suffix)
     });
     return /*#__PURE__*/React.createElement("div", {
@@ -795,7 +795,7 @@ class Select extends BaseComponent {
     const prefixWrapperCls = cls({
       ["".concat(prefixcls, "-prefix")]: true,
       ["".concat(prefixcls, "-inset-label")]: insetLabel,
-      ["".concat(prefixcls, "-prefix-text")]: labelNode && _isString(labelNode),
+      ["".concat(prefixcls, "-prefix-text")]: labelNode && isString(labelNode),
       ["".concat(prefixcls, "-prefix-icon")]: isSemiIcon(labelNode)
     });
     return /*#__PURE__*/React.createElement("div", {
@@ -1022,20 +1022,20 @@ Select.defaultProps = {
   defaultOpen: false,
   allowCreate: false,
   placeholder: '',
-  onDropdownVisibleChange: _noop,
+  onDropdownVisibleChange: noop,
   onChangeWithObject: false,
-  onChange: _noop,
-  onSearch: _noop,
-  onMouseEnter: _noop,
-  onMouseLeave: _noop,
-  onDeselect: _noop,
-  onSelect: _noop,
-  onCreate: _noop,
-  onExceed: _noop,
-  onFocus: _noop,
-  onBlur: _noop,
-  onClear: _noop,
-  onListScroll: _noop,
+  onChange: noop,
+  onSearch: noop,
+  onMouseEnter: noop,
+  onMouseLeave: noop,
+  onDeselect: noop,
+  onSelect: noop,
+  onCreate: noop,
+  onExceed: noop,
+  onFocus: noop,
+  onBlur: noop,
+  onClear: noop,
+  onListScroll: noop,
   maxHeight: 300,
   dropdownMatchSelectWidth: true,
   defaultActiveFirstOption: false,

package/lib/es/select/option.js

@@ -1,4 +1,3 @@
-import _isString from "lodash/isString";
 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 _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
@@ -19,8 +18,9 @@ var __rest = this && this.__rest || function (s, e) {
 import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
+import { isString } from 'lodash-es';
 import { cssClasses } from '@douyinfe/semi-foundation/lib/es/select/constants';
-import LocaleCosumer from '../locale/localeConsumer';
+import LocaleConsumer from '../locale/localeConsumer';
 import { IconTick } from '@douyinfe/semi-icons';
 import { getHighLightTextHTML } from '../_utils/index';
 
@@ -46,15 +46,13 @@ class Option extends PureComponent {
     }
   }
 
-  renderOptionContent(_ref) {
-    let {
-      config,
-      children,
-      inputValue,
-      prefixCls
-    } = _ref;
-
-    if (_isString(children) && inputValue) {
+  renderOptionContent({
+    config,
+    children,
+    inputValue,
+    prefixCls
+  }) {
+    if (isString(children) && inputValue) {
       return getHighLightTextHTML(config);
     }
 
@@ -97,7 +95,7 @@ class Option extends PureComponent {
         return null;
       }
 
-      return /*#__PURE__*/React.createElement(LocaleCosumer, {
+      return /*#__PURE__*/React.createElement(LocaleConsumer, {
         componentName: "Select"
       }, locale => /*#__PURE__*/React.createElement("div", {
         className: optionClassName
@@ -144,14 +142,14 @@ class Option extends PureComponent {
       style: style
     }, showTick ? /*#__PURE__*/React.createElement("div", {
       className: selectedIconClassName
-    }, /*#__PURE__*/React.createElement(IconTick, null)) : null, /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement(IconTick, null)) : null, isString(children) ? /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-text")
     }, this.renderOptionContent({
       children,
       config,
       inputValue,
       prefixCls
-    })));
+    })) : children);
   }
 
 }

package/lib/es/select/utils.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { OptionProps } from './option';
 import { OptionGroupProps } from './optionGroup';
-declare const generateOption: (child: React.ReactElement, parent?: any) => OptionProps;
+declare const generateOption: (child: React.ReactElement, parent: any, index: number) => OptionProps;
 declare const getOptionsFromGroup: (selectChildren: React.ReactNode) => {
     optionGroups: OptionGroupProps[];
     options: OptionProps[];

package/lib/es/select/utils.js

@@ -20,7 +20,7 @@ var __rest = this && this.__rest || function (s, e) {
 import React from 'react';
 import warning from '@douyinfe/semi-foundation/lib/es/utils/warning';
 
-const generateOption = (child, parent) => {
+const generateOption = (child, parent, index) => {
   const childProps = child.props;
 
   if (!child || !childProps) {
@@ -32,7 +32,8 @@ const generateOption = (child, parent) => {
     // Drop-down menu rendering priority label value, children, value in turn downgrade
     label: childProps.label || childProps.children || childProps.value,
     _show: true,
-    _selected: false
+    _selected: false,
+    _scrollIndex: index
   }, childProps), {
     _parentGroup: parent
   });
@@ -41,8 +42,6 @@ const generateOption = (child, parent) => {
 };
 
 const getOptionsFromGroup = selectChildren => {
-  var _context;
-
   let optionGroups = [];
   let options = [];
   const emptyGroup = {
@@ -52,14 +51,16 @@ const getOptionsFromGroup = selectChildren => {
   }; // avoid null
   // eslint-disable-next-line max-len
 
-  const childNodes = _filterInstanceProperty(_context = React.Children.toArray(selectChildren)).call(_context, childNode => childNode && childNode.props);
-
+  let childNodes = React.Children.toArray(selectChildren);
+  childNodes = _filterInstanceProperty(childNodes).call(childNodes, childNode => childNode && childNode.props);
   let type = '';
+  let optionIndex = -1;
 
   _forEachInstanceProperty(childNodes).call(childNodes, child => {
     if (child.type.isSelectOption) {
       type = 'option';
-      const option = generateOption(child);
+      optionIndex++;
+      const option = generateOption(child, undefined, optionIndex);
       emptyGroup.children.push(option);
       options.push(option);
     } else if (child.type.isSelectOptionGroup) {
@@ -74,7 +75,10 @@ const getOptionsFromGroup = selectChildren => {
 
       children = React.Children.toArray(children);
 
-      const childrenOption = _mapInstanceProperty(children).call(children, option => generateOption(option, restGroupProps));
+      const childrenOption = _mapInstanceProperty(children).call(children, option => {
+        optionIndex++;
+        return generateOption(option, restGroupProps, optionIndex);
+      });
 
       const group = _Object$assign(_Object$assign({}, child.props), {
         children: childrenOption,

package/lib/es/select/virtualRow.js

@@ -1,9 +1,8 @@
-const VirtualRow = _ref => {
-  let {
-    index,
-    data,
-    style
-  } = _ref;
+const VirtualRow = ({
+  index,
+  data,
+  style
+}) => {
   const {
     visibileOptions
   } = data;

package/lib/es/sideSheet/SideSheetContent.d.ts

@@ -1,7 +1,7 @@
 import React, { CSSProperties } from 'react';
 import PropTypes from 'prop-types';
 export interface SideSheetContentProps {
-    onClose?: (e: React.MouseEvent | MouseEvent) => void;
+    onClose?: (e: React.MouseEvent) => void;
     mask?: boolean;
     maskStyle?: CSSProperties;
     maskClosable?: boolean;

package/lib/es/sideSheet/SideSheetContent.js

@@ -1,4 +1,3 @@
-import _noop from "lodash/noop";
 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 _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
@@ -20,6 +19,7 @@ import PropTypes from 'prop-types';
 import cls from 'classnames';
 import { cssClasses } from '@douyinfe/semi-foundation/lib/es/sideSheet/constants';
 import Button from '../iconButton';
+import { noop } from 'lodash-es';
 import { IconClose } from '@douyinfe/semi-icons';
 let uuid = 0;
 const prefixCls = cssClasses.PREFIX;
@@ -164,5 +164,5 @@ SideSheetContent.propTypes = {
   onClose: PropTypes.func
 };
 SideSheetContent.defaultProps = {
-  onClose: _noop
+  onClose: noop
 };

package/lib/es/sideSheet/SideSheetTransition.js

@@ -3,9 +3,7 @@ import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign"
 import { Transition } from '@douyinfe/semi-animation-react';
 import React from 'react'; // eslint-disable-next-line max-len
 
-const formatStyles = function formatStyles() {
-  let styles = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  let props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+const formatStyles = function formatStyles(styles = {}, props = {}) {
   const {
     placement
   } = props;

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

@@ -13,7 +13,7 @@ export interface SideSheetReactProps extends SideSheetProps {
     title?: React.ReactNode;
     footer?: React.ReactNode;
     children?: React.ReactNode;
-    onCancel?: (e: React.MouseEvent) => void;
+    onCancel?: (e: React.MouseEvent | React.KeyboardEvent) => void;
 }
 export { SideSheetState };
 export default class SideSheet extends BaseComponent<SideSheetReactProps, SideSheetState> {
@@ -52,8 +52,8 @@ export default class SideSheet extends BaseComponent<SideSheetReactProps, SideSh
     componentDidMount(): void;
     componentDidUpdate(prevProps: SideSheetReactProps, prevState: SideSheetState, snapshot: any): void;
     componentWillUnmount(): void;
-    handleCancel: (e: MouseEvent) => void;
-    handleKeyDown: (e: MouseEvent) => void;
+    handleCancel: (e: React.MouseEvent) => void;
+    handleKeyDown: (e: KeyboardEvent) => void;
     renderContent(): JSX.Element;
     render(): JSX.Element;
 }

package/lib/es/sideSheet/index.js

@@ -1,4 +1,3 @@
-import _noop from "lodash/noop";
 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 _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
@@ -26,6 +25,7 @@ import ConfigContext from '../configProvider/context';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/sideSheet/constants';
 import SideSheetTransition from './SideSheetTransition';
 import SideSheetContent from './SideSheetContent';
+import { noop } from 'lodash-es';
 import SideSheetFoundation from '@douyinfe/semi-foundation/lib/es/sideSheet/sideSheetFoundation';
 import '@douyinfe/semi-foundation/lib/es/sideSheet/sideSheet.css';
 const prefixCls = cssClasses.PREFIX;
@@ -270,6 +270,6 @@ SideSheet.defaultProps = {
   size: 'small',
   disableScroll: true,
   closeOnEsc: false,
-  afterVisibleChange: _noop,
+  afterVisibleChange: noop,
   keepDOM: false
 };

package/lib/es/slider/index.js

@@ -1,5 +1,3 @@
-import _noop from "lodash/noop";
-import _isEqual from "lodash/isEqual";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
@@ -21,6 +19,7 @@ import BaseComponent from '../_base/baseComponent';
 import SliderFoundation from '@douyinfe/semi-foundation/lib/es/slider/foundation';
 import Tooltip from '../tooltip/index';
 import '@douyinfe/semi-foundation/lib/es/slider/slider.css';
+import { isEqual, noop } from 'lodash-es';
 const prefixCls = cssClasses.PREFIX;
 
 function domIsInRenderTree(e) {
@@ -293,8 +292,6 @@ export default class Slider extends BaseComponent {
   }
 
   get adapter() {
-    var _this = this;
-
     return _Object$assign(_Object$assign({}, super.adapter), {
       getSliderLengths: () => {
         if (this.sliderEl && this.sliderEl.current) {
@@ -363,8 +360,7 @@ export default class Slider extends BaseComponent {
         });
       },
 
-      transNewPropsToState(stateObj) {
-        let callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _noop;
+      transNewPropsToState(stateObj, callback = noop) {
         this.setState(stateObj, callback);
       },
 
@@ -398,11 +394,8 @@ export default class Slider extends BaseComponent {
 
         this._addEventListener(document.body, 'touchmove', this.foundation.onHandleTouchMove, false);
       },
-      onHandleMove: function (mousePos, isMin) {
-        let stateChangeCallback = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _noop;
-        let clickTrack = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
-
-        const sliderDOMIsInRenderTree = _this.foundation.checkAndUpdateIsInRenderTreeState();
+      onHandleMove: (mousePos, isMin, stateChangeCallback = noop, clickTrack = false) => {
+        const sliderDOMIsInRenderTree = this.foundation.checkAndUpdateIsInRenderTreeState();
 
         if (!sliderDOMIsInRenderTree) {
           return;
@@ -411,29 +404,27 @@ export default class Slider extends BaseComponent {
         const {
           value,
           onChange
-        } = _this.props;
-
-        const moveValue = _this.foundation.transPosToValue(mousePos, isMin);
+        } = this.props;
+        const moveValue = this.foundation.transPosToValue(mousePos, isMin);
 
         if (moveValue === false) {
           return;
         }
 
-        const outPutValue = _this.foundation.outPutValue(moveValue);
-
+        const outPutValue = this.foundation.outPutValue(moveValue);
         const {
           currentValue
-        } = _this.state;
+        } = this.state;
 
-        if (!_isEqual(_this.foundation.outPutValue(currentValue), outPutValue)) {
+        if (!isEqual(this.foundation.outPutValue(currentValue), outPutValue)) {
           onChange(outPutValue);
 
-          if (!clickTrack && _this.foundation.valueFormatIsCorrect(value)) {
+          if (!clickTrack && this.foundation.valueFormatIsCorrect(value)) {
             // still require afterChangeCallback when click on the track directly, need skip here
             return false;
           }
 
-          _this.setState({
+          this.setState({
             currentValue: outPutValue
           }, stateChangeCallback);
         }
@@ -494,7 +485,7 @@ export default class Slider extends BaseComponent {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    const hasPropValueChange = !_isEqual(this.props.value, prevProps.value);
+    const hasPropValueChange = !isEqual(this.props.value, prevProps.value);
     const hasPropDisabledChange = this.props.disabled !== prevProps.disabled;
 
     if (hasPropDisabledChange) {
@@ -552,12 +543,8 @@ export default class Slider extends BaseComponent {
     return slider;
   }
 
-  _addEventListener(target, eventName, callback) {
+  _addEventListener(target, eventName, callback, ...rests) {
     if (target.addEventListener) {
-      for (var _len = arguments.length, rests = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
-        rests[_key - 3] = arguments[_key];
-      }
-
       target.addEventListener(eventName, callback, ...rests);
 
       const clearSelf = () => {
@@ -571,7 +558,7 @@ export default class Slider extends BaseComponent {
       this.eventListenerSet.add(clearSelf);
       return clearSelf;
     } else {
-      return _noop;
+      return noop;
     }
   }
 

package/lib/es/space/index.js

@@ -1,6 +1,3 @@
-import _isNumber from "lodash/isNumber";
-import _isArray from "lodash/isArray";
-import _isString from "lodash/isString";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import React, { PureComponent } from 'react';
@@ -8,6 +5,7 @@ import cls from 'classnames';
 import PropTypes from 'prop-types';
 import { strings, cssClasses } from '@douyinfe/semi-foundation/lib/es/space/constants';
 import '@douyinfe/semi-foundation/lib/es/space/space.css';
+import { isString, isArray, isNumber } from 'lodash-es';
 import { flatten } from './utils';
 const prefixCls = cssClasses.PREFIX;
 
@@ -31,22 +29,22 @@ class Space extends PureComponent {
     let spacingHorizontalType = '';
     let spacingVerticalType = '';
 
-    if (_isString(spacing)) {
+    if (isString(spacing)) {
       spacingHorizontalType = spacing;
       spacingVerticalType = spacing;
-    } else if (_isNumber(spacing)) {
+    } else if (isNumber(spacing)) {
       realStyle.rowGap = spacing;
       realStyle.columnGap = spacing;
-    } else if (_isArray(spacing)) {
-      if (_isString(spacing[0])) {
+    } else if (isArray(spacing)) {
+      if (isString(spacing[0])) {
         spacingHorizontalType = spacing[0];
-      } else if (_isNumber(spacing[0])) {
+      } else if (isNumber(spacing[0])) {
         realStyle.columnGap = "".concat(spacing[0], "px");
       }
 
-      if (_isString(spacing[1])) {
+      if (isString(spacing[1])) {
         spacingVerticalType = spacing[1];
-      } else if (_isNumber(spacing[1])) {
+      } else if (isNumber(spacing[1])) {
         realStyle.rowGap = "".concat(spacing[1], "px");
       }
     }

package/lib/es/spin/icon.js

@@ -20,9 +20,7 @@ import isNullOrUndefined from '@douyinfe/semi-foundation/lib/es/utils/isNullOrUn
 
 let _id = -1;
 
-function Icon() {
-  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
+function Icon(props = {}) {
   const {
     id: propsId,
     className

package/lib/es/steps/basicStep.js

@@ -1,4 +1,3 @@
-import _isFunction from "lodash/isFunction";
 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";
@@ -16,6 +15,7 @@ var __rest = this && this.__rest || function (s, e) {
 };
 
 import React from 'react';
+import { isFunction } from 'lodash-es';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { stepsClasses as css } from '@douyinfe/semi-foundation/lib/es/steps/constants';
@@ -109,7 +109,7 @@ const BasicStep = props => {
   });
 
   const handleClick = e => {
-    if (_isFunction(onClick)) {
+    if (isFunction(onClick)) {
       onClick(e);
     }
 

package/lib/es/steps/basicSteps.js

@@ -2,7 +2,7 @@ import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import React, { cloneElement, Children, useMemo } from 'react';
+import React, { cloneElement, Children, useMemo, isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import cls from 'classnames';
 import { stepsClasses as css } from '@douyinfe/semi-foundation/lib/es/steps/constants';
@@ -26,7 +26,7 @@ const Steps = props => {
   const inner = useMemo(() => {
     var _context;
 
-    const filteredChildren = _filterInstanceProperty(_context = Children.toArray(children)).call(_context, c => Boolean(c));
+    const filteredChildren = _filterInstanceProperty(_context = Children.toArray(children)).call(_context, c => /*#__PURE__*/isValidElement(c));
 
     const content = _mapInstanceProperty(Children).call(Children, filteredChildren, (child, index) => {
       if (!child) {

package/lib/es/steps/fillStep.js

@@ -1,6 +1,6 @@
-import _isFunction from "lodash/isFunction";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import React from 'react';
+import { isFunction } from 'lodash-es';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { stepsClasses as css } from '@douyinfe/semi-foundation/lib/es/steps/constants';
@@ -74,7 +74,7 @@ const FillStep = props => {
   };
 
   const handleClick = e => {
-    if (_isFunction(onClick)) {
+    if (isFunction(onClick)) {
       onClick(e);
     }
 

package/lib/es/steps/fillSteps.js

@@ -2,7 +2,7 @@ import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import React, { cloneElement, Children, useMemo } from 'react';
+import React, { cloneElement, Children, useMemo, isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import cls from 'classnames';
 import { stepsClasses as css } from '@douyinfe/semi-foundation/lib/es/steps/constants';
@@ -25,7 +25,7 @@ const Steps = props => {
   const inner = useMemo(() => {
     var _context;
 
-    const filteredChildren = _filterInstanceProperty(_context = Children.toArray(children)).call(_context, c => Boolean(c));
+    const filteredChildren = _filterInstanceProperty(_context = Children.toArray(children)).call(_context, c => /*#__PURE__*/isValidElement(c));
 
     const colStyle = direction === 'vertical' ? null : {
       width: "".concat(100 / filteredChildren.length, "%")
@@ -69,7 +69,7 @@ const Steps = props => {
     });
 
     return content;
-  }, [children, initial, prefixCls, direction, status, current]);
+  }, [children, initial, prefixCls, direction, status, current, onChange]);
   const wrapperCls = cls(className, {
     [prefixCls]: true,
     [_concatInstanceProperty(_context2 = "".concat(prefixCls, "-")).call(_context2, direction)]: true