@primer/components 0.0.0-202192602912 → 0.0.0-20219266052

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 +24 -0
  25. package/lib/NewButton/button.js +292 -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 +24 -0
  63. package/lib-esm/NewButton/button.js +268 -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 -158
  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 -107
  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 -83
  98. package/lib/DatePicker/useDatePicker.js +0 -375
  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 -132
  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 -83
  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 -83
  116. package/lib-esm/DatePicker/useDatePicker.js +0 -347
  117. package/lib-esm/hooks/useDebounce.d.ts +0 -2
  118. package/lib-esm/hooks/useDebounce.js +0 -16
@@ -1,375 +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 selectionHandler = (0, _react.useCallback)(date => {
285
- if (configuration.selection === 'multi') {
286
- const selections = [...selection];
287
- const existingIndex = selections.findIndex(s => (0, _dateFns.isEqual)(s, date));
288
-
289
- if (existingIndex > -1) {
290
- selections.splice(existingIndex, 1);
291
- setSelection(selections.sort((a, b) => a.getTime() - b.getTime()));
292
- } else {
293
- setSelection([...selections, date].sort((a, b) => a.getTime() - b.getTime()));
294
- }
295
- } else if (configuration.selection === 'range') {
296
- if (selection && isRangeSelection(selection) && !selection.to) {
297
- const updatedSelection = (0, _dateFns.isBefore)(date, selection.from) ? {
298
- from: date,
299
- to: selection.from
300
- } : {
301
- from: selection.from,
302
- to: date
303
- };
304
- setSelection(updatedSelection);
305
- setHoverRange(null);
306
-
307
- if (!configuration.confirmation) {
308
- saveValue(updatedSelection);
309
- }
310
- } else {
311
- setHoverRange({
312
- from: date,
313
- to: date
314
- });
315
- setSelection({
316
- from: date,
317
- to: null
318
- });
319
- }
320
- } else {
321
- setSelection(date);
322
-
323
- if (!configuration.confirmation) {
324
- saveValue(date);
325
- }
326
- }
327
- }, [configuration.confirmation, configuration.selection, saveValue, selection]);
328
- const focusHnadler = (0, _react.useCallback)(date => {
329
- if (!selection) return;
330
-
331
- if (configuration.selection === 'range' && isRangeSelection(selection) && hoverRange) {
332
- setHoverRange((0, _dateFns.isBefore)(date, selection.from) ? {
333
- from: date,
334
- to: selection.from
335
- } : {
336
- from: selection.from,
337
- to: date
338
- });
339
- }
340
- }, [configuration.selection, hoverRange, selection]);
341
- const blurHnadler = (0, _react.useCallback)(date => {
342
- if (!selection || !hoverRange) return;
343
-
344
- if (configuration.selection === 'range' && isRangeSelection(selection) && (hoverRange.from === date || hoverRange.to === date)) {// setHoverRange({from: hoverRange.from, to: hoverRange.from})
345
- }
346
- }, [configuration.selection, hoverRange, selection]);
347
- const revertValue = (0, _react.useCallback)(() => {
348
- setSelection(previousSelection);
349
- }, [previousSelection]);
350
- const datePickerCtx = (0, _react.useMemo)(() => {
351
- return {
352
- configuration,
353
- currentViewingDate,
354
- disabled: false,
355
- formattedDate: getFormattedDate,
356
- goToMonth,
357
- hoverRange,
358
- nextMonth,
359
- onDayBlur: blurHnadler,
360
- onDayFocus: focusHnadler,
361
- onSelection: selectionHandler,
362
- previousMonth,
363
- revertValue,
364
- saveValue,
365
- selectionActive: false,
366
- selection
367
- };
368
- }, [blurHnadler, configuration, currentViewingDate, focusHnadler, getFormattedDate, goToMonth, hoverRange, nextMonth, previousMonth, revertValue, saveValue, selection, selectionHandler]);
369
- return /*#__PURE__*/_react.default.createElement(DatePickerContext.Provider, {
370
- value: datePickerCtx
371
- }, children);
372
- };
373
-
374
- exports.DatePickerProvider = DatePickerProvider;
375
- 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,132 +0,0 @@
1
- import { CalendarIcon } from '@primer/octicons-react';
2
- import styled from 'styled-components';
3
- import React, { useCallback } 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
- const DatePickerAnchorButton = styled(Button).withConfig({
12
- displayName: "DatePickerAnchor__DatePickerAnchorButton",
13
- componentId: "sc-8gpb9d-0"
14
- })(["align-items:center;display:flex;flex-direction:row;justify-content:space-between;max-width:350px;overflow:hidden;& ", "{margin-left:", ";}"], Text, get('space.2'));
15
- export const DatePickerAnchor = /*#__PURE__*/React.forwardRef(({
16
- onAction
17
- }, ref) => {
18
- const {
19
- configuration: {
20
- anchorVariant,
21
- iconPlacement,
22
- selection
23
- },
24
- disabled,
25
- formattedDate
26
- } = useDatePicker();
27
- const keyPressHandler = useCallback(event => {
28
- if (disabled) {
29
- return;
30
- }
31
-
32
- if ([' ', 'Enter'].includes(event.key)) {
33
- onAction === null || onAction === void 0 ? void 0 : onAction(event);
34
- }
35
- }, [disabled, onAction]);
36
- const clickHandler = useCallback(event => {
37
- if (disabled) {
38
- return;
39
- }
40
-
41
- onAction === null || onAction === void 0 ? void 0 : onAction(event);
42
- }, [disabled, onAction]);
43
- const onInputChangeHandler = useCallback(e => {
44
- const value = e.currentTarget.value;
45
- if (!value) return;
46
-
47
- if (selection === 'range') {
48
- var _values$, _values$2;
49
-
50
- const values = value.split(' - ');
51
- const dates = {
52
- from: new Date((_values$ = values[0]) === null || _values$ === void 0 ? void 0 : _values$.trim()),
53
- to: new Date((_values$2 = values[1]) === null || _values$2 === void 0 ? void 0 : _values$2.trim())
54
- };
55
- console.log(dates);
56
- } else if (selection === 'multi') {
57
- const values = value.split(',');
58
- const dates = [];
59
-
60
- for (const date of values) {
61
- dates.push(new Date(date.trim()));
62
- }
63
-
64
- console.log(dates);
65
- } else {
66
- const date = new Date(value);
67
- console.log(date);
68
- }
69
- }, [selection]);
70
-
71
- if (anchorVariant === 'input') {
72
- const calendarButton = side => /*#__PURE__*/React.createElement(ButtonInvisible, {
73
- onClick: clickHandler,
74
- sx: {
75
- width: '32px',
76
- px: '6px',
77
- position: 'absolute',
78
- [side]: '1px',
79
- top: '1px'
80
- }
81
- }, /*#__PURE__*/React.createElement(StyledOcticon, {
82
- icon: CalendarIcon
83
- }));
84
-
85
- const inputSx = () => {
86
- if (iconPlacement === 'start') {
87
- return {
88
- pl: 5,
89
- pr: 2
90
- };
91
- } else if (iconPlacement === 'end') {
92
- return {
93
- pl: 2,
94
- pr: 5
95
- };
96
- } else {
97
- return {};
98
- }
99
- };
100
-
101
- return /*#__PURE__*/React.createElement(Box, {
102
- ref: ref,
103
- sx: {
104
- position: 'relative',
105
- display: 'flex',
106
- flex: 1
107
- }
108
- }, iconPlacement === 'start' && calendarButton('left'), /*#__PURE__*/React.createElement(TextInput, {
109
- defaultValue: formattedDate,
110
- onChange: onInputChangeHandler,
111
- sx: inputSx()
112
- }), iconPlacement === 'end' && calendarButton('right'));
113
- }
114
-
115
- return /*#__PURE__*/React.createElement(Box, {
116
- ref: ref
117
- }, /*#__PURE__*/React.createElement(DatePickerAnchorButton, {
118
- onClick: clickHandler,
119
- onKeyPress: keyPressHandler
120
- }, /*#__PURE__*/React.createElement(StyledOcticon, {
121
- icon: CalendarIcon,
122
- color: "fg.muted",
123
- sx: {
124
- my: '2px'
125
- }
126
- }), anchorVariant !== 'icon-only' && /*#__PURE__*/React.createElement(Text, {
127
- sx: {
128
- overflow: 'hidden',
129
- textOverflow: 'ellipsis'
130
- }
131
- }, formattedDate)));
132
- });
@@ -1,3 +0,0 @@
1
- import React from 'react';
2
- import { AnchoredOverlayProps } from '../AnchoredOverlay';
3
- export declare const DatePickerOverlay: React.FC<AnchoredOverlayProps>;
@@ -1,24 +0,0 @@
1
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
-
3
- import React from 'react';
4
- import useDatePicker from './useDatePicker';
5
- import { AnchoredOverlay } from '../AnchoredOverlay';
6
- import { DatePickerPanel } from './DatePickerPanel';
7
- export const DatePickerOverlay = ({
8
- onClose,
9
- ...rest
10
- }) => {
11
- const {
12
- revertValue
13
- } = useDatePicker();
14
-
15
- const onOverlayClose = gesture => {
16
- revertValue();
17
- onClose === null || onClose === void 0 ? void 0 : onClose(gesture);
18
- };
19
-
20
- return /*#__PURE__*/React.createElement(AnchoredOverlay, _extends({
21
- onClose: onOverlayClose
22
- }, rest), /*#__PURE__*/React.createElement(DatePickerPanel, null));
23
- };
24
- DatePickerOverlay.displayName = "DatePickerOverlay";