@primer/components 0.0.0-202192633419 → 0.0.0-20219265511

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 (118) hide show
  1. package/CHANGELOG.md +4 -8
  2. package/dist/browser.esm.js +3 -3
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +3 -3
  5. package/dist/browser.umd.js.map +1 -1
  6. package/lib/AnchoredOverlay/AnchoredOverlay.d.ts +2 -4
  7. package/lib/Autocomplete/Autocomplete.d.ts +11 -13
  8. package/lib/Autocomplete/AutocompleteInput.d.ts +11 -13
  9. package/lib/Button/Button.d.ts +11 -11
  10. package/lib/Button/ButtonBase.d.ts +1 -1
  11. package/lib/Button/ButtonClose.d.ts +29 -29
  12. package/lib/Button/ButtonDanger.d.ts +11 -11
  13. package/lib/Button/ButtonInvisible.d.ts +11 -11
  14. package/lib/Button/ButtonOutline.d.ts +11 -11
  15. package/lib/Button/ButtonPrimary.d.ts +11 -11
  16. package/lib/Button/ButtonStyles.js +1 -1
  17. package/lib/CircleBadge.d.ts +2 -2
  18. package/lib/CircleOcticon.d.ts +33 -33
  19. package/lib/Dialog.d.ts +35 -35
  20. package/lib/Dropdown.d.ts +110 -110
  21. package/lib/DropdownMenu/DropdownButton.d.ts +30 -30
  22. package/lib/FilterList.d.ts +26 -26
  23. package/lib/Label.d.ts +1 -1
  24. package/lib/NewButton/button.d.ts +22 -0
  25. package/lib/NewButton/button.js +284 -0
  26. package/lib/NewButton/counter.d.ts +6 -0
  27. package/lib/NewButton/counter.js +33 -0
  28. package/lib/NewButton/index.d.ts +4 -0
  29. package/lib/NewButton/index.js +21 -0
  30. package/lib/Position.d.ts +4 -4
  31. package/lib/ProgressBar.d.ts +1 -1
  32. package/lib/SelectMenu/SelectMenu.d.ts +151 -153
  33. package/lib/SelectMenu/SelectMenuItem.d.ts +1 -1
  34. package/lib/SelectMenu/SelectMenuModal.d.ts +1 -1
  35. package/lib/TextInputWithTokens.d.ts +11 -13
  36. package/lib/Timeline.d.ts +33 -33
  37. package/lib/Token/AvatarToken.d.ts +1 -1
  38. package/lib/Token/IssueLabelToken.d.ts +1 -1
  39. package/lib/Token/Token.d.ts +1 -1
  40. package/lib/_TextInputWrapper.d.ts +1 -1
  41. package/lib/constants.js +3 -1
  42. package/lib/theme-preval.js +2 -2
  43. package/lib/utils/testing.d.ts +1 -1
  44. package/lib-esm/AnchoredOverlay/AnchoredOverlay.d.ts +2 -4
  45. package/lib-esm/Autocomplete/Autocomplete.d.ts +11 -13
  46. package/lib-esm/Autocomplete/AutocompleteInput.d.ts +11 -13
  47. package/lib-esm/Button/Button.d.ts +11 -11
  48. package/lib-esm/Button/ButtonBase.d.ts +1 -1
  49. package/lib-esm/Button/ButtonClose.d.ts +29 -29
  50. package/lib-esm/Button/ButtonDanger.d.ts +11 -11
  51. package/lib-esm/Button/ButtonInvisible.d.ts +11 -11
  52. package/lib-esm/Button/ButtonOutline.d.ts +11 -11
  53. package/lib-esm/Button/ButtonPrimary.d.ts +11 -11
  54. package/lib-esm/Button/ButtonStyles.js +1 -1
  55. package/lib-esm/CircleBadge.d.ts +2 -2
  56. package/lib-esm/CircleOcticon.d.ts +33 -33
  57. package/lib-esm/Dialog.d.ts +35 -35
  58. package/lib-esm/Dropdown.d.ts +110 -110
  59. package/lib-esm/DropdownMenu/DropdownButton.d.ts +30 -30
  60. package/lib-esm/FilterList.d.ts +26 -26
  61. package/lib-esm/Label.d.ts +1 -1
  62. package/lib-esm/NewButton/button.d.ts +22 -0
  63. package/lib-esm/NewButton/button.js +261 -0
  64. package/lib-esm/NewButton/counter.d.ts +6 -0
  65. package/lib-esm/NewButton/counter.js +21 -0
  66. package/lib-esm/NewButton/index.d.ts +4 -0
  67. package/lib-esm/NewButton/index.js +3 -0
  68. package/lib-esm/Position.d.ts +4 -4
  69. package/lib-esm/ProgressBar.d.ts +1 -1
  70. package/lib-esm/SelectMenu/SelectMenu.d.ts +151 -153
  71. package/lib-esm/SelectMenu/SelectMenuItem.d.ts +1 -1
  72. package/lib-esm/SelectMenu/SelectMenuModal.d.ts +1 -1
  73. package/lib-esm/TextInputWithTokens.d.ts +11 -13
  74. package/lib-esm/Timeline.d.ts +33 -33
  75. package/lib-esm/Token/AvatarToken.d.ts +1 -1
  76. package/lib-esm/Token/IssueLabelToken.d.ts +1 -1
  77. package/lib-esm/Token/Token.d.ts +1 -1
  78. package/lib-esm/_TextInputWrapper.d.ts +1 -1
  79. package/lib-esm/constants.js +3 -1
  80. package/lib-esm/theme-preval.js +2 -2
  81. package/lib-esm/utils/testing.d.ts +1 -1
  82. package/package.json +8 -9
  83. package/lib/DatePicker/DatePicker.d.ts +0 -48
  84. package/lib/DatePicker/DatePicker.js +0 -92
  85. package/lib/DatePicker/DatePickerAnchor.d.ts +0 -5
  86. package/lib/DatePicker/DatePickerAnchor.js +0 -180
  87. package/lib/DatePicker/DatePickerOverlay.d.ts +0 -3
  88. package/lib/DatePicker/DatePickerOverlay.js +0 -39
  89. package/lib/DatePicker/DatePickerPanel.d.ts +0 -2
  90. package/lib/DatePicker/DatePickerPanel.js +0 -126
  91. package/lib/DatePicker/Day.d.ts +0 -14
  92. package/lib/DatePicker/Day.js +0 -174
  93. package/lib/DatePicker/Month.d.ts +0 -9
  94. package/lib/DatePicker/Month.js +0 -118
  95. package/lib/DatePicker/index.d.ts +0 -2
  96. package/lib/DatePicker/index.js +0 -13
  97. package/lib/DatePicker/useDatePicker.d.ts +0 -85
  98. package/lib/DatePicker/useDatePicker.js +0 -380
  99. package/lib/hooks/useDebounce.d.ts +0 -2
  100. package/lib/hooks/useDebounce.js +0 -24
  101. package/lib-esm/DatePicker/DatePicker.d.ts +0 -48
  102. package/lib-esm/DatePicker/DatePicker.js +0 -75
  103. package/lib-esm/DatePicker/DatePickerAnchor.d.ts +0 -5
  104. package/lib-esm/DatePicker/DatePickerAnchor.js +0 -153
  105. package/lib-esm/DatePicker/DatePickerOverlay.d.ts +0 -3
  106. package/lib-esm/DatePicker/DatePickerOverlay.js +0 -24
  107. package/lib-esm/DatePicker/DatePickerPanel.d.ts +0 -2
  108. package/lib-esm/DatePicker/DatePickerPanel.js +0 -100
  109. package/lib-esm/DatePicker/Day.d.ts +0 -14
  110. package/lib-esm/DatePicker/Day.js +0 -151
  111. package/lib-esm/DatePicker/Month.d.ts +0 -9
  112. package/lib-esm/DatePicker/Month.js +0 -94
  113. package/lib-esm/DatePicker/index.d.ts +0 -2
  114. package/lib-esm/DatePicker/index.js +0 -1
  115. package/lib-esm/DatePicker/useDatePicker.d.ts +0 -85
  116. package/lib-esm/DatePicker/useDatePicker.js +0 -352
  117. package/lib-esm/hooks/useDebounce.d.ts +0 -2
  118. package/lib-esm/hooks/useDebounce.js +0 -16
@@ -1,380 +0,0 @@
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 _dateFns = require("date-fns");
13
-
14
- var _deepmerge = _interopRequireDefault(require("deepmerge"));
15
-
16
- var _react = _interopRequireWildcard(require("react"));
17
-
18
- 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); }
19
-
20
- 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; }
21
-
22
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
23
-
24
- const DatePickerContext = /*#__PURE__*/(0, _react.createContext)(null);
25
-
26
- const useDatePicker = date => {
27
- const value = (0, _react.useContext)(DatePickerContext);
28
- const [selected, setSelected] = (0, _react.useState)(false);
29
-
30
- if (!value) {
31
- throw new Error('useDatePicker must be used inside a DatePickerProvider');
32
- }
33
-
34
- (0, _react.useEffect)(() => {
35
- if (date) {
36
- if (value.hoverRange) {
37
- if (isRangeSelection(value.hoverRange)) {
38
- if ((0, _dateFns.isEqual)(date, value.hoverRange.from)) {
39
- setSelected('start');
40
- } else if (value.hoverRange.to && (0, _dateFns.isEqual)(date, value.hoverRange.to)) {
41
- setSelected('end');
42
- } else if ((0, _dateFns.isAfter)(date, value.hoverRange.from) && value.hoverRange.to && (0, _dateFns.isBefore)(date, value.hoverRange.to)) {
43
- setSelected('middle');
44
- } else {
45
- setSelected(false);
46
- }
47
- }
48
- } else if (value.selection) {
49
- if (isMultiSelection(value.selection)) {
50
- setSelected(!!value.selection.find(d => (0, _dateFns.isEqual)(d, date)));
51
- } else if (isRangeSelection(value.selection)) {
52
- if ((0, _dateFns.isEqual)(date, value.selection.from)) {
53
- setSelected('start');
54
- } else if (value.selection.to && (0, _dateFns.isEqual)(date, value.selection.to)) {
55
- setSelected('end');
56
- } else if ((0, _dateFns.isAfter)(date, value.selection.from) && value.selection.to && (0, _dateFns.isBefore)(date, value.selection.to)) {
57
- setSelected('middle');
58
- } else {
59
- setSelected(false);
60
- }
61
- } else {
62
- setSelected((0, _dateFns.isEqual)(date, value.selection));
63
- }
64
- }
65
- }
66
- }, [date, value.hoverRange, value.selection]);
67
- let blocked,
68
- disabled = false;
69
-
70
- if (date) {
71
- // Determine if date is blocked out
72
- if (value.configuration.blockedDates) {
73
- blocked = !!value.configuration.blockedDates.find(d => (0, _dateFns.isEqual)(d, date));
74
- } // Determine if date is disabled
75
-
76
-
77
- if (value.configuration.minDate || value.configuration.maxDate) {
78
- disabled = (value.configuration.minDate ? (0, _dateFns.isBefore)(date, value.configuration.minDate) : false) || (value.configuration.maxDate ? (0, _dateFns.isAfter)(date, value.configuration.maxDate) : false);
79
- }
80
- }
81
-
82
- return { ...value,
83
- blocked,
84
- disabled,
85
- selected
86
- };
87
- };
88
-
89
- var _default = useDatePicker;
90
- exports.default = _default;
91
-
92
- function isSingleSelection(selection) {
93
- return selection instanceof Date;
94
- }
95
-
96
- function isMultiSelection(selection) {
97
- return Array.isArray(selection);
98
- }
99
-
100
- function isRangeSelection(selection) {
101
- return !!selection.from;
102
- }
103
-
104
- function isStringRangeSelection(selection) {
105
- return !!selection.from;
106
- }
107
-
108
- function parseSelection(selection, variant) {
109
- if (!selection) return;
110
-
111
- if (variant === 'multi') {
112
- if (isMultiSelection(selection)) {
113
- const parsedSelection = [];
114
-
115
- for (const d of selection) {
116
- parsedSelection.push(new Date(new Date(d).toDateString()));
117
- }
118
-
119
- return parsedSelection.sort((a, b) => a.getTime() - b.getTime());
120
- } else if (selection instanceof Date) {
121
- return [new Date(new Date(selection).toDateString())];
122
- } else if (isRangeSelection(selection)) {
123
- const parsedSelection = [];
124
- parsedSelection.push(new Date(new Date(selection.from).toDateString()));
125
-
126
- if (selection.to) {
127
- parsedSelection.push(new Date(new Date(selection.to).toDateString()));
128
- }
129
-
130
- return parsedSelection.sort((a, b) => a.getTime() - b.getTime());
131
- }
132
- } else if (variant === 'range') {
133
- if (isRangeSelection(selection)) {
134
- return {
135
- from: new Date(new Date(selection.from).toDateString()),
136
- to: selection.to ? new Date(new Date(selection.to).toDateString()) : null
137
- };
138
- } else if (isMultiSelection(selection)) {
139
- return {
140
- from: new Date(new Date(selection[0]).toDateString()),
141
- to: selection[1] ? new Date(new Date(selection[1]).toDateString()) : null
142
- };
143
- } else if (selection instanceof Date) {
144
- return {
145
- from: new Date(new Date(selection).toDateString()),
146
- to: null
147
- };
148
- }
149
- } else {
150
- if (selection instanceof Date) {
151
- return new Date(new Date(selection).toDateString());
152
- } else if (isMultiSelection(selection)) {
153
- return new Date(new Date(selection[0]).toDateString());
154
- } else if (isRangeSelection(selection)) {
155
- return new Date(new Date(selection.from).toDateString());
156
- } else {
157
- return;
158
- }
159
- }
160
- }
161
-
162
- const defaultConfiguration = {
163
- anchorVariant: 'button',
164
- confirmation: false,
165
- contiguousSelection: false,
166
- dimWeekends: false,
167
- iconPlacement: 'start',
168
- placeholder: 'Select a Date...',
169
- selection: 'single',
170
- view: '2-month',
171
- weekStartsOn: 'Sunday'
172
- };
173
-
174
- const DatePickerProvider = ({
175
- configuration: externalConfig = {},
176
- children,
177
- closePicker,
178
- value
179
- }) => {
180
- const [configuration, setConfiguration] = (0, _react.useState)((0, _deepmerge.default)(defaultConfiguration, externalConfig));
181
- const [previousSelection, setPreviousSelection] = (0, _react.useState)(parseSelection(value, configuration.selection));
182
- const [selection, setSelection] = (0, _react.useState)(parseSelection(value, configuration.selection));
183
- const [hoverRange, setHoverRange] = (0, _react.useState)(null);
184
- const [currentViewingDate, setCurrentViewingDate] = (0, _react.useState)(new Date());
185
- (0, _react.useEffect)(() => {
186
- setConfiguration((0, _deepmerge.default)(defaultConfiguration, externalConfig));
187
- setSelection(parseSelection(selection, configuration.selection)); // Don't want this to run every time selection gets updated
188
- // eslint-disable-next-line react-hooks/exhaustive-deps
189
- }, [configuration.selection, externalConfig]);
190
- const goToMonth = (0, _react.useCallback)(date => {
191
- setCurrentViewingDate(new Date(new Date(date).toDateString()));
192
- }, []);
193
- const nextMonth = (0, _react.useCallback)(() => {
194
- setCurrentViewingDate((0, _dateFns.addMonths)(currentViewingDate, 1));
195
- }, [currentViewingDate]);
196
- const previousMonth = (0, _react.useCallback)(() => {
197
- setCurrentViewingDate((0, _dateFns.subMonths)(currentViewingDate, 1));
198
- }, [currentViewingDate]);
199
- const getFormattedDate = (0, _react.useMemo)(() => {
200
- if (!selection) {
201
- return configuration.placeholder;
202
- }
203
-
204
- let template = 'MMM d';
205
-
206
- if (configuration.anchorVariant !== 'input' && configuration.dateFormat) {
207
- switch (configuration.dateFormat) {
208
- case 'short':
209
- template = 'MMM d';
210
- break;
211
-
212
- case 'long':
213
- template = 'MMM d, yyyy';
214
- break;
215
-
216
- default:
217
- template = configuration.dateFormat;
218
- break;
219
- }
220
- } else {
221
- template = 'MM/dd/yyyy';
222
- }
223
-
224
- switch (configuration.selection) {
225
- case 'single':
226
- {
227
- if (selection instanceof Date) {
228
- return (0, _dateFns.format)(selection, template);
229
- } else if (Array.isArray(selection)) {
230
- return (0, _dateFns.format)(selection[0], template);
231
- } else if (isRangeSelection(selection)) {
232
- return (0, _dateFns.format)(selection.from, template);
233
- } else {
234
- return 'Invalid Selection';
235
- }
236
- }
237
-
238
- case 'multi':
239
- {
240
- if (Array.isArray(selection)) {
241
- if (selection.length > 3) return `${selection.length} Selected`;
242
- const formatted = selection.map(d => (0, _dateFns.format)(d, template)).join(', ');
243
- return formatted;
244
- } else if (selection instanceof Date) {
245
- return [selection].map(d => (0, _dateFns.format)(d, template)).join(', ');
246
- } else if (isRangeSelection(selection)) {
247
- return [selection.to, selection.from].map(d => d ? (0, _dateFns.format)(d, template) : '').join(', ');
248
- } else {
249
- return 'Invalid Selection';
250
- }
251
- }
252
-
253
- case 'range':
254
- {
255
- if (isRangeSelection(selection)) {
256
- return Object.entries(selection).map(([_, date]) => date ? (0, _dateFns.format)(date, template) : '').join(' - ');
257
- } else if (selection instanceof Date) {
258
- return Object.entries({
259
- from: selection,
260
- to: null
261
- }).map(([_, date]) => date ? (0, _dateFns.format)(date, template) : '').join(' - ');
262
- } else if (Array.isArray(selection)) {
263
- return Object.entries({
264
- from: selection[0],
265
- to: selection[1]
266
- }) // to date can still be null
267
- // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
268
- .map(([_, date]) => date ? (0, _dateFns.format)(date, template) : '').join(' - ');
269
- } else {
270
- return 'Invalid Selection';
271
- }
272
- }
273
-
274
- default:
275
- {
276
- return 'Invalid Configuration';
277
- }
278
- }
279
- }, [configuration.anchorVariant, configuration.dateFormat, configuration.placeholder, configuration.selection, selection]);
280
- const saveValue = (0, _react.useCallback)(updatedSelection => {
281
- setPreviousSelection(updatedSelection !== null && updatedSelection !== void 0 ? updatedSelection : selection);
282
- closePicker === null || closePicker === void 0 ? void 0 : closePicker();
283
- }, [closePicker, selection]);
284
- const inputHandler = (0, _react.useCallback)(updatedSelection => {
285
- // validate date falls within range
286
- setSelection(updatedSelection);
287
- }, []);
288
- const selectionHandler = (0, _react.useCallback)(date => {
289
- if (configuration.selection === 'multi') {
290
- const selections = [...selection];
291
- const existingIndex = selections.findIndex(s => (0, _dateFns.isEqual)(s, date));
292
-
293
- if (existingIndex > -1) {
294
- selections.splice(existingIndex, 1);
295
- setSelection(selections.sort((a, b) => a.getTime() - b.getTime()));
296
- } else {
297
- setSelection([...selections, date].sort((a, b) => a.getTime() - b.getTime()));
298
- }
299
- } else if (configuration.selection === 'range') {
300
- if (selection && isRangeSelection(selection) && !selection.to) {
301
- const updatedSelection = (0, _dateFns.isBefore)(date, selection.from) ? {
302
- from: date,
303
- to: selection.from
304
- } : {
305
- from: selection.from,
306
- to: date
307
- };
308
- setSelection(updatedSelection);
309
- setHoverRange(null);
310
-
311
- if (!configuration.confirmation) {
312
- saveValue(updatedSelection);
313
- }
314
- } else {
315
- setHoverRange({
316
- from: date,
317
- to: date
318
- });
319
- setSelection({
320
- from: date,
321
- to: null
322
- });
323
- }
324
- } else {
325
- setSelection(date);
326
-
327
- if (!configuration.confirmation) {
328
- saveValue(date);
329
- }
330
- }
331
- }, [configuration.confirmation, configuration.selection, saveValue, selection]);
332
- const focusHnadler = (0, _react.useCallback)(date => {
333
- if (!selection) return;
334
-
335
- if (configuration.selection === 'range' && isRangeSelection(selection) && hoverRange) {
336
- setHoverRange((0, _dateFns.isBefore)(date, selection.from) ? {
337
- from: date,
338
- to: selection.from
339
- } : {
340
- from: selection.from,
341
- to: date
342
- });
343
- }
344
- }, [configuration.selection, hoverRange, selection]);
345
- const blurHnadler = (0, _react.useCallback)(date => {
346
- if (!selection || !hoverRange) return;
347
-
348
- if (configuration.selection === 'range' && isRangeSelection(selection) && (hoverRange.from === date || hoverRange.to === date)) {// setHoverRange({from: hoverRange.from, to: hoverRange.from})
349
- }
350
- }, [configuration.selection, hoverRange, selection]);
351
- const revertValue = (0, _react.useCallback)(() => {
352
- setSelection(previousSelection);
353
- }, [previousSelection]);
354
- const datePickerCtx = (0, _react.useMemo)(() => {
355
- return {
356
- configuration,
357
- currentViewingDate,
358
- disabled: false,
359
- formattedDate: getFormattedDate,
360
- goToMonth,
361
- hoverRange,
362
- nextMonth,
363
- onDateInput: inputHandler,
364
- onDayBlur: blurHnadler,
365
- onDayFocus: focusHnadler,
366
- onSelection: selectionHandler,
367
- previousMonth,
368
- revertValue,
369
- saveValue,
370
- selectionActive: false,
371
- selection
372
- };
373
- }, [blurHnadler, configuration, currentViewingDate, focusHnadler, getFormattedDate, goToMonth, hoverRange, inputHandler, nextMonth, previousMonth, revertValue, saveValue, selection, selectionHandler]);
374
- return /*#__PURE__*/_react.default.createElement(DatePickerContext.Provider, {
375
- value: datePickerCtx
376
- }, children);
377
- };
378
-
379
- exports.DatePickerProvider = DatePickerProvider;
380
- DatePickerProvider.displayName = "DatePickerProvider";
@@ -1,2 +0,0 @@
1
- declare function useDebounce<T>(value: T, delay: number): T;
2
- export default useDebounce;
@@ -1,24 +0,0 @@
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;
@@ -1,48 +0,0 @@
1
- import React from 'react';
2
- import { OverlayProps } from '../Overlay';
3
- import { FocusTrapHookSettings } from '../hooks/useFocusTrap';
4
- import { FocusZoneHookSettings } from '../hooks/useFocusZone';
5
- import { DatePickerConfiguration, Selection } from './useDatePicker';
6
- declare type OpenGesture = 'anchor-click' | 'anchor-key-press';
7
- declare type CloseGesture = 'anchor-click' | 'click-outside' | 'escape';
8
- export interface DatePickerProps extends DatePickerConfiguration {
9
- /**
10
- * An override to the internal ref that will be spread on to the renderAnchor
11
- */
12
- anchorRef?: React.RefObject<HTMLElement>;
13
- /**
14
- * Settings to apply to the Focus Zone on the internal `Overlay` component.
15
- */
16
- focusTrapSettings?: Partial<FocusTrapHookSettings>;
17
- /**
18
- * Settings to apply to the Focus Zone on the internal `Overlay` component.
19
- */
20
- focusZoneSettings?: Partial<FocusZoneHookSettings>;
21
- initialValue?: 'today' | Date | string | null;
22
- iconOnly?: boolean;
23
- placeholder?: string;
24
- /**
25
- * Determines whether the overlay portion of the component should be shown or not
26
- */
27
- open?: boolean;
28
- /**
29
- * A callback which is called whenever the overlay is currently closed and an "open gesture" is detected.
30
- */
31
- onOpen?: (gesture: OpenGesture) => unknown;
32
- /**
33
- * A callback which is called whenever the overlay is currently open and a "close gesture" is detected.
34
- */
35
- onClose?: (gesture: CloseGesture) => unknown;
36
- /**
37
- * Props to be spread on the internal `Overlay` component.
38
- */
39
- overlayProps?: Partial<OverlayProps>;
40
- /**
41
- * A custom function component used to render the anchor element.
42
- * Will receive the selected text as `children` prop when an item is activated.
43
- */
44
- renderAnchor: <T extends React.HTMLAttributes<HTMLElement>>(props: T) => JSX.Element;
45
- value?: Selection;
46
- }
47
- export declare const DatePicker: React.FC<DatePickerProps>;
48
- export {};
@@ -1,75 +0,0 @@
1
- import React, { useRef, useState } from 'react';
2
- import { DatePickerAnchor } from './DatePickerAnchor';
3
- import { DatePickerProvider } from './useDatePicker';
4
- import { DatePickerOverlay } from './DatePickerOverlay';
5
- export const DatePicker = ({
6
- anchorVariant,
7
- anchorRef: externalAnchorRef,
8
- confirmation,
9
- dateFormat,
10
- focusTrapSettings,
11
- focusZoneSettings,
12
- maxDate,
13
- minDate,
14
- onOpen: onOpenExternal,
15
- onClose: onCloseExternal,
16
- open,
17
- overlayProps,
18
- renderAnchor,
19
- selection,
20
- value,
21
- view,
22
- weekStartsOn
23
- }) => {
24
- const buttonRef = useRef(null);
25
- const [isOpen, setIsOpen] = useState(false);
26
- const datePickerConfiguration = {
27
- anchorVariant,
28
- confirmation,
29
- dateFormat,
30
- maxDate,
31
- minDate,
32
- selection,
33
- view,
34
- weekStartsOn
35
- };
36
-
37
- const onOpen = gesture => {
38
- setIsOpen(true);
39
- onOpenExternal === null || onOpenExternal === void 0 ? void 0 : onOpenExternal(gesture);
40
- };
41
-
42
- const onClose = gesture => {
43
- setIsOpen(false);
44
- onCloseExternal === null || onCloseExternal === void 0 ? void 0 : onCloseExternal(gesture);
45
- };
46
-
47
- const toggleIsOpen = () => {
48
- if (isOpen) {
49
- setIsOpen(false);
50
- onCloseExternal === null || onCloseExternal === void 0 ? void 0 : onCloseExternal('anchor-click');
51
- } else {
52
- setIsOpen(true);
53
- onCloseExternal === null || onCloseExternal === void 0 ? void 0 : onCloseExternal('anchor-click');
54
- }
55
- };
56
-
57
- return /*#__PURE__*/React.createElement(DatePickerProvider, {
58
- configuration: datePickerConfiguration,
59
- value: value,
60
- closePicker: () => setIsOpen(false)
61
- }, /*#__PURE__*/React.createElement(DatePickerAnchor, {
62
- ref: buttonRef,
63
- onAction: toggleIsOpen
64
- }), /*#__PURE__*/React.createElement(DatePickerOverlay, {
65
- anchorRef: externalAnchorRef !== null && externalAnchorRef !== void 0 ? externalAnchorRef : buttonRef,
66
- renderAnchor: renderAnchor,
67
- open: open !== null && open !== void 0 ? open : isOpen,
68
- onOpen: onOpen,
69
- onClose: onClose,
70
- overlayProps: overlayProps,
71
- focusTrapSettings: focusTrapSettings,
72
- focusZoneSettings: focusZoneSettings
73
- }));
74
- };
75
- DatePicker.displayName = "DatePicker";
@@ -1,5 +0,0 @@
1
- import React from 'react';
2
- export interface DatePickerAnchorProps {
3
- onAction?: (event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
4
- }
5
- export declare const DatePickerAnchor: React.ForwardRefExoticComponent<DatePickerAnchorProps & React.RefAttributes<HTMLDivElement>>;
@@ -1,153 +0,0 @@
1
- import { CalendarIcon } from '@primer/octicons-react';
2
- import styled from 'styled-components';
3
- import React, { useCallback, useState } from 'react';
4
- import Button, { ButtonInvisible } from '../Button';
5
- import Text from '../Text';
6
- import { get } from '../constants';
7
- import StyledOcticon from '../StyledOcticon';
8
- import useDatePicker from './useDatePicker';
9
- import TextInput from '../TextInput';
10
- import Box from '../Box';
11
- import { isBefore } from 'date-fns';
12
- const DatePickerAnchorButton = styled(Button).withConfig({
13
- displayName: "DatePickerAnchor__DatePickerAnchorButton",
14
- componentId: "sc-8gpb9d-0"
15
- })(["align-items:center;display:flex;flex-direction:row;justify-content:space-between;max-width:350px;overflow:hidden;& ", "{margin-left:", ";}"], Text, get('space.2'));
16
- const INVALID_DATE = 'Invalid Date';
17
- export const DatePickerAnchor = /*#__PURE__*/React.forwardRef(({
18
- onAction
19
- }, ref) => {
20
- const {
21
- configuration: {
22
- anchorVariant,
23
- iconPlacement,
24
- selection
25
- },
26
- disabled,
27
- formattedDate,
28
- onDateInput
29
- } = useDatePicker();
30
- const [inputValue, setInputValue] = useState(formattedDate);
31
- const keyPressHandler = useCallback(event => {
32
- if (disabled) {
33
- return;
34
- }
35
-
36
- if ([' ', 'Enter'].includes(event.key)) {
37
- onAction === null || onAction === void 0 ? void 0 : onAction(event);
38
- }
39
- }, [disabled, onAction]);
40
- const clickHandler = useCallback(event => {
41
- if (disabled) {
42
- return;
43
- }
44
-
45
- onAction === null || onAction === void 0 ? void 0 : onAction(event);
46
- }, [disabled, onAction]);
47
- const onInputChangeHandler = useCallback(e => {
48
- const value = e.currentTarget.value;
49
- if (!value) return;
50
-
51
- if (selection === 'range') {
52
- var _values$, _values$2, _values$3, _values$4, _values$5, _values$6;
53
-
54
- const values = value.split(' - ');
55
- const dates = isBefore(new Date((_values$ = values[0]) === null || _values$ === void 0 ? void 0 : _values$.trim()), new Date((_values$2 = values[1]) === null || _values$2 === void 0 ? void 0 : _values$2.trim())) ? {
56
- from: new Date((_values$3 = values[0]) === null || _values$3 === void 0 ? void 0 : _values$3.trim()),
57
- to: new Date((_values$4 = values[1]) === null || _values$4 === void 0 ? void 0 : _values$4.trim())
58
- } : {
59
- from: new Date((_values$5 = values[1]) === null || _values$5 === void 0 ? void 0 : _values$5.trim()),
60
- to: new Date((_values$6 = values[0]) === null || _values$6 === void 0 ? void 0 : _values$6.trim())
61
- };
62
- setInputValue(value);
63
-
64
- if (dates.from.toString() !== INVALID_DATE && dates.to.toString() !== INVALID_DATE) {
65
- onDateInput(dates);
66
- }
67
- } else if (selection === 'multi') {
68
- const values = value.split(',');
69
- const dates = [];
70
-
71
- for (const date of values) {
72
- dates.push(new Date(date.trim()));
73
- }
74
-
75
- setInputValue(value);
76
-
77
- if (dates.every(d => d.toString() !== INVALID_DATE)) {
78
- onDateInput(dates);
79
- }
80
- } else {
81
- const date = new Date(value);
82
- setInputValue(value);
83
- if (date.toString() !== INVALID_DATE) onDateInput(date);
84
- }
85
- }, [onDateInput, selection]);
86
-
87
- const onBlurHandler = () => {
88
- setInputValue(formattedDate);
89
- };
90
-
91
- if (anchorVariant === 'input') {
92
- const calendarButton = side => /*#__PURE__*/React.createElement(ButtonInvisible, {
93
- onClick: clickHandler,
94
- sx: {
95
- width: '32px',
96
- px: '6px',
97
- position: 'absolute',
98
- [side]: '1px',
99
- top: '1px'
100
- }
101
- }, /*#__PURE__*/React.createElement(StyledOcticon, {
102
- icon: CalendarIcon
103
- }));
104
-
105
- const inputSx = () => {
106
- if (iconPlacement === 'start') {
107
- return {
108
- pl: 5,
109
- pr: 2
110
- };
111
- } else if (iconPlacement === 'end') {
112
- return {
113
- pl: 2,
114
- pr: 5
115
- };
116
- } else {
117
- return {};
118
- }
119
- };
120
-
121
- return /*#__PURE__*/React.createElement(Box, {
122
- ref: ref,
123
- sx: {
124
- position: 'relative',
125
- display: 'flex',
126
- flex: 1
127
- }
128
- }, iconPlacement === 'start' && calendarButton('left'), /*#__PURE__*/React.createElement(TextInput, {
129
- value: inputValue,
130
- onChange: onInputChangeHandler,
131
- sx: inputSx(),
132
- onBlur: onBlurHandler
133
- }), iconPlacement === 'end' && calendarButton('right'));
134
- }
135
-
136
- return /*#__PURE__*/React.createElement(Box, {
137
- ref: ref
138
- }, /*#__PURE__*/React.createElement(DatePickerAnchorButton, {
139
- onClick: clickHandler,
140
- onKeyPress: keyPressHandler
141
- }, /*#__PURE__*/React.createElement(StyledOcticon, {
142
- icon: CalendarIcon,
143
- color: "fg.muted",
144
- sx: {
145
- my: '2px'
146
- }
147
- }), anchorVariant !== 'icon-only' && /*#__PURE__*/React.createElement(Text, {
148
- sx: {
149
- overflow: 'hidden',
150
- textOverflow: 'ellipsis'
151
- }
152
- }, formattedDate)));
153
- });
@@ -1,3 +0,0 @@
1
- import React from 'react';
2
- import { AnchoredOverlayProps } from '../AnchoredOverlay';
3
- export declare const DatePickerOverlay: React.FC<AnchoredOverlayProps>;