@douyinfe/semi-ui 2.26.0-beta.0 → 2.27.0-alpha.0

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 (73) hide show
  1. package/dist/css/semi.css +207 -0
  2. package/dist/css/semi.min.css +1 -1
  3. package/dist/umd/semi-ui.js +392 -201
  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/cjs/anchor/index.d.ts +1 -1
  8. package/lib/cjs/autoComplete/index.d.ts +1 -1
  9. package/lib/cjs/button/Button.d.ts +1 -1
  10. package/lib/cjs/button/buttonGroup.d.ts +1 -1
  11. package/lib/cjs/button/index.d.ts +1 -1
  12. package/lib/cjs/carousel/CarouselIndicator.d.ts +1 -1
  13. package/lib/cjs/carousel/index.d.ts +1 -1
  14. package/lib/cjs/cascader/index.d.ts +1 -1
  15. package/lib/cjs/cascader/item.d.ts +1 -1
  16. package/lib/cjs/datePicker/dateInput.d.ts +1 -1
  17. package/lib/cjs/datePicker/datePicker.d.ts +2 -2
  18. package/lib/cjs/datePicker/monthsGrid.d.ts +1 -1
  19. package/lib/cjs/form/baseForm.d.ts +1 -1
  20. package/lib/cjs/form/field.d.ts +1 -1
  21. package/lib/cjs/input/index.d.ts +1 -1
  22. package/lib/cjs/input/inputGroup.d.ts +1 -1
  23. package/lib/cjs/popover/index.d.ts +1 -1
  24. package/lib/cjs/rating/index.d.ts +1 -1
  25. package/lib/cjs/rating/item.d.ts +1 -1
  26. package/lib/cjs/switch/index.d.ts +1 -1
  27. package/lib/cjs/table/Table.d.ts +2 -2
  28. package/lib/cjs/table/index.d.ts +1 -1
  29. package/lib/cjs/tabs/TabBar.d.ts +1 -0
  30. package/lib/cjs/tabs/TabBar.js +28 -2
  31. package/lib/cjs/tabs/TabItem.d.ts +38 -0
  32. package/lib/cjs/tabs/TabItem.js +104 -0
  33. package/lib/cjs/tabs/index.d.ts +2 -0
  34. package/lib/cjs/tabs/index.js +3 -0
  35. package/lib/cjs/tagInput/index.d.ts +4 -1
  36. package/lib/cjs/tagInput/index.js +18 -2
  37. package/lib/cjs/timePicker/TimePicker.d.ts +1 -1
  38. package/lib/cjs/timePicker/index.d.ts +1 -1
  39. package/lib/cjs/tooltip/index.d.ts +1 -1
  40. package/lib/es/anchor/index.d.ts +1 -1
  41. package/lib/es/autoComplete/index.d.ts +1 -1
  42. package/lib/es/button/Button.d.ts +1 -1
  43. package/lib/es/button/buttonGroup.d.ts +1 -1
  44. package/lib/es/button/index.d.ts +1 -1
  45. package/lib/es/carousel/CarouselIndicator.d.ts +1 -1
  46. package/lib/es/carousel/index.d.ts +1 -1
  47. package/lib/es/cascader/index.d.ts +1 -1
  48. package/lib/es/cascader/item.d.ts +1 -1
  49. package/lib/es/datePicker/dateInput.d.ts +1 -1
  50. package/lib/es/datePicker/datePicker.d.ts +2 -2
  51. package/lib/es/datePicker/monthsGrid.d.ts +1 -1
  52. package/lib/es/form/baseForm.d.ts +1 -1
  53. package/lib/es/form/field.d.ts +1 -1
  54. package/lib/es/input/index.d.ts +1 -1
  55. package/lib/es/input/inputGroup.d.ts +1 -1
  56. package/lib/es/popover/index.d.ts +1 -1
  57. package/lib/es/rating/index.d.ts +1 -1
  58. package/lib/es/rating/item.d.ts +1 -1
  59. package/lib/es/switch/index.d.ts +1 -1
  60. package/lib/es/table/Table.d.ts +2 -2
  61. package/lib/es/table/index.d.ts +1 -1
  62. package/lib/es/tabs/TabBar.d.ts +1 -0
  63. package/lib/es/tabs/TabBar.js +27 -2
  64. package/lib/es/tabs/TabItem.d.ts +38 -0
  65. package/lib/es/tabs/TabItem.js +88 -0
  66. package/lib/es/tabs/index.d.ts +2 -0
  67. package/lib/es/tabs/index.js +2 -0
  68. package/lib/es/tagInput/index.d.ts +4 -1
  69. package/lib/es/tagInput/index.js +18 -2
  70. package/lib/es/timePicker/TimePicker.d.ts +1 -1
  71. package/lib/es/timePicker/index.d.ts +1 -1
  72. package/lib/es/tooltip/index.d.ts +1 -1
  73. package/package.json +8 -8
@@ -18,7 +18,7 @@ export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {
18
18
  children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
19
19
  disabled: PropTypes.Requireable<boolean>;
20
20
  type: PropTypes.Requireable<string>;
21
- size: PropTypes.Requireable<"default" | "small" | "large">;
21
+ size: PropTypes.Requireable<"small" | "default" | "large">;
22
22
  theme: PropTypes.Requireable<"solid" | "light" | "borderless">;
23
23
  'aria-label': PropTypes.Requireable<string>;
24
24
  };
@@ -22,7 +22,7 @@ declare class Button extends React.PureComponent<ButtonProps> {
22
22
  onMouseEnter: import("prop-types").Requireable<(...args: any[]) => any>;
23
23
  onMouseLeave: import("prop-types").Requireable<(...args: any[]) => any>;
24
24
  disabled: import("prop-types").Requireable<boolean>;
25
- size: import("prop-types").Requireable<"default" | "small" | "large">;
25
+ size: import("prop-types").Requireable<"small" | "default" | "large">;
26
26
  type: import("prop-types").Requireable<"warning" | "primary" | "tertiary" | "secondary" | "danger">;
27
27
  block: import("prop-types").Requireable<boolean>;
28
28
  onClick: import("prop-types").Requireable<(...args: any[]) => any>;
@@ -12,7 +12,7 @@ declare class CarouselIndicator extends React.PureComponent<CarouselIndicatorPro
12
12
  total: PropTypes.Requireable<number>;
13
13
  onIndicatorChange: PropTypes.Requireable<(...args: any[]) => any>;
14
14
  type: PropTypes.Requireable<"line" | "dot" | "columnar">;
15
- trigger: PropTypes.Requireable<"hover" | "click">;
15
+ trigger: PropTypes.Requireable<"click" | "hover">;
16
16
  };
17
17
  onIndicatorChange: (activeIndex: number) => void;
18
18
  handleIndicatorClick: (activeIndex: number) => void;
@@ -30,7 +30,7 @@ declare class Carousel extends BaseComponent<CarouselProps, CarouselState> {
30
30
  slideDirection: PropTypes.Requireable<"left" | "right">;
31
31
  speed: PropTypes.Requireable<number>;
32
32
  style: PropTypes.Requireable<object>;
33
- trigger: PropTypes.Requireable<"hover" | "click">;
33
+ trigger: PropTypes.Requireable<"click" | "hover">;
34
34
  };
35
35
  static defaultProps: CarouselProps;
36
36
  foundation: CarouselFoundation;
@@ -110,7 +110,7 @@ declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
110
110
  zIndex: PropTypes.Requireable<number>;
111
111
  value: PropTypes.Requireable<NonNullable<string | number | any[]>>;
112
112
  validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">;
113
- showNext: PropTypes.Requireable<"hover" | "click">;
113
+ showNext: PropTypes.Requireable<"click" | "hover">;
114
114
  stopPropagation: PropTypes.Requireable<NonNullable<string | boolean>>;
115
115
  showClear: PropTypes.Requireable<boolean>;
116
116
  defaultOpen: PropTypes.Requireable<boolean>;
@@ -48,7 +48,7 @@ export default class Item extends PureComponent<CascaderItemProps> {
48
48
  onItemClick: PropTypes.Requireable<(...args: any[]) => any>;
49
49
  onItemHover: PropTypes.Requireable<(...args: any[]) => any>;
50
50
  multiple: PropTypes.Requireable<boolean>;
51
- showNext: PropTypes.Requireable<"hover" | "click">;
51
+ showNext: PropTypes.Requireable<"click" | "hover">;
52
52
  checkedKeys: PropTypes.Requireable<object>;
53
53
  halfCheckedKeys: PropTypes.Requireable<object>;
54
54
  onItemCheckboxClick: PropTypes.Requireable<(...args: any[]) => any>;
@@ -26,7 +26,7 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
26
26
  onFocus: PropTypes.Requireable<(...args: any[]) => any>;
27
27
  value: PropTypes.Requireable<any[]>;
28
28
  disabled: PropTypes.Requireable<boolean>;
29
- type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
29
+ type: PropTypes.Requireable<"date" | "month" | "dateTime" | "dateRange" | "year" | "dateTimeRange">;
30
30
  showClear: PropTypes.Requireable<boolean>;
31
31
  format: PropTypes.Requireable<string>;
32
32
  inputStyle: PropTypes.Requireable<object>;
@@ -46,8 +46,8 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
46
46
  'aria-invalid': PropTypes.Requireable<boolean>;
47
47
  'aria-labelledby': PropTypes.Requireable<string>;
48
48
  'aria-required': PropTypes.Requireable<boolean>;
49
- type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
50
- size: PropTypes.Requireable<"default" | "small" | "large">;
49
+ type: PropTypes.Requireable<"date" | "month" | "dateTime" | "dateRange" | "year" | "dateTimeRange">;
50
+ size: PropTypes.Requireable<"small" | "default" | "large">;
51
51
  clearIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
52
52
  density: PropTypes.Requireable<"default" | "compact">;
53
53
  defaultValue: PropTypes.Requireable<NonNullable<string | number | object>>;
@@ -19,7 +19,7 @@ export interface MonthsGridProps extends MonthsGridFoundationProps, BaseProps {
19
19
  export declare type MonthsGridState = MonthsGridFoundationState;
20
20
  export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGridState> {
21
21
  static propTypes: {
22
- type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
22
+ type: PropTypes.Requireable<"date" | "month" | "dateTime" | "dateRange" | "year" | "dateTimeRange">;
23
23
  defaultValue: PropTypes.Requireable<NonNullable<string | number | object>>;
24
24
  defaultPickerValue: PropTypes.Requireable<NonNullable<string | number | object>>;
25
25
  multiple: PropTypes.Requireable<boolean>;
@@ -135,7 +135,7 @@ declare class Form<Values extends Record<string, any> = any> extends BaseCompone
135
135
  preventScroll?: boolean;
136
136
  showRestTagsPopover?: boolean;
137
137
  restTagsPopoverProps?: import("../popover").PopoverProps;
138
- } & Pick<import("../tooltip").TooltipProps, "stopPropagation" | "motion" | "getPopupContainer" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay"> & React.RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
138
+ } & Pick<import("../tooltip").TooltipProps, "motion" | "stopPropagation" | "getPopupContainer" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay"> & React.RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
139
139
  static Checkbox: React.ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../checkbox").CheckboxProps & import("./interface").RCIncludeType>;
140
140
  static CheckboxGroup: React.ComponentType<import("utility-types").Subtract<import("../checkbox").CheckboxGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps & React.RefAttributes<any>>;
141
141
  static Radio: React.ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../radio").RadioProps & import("./interface").RCIncludeType>;
@@ -83,7 +83,7 @@ declare const FormSelect: import("react").ComponentType<import("utility-types").
83
83
  preventScroll?: boolean;
84
84
  showRestTagsPopover?: boolean;
85
85
  restTagsPopoverProps?: import("../popover").PopoverProps;
86
- } & Pick<import("../tooltip").TooltipProps, "stopPropagation" | "motion" | "getPopupContainer" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay"> & import("react").RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
86
+ } & Pick<import("../tooltip").TooltipProps, "motion" | "stopPropagation" | "getPopupContainer" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay"> & import("react").RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
87
87
  declare const FormCheckboxGroup: import("react").ComponentType<import("utility-types").Subtract<import("../checkbox/checkboxGroup").CheckboxGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps & import("react").RefAttributes<any>>;
88
88
  declare const FormCheckbox: import("react").ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../checkbox/checkbox").CheckboxProps & import("./interface").RCIncludeType>;
89
89
  declare const FormRadioGroup: import("react").ComponentType<import("utility-types").Subtract<import("../radio/radioGroup").RadioGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps & import("react").RefAttributes<any>>;
@@ -83,7 +83,7 @@ declare class Input extends BaseComponent<InputProps, InputState> {
83
83
  showClear: PropTypes.Requireable<boolean>;
84
84
  hideSuffix: PropTypes.Requireable<boolean>;
85
85
  placeholder: PropTypes.Requireable<any>;
86
- size: PropTypes.Requireable<"default" | "small" | "large">;
86
+ size: PropTypes.Requireable<"small" | "default" | "large">;
87
87
  className: PropTypes.Requireable<string>;
88
88
  style: PropTypes.Requireable<object>;
89
89
  validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">;
@@ -21,7 +21,7 @@ export default class inputGroup extends BaseComponent<InputGroupProps, InputGrou
21
21
  static propTypes: {
22
22
  className: PropTypes.Requireable<string>;
23
23
  children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
24
- size: PropTypes.Requireable<"default" | "small" | "large">;
24
+ size: PropTypes.Requireable<"small" | "default" | "large">;
25
25
  style: PropTypes.Requireable<object>;
26
26
  onBlur: PropTypes.Requireable<(...args: any[]) => any>;
27
27
  onFocus: PropTypes.Requireable<(...args: any[]) => any>;
@@ -58,7 +58,7 @@ declare class Popover extends React.PureComponent<PopoverProps, PopoverState> {
58
58
  margin: PropTypes.Requireable<NonNullable<number | object>>;
59
59
  mouseEnterDelay: PropTypes.Requireable<number>;
60
60
  mouseLeaveDelay: PropTypes.Requireable<number>;
61
- trigger: PropTypes.Validator<NonNullable<"hover" | "focus" | "click" | "custom">>;
61
+ trigger: PropTypes.Validator<NonNullable<"click" | "focus" | "hover" | "custom">>;
62
62
  contentClassName: PropTypes.Requireable<NonNullable<string | any[]>>;
63
63
  onVisibleChange: PropTypes.Requireable<(...args: any[]) => any>;
64
64
  onClickOutSide: PropTypes.Requireable<(...args: any[]) => any>;
@@ -69,7 +69,7 @@ export default class Rating extends BaseComponent<RatingProps, RatingState> {
69
69
  onBlur: PropTypes.Requireable<(...args: any[]) => any>;
70
70
  onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
71
71
  autoFocus: PropTypes.Requireable<boolean>;
72
- size: PropTypes.Requireable<NonNullable<number | "default" | "small">>;
72
+ size: PropTypes.Requireable<NonNullable<number | "small" | "default">>;
73
73
  tooltips: PropTypes.Requireable<string[]>;
74
74
  id: PropTypes.Requireable<string>;
75
75
  preventScroll: PropTypes.Requireable<boolean>;
@@ -40,7 +40,7 @@ export default class Item extends BaseComponent<RatingItemProps, RatingItemState
40
40
  disabled: PropTypes.Requireable<boolean>;
41
41
  count: PropTypes.Requireable<number>;
42
42
  ariaLabelPrefix: PropTypes.Requireable<string>;
43
- size: PropTypes.Requireable<NonNullable<number | "default" | "small">>;
43
+ size: PropTypes.Requireable<NonNullable<number | "small" | "default">>;
44
44
  'aria-describedby': PropTypes.Requireable<string>;
45
45
  onFocus: PropTypes.Requireable<(...args: any[]) => any>;
46
46
  onBlur: PropTypes.Requireable<(...args: any[]) => any>;
@@ -45,7 +45,7 @@ declare class Switch extends BaseComponent<SwitchProps, SwitchState> {
45
45
  onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
46
46
  onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
47
47
  style: PropTypes.Requireable<object>;
48
- size: PropTypes.Requireable<"default" | "small" | "large">;
48
+ size: PropTypes.Requireable<"small" | "default" | "large">;
49
49
  uncheckedText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
50
50
  id: PropTypes.Requireable<string>;
51
51
  };
@@ -52,7 +52,7 @@ declare class Table<RecordType extends Record<string, any>> extends BaseComponen
52
52
  components: PropTypes.Requireable<any>;
53
53
  bordered: PropTypes.Requireable<boolean>;
54
54
  loading: PropTypes.Requireable<boolean>;
55
- size: PropTypes.Requireable<"default" | "small" | "middle">;
55
+ size: PropTypes.Requireable<"small" | "default" | "middle">;
56
56
  tableLayout: PropTypes.Requireable<"" | "fixed" | "auto">;
57
57
  columns: PropTypes.Requireable<PropTypes.InferProps<{
58
58
  align: PropTypes.Requireable<"left" | "right" | "center">;
@@ -289,7 +289,7 @@ declare class Table<RecordType extends Record<string, any>> extends BaseComponen
289
289
  showTotal?: boolean;
290
290
  pageSize?: number;
291
291
  pageSizeOpts?: number[];
292
- size?: "default" | "small";
292
+ size?: "small" | "default";
293
293
  currentPage?: number;
294
294
  defaultCurrentPage?: number;
295
295
  onPageChange?: (currentPage: number) => void;
@@ -15,7 +15,7 @@ declare class Table<RecordType extends Record<string, any> = Data> extends React
15
15
  components: PropTypes.Requireable<any>;
16
16
  bordered: PropTypes.Requireable<boolean>;
17
17
  loading: PropTypes.Requireable<boolean>;
18
- size: PropTypes.Requireable<"default" | "small" | "middle">;
18
+ size: PropTypes.Requireable<"small" | "default" | "middle">;
19
19
  tableLayout: PropTypes.Requireable<"" | "fixed" | "auto">;
20
20
  columns: PropTypes.Requireable<PropTypes.InferProps<{
21
21
  align: PropTypes.Requireable<"left" | "right" | "center">;
@@ -31,6 +31,7 @@ declare class TabBar extends React.Component<TabBarProps, TabBarState> {
31
31
  renderExtra(): ReactNode;
32
32
  handleItemClick: (itemKey: string, e: MouseEvent<Element>) => void;
33
33
  handleKeyDown: (event: React.KeyboardEvent, itemKey: string, closable: boolean) => void;
34
+ renderTabItemInOverflowList: (panel: PlainTab) => ReactNode;
34
35
  renderTabItem: (panel: PlainTab) => ReactNode;
35
36
  renderTabComponents: (list: Array<PlainTab>) => Array<ReactNode>;
36
37
  handleArrowClick: (items: Array<OverflowItem>, pos: 'start' | 'end') => void;
@@ -21,6 +21,7 @@ import Dropdown from '../dropdown';
21
21
  import Button from '../button';
22
22
  import { IconChevronRight, IconChevronLeft, IconClose } from '@douyinfe/semi-icons';
23
23
  import { getUuidv4 } from '@douyinfe/semi-foundation/lib/es/utils/uuid';
24
+ import TabItem from './TabItem';
24
25
 
25
26
  class TabBar extends React.Component {
26
27
  constructor(props) {
@@ -46,7 +47,7 @@ class TabBar extends React.Component {
46
47
  this.props.handleKeyDown(event, itemKey, closable);
47
48
  };
48
49
 
49
- this.renderTabItem = panel => {
50
+ this.renderTabItemInOverflowList = panel => {
50
51
  const {
51
52
  size,
52
53
  type,
@@ -91,6 +92,30 @@ class TabBar extends React.Component {
91
92
  }), panelIcon, panel.tab, closableIcon);
92
93
  };
93
94
 
95
+ this.renderTabItem = panel => {
96
+ const {
97
+ size,
98
+ type,
99
+ deleteTabItem,
100
+ handleKeyDown,
101
+ tabPosition
102
+ } = this.props;
103
+
104
+ const isSelected = this._isActive(panel.itemKey);
105
+
106
+ return /*#__PURE__*/React.createElement(TabItem, Object.assign({
107
+ key: this._getItemKey(panel.itemKey)
108
+ }, panel, {
109
+ selected: isSelected,
110
+ size: size,
111
+ type: type,
112
+ tabPosition: tabPosition,
113
+ handleKeyDown: handleKeyDown,
114
+ deleteTabItem: deleteTabItem,
115
+ onClick: this.handleItemClick
116
+ }));
117
+ };
118
+
94
119
  this.renderTabComponents = list => list.map(panel => this.renderTabItem(panel));
95
120
 
96
121
  this.handleArrowClick = (items, pos) => {
@@ -194,7 +219,7 @@ class TabBar extends React.Component {
194
219
  overflowRenderer: this.renderOverflow,
195
220
  renderMode: "scroll",
196
221
  className: "".concat(cssClasses.TABS_BAR, "-overflow-list"),
197
- visibleItemRenderer: this.renderTabItem
222
+ visibleItemRenderer: this.renderTabItemInOverflowList
198
223
  });
199
224
  };
200
225
 
@@ -0,0 +1,38 @@
1
+ import React, { ReactNode, MouseEvent } from 'react';
2
+ import PropTypes from 'prop-types';
3
+ import { TabType, TabSize, TabPosition } from './interface';
4
+ export interface TabItemProps {
5
+ tab?: ReactNode;
6
+ icon?: ReactNode;
7
+ size?: TabSize;
8
+ type?: TabType;
9
+ tabPosition?: TabPosition;
10
+ selected?: boolean;
11
+ closable?: boolean;
12
+ disabled?: boolean;
13
+ itemKey?: string;
14
+ handleKeyDown?: (event: React.KeyboardEvent, itemKey: string, closable: boolean) => void;
15
+ deleteTabItem?: (tabKey: string, event: MouseEvent<Element>) => void;
16
+ onClick?: (itemKey: string, e: MouseEvent<Element>) => void;
17
+ }
18
+ export default class TabItem extends React.Component<TabItemProps> {
19
+ static propsTypes: {
20
+ tab: PropTypes.Requireable<PropTypes.ReactNodeLike>;
21
+ icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
22
+ size: PropTypes.Requireable<string>;
23
+ type: PropTypes.Requireable<string>;
24
+ tabPosition: PropTypes.Requireable<string>;
25
+ selected: PropTypes.Requireable<boolean>;
26
+ closable: PropTypes.Requireable<boolean>;
27
+ disabled: PropTypes.Requireable<boolean>;
28
+ itemKey: PropTypes.Requireable<string>;
29
+ handleKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
30
+ deleteTabItem: PropTypes.Requireable<(...args: any[]) => any>;
31
+ onClick: PropTypes.Requireable<(...args: any[]) => any>;
32
+ };
33
+ static elementType: string;
34
+ renderIcon(icon: ReactNode): ReactNode;
35
+ handleKeyDown: (event: React.KeyboardEvent) => void;
36
+ handleClick: (e: React.MouseEvent) => void;
37
+ render(): JSX.Element;
38
+ }
@@ -0,0 +1,88 @@
1
+ import React from 'react';
2
+ import PropTypes from 'prop-types';
3
+ import cls from 'classnames';
4
+ import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/tabs/constants';
5
+ import { IconClose } from '@douyinfe/semi-icons';
6
+ export default class TabItem extends React.Component {
7
+ constructor() {
8
+ super(...arguments);
9
+
10
+ this.handleKeyDown = event => {
11
+ const {
12
+ itemKey,
13
+ closable,
14
+ handleKeyDown
15
+ } = this.props;
16
+ handleKeyDown && handleKeyDown(event, itemKey, closable);
17
+ };
18
+
19
+ this.handleClick = e => {
20
+ const {
21
+ itemKey,
22
+ onClick,
23
+ disabled
24
+ } = this.props;
25
+ !disabled && onClick && onClick(itemKey, e);
26
+ };
27
+ }
28
+
29
+ renderIcon(icon) {
30
+ return /*#__PURE__*/React.createElement("span", null, icon);
31
+ }
32
+
33
+ render() {
34
+ const {
35
+ tab,
36
+ size,
37
+ type,
38
+ icon,
39
+ selected,
40
+ closable,
41
+ disabled,
42
+ itemKey,
43
+ deleteTabItem,
44
+ tabPosition
45
+ } = this.props;
46
+ const panelIcon = icon ? this.renderIcon(icon) : null;
47
+ const className = cls(cssClasses.TABS_TAB, "".concat(cssClasses.TABS_TAB, "-").concat(type), "".concat(cssClasses.TABS_TAB, "-").concat(tabPosition), "".concat(cssClasses.TABS_TAB, "-single"), {
48
+ [cssClasses.TABS_TAB_ACTIVE]: selected,
49
+ [cssClasses.TABS_TAB_DISABLED]: disabled,
50
+ ["".concat(cssClasses.TABS_TAB, "-small")]: size === 'small',
51
+ ["".concat(cssClasses.TABS_TAB, "-medium")]: size === 'medium'
52
+ });
53
+ const closableIcon = type === 'card' && closable ? /*#__PURE__*/React.createElement(IconClose, {
54
+ "aria-label": "Close",
55
+ role: "button",
56
+ className: "".concat(cssClasses.TABS_TAB, "-icon-close"),
57
+ onClick: e => deleteTabItem(itemKey, e)
58
+ }) : null;
59
+ return /*#__PURE__*/React.createElement("div", {
60
+ role: "tab",
61
+ id: "semiTab".concat(itemKey),
62
+ "data-tabkey": "semiTab".concat(itemKey),
63
+ "aria-controls": "semiTabPanel".concat(itemKey),
64
+ "aria-disabled": disabled ? 'true' : 'false',
65
+ "aria-selected": selected ? 'true' : 'false',
66
+ tabIndex: selected ? 0 : -1,
67
+ onKeyDown: this.handleKeyDown,
68
+ onClick: this.handleClick,
69
+ className: className
70
+ }, panelIcon, tab, closableIcon);
71
+ }
72
+
73
+ }
74
+ TabItem.propsTypes = {
75
+ tab: PropTypes.node,
76
+ icon: PropTypes.node,
77
+ size: PropTypes.oneOf(strings.SIZE),
78
+ type: PropTypes.oneOf(strings.TYPE_MAP),
79
+ tabPosition: PropTypes.oneOf(strings.POSITION_MAP),
80
+ selected: PropTypes.bool,
81
+ closable: PropTypes.bool,
82
+ disabled: PropTypes.bool,
83
+ itemKey: PropTypes.string,
84
+ handleKeyDown: PropTypes.func,
85
+ deleteTabItem: PropTypes.func,
86
+ onClick: PropTypes.func
87
+ };
88
+ TabItem.elementType = 'TabItem';
@@ -4,6 +4,7 @@ import TabsFoundation, { TabsAdapter } from '@douyinfe/semi-foundation/lib/es/ta
4
4
  import BaseComponent from '../_base/baseComponent';
5
5
  import '@douyinfe/semi-foundation/lib/es/tabs/tabs.css';
6
6
  import TabPane from './TabPane';
7
+ import TabItem from './TabItem';
7
8
  import { PlainTab, TabsProps } from './interface';
8
9
  export * from './interface';
9
10
  export interface TabsState {
@@ -14,6 +15,7 @@ export interface TabsState {
14
15
  }
15
16
  declare class Tabs extends BaseComponent<TabsProps, TabsState> {
16
17
  static TabPane: typeof TabPane;
18
+ static TabItem: typeof TabItem;
17
19
  static propTypes: {
18
20
  activeKey: PropTypes.Requireable<string>;
19
21
  className: PropTypes.Requireable<string>;
@@ -23,6 +23,7 @@ import BaseComponent from '../_base/baseComponent';
23
23
  import '@douyinfe/semi-foundation/lib/es/tabs/tabs.css';
24
24
  import TabBar from './TabBar';
25
25
  import TabPane from './TabPane';
26
+ import TabItem from './TabItem';
26
27
  import TabsContext from './tabs-context';
27
28
  const panePickKeys = ['className', 'style', 'disabled', 'itemKey', 'tab', 'icon'];
28
29
  export * from './interface';
@@ -335,6 +336,7 @@ class Tabs extends BaseComponent {
335
336
  }
336
337
 
337
338
  Tabs.TabPane = TabPane;
339
+ Tabs.TabItem = TabItem;
338
340
  Tabs.propTypes = {
339
341
  activeKey: PropTypes.string,
340
342
  className: PropTypes.string,
@@ -56,6 +56,7 @@ export interface TagInputState {
56
56
  focusing?: boolean;
57
57
  hovering?: boolean;
58
58
  active?: boolean;
59
+ entering?: boolean;
59
60
  }
60
61
  declare class TagInput extends BaseComponent<TagInputProps, TagInputState> {
61
62
  static propTypes: {
@@ -91,7 +92,7 @@ declare class TagInput extends BaseComponent<TagInputProps, TagInputState> {
91
92
  onAdd: PropTypes.Requireable<(...args: any[]) => any>;
92
93
  onRemove: PropTypes.Requireable<(...args: any[]) => any>;
93
94
  onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
94
- size: PropTypes.Requireable<"default" | "small" | "large">;
95
+ size: PropTypes.Requireable<"small" | "default" | "large">;
95
96
  validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">;
96
97
  prefix: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
97
98
  suffix: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
@@ -151,6 +152,8 @@ declare class TagInput extends BaseComponent<TagInputProps, TagInputState> {
151
152
  renderTags(): JSX.Element;
152
153
  blur(): void;
153
154
  focus(): void;
155
+ handleInputCompositionStart: (e: any) => void;
156
+ handleInputCompositionEnd: (e: any) => void;
154
157
  render(): JSX.Element;
155
158
  }
156
159
  export default TagInput;
@@ -157,13 +157,22 @@ class TagInput extends BaseComponent {
157
157
  this.foundation.handleSortEnd(callbackProps);
158
158
  };
159
159
 
160
+ this.handleInputCompositionStart = e => {
161
+ this.foundation.handleInputCompositionStart(e);
162
+ };
163
+
164
+ this.handleInputCompositionEnd = e => {
165
+ this.foundation.handleInputCompositionEnd(e);
166
+ };
167
+
160
168
  this.foundation = new TagInputFoundation(this.adapter);
161
169
  this.state = {
162
170
  tagsArray: props.defaultValue || [],
163
171
  inputValue: '',
164
172
  focusing: false,
165
173
  hovering: false,
166
- active: false
174
+ active: false,
175
+ entering: false
167
176
  };
168
177
  this.inputRef = /*#__PURE__*/React.createRef();
169
178
  this.tagInputRef = /*#__PURE__*/React.createRef();
@@ -239,6 +248,11 @@ class TagInput extends BaseComponent {
239
248
  active
240
249
  });
241
250
  },
251
+ setEntering: entering => {
252
+ this.setState({
253
+ entering
254
+ });
255
+ },
242
256
  getClickOutsideHandler: () => {
243
257
  return this.clickOutsideHandler;
244
258
  },
@@ -528,7 +542,9 @@ class TagInput extends BaseComponent {
528
542
  },
529
543
  onFocus: e => {
530
544
  this.handleInputFocus(e);
531
- }
545
+ },
546
+ onCompositionStart: this.handleInputCompositionStart,
547
+ onCompositionEnd: this.handleInputCompositionEnd
532
548
  })), this.renderClearBtn(), this.renderSuffix())
533
549
  );
534
550
  }
@@ -130,7 +130,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
130
130
  secondStep: PropTypes.Requireable<number>;
131
131
  focusOnOpen: PropTypes.Requireable<boolean>;
132
132
  autoFocus: PropTypes.Requireable<boolean>;
133
- size: PropTypes.Requireable<"default" | "small" | "large">;
133
+ size: PropTypes.Requireable<"small" | "default" | "large">;
134
134
  panels: PropTypes.Requireable<PropTypes.InferProps<{
135
135
  panelHeader: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
136
136
  panelFooter: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
@@ -48,7 +48,7 @@ export default class LocaleTimePicker extends React.PureComponent<LocalePickerPr
48
48
  secondStep: import("prop-types").Requireable<number>;
49
49
  focusOnOpen: import("prop-types").Requireable<boolean>;
50
50
  autoFocus: import("prop-types").Requireable<boolean>;
51
- size: import("prop-types").Requireable<"default" | "small" | "large">;
51
+ size: import("prop-types").Requireable<"small" | "default" | "large">;
52
52
  panels: import("prop-types").Requireable<import("prop-types").InferProps<{
53
53
  panelHeader: import("prop-types").Requireable<NonNullable<import("prop-types").ReactNodeLike>>;
54
54
  panelFooter: import("prop-types").Requireable<NonNullable<import("prop-types").ReactNodeLike>>;
@@ -90,7 +90,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
90
90
  getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
91
91
  mouseEnterDelay: PropTypes.Requireable<number>;
92
92
  mouseLeaveDelay: PropTypes.Requireable<number>;
93
- trigger: PropTypes.Validator<NonNullable<"hover" | "focus" | "click" | "custom">>;
93
+ trigger: PropTypes.Validator<NonNullable<"click" | "focus" | "hover" | "custom">>;
94
94
  className: PropTypes.Requireable<string>;
95
95
  wrapperClassName: PropTypes.Requireable<string>;
96
96
  clickToHide: PropTypes.Requireable<boolean>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@douyinfe/semi-ui",
3
- "version": "2.26.0-beta.0",
3
+ "version": "2.27.0-alpha.0",
4
4
  "description": "",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es/index.js",
@@ -17,12 +17,12 @@
17
17
  "lib/*"
18
18
  ],
19
19
  "dependencies": {
20
- "@douyinfe/semi-animation": "2.26.0-beta.0",
21
- "@douyinfe/semi-animation-react": "2.26.0-beta.0",
22
- "@douyinfe/semi-foundation": "2.26.0-beta.0",
23
- "@douyinfe/semi-icons": "2.26.0-beta.0",
24
- "@douyinfe/semi-illustrations": "2.26.0-beta.0",
25
- "@douyinfe/semi-theme-default": "2.26.0-beta.0",
20
+ "@douyinfe/semi-animation": "2.27.0-alpha.0",
21
+ "@douyinfe/semi-animation-react": "2.27.0-alpha.0",
22
+ "@douyinfe/semi-foundation": "2.27.0-alpha.0",
23
+ "@douyinfe/semi-icons": "2.27.0-alpha.0",
24
+ "@douyinfe/semi-illustrations": "2.27.0-alpha.0",
25
+ "@douyinfe/semi-theme-default": "2.27.0-alpha.0",
26
26
  "async-validator": "^3.5.0",
27
27
  "classnames": "^2.2.6",
28
28
  "copy-text-to-clipboard": "^2.1.1",
@@ -69,7 +69,7 @@
69
69
  ],
70
70
  "author": "",
71
71
  "license": "MIT",
72
- "gitHead": "97f744558e96e39201b54219f82ce64da7163b81",
72
+ "gitHead": "3e818e5687041820aab8c5094c3b6fae7c8f2049",
73
73
  "devDependencies": {
74
74
  "@babel/plugin-proposal-decorators": "^7.15.8",
75
75
  "@babel/plugin-transform-runtime": "^7.15.8",