@primer/components 0.0.0-2021103235619 → 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 (192) hide show
  1. package/CHANGELOG.md +27 -1
  2. package/dist/browser.esm.js +509 -505
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +112 -108
  5. package/dist/browser.umd.js.map +1 -1
  6. package/lib/ActionList/Header.js +1 -1
  7. package/lib/ActionList/Item.d.ts +6 -0
  8. package/lib/ActionList/Item.js +5 -1
  9. package/lib/ActionList2/Description.d.ts +12 -0
  10. package/lib/ActionList2/Description.js +53 -0
  11. package/lib/ActionList2/Divider.d.ts +5 -0
  12. package/lib/ActionList2/Divider.js +35 -0
  13. package/lib/ActionList2/Group.d.ts +11 -0
  14. package/lib/ActionList2/Group.js +57 -0
  15. package/lib/ActionList2/Header.d.ts +26 -0
  16. package/lib/ActionList2/Header.js +55 -0
  17. package/lib/ActionList2/Item.d.ts +67 -0
  18. package/lib/ActionList2/Item.js +221 -0
  19. package/lib/ActionList2/LinkItem.d.ts +17 -0
  20. package/lib/ActionList2/LinkItem.js +57 -0
  21. package/lib/ActionList2/List.d.ts +26 -0
  22. package/lib/ActionList2/List.js +51 -0
  23. package/lib/ActionList2/Selection.d.ts +5 -0
  24. package/lib/ActionList2/Selection.js +70 -0
  25. package/lib/ActionList2/Visuals.d.ts +11 -0
  26. package/lib/ActionList2/Visuals.js +90 -0
  27. package/lib/ActionList2/index.d.ts +40 -0
  28. package/lib/ActionList2/index.js +47 -0
  29. package/lib/AnchoredOverlay/AnchoredOverlay.d.ts +2 -4
  30. package/lib/Autocomplete/Autocomplete.d.ts +30 -32
  31. package/lib/Autocomplete/AutocompleteInput.d.ts +30 -32
  32. package/lib/Button/Button.d.ts +27 -27
  33. package/lib/Button/ButtonBase.d.ts +1 -1
  34. package/lib/Button/ButtonClose.d.ts +45 -45
  35. package/lib/Button/ButtonDanger.d.ts +27 -27
  36. package/lib/Button/ButtonInvisible.d.ts +27 -27
  37. package/lib/Button/ButtonOutline.d.ts +27 -27
  38. package/lib/Button/ButtonPrimary.d.ts +27 -27
  39. package/lib/CircleBadge.d.ts +2 -2
  40. package/lib/CircleOcticon.d.ts +43 -43
  41. package/lib/Dialog.d.ts +46 -46
  42. package/lib/Dropdown.d.ts +178 -178
  43. package/lib/DropdownMenu/DropdownButton.d.ts +47 -47
  44. package/lib/FilterList.d.ts +42 -42
  45. package/lib/Flash.d.ts +1 -1
  46. package/lib/Label.d.ts +1 -1
  47. package/lib/Position.d.ts +4 -4
  48. package/lib/ProgressBar.d.ts +1 -1
  49. package/lib/SelectMenu/SelectMenu.d.ts +246 -248
  50. package/lib/SelectMenu/SelectMenuItem.d.ts +1 -1
  51. package/lib/SelectMenu/SelectMenuModal.d.ts +1 -1
  52. package/lib/TextInputWithTokens.d.ts +34 -32
  53. package/lib/TextInputWithTokens.js +102 -29
  54. package/lib/Timeline.d.ts +44 -44
  55. package/lib/Token/AvatarToken.d.ts +1 -1
  56. package/lib/Token/IssueLabelToken.d.ts +1 -1
  57. package/lib/Token/Token.d.ts +1 -1
  58. package/lib/Token/Token.js +13 -2
  59. package/lib/Token/TokenBase.js +0 -4
  60. package/lib/Token/_RemoveTokenButton.js +15 -2
  61. package/lib/_TextInputWrapper.d.ts +1 -1
  62. package/lib/_TextInputWrapper.js +1 -1
  63. package/lib/experiments.d.ts +1 -0
  64. package/lib/experiments.js +18 -0
  65. package/lib/hooks/useResizeObserver.d.ts +1 -1
  66. package/lib/hooks/useResizeObserver.js +1 -1
  67. package/lib/sx.d.ts +10 -2
  68. package/lib/sx.js +8 -0
  69. package/lib/theme-preval.js +79 -0
  70. package/lib/theme.d.ts +78 -0
  71. package/lib/theme.js +3 -1
  72. package/lib/utils/create-slots.d.ts +17 -0
  73. package/lib/utils/create-slots.js +105 -0
  74. package/lib/utils/testing.d.ts +13 -0
  75. package/lib/utils/types/KeyPaths.d.ts +3 -0
  76. package/lib/utils/types/KeyPaths.js +1 -0
  77. package/lib/utils/use-force-update.d.ts +1 -0
  78. package/lib/utils/use-force-update.js +19 -0
  79. package/lib-esm/ActionList/Header.js +1 -1
  80. package/lib-esm/ActionList/Item.d.ts +6 -0
  81. package/lib-esm/ActionList/Item.js +5 -1
  82. package/lib-esm/ActionList2/Description.d.ts +12 -0
  83. package/lib-esm/ActionList2/Description.js +37 -0
  84. package/lib-esm/ActionList2/Divider.d.ts +5 -0
  85. package/lib-esm/ActionList2/Divider.js +23 -0
  86. package/lib-esm/ActionList2/Group.d.ts +11 -0
  87. package/lib-esm/ActionList2/Group.js +40 -0
  88. package/lib-esm/ActionList2/Header.d.ts +26 -0
  89. package/lib-esm/ActionList2/Header.js +44 -0
  90. package/lib-esm/ActionList2/Item.d.ts +67 -0
  91. package/lib-esm/ActionList2/Item.js +195 -0
  92. package/lib-esm/ActionList2/LinkItem.d.ts +17 -0
  93. package/lib-esm/ActionList2/LinkItem.js +43 -0
  94. package/lib-esm/ActionList2/List.d.ts +26 -0
  95. package/lib-esm/ActionList2/List.js +34 -0
  96. package/lib-esm/ActionList2/Selection.d.ts +5 -0
  97. package/lib-esm/ActionList2/Selection.js +52 -0
  98. package/lib-esm/ActionList2/Visuals.d.ts +11 -0
  99. package/lib-esm/ActionList2/Visuals.js +68 -0
  100. package/lib-esm/ActionList2/index.d.ts +40 -0
  101. package/lib-esm/ActionList2/index.js +33 -0
  102. package/lib-esm/AnchoredOverlay/AnchoredOverlay.d.ts +2 -4
  103. package/lib-esm/Autocomplete/Autocomplete.d.ts +30 -32
  104. package/lib-esm/Autocomplete/AutocompleteInput.d.ts +30 -32
  105. package/lib-esm/Button/Button.d.ts +27 -27
  106. package/lib-esm/Button/ButtonBase.d.ts +1 -1
  107. package/lib-esm/Button/ButtonClose.d.ts +45 -45
  108. package/lib-esm/Button/ButtonDanger.d.ts +27 -27
  109. package/lib-esm/Button/ButtonInvisible.d.ts +27 -27
  110. package/lib-esm/Button/ButtonOutline.d.ts +27 -27
  111. package/lib-esm/Button/ButtonPrimary.d.ts +27 -27
  112. package/lib-esm/CircleBadge.d.ts +2 -2
  113. package/lib-esm/CircleOcticon.d.ts +43 -43
  114. package/lib-esm/Dialog.d.ts +46 -46
  115. package/lib-esm/Dropdown.d.ts +178 -178
  116. package/lib-esm/DropdownMenu/DropdownButton.d.ts +47 -47
  117. package/lib-esm/FilterList.d.ts +42 -42
  118. package/lib-esm/Flash.d.ts +1 -1
  119. package/lib-esm/Label.d.ts +1 -1
  120. package/lib-esm/Position.d.ts +4 -4
  121. package/lib-esm/ProgressBar.d.ts +1 -1
  122. package/lib-esm/SelectMenu/SelectMenu.d.ts +246 -248
  123. package/lib-esm/SelectMenu/SelectMenuItem.d.ts +1 -1
  124. package/lib-esm/SelectMenu/SelectMenuModal.d.ts +1 -1
  125. package/lib-esm/TextInputWithTokens.d.ts +34 -32
  126. package/lib-esm/TextInputWithTokens.js +101 -30
  127. package/lib-esm/Timeline.d.ts +44 -44
  128. package/lib-esm/Token/AvatarToken.d.ts +1 -1
  129. package/lib-esm/Token/IssueLabelToken.d.ts +1 -1
  130. package/lib-esm/Token/Token.d.ts +1 -1
  131. package/lib-esm/Token/Token.js +13 -2
  132. package/lib-esm/Token/TokenBase.js +0 -4
  133. package/lib-esm/Token/_RemoveTokenButton.js +11 -2
  134. package/lib-esm/_TextInputWrapper.d.ts +1 -1
  135. package/lib-esm/_TextInputWrapper.js +1 -1
  136. package/lib-esm/experiments.d.ts +1 -0
  137. package/lib-esm/experiments.js +2 -0
  138. package/lib-esm/hooks/useResizeObserver.d.ts +1 -1
  139. package/lib-esm/hooks/useResizeObserver.js +1 -1
  140. package/lib-esm/sx.d.ts +10 -2
  141. package/lib-esm/sx.js +3 -1
  142. package/lib-esm/theme-preval.js +79 -0
  143. package/lib-esm/theme.d.ts +78 -0
  144. package/lib-esm/theme.js +2 -1
  145. package/lib-esm/utils/create-slots.d.ts +17 -0
  146. package/lib-esm/utils/create-slots.js +84 -0
  147. package/lib-esm/utils/testing.d.ts +13 -0
  148. package/lib-esm/utils/types/KeyPaths.d.ts +3 -0
  149. package/lib-esm/utils/types/KeyPaths.js +1 -0
  150. package/lib-esm/utils/use-force-update.d.ts +1 -0
  151. package/lib-esm/utils/use-force-update.js +6 -0
  152. package/package.json +12 -9
  153. package/lib/DatePicker/DatePicker.d.ts +0 -52
  154. package/lib/DatePicker/DatePicker.js +0 -109
  155. package/lib/DatePicker/DatePickerAnchor.d.ts +0 -5
  156. package/lib/DatePicker/DatePickerAnchor.js +0 -202
  157. package/lib/DatePicker/DatePickerOverlay.d.ts +0 -3
  158. package/lib/DatePicker/DatePickerOverlay.js +0 -55
  159. package/lib/DatePicker/DatePickerPanel.d.ts +0 -2
  160. package/lib/DatePicker/DatePickerPanel.js +0 -363
  161. package/lib/DatePicker/Day.d.ts +0 -15
  162. package/lib/DatePicker/Day.js +0 -206
  163. package/lib/DatePicker/Month.d.ts +0 -8
  164. package/lib/DatePicker/Month.js +0 -122
  165. package/lib/DatePicker/dateParser.d.ts +0 -12
  166. package/lib/DatePicker/dateParser.js +0 -192
  167. package/lib/DatePicker/index.d.ts +0 -2
  168. package/lib/DatePicker/index.js +0 -13
  169. package/lib/DatePicker/useDatePicker.d.ts +0 -107
  170. package/lib/DatePicker/useDatePicker.js +0 -558
  171. package/lib/hooks/useDebounce.d.ts +0 -2
  172. package/lib/hooks/useDebounce.js +0 -24
  173. package/lib-esm/DatePicker/DatePicker.d.ts +0 -52
  174. package/lib-esm/DatePicker/DatePicker.js +0 -92
  175. package/lib-esm/DatePicker/DatePickerAnchor.d.ts +0 -5
  176. package/lib-esm/DatePicker/DatePickerAnchor.js +0 -174
  177. package/lib-esm/DatePicker/DatePickerOverlay.d.ts +0 -3
  178. package/lib-esm/DatePicker/DatePickerOverlay.js +0 -40
  179. package/lib-esm/DatePicker/DatePickerPanel.d.ts +0 -2
  180. package/lib-esm/DatePicker/DatePickerPanel.js +0 -332
  181. package/lib-esm/DatePicker/Day.d.ts +0 -15
  182. package/lib-esm/DatePicker/Day.js +0 -182
  183. package/lib-esm/DatePicker/Month.d.ts +0 -8
  184. package/lib-esm/DatePicker/Month.js +0 -98
  185. package/lib-esm/DatePicker/dateParser.d.ts +0 -12
  186. package/lib-esm/DatePicker/dateParser.js +0 -178
  187. package/lib-esm/DatePicker/index.d.ts +0 -2
  188. package/lib-esm/DatePicker/index.js +0 -1
  189. package/lib-esm/DatePicker/useDatePicker.d.ts +0 -107
  190. package/lib-esm/DatePicker/useDatePicker.js +0 -523
  191. package/lib-esm/hooks/useDebounce.d.ts +0 -2
  192. 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 {};