@douyinfe/semi-ui 2.14.0-beta.2 → 2.15.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 (185) hide show
  1. package/autoComplete/index.tsx +0 -1
  2. package/cascader/__test__/cascader.test.js +13 -10
  3. package/cascader/_story/cascader.stories.js +22 -0
  4. package/cascader/index.tsx +53 -35
  5. package/checkbox/checkbox.tsx +1 -0
  6. package/checkbox/checkboxInner.tsx +4 -1
  7. package/datePicker/__test__/datePicker.test.js +1 -0
  8. package/datePicker/_story/v2/FixTriggerRender.tsx +36 -0
  9. package/datePicker/_story/v2/index.js +1 -0
  10. package/datePicker/datePicker.tsx +7 -5
  11. package/dist/css/semi.css +39 -11
  12. package/dist/css/semi.min.css +1 -1
  13. package/dist/umd/semi-ui.js +1151 -347
  14. package/dist/umd/semi-ui.js.map +1 -1
  15. package/dist/umd/semi-ui.min.js +1 -1
  16. package/dist/umd/semi-ui.min.js.map +1 -1
  17. package/dropdown/context.ts +2 -0
  18. package/dropdown/dropdownItem.tsx +2 -1
  19. package/dropdown/dropdownMenu.tsx +24 -1
  20. package/dropdown/index.tsx +10 -2
  21. package/form/_story/form.stories.tsx +23 -15
  22. package/form/hoc/withField.tsx +1 -1
  23. package/form/interface.ts +1 -1
  24. package/input/__test__/input.test.js +31 -0
  25. package/input/_story/input.stories.js +24 -1
  26. package/input/index.tsx +5 -2
  27. package/input/inputGroup.tsx +7 -6
  28. package/inputNumber/index.tsx +5 -3
  29. package/lib/cjs/autoComplete/index.d.ts +0 -1
  30. package/lib/cjs/autoComplete/index.js +0 -1
  31. package/lib/cjs/cascader/index.d.ts +1 -1
  32. package/lib/cjs/cascader/index.js +36 -9
  33. package/lib/cjs/checkbox/checkbox.d.ts +1 -0
  34. package/lib/cjs/checkbox/checkbox.js +2 -1
  35. package/lib/cjs/checkbox/checkboxInner.d.ts +2 -0
  36. package/lib/cjs/checkbox/checkboxInner.js +8 -2
  37. package/lib/cjs/datePicker/datePicker.d.ts +1 -1
  38. package/lib/cjs/datePicker/datePicker.js +21 -6
  39. package/lib/cjs/dropdown/context.d.ts +2 -0
  40. package/lib/cjs/dropdown/dropdownItem.js +3 -1
  41. package/lib/cjs/dropdown/dropdownMenu.d.ts +18 -1
  42. package/lib/cjs/dropdown/dropdownMenu.js +23 -2
  43. package/lib/cjs/dropdown/index.d.ts +4 -0
  44. package/lib/cjs/dropdown/index.js +13 -5
  45. package/lib/cjs/form/baseForm.d.ts +16 -15
  46. package/lib/cjs/form/field.d.ts +16 -15
  47. package/lib/cjs/form/hoc/withField.d.ts +1 -1
  48. package/lib/cjs/form/interface.d.ts +1 -1
  49. package/lib/cjs/input/index.d.ts +2 -1
  50. package/lib/cjs/input/index.js +11 -5
  51. package/lib/cjs/input/inputGroup.js +16 -9
  52. package/lib/cjs/inputNumber/index.d.ts +1 -0
  53. package/lib/cjs/inputNumber/index.js +8 -3
  54. package/lib/cjs/locale/source/de.d.ts +3 -0
  55. package/lib/cjs/locale/source/de.js +165 -0
  56. package/lib/cjs/locale/source/fr.d.ts +3 -0
  57. package/lib/cjs/locale/source/fr.js +165 -0
  58. package/lib/cjs/locale/source/it.d.ts +3 -0
  59. package/lib/cjs/locale/source/it.js +165 -0
  60. package/lib/cjs/modal/ModalContent.d.ts +1 -0
  61. package/lib/cjs/modal/ModalContent.js +17 -4
  62. package/lib/cjs/modal/confirm.d.ts +5 -0
  63. package/lib/cjs/radio/radio.d.ts +2 -0
  64. package/lib/cjs/radio/radio.js +2 -1
  65. package/lib/cjs/radio/radioInner.d.ts +2 -0
  66. package/lib/cjs/radio/radioInner.js +8 -2
  67. package/lib/cjs/rating/index.d.ts +7 -0
  68. package/lib/cjs/rating/index.js +135 -68
  69. package/lib/cjs/rating/item.d.ts +27 -3
  70. package/lib/cjs/rating/item.js +145 -38
  71. package/lib/cjs/select/index.d.ts +2 -0
  72. package/lib/cjs/select/index.js +15 -3
  73. package/lib/cjs/spin/icon.js +1 -1
  74. package/lib/cjs/table/Body/index.js +1 -1
  75. package/lib/cjs/tabs/index.d.ts +1 -0
  76. package/lib/cjs/tabs/index.js +2 -1
  77. package/lib/cjs/tabs/interface.d.ts +1 -0
  78. package/lib/cjs/tag/index.js +4 -5
  79. package/lib/cjs/tag/interface.d.ts +1 -0
  80. package/lib/cjs/tagInput/index.d.ts +2 -0
  81. package/lib/cjs/tagInput/index.js +19 -5
  82. package/lib/cjs/timePicker/TimeInput.d.ts +2 -1
  83. package/lib/cjs/timePicker/TimeInput.js +7 -3
  84. package/lib/cjs/timePicker/TimePicker.d.ts +2 -0
  85. package/lib/cjs/timePicker/TimePicker.js +2 -1
  86. package/lib/cjs/timePicker/index.d.ts +1 -0
  87. package/lib/cjs/tooltip/index.d.ts +2 -0
  88. package/lib/cjs/tooltip/index.js +12 -4
  89. package/lib/cjs/tree/index.d.ts +1 -0
  90. package/lib/cjs/tree/index.js +21 -5
  91. package/lib/cjs/tree/treeNode.js +15 -19
  92. package/lib/cjs/treeSelect/index.js +20 -4
  93. package/lib/es/autoComplete/index.d.ts +0 -1
  94. package/lib/es/autoComplete/index.js +0 -1
  95. package/lib/es/cascader/index.d.ts +1 -1
  96. package/lib/es/cascader/index.js +36 -9
  97. package/lib/es/checkbox/checkbox.d.ts +1 -0
  98. package/lib/es/checkbox/checkbox.js +2 -1
  99. package/lib/es/checkbox/checkboxInner.d.ts +2 -0
  100. package/lib/es/checkbox/checkboxInner.js +8 -2
  101. package/lib/es/datePicker/datePicker.d.ts +1 -1
  102. package/lib/es/datePicker/datePicker.js +21 -6
  103. package/lib/es/dropdown/context.d.ts +2 -0
  104. package/lib/es/dropdown/dropdownItem.js +3 -1
  105. package/lib/es/dropdown/dropdownMenu.d.ts +18 -1
  106. package/lib/es/dropdown/dropdownMenu.js +21 -2
  107. package/lib/es/dropdown/index.d.ts +4 -0
  108. package/lib/es/dropdown/index.js +13 -5
  109. package/lib/es/form/baseForm.d.ts +16 -15
  110. package/lib/es/form/field.d.ts +16 -15
  111. package/lib/es/form/hoc/withField.d.ts +1 -1
  112. package/lib/es/form/interface.d.ts +1 -1
  113. package/lib/es/input/index.d.ts +2 -1
  114. package/lib/es/input/index.js +11 -5
  115. package/lib/es/input/inputGroup.js +15 -9
  116. package/lib/es/inputNumber/index.d.ts +1 -0
  117. package/lib/es/inputNumber/index.js +8 -3
  118. package/lib/es/locale/source/de.d.ts +3 -0
  119. package/lib/es/locale/source/de.js +153 -0
  120. package/lib/es/locale/source/fr.d.ts +3 -0
  121. package/lib/es/locale/source/fr.js +153 -0
  122. package/lib/es/locale/source/it.d.ts +3 -0
  123. package/lib/es/locale/source/it.js +153 -0
  124. package/lib/es/modal/ModalContent.d.ts +1 -0
  125. package/lib/es/modal/ModalContent.js +17 -4
  126. package/lib/es/modal/confirm.d.ts +5 -0
  127. package/lib/es/radio/radio.d.ts +2 -0
  128. package/lib/es/radio/radio.js +2 -1
  129. package/lib/es/radio/radioInner.d.ts +2 -0
  130. package/lib/es/radio/radioInner.js +8 -2
  131. package/lib/es/rating/index.d.ts +7 -0
  132. package/lib/es/rating/index.js +133 -65
  133. package/lib/es/rating/item.d.ts +27 -3
  134. package/lib/es/rating/item.js +145 -32
  135. package/lib/es/select/index.d.ts +2 -0
  136. package/lib/es/select/index.js +15 -3
  137. package/lib/es/spin/icon.js +1 -1
  138. package/lib/es/table/Body/index.js +1 -1
  139. package/lib/es/tabs/index.d.ts +1 -0
  140. package/lib/es/tabs/index.js +2 -1
  141. package/lib/es/tabs/interface.d.ts +1 -0
  142. package/lib/es/tag/index.js +4 -5
  143. package/lib/es/tag/interface.d.ts +1 -0
  144. package/lib/es/tagInput/index.d.ts +2 -0
  145. package/lib/es/tagInput/index.js +19 -5
  146. package/lib/es/timePicker/TimeInput.d.ts +2 -1
  147. package/lib/es/timePicker/TimeInput.js +7 -3
  148. package/lib/es/timePicker/TimePicker.d.ts +2 -0
  149. package/lib/es/timePicker/TimePicker.js +2 -1
  150. package/lib/es/timePicker/index.d.ts +1 -0
  151. package/lib/es/tooltip/index.d.ts +2 -0
  152. package/lib/es/tooltip/index.js +13 -4
  153. package/lib/es/tree/index.d.ts +1 -0
  154. package/lib/es/tree/index.js +19 -5
  155. package/lib/es/tree/treeNode.js +14 -20
  156. package/lib/es/treeSelect/index.js +18 -4
  157. package/locale/source/de.ts +156 -0
  158. package/locale/source/fr.ts +156 -0
  159. package/locale/source/it.ts +156 -0
  160. package/modal/ModalContent.tsx +7 -4
  161. package/package.json +8 -8
  162. package/radio/radio.tsx +2 -0
  163. package/radio/radioInner.tsx +4 -1
  164. package/rating/__test__/rating.test.js +13 -31
  165. package/rating/_story/rating.stories.js +13 -2
  166. package/rating/index.tsx +63 -18
  167. package/rating/item.tsx +141 -26
  168. package/select/index.tsx +6 -2
  169. package/spin/icon.tsx +1 -1
  170. package/table/Body/index.tsx +1 -1
  171. package/table/_story/v2/FixedVirtualizedEmpty.tsx +76 -0
  172. package/table/_story/v2/index.js +2 -1
  173. package/tabs/index.tsx +1 -0
  174. package/tabs/interface.ts +1 -0
  175. package/tag/index.tsx +2 -3
  176. package/tag/interface.ts +1 -0
  177. package/tagInput/index.tsx +8 -4
  178. package/timePicker/TimeInput.tsx +5 -3
  179. package/timePicker/TimePicker.tsx +2 -0
  180. package/tooltip/index.tsx +7 -2
  181. package/tree/index.tsx +13 -2
  182. package/tree/treeNode.tsx +11 -13
  183. package/treeSelect/_story/treeSelect.stories.js +38 -1
  184. package/treeSelect/index.tsx +13 -3
  185. package/upload/_story/upload.stories.tsx +9 -6
@@ -236,7 +236,8 @@ Radio.propTypes = {
236
236
  addonStyle: PropTypes.object,
237
237
  addonClassName: PropTypes.string,
238
238
  type: PropTypes.oneOf([strings.TYPE_DEFAULT, strings.TYPE_BUTTON, strings.TYPE_CARD, strings.TYPE_PURECARD]),
239
- 'aria-label': PropTypes.string
239
+ 'aria-label': PropTypes.string,
240
+ preventScroll: PropTypes.bool
240
241
  };
241
242
  Radio.defaultProps = {
242
243
  autoFocus: false,
@@ -20,6 +20,7 @@ export interface RadioInnerProps extends BaseProps {
20
20
  focusInner?: boolean;
21
21
  onInputFocus?: (e: any) => void;
22
22
  onInputBlur?: (e: any) => void;
23
+ preventScroll?: boolean;
23
24
  }
24
25
  interface RadioInnerState {
25
26
  checked?: boolean;
@@ -36,6 +37,7 @@ declare class RadioInner extends BaseComponent<RadioInnerProps, RadioInnerState>
36
37
  focusInner: PropTypes.Requireable<boolean>;
37
38
  onInputFocus: PropTypes.Requireable<(...args: any[]) => any>;
38
39
  onInputBlur: PropTypes.Requireable<(...args: any[]) => any>;
40
+ preventScroll: PropTypes.Requireable<boolean>;
39
41
  };
40
42
  static defaultProps: {
41
43
  onChange: (...args: any[]) => void;
@@ -54,7 +54,12 @@ class RadioInner extends BaseComponent {
54
54
  }
55
55
 
56
56
  focus() {
57
- this.inputEntity.focus();
57
+ const {
58
+ preventScroll
59
+ } = this.props;
60
+ this.inputEntity.focus({
61
+ preventScroll
62
+ });
58
63
  }
59
64
 
60
65
  onChange(e) {
@@ -125,7 +130,8 @@ RadioInner.propTypes = {
125
130
  'aria-label': PropTypes.string,
126
131
  focusInner: PropTypes.bool,
127
132
  onInputFocus: PropTypes.func,
128
- onInputBlur: PropTypes.func
133
+ onInputBlur: PropTypes.func,
134
+ preventScroll: PropTypes.bool
129
135
  };
130
136
  RadioInner.defaultProps = {
131
137
  onChange: _noop,
@@ -34,12 +34,14 @@ export interface RatingProps {
34
34
  size?: 'small' | 'default' | number;
35
35
  tooltips?: string[];
36
36
  id?: string;
37
+ preventScroll?: boolean;
37
38
  }
38
39
  export interface RatingState {
39
40
  value: number;
40
41
  hoverValue: number;
41
42
  focused: boolean;
42
43
  clearedValue: number;
44
+ emptyStarFocusVisible: boolean;
43
45
  }
44
46
  export default class Rating extends BaseComponent<RatingProps, RatingState> {
45
47
  static contextType: React.Context<import("../configProvider/context").ContextValue>;
@@ -70,6 +72,7 @@ export default class Rating extends BaseComponent<RatingProps, RatingState> {
70
72
  size: PropTypes.Requireable<number | "default" | "small">;
71
73
  tooltips: PropTypes.Requireable<string[]>;
72
74
  id: PropTypes.Requireable<string>;
75
+ preventScroll: PropTypes.Requireable<boolean>;
73
76
  };
74
77
  static defaultProps: {
75
78
  defaultValue: number;
@@ -101,5 +104,9 @@ export default class Rating extends BaseComponent<RatingProps, RatingState> {
101
104
  blur: () => void;
102
105
  saveRef: (index: number) => (node: Item) => void;
103
106
  saveRate: (node: HTMLUListElement) => void;
107
+ handleStarFocusVisible: (event: React.FocusEvent) => void;
108
+ handleStarBlur: (event: React.FocusEvent) => void;
109
+ getAriaLabelPrefix: () => string;
110
+ getItemList: (ariaLabelPrefix: string) => JSX.Element[];
104
111
  render(): JSX.Element;
105
112
  }
@@ -1,7 +1,7 @@
1
- import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
2
1
  import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
3
2
  import _keysInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/keys";
4
3
  import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
4
+ import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
5
5
  import React from 'react';
6
6
  import ReactDOM from 'react-dom';
7
7
  import BaseComponent from '../_base/baseComponent';
@@ -48,11 +48,14 @@ export default class Rating extends BaseComponent {
48
48
 
49
49
  this.focus = () => {
50
50
  const {
51
- disabled
51
+ disabled,
52
+ preventScroll
52
53
  } = this.props;
53
54
 
54
55
  if (!disabled) {
55
- this.rate.focus();
56
+ this.rate.focus({
57
+ preventScroll
58
+ });
56
59
  }
57
60
  };
58
61
 
@@ -74,13 +77,96 @@ export default class Rating extends BaseComponent {
74
77
  this.rate = node;
75
78
  };
76
79
 
80
+ this.handleStarFocusVisible = event => {
81
+ this.foundation.handleStarFocusVisible(event);
82
+ };
83
+
84
+ this.handleStarBlur = event => {
85
+ this.foundation.handleStarBlur(event);
86
+ };
87
+
88
+ this.getAriaLabelPrefix = () => {
89
+ if (this.props['aria-label']) {
90
+ return this.props['aria-label'];
91
+ }
92
+
93
+ let prefix = 'star';
94
+ const {
95
+ character
96
+ } = this.props;
97
+
98
+ if (typeof character === 'string') {
99
+ prefix = character;
100
+ }
101
+
102
+ return prefix;
103
+ };
104
+
105
+ this.getItemList = ariaLabelPrefix => {
106
+ var _context, _context2;
107
+
108
+ const {
109
+ count,
110
+ allowHalf,
111
+ prefixCls,
112
+ disabled,
113
+ character,
114
+ size,
115
+ tooltips
116
+ } = this.props;
117
+ const {
118
+ value,
119
+ hoverValue,
120
+ focused
121
+ } = this.state; // index == count is for Empty rating
122
+
123
+ const itemList = _mapInstanceProperty(_context = [..._keysInstanceProperty(_context2 = Array(count + 1)).call(_context2)]).call(_context, ind => {
124
+ const content = /*#__PURE__*/React.createElement(Item, {
125
+ ref: this.saveRef(ind),
126
+ index: ind,
127
+ count: count,
128
+ prefixCls: "".concat(prefixCls, "-star"),
129
+ allowHalf: allowHalf,
130
+ value: hoverValue === undefined ? value : hoverValue,
131
+ onClick: disabled ? noop : this.onClick,
132
+ onHover: disabled ? noop : this.onHover,
133
+ key: ind,
134
+ disabled: disabled,
135
+ character: character,
136
+ focused: focused,
137
+ size: ind === count ? 0 : size,
138
+ ariaLabelPrefix: ariaLabelPrefix,
139
+ onFocus: disabled || count !== ind ? noop : this.handleStarFocusVisible,
140
+ onBlur: disabled || count !== ind ? noop : this.handleStarBlur
141
+ });
142
+
143
+ if (tooltips) {
144
+ var _context3;
145
+
146
+ const text = tooltips[ind] ? tooltips[ind] : '';
147
+ const showTips = hoverValue - 1 === ind;
148
+ return /*#__PURE__*/React.createElement(Tooltip, {
149
+ visible: showTips,
150
+ trigger: "custom",
151
+ content: text,
152
+ key: _concatInstanceProperty(_context3 = "".concat(ind, "-")).call(_context3, showTips)
153
+ }, content);
154
+ }
155
+
156
+ return content;
157
+ });
158
+
159
+ return itemList;
160
+ };
161
+
77
162
  const value = props.value === undefined ? props.defaultValue : props.value;
78
163
  this.stars = {};
79
164
  this.state = {
80
165
  value,
81
166
  focused: false,
82
167
  hoverValue: undefined,
83
- clearedValue: null
168
+ clearedValue: null,
169
+ emptyStarFocusVisible: false
84
170
  };
85
171
  this.foundation = new RatingFoundation(this.adapter);
86
172
  }
@@ -99,11 +185,16 @@ export default class Rating extends BaseComponent {
99
185
  return _Object$assign(_Object$assign({}, super.adapter), {
100
186
  focus: () => {
101
187
  const {
102
- disabled
188
+ disabled,
189
+ count
103
190
  } = this.props;
191
+ const {
192
+ value
193
+ } = this.state;
104
194
 
105
195
  if (!disabled) {
106
- this.rate.focus();
196
+ const index = Math.ceil(value) - 1;
197
+ this.stars[index < 0 ? count : index].starFocus();
107
198
  }
108
199
  },
109
200
  getStarDOM: index => {
@@ -165,6 +256,11 @@ export default class Rating extends BaseComponent {
165
256
  focused: false
166
257
  });
167
258
  onKeyDown && onKeyDown(e);
259
+ },
260
+ setEmptyStarFocusVisible: focusVisible => {
261
+ this.setState({
262
+ emptyStarFocusVisible: focusVisible
263
+ });
168
264
  }
169
265
  });
170
266
  }
@@ -178,77 +274,48 @@ export default class Rating extends BaseComponent {
178
274
  }
179
275
 
180
276
  render() {
181
- var _context, _context2;
277
+ var _context4, _context5, _context6;
182
278
 
183
279
  const {
184
- count,
185
- allowHalf,
186
280
  style,
187
281
  prefixCls,
188
282
  disabled,
189
283
  className,
190
- character,
191
- tabIndex,
192
- size,
193
- tooltips,
194
- id
284
+ id,
285
+ count,
286
+ tabIndex
195
287
  } = this.props;
196
288
  const {
197
289
  value,
198
- hoverValue,
199
- focused
290
+ emptyStarFocusVisible
200
291
  } = this.state;
292
+ const ariaLabelPrefix = this.getAriaLabelPrefix();
201
293
 
202
- const itemList = _mapInstanceProperty(_context = [..._keysInstanceProperty(_context2 = Array(count)).call(_context2)]).call(_context, ind => {
203
- const content = /*#__PURE__*/React.createElement(Item, {
204
- ref: this.saveRef(ind),
205
- index: ind,
206
- count: count,
207
- prefixCls: "".concat(prefixCls, "-star"),
208
- allowHalf: allowHalf,
209
- value: hoverValue === undefined ? value : hoverValue,
210
- onClick: this.onClick,
211
- onHover: this.onHover,
212
- key: ind,
213
- disabled: disabled,
214
- character: character,
215
- focused: focused,
216
- size: size
217
- });
218
-
219
- if (tooltips) {
220
- var _context3;
221
-
222
- const text = tooltips[ind] ? tooltips[ind] : '';
223
- const showTips = hoverValue - 1 === ind;
224
- return /*#__PURE__*/React.createElement(Tooltip, {
225
- visible: showTips,
226
- trigger: "custom",
227
- content: text,
228
- key: _concatInstanceProperty(_context3 = "".concat(ind, "-")).call(_context3, showTips)
229
- }, content);
230
- }
231
-
232
- return content;
233
- });
294
+ const ariaLabel = _concatInstanceProperty(_context4 = _concatInstanceProperty(_context5 = _concatInstanceProperty(_context6 = "Rating: ".concat(value, " of ")).call(_context6, count, " ")).call(_context5, ariaLabelPrefix)).call(_context4, value === 1 ? '' : 's', ",");
234
295
 
296
+ const itemList = this.getItemList(ariaLabelPrefix);
235
297
  const listCls = cls(prefixCls, {
236
- ["".concat(prefixCls, "-disabled")]: disabled
298
+ ["".concat(prefixCls, "-disabled")]: disabled,
299
+ ["".concat(prefixCls, "-focus")]: emptyStarFocusVisible
237
300
  }, className);
238
- return /*#__PURE__*/React.createElement("ul", {
239
- "aria-label": this.props['aria-label'],
240
- "aria-labelledby": this.props['aria-labelledby'],
241
- "aria-describedby": this.props['aria-describedby'],
242
- className: listCls,
243
- style: style,
244
- onMouseLeave: disabled ? null : this.onMouseLeave,
245
- tabIndex: disabled ? -1 : tabIndex,
246
- onFocus: disabled ? null : this.onFocus,
247
- onBlur: disabled ? null : this.onBlur,
248
- onKeyDown: disabled ? null : this.onKeyDown,
249
- ref: this.saveRate,
250
- id: id
251
- }, itemList);
301
+ return (
302
+ /*#__PURE__*/
303
+ // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
304
+ React.createElement("ul", {
305
+ "aria-label": ariaLabel,
306
+ "aria-labelledby": this.props['aria-labelledby'],
307
+ "aria-describedby": this.props['aria-describedby'],
308
+ className: listCls,
309
+ style: style,
310
+ onMouseLeave: disabled ? noop : this.onMouseLeave,
311
+ tabIndex: disabled ? -1 : tabIndex,
312
+ onFocus: disabled ? noop : this.onFocus,
313
+ onBlur: disabled ? noop : this.onBlur,
314
+ onKeyDown: disabled ? noop : this.onKeyDown,
315
+ ref: this.saveRate,
316
+ id: id
317
+ }, itemList)
318
+ );
252
319
  }
253
320
 
254
321
  }
@@ -279,7 +346,8 @@ Rating.propTypes = {
279
346
  autoFocus: PropTypes.bool,
280
347
  size: PropTypes.oneOfType([PropTypes.oneOf(strings.SIZE_SET), PropTypes.number]),
281
348
  tooltips: PropTypes.arrayOf(PropTypes.string),
282
- id: PropTypes.string
349
+ id: PropTypes.string,
350
+ preventScroll: PropTypes.bool
283
351
  };
284
352
  Rating.defaultProps = {
285
353
  defaultValue: 0,
@@ -290,6 +358,6 @@ Rating.defaultProps = {
290
358
  prefixCls: cssClasses.PREFIX,
291
359
  onChange: noop,
292
360
  onHoverChange: noop,
293
- tabIndex: 0,
361
+ tabIndex: -1,
294
362
  size: 'default'
295
363
  };
@@ -1,9 +1,11 @@
1
- import React, { PureComponent } from 'react';
1
+ import React from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
  import { strings } from '@douyinfe/semi-foundation/lib/es/rating/constants';
4
4
  import '@douyinfe/semi-foundation/lib/es/rating/rating.css';
5
+ import { RatingItemFoundation, RatingItemAdapter } from '@douyinfe/semi-foundation/lib/es/rating/foundation';
6
+ import BaseComponent, { BaseProps } from '../_base/baseComponent';
5
7
  declare type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
6
- export interface RatingItemProps {
8
+ export interface RatingItemProps extends BaseProps {
7
9
  value: number;
8
10
  index: number;
9
11
  prefixCls: string;
@@ -14,10 +16,18 @@ export interface RatingItemProps {
14
16
  focused: boolean;
15
17
  disabled: boolean;
16
18
  count: number;
19
+ ariaLabelPrefix: string;
17
20
  size: number | ArrayElement<typeof strings.SIZE_SET>;
18
21
  'aria-describedby'?: React.AriaAttributes['aria-describedby'];
22
+ onFocus?: (e: React.FocusEvent) => void;
23
+ onBlur?: (e: React.FocusEvent) => void;
24
+ preventScroll?: boolean;
19
25
  }
20
- export default class Item extends PureComponent<RatingItemProps> {
26
+ export interface RatingItemState {
27
+ firstStarFocus: boolean;
28
+ secondStarFocus: boolean;
29
+ }
30
+ export default class Item extends BaseComponent<RatingItemProps, RatingItemState> {
21
31
  static propTypes: {
22
32
  value: PropTypes.Requireable<number>;
23
33
  index: PropTypes.Requireable<number>;
@@ -29,12 +39,26 @@ export default class Item extends PureComponent<RatingItemProps> {
29
39
  focused: PropTypes.Requireable<boolean>;
30
40
  disabled: PropTypes.Requireable<boolean>;
31
41
  count: PropTypes.Requireable<number>;
42
+ ariaLabelPrefix: PropTypes.Requireable<string>;
32
43
  size: PropTypes.Requireable<number | "default" | "small">;
33
44
  'aria-describedby': PropTypes.Requireable<string>;
45
+ onFocus: PropTypes.Requireable<(...args: any[]) => any>;
46
+ onBlur: PropTypes.Requireable<(...args: any[]) => any>;
47
+ preventScroll: PropTypes.Requireable<boolean>;
34
48
  };
49
+ foundation: RatingItemFoundation;
50
+ constructor(props: RatingItemProps);
51
+ get adapter(): RatingItemAdapter<RatingItemProps, RatingItemState>;
52
+ firstStar: HTMLDivElement;
53
+ secondStar: HTMLDivElement;
35
54
  onHover: React.MouseEventHandler;
36
55
  onClick: React.MouseEventHandler;
56
+ onFocus: (e: any, star: any) => void;
57
+ onBlur: (e: any, star: any) => void;
37
58
  onKeyDown: React.KeyboardEventHandler;
59
+ starFocus: () => void;
60
+ saveFirstStar: (node: HTMLDivElement) => void;
61
+ saveSecondStar: (node: HTMLDivElement) => void;
38
62
  render(): JSX.Element;
39
63
  }
40
64
  export {};
@@ -1,14 +1,18 @@
1
- import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
2
1
  import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
3
- import React, { PureComponent } from 'react';
2
+ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
3
+ import React from 'react';
4
4
  import cls from 'classnames';
5
5
  import PropTypes from 'prop-types';
6
- import { strings } from '@douyinfe/semi-foundation/lib/es/rating/constants';
6
+ import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/rating/constants';
7
7
  import '@douyinfe/semi-foundation/lib/es/rating/rating.css';
8
8
  import { IconStar } from '@douyinfe/semi-icons';
9
- export default class Item extends PureComponent {
10
- constructor() {
11
- super(...arguments);
9
+ import { RatingItemFoundation } from '@douyinfe/semi-foundation/lib/es/rating/foundation';
10
+ import BaseComponent from '../_base/baseComponent';
11
+ export default class Item extends BaseComponent {
12
+ constructor(props) {
13
+ super(props);
14
+ this.firstStar = null;
15
+ this.secondStar = null;
12
16
 
13
17
  this.onHover = e => {
14
18
  const {
@@ -26,6 +30,22 @@ export default class Item extends PureComponent {
26
30
  onClick(e, index);
27
31
  };
28
32
 
33
+ this.onFocus = (e, star) => {
34
+ const {
35
+ onFocus
36
+ } = this.props;
37
+ onFocus && onFocus(e);
38
+ this.foundation.handleFocusVisible(e, star);
39
+ };
40
+
41
+ this.onBlur = (e, star) => {
42
+ const {
43
+ onBlur
44
+ } = this.props;
45
+ onBlur && onBlur(e);
46
+ this.foundation.handleBlur(e, star);
47
+ };
48
+
29
49
  this.onKeyDown = e => {
30
50
  const {
31
51
  onClick,
@@ -36,10 +56,57 @@ export default class Item extends PureComponent {
36
56
  onClick(e, index);
37
57
  }
38
58
  };
59
+
60
+ this.starFocus = () => {
61
+ const {
62
+ value,
63
+ index,
64
+ preventScroll
65
+ } = this.props;
66
+
67
+ if (value - index === 0.5) {
68
+ this.firstStar.focus({
69
+ preventScroll
70
+ });
71
+ } else {
72
+ this.secondStar.focus({
73
+ preventScroll
74
+ });
75
+ }
76
+ };
77
+
78
+ this.saveFirstStar = node => {
79
+ this.firstStar = node;
80
+ };
81
+
82
+ this.saveSecondStar = node => {
83
+ this.secondStar = node;
84
+ };
85
+
86
+ this.state = {
87
+ firstStarFocus: false,
88
+ secondStarFocus: false
89
+ };
90
+ this.foundation = new RatingItemFoundation(this.adapter);
91
+ }
92
+
93
+ get adapter() {
94
+ return _Object$assign(_Object$assign({}, super.adapter), {
95
+ setFirstStarFocus: value => {
96
+ this.setState({
97
+ firstStarFocus: value
98
+ });
99
+ },
100
+ setSecondStarFocus: value => {
101
+ this.setState({
102
+ secondStarFocus: value
103
+ });
104
+ }
105
+ });
39
106
  }
40
107
 
41
108
  render() {
42
- var _context;
109
+ var _context, _context2, _context3, _context4;
43
110
 
44
111
  const {
45
112
  index,
@@ -50,18 +117,21 @@ export default class Item extends PureComponent {
50
117
  disabled,
51
118
  allowHalf,
52
119
  focused,
53
- size
120
+ size,
121
+ ariaLabelPrefix
54
122
  } = this.props;
123
+ const {
124
+ firstStarFocus,
125
+ secondStarFocus
126
+ } = this.state;
55
127
  const starValue = index + 1;
56
- const diff = starValue - value;
57
- const isFocused = value === 0 && index === 0 && focused; // const isHalf = allowHalf && value + 0.5 === starValue;
128
+ const diff = starValue - value; // const isHalf = allowHalf && value + 0.5 === starValue;
58
129
 
59
130
  const isHalf = allowHalf && diff < 1 && diff > 0;
60
- const firstWidth = isHalf ? 1 - diff : 0.5;
131
+ const firstWidth = 1 - diff;
61
132
  const isFull = starValue <= value;
62
133
  const isCustomSize = typeof size === 'number';
63
134
  const starCls = cls(prefixCls, {
64
- ["".concat(prefixCls, "-focused")]: isFocused,
65
135
  ["".concat(prefixCls, "-half")]: isHalf,
66
136
  ["".concat(prefixCls, "-full")]: isFull,
67
137
  [_concatInstanceProperty(_context = "".concat(prefixCls, "-")).call(_context, size)]: !isCustomSize
@@ -73,34 +143,73 @@ export default class Item extends PureComponent {
73
143
  } : {};
74
144
  const iconSize = isCustomSize ? 'inherit' : size === 'small' ? 'default' : 'extra-large';
75
145
  const content = character ? character : /*#__PURE__*/React.createElement(IconStar, {
76
- size: iconSize
146
+ size: iconSize,
147
+ style: {
148
+ display: 'block'
149
+ }
77
150
  });
78
- return /*#__PURE__*/React.createElement("li", {
79
- className: starCls,
80
- style: _Object$assign({}, sizeStyle)
81
- }, /*#__PURE__*/React.createElement("div", {
151
+ const isEmpty = index === count;
152
+ const starWrapCls = cls("".concat(prefixCls, "-wrapper"), {
153
+ ["".concat(prefixCls, "-disabled")]: disabled,
154
+ ["".concat(cssClasses.PREFIX, "-focus")]: (firstStarFocus || secondStarFocus) && value !== 0
155
+ });
156
+ const starWrapProps = {
82
157
  onClick: disabled ? null : this.onClick,
83
158
  onKeyDown: disabled ? null : this.onKeyDown,
84
159
  onMouseMove: disabled ? null : this.onHover,
160
+ className: starWrapCls
161
+ };
162
+ const AriaSetSize = allowHalf ? count * 2 + 1 : count + 1;
163
+ const firstStarProps = {
164
+ ref: this.saveFirstStar,
165
+ role: "radio",
166
+ 'aria-checked': value === index + 0.5,
167
+ 'aria-posinset': 2 * index + 1,
168
+ 'aria-setsize': AriaSetSize,
169
+ 'aria-disabled': disabled,
170
+ 'aria-label': _concatInstanceProperty(_context2 = "".concat(index + 0.5, " ")).call(_context2, ariaLabelPrefix, "s"),
171
+ 'aria-labelledby': this.props['aria-describedby'],
172
+ 'aria-describedby': this.props['aria-describedby'],
173
+ className: cls("".concat(prefixCls, "-first"), "".concat(cssClasses.PREFIX, "-no-focus")),
174
+ tabIndex: !disabled && value === index + 0.5 ? 0 : -1,
175
+ onFocus: e => {
176
+ this.onFocus(e, 'first');
177
+ },
178
+ onBlur: e => {
179
+ this.onBlur(e, 'first');
180
+ }
181
+ };
182
+ const secondStarTabIndex = !disabled && (value === index + 1 || isEmpty && value === 0) ? 0 : -1;
183
+ const secondStarProps = {
184
+ ref: this.saveSecondStar,
85
185
  role: "radio",
86
- "aria-checked": value > index ? 'true' : 'false',
87
- "aria-posinset": index + 1,
88
- "aria-setsize": count,
89
- "aria-disabled": disabled,
90
- "aria-label": "Rating ".concat(index + (isHalf ? 0.5 : 1)),
91
- "aria-labelledby": this.props['aria-describedby'],
92
- "aria-describedby": this.props['aria-describedby'],
93
- tabIndex: 0,
94
- className: "".concat(prefixCls, "-wrapper")
95
- }, /*#__PURE__*/React.createElement("div", {
96
- className: "".concat(prefixCls, "-first"),
186
+ 'aria-checked': isEmpty ? value === 0 : value === index + 1,
187
+ 'aria-posinset': allowHalf ? 2 * (index + 1) : index + 1,
188
+ 'aria-setsize': AriaSetSize,
189
+ 'aria-disabled': disabled,
190
+ 'aria-label': _concatInstanceProperty(_context3 = _concatInstanceProperty(_context4 = "".concat(isEmpty ? 0 : index + 1, " ")).call(_context4, ariaLabelPrefix)).call(_context3, index === 0 ? '' : 's'),
191
+ 'aria-labelledby': this.props['aria-describedby'],
192
+ 'aria-describedby': this.props['aria-describedby'],
193
+ className: cls("".concat(prefixCls, "-second"), "".concat(cssClasses.PREFIX, "-no-focus")),
194
+ tabIndex: secondStarTabIndex,
195
+ onFocus: e => {
196
+ this.onFocus(e, 'second');
197
+ },
198
+ onBlur: e => {
199
+ this.onBlur(e, 'second');
200
+ }
201
+ };
202
+ return /*#__PURE__*/React.createElement("li", {
203
+ className: starCls,
204
+ style: _Object$assign({}, sizeStyle),
205
+ key: index
206
+ }, /*#__PURE__*/React.createElement("div", _Object$assign({}, starWrapProps), allowHalf && !isEmpty && /*#__PURE__*/React.createElement("div", _Object$assign({}, firstStarProps, {
97
207
  style: {
98
208
  width: "".concat(firstWidth * 100, "%")
99
209
  }
100
- }, content), /*#__PURE__*/React.createElement("div", {
101
- className: "".concat(prefixCls, "-second"),
210
+ }), content), /*#__PURE__*/React.createElement("div", _Object$assign({}, secondStarProps, {
102
211
  "x-semi-prop": "character"
103
- }, content)));
212
+ }), content)));
104
213
  }
105
214
 
106
215
  }
@@ -115,6 +224,10 @@ Item.propTypes = {
115
224
  focused: PropTypes.bool,
116
225
  disabled: PropTypes.bool,
117
226
  count: PropTypes.number,
227
+ ariaLabelPrefix: PropTypes.string,
118
228
  size: PropTypes.oneOfType([PropTypes.oneOf(strings.SIZE_SET), PropTypes.number]),
119
- 'aria-describedby': PropTypes.string
229
+ 'aria-describedby': PropTypes.string,
230
+ onFocus: PropTypes.func,
231
+ onBlur: PropTypes.func,
232
+ preventScroll: PropTypes.bool
120
233
  };
@@ -122,6 +122,7 @@ export declare type SelectProps = {
122
122
  onBlur?: (e: React.FocusEvent) => void;
123
123
  onListScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
124
124
  children?: React.ReactNode;
125
+ preventScroll?: boolean;
125
126
  } & Pick<TooltipProps, 'spacing' | 'getPopupContainer' | 'motion' | 'autoAdjustOverflow' | 'mouseLeaveDelay' | 'mouseEnterDelay' | 'stopPropagation'> & React.RefAttributes<any>;
126
127
  export interface SelectState {
127
128
  isOpen: boolean;
@@ -214,6 +215,7 @@ declare class Select extends BaseComponent<SelectProps, SelectState> {
214
215
  renderOptionItem: PropTypes.Requireable<(...args: any[]) => any>;
215
216
  onListScroll: PropTypes.Requireable<(...args: any[]) => any>;
216
217
  arrowIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
218
+ preventScroll: PropTypes.Requireable<boolean>;
217
219
  };
218
220
  static defaultProps: Partial<SelectProps>;
219
221
  inputRef: React.RefObject<HTMLInputElement>;