@douyinfe/semi-ui 2.13.0 → 2.14.0-beta.1

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 (209) hide show
  1. package/autoComplete/_story/CustomTrigger/index.jsx +1 -1
  2. package/avatar/_story/avatar.stories.js +62 -5
  3. package/avatar/avatarGroup.tsx +16 -4
  4. package/avatar/index.tsx +88 -17
  5. package/backtop/index.tsx +11 -7
  6. package/badge/index.tsx +1 -1
  7. package/banner/index.tsx +5 -5
  8. package/breadcrumb/index.tsx +5 -3
  9. package/button/Button.tsx +10 -8
  10. package/calendar/_story/calendar.stories.js +125 -1
  11. package/card/index.tsx +43 -41
  12. package/carousel/CarouselArrow.tsx +2 -0
  13. package/carousel/index.tsx +1 -0
  14. package/cascader/_story/cascader.stories.js +21 -0
  15. package/cascader/index.tsx +99 -120
  16. package/cascader/item.tsx +1 -1
  17. package/checkbox/checkbox.tsx +13 -2
  18. package/collapsible/index.tsx +8 -1
  19. package/datePicker/dateInput.tsx +1 -0
  20. package/datePicker/datePicker.tsx +13 -5
  21. package/dist/css/semi.css +51 -35
  22. package/dist/css/semi.min.css +1 -1
  23. package/dist/umd/semi-ui.js +933 -530
  24. package/dist/umd/semi-ui.js.map +1 -1
  25. package/dist/umd/semi-ui.min.js +1 -1
  26. package/dist/umd/semi-ui.min.js.map +1 -1
  27. package/divider/index.tsx +8 -4
  28. package/dropdown/index.tsx +1 -1
  29. package/empty/index.tsx +13 -5
  30. package/form/hoc/withField.tsx +1 -1
  31. package/form/label.tsx +1 -1
  32. package/grid/col.tsx +1 -1
  33. package/grid/row.tsx +1 -1
  34. package/iconButton/index.tsx +2 -1
  35. package/input/_story/input.stories.js +32 -3
  36. package/input/index.tsx +45 -23
  37. package/input/inputGroup.tsx +3 -1
  38. package/input/textarea.tsx +2 -14
  39. package/lib/cjs/_base/base.css +14 -14
  40. package/lib/cjs/avatar/avatarGroup.d.ts +1 -1
  41. package/lib/cjs/avatar/avatarGroup.js +36 -9
  42. package/lib/cjs/avatar/index.d.ts +5 -0
  43. package/lib/cjs/avatar/index.js +121 -41
  44. package/lib/cjs/backtop/index.js +2 -1
  45. package/lib/cjs/badge/index.js +2 -1
  46. package/lib/cjs/banner/index.js +9 -4
  47. package/lib/cjs/breadcrumb/index.js +4 -3
  48. package/lib/cjs/button/Button.js +13 -3
  49. package/lib/cjs/card/index.js +10 -5
  50. package/lib/cjs/carousel/CarouselArrow.js +6 -2
  51. package/lib/cjs/carousel/index.js +2 -1
  52. package/lib/cjs/cascader/index.js +11 -6
  53. package/lib/cjs/cascader/item.js +2 -1
  54. package/lib/cjs/checkbox/checkbox.js +6 -2
  55. package/lib/cjs/collapsible/index.js +2 -1
  56. package/lib/cjs/datePicker/dateInput.js +2 -1
  57. package/lib/cjs/datePicker/datePicker.js +4 -2
  58. package/lib/cjs/divider/index.js +2 -1
  59. package/lib/cjs/dropdown/index.js +2 -1
  60. package/lib/cjs/empty/index.js +8 -4
  61. package/lib/cjs/form/baseForm.d.ts +1 -1
  62. package/lib/cjs/form/field.d.ts +1 -1
  63. package/lib/cjs/form/hoc/withField.js +2 -1
  64. package/lib/cjs/form/label.js +2 -1
  65. package/lib/cjs/grid/col.js +2 -1
  66. package/lib/cjs/grid/row.js +2 -1
  67. package/lib/cjs/iconButton/index.js +3 -1
  68. package/lib/cjs/input/index.d.ts +0 -1
  69. package/lib/cjs/input/index.js +41 -36
  70. package/lib/cjs/input/inputGroup.js +2 -3
  71. package/lib/cjs/input/textarea.js +8 -15
  72. package/lib/cjs/list/index.js +6 -3
  73. package/lib/cjs/modal/ConfirmModal.js +2 -1
  74. package/lib/cjs/modal/Modal.js +6 -2
  75. package/lib/cjs/modal/ModalContent.js +13 -6
  76. package/lib/cjs/notification/notice.js +6 -3
  77. package/lib/cjs/pagination/index.js +4 -2
  78. package/lib/cjs/popconfirm/index.js +6 -3
  79. package/lib/cjs/radio/radio.d.ts +4 -0
  80. package/lib/cjs/radio/radio.js +32 -9
  81. package/lib/cjs/radio/radioInner.d.ts +6 -0
  82. package/lib/cjs/radio/radioInner.js +13 -4
  83. package/lib/cjs/rating/item.js +2 -1
  84. package/lib/cjs/scrollList/index.js +6 -3
  85. package/lib/cjs/select/index.js +10 -4
  86. package/lib/cjs/select/option.js +2 -1
  87. package/lib/cjs/sideSheet/SideSheetContent.js +6 -3
  88. package/lib/cjs/skeleton/index.js +3 -1
  89. package/lib/cjs/space/index.js +2 -1
  90. package/lib/cjs/spin/index.js +7 -3
  91. package/lib/cjs/switch/index.js +6 -4
  92. package/lib/cjs/table/Table.js +6 -3
  93. package/lib/cjs/tabs/TabBar.js +2 -1
  94. package/lib/cjs/tabs/TabPane.js +5 -2
  95. package/lib/cjs/tagInput/index.js +25 -15
  96. package/lib/cjs/timePicker/Combobox.js +3 -1
  97. package/lib/cjs/timePicker/TimePicker.js +2 -0
  98. package/lib/cjs/toast/toast.js +6 -3
  99. package/lib/cjs/tooltip/index.js +6 -1
  100. package/lib/cjs/transfer/index.js +2 -1
  101. package/lib/cjs/tree/treeNode.js +2 -1
  102. package/lib/cjs/treeSelect/index.js +10 -3
  103. package/lib/cjs/typography/base.js +2 -1
  104. package/lib/cjs/typography/title.d.ts +1 -1
  105. package/lib/cjs/upload/index.d.ts +1 -1
  106. package/lib/cjs/upload/index.js +13 -6
  107. package/lib/es/_base/base.css +14 -14
  108. package/lib/es/avatar/avatarGroup.d.ts +1 -1
  109. package/lib/es/avatar/avatarGroup.js +37 -9
  110. package/lib/es/avatar/index.d.ts +5 -0
  111. package/lib/es/avatar/index.js +119 -38
  112. package/lib/es/backtop/index.js +2 -1
  113. package/lib/es/badge/index.js +2 -1
  114. package/lib/es/banner/index.js +9 -4
  115. package/lib/es/breadcrumb/index.js +4 -3
  116. package/lib/es/button/Button.js +11 -3
  117. package/lib/es/card/index.js +10 -5
  118. package/lib/es/carousel/CarouselArrow.js +6 -2
  119. package/lib/es/carousel/index.js +2 -1
  120. package/lib/es/cascader/index.js +11 -6
  121. package/lib/es/cascader/item.js +2 -1
  122. package/lib/es/checkbox/checkbox.js +6 -2
  123. package/lib/es/collapsible/index.js +2 -1
  124. package/lib/es/datePicker/dateInput.js +2 -1
  125. package/lib/es/datePicker/datePicker.js +4 -2
  126. package/lib/es/divider/index.js +2 -1
  127. package/lib/es/dropdown/index.js +2 -1
  128. package/lib/es/empty/index.js +8 -4
  129. package/lib/es/form/baseForm.d.ts +1 -1
  130. package/lib/es/form/field.d.ts +1 -1
  131. package/lib/es/form/hoc/withField.js +2 -1
  132. package/lib/es/form/label.js +2 -1
  133. package/lib/es/grid/col.js +2 -1
  134. package/lib/es/grid/row.js +2 -1
  135. package/lib/es/iconButton/index.js +3 -1
  136. package/lib/es/input/index.d.ts +0 -1
  137. package/lib/es/input/index.js +41 -36
  138. package/lib/es/input/inputGroup.js +2 -3
  139. package/lib/es/input/textarea.js +8 -15
  140. package/lib/es/list/index.js +6 -3
  141. package/lib/es/modal/ConfirmModal.js +2 -1
  142. package/lib/es/modal/Modal.js +6 -2
  143. package/lib/es/modal/ModalContent.js +13 -6
  144. package/lib/es/notification/notice.js +6 -3
  145. package/lib/es/pagination/index.js +4 -2
  146. package/lib/es/popconfirm/index.js +6 -3
  147. package/lib/es/radio/radio.d.ts +4 -0
  148. package/lib/es/radio/radio.js +32 -9
  149. package/lib/es/radio/radioInner.d.ts +6 -0
  150. package/lib/es/radio/radioInner.js +13 -4
  151. package/lib/es/rating/item.js +2 -1
  152. package/lib/es/scrollList/index.js +6 -3
  153. package/lib/es/select/index.js +10 -4
  154. package/lib/es/select/option.js +2 -1
  155. package/lib/es/sideSheet/SideSheetContent.js +6 -3
  156. package/lib/es/skeleton/index.js +3 -1
  157. package/lib/es/space/index.js +2 -1
  158. package/lib/es/spin/index.js +7 -3
  159. package/lib/es/switch/index.js +6 -4
  160. package/lib/es/table/Table.js +6 -3
  161. package/lib/es/tabs/TabBar.js +2 -1
  162. package/lib/es/tabs/TabPane.js +5 -2
  163. package/lib/es/tagInput/index.js +25 -15
  164. package/lib/es/timePicker/Combobox.js +3 -1
  165. package/lib/es/timePicker/TimePicker.js +2 -0
  166. package/lib/es/toast/toast.js +6 -3
  167. package/lib/es/tooltip/index.js +6 -1
  168. package/lib/es/transfer/index.js +2 -1
  169. package/lib/es/tree/treeNode.js +2 -1
  170. package/lib/es/treeSelect/index.js +10 -3
  171. package/lib/es/typography/base.js +2 -1
  172. package/lib/es/typography/title.d.ts +1 -1
  173. package/lib/es/upload/index.d.ts +1 -1
  174. package/lib/es/upload/index.js +13 -6
  175. package/list/index.tsx +16 -4
  176. package/modal/ConfirmModal.tsx +1 -1
  177. package/modal/Modal.tsx +2 -0
  178. package/modal/ModalContent.tsx +27 -14
  179. package/notification/notice.tsx +16 -4
  180. package/package.json +8 -8
  181. package/pagination/index.tsx +16 -2
  182. package/popconfirm/index.tsx +11 -3
  183. package/radio/_story/radio.stories.js +9 -6
  184. package/radio/radio.tsx +37 -7
  185. package/radio/radioInner.tsx +11 -2
  186. package/rating/item.tsx +1 -1
  187. package/scrollList/index.tsx +19 -3
  188. package/select/index.tsx +13 -4
  189. package/select/option.tsx +5 -1
  190. package/sideSheet/SideSheetContent.tsx +3 -3
  191. package/skeleton/index.tsx +1 -1
  192. package/space/index.tsx +1 -1
  193. package/spin/index.tsx +15 -9
  194. package/switch/index.tsx +9 -14
  195. package/table/Table.tsx +5 -3
  196. package/tabs/TabBar.tsx +1 -1
  197. package/tabs/TabPane.tsx +9 -4
  198. package/tagInput/index.tsx +23 -4
  199. package/timePicker/Combobox.tsx +6 -1
  200. package/timePicker/TimePicker.tsx +1 -0
  201. package/toast/toast.tsx +3 -3
  202. package/tooltip/index.tsx +4 -1
  203. package/transfer/index.tsx +1 -0
  204. package/tree/treeNode.tsx +1 -1
  205. package/treeSelect/_story/treeSelect.stories.js +161 -2
  206. package/treeSelect/index.tsx +17 -3
  207. package/typography/base.tsx +1 -1
  208. package/upload/index.tsx +107 -38
  209. package/yarn-error.log +26235 -0
@@ -43,6 +43,14 @@ class Radio extends BaseComponent {
43
43
  this.foundation.setHover(false);
44
44
  };
45
45
 
46
+ this.handleFocusVisible = event => {
47
+ this.foundation.handleFocusVisible(event);
48
+ };
49
+
50
+ this.handleBlur = event => {
51
+ this.foundation.handleBlur();
52
+ };
53
+
46
54
  this.state = {
47
55
  hover: false,
48
56
  addonId: props.addonId,
@@ -72,6 +80,11 @@ class Radio extends BaseComponent {
72
80
  prefix: 'extra'
73
81
  })
74
82
  });
83
+ },
84
+ setFocusVisible: focusVisible => {
85
+ this.setState({
86
+ focusVisible
87
+ });
75
88
  }
76
89
  });
77
90
  }
@@ -105,13 +118,15 @@ class Radio extends BaseComponent {
105
118
  extra,
106
119
  mode,
107
120
  type,
108
- value: propValue
121
+ value: propValue,
122
+ name
109
123
  } = this.props;
110
124
  let realChecked, isDisabled, realMode, isButtonRadioGroup, isCardRadioGroup, isPureCardRadioGroup, isButtonRadioComponent, buttonSize, realPrefixCls;
111
125
  const {
112
126
  hover: isHover,
113
127
  addonId,
114
- extraId
128
+ extraId,
129
+ focusVisible
115
130
  } = this.state;
116
131
  let props = {};
117
132
 
@@ -138,6 +153,7 @@ class Radio extends BaseComponent {
138
153
 
139
154
  const isButtonRadio = typeof isButtonRadioGroup === 'undefined' ? isButtonRadioComponent : isButtonRadioGroup;
140
155
  const prefix = realPrefixCls || css.PREFIX;
156
+ const focusOuter = isCardRadioGroup || isPureCardRadioGroup || isButtonRadio;
141
157
  const wrapper = cls(prefix, {
142
158
  ["".concat(prefix, "-disabled")]: isDisabled,
143
159
  ["".concat(prefix, "-checked")]: realChecked,
@@ -150,25 +166,29 @@ class Radio extends BaseComponent {
150
166
  ["".concat(prefix, "-cardRadioGroup_checked")]: isCardRadioGroup && realChecked && !isDisabled,
151
167
  ["".concat(prefix, "-cardRadioGroup_checked_disabled")]: isCardRadioGroup && realChecked && isDisabled,
152
168
  ["".concat(prefix, "-cardRadioGroup_hover")]: isCardRadioGroup && !realChecked && isHover && !isDisabled,
153
- [className]: Boolean(className)
169
+ [className]: Boolean(className),
170
+ ["".concat(prefix, "-focus")]: focusVisible && (isCardRadioGroup || isPureCardRadioGroup)
154
171
  });
155
- const name = this.isInGroup() && this.context.radioGroup.name;
172
+ const groupName = this.isInGroup() && this.context.radioGroup.name;
156
173
  const addonCls = cls({
157
174
  ["".concat(prefix, "-addon")]: !isButtonRadio,
158
175
  ["".concat(prefix, "-addon-buttonRadio")]: isButtonRadio,
159
176
  ["".concat(prefix, "-addon-buttonRadio-checked")]: isButtonRadio && realChecked,
160
177
  ["".concat(prefix, "-addon-buttonRadio-disabled")]: isButtonRadio && isDisabled,
161
178
  ["".concat(prefix, "-addon-buttonRadio-hover")]: isButtonRadio && !realChecked && !isDisabled && isHover,
162
- [_concatInstanceProperty(_context3 = "".concat(prefix, "-addon-buttonRadio-")).call(_context3, buttonSize)]: isButtonRadio && buttonSize
179
+ [_concatInstanceProperty(_context3 = "".concat(prefix, "-addon-buttonRadio-")).call(_context3, buttonSize)]: isButtonRadio && buttonSize,
180
+ ["".concat(prefix, "-focus")]: focusVisible && isButtonRadio
163
181
  }, addonClassName);
164
182
 
165
183
  const renderContent = () => /*#__PURE__*/React.createElement(React.Fragment, null, children ? /*#__PURE__*/React.createElement("span", {
166
184
  className: addonCls,
167
185
  style: addonStyle,
168
- id: addonId
186
+ id: addonId,
187
+ "x-semi-prop": "children"
169
188
  }, children) : null, extra && !isButtonRadio ? /*#__PURE__*/React.createElement("div", {
170
189
  className: "".concat(prefix, "-extra"),
171
- id: extraId
190
+ id: extraId,
191
+ "x-semi-prop": "extra"
172
192
  }, extra) : null);
173
193
 
174
194
  return /*#__PURE__*/React.createElement("label", {
@@ -178,7 +198,7 @@ class Radio extends BaseComponent {
178
198
  onMouseLeave: this.handleMouseLeave
179
199
  }, /*#__PURE__*/React.createElement(RadioInner, _Object$assign({}, this.props, props, {
180
200
  mode: realMode,
181
- name: name,
201
+ name: name !== null && name !== void 0 ? name : groupName,
182
202
  isButtonRadio: isButtonRadio,
183
203
  isPureCardRadioGroup: isPureCardRadioGroup,
184
204
  onChange: this.onChange,
@@ -186,7 +206,10 @@ class Radio extends BaseComponent {
186
206
  this.radioEntity = ref;
187
207
  },
188
208
  addonId: children && addonId,
189
- extraId: extra && extraId
209
+ extraId: extra && extraId,
210
+ focusInner: focusVisible && !focusOuter,
211
+ onInputFocus: this.handleFocusVisible,
212
+ onInputBlur: this.handleBlur
190
213
  })), isCardRadioGroup ? /*#__PURE__*/React.createElement("div", {
191
214
  className: "".concat(prefix, "-isCardRadioGroup_content")
192
215
  }, renderContent()) : renderContent());
@@ -17,6 +17,9 @@ export interface RadioInnerProps extends BaseProps {
17
17
  addonId?: string;
18
18
  extraId?: string;
19
19
  'aria-label'?: React.AriaAttributes['aria-label'];
20
+ focusInner?: boolean;
21
+ onInputFocus?: (e: any) => void;
22
+ onInputBlur?: (e: any) => void;
20
23
  }
21
24
  interface RadioInnerState {
22
25
  checked?: boolean;
@@ -30,6 +33,9 @@ declare class RadioInner extends BaseComponent<RadioInnerProps, RadioInnerState>
30
33
  onChange: PropTypes.Requireable<(...args: any[]) => any>;
31
34
  mode: PropTypes.Requireable<string>;
32
35
  'aria-label': PropTypes.Requireable<string>;
36
+ focusInner: PropTypes.Requireable<boolean>;
37
+ onInputFocus: PropTypes.Requireable<(...args: any[]) => any>;
38
+ onInputBlur: PropTypes.Requireable<(...args: any[]) => any>;
33
39
  };
34
40
  static defaultProps: {
35
41
  onChange: (...args: any[]) => void;
@@ -71,7 +71,10 @@ class RadioInner extends BaseComponent {
71
71
  isPureCardRadioGroup,
72
72
  addonId,
73
73
  extraId,
74
- 'aria-label': ariaLabel
74
+ 'aria-label': ariaLabel,
75
+ focusInner,
76
+ onInputFocus,
77
+ onInputBlur
75
78
  } = this.props;
76
79
  const {
77
80
  checked
@@ -84,6 +87,8 @@ class RadioInner extends BaseComponent {
84
87
  ["".concat(prefix, "-inner-pureCardRadio")]: isPureCardRadioGroup
85
88
  });
86
89
  const inner = classnames({
90
+ ["".concat(prefix, "-focus")]: focusInner,
91
+ ["".concat(prefix, "-focus-border")]: focusInner && !checked,
87
92
  ["".concat(prefix, "-inner-display")]: !isButtonRadio
88
93
  });
89
94
  return /*#__PURE__*/React.createElement("span", {
@@ -92,7 +97,6 @@ class RadioInner extends BaseComponent {
92
97
  ref: ref => {
93
98
  this.inputEntity = ref;
94
99
  },
95
- // eslint-disable-next-line jsx-a11y/no-autofocus
96
100
  autoFocus: autoFocus,
97
101
  type: mode === 'advanced' ? 'checkbox' : 'radio',
98
102
  checked: Boolean(checked),
@@ -101,7 +105,9 @@ class RadioInner extends BaseComponent {
101
105
  name: name,
102
106
  "aria-label": ariaLabel,
103
107
  "aria-labelledby": addonId,
104
- "aria-describedby": extraId
108
+ "aria-describedby": extraId,
109
+ onFocus: onInputFocus,
110
+ onBlur: onInputBlur
105
111
  }), /*#__PURE__*/React.createElement("span", {
106
112
  className: inner
107
113
  }, checked ? /*#__PURE__*/React.createElement(IconRadio, null) : null));
@@ -116,7 +122,10 @@ RadioInner.propTypes = {
116
122
  isButtonRadio: PropTypes.bool,
117
123
  onChange: PropTypes.func,
118
124
  mode: PropTypes.oneOf(['advanced', '']),
119
- 'aria-label': PropTypes.string
125
+ 'aria-label': PropTypes.string,
126
+ focusInner: PropTypes.bool,
127
+ onInputFocus: PropTypes.func,
128
+ onInputBlur: PropTypes.func
120
129
  };
121
130
  RadioInner.defaultProps = {
122
131
  onChange: _noop,
@@ -98,7 +98,8 @@ export default class Item extends PureComponent {
98
98
  width: "".concat(firstWidth * 100, "%")
99
99
  }
100
100
  }, content), /*#__PURE__*/React.createElement("div", {
101
- className: "".concat(prefixCls, "-second")
101
+ className: "".concat(prefixCls, "-second"),
102
+ "x-semi-prop": "character"
102
103
  }, content)));
103
104
  }
104
105
 
@@ -35,16 +35,19 @@ class ScrollList extends BaseComponent {
35
35
  }, header ? /*#__PURE__*/React.createElement("div", {
36
36
  className: clsHeader
37
37
  }, /*#__PURE__*/React.createElement("div", {
38
- className: "".concat(clsHeader, "-title")
38
+ className: "".concat(clsHeader, "-title"),
39
+ "x-semi-prop": this.props['x-semi-header-alias'] || "header"
39
40
  }, header), /*#__PURE__*/React.createElement("div", {
40
41
  className: "".concat(clsWrapper, "-line")
41
42
  })) : null, /*#__PURE__*/React.createElement("div", {
42
43
  className: "".concat(clsWrapper, "-body"),
43
44
  style: {
44
45
  height: bodyHeight ? bodyHeight : ''
45
- }
46
+ },
47
+ "x-semi-prop": "children"
46
48
  }, children), footer ? /*#__PURE__*/React.createElement("div", {
47
- className: "".concat(clsWrapper, "-footer")
49
+ className: "".concat(clsWrapper, "-footer"),
50
+ "x-semi-prop": this.props['x-semi-footer-alias'] || "footer"
48
51
  }, footer) : null);
49
52
  }
50
53
 
@@ -426,6 +426,8 @@ class Select extends BaseComponent {
426
426
  e.nativeEvent.stopImmediatePropagation();
427
427
  this.foundation.handleClearClick(e);
428
428
  }
429
+ /* istanbul ignore next */
430
+
429
431
 
430
432
  onClearBtnEnterPress(e) {
431
433
  this.foundation.handleClearBtnEnterPress(e);
@@ -663,7 +665,8 @@ class Select extends BaseComponent {
663
665
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
664
666
  className: contentWrapperCls
665
667
  }, /*#__PURE__*/React.createElement("span", {
666
- className: spanCls
668
+ className: spanCls,
669
+ "x-semi-prop": "placeholder"
667
670
  }, renderText || renderText === 0 ? renderText : placeholder), filterable && showInput ? this.renderInput() : null));
668
671
  }
669
672
 
@@ -825,7 +828,8 @@ class Select extends BaseComponent {
825
828
  ["".concat(prefixcls, "-suffix-icon")]: isSemiIcon(suffix)
826
829
  });
827
830
  return /*#__PURE__*/React.createElement("div", {
828
- className: suffixWrapperCls
831
+ className: suffixWrapperCls,
832
+ "x-semi-prop": "suffix"
829
833
  }, suffix);
830
834
  }
831
835
 
@@ -844,7 +848,8 @@ class Select extends BaseComponent {
844
848
  });
845
849
  return /*#__PURE__*/React.createElement("div", {
846
850
  className: prefixWrapperCls,
847
- id: insetLabelId
851
+ id: insetLabelId,
852
+ "x-semi-prop": "prefix,insetLabel"
848
853
  }, labelNode);
849
854
  }
850
855
 
@@ -896,7 +901,8 @@ class Select extends BaseComponent {
896
901
  });
897
902
  const showClear = this.props.showClear && (selections.size || inputValue) && !disabled && (isHovering || isOpen);
898
903
  const arrowContent = showArrow ? /*#__PURE__*/React.createElement("div", {
899
- className: "".concat(prefixcls, "-arrow")
904
+ className: "".concat(prefixcls, "-arrow"),
905
+ "x-semi-prop": "arrowIcon"
900
906
  }, arrowIcon) : /*#__PURE__*/React.createElement("div", {
901
907
  className: "".concat(prefixcls, "-arrow-empty")
902
908
  });
@@ -100,7 +100,8 @@ class Option extends PureComponent {
100
100
  return /*#__PURE__*/React.createElement(LocaleConsumer, {
101
101
  componentName: "Select"
102
102
  }, locale => /*#__PURE__*/React.createElement("div", {
103
- className: optionClassName
103
+ className: optionClassName,
104
+ "x-semi-prop": "emptyContent"
104
105
  }, emptyContent || locale.emptyText));
105
106
  } // Since there are empty, locale and other logic, the custom renderOptionItem is directly converged to the internal option instead of being placed in Select/index
106
107
 
@@ -79,7 +79,8 @@ export default class SideSheetContent extends React.PureComponent {
79
79
 
80
80
  if (title) {
81
81
  header = /*#__PURE__*/React.createElement("div", {
82
- className: "".concat(prefixCls, "-title")
82
+ className: "".concat(prefixCls, "-title"),
83
+ "x-semi-prop": "title"
83
84
  }, this.props.title);
84
85
  }
85
86
 
@@ -134,9 +135,11 @@ export default class SideSheetContent extends React.PureComponent {
134
135
  className: "".concat(prefixCls, "-content")
135
136
  }, header, /*#__PURE__*/React.createElement("div", {
136
137
  className: "".concat(prefixCls, "-body"),
137
- style: props.bodyStyle
138
+ style: props.bodyStyle,
139
+ "x-semi-prop": "children"
138
140
  }, props.children), props.footer ? /*#__PURE__*/React.createElement("div", {
139
- className: "".concat(prefixCls, "-footer")
141
+ className: "".concat(prefixCls, "-footer"),
142
+ "x-semi-prop": "footer"
140
143
  }, props.footer) : null));
141
144
  return dialogElement;
142
145
  }
@@ -43,7 +43,9 @@ class Skeleton extends PureComponent {
43
43
  content = /*#__PURE__*/React.createElement("div", _Object$assign({
44
44
  className: skCls,
45
45
  style: style
46
- }, others), placeholder);
46
+ }, others, {
47
+ "x-semi-prop": "placeholder"
48
+ }), placeholder);
47
49
  } else {
48
50
  content = children;
49
51
  }
@@ -66,7 +66,8 @@ class Space extends PureComponent {
66
66
  const childrenNodes = flatten(children);
67
67
  return /*#__PURE__*/React.createElement("div", {
68
68
  className: classNames,
69
- style: realStyle
69
+ style: realStyle,
70
+ "x-semi-prop": "children"
70
71
  }, childrenNodes);
71
72
  }
72
73
 
@@ -67,8 +67,11 @@ class Spin extends BaseComponent {
67
67
  return loading ? /*#__PURE__*/React.createElement("div", {
68
68
  className: "".concat(prefixCls, "-wrapper")
69
69
  }, indicator ? /*#__PURE__*/React.createElement("div", {
70
- className: spinIconCls
71
- }, indicator) : /*#__PURE__*/React.createElement(SpinIcon, null), tip ? /*#__PURE__*/React.createElement("div", null, tip) : null) : null;
70
+ className: spinIconCls,
71
+ "x-semi-prop": "indicator"
72
+ }, indicator) : /*#__PURE__*/React.createElement(SpinIcon, null), tip ? /*#__PURE__*/React.createElement("div", {
73
+ "x-semi-prop": "tip"
74
+ }, tip) : null) : null;
72
75
  }
73
76
 
74
77
  render() {
@@ -95,7 +98,8 @@ class Spin extends BaseComponent {
95
98
  style: style
96
99
  }, this.renderSpin(), /*#__PURE__*/React.createElement("div", {
97
100
  className: "".concat(prefixCls, "-children"),
98
- style: childStyle
101
+ style: childStyle,
102
+ "x-semi-prop": "children"
99
103
  }, children));
100
104
  }
101
105
 
@@ -119,19 +119,21 @@ class Switch extends BaseComponent {
119
119
  className: cssClasses.KNOB,
120
120
  "aria-hidden": true
121
121
  }), showCheckedText ? /*#__PURE__*/React.createElement("div", {
122
- className: cssClasses.CHECKED_TEXT
122
+ className: cssClasses.CHECKED_TEXT,
123
+ "x-semi-prop": "checkedText"
123
124
  }, checkedText) : null, showUncheckedText ? /*#__PURE__*/React.createElement("div", {
124
- className: cssClasses.UNCHECKED_TEXT
125
+ className: cssClasses.UNCHECKED_TEXT,
126
+ "x-semi-prop": "uncheckedText"
125
127
  }, uncheckedText) : null, /*#__PURE__*/React.createElement("input", _Object$assign({}, switchProps, {
126
128
  ref: this.switchRef,
127
129
  id: id,
128
- role: 'switch',
130
+ role: "switch",
129
131
  "aria-checked": nativeControlChecked,
130
132
  "aria-invalid": this.props['aria-invalid'],
131
133
  "aria-errormessage": this.props['aria-errormessage'],
132
134
  "aria-label": this.props['aria-label'],
133
135
  "aria-labelledby": this.props['aria-labelledby'],
134
- "aria-describedby": this.props["aria-describedby"],
136
+ "aria-describedby": this.props['aria-describedby'],
135
137
  "aria-disabled": this.props['disabled'],
136
138
  onChange: e => this.foundation.handleChange(e.target.checked, e),
137
139
  onFocus: e => this.handleFocusVisible(e),
@@ -582,7 +582,8 @@ class Table extends BaseComponent {
582
582
  }
583
583
 
584
584
  return /*#__PURE__*/isValidElement(title) || typeof title === 'string' ? /*#__PURE__*/React.createElement("div", {
585
- className: "".concat(prefixCls, "-title")
585
+ className: "".concat(prefixCls, "-title"),
586
+ "x-semi-prop": "title"
586
587
  }, title) : null;
587
588
  };
588
589
 
@@ -607,7 +608,8 @@ class Table extends BaseComponent {
607
608
  }, (locale, localeCode) => /*#__PURE__*/React.createElement("div", {
608
609
  className: wrapCls
609
610
  }, /*#__PURE__*/React.createElement("div", {
610
- className: "".concat(prefixCls, "-empty")
611
+ className: "".concat(prefixCls, "-empty"),
612
+ "x-semi-prop": "empty"
611
613
  }, empty || locale.emptyText)));
612
614
  };
613
615
 
@@ -627,7 +629,8 @@ class Table extends BaseComponent {
627
629
 
628
630
  return /*#__PURE__*/isValidElement(footer) || typeof footer === 'string' ? /*#__PURE__*/React.createElement("div", {
629
631
  className: "".concat(prefixCls, "-footer"),
630
- key: "footer"
632
+ key: "footer",
633
+ "x-semi-prop": "footer"
631
634
  }, footer) : null;
632
635
  };
633
636
 
@@ -246,7 +246,8 @@ class TabBar extends React.Component {
246
246
 
247
247
  return /*#__PURE__*/React.createElement("div", {
248
248
  className: extraCls,
249
- style: tabBarStyle
249
+ style: tabBarStyle,
250
+ "x-semi-prop": "tabBarExtraContent"
250
251
  }, tabBarExtraContent);
251
252
  }
252
253
 
@@ -116,14 +116,17 @@ class TabPane extends PureComponent {
116
116
  style: style,
117
117
  "aria-hidden": active ? 'false' : 'true',
118
118
  tabIndex: 0
119
- }, getDataAttr(restProps)), motion ? /*#__PURE__*/React.createElement(TabPaneTransition, {
119
+ }, getDataAttr(restProps), {
120
+ "x-semi-prop": "children"
121
+ }), motion ? /*#__PURE__*/React.createElement(TabPaneTransition, {
120
122
  direction: this.getDirection(this.context.activeKey, itemKey, this.context.panes),
121
123
  motion: motion,
122
124
  mode: tabPosition === 'top' ? 'horizontal' : 'vertical',
123
125
  state: active ? 'enter' : 'leave'
124
126
  }, transitionStyle => /*#__PURE__*/React.createElement("div", {
125
127
  className: "".concat(cssClasses.TABS_PANE_MOTION_OVERLAY),
126
- style: _Object$assign({}, transitionStyle)
128
+ style: _Object$assign({}, transitionStyle),
129
+ "x-semi-prop": "children"
127
130
  }, shouldRender ? children : null)) : shouldRender ? children : null);
128
131
  }
129
132
 
@@ -45,6 +45,8 @@ class TagInput extends BaseComponent {
45
45
  this.handleClearBtn = e => {
46
46
  this.foundation.handleClearBtn(e);
47
47
  };
48
+ /* istanbul ignore next */
49
+
48
50
 
49
51
  this.handleClearEnterPress = e => {
50
52
  this.foundation.handleClearEnterPress(e);
@@ -219,14 +221,18 @@ class TagInput extends BaseComponent {
219
221
  ["".concat(prefixCls, "-prefix-text")]: labelNode && _isString(labelNode),
220
222
  // eslint-disable-next-line max-len
221
223
  ["".concat(prefixCls, "-prefix-icon")]: isSemiIcon(labelNode)
222
- }); // eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events
223
-
224
- return /*#__PURE__*/React.createElement("div", {
225
- className: prefixWrapperCls,
226
- onMouseDown: this.handlePreventMouseDown,
227
- onClick: this.handleClickPrefixOrSuffix,
228
- id: insetLabelId
229
- }, labelNode);
224
+ });
225
+ return (
226
+ /*#__PURE__*/
227
+ // eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events
228
+ React.createElement("div", {
229
+ className: prefixWrapperCls,
230
+ onMouseDown: this.handlePreventMouseDown,
231
+ onClick: this.handleClickPrefixOrSuffix,
232
+ id: insetLabelId,
233
+ "x-semi-prop": "prefix"
234
+ }, labelNode)
235
+ );
230
236
  }
231
237
 
232
238
  renderSuffix() {
@@ -242,13 +248,17 @@ class TagInput extends BaseComponent {
242
248
  ["".concat(prefixCls, "-suffix-text")]: suffix && _isString(suffix),
243
249
  // eslint-disable-next-line max-len
244
250
  ["".concat(prefixCls, "-suffix-icon")]: isSemiIcon(suffix)
245
- }); // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
246
-
247
- return /*#__PURE__*/React.createElement("div", {
248
- className: suffixWrapperCls,
249
- onMouseDown: this.handlePreventMouseDown,
250
- onClick: this.handleClickPrefixOrSuffix
251
- }, suffix);
251
+ });
252
+ return (
253
+ /*#__PURE__*/
254
+ // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
255
+ React.createElement("div", {
256
+ className: suffixWrapperCls,
257
+ onMouseDown: this.handlePreventMouseDown,
258
+ onClick: this.handleClickPrefixOrSuffix,
259
+ "x-semi-prop": "suffix"
260
+ }, suffix)
261
+ );
252
262
  }
253
263
 
254
264
  renderTags() {
@@ -278,7 +278,9 @@ class Combobox extends BaseComponent {
278
278
  componentName: "TimePicker"
279
279
  }, (locale, localeCode) => /*#__PURE__*/React.createElement(ScrollList, {
280
280
  header: panelHeader,
281
- footer: panelFooter
281
+ footer: panelFooter,
282
+ "x-semi-header-alias": "panelHeader",
283
+ "x-semi-footer-alias": "panelFooter"
282
284
  }, this.renderAMPMSelect(locale, localeCode), this.renderHourSelect(value.getHours(), locale), this.renderMinuteSelect(value.getMinutes(), locale), this.renderSecondSelect(value.getSeconds(), locale)));
283
285
  }
284
286
 
@@ -76,6 +76,8 @@ export default class TimePicker extends BaseComponent {
76
76
 
77
77
  return panelProps;
78
78
  };
79
+ /* istanbul ignore next */
80
+
79
81
 
80
82
  this.handlePanelVisibleChange = visible => this.foundation.handleVisibleChange(visible);
81
83
 
@@ -111,7 +111,7 @@ class Toast extends BaseComponent {
111
111
  const btnTheme = 'borderless';
112
112
  const btnSize = 'small';
113
113
  return /*#__PURE__*/React.createElement("div", {
114
- role: 'alert',
114
+ role: "alert",
115
115
  "aria-label": "".concat(type ? type : 'default', " type"),
116
116
  className: toastCls,
117
117
  style: style,
@@ -121,13 +121,16 @@ class Toast extends BaseComponent {
121
121
  className: "".concat(prefixCls, "-content")
122
122
  }, this.renderIcon(), /*#__PURE__*/React.createElement("span", {
123
123
  className: "".concat(prefixCls, "-content-text"),
124
- style: textStyle
124
+ style: textStyle,
125
+ "x-semi-prop": "content"
125
126
  }, content), showClose && /*#__PURE__*/React.createElement("div", {
126
127
  className: "".concat(prefixCls, "-close-button")
127
128
  }, /*#__PURE__*/React.createElement(Button, {
128
129
  onClick: e => this.close(e),
129
130
  type: "tertiary",
130
- icon: /*#__PURE__*/React.createElement(IconClose, null),
131
+ icon: /*#__PURE__*/React.createElement(IconClose, {
132
+ "x-semi-prop": "icon"
133
+ }),
131
134
  theme: btnTheme,
132
135
  size: btnSize
133
136
  }))));
@@ -633,7 +633,12 @@ export default class Tooltip extends BaseComponent {
633
633
  children = /*#__PURE__*/cloneElement(children, {
634
634
  style: childrenStyle
635
635
  });
636
- children = this.wrapSpan(children);
636
+
637
+ if (trigger !== 'custom') {
638
+ // no need to wrap span when trigger is custom, cause it don't need bind event
639
+ children = this.wrapSpan(children);
640
+ }
641
+
637
642
  this.isWrapped = true;
638
643
  } else if (! /*#__PURE__*/isValidElement(children)) {
639
644
  children = this.wrapSpan(children);
@@ -237,7 +237,8 @@ class Transfer extends BaseComponent {
237
237
  className: leftItemCls,
238
238
  checked: checked,
239
239
  role: "listitem",
240
- onChange: () => this.onSelectOrRemove(item)
240
+ onChange: () => this.onSelectOrRemove(item),
241
+ "x-semi-children-alias": "dataSource[".concat(index, "].label")
241
242
  }, item.label);
242
243
  }
243
244
 
@@ -373,7 +373,8 @@ export default class TreeNode extends PureComponent {
373
373
  return /*#__PURE__*/React.createElement("ul", {
374
374
  className: wrapperCls
375
375
  }, /*#__PURE__*/React.createElement("li", {
376
- className: _concatInstanceProperty(_context2 = "".concat(prefixcls, "-label ")).call(_context2, prefixcls, "-label-empty")
376
+ className: _concatInstanceProperty(_context2 = "".concat(prefixcls, "-label ")).call(_context2, prefixcls, "-label-empty"),
377
+ "x-semi-prop": "emptyContent"
377
378
  }, emptyContent));
378
379
  } // eslint-disable-next-line max-lines-per-function
379
380
 
@@ -59,7 +59,8 @@ class TreeSelect extends BaseComponent {
59
59
  ["".concat(prefixcls, "-suffix-icon")]: isSemiIcon(suffix)
60
60
  });
61
61
  return /*#__PURE__*/React.createElement("div", {
62
- className: suffixWrapperCls
62
+ className: suffixWrapperCls,
63
+ "x-semi-prop": "suffix"
63
64
  }, suffix);
64
65
  };
65
66
 
@@ -79,7 +80,8 @@ class TreeSelect extends BaseComponent {
79
80
  });
80
81
  return /*#__PURE__*/React.createElement("div", {
81
82
  className: prefixWrapperCls,
82
- id: insetLabelId
83
+ id: insetLabelId,
84
+ "x-semi-prop": "prefix,insetLabel"
83
85
  }, labelNode);
84
86
  };
85
87
 
@@ -110,6 +112,8 @@ class TreeSelect extends BaseComponent {
110
112
  this.handleClick = e => {
111
113
  this.foundation.handleClick(e);
112
114
  };
115
+ /* istanbul ignore next */
116
+
113
117
 
114
118
  this.handleSelectionEnterPress = e => {
115
119
  this.foundation.handleSelectionEnterPress(e);
@@ -303,6 +307,8 @@ class TreeSelect extends BaseComponent {
303
307
  e && e.stopPropagation();
304
308
  this.foundation.handleClear(e);
305
309
  };
310
+ /* istanbul ignore next */
311
+
306
312
 
307
313
  this.handleClearEnterPress = e => {
308
314
  e && e.stopPropagation();
@@ -336,7 +342,8 @@ class TreeSelect extends BaseComponent {
336
342
  }
337
343
 
338
344
  return arrowIcon ? /*#__PURE__*/React.createElement("div", {
339
- className: cls("".concat(prefixcls, "-arrow"))
345
+ className: cls("".concat(prefixcls, "-arrow")),
346
+ "x-semi-prop": "arrowIcon"
340
347
  }, arrowIcon) : null;
341
348
  };
342
349
 
@@ -536,7 +536,8 @@ export default class Base extends Component {
536
536
 
537
537
  const iconSize = size === 'small' ? 'small' : 'default';
538
538
  return /*#__PURE__*/React.createElement("span", {
539
- className: "".concat(prefixCls, "-icon")
539
+ className: "".concat(prefixCls, "-icon"),
540
+ "x-semi-prop": "icon"
540
541
  }, isSemiIcon(icon) ? /*#__PURE__*/React.cloneElement(icon, {
541
542
  size: iconSize
542
543
  }) : icon);
@@ -37,7 +37,7 @@ export default class Title extends PureComponent<TitleProps> {
37
37
  underline: PropTypes.Requireable<boolean>;
38
38
  strong: PropTypes.Requireable<boolean>;
39
39
  type: PropTypes.Requireable<"warning" | "success" | "primary" | "tertiary" | "secondary" | "danger" | "quaternary">;
40
- heading: PropTypes.Requireable<1 | 2 | 3 | 4 | 5 | 6>;
40
+ heading: PropTypes.Requireable<4 | 2 | 1 | 3 | 5 | 6>;
41
41
  style: PropTypes.Requireable<object>;
42
42
  className: PropTypes.Requireable<string>;
43
43
  component: PropTypes.Requireable<string>;