@react-aria/datepicker 3.0.0-nightly.3142 → 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/module.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import {createFocusManager as $cIPI0$createFocusManager,
|
|
1
|
+
import {createFocusManager as $cIPI0$createFocusManager, getFocusableTreeWalker as $cIPI0$getFocusableTreeWalker} from "@react-aria/focus";
|
|
2
2
|
import {useId as $cIPI0$useId, useDescription as $cIPI0$useDescription, mergeProps as $cIPI0$mergeProps, isMac as $cIPI0$isMac, scrollIntoView as $cIPI0$scrollIntoView, getScrollParent as $cIPI0$getScrollParent, useEvent as $cIPI0$useEvent, isIOS as $cIPI0$isIOS, useLabels as $cIPI0$useLabels} from "@react-aria/utils";
|
|
3
3
|
import {useField as $cIPI0$useField} from "@react-aria/label";
|
|
4
4
|
import {useMessageFormatter as $cIPI0$useMessageFormatter, useLocale as $cIPI0$useLocale, useDateFormatter as $cIPI0$useDateFormatter, useFilter as $cIPI0$useFilter} from "@react-aria/i18n";
|
|
5
5
|
import {usePress as $cIPI0$usePress, useFocusWithin as $cIPI0$useFocusWithin} from "@react-aria/interactions";
|
|
6
6
|
import {NumberParser as $cIPI0$NumberParser} from "@internationalized/number";
|
|
7
|
-
import $cIPI0$react, {useRef as $cIPI0$useRef, useMemo as $cIPI0$useMemo} from "react";
|
|
7
|
+
import $cIPI0$react, {useRef as $cIPI0$useRef, useMemo as $cIPI0$useMemo, useEffect as $cIPI0$useEffect} from "react";
|
|
8
8
|
import {useSpinButton as $cIPI0$useSpinButton} from "@react-aria/spinbutton";
|
|
9
9
|
import {MessageDictionary as $cIPI0$MessageDictionary} from "@internationalized/message";
|
|
10
10
|
|
|
@@ -14,9 +14,6 @@ function $parcel$interopDefault(a) {
|
|
|
14
14
|
function $parcel$export(e, n, v, s) {
|
|
15
15
|
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
16
16
|
}
|
|
17
|
-
var $6057a3d2a53a12fd$exports = {};
|
|
18
|
-
|
|
19
|
-
$parcel$export($6057a3d2a53a12fd$exports, "useDatePicker", () => $6057a3d2a53a12fd$export$42df105a73306d51);
|
|
20
17
|
|
|
21
18
|
var $204383cf4f6b0d06$exports = {};
|
|
22
19
|
var $f23889fffbde9058$exports = {};
|
|
@@ -196,7 +193,8 @@ $204383cf4f6b0d06$exports = {
|
|
|
196
193
|
|
|
197
194
|
|
|
198
195
|
|
|
199
|
-
|
|
196
|
+
|
|
197
|
+
function $3dfb0f96be0d6a08$export$4a931266a3838b86(state, ref1) {
|
|
200
198
|
// Open the popover on alt + arrow down
|
|
201
199
|
let onKeyDown = (e)=>{
|
|
202
200
|
if (e.altKey && e.key === 'ArrowDown' && 'setOpen' in state) {
|
|
@@ -207,12 +205,31 @@ function $3dfb0f96be0d6a08$export$4a931266a3838b86(state, ref) {
|
|
|
207
205
|
};
|
|
208
206
|
// Focus the first placeholder segment from the end on mouse down/touch up in the field.
|
|
209
207
|
let focusLast = ()=>{
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
208
|
+
var ref;
|
|
209
|
+
// Try to find the segment prior to the element that was clicked on.
|
|
210
|
+
let target = (ref = window.event) === null || ref === void 0 ? void 0 : ref.target;
|
|
211
|
+
let walker = $cIPI0$getFocusableTreeWalker(ref1.current, {
|
|
212
|
+
tabbable: true
|
|
213
|
+
});
|
|
214
|
+
if (target) {
|
|
215
|
+
walker.currentNode = target;
|
|
216
|
+
target = walker.previousNode();
|
|
217
|
+
}
|
|
218
|
+
// If no target found, find the last element from the end.
|
|
219
|
+
if (!target) {
|
|
220
|
+
let last;
|
|
221
|
+
do {
|
|
222
|
+
last = walker.lastChild();
|
|
223
|
+
if (last) target = last;
|
|
224
|
+
}while (last)
|
|
225
|
+
}
|
|
226
|
+
// Now go backwards until we find an element that is not a placeholder.
|
|
227
|
+
while(target === null || target === void 0 ? void 0 : target.getAttribute('aria-placeholder')){
|
|
228
|
+
let prev = walker.previousNode();
|
|
229
|
+
if (prev && prev.getAttribute('aria-placeholder')) target = prev;
|
|
230
|
+
else break;
|
|
231
|
+
}
|
|
232
|
+
if (target) target.focus();
|
|
216
233
|
};
|
|
217
234
|
let { pressProps: pressProps } = $cIPI0$usePress({
|
|
218
235
|
onPressStart (e) {
|
|
@@ -262,7 +279,22 @@ function $6057a3d2a53a12fd$export$42df105a73306d51(props, state, ref) {
|
|
|
262
279
|
focusManager.focusFirst();
|
|
263
280
|
}
|
|
264
281
|
},
|
|
265
|
-
fieldProps:
|
|
282
|
+
fieldProps: {
|
|
283
|
+
...fieldProps,
|
|
284
|
+
value: state.value,
|
|
285
|
+
onChange: state.setValue,
|
|
286
|
+
minValue: props.minValue,
|
|
287
|
+
maxValue: props.maxValue,
|
|
288
|
+
placeholderValue: props.placeholderValue,
|
|
289
|
+
hideTimeZone: props.hideTimeZone,
|
|
290
|
+
hourCycle: props.hourCycle,
|
|
291
|
+
granularity: props.granularity,
|
|
292
|
+
isDisabled: props.isDisabled,
|
|
293
|
+
isReadOnly: props.isReadOnly,
|
|
294
|
+
isRequired: props.isRequired,
|
|
295
|
+
validationState: state.validationState,
|
|
296
|
+
autoFocus: props.autoFocus
|
|
297
|
+
},
|
|
266
298
|
descriptionProps: descriptionProps,
|
|
267
299
|
errorMessageProps: errorMessageProps,
|
|
268
300
|
buttonProps: {
|
|
@@ -272,31 +304,153 @@ function $6057a3d2a53a12fd$export$42df105a73306d51(props, state, ref) {
|
|
|
272
304
|
'aria-haspopup': 'dialog',
|
|
273
305
|
'aria-label': formatMessage('calendar'),
|
|
274
306
|
'aria-labelledby': `${labelledBy} ${buttonId}`,
|
|
275
|
-
'aria-describedby': ariaDescribedBy
|
|
307
|
+
'aria-describedby': ariaDescribedBy,
|
|
308
|
+
onPress: ()=>state.setOpen(true)
|
|
276
309
|
},
|
|
277
310
|
dialogProps: {
|
|
278
311
|
id: dialogId,
|
|
279
312
|
'aria-labelledby': `${labelledBy} ${buttonId}`
|
|
313
|
+
},
|
|
314
|
+
calendarProps: {
|
|
315
|
+
autoFocus: true,
|
|
316
|
+
value: state.dateValue,
|
|
317
|
+
onChange: state.setDateValue,
|
|
318
|
+
minValue: props.minValue,
|
|
319
|
+
maxValue: props.maxValue,
|
|
320
|
+
isDisabled: props.isDisabled,
|
|
321
|
+
isReadOnly: props.isReadOnly,
|
|
322
|
+
isDateDisabled: props.isDateDisabled
|
|
280
323
|
}
|
|
281
324
|
};
|
|
282
325
|
}
|
|
283
326
|
|
|
284
327
|
|
|
285
|
-
var $32489daedd52963e$exports = {};
|
|
286
328
|
|
|
287
|
-
$parcel$export($32489daedd52963e$exports, "useDateSegment", () => $32489daedd52963e$export$1315d136e6f7581);
|
|
288
329
|
|
|
289
|
-
var $16f0b7bb276bc17e$exports = {};
|
|
290
330
|
|
|
291
|
-
$parcel$export($16f0b7bb276bc17e$exports, "labelIds", () => $16f0b7bb276bc17e$export$beb2340c1222c6d);
|
|
292
|
-
$parcel$export($16f0b7bb276bc17e$exports, "useDateField", () => $16f0b7bb276bc17e$export$5591b0b878c1a989);
|
|
293
331
|
|
|
294
332
|
|
|
295
333
|
|
|
296
334
|
|
|
297
335
|
|
|
298
336
|
|
|
299
|
-
|
|
337
|
+
|
|
338
|
+
const $887cac91b7cc8801$export$7b3062cd49e80452 = '__focusManager_' + Date.now();
|
|
339
|
+
function $887cac91b7cc8801$export$12fd5f0e9f4bb192(props, state, ref) {
|
|
340
|
+
var ref1, ref2;
|
|
341
|
+
let formatMessage = $cIPI0$useMessageFormatter((/*@__PURE__*/$parcel$interopDefault($204383cf4f6b0d06$exports)));
|
|
342
|
+
let { labelProps: labelProps , fieldProps: fieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps } = $cIPI0$useField({
|
|
343
|
+
...props,
|
|
344
|
+
labelElementType: 'span'
|
|
345
|
+
});
|
|
346
|
+
let labelledBy = fieldProps['aria-labelledby'] || fieldProps.id;
|
|
347
|
+
let { locale: locale } = $cIPI0$useLocale();
|
|
348
|
+
let description = state.formatValue(locale, {
|
|
349
|
+
month: 'long'
|
|
350
|
+
});
|
|
351
|
+
let descProps = $cIPI0$useDescription(description);
|
|
352
|
+
let startFieldProps = $cIPI0$useLabels({
|
|
353
|
+
'aria-label': formatMessage('startDate'),
|
|
354
|
+
'aria-labelledby': labelledBy
|
|
355
|
+
});
|
|
356
|
+
let endFieldProps = $cIPI0$useLabels({
|
|
357
|
+
'aria-label': formatMessage('endDate'),
|
|
358
|
+
'aria-labelledby': labelledBy
|
|
359
|
+
});
|
|
360
|
+
let buttonId = $cIPI0$useId();
|
|
361
|
+
let dialogId = $cIPI0$useId();
|
|
362
|
+
let groupProps = $3dfb0f96be0d6a08$export$4a931266a3838b86(state, ref);
|
|
363
|
+
let { focusWithinProps: focusWithinProps } = $cIPI0$useFocusWithin({
|
|
364
|
+
onBlurWithin () {
|
|
365
|
+
state.confirmPlaceholder();
|
|
366
|
+
}
|
|
367
|
+
});
|
|
368
|
+
let ariaDescribedBy = [
|
|
369
|
+
descProps['aria-describedby'],
|
|
370
|
+
fieldProps['aria-describedby']
|
|
371
|
+
].filter(Boolean).join(' ') || undefined;
|
|
372
|
+
let focusManager = $cIPI0$useMemo(()=>$cIPI0$createFocusManager(ref)
|
|
373
|
+
, [
|
|
374
|
+
ref
|
|
375
|
+
]);
|
|
376
|
+
let commonFieldProps = {
|
|
377
|
+
[$887cac91b7cc8801$export$7b3062cd49e80452]: focusManager,
|
|
378
|
+
minValue: props.minValue,
|
|
379
|
+
maxValue: props.maxValue,
|
|
380
|
+
placeholderValue: props.placeholderValue,
|
|
381
|
+
hideTimeZone: props.hideTimeZone,
|
|
382
|
+
hourCycle: props.hourCycle,
|
|
383
|
+
granularity: props.granularity,
|
|
384
|
+
isDisabled: props.isDisabled,
|
|
385
|
+
isReadOnly: props.isReadOnly,
|
|
386
|
+
isRequired: props.isRequired,
|
|
387
|
+
validationState: state.validationState
|
|
388
|
+
};
|
|
389
|
+
return {
|
|
390
|
+
groupProps: $cIPI0$mergeProps(groupProps, fieldProps, descProps, focusWithinProps, {
|
|
391
|
+
role: 'group',
|
|
392
|
+
'aria-disabled': props.isDisabled || null,
|
|
393
|
+
'aria-describedby': ariaDescribedBy
|
|
394
|
+
}),
|
|
395
|
+
labelProps: {
|
|
396
|
+
...labelProps,
|
|
397
|
+
onClick: ()=>{
|
|
398
|
+
focusManager.focusFirst();
|
|
399
|
+
}
|
|
400
|
+
},
|
|
401
|
+
buttonProps: {
|
|
402
|
+
...descProps,
|
|
403
|
+
id: buttonId,
|
|
404
|
+
excludeFromTabOrder: true,
|
|
405
|
+
'aria-haspopup': 'dialog',
|
|
406
|
+
'aria-label': formatMessage('calendar'),
|
|
407
|
+
'aria-labelledby': `${labelledBy} ${buttonId}`,
|
|
408
|
+
'aria-describedby': ariaDescribedBy,
|
|
409
|
+
onPress: ()=>state.setOpen(true)
|
|
410
|
+
},
|
|
411
|
+
dialogProps: {
|
|
412
|
+
id: dialogId,
|
|
413
|
+
'aria-labelledby': `${labelledBy} ${buttonId}`
|
|
414
|
+
},
|
|
415
|
+
startFieldProps: {
|
|
416
|
+
...startFieldProps,
|
|
417
|
+
...commonFieldProps,
|
|
418
|
+
'aria-describedby': fieldProps['aria-describedby'],
|
|
419
|
+
value: (ref1 = state.value) === null || ref1 === void 0 ? void 0 : ref1.start,
|
|
420
|
+
onChange: (start)=>state.setDateTime('start', start)
|
|
421
|
+
,
|
|
422
|
+
autoFocus: props.autoFocus
|
|
423
|
+
},
|
|
424
|
+
endFieldProps: {
|
|
425
|
+
...endFieldProps,
|
|
426
|
+
...commonFieldProps,
|
|
427
|
+
'aria-describedby': fieldProps['aria-describedby'],
|
|
428
|
+
value: (ref2 = state.value) === null || ref2 === void 0 ? void 0 : ref2.end,
|
|
429
|
+
onChange: (end)=>state.setDateTime('end', end)
|
|
430
|
+
},
|
|
431
|
+
descriptionProps: descriptionProps,
|
|
432
|
+
errorMessageProps: errorMessageProps,
|
|
433
|
+
calendarProps: {
|
|
434
|
+
autoFocus: true,
|
|
435
|
+
value: state.dateRange,
|
|
436
|
+
onChange: state.setDateRange,
|
|
437
|
+
minValue: props.minValue,
|
|
438
|
+
maxValue: props.maxValue,
|
|
439
|
+
isDisabled: props.isDisabled,
|
|
440
|
+
isReadOnly: props.isReadOnly,
|
|
441
|
+
isDateDisabled: props.isDateDisabled
|
|
442
|
+
}
|
|
443
|
+
};
|
|
444
|
+
}
|
|
445
|
+
|
|
446
|
+
|
|
447
|
+
|
|
448
|
+
|
|
449
|
+
|
|
450
|
+
|
|
451
|
+
|
|
452
|
+
|
|
453
|
+
const $16f0b7bb276bc17e$export$653eddfc964b0f8a = new WeakMap();
|
|
300
454
|
function $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref) {
|
|
301
455
|
let { labelProps: labelProps , fieldProps: fieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps } = $cIPI0$useField({
|
|
302
456
|
...props,
|
|
@@ -317,15 +471,28 @@ function $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref) {
|
|
|
317
471
|
descProps['aria-describedby'],
|
|
318
472
|
fieldProps['aria-describedby']
|
|
319
473
|
].filter(Boolean).join(' ') || undefined;
|
|
320
|
-
$
|
|
474
|
+
let propsFocusManager = props[$887cac91b7cc8801$export$7b3062cd49e80452];
|
|
475
|
+
let focusManager = $cIPI0$useMemo(()=>propsFocusManager || $cIPI0$createFocusManager(ref)
|
|
476
|
+
, [
|
|
477
|
+
propsFocusManager,
|
|
478
|
+
ref
|
|
479
|
+
]);
|
|
480
|
+
$16f0b7bb276bc17e$export$653eddfc964b0f8a.set(state, {
|
|
321
481
|
ariaLabelledBy: segmentLabelledBy,
|
|
322
|
-
ariaDescribedBy: describedBy
|
|
482
|
+
ariaDescribedBy: describedBy,
|
|
483
|
+
focusManager: focusManager
|
|
323
484
|
});
|
|
485
|
+
let autoFocusRef = $cIPI0$useRef(props.autoFocus);
|
|
486
|
+
$cIPI0$useEffect(()=>{
|
|
487
|
+
if (autoFocusRef.current) focusManager.focusFirst();
|
|
488
|
+
autoFocusRef.current = false;
|
|
489
|
+
}, [
|
|
490
|
+
focusManager
|
|
491
|
+
]);
|
|
324
492
|
return {
|
|
325
493
|
labelProps: {
|
|
326
494
|
...labelProps,
|
|
327
495
|
onClick: ()=>{
|
|
328
|
-
let focusManager = $cIPI0$createFocusManager(ref);
|
|
329
496
|
focusManager.focusFirst();
|
|
330
497
|
}
|
|
331
498
|
},
|
|
@@ -338,6 +505,9 @@ function $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref) {
|
|
|
338
505
|
errorMessageProps: errorMessageProps
|
|
339
506
|
};
|
|
340
507
|
}
|
|
508
|
+
function $16f0b7bb276bc17e$export$4c842f6a241dc825(props, state, ref) {
|
|
509
|
+
return $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref);
|
|
510
|
+
}
|
|
341
511
|
|
|
342
512
|
|
|
343
513
|
|
|
@@ -380,12 +550,11 @@ class $3aeceb3a64eb8358$var$DisplayNamesPolyfill {
|
|
|
380
550
|
|
|
381
551
|
|
|
382
552
|
|
|
383
|
-
|
|
384
|
-
function $32489daedd52963e$export$1315d136e6f7581(props, segment, state, ref) {
|
|
553
|
+
function $32489daedd52963e$export$1315d136e6f7581(segment, state, ref) {
|
|
385
554
|
let enteredKeys = $cIPI0$useRef('');
|
|
386
555
|
let { locale: locale , direction: direction } = $cIPI0$useLocale();
|
|
387
556
|
let displayNames = $3aeceb3a64eb8358$export$d42c60378c8168f8();
|
|
388
|
-
let focusManager = $
|
|
557
|
+
let { ariaLabelledBy: ariaLabelledBy , ariaDescribedBy: ariaDescribedBy , focusManager: focusManager } = $16f0b7bb276bc17e$export$653eddfc964b0f8a.get(state);
|
|
389
558
|
let textValue = segment.text;
|
|
390
559
|
let options = $cIPI0$useMemo(()=>state.dateFormatter.resolvedOptions()
|
|
391
560
|
, [
|
|
@@ -409,9 +578,9 @@ function $32489daedd52963e$export$1315d136e6f7581(props, segment, state, ref) {
|
|
|
409
578
|
textValue: textValue,
|
|
410
579
|
minValue: segment.minValue,
|
|
411
580
|
maxValue: segment.maxValue,
|
|
412
|
-
isDisabled:
|
|
413
|
-
isReadOnly:
|
|
414
|
-
isRequired:
|
|
581
|
+
isDisabled: state.isDisabled,
|
|
582
|
+
isReadOnly: state.isReadOnly || !segment.isEditable,
|
|
583
|
+
isRequired: state.isRequired,
|
|
415
584
|
onIncrement: ()=>{
|
|
416
585
|
enteredKeys.current = '';
|
|
417
586
|
state.increment(segment.type);
|
|
@@ -444,7 +613,7 @@ function $32489daedd52963e$export$1315d136e6f7581(props, segment, state, ref) {
|
|
|
444
613
|
locale
|
|
445
614
|
]);
|
|
446
615
|
let backspace = ()=>{
|
|
447
|
-
if (parser.isValidPartialNumber(segment.text) && !
|
|
616
|
+
if (parser.isValidPartialNumber(segment.text) && !state.isReadOnly && !segment.isPlaceholder) {
|
|
448
617
|
let newValue = segment.text.slice(0, -1);
|
|
449
618
|
let parsed = parser.parse(newValue);
|
|
450
619
|
if (newValue.length === 0 || parsed === 0) state.clearSegment(segment.type);
|
|
@@ -461,20 +630,30 @@ function $32489daedd52963e$export$1315d136e6f7581(props, segment, state, ref) {
|
|
|
461
630
|
case 'ArrowLeft':
|
|
462
631
|
e.preventDefault();
|
|
463
632
|
e.stopPropagation();
|
|
464
|
-
if (direction === 'rtl') focusManager.focusNext(
|
|
465
|
-
|
|
633
|
+
if (direction === 'rtl') focusManager.focusNext({
|
|
634
|
+
tabbable: true
|
|
635
|
+
});
|
|
636
|
+
else focusManager.focusPrevious({
|
|
637
|
+
tabbable: true
|
|
638
|
+
});
|
|
466
639
|
break;
|
|
467
640
|
case 'ArrowRight':
|
|
468
641
|
e.preventDefault();
|
|
469
642
|
e.stopPropagation();
|
|
470
|
-
if (direction === 'rtl') focusManager.focusPrevious(
|
|
471
|
-
|
|
643
|
+
if (direction === 'rtl') focusManager.focusPrevious({
|
|
644
|
+
tabbable: true
|
|
645
|
+
});
|
|
646
|
+
else focusManager.focusNext({
|
|
647
|
+
tabbable: true
|
|
648
|
+
});
|
|
472
649
|
break;
|
|
473
650
|
case 'Enter':
|
|
474
651
|
e.preventDefault();
|
|
475
652
|
e.stopPropagation();
|
|
476
|
-
if (segment.isPlaceholder && !
|
|
477
|
-
focusManager.focusNext(
|
|
653
|
+
if (segment.isPlaceholder && !state.isReadOnly) state.confirmPlaceholder(segment.type);
|
|
654
|
+
focusManager.focusNext({
|
|
655
|
+
tabbable: true
|
|
656
|
+
});
|
|
478
657
|
break;
|
|
479
658
|
case 'Tab':
|
|
480
659
|
break;
|
|
@@ -512,14 +691,16 @@ function $32489daedd52963e$export$1315d136e6f7581(props, segment, state, ref) {
|
|
|
512
691
|
amPmFormatter
|
|
513
692
|
]);
|
|
514
693
|
let onInput = (key)=>{
|
|
515
|
-
if (
|
|
694
|
+
if (state.isDisabled || state.isReadOnly) return;
|
|
516
695
|
let newValue = enteredKeys.current + key;
|
|
517
696
|
switch(segment.type){
|
|
518
697
|
case 'dayPeriod':
|
|
519
698
|
if (startsWith(am, key)) state.setSegment('dayPeriod', 0);
|
|
520
699
|
else if (startsWith(pm, key)) state.setSegment('dayPeriod', 12);
|
|
521
700
|
else break;
|
|
522
|
-
focusManager.focusNext(
|
|
701
|
+
focusManager.focusNext({
|
|
702
|
+
tabbable: true
|
|
703
|
+
});
|
|
523
704
|
break;
|
|
524
705
|
case 'day':
|
|
525
706
|
case 'hour':
|
|
@@ -549,7 +730,9 @@ function $32489daedd52963e$export$1315d136e6f7581(props, segment, state, ref) {
|
|
|
549
730
|
if (shouldSetValue) state.setSegment(segment.type, segmentValue);
|
|
550
731
|
if (Number(numberValue + '0') > segment.maxValue || newValue.length >= String(segment.maxValue).length) {
|
|
551
732
|
enteredKeys.current = '';
|
|
552
|
-
if (shouldSetValue) focusManager.focusNext(
|
|
733
|
+
if (shouldSetValue) focusManager.focusNext({
|
|
734
|
+
tabbable: true
|
|
735
|
+
});
|
|
553
736
|
} else enteredKeys.current = newValue;
|
|
554
737
|
break;
|
|
555
738
|
}
|
|
@@ -572,7 +755,7 @@ function $32489daedd52963e$export$1315d136e6f7581(props, segment, state, ref) {
|
|
|
572
755
|
switch(e.inputType){
|
|
573
756
|
case 'deleteContentBackward':
|
|
574
757
|
case 'deleteContentForward':
|
|
575
|
-
if (parser.isValidPartialNumber(segment.text) && !
|
|
758
|
+
if (parser.isValidPartialNumber(segment.text) && !state.isReadOnly) backspace();
|
|
576
759
|
break;
|
|
577
760
|
case 'insertCompositionText':
|
|
578
761
|
// insertCompositionText cannot be canceled.
|
|
@@ -623,7 +806,6 @@ function $32489daedd52963e$export$1315d136e6f7581(props, segment, state, ref) {
|
|
|
623
806
|
'aria-valuenow': null
|
|
624
807
|
} : {
|
|
625
808
|
};
|
|
626
|
-
let { ariaLabelledBy: ariaLabelledBy , ariaDescribedBy: ariaDescribedBy } = $16f0b7bb276bc17e$export$beb2340c1222c6d.get(state);
|
|
627
809
|
// Only apply aria-describedby to the first segment, unless the field is invalid. This avoids it being
|
|
628
810
|
// read every time the user navigates to a new segment.
|
|
629
811
|
let firstSegment = $cIPI0$useMemo(()=>state.segments.find((s)=>s.isEditable
|
|
@@ -632,20 +814,25 @@ function $32489daedd52963e$export$1315d136e6f7581(props, segment, state, ref) {
|
|
|
632
814
|
state.segments
|
|
633
815
|
]);
|
|
634
816
|
if (segment !== firstSegment && state.validationState !== 'invalid') ariaDescribedBy = undefined;
|
|
635
|
-
let id = $cIPI0$useId(
|
|
636
|
-
let isEditable = !
|
|
817
|
+
let id = $cIPI0$useId();
|
|
818
|
+
let isEditable = !state.isDisabled && !state.isReadOnly && segment.isEditable;
|
|
819
|
+
// Literal segments should not be visible to screen readers. We don't really need any of the above,
|
|
820
|
+
// but the rules of hooks mean hooks cannot be conditional so we have to put this condition here.
|
|
821
|
+
if (segment.type === 'literal') return {
|
|
822
|
+
segmentProps: {
|
|
823
|
+
'aria-hidden': true
|
|
824
|
+
}
|
|
825
|
+
};
|
|
637
826
|
return {
|
|
638
827
|
segmentProps: $cIPI0$mergeProps(spinButtonProps, pressProps, {
|
|
639
828
|
id: id,
|
|
640
829
|
...touchPropOverrides,
|
|
641
|
-
'aria-controls': props['aria-controls'],
|
|
642
|
-
// 'aria-haspopup': props['aria-haspopup'], // deprecated in ARIA 1.2
|
|
643
830
|
'aria-invalid': state.validationState === 'invalid' ? 'true' : undefined,
|
|
644
|
-
'aria-label':
|
|
831
|
+
'aria-label': displayNames.of(segment.type),
|
|
645
832
|
'aria-labelledby': `${ariaLabelledBy} ${id}`,
|
|
646
833
|
'aria-describedby': ariaDescribedBy,
|
|
647
834
|
'aria-placeholder': segment.isPlaceholder ? segment.text : undefined,
|
|
648
|
-
'aria-readonly':
|
|
835
|
+
'aria-readonly': state.isReadOnly || !segment.isEditable ? 'true' : undefined,
|
|
649
836
|
contentEditable: isEditable,
|
|
650
837
|
suppressContentEditableWarning: isEditable,
|
|
651
838
|
spellCheck: isEditable ? 'false' : undefined,
|
|
@@ -653,100 +840,22 @@ function $32489daedd52963e$export$1315d136e6f7581(props, segment, state, ref) {
|
|
|
653
840
|
autoCorrect: isEditable ? 'off' : undefined,
|
|
654
841
|
// Capitalization was changed in React 17...
|
|
655
842
|
[parseInt($cIPI0$react.version, 10) >= 17 ? 'enterKeyHint' : 'enterkeyhint']: isEditable ? 'next' : undefined,
|
|
656
|
-
inputMode:
|
|
657
|
-
tabIndex:
|
|
843
|
+
inputMode: state.isDisabled || segment.type === 'dayPeriod' || !isEditable ? undefined : 'numeric',
|
|
844
|
+
tabIndex: state.isDisabled ? undefined : 0,
|
|
658
845
|
onKeyDown: onKeyDown,
|
|
659
|
-
onFocus: onFocus
|
|
846
|
+
onFocus: onFocus,
|
|
847
|
+
style: {
|
|
848
|
+
caretColor: 'transparent'
|
|
849
|
+
}
|
|
660
850
|
})
|
|
661
851
|
};
|
|
662
852
|
}
|
|
663
853
|
|
|
664
854
|
|
|
665
855
|
|
|
666
|
-
var $887cac91b7cc8801$exports = {};
|
|
667
|
-
|
|
668
|
-
$parcel$export($887cac91b7cc8801$exports, "useDateRangePicker", () => $887cac91b7cc8801$export$12fd5f0e9f4bb192);
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
function $887cac91b7cc8801$export$12fd5f0e9f4bb192(props, state, ref) {
|
|
677
|
-
let formatMessage = $cIPI0$useMessageFormatter((/*@__PURE__*/$parcel$interopDefault($204383cf4f6b0d06$exports)));
|
|
678
|
-
let { labelProps: labelProps , fieldProps: fieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps } = $cIPI0$useField({
|
|
679
|
-
...props,
|
|
680
|
-
labelElementType: 'span'
|
|
681
|
-
});
|
|
682
|
-
let labelledBy = fieldProps['aria-labelledby'] || fieldProps.id;
|
|
683
|
-
let { locale: locale } = $cIPI0$useLocale();
|
|
684
|
-
let description = state.formatValue(locale, {
|
|
685
|
-
month: 'long'
|
|
686
|
-
});
|
|
687
|
-
let descProps = $cIPI0$useDescription(description);
|
|
688
|
-
let startFieldProps = $cIPI0$useLabels({
|
|
689
|
-
'aria-label': formatMessage('startDate'),
|
|
690
|
-
'aria-labelledby': labelledBy
|
|
691
|
-
});
|
|
692
|
-
let endFieldProps = $cIPI0$useLabels({
|
|
693
|
-
'aria-label': formatMessage('endDate'),
|
|
694
|
-
'aria-labelledby': labelledBy
|
|
695
|
-
});
|
|
696
|
-
let buttonId = $cIPI0$useId();
|
|
697
|
-
let dialogId = $cIPI0$useId();
|
|
698
|
-
let groupProps = $3dfb0f96be0d6a08$export$4a931266a3838b86(state, ref);
|
|
699
|
-
let { focusWithinProps: focusWithinProps } = $cIPI0$useFocusWithin({
|
|
700
|
-
onBlurWithin () {
|
|
701
|
-
state.confirmPlaceholder();
|
|
702
|
-
}
|
|
703
|
-
});
|
|
704
|
-
let ariaDescribedBy = [
|
|
705
|
-
descProps['aria-describedby'],
|
|
706
|
-
fieldProps['aria-describedby']
|
|
707
|
-
].filter(Boolean).join(' ') || undefined;
|
|
708
|
-
return {
|
|
709
|
-
groupProps: $cIPI0$mergeProps(groupProps, fieldProps, descProps, focusWithinProps, {
|
|
710
|
-
role: 'group',
|
|
711
|
-
'aria-disabled': props.isDisabled || null,
|
|
712
|
-
'aria-describedby': ariaDescribedBy
|
|
713
|
-
}),
|
|
714
|
-
labelProps: {
|
|
715
|
-
...labelProps,
|
|
716
|
-
onClick: ()=>{
|
|
717
|
-
let focusManager = $cIPI0$createFocusManager(ref);
|
|
718
|
-
focusManager.focusFirst();
|
|
719
|
-
}
|
|
720
|
-
},
|
|
721
|
-
buttonProps: {
|
|
722
|
-
...descProps,
|
|
723
|
-
id: buttonId,
|
|
724
|
-
excludeFromTabOrder: true,
|
|
725
|
-
'aria-haspopup': 'dialog',
|
|
726
|
-
'aria-label': formatMessage('calendar'),
|
|
727
|
-
'aria-labelledby': `${labelledBy} ${buttonId}`,
|
|
728
|
-
'aria-describedby': ariaDescribedBy
|
|
729
|
-
},
|
|
730
|
-
dialogProps: {
|
|
731
|
-
id: dialogId,
|
|
732
|
-
'aria-labelledby': `${labelledBy} ${buttonId}`
|
|
733
|
-
},
|
|
734
|
-
startFieldProps: {
|
|
735
|
-
...startFieldProps,
|
|
736
|
-
'aria-describedby': fieldProps['aria-describedby']
|
|
737
|
-
},
|
|
738
|
-
endFieldProps: {
|
|
739
|
-
...endFieldProps,
|
|
740
|
-
'aria-describedby': fieldProps['aria-describedby']
|
|
741
|
-
},
|
|
742
|
-
descriptionProps: descriptionProps,
|
|
743
|
-
errorMessageProps: errorMessageProps
|
|
744
|
-
};
|
|
745
|
-
}
|
|
746
|
-
|
|
747
856
|
|
|
748
857
|
|
|
749
858
|
|
|
750
859
|
|
|
751
|
-
export {$6057a3d2a53a12fd$export$42df105a73306d51 as useDatePicker, $32489daedd52963e$export$1315d136e6f7581 as useDateSegment, $16f0b7bb276bc17e$export$
|
|
860
|
+
export {$6057a3d2a53a12fd$export$42df105a73306d51 as useDatePicker, $32489daedd52963e$export$1315d136e6f7581 as useDateSegment, $16f0b7bb276bc17e$export$5591b0b878c1a989 as useDateField, $16f0b7bb276bc17e$export$4c842f6a241dc825 as useTimeField, $887cac91b7cc8801$export$12fd5f0e9f4bb192 as useDateRangePicker, $3aeceb3a64eb8358$export$d42c60378c8168f8 as useDisplayNames};
|
|
752
861
|
//# sourceMappingURL=module.js.map
|