@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/module.js CHANGED
@@ -1,10 +1,10 @@
1
- import {createFocusManager as $cIPI0$createFocusManager, useFocusManager as $cIPI0$useFocusManager} from "@react-aria/focus";
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
- function $3dfb0f96be0d6a08$export$4a931266a3838b86(state, ref) {
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
- let elements = ref.current.querySelectorAll('[tabindex="0"]');
211
- let index = elements.length - 1;
212
- while(index >= 0 && elements[index].getAttribute('aria-placeholder'))index--;
213
- index = Math.min(index + 1, elements.length - 1);
214
- let element = elements[index];
215
- if (element) element.focus();
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: 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
- const $16f0b7bb276bc17e$export$beb2340c1222c6d = new WeakMap();
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
- $16f0b7bb276bc17e$export$beb2340c1222c6d.set(state, {
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 = $cIPI0$useFocusManager();
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: props.isDisabled,
413
- isReadOnly: props.isReadOnly || !segment.isEditable,
414
- isRequired: props.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) && !props.isReadOnly && !segment.isPlaceholder) {
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
- else focusManager.focusPrevious();
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
- else focusManager.focusNext();
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 && !props.isReadOnly) state.confirmPlaceholder(segment.type);
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 (props.isDisabled || props.isReadOnly) return;
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) && !props.isReadOnly) backspace();
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(props.id);
636
- let isEditable = !props.isDisabled && !props.isReadOnly && segment.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': segment.type !== 'literal' ? displayNames.of(segment.type) : undefined,
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': props.isReadOnly || !segment.isEditable ? 'true' : undefined,
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: props.isDisabled || segment.type === 'dayPeriod' || !isEditable ? undefined : 'numeric',
657
- tabIndex: props.isDisabled ? undefined : 0,
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$beb2340c1222c6d as labelIds, $16f0b7bb276bc17e$export$5591b0b878c1a989 as useDateField, $887cac91b7cc8801$export$12fd5f0e9f4bb192 as useDateRangePicker, $3aeceb3a64eb8358$export$d42c60378c8168f8 as useDisplayNames};
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