@primer/components 0.0.0-20211040541 → 0.0.0-2021104151625

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 (158) hide show
  1. package/CHANGELOG.md +3 -1
  2. package/dist/browser.esm.js +473 -474
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +97 -98
  5. package/dist/browser.umd.js.map +1 -1
  6. package/lib/ActionList2/Description.d.ts +12 -0
  7. package/lib/ActionList2/Description.js +53 -0
  8. package/lib/ActionList2/Divider.d.ts +5 -0
  9. package/lib/ActionList2/Divider.js +35 -0
  10. package/lib/ActionList2/Group.d.ts +11 -0
  11. package/lib/ActionList2/Group.js +57 -0
  12. package/lib/ActionList2/Header.d.ts +26 -0
  13. package/lib/ActionList2/Header.js +55 -0
  14. package/lib/ActionList2/Item.d.ts +67 -0
  15. package/lib/ActionList2/Item.js +221 -0
  16. package/lib/ActionList2/LinkItem.d.ts +17 -0
  17. package/lib/ActionList2/LinkItem.js +57 -0
  18. package/lib/ActionList2/List.d.ts +26 -0
  19. package/lib/ActionList2/List.js +51 -0
  20. package/lib/ActionList2/Selection.d.ts +5 -0
  21. package/lib/ActionList2/Selection.js +70 -0
  22. package/lib/ActionList2/Visuals.d.ts +11 -0
  23. package/lib/ActionList2/Visuals.js +90 -0
  24. package/lib/ActionList2/index.d.ts +40 -0
  25. package/lib/ActionList2/index.js +47 -0
  26. package/lib/AnchoredOverlay/AnchoredOverlay.d.ts +2 -4
  27. package/lib/Autocomplete/Autocomplete.d.ts +28 -30
  28. package/lib/Autocomplete/AutocompleteInput.d.ts +28 -30
  29. package/lib/Button/Button.d.ts +24 -24
  30. package/lib/Button/Button.js +1 -1
  31. package/lib/Button/ButtonClose.d.ts +43 -43
  32. package/lib/Button/ButtonDanger.d.ts +24 -24
  33. package/lib/Button/ButtonInvisible.d.ts +24 -24
  34. package/lib/Button/ButtonOutline.d.ts +24 -24
  35. package/lib/Button/ButtonPrimary.d.ts +24 -24
  36. package/lib/CircleOcticon.d.ts +40 -40
  37. package/lib/Dialog.d.ts +43 -43
  38. package/lib/Dropdown.d.ts +168 -168
  39. package/lib/DropdownMenu/DropdownButton.d.ts +44 -44
  40. package/lib/FilterList.d.ts +40 -40
  41. package/lib/Position.d.ts +4 -4
  42. package/lib/SelectMenu/SelectMenu.d.ts +237 -239
  43. package/lib/SelectMenu/SelectMenuItem.d.ts +1 -1
  44. package/lib/SelectMenu/SelectMenuModal.d.ts +1 -1
  45. package/lib/TextInputWithTokens.d.ts +28 -30
  46. package/lib/Timeline.d.ts +41 -41
  47. package/lib/Token/AvatarToken.d.ts +1 -1
  48. package/lib/Token/IssueLabelToken.d.ts +1 -1
  49. package/lib/Token/Token.d.ts +1 -1
  50. package/lib/experiments.d.ts +1 -0
  51. package/lib/experiments.js +18 -0
  52. package/lib/hooks/useResizeObserver.d.ts +1 -1
  53. package/lib/hooks/useResizeObserver.js +1 -1
  54. package/lib/sx.d.ts +2 -0
  55. package/lib/sx.js +8 -0
  56. package/lib/theme-preval.js +79 -0
  57. package/lib/utils/create-slots.d.ts +17 -0
  58. package/lib/utils/create-slots.js +105 -0
  59. package/lib/utils/testing.d.ts +13 -0
  60. package/lib/utils/use-force-update.d.ts +1 -0
  61. package/lib/utils/use-force-update.js +19 -0
  62. package/lib-esm/ActionList2/Description.d.ts +12 -0
  63. package/lib-esm/ActionList2/Description.js +37 -0
  64. package/lib-esm/ActionList2/Divider.d.ts +5 -0
  65. package/lib-esm/ActionList2/Divider.js +23 -0
  66. package/lib-esm/ActionList2/Group.d.ts +11 -0
  67. package/lib-esm/ActionList2/Group.js +40 -0
  68. package/lib-esm/ActionList2/Header.d.ts +26 -0
  69. package/lib-esm/ActionList2/Header.js +44 -0
  70. package/lib-esm/ActionList2/Item.d.ts +67 -0
  71. package/lib-esm/ActionList2/Item.js +195 -0
  72. package/lib-esm/ActionList2/LinkItem.d.ts +17 -0
  73. package/lib-esm/ActionList2/LinkItem.js +43 -0
  74. package/lib-esm/ActionList2/List.d.ts +26 -0
  75. package/lib-esm/ActionList2/List.js +34 -0
  76. package/lib-esm/ActionList2/Selection.d.ts +5 -0
  77. package/lib-esm/ActionList2/Selection.js +52 -0
  78. package/lib-esm/ActionList2/Visuals.d.ts +11 -0
  79. package/lib-esm/ActionList2/Visuals.js +68 -0
  80. package/lib-esm/ActionList2/index.d.ts +40 -0
  81. package/lib-esm/ActionList2/index.js +33 -0
  82. package/lib-esm/AnchoredOverlay/AnchoredOverlay.d.ts +2 -4
  83. package/lib-esm/Autocomplete/Autocomplete.d.ts +28 -30
  84. package/lib-esm/Autocomplete/AutocompleteInput.d.ts +28 -30
  85. package/lib-esm/Button/Button.d.ts +24 -24
  86. package/lib-esm/Button/Button.js +1 -1
  87. package/lib-esm/Button/ButtonClose.d.ts +43 -43
  88. package/lib-esm/Button/ButtonDanger.d.ts +24 -24
  89. package/lib-esm/Button/ButtonInvisible.d.ts +24 -24
  90. package/lib-esm/Button/ButtonOutline.d.ts +24 -24
  91. package/lib-esm/Button/ButtonPrimary.d.ts +24 -24
  92. package/lib-esm/CircleOcticon.d.ts +40 -40
  93. package/lib-esm/Dialog.d.ts +43 -43
  94. package/lib-esm/Dropdown.d.ts +168 -168
  95. package/lib-esm/DropdownMenu/DropdownButton.d.ts +44 -44
  96. package/lib-esm/FilterList.d.ts +40 -40
  97. package/lib-esm/Position.d.ts +4 -4
  98. package/lib-esm/SelectMenu/SelectMenu.d.ts +237 -239
  99. package/lib-esm/SelectMenu/SelectMenuItem.d.ts +1 -1
  100. package/lib-esm/SelectMenu/SelectMenuModal.d.ts +1 -1
  101. package/lib-esm/TextInputWithTokens.d.ts +28 -30
  102. package/lib-esm/Timeline.d.ts +41 -41
  103. package/lib-esm/Token/AvatarToken.d.ts +1 -1
  104. package/lib-esm/Token/IssueLabelToken.d.ts +1 -1
  105. package/lib-esm/Token/Token.d.ts +1 -1
  106. package/lib-esm/experiments.d.ts +1 -0
  107. package/lib-esm/experiments.js +2 -0
  108. package/lib-esm/hooks/useResizeObserver.d.ts +1 -1
  109. package/lib-esm/hooks/useResizeObserver.js +1 -1
  110. package/lib-esm/sx.d.ts +2 -0
  111. package/lib-esm/sx.js +3 -1
  112. package/lib-esm/theme-preval.js +79 -0
  113. package/lib-esm/utils/create-slots.d.ts +17 -0
  114. package/lib-esm/utils/create-slots.js +84 -0
  115. package/lib-esm/utils/testing.d.ts +13 -0
  116. package/lib-esm/utils/use-force-update.d.ts +1 -0
  117. package/lib-esm/utils/use-force-update.js +6 -0
  118. package/package.json +10 -9
  119. package/lib/DatePicker/DatePicker.d.ts +0 -52
  120. package/lib/DatePicker/DatePicker.js +0 -109
  121. package/lib/DatePicker/DatePickerAnchor.d.ts +0 -5
  122. package/lib/DatePicker/DatePickerAnchor.js +0 -202
  123. package/lib/DatePicker/DatePickerOverlay.d.ts +0 -3
  124. package/lib/DatePicker/DatePickerOverlay.js +0 -55
  125. package/lib/DatePicker/DatePickerPanel.d.ts +0 -2
  126. package/lib/DatePicker/DatePickerPanel.js +0 -363
  127. package/lib/DatePicker/Day.d.ts +0 -15
  128. package/lib/DatePicker/Day.js +0 -206
  129. package/lib/DatePicker/Month.d.ts +0 -8
  130. package/lib/DatePicker/Month.js +0 -122
  131. package/lib/DatePicker/dateParser.d.ts +0 -12
  132. package/lib/DatePicker/dateParser.js +0 -192
  133. package/lib/DatePicker/index.d.ts +0 -2
  134. package/lib/DatePicker/index.js +0 -13
  135. package/lib/DatePicker/useDatePicker.d.ts +0 -107
  136. package/lib/DatePicker/useDatePicker.js +0 -558
  137. package/lib/hooks/useDebounce.d.ts +0 -2
  138. package/lib/hooks/useDebounce.js +0 -24
  139. package/lib-esm/DatePicker/DatePicker.d.ts +0 -52
  140. package/lib-esm/DatePicker/DatePicker.js +0 -92
  141. package/lib-esm/DatePicker/DatePickerAnchor.d.ts +0 -5
  142. package/lib-esm/DatePicker/DatePickerAnchor.js +0 -174
  143. package/lib-esm/DatePicker/DatePickerOverlay.d.ts +0 -3
  144. package/lib-esm/DatePicker/DatePickerOverlay.js +0 -40
  145. package/lib-esm/DatePicker/DatePickerPanel.d.ts +0 -2
  146. package/lib-esm/DatePicker/DatePickerPanel.js +0 -332
  147. package/lib-esm/DatePicker/Day.d.ts +0 -15
  148. package/lib-esm/DatePicker/Day.js +0 -182
  149. package/lib-esm/DatePicker/Month.d.ts +0 -8
  150. package/lib-esm/DatePicker/Month.js +0 -98
  151. package/lib-esm/DatePicker/dateParser.d.ts +0 -12
  152. package/lib-esm/DatePicker/dateParser.js +0 -178
  153. package/lib-esm/DatePicker/index.d.ts +0 -2
  154. package/lib-esm/DatePicker/index.js +0 -1
  155. package/lib-esm/DatePicker/useDatePicker.d.ts +0 -107
  156. package/lib-esm/DatePicker/useDatePicker.js +0 -523
  157. package/lib-esm/hooks/useDebounce.d.ts +0 -2
  158. package/lib-esm/hooks/useDebounce.js +0 -16
@@ -1,558 +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.normalizeDate = exports.default = void 0;
11
-
12
- var _octiconsReact = require("@primer/octicons-react");
13
-
14
- var _dateFns = require("date-fns");
15
-
16
- var _esm = require("date-fns/esm");
17
-
18
- var _deepmerge = _interopRequireDefault(require("deepmerge"));
19
-
20
- var _react = _interopRequireWildcard(require("react"));
21
-
22
- var _ = require("..");
23
-
24
- var _useResizeObserver = require("../hooks/useResizeObserver");
25
-
26
- var _dateParser = require("./dateParser");
27
-
28
- 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); }
29
-
30
- 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; }
31
-
32
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
33
-
34
- const DatePickerContext = /*#__PURE__*/(0, _react.createContext)(null);
35
-
36
- const useDatePicker = date => {
37
- const dateCtx = (0, _react.useContext)(DatePickerContext);
38
- const [selected, setSelected] = (0, _react.useState)(false);
39
- const [focused, setFocused] = (0, _react.useState)(false);
40
- const today = date ? (0, _dateFns.isToday)(date) : false;
41
-
42
- if (!dateCtx) {
43
- throw new Error('useDatePicker must be used inside a DatePickerProvider');
44
- }
45
-
46
- (0, _react.useEffect)(() => {
47
- if (date) {
48
- if (dateCtx.hoverRange) {
49
- if (isRangeSelection(dateCtx.hoverRange)) {
50
- if ((0, _dateFns.isEqual)(date, dateCtx.hoverRange.from)) {
51
- setSelected('start');
52
- } else if (dateCtx.hoverRange.to && (0, _dateFns.isEqual)(date, dateCtx.hoverRange.to)) {
53
- setSelected('end');
54
- } else if ((0, _dateFns.isAfter)(date, dateCtx.hoverRange.from) && dateCtx.hoverRange.to && (0, _dateFns.isBefore)(date, dateCtx.hoverRange.to)) {
55
- setSelected('middle');
56
- } else {
57
- setSelected(false);
58
- }
59
- }
60
- } else if (dateCtx.selection) {
61
- if (isMultiSelection(dateCtx.selection)) {
62
- setSelected(!!dateCtx.selection.find(d => (0, _dateFns.isEqual)(d, date)));
63
- } else if (isRangeSelection(dateCtx.selection)) {
64
- if ((0, _dateFns.isEqual)(date, dateCtx.selection.from)) {
65
- setSelected('start');
66
- } else if (dateCtx.selection.to && (0, _dateFns.isEqual)(date, dateCtx.selection.to)) {
67
- setSelected('end');
68
- } else if ((0, _dateFns.isAfter)(date, dateCtx.selection.from) && dateCtx.selection.to && (0, _dateFns.isBefore)(date, dateCtx.selection.to)) {
69
- setSelected('middle');
70
- } else {
71
- setSelected(false);
72
- }
73
- } else {
74
- setSelected((0, _dateFns.isEqual)(date, dateCtx.selection));
75
- }
76
- }
77
- }
78
- }, [date, dateCtx.hoverRange, dateCtx.selection, today]);
79
- (0, _react.useEffect)(() => {
80
- if (date) {
81
- // Determine if date is focused
82
- setFocused((0, _dateFns.isEqual)(dateCtx.focusDate, date));
83
- }
84
- }, [date, dateCtx.focusDate]);
85
- let blocked,
86
- disabled = false;
87
-
88
- if (date) {
89
- // Determine if date is blocked out
90
- if (dateCtx.configuration.blockedDates) {
91
- blocked = !!dateCtx.configuration.blockedDates.find(d => (0, _dateFns.isEqual)(d, date));
92
- } // Determine if date is disabled
93
-
94
-
95
- if (dateCtx.configuration.minDate || dateCtx.configuration.maxDate || dateCtx.configuration.disableWeekends) {
96
- disabled = (dateCtx.configuration.minDate ? (0, _dateFns.isBefore)(date, dateCtx.configuration.minDate) : false) || (dateCtx.configuration.maxDate ? (0, _dateFns.isAfter)(date, dateCtx.configuration.maxDate) : false) || (dateCtx.configuration.disableWeekends ? (0, _dateFns.isWeekend)(date) : false);
97
- }
98
- }
99
-
100
- return { ...dateCtx,
101
- blocked,
102
- disabled,
103
- focused,
104
- selected,
105
- today
106
- };
107
- };
108
-
109
- var _default = useDatePicker;
110
- exports.default = _default;
111
-
112
- function isSingleSelection(selection) {
113
- return selection instanceof Date;
114
- }
115
-
116
- function isMultiSelection(selection) {
117
- return Array.isArray(selection);
118
- }
119
-
120
- function isRangeSelection(selection) {
121
- return !!selection.from;
122
- }
123
-
124
- function isStringRangeSelection(selection) {
125
- return !!selection.from;
126
- }
127
-
128
- function parseSelection(selection, variant) {
129
- if (!selection) return;
130
-
131
- if (variant === 'multi') {
132
- if (isMultiSelection(selection)) {
133
- const parsedSelection = [];
134
-
135
- for (const d of selection) {
136
- parsedSelection.push(normalizeDate(d));
137
- }
138
-
139
- return parsedSelection.sort((a, b) => a.getTime() - b.getTime());
140
- } else if (selection instanceof Date) {
141
- return [normalizeDate(selection)];
142
- } else if (isRangeSelection(selection)) {
143
- const parsedSelection = [];
144
- parsedSelection.push(normalizeDate(selection.from));
145
-
146
- if (selection.to) {
147
- parsedSelection.push(normalizeDate(selection.to));
148
- }
149
-
150
- return parsedSelection.sort((a, b) => a.getTime() - b.getTime());
151
- }
152
- } else if (variant === 'range') {
153
- if (isRangeSelection(selection)) {
154
- return {
155
- from: normalizeDate(selection.from),
156
- to: selection.to ? normalizeDate(selection.to) : null
157
- };
158
- } else if (isMultiSelection(selection)) {
159
- return {
160
- from: normalizeDate(selection[0]),
161
- to: selection[1] ? normalizeDate(selection[1]) : null
162
- };
163
- } else if (selection instanceof Date) {
164
- return {
165
- from: normalizeDate(selection),
166
- to: null
167
- };
168
- }
169
- } else {
170
- if (selection instanceof Date) {
171
- return normalizeDate(selection);
172
- } else if (isMultiSelection(selection)) {
173
- return normalizeDate(selection[0]);
174
- } else if (isRangeSelection(selection)) {
175
- return normalizeDate(selection.from);
176
- } else {
177
- return;
178
- }
179
- }
180
- }
181
-
182
- const getInitialFocusDate = selection => {
183
- if (!selection) return normalizeDate(new Date());
184
-
185
- if (selection instanceof Date) {
186
- return normalizeDate(selection);
187
- } else if (Array.isArray(selection)) {
188
- return normalizeDate(selection[0]);
189
- } else if (isRangeSelection(selection)) {
190
- return normalizeDate(selection.from);
191
- } else {
192
- return normalizeDate(new Date());
193
- }
194
- };
195
-
196
- const normalizeDate = date => new Date(new Date(date).toDateString());
197
-
198
- exports.normalizeDate = normalizeDate;
199
- const defaultConfiguration = {
200
- anchorVariant: 'button',
201
- confirmation: false,
202
- confirmUnsavedClose: false,
203
- compressedHeader: false,
204
- disableWeekends: false,
205
- iconPlacement: 'start',
206
- placeholder: 'Choose Date...',
207
- showInputPrompt: false,
208
- variant: 'single',
209
- view: '2-month',
210
- weekStartsOn: 'Sunday'
211
- };
212
-
213
- const DatePickerProvider = ({
214
- configuration: externalConfig = {},
215
- children,
216
- closePicker,
217
- value
218
- }) => {
219
- const [configuration, setConfiguration] = (0, _react.useState)((0, _deepmerge.default)(defaultConfiguration, externalConfig));
220
- const initialSelection = parseSelection(value, configuration.variant);
221
- const [previousSelection, setPreviousSelection] = (0, _react.useState)(parseSelection(value, configuration.variant));
222
- const [isDirty, setIsDirty] = (0, _react.useState)(false);
223
- const [selection, setSelection] = (0, _react.useState)(initialSelection);
224
- const [hoverRange, setHoverRange] = (0, _react.useState)(null);
225
- const [currentViewingDate, setCurrentViewingDate] = (0, _react.useState)(new Date());
226
- const [multiMonthSupport, setMultiMonthSupport] = (0, _react.useState)(true);
227
- const confirm = (0, _.useConfirm)();
228
- const [dialogOpen, setDialogOpen] = (0, _react.useState)(false);
229
- const [focusDate, setFocusDate] = (0, _react.useState)(getInitialFocusDate(initialSelection));
230
- (0, _react.useEffect)(() => {
231
- setConfiguration((0, _deepmerge.default)(defaultConfiguration, externalConfig));
232
- setSelection(parseSelection(selection, configuration.variant)); // Don't want this to run every time selection gets updated
233
- // eslint-disable-next-line react-hooks/exhaustive-deps
234
- }, [configuration.variant, externalConfig]);
235
- const goToMonth = (0, _react.useCallback)(date => {
236
- let newDate = date;
237
- const {
238
- minDate,
239
- maxDate
240
- } = configuration;
241
-
242
- if (minDate && (0, _dateFns.isBefore)(date, minDate)) {
243
- newDate = minDate;
244
- } else if (maxDate && (0, _dateFns.isAfter)(date, maxDate)) {
245
- newDate = maxDate;
246
- }
247
-
248
- setFocusDate(normalizeDate(newDate));
249
- setCurrentViewingDate(normalizeDate(newDate));
250
- }, [configuration]);
251
- const nextMonth = (0, _react.useCallback)(() => {
252
- const date = (0, _dateFns.addMonths)(currentViewingDate, 1);
253
- setFocusDate(normalizeDate(date));
254
- setCurrentViewingDate(date);
255
- }, [currentViewingDate]);
256
- const previousMonth = (0, _react.useCallback)(() => {
257
- const date = (0, _dateFns.subMonths)(currentViewingDate, 1);
258
- setFocusDate(normalizeDate(date));
259
- setCurrentViewingDate(date);
260
- }, [currentViewingDate]);
261
- const formattedDate = (0, _react.useMemo)(() => {
262
- const {
263
- anchorVariant,
264
- dateFormat,
265
- placeholder,
266
- variant
267
- } = configuration;
268
- return (0, _dateParser.formatDate)({
269
- selection,
270
- anchorVariant,
271
- dateFormat,
272
- placeholder,
273
- rawFormat: false,
274
- variant
275
- });
276
- }, [configuration, selection]);
277
- const inputDate = (0, _react.useMemo)(() => {
278
- const {
279
- dateFormat,
280
- placeholder,
281
- variant
282
- } = configuration;
283
- return (0, _dateParser.formatDate)({
284
- selection,
285
- dateFormat,
286
- placeholder,
287
- rawFormat: true,
288
- variant
289
- });
290
- }, [configuration, selection]);
291
- const saveValue = (0, _react.useCallback)(updatedSelection => {
292
- setPreviousSelection(updatedSelection !== null && updatedSelection !== void 0 ? updatedSelection : selection);
293
- setIsDirty(false);
294
- closePicker === null || closePicker === void 0 ? void 0 : closePicker();
295
- }, [closePicker, selection]);
296
- const revertValue = (0, _react.useCallback)(() => {
297
- setSelection(previousSelection);
298
- setIsDirty(false);
299
- }, [previousSelection]);
300
- const handleClose = (0, _react.useCallback)(async () => {
301
- if (configuration.confirmUnsavedClose) {
302
- if (isDirty) {
303
- const result = await confirm({
304
- title: 'Save Changes?',
305
- content: 'You have unsaved changes, would you like to save them?',
306
- confirmButtonContent: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.CheckIcon, null), /*#__PURE__*/_react.default.createElement(_.Text, {
307
- sx: {
308
- ml: 1
309
- }
310
- }, "Save")),
311
- cancelButtonContent: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.TrashIcon, null), /*#__PURE__*/_react.default.createElement(_.Text, {
312
- sx: {
313
- ml: 1
314
- }
315
- }, "Discard"))
316
- });
317
-
318
- if (result) {
319
- saveValue();
320
- } else {
321
- revertValue();
322
- }
323
- }
324
- } else if (isDirty) revertValue();
325
- }, [configuration.confirmUnsavedClose, confirm, isDirty, revertValue, saveValue]);
326
- const inputHandler = (0, _react.useCallback)(updatedSelection => {
327
- if (!updatedSelection) return;
328
- const {
329
- maxDate,
330
- minDate,
331
- variant,
332
- maxSelections,
333
- maxRangeSize
334
- } = configuration;
335
-
336
- switch (variant) {
337
- case 'single':
338
- {
339
- if (updatedSelection instanceof Date) {
340
- if (maxDate && (0, _dateFns.isAfter)(updatedSelection, maxDate)) {
341
- setSelection(maxDate);
342
- } else if (minDate && (0, _dateFns.isBefore)(minDate, updatedSelection)) {
343
- setSelection(minDate);
344
- } else {
345
- setSelection(updatedSelection);
346
- }
347
- }
348
-
349
- break;
350
- }
351
-
352
- case 'multi':
353
- {
354
- if (Array.isArray(updatedSelection)) {
355
- let validSelections = updatedSelection.filter(d => (maxDate ? (0, _dateFns.isBefore)(d, maxDate) : true) && (minDate ? (0, _dateFns.isAfter)(d, minDate) : true));
356
-
357
- if (maxSelections) {
358
- validSelections = validSelections.slice(0, maxSelections);
359
- }
360
-
361
- setSelection(validSelections);
362
- }
363
-
364
- break;
365
- }
366
-
367
- case 'range':
368
- {
369
- if (isRangeSelection(updatedSelection)) {
370
- const validRange = updatedSelection;
371
-
372
- if (minDate) {
373
- validRange.from = (0, _dateFns.isAfter)(updatedSelection.from, minDate) ? updatedSelection.from : minDate;
374
-
375
- if (updatedSelection.to) {
376
- validRange.to = (0, _dateFns.isAfter)(updatedSelection.to, minDate) ? updatedSelection.to : minDate;
377
- }
378
- }
379
-
380
- if (maxDate) {
381
- validRange.from = (0, _dateFns.isBefore)(updatedSelection.from, maxDate) ? updatedSelection.from : maxDate;
382
-
383
- if (updatedSelection.to) {
384
- validRange.to = (0, _dateFns.isBefore)(updatedSelection.to, maxDate) ? updatedSelection.to : maxDate;
385
- }
386
- }
387
-
388
- if (maxRangeSize && validRange.to && Math.abs((0, _dateFns.differenceInDays)(validRange.from, validRange.to)) >= maxRangeSize) {
389
- validRange.to = (0, _dateFns.addDays)(validRange.from, maxRangeSize - 1);
390
- }
391
-
392
- setSelection(updatedSelection);
393
- }
394
-
395
- break;
396
- }
397
- }
398
- }, [configuration]);
399
- (0, _react.useEffect)(() => {
400
- if (configuration.view === '1-month') {
401
- if (currentViewingDate.getMonth() === focusDate.getMonth() && currentViewingDate.getFullYear() === focusDate.getFullYear()) {
402
- return;
403
- } else {
404
- setCurrentViewingDate((0, _dateFns.setDate)(focusDate, 1));
405
- return;
406
- }
407
- }
408
- /**
409
- * This logic is rough, so buckle up.
410
- * We want to set the currently shown months based on what has focus. If the focus leaves what we're able to view,
411
- * we want to be able to change the currently shown month. However, this gets complicated with the 2-month view.
412
- * FIRST: If it's the same month/year: Easy
413
- * SECOND: If it's the next month, but same year: Done
414
- * THIRD: If it's the next month AND next year, but it's January (i.e. we're viewing Dec/Jan): Good to go
415
- */
416
-
417
-
418
- if (currentViewingDate.getMonth() === focusDate.getMonth() && currentViewingDate.getFullYear() === focusDate.getFullYear() || (0, _dateFns.addMonths)(currentViewingDate, 1).getMonth() === focusDate.getMonth() && currentViewingDate.getFullYear() === focusDate.getFullYear() || (0, _dateFns.addMonths)(currentViewingDate, 1).getMonth() === focusDate.getMonth() && focusDate.getMonth() === 0 && (0, _dateFns.addYears)(currentViewingDate, 1).getFullYear() === focusDate.getFullYear()) {
419
- return;
420
- } else {
421
- setCurrentViewingDate((0, _dateFns.setDate)(focusDate, 1));
422
- }
423
- }, [configuration.view, currentViewingDate, focusDate]);
424
- const selectionHandler = (0, _react.useCallback)(date => {
425
- setIsDirty(true);
426
-
427
- if (configuration.variant === 'multi') {
428
- const selections = Array.isArray(selection) ? selection : [];
429
- const existingIndex = selections.findIndex(s => (0, _dateFns.isEqual)(s, date));
430
-
431
- if (existingIndex > -1) {
432
- selections.splice(existingIndex, 1);
433
- setSelection(selections.sort((a, b) => a.getTime() - b.getTime()));
434
- } else {
435
- if (configuration.maxSelections && selections.length + 1 > configuration.maxSelections) return;
436
- setSelection([...selections, date].sort((a, b) => a.getTime() - b.getTime()));
437
- }
438
- } else if (configuration.variant === 'range') {
439
- if (selection && isRangeSelection(selection) && !selection.to) {
440
- let toDate = date;
441
-
442
- if (configuration.maxRangeSize && Math.abs((0, _dateFns.differenceInDays)(selection.from, date)) >= configuration.maxRangeSize) {
443
- toDate = (0, _dateFns.isBefore)(date, selection.from) ? (0, _dateFns.subDays)(selection.from, configuration.maxRangeSize - 1) : (0, _dateFns.addDays)(selection.from, configuration.maxRangeSize - 1);
444
- }
445
-
446
- const updatedSelection = (0, _dateFns.isBefore)(toDate, selection.from) ? {
447
- from: toDate,
448
- to: selection.from
449
- } : {
450
- from: selection.from,
451
- to: toDate
452
- };
453
- setSelection(updatedSelection);
454
- setHoverRange(null);
455
-
456
- if (!configuration.confirmation) {
457
- saveValue(updatedSelection);
458
- }
459
- } else {
460
- setHoverRange({
461
- from: date,
462
- to: date
463
- });
464
- setSelection({
465
- from: date,
466
- to: null
467
- });
468
- }
469
- } else {
470
- setSelection(date);
471
-
472
- if (!configuration.confirmation) {
473
- saveValue(date);
474
- }
475
- }
476
- }, [configuration.confirmation, configuration.maxRangeSize, configuration.maxSelections, configuration.variant, saveValue, selection]);
477
- const focusHandler = (0, _react.useCallback)(date => {
478
- if (!selection) return;
479
- const {
480
- minDate,
481
- maxDate,
482
- maxRangeSize,
483
- disableWeekends,
484
- variant
485
- } = configuration;
486
-
487
- if (variant === 'range' && isRangeSelection(selection) && hoverRange) {
488
- let hoverDate = date;
489
- if (minDate) hoverDate = (0, _dateFns.isBefore)(date, minDate) ? minDate : hoverDate;
490
- if (maxDate) hoverDate = (0, _dateFns.isAfter)(date, maxDate) ? maxDate : hoverDate;
491
- const daysInRange = disableWeekends ? Math.abs((0, _dateFns.differenceInBusinessDays)(selection.from, hoverDate)) : Math.abs((0, _dateFns.differenceInDays)(selection.from, hoverDate));
492
-
493
- if (maxRangeSize && daysInRange >= maxRangeSize) {
494
- if (disableWeekends) {
495
- hoverDate = (0, _dateFns.isBefore)(hoverDate, selection.from) ? (0, _esm.subBusinessDays)(selection.from, configuration.maxRangeSize - 1) : (0, _esm.addBusinessDays)(selection.from, configuration.maxRangeSize - 1);
496
- } else {
497
- hoverDate = (0, _dateFns.isBefore)(hoverDate, selection.from) ? (0, _dateFns.subDays)(selection.from, configuration.maxRangeSize - 1) : (0, _dateFns.addDays)(selection.from, configuration.maxRangeSize - 1);
498
- }
499
- }
500
-
501
- if (disableWeekends && (0, _dateFns.isWeekend)(hoverDate)) {
502
- hoverDate = (0, _dateFns.previousFriday)(hoverDate);
503
- }
504
-
505
- setHoverRange((0, _dateFns.isBefore)(hoverDate, selection.from) ? {
506
- from: hoverDate,
507
- to: selection.from
508
- } : {
509
- from: selection.from,
510
- to: hoverDate
511
- });
512
- }
513
- }, [configuration, hoverRange, selection]);
514
-
515
- const onResize = windowEntry => {
516
- // Only care about the first element, we expect one element ot be watched
517
- const {
518
- width
519
- } = windowEntry.contentRect; // 610 is the panel width with 2 months
520
-
521
- setMultiMonthSupport(width > 610);
522
- };
523
-
524
- (0, _useResizeObserver.useResizeObserver)(onResize);
525
- const datePickerCtx = (0, _react.useMemo)(() => {
526
- return {
527
- configuration,
528
- currentViewingDate,
529
- disabled: false,
530
- focusDate,
531
- formattedDate,
532
- inputDate,
533
- goToMonth,
534
- hoverRange,
535
- dialogOpen,
536
- nextMonth,
537
- onClose: handleClose,
538
- onDateInput: inputHandler,
539
- onDayFocus: focusHandler,
540
- onSelection: selectionHandler,
541
- previousMonth,
542
- revertValue,
543
- saveValue,
544
- selectionActive: false,
545
- setFocusDate,
546
- setHoverRange,
547
- selection,
548
- setDialogOpen,
549
- viewMode: configuration.view === '2-month' && multiMonthSupport ? '2-month' : '1-month'
550
- };
551
- }, [configuration, currentViewingDate, dialogOpen, focusDate, focusHandler, formattedDate, goToMonth, handleClose, hoverRange, inputDate, inputHandler, multiMonthSupport, nextMonth, previousMonth, revertValue, saveValue, selection, selectionHandler]);
552
- return /*#__PURE__*/_react.default.createElement(DatePickerContext.Provider, {
553
- value: datePickerCtx
554
- }, children);
555
- };
556
-
557
- exports.DatePickerProvider = DatePickerProvider;
558
- 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,52 +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
- * Minimum date to select
48
- */
49
- minDate?: Date | null;
50
- }
51
- export declare const DatePicker: React.FC<DatePickerProps>;
52
- export {};