@primer/components 0.0.0-2021927184113 → 0.0.0-202192719508

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 (62) hide show
  1. package/CHANGELOG.md +2 -10
  2. package/dist/browser.esm.js +23 -23
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +28 -28
  5. package/dist/browser.umd.js.map +1 -1
  6. package/lib/ActionList/Item.d.ts +0 -6
  7. package/lib/ActionList/Item.js +1 -5
  8. package/lib/AnchoredOverlay/AnchoredOverlay.d.ts +4 -2
  9. package/lib/Autocomplete/Autocomplete.d.ts +4 -2
  10. package/lib/Autocomplete/AutocompleteInput.d.ts +4 -2
  11. package/lib/DatePicker/DatePicker.d.ts +48 -0
  12. package/lib/DatePicker/DatePicker.js +104 -0
  13. package/lib/DatePicker/DatePickerAnchor.d.ts +5 -0
  14. package/lib/DatePicker/DatePickerAnchor.js +182 -0
  15. package/lib/DatePicker/DatePickerOverlay.d.ts +3 -0
  16. package/lib/DatePicker/DatePickerOverlay.js +48 -0
  17. package/lib/DatePicker/DatePickerPanel.d.ts +2 -0
  18. package/lib/DatePicker/DatePickerPanel.js +126 -0
  19. package/lib/DatePicker/Day.d.ts +14 -0
  20. package/lib/DatePicker/Day.js +190 -0
  21. package/lib/DatePicker/Month.d.ts +9 -0
  22. package/lib/DatePicker/Month.js +120 -0
  23. package/lib/DatePicker/index.d.ts +2 -0
  24. package/lib/DatePicker/index.js +13 -0
  25. package/lib/DatePicker/useDatePicker.d.ts +88 -0
  26. package/lib/DatePicker/useDatePicker.js +421 -0
  27. package/lib/SelectMenu/SelectMenu.d.ts +4 -2
  28. package/lib/TextInputWithTokens.d.ts +4 -2
  29. package/lib/TextInputWithTokens.js +12 -25
  30. package/lib/hooks/useDebounce.d.ts +2 -0
  31. package/lib/hooks/useDebounce.js +24 -0
  32. package/lib/theme-preval.js +2 -2
  33. package/lib/utils/testing.d.ts +1 -1
  34. package/lib-esm/ActionList/Item.d.ts +0 -6
  35. package/lib-esm/ActionList/Item.js +1 -5
  36. package/lib-esm/AnchoredOverlay/AnchoredOverlay.d.ts +4 -2
  37. package/lib-esm/Autocomplete/Autocomplete.d.ts +4 -2
  38. package/lib-esm/Autocomplete/AutocompleteInput.d.ts +4 -2
  39. package/lib-esm/DatePicker/DatePicker.d.ts +48 -0
  40. package/lib-esm/DatePicker/DatePicker.js +87 -0
  41. package/lib-esm/DatePicker/DatePickerAnchor.d.ts +5 -0
  42. package/lib-esm/DatePicker/DatePickerAnchor.js +155 -0
  43. package/lib-esm/DatePicker/DatePickerOverlay.d.ts +3 -0
  44. package/lib-esm/DatePicker/DatePickerOverlay.js +29 -0
  45. package/lib-esm/DatePicker/DatePickerPanel.d.ts +2 -0
  46. package/lib-esm/DatePicker/DatePickerPanel.js +100 -0
  47. package/lib-esm/DatePicker/Day.d.ts +14 -0
  48. package/lib-esm/DatePicker/Day.js +167 -0
  49. package/lib-esm/DatePicker/Month.d.ts +9 -0
  50. package/lib-esm/DatePicker/Month.js +96 -0
  51. package/lib-esm/DatePicker/index.d.ts +2 -0
  52. package/lib-esm/DatePicker/index.js +1 -0
  53. package/lib-esm/DatePicker/useDatePicker.d.ts +88 -0
  54. package/lib-esm/DatePicker/useDatePicker.js +391 -0
  55. package/lib-esm/SelectMenu/SelectMenu.d.ts +4 -2
  56. package/lib-esm/TextInputWithTokens.d.ts +4 -2
  57. package/lib-esm/TextInputWithTokens.js +13 -25
  58. package/lib-esm/hooks/useDebounce.d.ts +2 -0
  59. package/lib-esm/hooks/useDebounce.js +16 -0
  60. package/lib-esm/theme-preval.js +2 -2
  61. package/lib-esm/utils/testing.d.ts +1 -1
  62. package/package.json +14 -13
@@ -0,0 +1,421 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.isSingleSelection = isSingleSelection;
7
+ exports.isMultiSelection = isMultiSelection;
8
+ exports.isRangeSelection = isRangeSelection;
9
+ exports.isStringRangeSelection = isStringRangeSelection;
10
+ exports.DatePickerProvider = exports.default = void 0;
11
+
12
+ var _octiconsReact = require("@primer/octicons-react");
13
+
14
+ var _dateFns = require("date-fns");
15
+
16
+ var _deepmerge = _interopRequireDefault(require("deepmerge"));
17
+
18
+ var _react = _interopRequireWildcard(require("react"));
19
+
20
+ var _2 = require("..");
21
+
22
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
23
+
24
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
25
+
26
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
27
+
28
+ const DatePickerContext = /*#__PURE__*/(0, _react.createContext)(null);
29
+
30
+ const useDatePicker = date => {
31
+ const value = (0, _react.useContext)(DatePickerContext);
32
+ const [selected, setSelected] = (0, _react.useState)(false);
33
+ const today = date ? (0, _dateFns.isToday)(date) : false;
34
+
35
+ if (!value) {
36
+ throw new Error('useDatePicker must be used inside a DatePickerProvider');
37
+ }
38
+
39
+ (0, _react.useEffect)(() => {
40
+ if (date) {
41
+ if (value.hoverRange) {
42
+ if (isRangeSelection(value.hoverRange)) {
43
+ if ((0, _dateFns.isEqual)(date, value.hoverRange.from)) {
44
+ setSelected('start');
45
+ } else if (value.hoverRange.to && (0, _dateFns.isEqual)(date, value.hoverRange.to)) {
46
+ setSelected('end');
47
+ } else if ((0, _dateFns.isAfter)(date, value.hoverRange.from) && value.hoverRange.to && (0, _dateFns.isBefore)(date, value.hoverRange.to)) {
48
+ setSelected('middle');
49
+ } else {
50
+ setSelected(false);
51
+ }
52
+ }
53
+ } else if (value.selection) {
54
+ if (isMultiSelection(value.selection)) {
55
+ setSelected(!!value.selection.find(d => (0, _dateFns.isEqual)(d, date)));
56
+ } else if (isRangeSelection(value.selection)) {
57
+ if ((0, _dateFns.isEqual)(date, value.selection.from)) {
58
+ setSelected('start');
59
+ } else if (value.selection.to && (0, _dateFns.isEqual)(date, value.selection.to)) {
60
+ setSelected('end');
61
+ } else if ((0, _dateFns.isAfter)(date, value.selection.from) && value.selection.to && (0, _dateFns.isBefore)(date, value.selection.to)) {
62
+ setSelected('middle');
63
+ } else {
64
+ setSelected(false);
65
+ }
66
+ } else {
67
+ setSelected((0, _dateFns.isEqual)(date, value.selection));
68
+ }
69
+ }
70
+ }
71
+ }, [date, value.hoverRange, value.selection, today]);
72
+ let blocked,
73
+ disabled = false;
74
+
75
+ if (date) {
76
+ // Determine if date is blocked out
77
+ if (value.configuration.blockedDates) {
78
+ blocked = !!value.configuration.blockedDates.find(d => (0, _dateFns.isEqual)(d, date));
79
+ } // Determine if date is disabled
80
+
81
+
82
+ if (value.configuration.minDate || value.configuration.maxDate || value.configuration.disableWeekends) {
83
+ disabled = (value.configuration.minDate ? (0, _dateFns.isBefore)(date, value.configuration.minDate) : false) || (value.configuration.maxDate ? (0, _dateFns.isAfter)(date, value.configuration.maxDate) : false) || (value.configuration.disableWeekends ? (0, _dateFns.isWeekend)(date) : false);
84
+ }
85
+ }
86
+
87
+ return { ...value,
88
+ blocked,
89
+ disabled,
90
+ selected,
91
+ today
92
+ };
93
+ };
94
+
95
+ var _default = useDatePicker;
96
+ exports.default = _default;
97
+
98
+ function isSingleSelection(selection) {
99
+ return selection instanceof Date;
100
+ }
101
+
102
+ function isMultiSelection(selection) {
103
+ return Array.isArray(selection);
104
+ }
105
+
106
+ function isRangeSelection(selection) {
107
+ return !!selection.from;
108
+ }
109
+
110
+ function isStringRangeSelection(selection) {
111
+ return !!selection.from;
112
+ }
113
+
114
+ function parseSelection(selection, variant) {
115
+ if (!selection) return;
116
+
117
+ if (variant === 'multi') {
118
+ if (isMultiSelection(selection)) {
119
+ const parsedSelection = [];
120
+
121
+ for (const d of selection) {
122
+ parsedSelection.push(new Date(new Date(d).toDateString()));
123
+ }
124
+
125
+ return parsedSelection.sort((a, b) => a.getTime() - b.getTime());
126
+ } else if (selection instanceof Date) {
127
+ return [new Date(new Date(selection).toDateString())];
128
+ } else if (isRangeSelection(selection)) {
129
+ const parsedSelection = [];
130
+ parsedSelection.push(new Date(new Date(selection.from).toDateString()));
131
+
132
+ if (selection.to) {
133
+ parsedSelection.push(new Date(new Date(selection.to).toDateString()));
134
+ }
135
+
136
+ return parsedSelection.sort((a, b) => a.getTime() - b.getTime());
137
+ }
138
+ } else if (variant === 'range') {
139
+ if (isRangeSelection(selection)) {
140
+ return {
141
+ from: new Date(new Date(selection.from).toDateString()),
142
+ to: selection.to ? new Date(new Date(selection.to).toDateString()) : null
143
+ };
144
+ } else if (isMultiSelection(selection)) {
145
+ return {
146
+ from: new Date(new Date(selection[0]).toDateString()),
147
+ to: selection[1] ? new Date(new Date(selection[1]).toDateString()) : null
148
+ };
149
+ } else if (selection instanceof Date) {
150
+ return {
151
+ from: new Date(new Date(selection).toDateString()),
152
+ to: null
153
+ };
154
+ }
155
+ } else {
156
+ if (selection instanceof Date) {
157
+ return new Date(new Date(selection).toDateString());
158
+ } else if (isMultiSelection(selection)) {
159
+ return new Date(new Date(selection[0]).toDateString());
160
+ } else if (isRangeSelection(selection)) {
161
+ return new Date(new Date(selection.from).toDateString());
162
+ } else {
163
+ return;
164
+ }
165
+ }
166
+ }
167
+
168
+ const defaultConfiguration = {
169
+ anchorVariant: 'button',
170
+ confirmation: false,
171
+ confirmUnsavedClose: false,
172
+ disableWeekends: false,
173
+ iconPlacement: 'start',
174
+ placeholder: 'Select a Date...',
175
+ selection: 'single',
176
+ view: '2-month',
177
+ weekStartsOn: 'Sunday'
178
+ };
179
+
180
+ const DatePickerProvider = ({
181
+ configuration: externalConfig = {},
182
+ children,
183
+ closePicker,
184
+ value
185
+ }) => {
186
+ const [configuration, setConfiguration] = (0, _react.useState)((0, _deepmerge.default)(defaultConfiguration, externalConfig));
187
+ const [previousSelection, setPreviousSelection] = (0, _react.useState)(parseSelection(value, configuration.selection));
188
+ const [isDirty, setIsDirty] = (0, _react.useState)(false);
189
+ const [selection, setSelection] = (0, _react.useState)(parseSelection(value, configuration.selection));
190
+ const [hoverRange, setHoverRange] = (0, _react.useState)(null);
191
+ const [currentViewingDate, setCurrentViewingDate] = (0, _react.useState)(new Date());
192
+ const confirm = (0, _2.useConfirm)();
193
+ (0, _react.useEffect)(() => {
194
+ setConfiguration((0, _deepmerge.default)(defaultConfiguration, externalConfig));
195
+ setSelection(parseSelection(selection, configuration.selection)); // Don't want this to run every time selection gets updated
196
+ // eslint-disable-next-line react-hooks/exhaustive-deps
197
+ }, [configuration.selection, externalConfig]);
198
+ const goToMonth = (0, _react.useCallback)(date => {
199
+ setCurrentViewingDate(new Date(new Date(date).toDateString()));
200
+ }, []);
201
+ const nextMonth = (0, _react.useCallback)(() => {
202
+ setCurrentViewingDate((0, _dateFns.addMonths)(currentViewingDate, 1));
203
+ }, [currentViewingDate]);
204
+ const previousMonth = (0, _react.useCallback)(() => {
205
+ setCurrentViewingDate((0, _dateFns.subMonths)(currentViewingDate, 1));
206
+ }, [currentViewingDate]);
207
+ const getFormattedDate = (0, _react.useMemo)(() => {
208
+ if (!selection) {
209
+ return configuration.placeholder;
210
+ }
211
+
212
+ let template = 'MMM d';
213
+
214
+ if (configuration.anchorVariant !== 'input' && configuration.dateFormat) {
215
+ switch (configuration.dateFormat) {
216
+ case 'short':
217
+ template = 'MMM d';
218
+ break;
219
+
220
+ case 'long':
221
+ template = 'MMM d, yyyy';
222
+ break;
223
+
224
+ default:
225
+ template = configuration.dateFormat;
226
+ break;
227
+ }
228
+ } else {
229
+ template = 'MM/dd/yyyy';
230
+ }
231
+
232
+ switch (configuration.selection) {
233
+ case 'single':
234
+ {
235
+ if (selection instanceof Date) {
236
+ return (0, _dateFns.format)(selection, template);
237
+ } else if (Array.isArray(selection)) {
238
+ return (0, _dateFns.format)(selection[0], template);
239
+ } else if (isRangeSelection(selection)) {
240
+ return (0, _dateFns.format)(selection.from, template);
241
+ } else {
242
+ return 'Invalid Selection';
243
+ }
244
+ }
245
+
246
+ case 'multi':
247
+ {
248
+ if (Array.isArray(selection)) {
249
+ if (selection.length > 3) return `${selection.length} Selected`;
250
+ const formatted = selection.map(d => (0, _dateFns.format)(d, template)).join(', ');
251
+ return formatted;
252
+ } else if (selection instanceof Date) {
253
+ return [selection].map(d => (0, _dateFns.format)(d, template)).join(', ');
254
+ } else if (isRangeSelection(selection)) {
255
+ return [selection.to, selection.from].map(d => d ? (0, _dateFns.format)(d, template) : '').join(', ');
256
+ } else {
257
+ return 'Invalid Selection';
258
+ }
259
+ }
260
+
261
+ case 'range':
262
+ {
263
+ if (isRangeSelection(selection)) {
264
+ return Object.entries(selection).map(([_, date]) => date ? (0, _dateFns.format)(date, template) : '').join(' - ');
265
+ } else if (selection instanceof Date) {
266
+ return Object.entries({
267
+ from: selection,
268
+ to: null
269
+ }).map(([_, date]) => date ? (0, _dateFns.format)(date, template) : '').join(' - ');
270
+ } else if (Array.isArray(selection)) {
271
+ return Object.entries({
272
+ from: selection[0],
273
+ to: selection[1]
274
+ }) // to date can still be null
275
+ // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
276
+ .map(([_, date]) => date ? (0, _dateFns.format)(date, template) : '').join(' - ');
277
+ } else {
278
+ return 'Invalid Selection';
279
+ }
280
+ }
281
+
282
+ default:
283
+ {
284
+ return 'Invalid Configuration';
285
+ }
286
+ }
287
+ }, [configuration.anchorVariant, configuration.dateFormat, configuration.placeholder, configuration.selection, selection]);
288
+ const saveValue = (0, _react.useCallback)(updatedSelection => {
289
+ setPreviousSelection(updatedSelection !== null && updatedSelection !== void 0 ? updatedSelection : selection);
290
+ setIsDirty(false);
291
+ closePicker === null || closePicker === void 0 ? void 0 : closePicker();
292
+ }, [closePicker, selection]);
293
+ const revertValue = (0, _react.useCallback)(() => {
294
+ setSelection(previousSelection);
295
+ setIsDirty(false);
296
+ }, [previousSelection]);
297
+ const handleClose = (0, _react.useCallback)(async () => {
298
+ if (configuration.confirmUnsavedClose) {
299
+ if (isDirty) {
300
+ const result = await confirm({
301
+ title: 'Save Changes?',
302
+ content: 'You have unsaved changes, would you like to save them?',
303
+ confirmButtonContent: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.CheckIcon, null), /*#__PURE__*/_react.default.createElement(_2.Text, {
304
+ sx: {
305
+ ml: 1
306
+ }
307
+ }, "Save")),
308
+ cancelButtonContent: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.TrashIcon, null), /*#__PURE__*/_react.default.createElement(_2.Text, {
309
+ sx: {
310
+ ml: 1
311
+ }
312
+ }, "Discard"))
313
+ });
314
+
315
+ if (result) {
316
+ saveValue();
317
+ } else {
318
+ revertValue();
319
+ }
320
+ }
321
+ } else if (isDirty) revertValue();
322
+ }, [configuration.confirmUnsavedClose, confirm, isDirty, revertValue, saveValue]);
323
+ const inputHandler = (0, _react.useCallback)(updatedSelection => {
324
+ // validate date falls within range
325
+ setSelection(updatedSelection);
326
+ }, []);
327
+ const selectionHandler = (0, _react.useCallback)(date => {
328
+ setIsDirty(true);
329
+
330
+ if (configuration.selection === 'multi') {
331
+ const selections = [...selection];
332
+ const existingIndex = selections.findIndex(s => (0, _dateFns.isEqual)(s, date));
333
+
334
+ if (existingIndex > -1) {
335
+ selections.splice(existingIndex, 1);
336
+ setSelection(selections.sort((a, b) => a.getTime() - b.getTime()));
337
+ } else {
338
+ if (configuration.maxSelections && selections.length + 1 > configuration.maxSelections) return;
339
+ setSelection([...selections, date].sort((a, b) => a.getTime() - b.getTime()));
340
+ }
341
+ } else if (configuration.selection === 'range') {
342
+ if (selection && isRangeSelection(selection) && !selection.to) {
343
+ const updatedSelection = (0, _dateFns.isBefore)(date, selection.from) ? {
344
+ from: date,
345
+ to: selection.from
346
+ } : {
347
+ from: selection.from,
348
+ to: date
349
+ };
350
+ setSelection(updatedSelection);
351
+ setHoverRange(null);
352
+
353
+ if (!configuration.confirmation) {
354
+ saveValue(updatedSelection);
355
+ }
356
+ } else {
357
+ setHoverRange({
358
+ from: date,
359
+ to: date
360
+ });
361
+ setSelection({
362
+ from: date,
363
+ to: null
364
+ });
365
+ }
366
+ } else {
367
+ setSelection(date);
368
+
369
+ if (!configuration.confirmation) {
370
+ saveValue(date);
371
+ }
372
+ }
373
+ }, [configuration.confirmation, configuration.maxSelections, configuration.selection, saveValue, selection]);
374
+ const focusHnadler = (0, _react.useCallback)(date => {
375
+ if (!selection) return;
376
+ const {
377
+ minDate,
378
+ maxDate,
379
+ selection: configSelection
380
+ } = configuration;
381
+
382
+ if (configSelection === 'range' && isRangeSelection(selection) && hoverRange) {
383
+ let hoverDate = date;
384
+ if (minDate) hoverDate = (0, _dateFns.isBefore)(date, minDate) ? minDate : hoverDate;
385
+ if (maxDate) hoverDate = (0, _dateFns.isAfter)(date, maxDate) ? maxDate : hoverDate;
386
+ setHoverRange((0, _dateFns.isBefore)(hoverDate, selection.from) ? {
387
+ from: hoverDate,
388
+ to: selection.from
389
+ } : {
390
+ from: selection.from,
391
+ to: hoverDate
392
+ });
393
+ }
394
+ }, [configuration, hoverRange, selection]);
395
+ const datePickerCtx = (0, _react.useMemo)(() => {
396
+ return {
397
+ configuration,
398
+ currentViewingDate,
399
+ disabled: false,
400
+ formattedDate: getFormattedDate,
401
+ goToMonth,
402
+ hoverRange,
403
+ nextMonth,
404
+ onClose: handleClose,
405
+ onDateInput: inputHandler,
406
+ onDayFocus: focusHnadler,
407
+ onSelection: selectionHandler,
408
+ previousMonth,
409
+ revertValue,
410
+ saveValue,
411
+ selectionActive: false,
412
+ selection
413
+ };
414
+ }, [configuration, currentViewingDate, focusHnadler, getFormattedDate, goToMonth, handleClose, hoverRange, inputHandler, nextMonth, previousMonth, revertValue, saveValue, selection, selectionHandler]);
415
+ return /*#__PURE__*/_react.default.createElement(DatePickerContext.Provider, {
416
+ value: datePickerCtx
417
+ }, children);
418
+ };
419
+
420
+ exports.DatePickerProvider = DatePickerProvider;
421
+ DatePickerProvider.displayName = "DatePickerProvider";
@@ -32,12 +32,14 @@ declare const _default: React.ForwardRefExoticComponent<Pick<SelectMenuInternalP
32
32
  Divider: import("styled-components").StyledComponent<"div", any, SystemCommonProps & SxProp, never>;
33
33
  Filter: React.ForwardRefExoticComponent<Pick<{
34
34
  value?: string | undefined;
35
- } & Pick<Omit<Pick<{
35
+ } & Pick<Omit<Pick<({
36
36
  [x: string]: any;
37
37
  [x: number]: any;
38
38
  } & {
39
39
  theme?: any;
40
- } & {
40
+ } & ({} | {
41
+ children?: React.ReactNode;
42
+ })) & {
41
43
  as?: string | React.ComponentType<any> | undefined;
42
44
  forwardedAs?: string | React.ComponentType<any> | undefined;
43
45
  }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "className" | "block" | "icon" | "sx" | "disabled" | "variant" | "contrast"> & {
@@ -32,12 +32,14 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
32
32
  * Whether the remove buttons should be rendered in the tokens
33
33
  */
34
34
  hideTokenRemoveButtons?: boolean | undefined;
35
- } & Pick<Omit<Pick<{
35
+ } & Pick<Omit<Pick<({
36
36
  [x: string]: any;
37
37
  [x: number]: any;
38
38
  } & {
39
39
  theme?: any;
40
- } & {
40
+ } & ({} | {
41
+ children?: React.ReactNode;
42
+ })) & {
41
43
  as?: string | React.ComponentType<any> | undefined;
42
44
  forwardedAs?: string | React.ComponentType<any> | undefined;
43
45
  }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "className" | "block" | "icon" | "sx" | "disabled" | "variant" | "contrast"> & {
@@ -25,8 +25,6 @@ var _TextInputWrapper = _interopRequireDefault(require("./_TextInputWrapper"));
25
25
 
26
26
  var _Box = _interopRequireDefault(require("./Box"));
27
27
 
28
- var _iterateFocusableElements = require("./utils/iterateFocusableElements");
29
-
30
28
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
31
29
 
32
30
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -100,25 +98,14 @@ function TextInputWithTokensInnerComponent({
100
98
  }, [selectedTokenIndex]);
101
99
 
102
100
  const handleTokenRemove = tokenId => {
103
- onTokenRemove(tokenId); // HACK: wait a tick for the the token node to be removed from the DOM
104
-
105
- setTimeout(() => {
106
- var _containerRef$current2, _containerRef$current3;
107
-
108
- const nextElementToFocus = (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.children[selectedTokenIndex || 0]; // when removing the first token by keying "Backspace" or "Delete",
109
- // `nextFocusableElement` is the div that wraps the input
101
+ onTokenRemove(tokenId);
110
102
 
111
- const firstFocusable = nextElementToFocus && (0, _iterateFocusableElements.isFocusable)(nextElementToFocus) ? nextElementToFocus : Array.from(((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.children) || []).find(el => (0, _iterateFocusableElements.isFocusable)(el));
103
+ if (selectedTokenIndex) {
104
+ var _containerRef$current2;
112
105
 
113
- if (firstFocusable) {
114
- firstFocusable.focus();
115
- } else {
116
- var _ref$current;
117
-
118
- // if there are no tokens left, focus the input
119
- (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
120
- }
121
- }, 0);
106
+ const nextElementToFocus = (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.children[selectedTokenIndex];
107
+ nextElementToFocus.focus();
108
+ }
122
109
  };
123
110
 
124
111
  const handleTokenFocus = tokenIndex => () => {
@@ -131,9 +118,9 @@ function TextInputWithTokensInnerComponent({
131
118
 
132
119
  const handleTokenKeyUp = e => {
133
120
  if (e.key === 'Escape') {
134
- var _ref$current2;
121
+ var _ref$current;
135
122
 
136
- (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.focus();
123
+ (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
137
124
  }
138
125
  };
139
126
 
@@ -143,13 +130,13 @@ function TextInputWithTokensInnerComponent({
143
130
  };
144
131
 
145
132
  const handleInputKeyDown = e => {
146
- var _ref$current3;
133
+ var _ref$current2;
147
134
 
148
135
  if (onKeyDown) {
149
136
  onKeyDown(e);
150
137
  }
151
138
 
152
- if ((_ref$current3 = ref.current) !== null && _ref$current3 !== void 0 && _ref$current3.value) {
139
+ if ((_ref$current2 = ref.current) !== null && _ref$current2 !== void 0 && _ref$current2.value) {
153
140
  return;
154
141
  }
155
142
 
@@ -170,9 +157,9 @@ function TextInputWithTokensInnerComponent({
170
157
 
171
158
 
172
159
  setTimeout(() => {
173
- var _ref$current4;
160
+ var _ref$current3;
174
161
 
175
- (_ref$current4 = ref.current) === null || _ref$current4 === void 0 ? void 0 : _ref$current4.select();
162
+ (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.select();
176
163
  }, 0);
177
164
  }
178
165
  };
@@ -0,0 +1,2 @@
1
+ declare function useDebounce<T>(value: T, delay: number): T;
2
+ export default useDebounce;
@@ -0,0 +1,24 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var _react = require("react");
9
+
10
+ function useDebounce(value, delay) {
11
+ const [debouncedValue, setDebouncedValue] = (0, _react.useState)(value);
12
+ (0, _react.useEffect)(() => {
13
+ const handler = setTimeout(() => {
14
+ setDebouncedValue(value);
15
+ }, delay);
16
+ return () => {
17
+ clearTimeout(handler);
18
+ };
19
+ }, [value, delay]);
20
+ return debouncedValue;
21
+ }
22
+
23
+ var _default = useDebounce;
24
+ exports.default = _default;
@@ -515,7 +515,7 @@ module.exports = {
515
515
  }
516
516
  }
517
517
  },
518
- "light_protanopia": {
518
+ "light_colorblind": {
519
519
  "colors": {
520
520
  "canvasDefaultTransparent": "rgba(255,255,255,0)",
521
521
  "marketingIcon": {
@@ -2456,7 +2456,7 @@ module.exports = {
2456
2456
  }
2457
2457
  }
2458
2458
  },
2459
- "dark_protanopia": {
2459
+ "dark_colorblind": {
2460
2460
  "colors": {
2461
2461
  "canvasDefaultTransparent": "rgba(13,17,23,0)",
2462
2462
  "marketingIcon": {
@@ -53,7 +53,7 @@ export declare function render(component: React.ReactElement, theme?: {
53
53
  xlarge: string;
54
54
  };
55
55
  space: string[];
56
- colorSchemes: Record<"light" | "light_protanopia" | "dark" | "dark_dimmed" | "dark_high_contrast" | "dark_protanopia", Record<"colors" | "shadows", Partial<{
56
+ colorSchemes: Record<"light" | "light_colorblind" | "dark" | "dark_dimmed" | "dark_high_contrast" | "dark_colorblind", Record<"colors" | "shadows", Partial<{
57
57
  canvasDefaultTransparent: string;
58
58
  marketingIcon: {
59
59
  primary: string;
@@ -28,19 +28,13 @@ export interface ItemProps extends SxProp {
28
28
  */
29
29
  leadingVisual?: React.FunctionComponent<IconProps>;
30
30
  /**
31
- * @deprecated Use `trailingVisual` instead
32
31
  * Icon (or similar) positioned after `Item` text.
33
32
  */
34
33
  trailingIcon?: React.FunctionComponent<IconProps>;
35
34
  /**
36
- * @deprecated Use `trailingVisual` instead
37
35
  * Text positioned after `Item` text and optional trailing icon.
38
36
  */
39
37
  trailingText?: string;
40
- /**
41
- * Icon or text positioned after `Item` text.
42
- */
43
- trailingVisual?: React.ReactNode;
44
38
  /**
45
39
  * Style variations associated with various `Item` types.
46
40
  *
@@ -154,7 +154,6 @@ export const Item = /*#__PURE__*/React.forwardRef((itemProps, ref) => {
154
154
  selectionVariant,
155
155
  leadingVisual: LeadingVisual,
156
156
  trailingIcon: TrailingIcon,
157
- trailingVisual: TrailingVisual,
158
157
  trailingText,
159
158
  variant = 'default',
160
159
  showDivider,
@@ -246,10 +245,7 @@ export const Item = /*#__PURE__*/React.forwardRef((itemProps, ref) => {
246
245
  title: description,
247
246
  inline: true,
248
247
  maxWidth: "100%"
249
- }, description)) : null), TrailingVisual ? /*#__PURE__*/React.createElement(TrailingContent, {
250
- variant: variant,
251
- disabled: disabled
252
- }, typeof TrailingVisual === 'function' ? /*#__PURE__*/React.createElement(TrailingVisual, null) : TrailingVisual) : TrailingIcon || trailingText ? /*#__PURE__*/React.createElement(TrailingContent, {
248
+ }, description)) : null), TrailingIcon || trailingText ? /*#__PURE__*/React.createElement(TrailingContent, {
253
249
  variant: variant,
254
250
  disabled: disabled
255
251
  }, trailingText, TrailingIcon && /*#__PURE__*/React.createElement(TrailingIcon, null)) : null));
@@ -26,6 +26,8 @@ interface AnchoredOverlayPropsWithoutAnchor {
26
26
  */
27
27
  anchorRef: React.RefObject<HTMLElement>;
28
28
  }
29
+ export declare type OverlayOpenGesture = 'anchor-click' | 'anchor-key-press';
30
+ export declare type OverlayCloseGesture = 'anchor-click' | 'click-outside' | 'escape';
29
31
  export declare type AnchoredOverlayWrapperAnchorProps = Partial<AnchoredOverlayPropsWithAnchor> | AnchoredOverlayPropsWithoutAnchor;
30
32
  interface AnchoredOverlayBaseProps extends Pick<OverlayProps, 'height' | 'width'> {
31
33
  /**
@@ -35,11 +37,11 @@ interface AnchoredOverlayBaseProps extends Pick<OverlayProps, 'height' | 'width'
35
37
  /**
36
38
  * A callback which is called whenever the overlay is currently closed and an "open gesture" is detected.
37
39
  */
38
- onOpen?: (gesture: 'anchor-click' | 'anchor-key-press') => unknown;
40
+ onOpen?: (gesture: OverlayOpenGesture) => unknown;
39
41
  /**
40
42
  * A callback which is called whenever the overlay is currently open and a "close gesture" is detected.
41
43
  */
42
- onClose?: (gesture: 'anchor-click' | 'click-outside' | 'escape') => unknown;
44
+ onClose?: (gesture: OverlayCloseGesture) => unknown;
43
45
  /**
44
46
  * Props to be spread on the internal `Overlay` component.
45
47
  */
@@ -12,12 +12,14 @@ export type { AutocompleteOverlayProps } from './AutocompleteOverlay';
12
12
  declare const _default: React.FC<{
13
13
  id?: string | undefined;
14
14
  }> & {
15
- Input: import("@radix-ui/react-polymorphic").ForwardRefComponent<React.ForwardRefExoticComponent<Pick<Omit<Pick<{
15
+ Input: import("@radix-ui/react-polymorphic").ForwardRefComponent<React.ForwardRefExoticComponent<Pick<Omit<Pick<({
16
16
  [x: string]: any;
17
17
  [x: number]: any;
18
18
  } & {
19
19
  theme?: any;
20
- } & {
20
+ } & ({} | {
21
+ children?: React.ReactNode;
22
+ })) & {
21
23
  as?: string | React.ComponentType<any> | undefined;
22
24
  forwardedAs?: string | React.ComponentType<any> | undefined;
23
25
  }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "className" | "block" | "icon" | "sx" | "disabled" | "variant" | "contrast"> & {