@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 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($e90ae7c26a69c6b1$exports, "useDatePicker", () => $e90ae7c26a69c6b1$export$42df105a73306d51);
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
- function $715562ad3b4cced4$export$4a931266a3838b86(state, ref) {
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
- let elements = ref.current.querySelectorAll('[tabindex="0"]');
227
- let index = elements.length - 1;
228
- while(index >= 0 && elements[index].getAttribute('aria-placeholder'))index--;
229
- index = Math.min(index + 1, elements.length - 1);
230
- let element = elements[index];
231
- if (element) element.focus();
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: 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
- const $4acc2f407c169e55$export$beb2340c1222c6d = new WeakMap();
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
- $4acc2f407c169e55$export$beb2340c1222c6d.set(state, {
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 = $IwcIq$reactariafocus.useFocusManager();
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: props.isDisabled,
429
- isReadOnly: props.isReadOnly || !segment.isEditable,
430
- isRequired: props.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) && !props.isReadOnly && !segment.isPlaceholder) {
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
- else focusManager.focusPrevious();
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
- else focusManager.focusNext();
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 && !props.isReadOnly) state.confirmPlaceholder(segment.type);
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 (props.isDisabled || props.isReadOnly) return;
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) && !props.isReadOnly) backspace();
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(props.id);
652
- let isEditable = !props.isDisabled && !props.isReadOnly && segment.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': segment.type !== 'literal' ? displayNames.of(segment.type) : undefined,
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': props.isReadOnly || !segment.isEditable ? 'true' : undefined,
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: props.isDisabled || segment.type === 'dayPeriod' || !isEditable ? undefined : 'numeric',
673
- tabIndex: props.isDisabled ? undefined : 0,
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