@douyinfe/semi-ui 2.1.0-beta.2 → 2.1.0-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (77) hide show
  1. package/dist/css/semi.css +13 -1
  2. package/dist/css/semi.min.css +1 -1
  3. package/dist/umd/semi-ui.js +259 -134
  4. package/dist/umd/semi-ui.js.map +1 -1
  5. package/dist/umd/semi-ui.min.js +1 -1
  6. package/dist/umd/semi-ui.min.js.map +1 -1
  7. package/lib/es/autoComplete/index.d.ts +36 -11
  8. package/lib/es/button/index.d.ts +0 -1
  9. package/lib/es/button/index.js +1 -2
  10. package/lib/es/calendar/dayCalendar.js +1 -1
  11. package/lib/es/calendar/monthCalendar.js +1 -1
  12. package/lib/es/calendar/rangeCalendar.js +1 -1
  13. package/lib/es/calendar/weekCalendar.js +1 -1
  14. package/lib/es/cascader/index.d.ts +1 -0
  15. package/lib/es/cascader/index.js +15 -3
  16. package/lib/es/collapse/index.js +1 -5
  17. package/lib/es/datePicker/yearAndMonth.d.ts +2 -2
  18. package/lib/es/datePicker/yearAndMonth.js +1 -1
  19. package/lib/es/form/baseForm.d.ts +4 -10
  20. package/lib/es/form/baseForm.js +1 -2
  21. package/lib/es/form/field.d.ts +4 -22
  22. package/lib/es/form/field.js +2 -18
  23. package/lib/es/form/hoc/withField.d.ts +1 -1
  24. package/lib/es/form/hoc/withField.js +0 -3
  25. package/lib/es/iconButton/index.d.ts +0 -1
  26. package/lib/es/iconButton/index.js +0 -1
  27. package/lib/es/locale/localeConsumer.d.ts +5 -5
  28. package/lib/es/modal/useModal/HookModal.d.ts +3 -2
  29. package/lib/es/modal/useModal/index.js +1 -1
  30. package/lib/es/notification/index.d.ts +1 -1
  31. package/lib/es/notification/index.js +1 -1
  32. package/lib/es/popconfirm/index.d.ts +5 -1
  33. package/lib/es/popconfirm/index.js +10 -4
  34. package/lib/es/popover/index.d.ts +3 -1
  35. package/lib/es/popover/index.js +4 -8
  36. package/lib/es/radio/context.d.ts +1 -1
  37. package/lib/es/radio/radio.d.ts +2 -2
  38. package/lib/es/radio/radioGroup.d.ts +4 -4
  39. package/lib/es/rating/index.d.ts +1 -1
  40. package/lib/es/resizeObserver/index.js +1 -0
  41. package/lib/es/scrollList/scrollItem.d.ts +12 -11
  42. package/lib/es/scrollList/scrollItem.js +8 -8
  43. package/lib/es/select/index.js +18 -11
  44. package/lib/es/select/option.js +4 -4
  45. package/lib/es/select/utils.d.ts +1 -1
  46. package/lib/es/select/utils.js +12 -8
  47. package/lib/es/sideSheet/SideSheetContent.d.ts +1 -1
  48. package/lib/es/sideSheet/index.d.ts +3 -3
  49. package/lib/es/steps/basicSteps.js +2 -2
  50. package/lib/es/steps/fillSteps.js +3 -3
  51. package/lib/es/steps/navSteps.js +2 -2
  52. package/lib/es/tabs/TabBar.d.ts +5 -3
  53. package/lib/es/tabs/TabBar.js +12 -4
  54. package/lib/es/tabs/TabPane.d.ts +2 -1
  55. package/lib/es/tabs/TabPane.js +3 -2
  56. package/lib/es/tabs/index.d.ts +3 -1
  57. package/lib/es/tabs/index.js +85 -16
  58. package/lib/es/tabs/interface.d.ts +6 -1
  59. package/lib/es/tagInput/index.d.ts +3 -0
  60. package/lib/es/tagInput/index.js +6 -1
  61. package/lib/es/timePicker/Combobox.d.ts +10 -4
  62. package/lib/es/timePicker/Combobox.js +2 -1
  63. package/lib/es/timePicker/TimePicker.d.ts +1 -1
  64. package/lib/es/tooltip/index.d.ts +3 -0
  65. package/lib/es/tooltip/index.js +3 -0
  66. package/lib/es/tree/interface.d.ts +2 -2
  67. package/lib/es/treeSelect/index.d.ts +2 -11
  68. package/lib/es/treeSelect/index.js +2 -1
  69. package/lib/es/typography/base.d.ts +1 -1
  70. package/lib/es/typography/paragraph.d.ts +1 -1
  71. package/lib/es/typography/text.d.ts +1 -1
  72. package/lib/es/typography/title.d.ts +1 -1
  73. package/lib/es/upload/fileCard.d.ts +3 -18
  74. package/lib/es/upload/index.d.ts +4 -57
  75. package/lib/es/upload/interface.d.ts +56 -0
  76. package/lib/es/upload/interface.js +1 -0
  77. package/package.json +9 -8
@@ -8,8 +8,8 @@ import { ArrayElement } from '../_base/base';
8
8
  import { RadioType } from './radio';
9
9
  import { RadioGroupButtonSize, RadioMode } from './context';
10
10
  export interface OptionItem {
11
- label?: string;
12
- value?: string;
11
+ label?: React.ReactNode;
12
+ value?: string | number;
13
13
  disabled?: boolean;
14
14
  extra?: React.ReactNode;
15
15
  style?: React.CSSProperties;
@@ -17,11 +17,11 @@ export interface OptionItem {
17
17
  }
18
18
  export declare type Options = string[] | Array<OptionItem>;
19
19
  export declare type RadioGroupProps = {
20
- defaultValue?: any;
20
+ defaultValue?: string | number;
21
21
  disabled?: boolean;
22
22
  name?: string;
23
23
  options?: Options;
24
- value?: any;
24
+ value?: string | number;
25
25
  onChange?: (event: RadioChangeEvent) => void;
26
26
  className?: string;
27
27
  style?: React.CSSProperties;
@@ -23,7 +23,7 @@ export interface RatingProps {
23
23
  onFocus?: (e: React.FocusEvent) => void;
24
24
  onBlur?: (e: React.FocusEvent) => void;
25
25
  onKeyDown?: (e: React.KeyboardEvent) => void;
26
- onClick?: (e: React.MouseEvent, index: number) => void;
26
+ onClick?: (e: React.MouseEvent | React.KeyboardEvent, index: number) => void;
27
27
  autoFocus?: boolean;
28
28
  size?: 'small' | 'default' | number;
29
29
  tooltips?: string[];
@@ -12,6 +12,7 @@ export default class ReactResizeObserver extends BaseComponent {
12
12
  // using findDOMNode for two reasons:
13
13
  // 1. cloning to insert a ref is unwieldy and not performant.
14
14
  // 2. ensure that we resolve to an actual DOM node (instead of any JSX ref instance).
15
+ // eslint-disable-next-line
15
16
  return findDOMNode(this.childNode || this);
16
17
  } catch (error) {
17
18
  // swallow error if findDOMNode is run on unmounted component.
@@ -1,15 +1,15 @@
1
- /// <reference types="lodash" />
2
1
  import React from 'react';
3
2
  import BaseComponent from '../_base/baseComponent';
4
3
  import PropTypes from 'prop-types';
5
4
  import { Item, ScrollItemAdapter } from '@douyinfe/semi-foundation/lib/es/scrollList/itemFoundation';
6
5
  import { Motion } from '../_base/base';
7
- export interface ScrollItemProps {
6
+ declare type DebounceSelectFn = (e: React.UIEvent, newSelectedNode: HTMLElement) => void;
7
+ export interface ScrollItemProps<T extends Item> {
8
8
  mode?: string;
9
9
  cycled?: boolean;
10
- list?: Item[];
10
+ list?: T[];
11
11
  selectedIndex?: number;
12
- onSelect?: (data: Item) => void;
12
+ onSelect?: (data: T) => void;
13
13
  transform?: (value: any, text: string) => string;
14
14
  className?: string;
15
15
  motion?: Motion;
@@ -20,7 +20,7 @@ export interface ScrollItemState {
20
20
  prependCount: number;
21
21
  appendCount: number;
22
22
  }
23
- export default class ScrollItem extends BaseComponent<ScrollItemProps, ScrollItemState> {
23
+ export default class ScrollItem<T extends Item> extends BaseComponent<ScrollItemProps<T>, ScrollItemState> {
24
24
  static propTypes: {
25
25
  mode: PropTypes.Requireable<string>;
26
26
  cycled: PropTypes.Requireable<boolean>;
@@ -36,7 +36,7 @@ export default class ScrollItem extends BaseComponent<ScrollItemProps, ScrollIte
36
36
  static defaultProps: {
37
37
  selectedIndex: number;
38
38
  motion: boolean;
39
- list: Item[];
39
+ list: readonly [];
40
40
  onSelect: (...args: any[]) => void;
41
41
  cycled: boolean;
42
42
  mode: string;
@@ -48,12 +48,12 @@ export default class ScrollItem extends BaseComponent<ScrollItemProps, ScrollIte
48
48
  selector: unknown;
49
49
  scrollAnimation: any;
50
50
  scrolling: boolean;
51
- throttledAdjustList: import("lodash").DebouncedFunc<(e: any, nearestNode: any) => void>;
52
- debouncedSelect: import("lodash").DebouncedFunc<(e: any, nearestNode: any) => void>;
51
+ throttledAdjustList: DebounceSelectFn;
52
+ debouncedSelect: DebounceSelectFn;
53
53
  constructor(props?: {});
54
- get adapter(): ScrollItemAdapter<ScrollItemProps, ScrollItemState>;
54
+ get adapter(): ScrollItemAdapter<ScrollItemProps<T>, ScrollItemState, T>;
55
55
  componentDidMount(): void;
56
- componentDidUpdate(prevProps: ScrollItemProps): void;
56
+ componentDidUpdate(prevProps: ScrollItemProps<T>): void;
57
57
  _cacheNode: (name: string, node: Element) => Element;
58
58
  _cacheSelectedNode: (selectedNode: Element) => Element;
59
59
  _cacheWillSelectNode: (node: Element) => Element;
@@ -74,7 +74,7 @@ export default class ScrollItem extends BaseComponent<ScrollItemProps, ScrollIte
74
74
  indexIsSame: (index1: number, index2: number) => boolean;
75
75
  isDisabledIndex: (index: number) => boolean;
76
76
  isDisabledNode: (node: Element) => boolean;
77
- isDisabledData: (data: Item) => boolean;
77
+ isDisabledData: (data: T) => boolean;
78
78
  isWheelMode: () => boolean;
79
79
  addClassToNode: (selectedNode: Element, selectedCls?: string) => void;
80
80
  getIndexByNode: (node: Element) => number;
@@ -102,3 +102,4 @@ export default class ScrollItem extends BaseComponent<ScrollItemProps, ScrollIte
102
102
  renderInfiniteList: () => JSX.Element;
103
103
  render(): JSX.Element;
104
104
  }
105
+ export {};
@@ -21,14 +21,6 @@ export default class ScrollItem extends BaseComponent {
21
21
  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
22
22
  super(props);
23
23
  _this = this;
24
- this.throttledAdjustList = throttle((e, nearestNode) => {
25
- this.foundation.adjustInfiniteList(this.list, this.wrapper, nearestNode);
26
- }, msPerFrame);
27
- this.debouncedSelect = debounce((e, nearestNode) => {
28
- this._cacheSelectedNode(nearestNode);
29
-
30
- this.foundation.selectNode(nearestNode, this.list);
31
- }, msPerFrame * 5);
32
24
 
33
25
  this._cacheNode = (name, node) => name && node && Object.prototype.hasOwnProperty.call(this, name) && (this[name] = node);
34
26
 
@@ -394,6 +386,14 @@ export default class ScrollItem extends BaseComponent {
394
386
  this.scrollAnimation = null; // cache if select action comes from outside
395
387
 
396
388
  this.foundation = new ItemFoundation(this.adapter);
389
+ this.throttledAdjustList = throttle((e, nearestNode) => {
390
+ this.foundation.adjustInfiniteList(this.list, this.wrapper, nearestNode);
391
+ }, msPerFrame);
392
+ this.debouncedSelect = debounce((e, nearestNode) => {
393
+ this._cacheSelectedNode(nearestNode);
394
+
395
+ this.foundation.selectNode(nearestNode, this.list);
396
+ }, msPerFrame * 5);
397
397
  }
398
398
 
399
399
  get adapter() {
@@ -22,10 +22,10 @@ import ConfigContext from '../configProvider/context';
22
22
  import SelectFoundation from '@douyinfe/semi-foundation/lib/es/select/foundation';
23
23
  import { cssClasses, strings, numbers } from '@douyinfe/semi-foundation/lib/es/select/constants';
24
24
  import BaseComponent from '../_base/baseComponent';
25
- import { isEqual, isString, noop } from 'lodash-es';
25
+ import { isEqual, isString, noop, get, isNumber } from 'lodash-es';
26
26
  import Tag from '../tag/index';
27
27
  import TagGroup from '../tag/group';
28
- import LocaleCosumer from '../locale/localeConsumer';
28
+ import LocaleConsumer from '../locale/localeConsumer';
29
29
  import Popover from '../popover/index';
30
30
  import { numbers as popoverNumbers } from '@douyinfe/semi-foundation/lib/es/popover/constants';
31
31
  import { FixedSizeList as List } from 'react-window';
@@ -177,9 +177,10 @@ class Select extends BaseComponent {
177
177
  } = _this.props;
178
178
 
179
179
  if (optionList && optionList.length) {
180
- options = _mapInstanceProperty(optionList).call(optionList, itemOpt => _Object$assign({
180
+ options = _mapInstanceProperty(optionList).call(optionList, (itemOpt, index) => _Object$assign({
181
181
  _show: true,
182
- _selected: false
182
+ _selected: false,
183
+ _scrollIndex: index
183
184
  }, itemOpt));
184
185
  optionGroups[0] = {
185
186
  children: options,
@@ -474,7 +475,7 @@ class Select extends BaseComponent {
474
475
  }, option, {
475
476
  focused: isFocused,
476
477
  style: style
477
- }), /*#__PURE__*/React.createElement(LocaleCosumer, {
478
+ }), /*#__PURE__*/React.createElement(LocaleConsumer, {
478
479
  componentName: "Select"
479
480
  }, locale => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
480
481
  className: "".concat(prefixcls, "-create-tips")
@@ -754,15 +755,21 @@ class Select extends BaseComponent {
754
755
  }
755
756
 
756
757
  if (virtualize) {
757
- let minKey;
758
+ let minItemIndex = -1;
758
759
 
759
- _forEachInstanceProperty(selections).call(selections, (v, k) => {
760
- const tempKey = Number(String(k).match(/option-(.*)/)[1]);
761
- minKey = typeof minKey === 'number' && minKey < tempKey ? minKey : tempKey;
760
+ _forEachInstanceProperty(selections).call(selections, item => {
761
+ const itemIndex = get(item, '_scrollIndex');
762
+ /* When the itemIndex is legal */
763
+
764
+ if (isNumber(itemIndex) && itemIndex >= 0) {
765
+ minItemIndex = minItemIndex !== -1 && minItemIndex < itemIndex ? minItemIndex : itemIndex;
766
+ }
762
767
  });
763
768
 
764
- if (minKey) {
765
- this.virtualizeListRef.current.scrollToItem(minKey, 'center');
769
+ if (minItemIndex !== -1) {
770
+ try {
771
+ this.virtualizeListRef.current.scrollToItem(minItemIndex, 'center');
772
+ } catch (error) {}
766
773
  }
767
774
  } else {
768
775
  this.foundation.updateScrollTop();
@@ -20,7 +20,7 @@ import classNames from 'classnames';
20
20
  import PropTypes from 'prop-types';
21
21
  import { isString } from 'lodash-es';
22
22
  import { cssClasses } from '@douyinfe/semi-foundation/lib/es/select/constants';
23
- import LocaleCosumer from '../locale/localeConsumer';
23
+ import LocaleConsumer from '../locale/localeConsumer';
24
24
  import { IconTick } from '@douyinfe/semi-icons';
25
25
  import { getHighLightTextHTML } from '../_utils/index';
26
26
 
@@ -97,7 +97,7 @@ class Option extends PureComponent {
97
97
  return null;
98
98
  }
99
99
 
100
- return /*#__PURE__*/React.createElement(LocaleCosumer, {
100
+ return /*#__PURE__*/React.createElement(LocaleConsumer, {
101
101
  componentName: "Select"
102
102
  }, locale => /*#__PURE__*/React.createElement("div", {
103
103
  className: optionClassName
@@ -144,14 +144,14 @@ class Option extends PureComponent {
144
144
  style: style
145
145
  }, showTick ? /*#__PURE__*/React.createElement("div", {
146
146
  className: selectedIconClassName
147
- }, /*#__PURE__*/React.createElement(IconTick, null)) : null, /*#__PURE__*/React.createElement("div", {
147
+ }, /*#__PURE__*/React.createElement(IconTick, null)) : null, isString(children) ? /*#__PURE__*/React.createElement("div", {
148
148
  className: "".concat(prefixCls, "-text")
149
149
  }, this.renderOptionContent({
150
150
  children,
151
151
  config,
152
152
  inputValue,
153
153
  prefixCls
154
- })));
154
+ })) : children);
155
155
  }
156
156
 
157
157
  }
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import { OptionProps } from './option';
3
3
  import { OptionGroupProps } from './optionGroup';
4
- declare const generateOption: (child: React.ReactElement, parent?: any) => OptionProps;
4
+ declare const generateOption: (child: React.ReactElement, parent: any, index: number) => OptionProps;
5
5
  declare const getOptionsFromGroup: (selectChildren: React.ReactNode) => {
6
6
  optionGroups: OptionGroupProps[];
7
7
  options: OptionProps[];
@@ -20,7 +20,7 @@ var __rest = this && this.__rest || function (s, e) {
20
20
  import React from 'react';
21
21
  import warning from '@douyinfe/semi-foundation/lib/es/utils/warning';
22
22
 
23
- const generateOption = (child, parent) => {
23
+ const generateOption = (child, parent, index) => {
24
24
  const childProps = child.props;
25
25
 
26
26
  if (!child || !childProps) {
@@ -32,7 +32,8 @@ const generateOption = (child, parent) => {
32
32
  // Drop-down menu rendering priority label value, children, value in turn downgrade
33
33
  label: childProps.label || childProps.children || childProps.value,
34
34
  _show: true,
35
- _selected: false
35
+ _selected: false,
36
+ _scrollIndex: index
36
37
  }, childProps), {
37
38
  _parentGroup: parent
38
39
  });
@@ -41,8 +42,6 @@ const generateOption = (child, parent) => {
41
42
  };
42
43
 
43
44
  const getOptionsFromGroup = selectChildren => {
44
- var _context;
45
-
46
45
  let optionGroups = [];
47
46
  let options = [];
48
47
  const emptyGroup = {
@@ -52,14 +51,16 @@ const getOptionsFromGroup = selectChildren => {
52
51
  }; // avoid null
53
52
  // eslint-disable-next-line max-len
54
53
 
55
- const childNodes = _filterInstanceProperty(_context = React.Children.toArray(selectChildren)).call(_context, childNode => childNode && childNode.props);
56
-
54
+ let childNodes = React.Children.toArray(selectChildren);
55
+ childNodes = _filterInstanceProperty(childNodes).call(childNodes, childNode => childNode && childNode.props);
57
56
  let type = '';
57
+ let optionIndex = -1;
58
58
 
59
59
  _forEachInstanceProperty(childNodes).call(childNodes, child => {
60
60
  if (child.type.isSelectOption) {
61
61
  type = 'option';
62
- const option = generateOption(child);
62
+ optionIndex++;
63
+ const option = generateOption(child, undefined, optionIndex);
63
64
  emptyGroup.children.push(option);
64
65
  options.push(option);
65
66
  } else if (child.type.isSelectOptionGroup) {
@@ -74,7 +75,10 @@ const getOptionsFromGroup = selectChildren => {
74
75
 
75
76
  children = React.Children.toArray(children);
76
77
 
77
- const childrenOption = _mapInstanceProperty(children).call(children, option => generateOption(option, restGroupProps));
78
+ const childrenOption = _mapInstanceProperty(children).call(children, option => {
79
+ optionIndex++;
80
+ return generateOption(option, restGroupProps, optionIndex);
81
+ });
78
82
 
79
83
  const group = _Object$assign(_Object$assign({}, child.props), {
80
84
  children: childrenOption,
@@ -1,7 +1,7 @@
1
1
  import React, { CSSProperties } from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
  export interface SideSheetContentProps {
4
- onClose?: (e: React.MouseEvent | MouseEvent) => void;
4
+ onClose?: (e: React.MouseEvent) => void;
5
5
  mask?: boolean;
6
6
  maskStyle?: CSSProperties;
7
7
  maskClosable?: boolean;
@@ -13,7 +13,7 @@ export interface SideSheetReactProps extends SideSheetProps {
13
13
  title?: React.ReactNode;
14
14
  footer?: React.ReactNode;
15
15
  children?: React.ReactNode;
16
- onCancel?: (e: React.MouseEvent) => void;
16
+ onCancel?: (e: React.MouseEvent | React.KeyboardEvent) => void;
17
17
  }
18
18
  export { SideSheetState };
19
19
  export default class SideSheet extends BaseComponent<SideSheetReactProps, SideSheetState> {
@@ -52,8 +52,8 @@ export default class SideSheet extends BaseComponent<SideSheetReactProps, SideSh
52
52
  componentDidMount(): void;
53
53
  componentDidUpdate(prevProps: SideSheetReactProps, prevState: SideSheetState, snapshot: any): void;
54
54
  componentWillUnmount(): void;
55
- handleCancel: (e: MouseEvent) => void;
56
- handleKeyDown: (e: MouseEvent) => void;
55
+ handleCancel: (e: React.MouseEvent) => void;
56
+ handleKeyDown: (e: KeyboardEvent) => void;
57
57
  renderContent(): JSX.Element;
58
58
  render(): JSX.Element;
59
59
  }
@@ -2,7 +2,7 @@ import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
2
2
  import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
3
3
  import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
4
4
  import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
5
- import React, { cloneElement, Children, useMemo } from 'react';
5
+ import React, { cloneElement, Children, useMemo, isValidElement } from 'react';
6
6
  import PropTypes from 'prop-types';
7
7
  import cls from 'classnames';
8
8
  import { stepsClasses as css } from '@douyinfe/semi-foundation/lib/es/steps/constants';
@@ -26,7 +26,7 @@ const Steps = props => {
26
26
  const inner = useMemo(() => {
27
27
  var _context;
28
28
 
29
- const filteredChildren = _filterInstanceProperty(_context = Children.toArray(children)).call(_context, c => Boolean(c));
29
+ const filteredChildren = _filterInstanceProperty(_context = Children.toArray(children)).call(_context, c => /*#__PURE__*/isValidElement(c));
30
30
 
31
31
  const content = _mapInstanceProperty(Children).call(Children, filteredChildren, (child, index) => {
32
32
  if (!child) {
@@ -2,7 +2,7 @@ import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
2
2
  import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
3
3
  import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
4
4
  import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
5
- import React, { cloneElement, Children, useMemo } from 'react';
5
+ import React, { cloneElement, Children, useMemo, isValidElement } from 'react';
6
6
  import PropTypes from 'prop-types';
7
7
  import cls from 'classnames';
8
8
  import { stepsClasses as css } from '@douyinfe/semi-foundation/lib/es/steps/constants';
@@ -25,7 +25,7 @@ const Steps = props => {
25
25
  const inner = useMemo(() => {
26
26
  var _context;
27
27
 
28
- const filteredChildren = _filterInstanceProperty(_context = Children.toArray(children)).call(_context, c => Boolean(c));
28
+ const filteredChildren = _filterInstanceProperty(_context = Children.toArray(children)).call(_context, c => /*#__PURE__*/isValidElement(c));
29
29
 
30
30
  const colStyle = direction === 'vertical' ? null : {
31
31
  width: "".concat(100 / filteredChildren.length, "%")
@@ -69,7 +69,7 @@ const Steps = props => {
69
69
  });
70
70
 
71
71
  return content;
72
- }, [children, initial, prefixCls, direction, status, current]);
72
+ }, [children, initial, prefixCls, direction, status, current, onChange]);
73
73
  const wrapperCls = cls(className, {
74
74
  [prefixCls]: true,
75
75
  [_concatInstanceProperty(_context2 = "".concat(prefixCls, "-")).call(_context2, direction)]: true
@@ -2,7 +2,7 @@ import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
2
2
  import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
3
3
  import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
4
4
  import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
5
- import React, { cloneElement, Children, useMemo } from 'react';
5
+ import React, { cloneElement, Children, useMemo, isValidElement } from 'react';
6
6
  import PropTypes from 'prop-types';
7
7
  import cls from 'classnames';
8
8
  import { stepsClasses as css } from '@douyinfe/semi-foundation/lib/es/steps/constants';
@@ -23,7 +23,7 @@ const Steps = props => {
23
23
  const inner = useMemo(() => {
24
24
  var _context;
25
25
 
26
- const filteredChildren = _filterInstanceProperty(_context = Children.toArray(children)).call(_context, c => Boolean(c));
26
+ const filteredChildren = _filterInstanceProperty(_context = Children.toArray(children)).call(_context, c => /*#__PURE__*/isValidElement(c));
27
27
 
28
28
  const total = filteredChildren.length;
29
29
 
@@ -1,6 +1,6 @@
1
- import React, { ReactNode, MouseEvent } from 'react';
1
+ import React, { MouseEvent, ReactNode } from 'react';
2
2
  import PropTypes from 'prop-types';
3
- import { TabBarProps, PlainTab } from './interface';
3
+ import { PlainTab, TabBarProps } from './interface';
4
4
  export interface TabBarState {
5
5
  endInd: number;
6
6
  rePosKey: number;
@@ -22,6 +22,8 @@ declare class TabBar extends React.Component<TabBarProps, TabBarState> {
22
22
  tabBarExtraContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
23
23
  tabPosition: PropTypes.Requireable<string>;
24
24
  type: PropTypes.Requireable<string>;
25
+ closable: PropTypes.Requireable<boolean>;
26
+ deleteTabItem: PropTypes.Requireable<(...args: any[]) => any>;
25
27
  };
26
28
  uuid: string;
27
29
  constructor(props: TabBarProps);
@@ -32,7 +34,7 @@ declare class TabBar extends React.Component<TabBarProps, TabBarState> {
32
34
  renderTabComponents: (list: Array<PlainTab>) => Array<ReactNode>;
33
35
  handleArrowClick: (items: Array<OverflowItem>, pos: 'start' | 'end') => void;
34
36
  renderCollapse: (items: Array<OverflowItem>, icon: ReactNode, pos: 'start' | 'end') => ReactNode;
35
- renderOverflow: (items: [Array<OverflowItem>, Array<OverflowItem>]) => Array<ReactNode>;
37
+ renderOverflow: (items: any[]) => Array<ReactNode>;
36
38
  renderCollapsedTab: () => ReactNode;
37
39
  render(): ReactNode;
38
40
  private _isActive;
@@ -24,7 +24,7 @@ import OverflowList from '../overflowList';
24
24
  import Dropdown from '../dropdown';
25
25
  import Button from '../button';
26
26
  import { isEmpty } from 'lodash-es';
27
- import { IconChevronRight, IconChevronLeft } from '@douyinfe/semi-icons';
27
+ import { IconChevronLeft, IconChevronRight, IconClose } from '@douyinfe/semi-icons';
28
28
  import { getUuidv4 } from '@douyinfe/semi-foundation/lib/es/utils/uuid';
29
29
 
30
30
  class TabBar extends React.Component {
@@ -51,9 +51,15 @@ class TabBar extends React.Component {
51
51
 
52
52
  this.renderTabItem = panel => {
53
53
  const {
54
- size
54
+ size,
55
+ type,
56
+ deleteTabItem
55
57
  } = this.props;
56
58
  const panelIcon = panel.icon ? this.renderIcon(panel.icon) : null;
59
+ const closableIcon = type === 'card' && panel.closable ? /*#__PURE__*/React.createElement(IconClose, {
60
+ className: "".concat(cssClasses.TABS_TAB, "-icon-close"),
61
+ onClick: e => deleteTabItem(panel.itemKey, e)
62
+ }) : null;
57
63
  let events = {};
58
64
  const key = panel.itemKey;
59
65
 
@@ -76,7 +82,7 @@ class TabBar extends React.Component {
76
82
  }, events, {
77
83
  className: className,
78
84
  key: this._getItemKey(key)
79
- }), panelIcon, panel.tab);
85
+ }), panelIcon, panel.tab, closableIcon);
80
86
  };
81
87
 
82
88
  this.renderTabComponents = list => _mapInstanceProperty(list).call(list, panel => this.renderTabItem(panel));
@@ -278,6 +284,8 @@ TabBar.propTypes = {
278
284
  style: PropTypes.object,
279
285
  tabBarExtraContent: PropTypes.node,
280
286
  tabPosition: PropTypes.oneOf(strings.POSITION_MAP),
281
- type: PropTypes.oneOf(strings.TYPE_MAP)
287
+ type: PropTypes.oneOf(strings.TYPE_MAP),
288
+ closable: PropTypes.bool,
289
+ deleteTabItem: PropTypes.func
282
290
  };
283
291
  export default TabBar;
@@ -1,6 +1,6 @@
1
1
  import React, { PureComponent, ReactNode } from 'react';
2
2
  import PropTypes from 'prop-types';
3
- import { TabPaneProps, PlainTab } from './interface';
3
+ import { PlainTab, TabPaneProps } from './interface';
4
4
  declare class TabPane extends PureComponent<TabPaneProps> {
5
5
  static isTabPane: boolean;
6
6
  static contextType: React.Context<import("./interface").TabContextValue>;
@@ -12,6 +12,7 @@ declare class TabPane extends PureComponent<TabPaneProps> {
12
12
  itemKey: PropTypes.Requireable<string>;
13
13
  tab: PropTypes.Requireable<PropTypes.ReactNodeLike>;
14
14
  icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
15
+ closable: PropTypes.Requireable<boolean>;
15
16
  };
16
17
  lastActiveKey: string;
17
18
  ref: React.RefObject<HTMLDivElement>;
@@ -15,7 +15,7 @@ var __rest = this && this.__rest || function (s, e) {
15
15
  return t;
16
16
  };
17
17
 
18
- import React, { PureComponent, createRef } from 'react';
18
+ import React, { createRef, PureComponent } from 'react';
19
19
  import PropTypes from 'prop-types';
20
20
  import cls from 'classnames';
21
21
  import { cssClasses } from '@douyinfe/semi-foundation/lib/es/tabs/constants';
@@ -131,6 +131,7 @@ TabPane.propTypes = {
131
131
  disabled: PropTypes.bool,
132
132
  itemKey: PropTypes.string,
133
133
  tab: PropTypes.node,
134
- icon: PropTypes.node
134
+ icon: PropTypes.node,
135
+ closable: PropTypes.bool
135
136
  };
136
137
  export default TabPane;
@@ -1,4 +1,4 @@
1
- import { RefObject, ReactElement, MouseEvent, RefCallback, ReactNode } from 'react';
1
+ import { MouseEvent, ReactElement, ReactNode, RefCallback, RefObject } from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
  import TabsFoundation, { TabsAdapter } from '@douyinfe/semi-foundation/lib/es/tabs/foundation';
4
4
  import BaseComponent from '../_base/baseComponent';
@@ -32,6 +32,7 @@ declare class Tabs extends BaseComponent<TabsProps, TabsState> {
32
32
  tabPaneMotion: PropTypes.Requireable<boolean | object>;
33
33
  tabPosition: PropTypes.Requireable<string>;
34
34
  type: PropTypes.Requireable<string>;
35
+ onTabClose: PropTypes.Requireable<(...args: any[]) => any>;
35
36
  };
36
37
  static defaultProps: TabsProps;
37
38
  contentRef: RefObject<HTMLDivElement>;
@@ -45,6 +46,7 @@ declare class Tabs extends BaseComponent<TabsProps, TabsState> {
45
46
  onTabClick: (activeKey: string, event: MouseEvent<HTMLDivElement>) => void;
46
47
  rePosChildren: (children: ReactElement[], activeKey: string) => ReactElement[];
47
48
  getActiveItem: () => ReactNode | ReactNode[];
49
+ deleteTabItem: (tabKey: string, event: MouseEvent<HTMLDivElement>) => void;
48
50
  render(): ReactNode;
49
51
  }
50
52
  export default Tabs;