@douyinfe/semi-ui 2.12.1-alpha.0 → 2.13.0-beta.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 (188) hide show
  1. package/autoComplete/_story/autoComplete.stories.js +0 -1
  2. package/autoComplete/index.tsx +1 -1
  3. package/avatar/index.tsx +2 -2
  4. package/backtop/index.tsx +7 -11
  5. package/badge/index.tsx +1 -1
  6. package/banner/index.tsx +5 -5
  7. package/breadcrumb/index.tsx +3 -5
  8. package/button/Button.tsx +8 -10
  9. package/card/index.tsx +41 -43
  10. package/carousel/CarouselArrow.tsx +0 -2
  11. package/carousel/index.tsx +0 -1
  12. package/cascader/index.tsx +123 -101
  13. package/cascader/item.tsx +1 -1
  14. package/checkbox/checkbox.tsx +28 -20
  15. package/checkbox/checkboxInner.tsx +11 -1
  16. package/collapsible/index.tsx +1 -8
  17. package/datePicker/dateInput.tsx +0 -1
  18. package/datePicker/datePicker.tsx +5 -13
  19. package/dist/css/semi.css +49 -41
  20. package/dist/css/semi.min.css +1 -1
  21. package/dist/umd/semi-ui.js +5372 -3695
  22. package/dist/umd/semi-ui.js.map +1 -1
  23. package/dist/umd/semi-ui.min.js +1 -1
  24. package/dist/umd/semi-ui.min.js.map +1 -1
  25. package/divider/index.tsx +4 -8
  26. package/dropdown/index.tsx +1 -1
  27. package/empty/index.tsx +5 -13
  28. package/form/hoc/withField.tsx +1 -1
  29. package/form/label.tsx +1 -1
  30. package/grid/col.tsx +1 -1
  31. package/grid/row.tsx +1 -1
  32. package/iconButton/index.tsx +1 -2
  33. package/input/index.tsx +11 -38
  34. package/inputNumber/__test__/inputNumber.test.js +2 -3
  35. package/inputNumber/_story/inputNumber.stories.js +53 -0
  36. package/inputNumber/index.tsx +0 -4
  37. package/lib/cjs/autoComplete/index.js +1 -1
  38. package/lib/cjs/avatar/index.js +2 -4
  39. package/lib/cjs/backtop/index.js +1 -2
  40. package/lib/cjs/badge/index.js +1 -2
  41. package/lib/cjs/banner/index.js +4 -9
  42. package/lib/cjs/breadcrumb/index.js +3 -4
  43. package/lib/cjs/button/Button.js +3 -13
  44. package/lib/cjs/card/index.js +5 -10
  45. package/lib/cjs/carousel/CarouselArrow.js +2 -6
  46. package/lib/cjs/carousel/index.js +1 -2
  47. package/lib/cjs/cascader/index.js +6 -9
  48. package/lib/cjs/cascader/item.js +1 -2
  49. package/lib/cjs/checkbox/checkbox.d.ts +3 -2
  50. package/lib/cjs/checkbox/checkbox.js +33 -15
  51. package/lib/cjs/checkbox/checkboxInner.d.ts +6 -0
  52. package/lib/cjs/checkbox/checkboxInner.js +14 -4
  53. package/lib/cjs/collapsible/index.js +1 -2
  54. package/lib/cjs/datePicker/dateInput.js +1 -2
  55. package/lib/cjs/datePicker/datePicker.js +2 -4
  56. package/lib/cjs/divider/index.js +1 -2
  57. package/lib/cjs/dropdown/index.js +1 -2
  58. package/lib/cjs/empty/index.js +4 -8
  59. package/lib/cjs/form/hoc/withField.js +1 -2
  60. package/lib/cjs/form/label.js +1 -2
  61. package/lib/cjs/grid/col.js +1 -2
  62. package/lib/cjs/grid/row.js +1 -2
  63. package/lib/cjs/iconButton/index.js +1 -3
  64. package/lib/cjs/input/index.js +5 -9
  65. package/lib/cjs/inputNumber/index.js +0 -4
  66. package/lib/cjs/list/index.js +3 -6
  67. package/lib/cjs/modal/ConfirmModal.js +1 -2
  68. package/lib/cjs/modal/Modal.js +2 -6
  69. package/lib/cjs/modal/ModalContent.js +6 -13
  70. package/lib/cjs/notification/notice.js +3 -6
  71. package/lib/cjs/pagination/index.js +2 -4
  72. package/lib/cjs/popconfirm/index.js +3 -6
  73. package/lib/cjs/popover/index.d.ts +1 -0
  74. package/lib/cjs/radio/radio.js +2 -4
  75. package/lib/cjs/rating/item.js +1 -2
  76. package/lib/cjs/scrollList/index.js +3 -6
  77. package/lib/cjs/select/index.js +4 -8
  78. package/lib/cjs/select/option.js +1 -2
  79. package/lib/cjs/sideSheet/SideSheetContent.js +3 -6
  80. package/lib/cjs/skeleton/index.js +1 -3
  81. package/lib/cjs/space/index.js +1 -2
  82. package/lib/cjs/spin/index.js +3 -7
  83. package/lib/cjs/switch/index.js +4 -6
  84. package/lib/cjs/table/Table.js +3 -6
  85. package/lib/cjs/tabs/TabBar.js +1 -2
  86. package/lib/cjs/tabs/TabPane.js +2 -5
  87. package/lib/cjs/tagInput/index.d.ts +6 -1
  88. package/lib/cjs/tagInput/index.js +42 -10
  89. package/lib/cjs/timePicker/Combobox.js +1 -3
  90. package/lib/cjs/toast/toast.js +3 -6
  91. package/lib/cjs/transfer/index.js +1 -2
  92. package/lib/cjs/tree/treeNode.js +1 -2
  93. package/lib/cjs/treeSelect/index.js +3 -6
  94. package/lib/cjs/typography/base.js +1 -2
  95. package/lib/cjs/upload/index.d.ts +1 -1
  96. package/lib/cjs/upload/index.js +6 -13
  97. package/lib/es/autoComplete/index.js +1 -1
  98. package/lib/es/avatar/index.js +2 -4
  99. package/lib/es/backtop/index.js +1 -2
  100. package/lib/es/badge/index.js +1 -2
  101. package/lib/es/banner/index.js +4 -9
  102. package/lib/es/breadcrumb/index.js +3 -4
  103. package/lib/es/button/Button.js +3 -11
  104. package/lib/es/card/index.js +5 -10
  105. package/lib/es/carousel/CarouselArrow.js +2 -6
  106. package/lib/es/carousel/index.js +1 -2
  107. package/lib/es/cascader/index.js +6 -9
  108. package/lib/es/cascader/item.js +1 -2
  109. package/lib/es/checkbox/checkbox.d.ts +3 -2
  110. package/lib/es/checkbox/checkbox.js +33 -15
  111. package/lib/es/checkbox/checkboxInner.d.ts +6 -0
  112. package/lib/es/checkbox/checkboxInner.js +14 -4
  113. package/lib/es/collapsible/index.js +1 -2
  114. package/lib/es/datePicker/dateInput.js +1 -2
  115. package/lib/es/datePicker/datePicker.js +2 -4
  116. package/lib/es/divider/index.js +1 -2
  117. package/lib/es/dropdown/index.js +1 -2
  118. package/lib/es/empty/index.js +4 -8
  119. package/lib/es/form/hoc/withField.js +1 -2
  120. package/lib/es/form/label.js +1 -2
  121. package/lib/es/grid/col.js +1 -2
  122. package/lib/es/grid/row.js +1 -2
  123. package/lib/es/iconButton/index.js +1 -3
  124. package/lib/es/input/index.js +5 -9
  125. package/lib/es/inputNumber/index.js +0 -4
  126. package/lib/es/list/index.js +3 -6
  127. package/lib/es/modal/ConfirmModal.js +1 -2
  128. package/lib/es/modal/Modal.js +2 -6
  129. package/lib/es/modal/ModalContent.js +6 -13
  130. package/lib/es/notification/notice.js +3 -6
  131. package/lib/es/pagination/index.js +2 -4
  132. package/lib/es/popconfirm/index.js +3 -6
  133. package/lib/es/popover/index.d.ts +1 -0
  134. package/lib/es/radio/radio.js +2 -4
  135. package/lib/es/rating/item.js +1 -2
  136. package/lib/es/scrollList/index.js +3 -6
  137. package/lib/es/select/index.js +4 -8
  138. package/lib/es/select/option.js +1 -2
  139. package/lib/es/sideSheet/SideSheetContent.js +3 -6
  140. package/lib/es/skeleton/index.js +1 -3
  141. package/lib/es/space/index.js +1 -2
  142. package/lib/es/spin/index.js +3 -7
  143. package/lib/es/switch/index.js +4 -6
  144. package/lib/es/table/Table.js +3 -6
  145. package/lib/es/tabs/TabBar.js +1 -2
  146. package/lib/es/tabs/TabPane.js +2 -5
  147. package/lib/es/tagInput/index.d.ts +6 -1
  148. package/lib/es/tagInput/index.js +41 -10
  149. package/lib/es/timePicker/Combobox.js +1 -3
  150. package/lib/es/toast/toast.js +3 -6
  151. package/lib/es/transfer/index.js +1 -2
  152. package/lib/es/tree/treeNode.js +1 -2
  153. package/lib/es/treeSelect/index.js +3 -6
  154. package/lib/es/typography/base.js +1 -2
  155. package/lib/es/upload/index.d.ts +1 -1
  156. package/lib/es/upload/index.js +6 -13
  157. package/list/index.tsx +4 -16
  158. package/modal/ConfirmModal.tsx +1 -1
  159. package/modal/Modal.tsx +0 -2
  160. package/modal/ModalContent.tsx +14 -27
  161. package/notification/notice.tsx +4 -16
  162. package/package.json +9 -9
  163. package/pagination/index.tsx +2 -16
  164. package/popconfirm/index.tsx +3 -11
  165. package/popover/index.tsx +1 -1
  166. package/radio/radio.tsx +2 -10
  167. package/rating/item.tsx +1 -1
  168. package/scrollList/index.tsx +3 -19
  169. package/select/_story/select.stories.js +11 -0
  170. package/select/index.tsx +4 -12
  171. package/select/option.tsx +1 -5
  172. package/sideSheet/SideSheetContent.tsx +3 -3
  173. package/skeleton/index.tsx +1 -1
  174. package/space/index.tsx +1 -1
  175. package/spin/index.tsx +9 -15
  176. package/switch/index.tsx +14 -9
  177. package/table/Table.tsx +3 -5
  178. package/tabs/TabBar.tsx +1 -1
  179. package/tabs/TabPane.tsx +4 -9
  180. package/tagInput/index.tsx +38 -11
  181. package/timePicker/Combobox.tsx +1 -6
  182. package/toast/toast.tsx +3 -3
  183. package/transfer/index.tsx +0 -1
  184. package/tree/treeNode.tsx +1 -1
  185. package/treeSelect/index.tsx +3 -15
  186. package/typography/base.tsx +1 -1
  187. package/upload/index.tsx +38 -107
  188. package/yarn-error.log +0 -26235
@@ -80,9 +80,7 @@ class Modal extends BaseComponent {
80
80
  loading: cancelLoading,
81
81
  type: "tertiary",
82
82
  autoFocus: true
83
- }, this.props.cancelButtonProps, {
84
- "x-semi-children-alias": "cancelText"
85
- }), cancelText || locale.cancel);
83
+ }, this.props.cancelButtonProps), cancelText || locale.cancel);
86
84
  }
87
85
  };
88
86
 
@@ -94,9 +92,7 @@ class Modal extends BaseComponent {
94
92
  theme: "solid",
95
93
  loading: confirmLoading,
96
94
  onClick: this.handleOk
97
- }, this.props.okButtonProps, {
98
- "x-semi-children-alias": "okText"
99
- }), okText || locale.confirm)));
95
+ }, this.props.okButtonProps), okText || locale.confirm)));
100
96
  }; // getDialog = () => {
101
97
  // const {
102
98
  // footer,
@@ -90,9 +90,7 @@ export default class ModalContent extends BaseComponent {
90
90
  let closer;
91
91
 
92
92
  if (closable) {
93
- const iconType = closeIcon || /*#__PURE__*/React.createElement(IconClose, {
94
- "x-semi-prop": "closeIcon"
95
- });
93
+ const iconType = closeIcon || /*#__PURE__*/React.createElement(IconClose, null);
96
94
  closer = /*#__PURE__*/React.createElement(Button, {
97
95
  "aria-label": "close",
98
96
  className: "".concat(cssClasses.DIALOG, "-close"),
@@ -113,8 +111,7 @@ export default class ModalContent extends BaseComponent {
113
111
  icon
114
112
  } = this.props;
115
113
  return icon ? /*#__PURE__*/React.createElement("span", {
116
- className: "".concat(cssClasses.DIALOG, "-icon-wrapper"),
117
- "x-semi-prop": "icon"
114
+ className: "".concat(cssClasses.DIALOG, "-icon-wrapper")
118
115
  }, icon) : null;
119
116
  };
120
117
 
@@ -133,8 +130,7 @@ export default class ModalContent extends BaseComponent {
133
130
  }, icon, /*#__PURE__*/React.createElement(Typography.Title, {
134
131
  heading: 5,
135
132
  className: "".concat(cssClasses.DIALOG, "-title"),
136
- id: "".concat(cssClasses.DIALOG, "-title"),
137
- "x-semi-prop": "title"
133
+ id: "".concat(cssClasses.DIALOG, "-title")
138
134
  }, title), closer);
139
135
  };
140
136
 
@@ -153,14 +149,12 @@ export default class ModalContent extends BaseComponent {
153
149
  return hasHeader ? /*#__PURE__*/React.createElement("div", {
154
150
  className: bodyCls,
155
151
  id: "".concat(cssClasses.DIALOG, "-body"),
156
- style: bodyStyle,
157
- "x-semi-prop": "children"
152
+ style: bodyStyle
158
153
  }, children) : /*#__PURE__*/React.createElement("div", {
159
154
  className: "".concat(cssClasses.DIALOG, "-body-wrapper")
160
155
  }, icon, /*#__PURE__*/React.createElement("div", {
161
156
  className: bodyCls,
162
- style: bodyStyle,
163
- "x-semi-prop": "children"
157
+ style: bodyStyle
164
158
  }, children), closer);
165
159
  };
166
160
 
@@ -192,8 +186,7 @@ export default class ModalContent extends BaseComponent {
192
186
  const body = this.renderBody();
193
187
  const header = this.renderHeader();
194
188
  const footer = props.footer ? /*#__PURE__*/React.createElement("div", {
195
- className: "".concat(cssClasses.DIALOG, "-footer"),
196
- "x-semi-prop": "footer"
189
+ className: "".concat(cssClasses.DIALOG, "-footer")
197
190
  }, props.footer) : null;
198
191
  const dialogElement =
199
192
  /*#__PURE__*/
@@ -115,8 +115,7 @@ class Notice extends BaseComponent {
115
115
 
116
116
  if (iconType) {
117
117
  return /*#__PURE__*/React.createElement("div", {
118
- className: iconCls,
119
- "x-semi-prop": "icon"
118
+ className: iconCls
120
119
  }, isSemiIcon(iconType) ? /*#__PURE__*/React.cloneElement(iconType, {
121
120
  size: iconType.props.size || 'large'
122
121
  }) : iconType);
@@ -174,11 +173,9 @@ class Notice extends BaseComponent {
174
173
  className: "".concat(prefixCls, "-content-wrapper")
175
174
  }, title ? /*#__PURE__*/React.createElement("div", {
176
175
  id: titleID,
177
- className: "".concat(prefixCls, "-title"),
178
- "x-semi-prop": "title"
176
+ className: "".concat(prefixCls, "-title")
179
177
  }, title) : '', content ? /*#__PURE__*/React.createElement("div", {
180
- className: "".concat(prefixCls, "-content"),
181
- "x-semi-prop": "content"
178
+ className: "".concat(prefixCls, "-content")
182
179
  }, content) : ''), showClose && /*#__PURE__*/React.createElement(Button, {
183
180
  className: "".concat(prefixCls, "-icon-close"),
184
181
  type: "tertiary",
@@ -154,8 +154,7 @@ export default class Pagination extends BaseComponent {
154
154
  "aria-disabled": prevDisabled ? true : false,
155
155
  "aria-label": "Previous",
156
156
  onClick: e => !prevDisabled && this.foundation.goPrev(e),
157
- className: preClassName,
158
- "x-semi-prop": "prevText"
157
+ className: preClassName
159
158
  }, prevText || /*#__PURE__*/React.createElement(IconChevronLeft, {
160
159
  size: "large"
161
160
  }));
@@ -178,8 +177,7 @@ export default class Pagination extends BaseComponent {
178
177
  "aria-disabled": nextDisabled ? true : false,
179
178
  "aria-label": "Next",
180
179
  onClick: e => !nextDisabled && this.foundation.goNext(e),
181
- className: nextClassName,
182
- "x-semi-prop": "prevText"
180
+ className: nextClassName
183
181
  }, nextText || /*#__PURE__*/React.createElement(IconChevronRight, {
184
182
  size: "large"
185
183
  }));
@@ -122,16 +122,13 @@ export default class Popconfirm extends BaseComponent {
122
122
  }, /*#__PURE__*/React.createElement("div", {
123
123
  className: "".concat(prefixCls, "-header")
124
124
  }, /*#__PURE__*/React.createElement("i", {
125
- className: "".concat(prefixCls, "-header-icon"),
126
- "x-semi-prop": "icon"
125
+ className: "".concat(prefixCls, "-header-icon")
127
126
  }, /*#__PURE__*/React.isValidElement(icon) ? icon : null), /*#__PURE__*/React.createElement("div", {
128
127
  className: "".concat(prefixCls, "-header-body")
129
128
  }, showTitle ? /*#__PURE__*/React.createElement("div", {
130
- className: "".concat(prefixCls, "-header-title"),
131
- "x-semi-prop": "title"
129
+ className: "".concat(prefixCls, "-header-title")
132
130
  }, title) : null, showContent ? /*#__PURE__*/React.createElement("div", {
133
- className: "".concat(prefixCls, "-header-content"),
134
- "x-semi-prop": "content"
131
+ className: "".concat(prefixCls, "-header-content")
135
132
  }, content) : null), /*#__PURE__*/React.createElement(Button, {
136
133
  className: "".concat(prefixCls, "-btn-close"),
137
134
  icon: /*#__PURE__*/React.createElement(IconClose, null),
@@ -38,6 +38,7 @@ export interface PopoverProps extends BaseProps {
38
38
  guardFocus?: TooltipProps['guardFocus'];
39
39
  returnFocusOnClose?: TooltipProps['returnFocusOnClose'];
40
40
  onEscKeyDown?: TooltipProps['onEscKeyDown'];
41
+ clickToHide?: TooltipProps['clickToHide'];
41
42
  }
42
43
  export interface PopoverState {
43
44
  popConfirmVisible: boolean;
@@ -165,12 +165,10 @@ class Radio extends BaseComponent {
165
165
  const renderContent = () => /*#__PURE__*/React.createElement(React.Fragment, null, children ? /*#__PURE__*/React.createElement("span", {
166
166
  className: addonCls,
167
167
  style: addonStyle,
168
- id: this.addonId,
169
- "x-semi-prop": "children"
168
+ id: addonId
170
169
  }, children) : null, extra && !isButtonRadio ? /*#__PURE__*/React.createElement("div", {
171
170
  className: "".concat(prefix, "-extra"),
172
- id: this.extraId,
173
- "x-semi-prop": "extra"
171
+ id: extraId
174
172
  }, extra) : null);
175
173
 
176
174
  return /*#__PURE__*/React.createElement("label", {
@@ -98,8 +98,7 @@ 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"),
102
- "x-semi-prop": "character"
101
+ className: "".concat(prefixCls, "-second")
103
102
  }, content)));
104
103
  }
105
104
 
@@ -35,19 +35,16 @@ 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"),
39
- "x-semi-prop": this.props['x-semi-header-alias'] || "header"
38
+ className: "".concat(clsHeader, "-title")
40
39
  }, header), /*#__PURE__*/React.createElement("div", {
41
40
  className: "".concat(clsWrapper, "-line")
42
41
  })) : null, /*#__PURE__*/React.createElement("div", {
43
42
  className: "".concat(clsWrapper, "-body"),
44
43
  style: {
45
44
  height: bodyHeight ? bodyHeight : ''
46
- },
47
- "x-semi-prop": "children"
45
+ }
48
46
  }, children), footer ? /*#__PURE__*/React.createElement("div", {
49
- className: "".concat(clsWrapper, "-footer"),
50
- "x-semi-prop": this.props['x-semi-footer-alias'] || "footer"
47
+ className: "".concat(clsWrapper, "-footer")
51
48
  }, footer) : null);
52
49
  }
53
50
 
@@ -663,8 +663,7 @@ class Select extends BaseComponent {
663
663
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
664
664
  className: contentWrapperCls
665
665
  }, /*#__PURE__*/React.createElement("span", {
666
- className: spanCls,
667
- "x-semi-prop": "placeholder"
666
+ className: spanCls
668
667
  }, renderText || renderText === 0 ? renderText : placeholder), filterable && showInput ? this.renderInput() : null));
669
668
  }
670
669
 
@@ -826,8 +825,7 @@ class Select extends BaseComponent {
826
825
  ["".concat(prefixcls, "-suffix-icon")]: isSemiIcon(suffix)
827
826
  });
828
827
  return /*#__PURE__*/React.createElement("div", {
829
- className: suffixWrapperCls,
830
- "x-semi-prop": "suffix"
828
+ className: suffixWrapperCls
831
829
  }, suffix);
832
830
  }
833
831
 
@@ -846,8 +844,7 @@ class Select extends BaseComponent {
846
844
  });
847
845
  return /*#__PURE__*/React.createElement("div", {
848
846
  className: prefixWrapperCls,
849
- id: insetLabelId,
850
- "x-semi-prop": "prefix,insetLabel"
847
+ id: insetLabelId
851
848
  }, labelNode);
852
849
  }
853
850
 
@@ -899,8 +896,7 @@ class Select extends BaseComponent {
899
896
  });
900
897
  const showClear = this.props.showClear && (selections.size || inputValue) && !disabled && (isHovering || isOpen);
901
898
  const arrowContent = showArrow ? /*#__PURE__*/React.createElement("div", {
902
- className: "".concat(prefixcls, "-arrow"),
903
- "x-semi-prop": "arrowIcon"
899
+ className: "".concat(prefixcls, "-arrow")
904
900
  }, arrowIcon) : /*#__PURE__*/React.createElement("div", {
905
901
  className: "".concat(prefixcls, "-arrow-empty")
906
902
  });
@@ -100,8 +100,7 @@ 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,
104
- "x-semi-prop": "emptyContent"
103
+ className: optionClassName
105
104
  }, emptyContent || locale.emptyText));
106
105
  } // 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
107
106
 
@@ -79,8 +79,7 @@ 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"),
83
- "x-semi-prop": "title"
82
+ className: "".concat(prefixCls, "-title")
84
83
  }, this.props.title);
85
84
  }
86
85
 
@@ -135,11 +134,9 @@ export default class SideSheetContent extends React.PureComponent {
135
134
  className: "".concat(prefixCls, "-content")
136
135
  }, header, /*#__PURE__*/React.createElement("div", {
137
136
  className: "".concat(prefixCls, "-body"),
138
- style: props.bodyStyle,
139
- "x-semi-prop": "children"
137
+ style: props.bodyStyle
140
138
  }, props.children), props.footer ? /*#__PURE__*/React.createElement("div", {
141
- className: "".concat(prefixCls, "-footer"),
142
- "x-semi-prop": "footer"
139
+ className: "".concat(prefixCls, "-footer")
143
140
  }, props.footer) : null));
144
141
  return dialogElement;
145
142
  }
@@ -43,9 +43,7 @@ class Skeleton extends PureComponent {
43
43
  content = /*#__PURE__*/React.createElement("div", _Object$assign({
44
44
  className: skCls,
45
45
  style: style
46
- }, others, {
47
- "x-semi-prop": "placeholder"
48
- }), placeholder);
46
+ }, others), placeholder);
49
47
  } else {
50
48
  content = children;
51
49
  }
@@ -66,8 +66,7 @@ class Space extends PureComponent {
66
66
  const childrenNodes = flatten(children);
67
67
  return /*#__PURE__*/React.createElement("div", {
68
68
  className: classNames,
69
- style: realStyle,
70
- "x-semi-prop": "children"
69
+ style: realStyle
71
70
  }, childrenNodes);
72
71
  }
73
72
 
@@ -67,11 +67,8 @@ 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
- "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;
70
+ className: spinIconCls
71
+ }, indicator) : /*#__PURE__*/React.createElement(SpinIcon, null), tip ? /*#__PURE__*/React.createElement("div", null, tip) : null) : null;
75
72
  }
76
73
 
77
74
  render() {
@@ -98,8 +95,7 @@ class Spin extends BaseComponent {
98
95
  style: style
99
96
  }, this.renderSpin(), /*#__PURE__*/React.createElement("div", {
100
97
  className: "".concat(prefixCls, "-children"),
101
- style: childStyle,
102
- "x-semi-prop": "children"
98
+ style: childStyle
103
99
  }, children));
104
100
  }
105
101
 
@@ -119,21 +119,19 @@ 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,
123
- "x-semi-prop": "checkedText"
122
+ className: cssClasses.CHECKED_TEXT
124
123
  }, checkedText) : null, showUncheckedText ? /*#__PURE__*/React.createElement("div", {
125
- className: cssClasses.UNCHECKED_TEXT,
126
- "x-semi-prop": "uncheckedText"
124
+ className: cssClasses.UNCHECKED_TEXT
127
125
  }, uncheckedText) : null, /*#__PURE__*/React.createElement("input", _Object$assign({}, switchProps, {
128
126
  ref: this.switchRef,
129
127
  id: id,
130
- role: "switch",
128
+ role: 'switch',
131
129
  "aria-checked": nativeControlChecked,
132
130
  "aria-invalid": this.props['aria-invalid'],
133
131
  "aria-errormessage": this.props['aria-errormessage'],
134
132
  "aria-label": this.props['aria-label'],
135
133
  "aria-labelledby": this.props['aria-labelledby'],
136
- "aria-describedby": this.props['aria-describedby'],
134
+ "aria-describedby": this.props["aria-describedby"],
137
135
  "aria-disabled": this.props['disabled'],
138
136
  onChange: e => this.foundation.handleChange(e.target.checked, e),
139
137
  onFocus: e => this.handleFocusVisible(e),
@@ -582,8 +582,7 @@ 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"),
586
- "x-semi-prop": "title"
585
+ className: "".concat(prefixCls, "-title")
587
586
  }, title) : null;
588
587
  };
589
588
 
@@ -608,8 +607,7 @@ class Table extends BaseComponent {
608
607
  }, (locale, localeCode) => /*#__PURE__*/React.createElement("div", {
609
608
  className: wrapCls
610
609
  }, /*#__PURE__*/React.createElement("div", {
611
- className: "".concat(prefixCls, "-empty"),
612
- "x-semi-prop": "empty"
610
+ className: "".concat(prefixCls, "-empty")
613
611
  }, empty || locale.emptyText)));
614
612
  };
615
613
 
@@ -629,8 +627,7 @@ class Table extends BaseComponent {
629
627
 
630
628
  return /*#__PURE__*/isValidElement(footer) || typeof footer === 'string' ? /*#__PURE__*/React.createElement("div", {
631
629
  className: "".concat(prefixCls, "-footer"),
632
- key: "footer",
633
- "x-semi-prop": "footer"
630
+ key: "footer"
634
631
  }, footer) : null;
635
632
  };
636
633
 
@@ -246,8 +246,7 @@ class TabBar extends React.Component {
246
246
 
247
247
  return /*#__PURE__*/React.createElement("div", {
248
248
  className: extraCls,
249
- style: tabBarStyle,
250
- "x-semi-prop": "tabBarExtraContent"
249
+ style: tabBarStyle
251
250
  }, tabBarExtraContent);
252
251
  }
253
252
 
@@ -116,17 +116,14 @@ class TabPane extends PureComponent {
116
116
  style: style,
117
117
  "aria-hidden": active ? 'false' : 'true',
118
118
  tabIndex: 0
119
- }, getDataAttr(restProps), {
120
- "x-semi-prop": "children"
121
- }), motion ? /*#__PURE__*/React.createElement(TabPaneTransition, {
119
+ }, getDataAttr(restProps)), motion ? /*#__PURE__*/React.createElement(TabPaneTransition, {
122
120
  direction: this.getDirection(this.context.activeKey, itemKey, this.context.panes),
123
121
  motion: motion,
124
122
  mode: tabPosition === 'top' ? 'horizontal' : 'vertical',
125
123
  state: active ? 'enter' : 'leave'
126
124
  }, transitionStyle => /*#__PURE__*/React.createElement("div", {
127
125
  className: "".concat(cssClasses.TABS_PANE_MOTION_OVERLAY),
128
- style: _Object$assign({}, transitionStyle),
129
- "x-semi-prop": "children"
126
+ style: _Object$assign({}, transitionStyle)
130
127
  }, shouldRender ? children : null)) : shouldRender ? children : null);
131
128
  }
132
129
 
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
  import { strings } from '@douyinfe/semi-foundation/lib/es/tagInput/constants';
4
4
  import '@douyinfe/semi-foundation/lib/es/tagInput/tagInput.css';
5
- import { TagInputAdapter } from '@douyinfe/semi-foundation/lib/es/tagInput/foundation';
5
+ import TagInputFoundation, { TagInputAdapter } from '@douyinfe/semi-foundation/lib/es/tagInput/foundation';
6
6
  import { ArrayElement } from '../_base/base';
7
7
  import BaseComponent from '../_base/baseComponent';
8
8
  import { PopoverProps } from '../popover';
@@ -32,6 +32,8 @@ export interface TagInputProps {
32
32
  onKeyDown?: (e: React.MouseEvent<HTMLInputElement>) => void;
33
33
  onRemove?: (removedValue: string, idx: number) => void;
34
34
  placeholder?: string;
35
+ insetLabel?: React.ReactNode;
36
+ insetLabelId?: string;
35
37
  prefix?: React.ReactNode;
36
38
  renderTagItem?: (value: string, index: number) => React.ReactNode;
37
39
  separator?: string | string[] | null;
@@ -108,6 +110,7 @@ declare class TagInput extends BaseComponent<TagInputProps, TagInputState> {
108
110
  onKeyDown: (...args: any[]) => void;
109
111
  };
110
112
  inputRef: React.RefObject<HTMLInputElement>;
113
+ foundation: TagInputFoundation;
111
114
  constructor(props: TagInputProps);
112
115
  static getDerivedStateFromProps(nextProps: TagInputProps, prevState: TagInputState): {
113
116
  tagsArray: string[];
@@ -124,6 +127,8 @@ declare class TagInput extends BaseComponent<TagInputProps, TagInputState> {
124
127
  handleTagClose: (idx: number) => void;
125
128
  handleInputMouseLeave: (e: React.MouseEvent<HTMLDivElement>) => void;
126
129
  handleInputMouseEnter: (e: React.MouseEvent<HTMLDivElement>) => void;
130
+ handleClickPrefixOrSuffix: (e: React.MouseEvent<HTMLInputElement>) => void;
131
+ handlePreventMouseDown: (e: React.MouseEvent<HTMLInputElement>) => void;
127
132
  renderClearBtn(): JSX.Element;
128
133
  renderPrefix(): JSX.Element;
129
134
  renderSuffix(): JSX.Element;
@@ -13,6 +13,7 @@ import PropTypes from 'prop-types';
13
13
  import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/tagInput/constants';
14
14
  import '@douyinfe/semi-foundation/lib/es/tagInput/tagInput.css';
15
15
  import TagInputFoundation from '@douyinfe/semi-foundation/lib/es/tagInput/foundation';
16
+ import { isSemiIcon } from '../_utils';
16
17
  import BaseComponent from '../_base/baseComponent';
17
18
  import Tag from '../tag';
18
19
  import Input from '../input';
@@ -61,6 +62,14 @@ class TagInput extends BaseComponent {
61
62
  this.foundation.handleInputMouseEnter();
62
63
  };
63
64
 
65
+ this.handleClickPrefixOrSuffix = e => {
66
+ this.foundation.handleClickPrefixOrSuffix(e);
67
+ };
68
+
69
+ this.handlePreventMouseDown = e => {
70
+ this.foundation.handlePreventMouseDown(e);
71
+ };
72
+
64
73
  this.foundation = new TagInputFoundation(this.adapter);
65
74
  this.state = {
66
75
  tagsArray: props.defaultValue || [],
@@ -112,6 +121,19 @@ class TagInput extends BaseComponent {
112
121
  focusing
113
122
  });
114
123
  },
124
+ toggleFocusing: isFocus => {
125
+ const input = this.inputRef && this.inputRef.current;
126
+
127
+ if (isFocus) {
128
+ input && input.focus();
129
+ } else {
130
+ input && input.blur();
131
+ }
132
+
133
+ this.setState({
134
+ focusing: isFocus
135
+ });
136
+ },
115
137
  setHovering: hovering => {
116
138
  this.setState({
117
139
  hovering
@@ -182,22 +204,29 @@ class TagInput extends BaseComponent {
182
204
 
183
205
  renderPrefix() {
184
206
  const {
185
- prefix
207
+ prefix,
208
+ insetLabel,
209
+ insetLabelId
186
210
  } = this.props;
211
+ const labelNode = prefix || insetLabel;
187
212
 
188
- if (_isNull(prefix) || _isUndefined(prefix)) {
213
+ if (_isNull(labelNode) || _isUndefined(labelNode)) {
189
214
  return null;
190
215
  }
191
216
 
192
217
  const prefixWrapperCls = cls("".concat(prefixCls, "-prefix"), {
193
- ["".concat(prefixCls, "-prefix-text")]: prefix && _isString(prefix),
218
+ ["".concat(prefixCls, "-inset-label")]: insetLabel,
219
+ ["".concat(prefixCls, "-prefix-text")]: labelNode && _isString(labelNode),
194
220
  // eslint-disable-next-line max-len
195
- ["".concat(prefixCls, "-prefix-icon")]: /*#__PURE__*/React.isValidElement(prefix) && !(prefix && _isString(prefix))
196
- });
221
+ ["".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
+
197
224
  return /*#__PURE__*/React.createElement("div", {
198
225
  className: prefixWrapperCls,
199
- "x-semi-prop": "prefix"
200
- }, prefix);
226
+ onMouseDown: this.handlePreventMouseDown,
227
+ onClick: this.handleClickPrefixOrSuffix,
228
+ id: insetLabelId
229
+ }, labelNode);
201
230
  }
202
231
 
203
232
  renderSuffix() {
@@ -212,11 +241,13 @@ class TagInput extends BaseComponent {
212
241
  const suffixWrapperCls = cls("".concat(prefixCls, "-suffix"), {
213
242
  ["".concat(prefixCls, "-suffix-text")]: suffix && _isString(suffix),
214
243
  // eslint-disable-next-line max-len
215
- ["".concat(prefixCls, "-suffix-icon")]: /*#__PURE__*/React.isValidElement(suffix) && !(suffix && _isString(suffix))
216
- });
244
+ ["".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
+
217
247
  return /*#__PURE__*/React.createElement("div", {
218
248
  className: suffixWrapperCls,
219
- "x-semi-prop": "suffix"
249
+ onMouseDown: this.handlePreventMouseDown,
250
+ onClick: this.handleClickPrefixOrSuffix
220
251
  }, suffix);
221
252
  }
222
253
 
@@ -278,9 +278,7 @@ class Combobox extends BaseComponent {
278
278
  componentName: "TimePicker"
279
279
  }, (locale, localeCode) => /*#__PURE__*/React.createElement(ScrollList, {
280
280
  header: panelHeader,
281
- footer: panelFooter,
282
- "x-semi-header-alias": "panelHeader",
283
- "x-semi-footer-alias": "panelFooter"
281
+ footer: panelFooter
284
282
  }, this.renderAMPMSelect(locale, localeCode), this.renderHourSelect(value.getHours(), locale), this.renderMinuteSelect(value.getMinutes(), locale), this.renderSecondSelect(value.getSeconds(), locale)));
285
283
  }
286
284
 
@@ -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,16 +121,13 @@ 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,
125
- "x-semi-prop": "content"
124
+ style: textStyle
126
125
  }, content), showClose && /*#__PURE__*/React.createElement("div", {
127
126
  className: "".concat(prefixCls, "-close-button")
128
127
  }, /*#__PURE__*/React.createElement(Button, {
129
128
  onClick: e => this.close(e),
130
129
  type: "tertiary",
131
- icon: /*#__PURE__*/React.createElement(IconClose, {
132
- "x-semi-prop": "icon"
133
- }),
130
+ icon: /*#__PURE__*/React.createElement(IconClose, null),
134
131
  theme: btnTheme,
135
132
  size: btnSize
136
133
  }))));
@@ -237,8 +237,7 @@ class Transfer extends BaseComponent {
237
237
  className: leftItemCls,
238
238
  checked: checked,
239
239
  role: "listitem",
240
- onChange: () => this.onSelectOrRemove(item),
241
- "x-semi-children-alias": "dataSource[".concat(index, "].label")
240
+ onChange: () => this.onSelectOrRemove(item)
242
241
  }, item.label);
243
242
  }
244
243
 
@@ -373,8 +373,7 @@ 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"),
377
- "x-semi-prop": "emptyContent"
376
+ className: _concatInstanceProperty(_context2 = "".concat(prefixcls, "-label ")).call(_context2, prefixcls, "-label-empty")
378
377
  }, emptyContent));
379
378
  } // eslint-disable-next-line max-lines-per-function
380
379
 
@@ -59,8 +59,7 @@ class TreeSelect extends BaseComponent {
59
59
  ["".concat(prefixcls, "-suffix-icon")]: isSemiIcon(suffix)
60
60
  });
61
61
  return /*#__PURE__*/React.createElement("div", {
62
- className: suffixWrapperCls,
63
- "x-semi-prop": "suffix"
62
+ className: suffixWrapperCls
64
63
  }, suffix);
65
64
  };
66
65
 
@@ -80,8 +79,7 @@ class TreeSelect extends BaseComponent {
80
79
  });
81
80
  return /*#__PURE__*/React.createElement("div", {
82
81
  className: prefixWrapperCls,
83
- id: insetLabelId,
84
- "x-semi-prop": "prefix,insetLabel"
82
+ id: insetLabelId
85
83
  }, labelNode);
86
84
  };
87
85
 
@@ -338,8 +336,7 @@ class TreeSelect extends BaseComponent {
338
336
  }
339
337
 
340
338
  return arrowIcon ? /*#__PURE__*/React.createElement("div", {
341
- className: cls("".concat(prefixcls, "-arrow")),
342
- "x-semi-prop": "arrowIcon"
339
+ className: cls("".concat(prefixcls, "-arrow"))
343
340
  }, arrowIcon) : null;
344
341
  };
345
342