@workday/canvas-kit-preview-react 15.0.0-alpha.0074-next.0 → 15.0.0-alpha.0076-next.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 (125) hide show
  1. package/dist/commonjs/index.d.ts +0 -2
  2. package/dist/commonjs/index.d.ts.map +1 -1
  3. package/dist/commonjs/index.js +0 -2
  4. package/dist/commonjs/multi-select/lib/MultiSelectedItem.js +1 -1
  5. package/dist/es6/index.d.ts +0 -2
  6. package/dist/es6/index.d.ts.map +1 -1
  7. package/dist/es6/index.js +0 -2
  8. package/dist/es6/multi-select/lib/MultiSelectedItem.js +1 -1
  9. package/index.ts +0 -2
  10. package/multi-select/lib/MultiSelectedItem.tsx +1 -1
  11. package/package.json +4 -4
  12. package/dist/commonjs/pill/index.d.ts +0 -8
  13. package/dist/commonjs/pill/index.d.ts.map +0 -1
  14. package/dist/commonjs/pill/index.js +0 -23
  15. package/dist/commonjs/pill/lib/Pill.d.ts +0 -265
  16. package/dist/commonjs/pill/lib/Pill.d.ts.map +0 -1
  17. package/dist/commonjs/pill/lib/Pill.js +0 -147
  18. package/dist/commonjs/pill/lib/PillAvatar.d.ts +0 -526
  19. package/dist/commonjs/pill/lib/PillAvatar.d.ts.map +0 -1
  20. package/dist/commonjs/pill/lib/PillAvatar.js +0 -22
  21. package/dist/commonjs/pill/lib/PillCount.d.ts +0 -12
  22. package/dist/commonjs/pill/lib/PillCount.d.ts.map +0 -1
  23. package/dist/commonjs/pill/lib/PillCount.js +0 -21
  24. package/dist/commonjs/pill/lib/PillIcon.d.ts +0 -54
  25. package/dist/commonjs/pill/lib/PillIcon.d.ts.map +0 -1
  26. package/dist/commonjs/pill/lib/PillIcon.js +0 -20
  27. package/dist/commonjs/pill/lib/PillIconButton.d.ts +0 -148
  28. package/dist/commonjs/pill/lib/PillIconButton.d.ts.map +0 -1
  29. package/dist/commonjs/pill/lib/PillIconButton.js +0 -21
  30. package/dist/commonjs/pill/lib/PillLabel.d.ts +0 -14
  31. package/dist/commonjs/pill/lib/PillLabel.d.ts.map +0 -1
  32. package/dist/commonjs/pill/lib/PillLabel.js +0 -17
  33. package/dist/commonjs/pill/lib/usePillModel.d.ts +0 -46
  34. package/dist/commonjs/pill/lib/usePillModel.d.ts.map +0 -1
  35. package/dist/commonjs/pill/lib/usePillModel.js +0 -24
  36. package/dist/commonjs/select/index.d.ts +0 -3
  37. package/dist/commonjs/select/index.d.ts.map +0 -1
  38. package/dist/commonjs/select/index.js +0 -17
  39. package/dist/commonjs/select/lib/Select.d.ts +0 -31
  40. package/dist/commonjs/select/lib/Select.d.ts.map +0 -1
  41. package/dist/commonjs/select/lib/Select.js +0 -486
  42. package/dist/commonjs/select/lib/SelectBase.d.ts +0 -165
  43. package/dist/commonjs/select/lib/SelectBase.d.ts.map +0 -1
  44. package/dist/commonjs/select/lib/SelectBase.js +0 -235
  45. package/dist/commonjs/select/lib/SelectMenu.d.ts +0 -45
  46. package/dist/commonjs/select/lib/SelectMenu.d.ts.map +0 -1
  47. package/dist/commonjs/select/lib/SelectMenu.js +0 -195
  48. package/dist/commonjs/select/lib/SelectOption.d.ts +0 -38
  49. package/dist/commonjs/select/lib/SelectOption.d.ts.map +0 -1
  50. package/dist/commonjs/select/lib/SelectOption.js +0 -73
  51. package/dist/commonjs/select/lib/scrolling.d.ts +0 -5
  52. package/dist/commonjs/select/lib/scrolling.d.ts.map +0 -1
  53. package/dist/commonjs/select/lib/scrolling.js +0 -36
  54. package/dist/commonjs/select/lib/types.d.ts +0 -37
  55. package/dist/commonjs/select/lib/types.d.ts.map +0 -1
  56. package/dist/commonjs/select/lib/types.js +0 -2
  57. package/dist/commonjs/select/lib/utils.d.ts +0 -10
  58. package/dist/commonjs/select/lib/utils.d.ts.map +0 -1
  59. package/dist/commonjs/select/lib/utils.js +0 -27
  60. package/dist/es6/pill/index.d.ts +0 -8
  61. package/dist/es6/pill/index.d.ts.map +0 -1
  62. package/dist/es6/pill/index.js +0 -7
  63. package/dist/es6/pill/lib/Pill.d.ts +0 -265
  64. package/dist/es6/pill/lib/Pill.d.ts.map +0 -1
  65. package/dist/es6/pill/lib/Pill.js +0 -144
  66. package/dist/es6/pill/lib/PillAvatar.d.ts +0 -526
  67. package/dist/es6/pill/lib/PillAvatar.d.ts.map +0 -1
  68. package/dist/es6/pill/lib/PillAvatar.js +0 -19
  69. package/dist/es6/pill/lib/PillCount.d.ts +0 -12
  70. package/dist/es6/pill/lib/PillCount.d.ts.map +0 -1
  71. package/dist/es6/pill/lib/PillCount.js +0 -18
  72. package/dist/es6/pill/lib/PillIcon.d.ts +0 -54
  73. package/dist/es6/pill/lib/PillIcon.d.ts.map +0 -1
  74. package/dist/es6/pill/lib/PillIcon.js +0 -17
  75. package/dist/es6/pill/lib/PillIconButton.d.ts +0 -148
  76. package/dist/es6/pill/lib/PillIconButton.d.ts.map +0 -1
  77. package/dist/es6/pill/lib/PillIconButton.js +0 -18
  78. package/dist/es6/pill/lib/PillLabel.d.ts +0 -14
  79. package/dist/es6/pill/lib/PillLabel.d.ts.map +0 -1
  80. package/dist/es6/pill/lib/PillLabel.js +0 -14
  81. package/dist/es6/pill/lib/usePillModel.d.ts +0 -46
  82. package/dist/es6/pill/lib/usePillModel.d.ts.map +0 -1
  83. package/dist/es6/pill/lib/usePillModel.js +0 -21
  84. package/dist/es6/select/index.d.ts +0 -3
  85. package/dist/es6/select/index.d.ts.map +0 -1
  86. package/dist/es6/select/index.js +0 -1
  87. package/dist/es6/select/lib/Select.d.ts +0 -31
  88. package/dist/es6/select/lib/Select.d.ts.map +0 -1
  89. package/dist/es6/select/lib/Select.js +0 -460
  90. package/dist/es6/select/lib/SelectBase.d.ts +0 -165
  91. package/dist/es6/select/lib/SelectBase.d.ts.map +0 -1
  92. package/dist/es6/select/lib/SelectBase.js +0 -208
  93. package/dist/es6/select/lib/SelectMenu.d.ts +0 -45
  94. package/dist/es6/select/lib/SelectMenu.d.ts.map +0 -1
  95. package/dist/es6/select/lib/SelectMenu.js +0 -191
  96. package/dist/es6/select/lib/SelectOption.d.ts +0 -38
  97. package/dist/es6/select/lib/SelectOption.d.ts.map +0 -1
  98. package/dist/es6/select/lib/SelectOption.js +0 -69
  99. package/dist/es6/select/lib/scrolling.d.ts +0 -5
  100. package/dist/es6/select/lib/scrolling.d.ts.map +0 -1
  101. package/dist/es6/select/lib/scrolling.js +0 -32
  102. package/dist/es6/select/lib/types.d.ts +0 -37
  103. package/dist/es6/select/lib/types.d.ts.map +0 -1
  104. package/dist/es6/select/lib/types.js +0 -1
  105. package/dist/es6/select/lib/utils.d.ts +0 -10
  106. package/dist/es6/select/lib/utils.d.ts.map +0 -1
  107. package/dist/es6/select/lib/utils.js +0 -22
  108. package/pill/index.ts +0 -7
  109. package/pill/lib/Pill.tsx +0 -285
  110. package/pill/lib/PillAvatar.tsx +0 -35
  111. package/pill/lib/PillCount.tsx +0 -44
  112. package/pill/lib/PillIcon.tsx +0 -32
  113. package/pill/lib/PillIconButton.tsx +0 -86
  114. package/pill/lib/PillLabel.tsx +0 -32
  115. package/pill/lib/usePillModel.tsx +0 -23
  116. package/pill/package.json +0 -6
  117. package/select/index.ts +0 -8
  118. package/select/lib/Select.tsx +0 -595
  119. package/select/lib/SelectBase.tsx +0 -493
  120. package/select/lib/SelectMenu.tsx +0 -304
  121. package/select/lib/SelectOption.tsx +0 -133
  122. package/select/lib/scrolling.ts +0 -42
  123. package/select/lib/types.ts +0 -37
  124. package/select/lib/utils.ts +0 -30
  125. package/select/package.json +0 -6
@@ -1,460 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import * as React from 'react';
3
- import { ErrorType, createComponent, useForkRef, generateUniqueId, } from '@workday/canvas-kit-react/common';
4
- import { menuAnimationDuration } from './SelectMenu';
5
- import { SelectBase } from './SelectBase';
6
- import { getCorrectedIndexByValue } from './utils';
7
- class SelectContainer extends React.Component {
8
- constructor(props) {
9
- super(props);
10
- this.state = {
11
- focusedOptionIndex: 0,
12
- menuVisibility: 'closed',
13
- };
14
- this.localButtonRef = React.createRef();
15
- this.inputRef = React.createRef();
16
- this.menuRef = React.createRef();
17
- // For type-ahead functionality
18
- this.keysSoFar = '';
19
- this.clearKeysSoFarTimeout = 500;
20
- // Cached values
21
- this.normalizedOptions = [];
22
- this.areOptionsDefined = () => {
23
- const { options } = this.props;
24
- if (!options || options.length === 0) {
25
- return false;
26
- }
27
- return true;
28
- };
29
- // Store normalized options since the options prop can take on multiple
30
- // forms. It can be an array of strings, an array of objects (sometimes with
31
- // arbitrary keys), or an array that contains both strings and objects
32
- this.setNormalizedOptions = () => {
33
- const { options } = this.props;
34
- // Abort if options weren't defined
35
- if (!this.areOptionsDefined()) {
36
- return;
37
- }
38
- this.normalizedOptions = options.map(option => {
39
- let data = {};
40
- let disabled, id, label, value;
41
- if (typeof option === 'string') {
42
- disabled = false;
43
- id = generateUniqueId();
44
- value = option;
45
- label = option;
46
- }
47
- else {
48
- data = option.data || data;
49
- disabled = !!option.disabled;
50
- id = option.id || generateUniqueId();
51
- value = option.value;
52
- label = option.label || option.value;
53
- }
54
- return {
55
- data,
56
- disabled,
57
- id,
58
- label,
59
- value,
60
- };
61
- });
62
- };
63
- this.getIndexByStartString = (startIndex, startString, endIndex = this.normalizedOptions.length, ignoreDisabled = true) => {
64
- for (let i = startIndex; i < endIndex; i++) {
65
- const label = this.normalizedOptions[i].label.toLowerCase();
66
- if (label.indexOf(startString.toLowerCase()) === 0) {
67
- if (!ignoreDisabled || (ignoreDisabled && !this.normalizedOptions[i].disabled)) {
68
- return i;
69
- }
70
- }
71
- }
72
- return -1;
73
- };
74
- // This helper focuses the next enabled option given a startIndex and a
75
- // direction. If startIndex refers to an enabled option, we focus that option
76
- // immediately. Otherwise, we advance `direction` number of spaces in the options
77
- // array and check again if that index refers to an enabled option.
78
- //
79
- // This is useful for manipulating focus using the keyboard where pressing the
80
- // Up/Down key means "focus the first enabled option above/below the currently
81
- // focused option", or pressing the Home/End key means "focus the first/last
82
- // enabled option on the menu."
83
- this.focusNextEnabledOption = (startIndex, direction) => {
84
- // Ensure direction is non-zero
85
- if (direction === 0) {
86
- return;
87
- }
88
- const numOptions = this.normalizedOptions.length;
89
- let currentIndex = startIndex;
90
- // Check if currentIndex refers to an enabled option. If not, keep moving
91
- // the index in the prescribed direction until we find an enabled option.
92
- while (currentIndex >= 0 &&
93
- currentIndex < numOptions &&
94
- this.normalizedOptions[currentIndex].disabled) {
95
- currentIndex += direction;
96
- }
97
- // Update the focused index only if currentIndex is inbounds and
98
- // refers to an enabled option
99
- if (currentIndex >= 0 &&
100
- currentIndex < numOptions &&
101
- !this.normalizedOptions[currentIndex].disabled) {
102
- this.setState({ focusedOptionIndex: currentIndex });
103
- }
104
- };
105
- this.updateStateFromValue = () => {
106
- this.setState({
107
- focusedOptionIndex: getCorrectedIndexByValue(this.normalizedOptions, this.props.value),
108
- });
109
- };
110
- this.focusButton = () => {
111
- if (this.localButtonRef.current) {
112
- this.localButtonRef.current.focus();
113
- }
114
- };
115
- this.setMenuAnimationTimeout = (callback) => {
116
- if (this.menuAnimationTimer) {
117
- clearTimeout(this.menuAnimationTimer);
118
- }
119
- this.menuAnimationTimer = setTimeout(callback, menuAnimationDuration);
120
- };
121
- this.openMenu = () => {
122
- this.setState({ menuVisibility: 'opening' });
123
- this.setMenuAnimationTimeout(() => {
124
- this.setState({ menuVisibility: 'opened' });
125
- });
126
- };
127
- this.closeMenu = () => {
128
- this.setState({ menuVisibility: 'closing' });
129
- this.setMenuAnimationTimeout(() => {
130
- this.setState({
131
- // Reset the focused option to the currently selected option in case
132
- // the user focused a different option but chose not to select it. The
133
- // next time the menu opens, focus should begin on the selected option.
134
- focusedOptionIndex: getCorrectedIndexByValue(this.normalizedOptions, this.props.value),
135
- menuVisibility: 'closed',
136
- });
137
- });
138
- };
139
- this.toggleMenu = (open) => {
140
- const { menuVisibility } = this.state;
141
- if (open) {
142
- switch (menuVisibility) {
143
- // We're opening a menu which is currently closed: set the menu state
144
- // to open before kicking off openMenu. This allows us to transition
145
- // from 0 opacity in the open state to the targeted 1.0 opacity in
146
- // the opening state.
147
- case 'closed':
148
- this.setState({ menuVisibility: 'open' }, this.openMenu);
149
- break;
150
- // We're opening a menu which is in the process of closing. Since the
151
- // menu isn't closed, there's no need to set the open state: kick off
152
- // openMenu immediately.
153
- case 'close':
154
- case 'closing':
155
- this.openMenu();
156
- break;
157
- // Otherwise, we're opening a menu is already opened or in the process of
158
- // opening; no need to do anything further.
159
- default:
160
- break;
161
- }
162
- }
163
- else {
164
- switch (menuVisibility) {
165
- // We're closing a menu which is currently opened: set the menu state to
166
- // close before kicking off closeMenu.
167
- case 'opened':
168
- this.setState({ menuVisibility: 'close' }, this.closeMenu);
169
- break;
170
- // We're closing a menu which is in the process of opening. Since the
171
- // menu isn't opened, there's no need to set the close state: kick off
172
- // closeMenu immediately.
173
- case 'open':
174
- case 'opening':
175
- this.closeMenu();
176
- break;
177
- // Otherwise, we're closing a menu which is already closed or in the process
178
- // of closing; no need to do anything further.
179
- default:
180
- break;
181
- }
182
- }
183
- };
184
- // Code inspired by: https://stackoverflow.com/a/46012210
185
- // In order for Select to be usable as a controlled component, we
186
- // need to programmatically change the value of the SelectInput
187
- // in such a way that triggers its change event
188
- this.fireChangeEvent = (value) => {
189
- if (this.inputRef && this.inputRef.current) {
190
- const nativeInputValue = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(this.inputRef.current), 'value');
191
- if (nativeInputValue && nativeInputValue.set) {
192
- nativeInputValue.set.call(this.inputRef.current, value);
193
- }
194
- let event;
195
- if (typeof Event === 'function') {
196
- // Modern browsers
197
- event = new Event('change', { bubbles: true });
198
- }
199
- else {
200
- // IE 11
201
- event = document.createEvent('Event');
202
- event.initEvent('change', true, true);
203
- }
204
- this.inputRef.current.dispatchEvent(event);
205
- }
206
- };
207
- this.handleKeyboardTypeAhead = (key, numOptions) => {
208
- // Abort immediately if the menu is the process of closing
209
- if (this.state.menuVisibility === 'closing') {
210
- return;
211
- }
212
- // Set the starting point of the search to one of two locations
213
- // based on the search string so far (keysSoFar):
214
- //
215
- // 1. If the search string is empty, start the search from the
216
- // next option AFTER the currently focused option. For example,
217
- // if the Select is currently focused on "San Francisco", typing
218
- // "s" again advances focus to the next option that begins with "s".
219
- //
220
- // 2. If the search string is populated, start the search from the
221
- // CURRENTLY focused option. For example, if the Select is currently
222
- // focused on "San Francisco", typing "san j" retains focus on
223
- // "San Francisco" as you type "san " (because "san " still matches
224
- // "San Francisco") and then advances focus to "San Jose" after you
225
- // type the "j" at the end.
226
- let start = this.keysSoFar.length === 0
227
- ? this.state.focusedOptionIndex + 1
228
- : this.state.focusedOptionIndex;
229
- // If the starting point is beyond the list of options, reset it
230
- // to the beginning of the list
231
- start = start === numOptions ? 0 : start;
232
- this.keysSoFar += key;
233
- this.startClearKeysSoFarTimer();
234
- // First, look for a match from start to end
235
- let matchIndex;
236
- matchIndex = this.getIndexByStartString(start, this.keysSoFar);
237
- // If a match isn't found between start and end, wrap the search
238
- // around and search again from the beginning (0) to start
239
- if (matchIndex === -1) {
240
- matchIndex = this.getIndexByStartString(0, this.keysSoFar, start);
241
- }
242
- // A match was found...
243
- if (matchIndex > -1) {
244
- if (this.state.menuVisibility === 'closed') {
245
- // If the menu is closed, fire the change event
246
- this.fireChangeEvent(this.normalizedOptions[matchIndex].value);
247
- }
248
- else {
249
- // Otherwise the menu is visible (or at least partially visible);
250
- // focus the matched option
251
- this.setState({ focusedOptionIndex: matchIndex });
252
- }
253
- }
254
- };
255
- this.startClearKeysSoFarTimer = () => {
256
- if (this.clearKeysSoFarTimer) {
257
- clearTimeout(this.clearKeysSoFarTimer);
258
- }
259
- this.clearKeysSoFarTimer = setTimeout(() => {
260
- this.keysSoFar = '';
261
- }, this.clearKeysSoFarTimeout);
262
- };
263
- this.handleClick = (event) => {
264
- const { menuVisibility } = this.state;
265
- switch (menuVisibility) {
266
- // If we click the button while the menu is in the process of closing,
267
- // we want to toggle the menu back on. However, we also need to focus
268
- // the menu since it won't be focused using Popper's onFirstUpdate
269
- // callback (because the menu already exists).
270
- case 'close':
271
- case 'closing':
272
- if (this.menuRef.current) {
273
- this.menuRef.current.focus();
274
- }
275
- this.toggleMenu(true);
276
- break;
277
- case 'closed':
278
- this.toggleMenu(true);
279
- break;
280
- // Otherwise, the menu is opened or in the process of opening; toggle
281
- // the menu off.
282
- default:
283
- this.toggleMenu(false);
284
- break;
285
- }
286
- };
287
- this.handleOptionSelection = (index) => {
288
- // Abort if a disabled option was clicked (we ignore these clicks)
289
- if (this.normalizedOptions[index].disabled) {
290
- return;
291
- }
292
- // Toggle menu off, shift focus back to the button, and fire change event
293
- this.toggleMenu(false);
294
- this.focusButton();
295
- this.fireChangeEvent(this.normalizedOptions[index].value);
296
- };
297
- this.handleMenuCloseOnKeyPress = () => {
298
- // Toggle menu off and shift focus back to the button
299
- this.handleClose();
300
- this.focusButton();
301
- };
302
- this.handleClose = () => {
303
- this.toggleMenu(false);
304
- };
305
- this.handleKeyDown = (event) => {
306
- const { options } = this.props;
307
- const numOptions = options.length;
308
- const { focusedOptionIndex, menuVisibility } = this.state;
309
- let isShortcut = false;
310
- // Check for type-ahead first
311
- if (event.key.length === 1 && event.key.match(/\S/)) {
312
- isShortcut = true;
313
- this.handleKeyboardTypeAhead(event.key, numOptions);
314
- }
315
- else {
316
- switch (event.key) {
317
- case 'ArrowUp':
318
- case 'Up': // IE/Edge specific value
319
- case 'ArrowDown':
320
- case 'Down': // IE/Edge specific value
321
- isShortcut = true;
322
- if (menuVisibility === 'closed' || menuVisibility === 'closing') {
323
- this.toggleMenu(true);
324
- }
325
- else {
326
- const direction = event.key === 'ArrowUp' || event.key === 'Up' ? -1 : 1;
327
- const startIndex = focusedOptionIndex + direction;
328
- this.focusNextEnabledOption(startIndex, direction);
329
- }
330
- break;
331
- case 'Home':
332
- case 'End':
333
- isShortcut = true;
334
- const direction = event.key === 'Home' ? 1 : -1;
335
- const startIndex = event.key === 'Home' ? 0 : numOptions - 1;
336
- this.focusNextEnabledOption(startIndex, direction);
337
- break;
338
- case 'Tab':
339
- if (menuVisibility !== 'closed') {
340
- isShortcut = true;
341
- this.handleMenuCloseOnKeyPress();
342
- }
343
- break;
344
- case 'Spacebar':
345
- case ' ':
346
- isShortcut = true;
347
- // If the user is in the middle of typing a string, treat
348
- // space key as type-ahead rather than option selection
349
- if (this.keysSoFar !== '') {
350
- this.handleKeyboardTypeAhead(' ', numOptions);
351
- }
352
- else if (menuVisibility === 'closed' || menuVisibility === 'closing') {
353
- this.toggleMenu(true);
354
- }
355
- else {
356
- this.handleOptionSelection(focusedOptionIndex);
357
- }
358
- break;
359
- case 'Enter':
360
- isShortcut = true;
361
- if (menuVisibility === 'closed' || menuVisibility === 'closing') {
362
- // allow the click
363
- isShortcut = false;
364
- }
365
- else {
366
- this.handleOptionSelection(focusedOptionIndex);
367
- }
368
- break;
369
- default:
370
- }
371
- }
372
- if (isShortcut) {
373
- // Call stopPropagation here to limit shortcut key handling to the Select
374
- // component. Otherwise, for example, using the typeahead feature of the
375
- // Select would end up triggering a number of undesired if actions if the
376
- // containing application supports its own keyboard shortcuts.
377
- event.stopPropagation();
378
- // Call preventDefault here to maintain control of what happens when
379
- // handling shortcut keys. For example, without this call, pressing the
380
- // down arrow key would scroll the menu down (since the menu has DOM
381
- // focus while its visible and scrolling is the default behavior of the
382
- // down arrow key). Instead, we want to provide our own custom behavior
383
- // of assistively focusing the next option.
384
- event.preventDefault();
385
- }
386
- };
387
- this.setNormalizedOptions();
388
- // We need a local ref (RefObject) to the Select component's underlying
389
- // button to manage focus within the component and to serve as its Popper
390
- // Menu's anchorElement. If the buttonRef prop (to be forwarded to the
391
- // underlying button) passed in through createComponent was a ref object,
392
- // we could reuse it for our internal purposes. buttonRef may be a callback
393
- // ref, however, or it may not even be defined.
394
- //
395
- // To guarantee we have access to a ref object, we created one earlier when
396
- // declaring the localButtonRef instance variable. We then use useForkRef
397
- // to combine localButtonRef and buttonRef into a single callback ref
398
- // (forwardedButtonRef) which can be forwarded to the underlying button.
399
- // When the component mounts/unmounts, this callback will both:
400
- //
401
- // (1) Update the current value of localButtonRef, and;
402
- // (2) Either update the current value of buttonRef if it was a ref object,
403
- // or call buttonRef with the underlying button element if it was a
404
- // callback ref.
405
- // eslint-disable-next-line react-hooks/rules-of-hooks
406
- this.forwardedButtonRef = useForkRef(props.buttonRef, this.localButtonRef);
407
- }
408
- componentDidMount() {
409
- this.updateStateFromValue();
410
- }
411
- componentDidUpdate(prevProps) {
412
- const { options, value } = this.props;
413
- if (options !== prevProps.options) {
414
- this.setNormalizedOptions();
415
- this.updateStateFromValue();
416
- }
417
- if (value !== prevProps.value) {
418
- this.updateStateFromValue();
419
- }
420
- }
421
- componentWillUnmount() {
422
- // Clear timers
423
- if (this.menuAnimationTimer) {
424
- clearTimeout(this.menuAnimationTimer);
425
- }
426
- if (this.clearKeysSoFarTimer) {
427
- clearTimeout(this.clearKeysSoFarTimer);
428
- }
429
- }
430
- render() {
431
- const { value,
432
- // Strip props we don't want to pass down from elemProps
433
- buttonRef, options, onKeyDown, onBlur, ...elemProps } = this.props;
434
- const { focusedOptionIndex, menuVisibility } = this.state;
435
- // Don't pass in event handlers if options weren't defined
436
- const eventHandlers = this.areOptionsDefined()
437
- ? {
438
- onClick: this.handleClick,
439
- onKeyDown: this.handleKeyDown,
440
- onClose: this.handleClose,
441
- onOptionSelection: this.handleOptionSelection,
442
- }
443
- : {};
444
- return (_jsx(SelectBase, { forwardedButtonRef: this.forwardedButtonRef, localButtonRef: this.localButtonRef, focusedOptionIndex: focusedOptionIndex, inputRef: this.inputRef, menuRef: this.menuRef, menuVisibility: menuVisibility, options: this.normalizedOptions, value: value, ...eventHandlers, ...elemProps }));
445
- }
446
- }
447
- SelectContainer.ErrorType = ErrorType;
448
- /**
449
- * @deprecated ⚠️ `Select` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead.
450
- */
451
- export const Select = createComponent('button')({
452
- displayName: 'Select',
453
- Component: (props, ref, Element) => (
454
- // Select is still a class component, so we render a renamed version of it
455
- // (SelectContainer) and pass it ref and Element
456
- _jsx(SelectContainer, { as: Element, buttonRef: ref, ...props })),
457
- subComponents: {
458
- ErrorType,
459
- },
460
- });
@@ -1,165 +0,0 @@
1
- import React from 'react';
2
- import { GrowthBehavior, ErrorType, StyledType, Themeable } from '@workday/canvas-kit-react/common';
3
- import { MenuPlacement, MenuVisibility } from './types';
4
- interface OptionData {
5
- [key: string]: any;
6
- }
7
- /**
8
- * @deprecated ⚠️ `Option` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead.
9
- */
10
- export interface Option {
11
- data?: OptionData;
12
- disabled?: boolean;
13
- id?: string;
14
- label?: string;
15
- value: string;
16
- }
17
- /**
18
- * @deprecated ⚠️ `NormalizedOption` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead.
19
- */
20
- export interface NormalizedOption extends Option {
21
- data: OptionData;
22
- disabled: boolean;
23
- id: string;
24
- label: string;
25
- }
26
- /**
27
- * @deprecated ⚠️ `RenderSelectedFunction` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead.
28
- */
29
- export interface RenderSelectedFunction {
30
- (option: NormalizedOption): React.ReactNode;
31
- }
32
- /**
33
- * @deprecated ⚠️ `RenderableOption` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead.
34
- */
35
- export interface RenderableOption extends NormalizedOption {
36
- focused: boolean;
37
- selected: boolean;
38
- }
39
- /**
40
- * @deprecated ⚠️ `RenderOptionFunction` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead.
41
- */
42
- export interface RenderOptionFunction {
43
- (option: RenderableOption): React.ReactNode;
44
- }
45
- /**
46
- * @deprecated ⚠️ `CoreSelectBaseProps` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead.
47
- */
48
- export interface CoreSelectBaseProps extends Themeable, GrowthBehavior, Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'>, Pick<React.SelectHTMLAttributes<HTMLSelectElement>, 'required'>, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
49
- /**
50
- * The type of error associated with the Select (if applicable).
51
- */
52
- error?: ErrorType;
53
- /**
54
- * The function called to render the content of each option.
55
- *
56
- * The `option` argument passed to the function is an object which contains the following:
57
- *
58
- * * `data: object` (data object carried over from the corresponding option originally passed into the component)
59
- * * `disabled: boolean`
60
- * * `focused: boolean` (set to `true` if the option has keyboard focus)
61
- * * `id: string`
62
- * * `label: string`
63
- * * `selected: boolean` (set to `true` if the option is selected)
64
- * * `value: string`
65
- *
66
- * If you omit the `renderOption` prop, each option will be rendered using a `defaultRenderOption` function provided by the component.
67
- *
68
- * @default defaultRenderOption
69
- */
70
- renderOption?: RenderOptionFunction;
71
- /**
72
- * The function called to render the selected option.
73
- *
74
- * The `option` argument passed to the function is an object which contains the following:
75
- *
76
- * * `data: object` (data object carried over from the corresponding option originally passed into the component)
77
- * * `disabled: boolean`
78
- * * `id: string`
79
- * * `label: string`
80
- * * `value: string`
81
- *
82
- * If you omit the `renderSelected` prop, each option will be rendered using a `defaultRenderSelected` function provided by the component.
83
- *
84
- * @default defaultRenderSelected
85
- */
86
- renderSelected?: RenderSelectedFunction;
87
- /**
88
- * The value of the Select.
89
- */
90
- value?: string;
91
- }
92
- /**
93
- * @deprecated ⚠️ `SelectBaseProps` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead.
94
- */
95
- export interface SelectBaseProps extends CoreSelectBaseProps, StyledType {
96
- /**
97
- * The ref to be forwarded to the underlying button element. Use this to imperatively manipulate the button.
98
- */
99
- forwardedButtonRef?: React.Ref<HTMLButtonElement>;
100
- /**
101
- * The local ref to the underlying button element. Can be used in situations where RefObject is required (such as the Popper Menu).
102
- */
103
- localButtonRef?: React.RefObject<HTMLButtonElement>;
104
- /**
105
- * The index of the focused option in the SelectBase.
106
- * @default 0
107
- */
108
- focusedOptionIndex?: number;
109
- /**
110
- * The ref to the underlying (hidden) text input element. Use this to imperatively manipulate the input.
111
- */
112
- inputRef?: React.Ref<HTMLInputElement>;
113
- /**
114
- * The placement of the SelectBase menu relative to its corresponding SelectButton.
115
- * @default 'bottom'
116
- */
117
- menuPlacement?: MenuPlacement;
118
- /**
119
- * The ref to the underlying menu element. Use this to imperatively manipulate the menu.
120
- */
121
- menuRef?: React.RefObject<HTMLUListElement>;
122
- /**
123
- * The visibility state of the SelectBase menu.
124
- * @default 'closed'
125
- */
126
- menuVisibility?: MenuVisibility;
127
- /**
128
- * The function called when a key is pressed down while the SelectBase button or menu has focus.
129
- */
130
- onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;
131
- /**
132
- * The function called when the menu is closed.
133
- */
134
- onClose?: () => void;
135
- /**
136
- * The function called when an option in the SelectBase is selected via a click or a keyboard shortcut. The `index` passed to the callback function represents the index of the option which was selected.
137
- */
138
- onOptionSelection?: (index: number) => void;
139
- /**
140
- * The options of the SelectBase. `options` is an array of objects, each object adhering to the `NormalizedOption` interface:
141
- *
142
- * * `value: string` (required, analagous to the `value` attribute of an `<option>`)
143
- * * `disabled: boolean` (required)
144
- * * `id: string` (required)
145
- * * `label: string` (required, analagous to the text content of an `<option>`)
146
- */
147
- options: NormalizedOption[];
148
- /**
149
- * If true, automatically flip the SelectBase menu to keep it visible if necessary (e.g., if the the menu would otherwise display below the visible area of the viewport).
150
- * @default true
151
- */
152
- shouldMenuAutoFlip?: boolean;
153
- /**
154
- * If true, focus the SelectBase menu when it's shown. Set to false if you don't want to focus the menu automatically (for visual testing purposes, for example).
155
- * @default true
156
- */
157
- shouldMenuAutoFocus?: boolean;
158
- }
159
- export declare const buttonBorderWidth = 1;
160
- /**
161
- * @deprecated ⚠️ `SelectBase` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead.
162
- */
163
- export declare const SelectBase: ({ "aria-labelledby": ariaLabelledBy, "aria-required": ariaRequired, as, forwardedButtonRef, localButtonRef, disabled, error, focusedOptionIndex, grow, inputRef, menuPlacement, menuRef, menuVisibility, onChange, onKeyDown, onBlur, onClose, onOptionSelection, options, renderOption, renderSelected, required, shouldMenuAutoFlip, shouldMenuAutoFocus, value, ...elemProps }: SelectBaseProps) => import("react/jsx-runtime").JSX.Element;
164
- export {};
165
- //# sourceMappingURL=SelectBase.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SelectBase.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectBase.tsx"],"names":[],"mappings":"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"}