@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
@@ -1,9 +1,7 @@
1
- import _omit from "lodash/omit";
2
1
  import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
3
2
  import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
4
3
  import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
5
4
  import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
6
- import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
7
5
 
8
6
  var __rest = this && this.__rest || function (s, e) {
9
7
  var t = {};
@@ -54,7 +52,7 @@ export default class Button extends PureComponent {
54
52
 
55
53
  const baseProps = _Object$assign(_Object$assign({
56
54
  disabled
57
- }, _omit(attr, ['x-semi-children-alias'])), {
55
+ }, attr), {
58
56
  className: classNames(prefixCls, {
59
57
  [_concatInstanceProperty(_context = "".concat(prefixCls, "-")).call(_context, type)]: !disabled && type,
60
58
  ["".concat(prefixCls, "-disabled")]: disabled,
@@ -70,12 +68,6 @@ export default class Button extends PureComponent {
70
68
  'aria-disabled': disabled
71
69
  });
72
70
 
73
- const xSemiProps = {};
74
-
75
- if (!(className && _includesInstanceProperty(className).call(className, '-with-icon'))) {
76
- xSemiProps['x-semi-prop'] = this.props['x-semi-children-alias'] || 'children';
77
- }
78
-
79
71
  return (
80
72
  /*#__PURE__*/
81
73
  // eslint-disable-next-line react/button-has-type
@@ -83,10 +75,10 @@ export default class Button extends PureComponent {
83
75
  onClick: this.props.onClick,
84
76
  onMouseDown: this.props.onMouseDown,
85
77
  style: style
86
- }), /*#__PURE__*/React.createElement("span", _Object$assign({
78
+ }), /*#__PURE__*/React.createElement("span", {
87
79
  className: "".concat(prefixCls, "-content"),
88
80
  onClick: e => disabled && e.stopPropagation()
89
- }, xSemiProps), children))
81
+ }, children))
90
82
  );
91
83
  }
92
84
 
@@ -59,8 +59,7 @@ class Card extends PureComponent {
59
59
  React.createElement("div", {
60
60
  className: headerWrapperCls
61
61
  }, headerExtraContent && /*#__PURE__*/React.createElement("div", {
62
- className: "".concat(prefixcls, "-header-wrapper-extra"),
63
- "x-semi-prop": "headerExtraContent"
62
+ className: "".concat(prefixcls, "-header-wrapper-extra")
64
63
  }, headerExtraContent), title && /*#__PURE__*/React.createElement("div", {
65
64
  className: titleCls
66
65
  }, _isString(title) ? /*#__PURE__*/React.createElement(Typography.Title, {
@@ -68,8 +67,7 @@ class Card extends PureComponent {
68
67
  ellipsis: {
69
68
  showTooltip: true,
70
69
  rows: 1
71
- },
72
- "x-semi-prop": "title"
70
+ }
73
71
  }, title) : title)));
74
72
  }
75
73
 
@@ -82,8 +80,7 @@ class Card extends PureComponent {
82
80
  } = this.props;
83
81
  const coverCls = cls("".concat(prefixcls, "-cover"));
84
82
  return cover && /*#__PURE__*/React.createElement("div", {
85
- className: coverCls,
86
- "x-semi-prop": "cover"
83
+ className: coverCls
87
84
  }, cover);
88
85
  };
89
86
 
@@ -113,8 +110,7 @@ class Card extends PureComponent {
113
110
  spacing: 12
114
111
  }, _mapInstanceProperty(actions).call(actions, (item, idx) => /*#__PURE__*/React.createElement("div", {
115
112
  key: idx,
116
- className: actionsItemCls,
117
- "x-semi-prop": "actions.".concat(idx)
113
+ className: actionsItemCls
118
114
  }, item)))));
119
115
  };
120
116
 
@@ -129,8 +125,7 @@ class Card extends PureComponent {
129
125
  });
130
126
  return footer && /*#__PURE__*/React.createElement("div", {
131
127
  style: footerStyle,
132
- className: footerCls,
133
- "x-semi-prop": "footer"
128
+ className: footerCls
134
129
  }, footer);
135
130
  };
136
131
  }
@@ -57,16 +57,12 @@ class CarouselArrow extends React.PureComponent {
57
57
  // role='button'
58
58
  className: leftClassNames,
59
59
  onClick: prev
60
- }, _get(this.props, 'arrowProps.leftArrow.props'), {
61
- "x-semi-prop": "arrowProps.leftArrow.children"
62
- }), this.renderLeftIcon()), /*#__PURE__*/React.createElement("div", _Object$assign({
60
+ }, _get(this.props, 'arrowProps.leftArrow.props')), this.renderLeftIcon()), /*#__PURE__*/React.createElement("div", _Object$assign({
63
61
  // role='button'
64
62
  // tabIndex={0}
65
63
  className: rightClassNames,
66
64
  onClick: next
67
- }, _get(this.props, 'arrowProps.rightArrow.props'), {
68
- "x-semi-prop": "arrowProps.rightArrow.children"
69
- }), this.renderRightIcon()));
65
+ }, _get(this.props, 'arrowProps.rightArrow.props')), this.renderRightIcon()));
70
66
  }
71
67
 
72
68
  }
@@ -263,8 +263,7 @@ class Carousel extends BaseComponent {
263
263
  className: cls([_concatInstanceProperty(_context2 = "".concat(cssClasses.CAROUSEL_CONTENT, "-")).call(_context2, animation)], {
264
264
  ["".concat(cssClasses.CAROUSEL_CONTENT)]: true,
265
265
  ["".concat(cssClasses.CAROUSEL_CONTENT, "-reverse")]: slideDirection === 'left' ? isReverse : !isReverse
266
- }),
267
- "x-semi-prop": "children"
266
+ })
268
267
  }, this.renderChildren()), this.renderIndicator(), this.renderArrow());
269
268
  }
270
269
 
@@ -285,8 +285,7 @@ class Cascader extends BaseComponent {
285
285
  ["".concat(prefixcls, "-suffix-icon")]: isSemiIcon(suffix)
286
286
  });
287
287
  return /*#__PURE__*/React.createElement("div", {
288
- className: suffixWrapperCls,
289
- "x-semi-prop": "suffix"
288
+ className: suffixWrapperCls
290
289
  }, suffix);
291
290
  };
292
291
 
@@ -306,8 +305,7 @@ class Cascader extends BaseComponent {
306
305
  });
307
306
  return /*#__PURE__*/React.createElement("div", {
308
307
  className: prefixWrapperCls,
309
- id: insetLabelId,
310
- "x-semi-prop": "prefix,insetLabel"
308
+ id: insetLabelId
311
309
  }, labelNode);
312
310
  };
313
311
 
@@ -397,7 +395,7 @@ class Cascader extends BaseComponent {
397
395
  className: clearCls,
398
396
  onClick: this.handleClear,
399
397
  onKeyPress: this.handleClearEnterPress,
400
- role: "button",
398
+ role: 'button',
401
399
  tabIndex: 0
402
400
  }, /*#__PURE__*/React.createElement(IconClear, null));
403
401
  }
@@ -416,8 +414,7 @@ class Cascader extends BaseComponent {
416
414
  }
417
415
 
418
416
  return arrowIcon ? /*#__PURE__*/React.createElement("div", {
419
- className: cls("".concat(prefixcls, "-arrow")),
420
- "x-semi-prop": "arrowIcon"
417
+ className: cls("".concat(prefixcls, "-arrow"))
421
418
  }, arrowIcon) : null;
422
419
  };
423
420
 
@@ -492,12 +489,12 @@ class Cascader extends BaseComponent {
492
489
  "aria-errormessage": this.props['aria-errormessage'],
493
490
  "aria-label": this.props['aria-label'],
494
491
  "aria-labelledby": this.props['aria-labelledby'],
495
- "aria-describedby": this.props['aria-describedby'],
492
+ "aria-describedby": this.props["aria-describedby"],
496
493
  "aria-required": this.props['aria-required'],
497
494
  id: id
498
495
  }, mouseEvent, {
499
496
  // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
500
- role: "combobox",
497
+ role: 'combobox',
501
498
  tabIndex: 0
502
499
  }), inner);
503
500
  };
@@ -296,8 +296,7 @@ export default class Item extends PureComponent {
296
296
  className: _concatInstanceProperty(_context6 = "".concat(prefixcls, " ")).call(_context6, prefixcls, "-empty"),
297
297
  key: 'empty-list'
298
298
  }, /*#__PURE__*/React.createElement("span", {
299
- className: "".concat(prefixcls, "-label"),
300
- "x-semi-prop": "emptyContent"
299
+ className: "".concat(prefixcls, "-label")
301
300
  }, emptyContent || locale.emptyText));
302
301
  });
303
302
  }
@@ -29,6 +29,7 @@ interface CheckboxState {
29
29
  checked: boolean;
30
30
  addonId?: string;
31
31
  extraId?: string;
32
+ focusVisible?: boolean;
32
33
  }
33
34
  declare class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
34
35
  static contextType: React.Context<CheckboxContextType>;
@@ -65,8 +66,6 @@ declare class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
65
66
  context: CheckboxContextType;
66
67
  get adapter(): CheckboxAdapter<CheckboxProps, CheckboxState>;
67
68
  foundation: CheckboxFoundation;
68
- addonId: string;
69
- extraId: string;
70
69
  constructor(props: CheckboxProps);
71
70
  componentDidUpdate(prevProps: CheckboxProps): void;
72
71
  isInGroup(): boolean;
@@ -74,6 +73,8 @@ declare class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
74
73
  blur(): void;
75
74
  handleChange: React.MouseEventHandler<HTMLSpanElement>;
76
75
  handleEnterPress: (e: React.KeyboardEvent<HTMLSpanElement>) => void;
76
+ handleFocusVisible: (event: React.FocusEvent) => void;
77
+ handleBlur: (event: React.FocusEvent) => void;
77
78
  render(): JSX.Element;
78
79
  }
79
80
  export default Checkbox;
@@ -24,11 +24,20 @@ class Checkbox extends BaseComponent {
24
24
 
25
25
  this.handleEnterPress = e => this.foundation.handleEnterPress(e);
26
26
 
27
+ this.handleFocusVisible = event => {
28
+ this.foundation.handleFocusVisible(event);
29
+ };
30
+
31
+ this.handleBlur = event => {
32
+ this.foundation.handleBlur();
33
+ };
34
+
27
35
  const checked = false;
28
36
  this.state = {
29
37
  checked: props.checked || props.defaultChecked || checked,
30
38
  addonId: props.addonId,
31
- extraId: props.extraId
39
+ extraId: props.extraId,
40
+ focusVisible: false
32
41
  };
33
42
  this.checkboxEntity = null;
34
43
  this.foundation = new CheckboxFoundation(this.adapter);
@@ -66,6 +75,14 @@ class Checkbox extends BaseComponent {
66
75
  prefix: 'extra'
67
76
  })
68
77
  });
78
+ },
79
+ setFocusVisible: focusVisible => {
80
+ this.setState({
81
+ focusVisible
82
+ });
83
+ },
84
+ focusCheckboxEntity: () => {
85
+ this.focus();
69
86
  }
70
87
  });
71
88
  }
@@ -111,7 +128,8 @@ class Checkbox extends BaseComponent {
111
128
  const {
112
129
  checked,
113
130
  addonId,
114
- extraId
131
+ extraId,
132
+ focusVisible
115
133
  } = this.state;
116
134
  const props = {
117
135
  checked,
@@ -142,6 +160,7 @@ class Checkbox extends BaseComponent {
142
160
  }
143
161
 
144
162
  const prefix = prefixCls || css.PREFIX;
163
+ const focusOuter = props.isCardType || props.isPureCardType;
145
164
  const wrapper = classnames(prefix, {
146
165
  ["".concat(prefix, "-disabled")]: props.disabled,
147
166
  ["".concat(prefix, "-indeterminate")]: indeterminate,
@@ -152,28 +171,24 @@ class Checkbox extends BaseComponent {
152
171
  ["".concat(prefix, "-cardType_unDisabled")]: !(props.disabled && props.isCardType),
153
172
  ["".concat(prefix, "-cardType_checked")]: props.isCardType && props.checked && !props.disabled,
154
173
  ["".concat(prefix, "-cardType_checked_disabled")]: props.isCardType && props.checked && props.disabled,
155
- [className]: Boolean(className)
174
+ [className]: Boolean(className),
175
+ ["".concat(prefix, "-focus")]: focusVisible && focusOuter
156
176
  });
157
177
  const extraCls = classnames("".concat(prefix, "-extra"), {
158
178
  ["".concat(prefix, "-cardType_extra_noChildren")]: props.isCardType && !children
159
179
  });
160
- const name = inGroup && this.context.checkboxGroup.name;
161
- const xSemiPropChildren = this.props['x-semi-children-alias'] || 'children';
162
180
 
163
181
  const renderContent = () => /*#__PURE__*/React.createElement(React.Fragment, null, children ? /*#__PURE__*/React.createElement("span", {
164
- id: this.addonId,
165
- className: "".concat(prefix, "-addon"),
166
- "x-semi-prop": xSemiPropChildren
182
+ id: addonId,
183
+ className: "".concat(prefix, "-addon")
167
184
  }, children) : null, extra ? /*#__PURE__*/React.createElement("div", {
168
- id: this.extraId,
169
- className: extraCls,
170
- "x-semi-prop": "extra"
185
+ id: extraId,
186
+ className: extraCls
171
187
  }, extra) : null);
172
188
 
173
189
  return (
174
190
  /*#__PURE__*/
175
191
  // label is better than span, however span is here which is to solve gitlab issue #364
176
- // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
177
192
  React.createElement("span", {
178
193
  role: role,
179
194
  tabIndex: tabIndex,
@@ -186,12 +201,15 @@ class Checkbox extends BaseComponent {
186
201
  onKeyPress: this.handleEnterPress,
187
202
  "aria-labelledby": this.props['aria-labelledby']
188
203
  }, /*#__PURE__*/React.createElement(CheckboxInner, _Object$assign({}, this.props, props, {
189
- addonId: children && this.addonId,
190
- extraId: extra && this.extraId,
204
+ addonId: children && addonId,
205
+ extraId: extra && extraId,
191
206
  isPureCardType: props.isPureCardType,
192
207
  ref: ref => {
193
208
  this.checkboxEntity = ref;
194
- }
209
+ },
210
+ focusInner: focusVisible && !focusOuter,
211
+ onInputFocus: this.handleFocusVisible,
212
+ onInputBlur: this.handleBlur
195
213
  })), props.isCardType ? /*#__PURE__*/React.createElement("div", null, renderContent()) : renderContent())
196
214
  );
197
215
  }
@@ -16,6 +16,9 @@ export interface CheckboxInnerProps {
16
16
  addonId?: string;
17
17
  extraId?: string;
18
18
  'aria-label'?: React.AriaAttributes['aria-label'];
19
+ focusInner?: boolean;
20
+ onInputFocus?: (e: any) => void;
21
+ onInputBlur?: (e: any) => void;
19
22
  }
20
23
  declare class CheckboxInner extends PureComponent<CheckboxInnerProps> {
21
24
  static contextType: React.Context<import("./context").CheckboxContextType>;
@@ -34,6 +37,9 @@ declare class CheckboxInner extends PureComponent<CheckboxInnerProps> {
34
37
  isPureCardType: PropTypes.Requireable<boolean>;
35
38
  addonId: PropTypes.Requireable<string>;
36
39
  extraId: PropTypes.Requireable<string>;
40
+ focusInner: PropTypes.Requireable<boolean>;
41
+ onInputFocus: PropTypes.Requireable<(...args: any[]) => any>;
42
+ onInputBlur: PropTypes.Requireable<(...args: any[]) => any>;
37
43
  };
38
44
  static defaultProps: {
39
45
  onChange: (...args: any[]) => void;
@@ -27,7 +27,10 @@ class CheckboxInner extends PureComponent {
27
27
  name,
28
28
  isPureCardType,
29
29
  addonId,
30
- extraId
30
+ extraId,
31
+ focusInner,
32
+ onInputFocus,
33
+ onInputBlur
31
34
  } = this.props;
32
35
  const prefix = prefixCls || css.PREFIX;
33
36
  const wrapper = classnames({
@@ -36,7 +39,9 @@ class CheckboxInner extends PureComponent {
36
39
  ["".concat(prefix, "-inner-pureCardType")]: isPureCardType
37
40
  }, css.WRAPPER);
38
41
  const inner = classnames({
39
- ["".concat(prefix, "-inner-display")]: true
42
+ ["".concat(prefix, "-inner-display")]: true,
43
+ ["".concat(prefix, "-focus")]: focusInner,
44
+ ["".concat(prefix, "-focus-border")]: focusInner && !checked
40
45
  });
41
46
  const icon = checked ? /*#__PURE__*/React.createElement(IconCheckboxTick, null) : indeterminate ? /*#__PURE__*/React.createElement(IconCheckboxIndeterminate, null) : null;
42
47
  const inputProps = {
@@ -52,7 +57,9 @@ class CheckboxInner extends PureComponent {
52
57
  className: css.INPUT,
53
58
  onChange: _noop,
54
59
  checked: checked,
55
- disabled: disabled
60
+ disabled: disabled,
61
+ onFocus: onInputFocus,
62
+ onBlur: onInputBlur
56
63
  };
57
64
  name && (inputProps['name'] = name);
58
65
  return /*#__PURE__*/React.createElement("span", {
@@ -83,7 +90,10 @@ CheckboxInner.propTypes = {
83
90
  value: PropTypes.any,
84
91
  isPureCardType: PropTypes.bool,
85
92
  addonId: PropTypes.string,
86
- extraId: PropTypes.string
93
+ extraId: PropTypes.string,
94
+ focusInner: PropTypes.bool,
95
+ onInputFocus: PropTypes.func,
96
+ onInputBlur: PropTypes.func
87
97
  };
88
98
  CheckboxInner.defaultProps = {
89
99
  onChange: _noop
@@ -89,8 +89,7 @@ const Collapsible = props => {
89
89
  style: {
90
90
  overflow: 'hidden'
91
91
  },
92
- id: id,
93
- "x-semi-prop": "children"
92
+ id: id
94
93
  }, children));
95
94
  };
96
95
 
@@ -153,8 +153,7 @@ export default class DateInput extends BaseComponent {
153
153
  const labelNode = prefix || insetLabel;
154
154
  return labelNode ? /*#__PURE__*/React.createElement("div", {
155
155
  className: "".concat(prefixCls, "-range-input-prefix"),
156
- onClick: e => !disabled && !rangeInputFocus && this.handleRangeStartFocus(e),
157
- "x-semi-prop": "prefix,insetLabel"
156
+ onClick: e => !disabled && !rangeInputFocus && this.handleRangeStartFocus(e)
158
157
  }, labelNode) : null;
159
158
  }
160
159
 
@@ -182,13 +182,11 @@ export default class DatePicker extends BaseComponent {
182
182
  className: wrapCls,
183
183
  style: dropdownStyle
184
184
  }, topSlot && /*#__PURE__*/React.createElement("div", {
185
- className: "".concat(cssClasses.PREFIX, "-topSlot"),
186
- "x-semi-prop": "topSlot"
185
+ className: "".concat(cssClasses.PREFIX, "-topSlot")
187
186
  }, topSlot), insetInput && /*#__PURE__*/React.createElement(DateInput, _Object$assign({}, insetInputProps, {
188
187
  insetInput: true
189
188
  })), this.adapter.typeIsYearOrMonth() ? this.renderYearMonthPanel(locale, localeCode) : this.renderMonthGrid(locale, localeCode, dateFnsLocale), this.renderQuickControls(), bottomSlot && /*#__PURE__*/React.createElement("div", {
190
- className: "".concat(cssClasses.PREFIX, "-bottomSlot"),
191
- "x-semi-prop": "bottomSlot"
189
+ className: "".concat(cssClasses.PREFIX, "-bottomSlot")
192
190
  }, bottomSlot), this.renderFooter(locale, localeCode));
193
191
  };
194
192
 
@@ -61,8 +61,7 @@ const Divider = props => {
61
61
  className: dividerClassNames,
62
62
  style: _Object$assign(_Object$assign({}, overrideDefaultStyle), style)
63
63
  }), children && layout === 'horizontal' ? typeof children === 'string' ? /*#__PURE__*/React.createElement("span", {
64
- className: "".concat(prefixCls, "-divider_inner-text"),
65
- "x-semi-prop": "children"
64
+ className: "".concat(prefixCls, "-divider_inner-text")
66
65
  }, children) : children : null);
67
66
  };
68
67
 
@@ -86,8 +86,7 @@ class Dropdown extends BaseComponent {
86
86
  className: className,
87
87
  style: style
88
88
  }, /*#__PURE__*/React.createElement("div", {
89
- className: "".concat(prefixCls, "-content"),
90
- "x-semi-prop": "render"
89
+ className: "".concat(prefixCls, "-content")
91
90
  }, content)));
92
91
  }
93
92
 
@@ -101,19 +101,15 @@ export default class Empty extends BaseComponent {
101
101
  style: style
102
102
  }, /*#__PURE__*/React.createElement("div", {
103
103
  className: "".concat(prefixCls, "-image"),
104
- style: imageStyle,
105
- "x-semi-prop": "image,darkModeImage"
104
+ style: imageStyle
106
105
  }, imageNode), /*#__PURE__*/React.createElement("div", {
107
106
  className: "".concat(prefixCls, "-content")
108
107
  }, title ? /*#__PURE__*/React.createElement(Typography.Title, _Object$assign({}, titleProps, {
109
- className: "".concat(prefixCls, "-title"),
110
- "x-semi-prop": "title"
108
+ className: "".concat(prefixCls, "-title")
111
109
  }), title) : null, description ? /*#__PURE__*/React.createElement("div", {
112
- className: "".concat(prefixCls, "-description"),
113
- "x-semi-prop": "description"
110
+ className: "".concat(prefixCls, "-description")
114
111
  }, description) : null, children ? /*#__PURE__*/React.createElement("div", {
115
- className: "".concat(prefixCls, "-footer"),
116
- "x-semi-prop": "children"
112
+ className: "".concat(prefixCls, "-footer")
117
113
  }, children) : null));
118
114
  }
119
115
 
@@ -426,8 +426,7 @@ function withField(Component, opts) {
426
426
  });
427
427
  const extraContent = extraText ? /*#__PURE__*/React.createElement("div", {
428
428
  className: extraCls,
429
- id: extraTextId,
430
- "x-semi-prop": "extraText"
429
+ id: extraTextId
431
430
  }, extraText) : null;
432
431
 
433
432
  let newProps = _Object$assign(_Object$assign({
@@ -29,8 +29,7 @@ export default class Label extends PureComponent {
29
29
  const labelStyle = style ? style : {};
30
30
  width ? labelStyle.width = width : null;
31
31
  const textContent = /*#__PURE__*/React.createElement("div", {
32
- className: "".concat(prefixCls, "-field-label-text"),
33
- "x-semi-prop": "label"
32
+ className: "".concat(prefixCls, "-field-label-text")
34
33
  }, typeof text !== 'undefined' ? text : children);
35
34
  const contentWithExtra = /*#__PURE__*/React.createElement(React.Fragment, null, textContent, /*#__PURE__*/React.createElement("div", {
36
35
  className: "".concat(prefixCls, "-field-label-extra")
@@ -97,8 +97,7 @@ class Col extends React.Component {
97
97
  } : {}), style);
98
98
  return /*#__PURE__*/React.createElement("div", _Object$assign({}, others, {
99
99
  style: style,
100
- className: classes,
101
- "x-semi-prop": "children"
100
+ className: classes
102
101
  }), children);
103
102
  }
104
103
 
@@ -157,8 +157,7 @@ class Row extends React.Component {
157
157
  }
158
158
  }, /*#__PURE__*/React.createElement("div", _Object$assign({}, otherProps, {
159
159
  className: classes,
160
- style: rowStyle,
161
- "x-semi-prop": "children"
160
+ style: rowStyle
162
161
  }), children));
163
162
  }
164
163
 
@@ -71,10 +71,8 @@ class IconButton extends PureComponent {
71
71
  ["".concat(prefixCls, "-content-left")]: iconPosition === 'right',
72
72
  ["".concat(prefixCls, "-content-right")]: iconPosition === 'left'
73
73
  });
74
- const xSemiProp = this.props['x-semi-children-alias'] || 'children';
75
74
  const children = originChildren != null ? /*#__PURE__*/React.createElement("span", {
76
- className: btnTextCls,
77
- "x-semi-prop": xSemiProp
75
+ className: btnTextCls
78
76
  }, originChildren) : null;
79
77
 
80
78
  if (iconPosition === 'left') {
@@ -183,8 +183,7 @@ class Input extends BaseComponent {
183
183
  ["".concat(prefixCls, "-prepend-icon")]: isSemiIcon(addonBefore)
184
184
  });
185
185
  return /*#__PURE__*/React.createElement("div", {
186
- className: prefixWrapperCls,
187
- "x-semi-prop": "addonBefore"
186
+ className: prefixWrapperCls
188
187
  }, addonBefore);
189
188
  }
190
189
 
@@ -203,8 +202,7 @@ class Input extends BaseComponent {
203
202
  ["".concat(prefixCls, "-append-icon")]: isSemiIcon(addonAfter)
204
203
  });
205
204
  return /*#__PURE__*/React.createElement("div", {
206
- className: prefixWrapperCls,
207
- "x-semi-prop": "addonAfter"
205
+ className: prefixWrapperCls
208
206
  }, addonAfter);
209
207
  }
210
208
 
@@ -284,8 +282,7 @@ class Input extends BaseComponent {
284
282
  className: prefixWrapperCls,
285
283
  onMouseDown: this.handlePreventMouseDown,
286
284
  onClick: this.handleClickPrefixOrSuffix,
287
- id: insetLabelId,
288
- "x-semi-prop": "prefix,insetLabel"
285
+ id: insetLabelId
289
286
  }, labelNode);
290
287
  }
291
288
 
@@ -322,8 +319,7 @@ class Input extends BaseComponent {
322
319
  return /*#__PURE__*/React.createElement("div", {
323
320
  className: suffixWrapperCls,
324
321
  onMouseDown: this.handlePreventMouseDown,
325
- onClick: this.handleClickPrefixOrSuffix,
326
- "x-semi-prop": "suffix"
322
+ onClick: this.handleClickPrefixOrSuffix
327
323
  }, suffix);
328
324
  }
329
325
 
@@ -425,7 +421,7 @@ class Input extends BaseComponent {
425
421
  }
426
422
 
427
423
  if (validateStatus === 'error') {
428
- inputProps['aria-invalid'] = 'true';
424
+ inputProps['aria-invalid'] = "true";
429
425
  }
430
426
 
431
427
  return (
@@ -111,8 +111,6 @@ class InputNumber extends BaseComponent {
111
111
  return /*#__PURE__*/React.createElement("div", {
112
112
  className: suffixChildrenCls
113
113
  }, /*#__PURE__*/React.createElement("span", {
114
- role: "button",
115
- tabIndex: -1,
116
114
  className: upClassName,
117
115
  onMouseDown: notAllowedUp ? _noop : this.handleUpClick,
118
116
  onMouseUp: this.handleMouseUp,
@@ -120,8 +118,6 @@ class InputNumber extends BaseComponent {
120
118
  }, /*#__PURE__*/React.createElement(IconChevronUp, {
121
119
  size: "extra-small"
122
120
  })), /*#__PURE__*/React.createElement("span", {
123
- role: "button",
124
- tabIndex: -1,
125
121
  className: downClassName,
126
122
  onMouseDown: notAllowedDown ? _noop : this.handleDownClick,
127
123
  onMouseUp: this.handleMouseUp,
@@ -27,8 +27,7 @@ class List extends BaseComponent {
27
27
 
28
28
  if (emptyContent) {
29
29
  return /*#__PURE__*/React.createElement("div", {
30
- className: "".concat(cssClasses.PREFIX, "-empty"),
31
- "x-semi-prop": "emptyContent"
30
+ className: "".concat(cssClasses.PREFIX, "-empty")
32
31
  }, emptyContent);
33
32
  } else {
34
33
  return /*#__PURE__*/React.createElement(LocaleConsumer, {
@@ -116,8 +115,7 @@ class List extends BaseComponent {
116
115
  className: wrapperCls,
117
116
  style: style
118
117
  }, header ? /*#__PURE__*/React.createElement("div", {
119
- className: "".concat(cssClasses.PREFIX, "-header"),
120
- "x-semi-prop": "header"
118
+ className: "".concat(cssClasses.PREFIX, "-header")
121
119
  }, header) : null, /*#__PURE__*/React.createElement(ListContext.Provider, {
122
120
  value: {
123
121
  grid,
@@ -128,8 +126,7 @@ class List extends BaseComponent {
128
126
  spinning: loading,
129
127
  size: "large"
130
128
  }, this.wrapChildren(childrenList, children))), footer ? /*#__PURE__*/React.createElement("div", {
131
- className: "".concat(cssClasses.PREFIX, "-footer"),
132
- "x-semi-prop": "footer"
129
+ className: "".concat(cssClasses.PREFIX, "-footer")
133
130
  }, footer) : null, loadMore ? loadMore : null);
134
131
  }
135
132
 
@@ -101,8 +101,7 @@ const ConfirmModal = props => {
101
101
  icon: iconNode,
102
102
  visible: visible
103
103
  }, rest), /*#__PURE__*/React.createElement("div", {
104
- className: contentCls,
105
- "x-semi-prop": "content"
104
+ className: contentCls
106
105
  }, content));
107
106
  };
108
107