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