@react-aria/datepicker 3.0.0-nightly.3132 → 3.0.0-nightly.3148
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/dist/main.js +246 -135
- package/dist/main.js.map +1 -1
- package/dist/module.js +241 -132
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +66 -27
- package/dist/types.d.ts.map +1 -1
- package/package.json +16 -15
- package/src/index.ts +4 -4
- package/src/useDateField.ts +43 -8
- package/src/useDatePicker.ts +47 -9
- package/src/useDatePickerGroup.ts +31 -8
- package/src/useDateRangePicker.ts +62 -13
- package/src/useDateSegment.ts +44 -31
package/dist/main.js
CHANGED
|
@@ -8,6 +8,9 @@ var $IwcIq$react = require("react");
|
|
|
8
8
|
var $IwcIq$reactariaspinbutton = require("@react-aria/spinbutton");
|
|
9
9
|
var $IwcIq$internationalizedmessage = require("@internationalized/message");
|
|
10
10
|
|
|
11
|
+
function $parcel$export(e, n, v, s) {
|
|
12
|
+
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
13
|
+
}
|
|
11
14
|
function $parcel$exportWildcard(dest, source) {
|
|
12
15
|
Object.keys(source).forEach(function(key) {
|
|
13
16
|
if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) {
|
|
@@ -27,12 +30,12 @@ function $parcel$exportWildcard(dest, source) {
|
|
|
27
30
|
function $parcel$interopDefault(a) {
|
|
28
31
|
return a && a.__esModule ? a.default : a;
|
|
29
32
|
}
|
|
30
|
-
function $parcel$export(e, n, v, s) {
|
|
31
|
-
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
32
|
-
}
|
|
33
|
-
var $e90ae7c26a69c6b1$exports = {};
|
|
34
33
|
|
|
35
|
-
$parcel$export(
|
|
34
|
+
$parcel$export(module.exports, "useDatePicker", () => $e90ae7c26a69c6b1$export$42df105a73306d51);
|
|
35
|
+
$parcel$export(module.exports, "useDateSegment", () => $5c015c6316d1904d$export$1315d136e6f7581);
|
|
36
|
+
$parcel$export(module.exports, "useDateField", () => $4acc2f407c169e55$export$5591b0b878c1a989);
|
|
37
|
+
$parcel$export(module.exports, "useTimeField", () => $4acc2f407c169e55$export$4c842f6a241dc825);
|
|
38
|
+
$parcel$export(module.exports, "useDateRangePicker", () => $20f695b1b69e6b9e$export$12fd5f0e9f4bb192);
|
|
36
39
|
|
|
37
40
|
var $c7d0e80b992ca68a$exports = {};
|
|
38
41
|
var $aa344be62785b256$exports = {};
|
|
@@ -212,7 +215,8 @@ $c7d0e80b992ca68a$exports = {
|
|
|
212
215
|
|
|
213
216
|
|
|
214
217
|
|
|
215
|
-
|
|
218
|
+
|
|
219
|
+
function $715562ad3b4cced4$export$4a931266a3838b86(state, ref1) {
|
|
216
220
|
// Open the popover on alt + arrow down
|
|
217
221
|
let onKeyDown = (e)=>{
|
|
218
222
|
if (e.altKey && e.key === 'ArrowDown' && 'setOpen' in state) {
|
|
@@ -223,12 +227,31 @@ function $715562ad3b4cced4$export$4a931266a3838b86(state, ref) {
|
|
|
223
227
|
};
|
|
224
228
|
// Focus the first placeholder segment from the end on mouse down/touch up in the field.
|
|
225
229
|
let focusLast = ()=>{
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
230
|
+
var ref;
|
|
231
|
+
// Try to find the segment prior to the element that was clicked on.
|
|
232
|
+
let target = (ref = window.event) === null || ref === void 0 ? void 0 : ref.target;
|
|
233
|
+
let walker = $IwcIq$reactariafocus.getFocusableTreeWalker(ref1.current, {
|
|
234
|
+
tabbable: true
|
|
235
|
+
});
|
|
236
|
+
if (target) {
|
|
237
|
+
walker.currentNode = target;
|
|
238
|
+
target = walker.previousNode();
|
|
239
|
+
}
|
|
240
|
+
// If no target found, find the last element from the end.
|
|
241
|
+
if (!target) {
|
|
242
|
+
let last;
|
|
243
|
+
do {
|
|
244
|
+
last = walker.lastChild();
|
|
245
|
+
if (last) target = last;
|
|
246
|
+
}while (last)
|
|
247
|
+
}
|
|
248
|
+
// Now go backwards until we find an element that is not a placeholder.
|
|
249
|
+
while(target === null || target === void 0 ? void 0 : target.getAttribute('aria-placeholder')){
|
|
250
|
+
let prev = walker.previousNode();
|
|
251
|
+
if (prev && prev.getAttribute('aria-placeholder')) target = prev;
|
|
252
|
+
else break;
|
|
253
|
+
}
|
|
254
|
+
if (target) target.focus();
|
|
232
255
|
};
|
|
233
256
|
let { pressProps: pressProps } = $IwcIq$reactariainteractions.usePress({
|
|
234
257
|
onPressStart (e) {
|
|
@@ -278,7 +301,22 @@ function $e90ae7c26a69c6b1$export$42df105a73306d51(props, state, ref) {
|
|
|
278
301
|
focusManager.focusFirst();
|
|
279
302
|
}
|
|
280
303
|
},
|
|
281
|
-
fieldProps:
|
|
304
|
+
fieldProps: {
|
|
305
|
+
...fieldProps,
|
|
306
|
+
value: state.value,
|
|
307
|
+
onChange: state.setValue,
|
|
308
|
+
minValue: props.minValue,
|
|
309
|
+
maxValue: props.maxValue,
|
|
310
|
+
placeholderValue: props.placeholderValue,
|
|
311
|
+
hideTimeZone: props.hideTimeZone,
|
|
312
|
+
hourCycle: props.hourCycle,
|
|
313
|
+
granularity: props.granularity,
|
|
314
|
+
isDisabled: props.isDisabled,
|
|
315
|
+
isReadOnly: props.isReadOnly,
|
|
316
|
+
isRequired: props.isRequired,
|
|
317
|
+
validationState: state.validationState,
|
|
318
|
+
autoFocus: props.autoFocus
|
|
319
|
+
},
|
|
282
320
|
descriptionProps: descriptionProps,
|
|
283
321
|
errorMessageProps: errorMessageProps,
|
|
284
322
|
buttonProps: {
|
|
@@ -288,31 +326,153 @@ function $e90ae7c26a69c6b1$export$42df105a73306d51(props, state, ref) {
|
|
|
288
326
|
'aria-haspopup': 'dialog',
|
|
289
327
|
'aria-label': formatMessage('calendar'),
|
|
290
328
|
'aria-labelledby': `${labelledBy} ${buttonId}`,
|
|
291
|
-
'aria-describedby': ariaDescribedBy
|
|
329
|
+
'aria-describedby': ariaDescribedBy,
|
|
330
|
+
onPress: ()=>state.setOpen(true)
|
|
292
331
|
},
|
|
293
332
|
dialogProps: {
|
|
294
333
|
id: dialogId,
|
|
295
334
|
'aria-labelledby': `${labelledBy} ${buttonId}`
|
|
335
|
+
},
|
|
336
|
+
calendarProps: {
|
|
337
|
+
autoFocus: true,
|
|
338
|
+
value: state.dateValue,
|
|
339
|
+
onChange: state.setDateValue,
|
|
340
|
+
minValue: props.minValue,
|
|
341
|
+
maxValue: props.maxValue,
|
|
342
|
+
isDisabled: props.isDisabled,
|
|
343
|
+
isReadOnly: props.isReadOnly,
|
|
344
|
+
isDateDisabled: props.isDateDisabled
|
|
296
345
|
}
|
|
297
346
|
};
|
|
298
347
|
}
|
|
299
348
|
|
|
300
349
|
|
|
301
|
-
var $5c015c6316d1904d$exports = {};
|
|
302
350
|
|
|
303
|
-
$parcel$export($5c015c6316d1904d$exports, "useDateSegment", () => $5c015c6316d1904d$export$1315d136e6f7581);
|
|
304
351
|
|
|
305
|
-
var $4acc2f407c169e55$exports = {};
|
|
306
352
|
|
|
307
|
-
$parcel$export($4acc2f407c169e55$exports, "labelIds", () => $4acc2f407c169e55$export$beb2340c1222c6d);
|
|
308
|
-
$parcel$export($4acc2f407c169e55$exports, "useDateField", () => $4acc2f407c169e55$export$5591b0b878c1a989);
|
|
309
353
|
|
|
310
354
|
|
|
311
355
|
|
|
312
356
|
|
|
313
357
|
|
|
314
358
|
|
|
315
|
-
|
|
359
|
+
|
|
360
|
+
const $20f695b1b69e6b9e$export$7b3062cd49e80452 = '__focusManager_' + Date.now();
|
|
361
|
+
function $20f695b1b69e6b9e$export$12fd5f0e9f4bb192(props, state, ref) {
|
|
362
|
+
var ref1, ref2;
|
|
363
|
+
let formatMessage = $IwcIq$reactariai18n.useMessageFormatter((/*@__PURE__*/$parcel$interopDefault($c7d0e80b992ca68a$exports)));
|
|
364
|
+
let { labelProps: labelProps , fieldProps: fieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps } = $IwcIq$reactarialabel.useField({
|
|
365
|
+
...props,
|
|
366
|
+
labelElementType: 'span'
|
|
367
|
+
});
|
|
368
|
+
let labelledBy = fieldProps['aria-labelledby'] || fieldProps.id;
|
|
369
|
+
let { locale: locale } = $IwcIq$reactariai18n.useLocale();
|
|
370
|
+
let description = state.formatValue(locale, {
|
|
371
|
+
month: 'long'
|
|
372
|
+
});
|
|
373
|
+
let descProps = $IwcIq$reactariautils.useDescription(description);
|
|
374
|
+
let startFieldProps = $IwcIq$reactariautils.useLabels({
|
|
375
|
+
'aria-label': formatMessage('startDate'),
|
|
376
|
+
'aria-labelledby': labelledBy
|
|
377
|
+
});
|
|
378
|
+
let endFieldProps = $IwcIq$reactariautils.useLabels({
|
|
379
|
+
'aria-label': formatMessage('endDate'),
|
|
380
|
+
'aria-labelledby': labelledBy
|
|
381
|
+
});
|
|
382
|
+
let buttonId = $IwcIq$reactariautils.useId();
|
|
383
|
+
let dialogId = $IwcIq$reactariautils.useId();
|
|
384
|
+
let groupProps = $715562ad3b4cced4$export$4a931266a3838b86(state, ref);
|
|
385
|
+
let { focusWithinProps: focusWithinProps } = $IwcIq$reactariainteractions.useFocusWithin({
|
|
386
|
+
onBlurWithin () {
|
|
387
|
+
state.confirmPlaceholder();
|
|
388
|
+
}
|
|
389
|
+
});
|
|
390
|
+
let ariaDescribedBy = [
|
|
391
|
+
descProps['aria-describedby'],
|
|
392
|
+
fieldProps['aria-describedby']
|
|
393
|
+
].filter(Boolean).join(' ') || undefined;
|
|
394
|
+
let focusManager = $IwcIq$react.useMemo(()=>$IwcIq$reactariafocus.createFocusManager(ref)
|
|
395
|
+
, [
|
|
396
|
+
ref
|
|
397
|
+
]);
|
|
398
|
+
let commonFieldProps = {
|
|
399
|
+
[$20f695b1b69e6b9e$export$7b3062cd49e80452]: focusManager,
|
|
400
|
+
minValue: props.minValue,
|
|
401
|
+
maxValue: props.maxValue,
|
|
402
|
+
placeholderValue: props.placeholderValue,
|
|
403
|
+
hideTimeZone: props.hideTimeZone,
|
|
404
|
+
hourCycle: props.hourCycle,
|
|
405
|
+
granularity: props.granularity,
|
|
406
|
+
isDisabled: props.isDisabled,
|
|
407
|
+
isReadOnly: props.isReadOnly,
|
|
408
|
+
isRequired: props.isRequired,
|
|
409
|
+
validationState: state.validationState
|
|
410
|
+
};
|
|
411
|
+
return {
|
|
412
|
+
groupProps: $IwcIq$reactariautils.mergeProps(groupProps, fieldProps, descProps, focusWithinProps, {
|
|
413
|
+
role: 'group',
|
|
414
|
+
'aria-disabled': props.isDisabled || null,
|
|
415
|
+
'aria-describedby': ariaDescribedBy
|
|
416
|
+
}),
|
|
417
|
+
labelProps: {
|
|
418
|
+
...labelProps,
|
|
419
|
+
onClick: ()=>{
|
|
420
|
+
focusManager.focusFirst();
|
|
421
|
+
}
|
|
422
|
+
},
|
|
423
|
+
buttonProps: {
|
|
424
|
+
...descProps,
|
|
425
|
+
id: buttonId,
|
|
426
|
+
excludeFromTabOrder: true,
|
|
427
|
+
'aria-haspopup': 'dialog',
|
|
428
|
+
'aria-label': formatMessage('calendar'),
|
|
429
|
+
'aria-labelledby': `${labelledBy} ${buttonId}`,
|
|
430
|
+
'aria-describedby': ariaDescribedBy,
|
|
431
|
+
onPress: ()=>state.setOpen(true)
|
|
432
|
+
},
|
|
433
|
+
dialogProps: {
|
|
434
|
+
id: dialogId,
|
|
435
|
+
'aria-labelledby': `${labelledBy} ${buttonId}`
|
|
436
|
+
},
|
|
437
|
+
startFieldProps: {
|
|
438
|
+
...startFieldProps,
|
|
439
|
+
...commonFieldProps,
|
|
440
|
+
'aria-describedby': fieldProps['aria-describedby'],
|
|
441
|
+
value: (ref1 = state.value) === null || ref1 === void 0 ? void 0 : ref1.start,
|
|
442
|
+
onChange: (start)=>state.setDateTime('start', start)
|
|
443
|
+
,
|
|
444
|
+
autoFocus: props.autoFocus
|
|
445
|
+
},
|
|
446
|
+
endFieldProps: {
|
|
447
|
+
...endFieldProps,
|
|
448
|
+
...commonFieldProps,
|
|
449
|
+
'aria-describedby': fieldProps['aria-describedby'],
|
|
450
|
+
value: (ref2 = state.value) === null || ref2 === void 0 ? void 0 : ref2.end,
|
|
451
|
+
onChange: (end)=>state.setDateTime('end', end)
|
|
452
|
+
},
|
|
453
|
+
descriptionProps: descriptionProps,
|
|
454
|
+
errorMessageProps: errorMessageProps,
|
|
455
|
+
calendarProps: {
|
|
456
|
+
autoFocus: true,
|
|
457
|
+
value: state.dateRange,
|
|
458
|
+
onChange: state.setDateRange,
|
|
459
|
+
minValue: props.minValue,
|
|
460
|
+
maxValue: props.maxValue,
|
|
461
|
+
isDisabled: props.isDisabled,
|
|
462
|
+
isReadOnly: props.isReadOnly,
|
|
463
|
+
isDateDisabled: props.isDateDisabled
|
|
464
|
+
}
|
|
465
|
+
};
|
|
466
|
+
}
|
|
467
|
+
|
|
468
|
+
|
|
469
|
+
|
|
470
|
+
|
|
471
|
+
|
|
472
|
+
|
|
473
|
+
|
|
474
|
+
|
|
475
|
+
const $4acc2f407c169e55$export$653eddfc964b0f8a = new WeakMap();
|
|
316
476
|
function $4acc2f407c169e55$export$5591b0b878c1a989(props, state, ref) {
|
|
317
477
|
let { labelProps: labelProps , fieldProps: fieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps } = $IwcIq$reactarialabel.useField({
|
|
318
478
|
...props,
|
|
@@ -333,15 +493,28 @@ function $4acc2f407c169e55$export$5591b0b878c1a989(props, state, ref) {
|
|
|
333
493
|
descProps['aria-describedby'],
|
|
334
494
|
fieldProps['aria-describedby']
|
|
335
495
|
].filter(Boolean).join(' ') || undefined;
|
|
336
|
-
$
|
|
496
|
+
let propsFocusManager = props[$20f695b1b69e6b9e$export$7b3062cd49e80452];
|
|
497
|
+
let focusManager = $IwcIq$react.useMemo(()=>propsFocusManager || $IwcIq$reactariafocus.createFocusManager(ref)
|
|
498
|
+
, [
|
|
499
|
+
propsFocusManager,
|
|
500
|
+
ref
|
|
501
|
+
]);
|
|
502
|
+
$4acc2f407c169e55$export$653eddfc964b0f8a.set(state, {
|
|
337
503
|
ariaLabelledBy: segmentLabelledBy,
|
|
338
|
-
ariaDescribedBy: describedBy
|
|
504
|
+
ariaDescribedBy: describedBy,
|
|
505
|
+
focusManager: focusManager
|
|
339
506
|
});
|
|
507
|
+
let autoFocusRef = $IwcIq$react.useRef(props.autoFocus);
|
|
508
|
+
$IwcIq$react.useEffect(()=>{
|
|
509
|
+
if (autoFocusRef.current) focusManager.focusFirst();
|
|
510
|
+
autoFocusRef.current = false;
|
|
511
|
+
}, [
|
|
512
|
+
focusManager
|
|
513
|
+
]);
|
|
340
514
|
return {
|
|
341
515
|
labelProps: {
|
|
342
516
|
...labelProps,
|
|
343
517
|
onClick: ()=>{
|
|
344
|
-
let focusManager = $IwcIq$reactariafocus.createFocusManager(ref);
|
|
345
518
|
focusManager.focusFirst();
|
|
346
519
|
}
|
|
347
520
|
},
|
|
@@ -354,6 +527,9 @@ function $4acc2f407c169e55$export$5591b0b878c1a989(props, state, ref) {
|
|
|
354
527
|
errorMessageProps: errorMessageProps
|
|
355
528
|
};
|
|
356
529
|
}
|
|
530
|
+
function $4acc2f407c169e55$export$4c842f6a241dc825(props, state, ref) {
|
|
531
|
+
return $4acc2f407c169e55$export$5591b0b878c1a989(props, state, ref);
|
|
532
|
+
}
|
|
357
533
|
|
|
358
534
|
|
|
359
535
|
|
|
@@ -396,12 +572,11 @@ class $934ac650a0aceb4b$var$DisplayNamesPolyfill {
|
|
|
396
572
|
|
|
397
573
|
|
|
398
574
|
|
|
399
|
-
|
|
400
|
-
function $5c015c6316d1904d$export$1315d136e6f7581(props, segment, state, ref) {
|
|
575
|
+
function $5c015c6316d1904d$export$1315d136e6f7581(segment, state, ref) {
|
|
401
576
|
let enteredKeys = $IwcIq$react.useRef('');
|
|
402
577
|
let { locale: locale , direction: direction } = $IwcIq$reactariai18n.useLocale();
|
|
403
578
|
let displayNames = $934ac650a0aceb4b$export$d42c60378c8168f8();
|
|
404
|
-
let focusManager = $
|
|
579
|
+
let { ariaLabelledBy: ariaLabelledBy , ariaDescribedBy: ariaDescribedBy , focusManager: focusManager } = $4acc2f407c169e55$export$653eddfc964b0f8a.get(state);
|
|
405
580
|
let textValue = segment.text;
|
|
406
581
|
let options = $IwcIq$react.useMemo(()=>state.dateFormatter.resolvedOptions()
|
|
407
582
|
, [
|
|
@@ -425,9 +600,9 @@ function $5c015c6316d1904d$export$1315d136e6f7581(props, segment, state, ref) {
|
|
|
425
600
|
textValue: textValue,
|
|
426
601
|
minValue: segment.minValue,
|
|
427
602
|
maxValue: segment.maxValue,
|
|
428
|
-
isDisabled:
|
|
429
|
-
isReadOnly:
|
|
430
|
-
isRequired:
|
|
603
|
+
isDisabled: state.isDisabled,
|
|
604
|
+
isReadOnly: state.isReadOnly || !segment.isEditable,
|
|
605
|
+
isRequired: state.isRequired,
|
|
431
606
|
onIncrement: ()=>{
|
|
432
607
|
enteredKeys.current = '';
|
|
433
608
|
state.increment(segment.type);
|
|
@@ -460,7 +635,7 @@ function $5c015c6316d1904d$export$1315d136e6f7581(props, segment, state, ref) {
|
|
|
460
635
|
locale
|
|
461
636
|
]);
|
|
462
637
|
let backspace = ()=>{
|
|
463
|
-
if (parser.isValidPartialNumber(segment.text) && !
|
|
638
|
+
if (parser.isValidPartialNumber(segment.text) && !state.isReadOnly && !segment.isPlaceholder) {
|
|
464
639
|
let newValue = segment.text.slice(0, -1);
|
|
465
640
|
let parsed = parser.parse(newValue);
|
|
466
641
|
if (newValue.length === 0 || parsed === 0) state.clearSegment(segment.type);
|
|
@@ -477,20 +652,30 @@ function $5c015c6316d1904d$export$1315d136e6f7581(props, segment, state, ref) {
|
|
|
477
652
|
case 'ArrowLeft':
|
|
478
653
|
e.preventDefault();
|
|
479
654
|
e.stopPropagation();
|
|
480
|
-
if (direction === 'rtl') focusManager.focusNext(
|
|
481
|
-
|
|
655
|
+
if (direction === 'rtl') focusManager.focusNext({
|
|
656
|
+
tabbable: true
|
|
657
|
+
});
|
|
658
|
+
else focusManager.focusPrevious({
|
|
659
|
+
tabbable: true
|
|
660
|
+
});
|
|
482
661
|
break;
|
|
483
662
|
case 'ArrowRight':
|
|
484
663
|
e.preventDefault();
|
|
485
664
|
e.stopPropagation();
|
|
486
|
-
if (direction === 'rtl') focusManager.focusPrevious(
|
|
487
|
-
|
|
665
|
+
if (direction === 'rtl') focusManager.focusPrevious({
|
|
666
|
+
tabbable: true
|
|
667
|
+
});
|
|
668
|
+
else focusManager.focusNext({
|
|
669
|
+
tabbable: true
|
|
670
|
+
});
|
|
488
671
|
break;
|
|
489
672
|
case 'Enter':
|
|
490
673
|
e.preventDefault();
|
|
491
674
|
e.stopPropagation();
|
|
492
|
-
if (segment.isPlaceholder && !
|
|
493
|
-
focusManager.focusNext(
|
|
675
|
+
if (segment.isPlaceholder && !state.isReadOnly) state.confirmPlaceholder(segment.type);
|
|
676
|
+
focusManager.focusNext({
|
|
677
|
+
tabbable: true
|
|
678
|
+
});
|
|
494
679
|
break;
|
|
495
680
|
case 'Tab':
|
|
496
681
|
break;
|
|
@@ -528,14 +713,16 @@ function $5c015c6316d1904d$export$1315d136e6f7581(props, segment, state, ref) {
|
|
|
528
713
|
amPmFormatter
|
|
529
714
|
]);
|
|
530
715
|
let onInput = (key)=>{
|
|
531
|
-
if (
|
|
716
|
+
if (state.isDisabled || state.isReadOnly) return;
|
|
532
717
|
let newValue = enteredKeys.current + key;
|
|
533
718
|
switch(segment.type){
|
|
534
719
|
case 'dayPeriod':
|
|
535
720
|
if (startsWith(am, key)) state.setSegment('dayPeriod', 0);
|
|
536
721
|
else if (startsWith(pm, key)) state.setSegment('dayPeriod', 12);
|
|
537
722
|
else break;
|
|
538
|
-
focusManager.focusNext(
|
|
723
|
+
focusManager.focusNext({
|
|
724
|
+
tabbable: true
|
|
725
|
+
});
|
|
539
726
|
break;
|
|
540
727
|
case 'day':
|
|
541
728
|
case 'hour':
|
|
@@ -565,7 +752,9 @@ function $5c015c6316d1904d$export$1315d136e6f7581(props, segment, state, ref) {
|
|
|
565
752
|
if (shouldSetValue) state.setSegment(segment.type, segmentValue);
|
|
566
753
|
if (Number(numberValue + '0') > segment.maxValue || newValue.length >= String(segment.maxValue).length) {
|
|
567
754
|
enteredKeys.current = '';
|
|
568
|
-
if (shouldSetValue) focusManager.focusNext(
|
|
755
|
+
if (shouldSetValue) focusManager.focusNext({
|
|
756
|
+
tabbable: true
|
|
757
|
+
});
|
|
569
758
|
} else enteredKeys.current = newValue;
|
|
570
759
|
break;
|
|
571
760
|
}
|
|
@@ -588,7 +777,7 @@ function $5c015c6316d1904d$export$1315d136e6f7581(props, segment, state, ref) {
|
|
|
588
777
|
switch(e.inputType){
|
|
589
778
|
case 'deleteContentBackward':
|
|
590
779
|
case 'deleteContentForward':
|
|
591
|
-
if (parser.isValidPartialNumber(segment.text) && !
|
|
780
|
+
if (parser.isValidPartialNumber(segment.text) && !state.isReadOnly) backspace();
|
|
592
781
|
break;
|
|
593
782
|
case 'insertCompositionText':
|
|
594
783
|
// insertCompositionText cannot be canceled.
|
|
@@ -639,7 +828,6 @@ function $5c015c6316d1904d$export$1315d136e6f7581(props, segment, state, ref) {
|
|
|
639
828
|
'aria-valuenow': null
|
|
640
829
|
} : {
|
|
641
830
|
};
|
|
642
|
-
let { ariaLabelledBy: ariaLabelledBy , ariaDescribedBy: ariaDescribedBy } = $4acc2f407c169e55$export$beb2340c1222c6d.get(state);
|
|
643
831
|
// Only apply aria-describedby to the first segment, unless the field is invalid. This avoids it being
|
|
644
832
|
// read every time the user navigates to a new segment.
|
|
645
833
|
let firstSegment = $IwcIq$react.useMemo(()=>state.segments.find((s)=>s.isEditable
|
|
@@ -648,20 +836,25 @@ function $5c015c6316d1904d$export$1315d136e6f7581(props, segment, state, ref) {
|
|
|
648
836
|
state.segments
|
|
649
837
|
]);
|
|
650
838
|
if (segment !== firstSegment && state.validationState !== 'invalid') ariaDescribedBy = undefined;
|
|
651
|
-
let id = $IwcIq$reactariautils.useId(
|
|
652
|
-
let isEditable = !
|
|
839
|
+
let id = $IwcIq$reactariautils.useId();
|
|
840
|
+
let isEditable = !state.isDisabled && !state.isReadOnly && segment.isEditable;
|
|
841
|
+
// Literal segments should not be visible to screen readers. We don't really need any of the above,
|
|
842
|
+
// but the rules of hooks mean hooks cannot be conditional so we have to put this condition here.
|
|
843
|
+
if (segment.type === 'literal') return {
|
|
844
|
+
segmentProps: {
|
|
845
|
+
'aria-hidden': true
|
|
846
|
+
}
|
|
847
|
+
};
|
|
653
848
|
return {
|
|
654
849
|
segmentProps: $IwcIq$reactariautils.mergeProps(spinButtonProps, pressProps, {
|
|
655
850
|
id: id,
|
|
656
851
|
...touchPropOverrides,
|
|
657
|
-
'aria-controls': props['aria-controls'],
|
|
658
|
-
// 'aria-haspopup': props['aria-haspopup'], // deprecated in ARIA 1.2
|
|
659
852
|
'aria-invalid': state.validationState === 'invalid' ? 'true' : undefined,
|
|
660
|
-
'aria-label':
|
|
853
|
+
'aria-label': displayNames.of(segment.type),
|
|
661
854
|
'aria-labelledby': `${ariaLabelledBy} ${id}`,
|
|
662
855
|
'aria-describedby': ariaDescribedBy,
|
|
663
856
|
'aria-placeholder': segment.isPlaceholder ? segment.text : undefined,
|
|
664
|
-
'aria-readonly':
|
|
857
|
+
'aria-readonly': state.isReadOnly || !segment.isEditable ? 'true' : undefined,
|
|
665
858
|
contentEditable: isEditable,
|
|
666
859
|
suppressContentEditableWarning: isEditable,
|
|
667
860
|
spellCheck: isEditable ? 'false' : undefined,
|
|
@@ -669,103 +862,21 @@ function $5c015c6316d1904d$export$1315d136e6f7581(props, segment, state, ref) {
|
|
|
669
862
|
autoCorrect: isEditable ? 'off' : undefined,
|
|
670
863
|
// Capitalization was changed in React 17...
|
|
671
864
|
[parseInt(($parcel$interopDefault($IwcIq$react)).version, 10) >= 17 ? 'enterKeyHint' : 'enterkeyhint']: isEditable ? 'next' : undefined,
|
|
672
|
-
inputMode:
|
|
673
|
-
tabIndex:
|
|
865
|
+
inputMode: state.isDisabled || segment.type === 'dayPeriod' || !isEditable ? undefined : 'numeric',
|
|
866
|
+
tabIndex: state.isDisabled ? undefined : 0,
|
|
674
867
|
onKeyDown: onKeyDown,
|
|
675
|
-
onFocus: onFocus
|
|
868
|
+
onFocus: onFocus,
|
|
869
|
+
style: {
|
|
870
|
+
caretColor: 'transparent'
|
|
871
|
+
}
|
|
676
872
|
})
|
|
677
873
|
};
|
|
678
874
|
}
|
|
679
875
|
|
|
680
876
|
|
|
681
877
|
|
|
682
|
-
var $20f695b1b69e6b9e$exports = {};
|
|
683
|
-
|
|
684
|
-
$parcel$export($20f695b1b69e6b9e$exports, "useDateRangePicker", () => $20f695b1b69e6b9e$export$12fd5f0e9f4bb192);
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
function $20f695b1b69e6b9e$export$12fd5f0e9f4bb192(props, state, ref) {
|
|
693
|
-
let formatMessage = $IwcIq$reactariai18n.useMessageFormatter((/*@__PURE__*/$parcel$interopDefault($c7d0e80b992ca68a$exports)));
|
|
694
|
-
let { labelProps: labelProps , fieldProps: fieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps } = $IwcIq$reactarialabel.useField({
|
|
695
|
-
...props,
|
|
696
|
-
labelElementType: 'span'
|
|
697
|
-
});
|
|
698
|
-
let labelledBy = fieldProps['aria-labelledby'] || fieldProps.id;
|
|
699
|
-
let { locale: locale } = $IwcIq$reactariai18n.useLocale();
|
|
700
|
-
let description = state.formatValue(locale, {
|
|
701
|
-
month: 'long'
|
|
702
|
-
});
|
|
703
|
-
let descProps = $IwcIq$reactariautils.useDescription(description);
|
|
704
|
-
let startFieldProps = $IwcIq$reactariautils.useLabels({
|
|
705
|
-
'aria-label': formatMessage('startDate'),
|
|
706
|
-
'aria-labelledby': labelledBy
|
|
707
|
-
});
|
|
708
|
-
let endFieldProps = $IwcIq$reactariautils.useLabels({
|
|
709
|
-
'aria-label': formatMessage('endDate'),
|
|
710
|
-
'aria-labelledby': labelledBy
|
|
711
|
-
});
|
|
712
|
-
let buttonId = $IwcIq$reactariautils.useId();
|
|
713
|
-
let dialogId = $IwcIq$reactariautils.useId();
|
|
714
|
-
let groupProps = $715562ad3b4cced4$export$4a931266a3838b86(state, ref);
|
|
715
|
-
let { focusWithinProps: focusWithinProps } = $IwcIq$reactariainteractions.useFocusWithin({
|
|
716
|
-
onBlurWithin () {
|
|
717
|
-
state.confirmPlaceholder();
|
|
718
|
-
}
|
|
719
|
-
});
|
|
720
|
-
let ariaDescribedBy = [
|
|
721
|
-
descProps['aria-describedby'],
|
|
722
|
-
fieldProps['aria-describedby']
|
|
723
|
-
].filter(Boolean).join(' ') || undefined;
|
|
724
|
-
return {
|
|
725
|
-
groupProps: $IwcIq$reactariautils.mergeProps(groupProps, fieldProps, descProps, focusWithinProps, {
|
|
726
|
-
role: 'group',
|
|
727
|
-
'aria-disabled': props.isDisabled || null,
|
|
728
|
-
'aria-describedby': ariaDescribedBy
|
|
729
|
-
}),
|
|
730
|
-
labelProps: {
|
|
731
|
-
...labelProps,
|
|
732
|
-
onClick: ()=>{
|
|
733
|
-
let focusManager = $IwcIq$reactariafocus.createFocusManager(ref);
|
|
734
|
-
focusManager.focusFirst();
|
|
735
|
-
}
|
|
736
|
-
},
|
|
737
|
-
buttonProps: {
|
|
738
|
-
...descProps,
|
|
739
|
-
id: buttonId,
|
|
740
|
-
excludeFromTabOrder: true,
|
|
741
|
-
'aria-haspopup': 'dialog',
|
|
742
|
-
'aria-label': formatMessage('calendar'),
|
|
743
|
-
'aria-labelledby': `${labelledBy} ${buttonId}`,
|
|
744
|
-
'aria-describedby': ariaDescribedBy
|
|
745
|
-
},
|
|
746
|
-
dialogProps: {
|
|
747
|
-
id: dialogId,
|
|
748
|
-
'aria-labelledby': `${labelledBy} ${buttonId}`
|
|
749
|
-
},
|
|
750
|
-
startFieldProps: {
|
|
751
|
-
...startFieldProps,
|
|
752
|
-
'aria-describedby': fieldProps['aria-describedby']
|
|
753
|
-
},
|
|
754
|
-
endFieldProps: {
|
|
755
|
-
...endFieldProps,
|
|
756
|
-
'aria-describedby': fieldProps['aria-describedby']
|
|
757
|
-
},
|
|
758
|
-
descriptionProps: descriptionProps,
|
|
759
|
-
errorMessageProps: errorMessageProps
|
|
760
|
-
};
|
|
761
|
-
}
|
|
762
|
-
|
|
763
878
|
|
|
764
879
|
|
|
765
|
-
$parcel$exportWildcard(module.exports, $e90ae7c26a69c6b1$exports);
|
|
766
|
-
$parcel$exportWildcard(module.exports, $5c015c6316d1904d$exports);
|
|
767
|
-
$parcel$exportWildcard(module.exports, $4acc2f407c169e55$exports);
|
|
768
|
-
$parcel$exportWildcard(module.exports, $20f695b1b69e6b9e$exports);
|
|
769
880
|
$parcel$exportWildcard(module.exports, $934ac650a0aceb4b$exports);
|
|
770
881
|
|
|
771
882
|
|