@react-aria/datepicker 3.10.0 → 3.11.0
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/ar-AE.mjs +1 -1
- package/dist/bg-BG.mjs +1 -1
- package/dist/cs-CZ.mjs +1 -1
- package/dist/da-DK.mjs +1 -1
- package/dist/de-DE.mjs +1 -1
- package/dist/el-GR.mjs +1 -1
- package/dist/en-US.mjs +1 -1
- package/dist/es-ES.mjs +1 -1
- package/dist/et-EE.mjs +1 -1
- package/dist/fi-FI.mjs +1 -1
- package/dist/fr-FR.mjs +1 -1
- package/dist/he-IL.mjs +1 -1
- package/dist/hr-HR.mjs +1 -1
- package/dist/hu-HU.mjs +1 -1
- package/dist/intlStrings.mjs +1 -1
- package/dist/it-IT.mjs +1 -1
- package/dist/ja-JP.mjs +1 -1
- package/dist/ko-KR.mjs +1 -1
- package/dist/lt-LT.mjs +1 -1
- package/dist/lv-LV.mjs +1 -1
- package/dist/nb-NO.mjs +1 -1
- package/dist/nl-NL.mjs +1 -1
- package/dist/pl-PL.mjs +1 -1
- package/dist/pt-BR.mjs +1 -1
- package/dist/pt-PT.mjs +1 -1
- package/dist/ro-RO.mjs +1 -1
- package/dist/ru-RU.mjs +1 -1
- package/dist/sk-SK.mjs +1 -1
- package/dist/sl-SI.mjs +1 -1
- package/dist/sr-SP.mjs +1 -1
- package/dist/sv-SE.mjs +1 -1
- package/dist/tr-TR.mjs +1 -1
- package/dist/types.d.ts +10 -10
- package/dist/types.d.ts.map +1 -1
- package/dist/uk-UA.mjs +1 -1
- package/dist/useDateField.main.js +27 -26
- package/dist/useDateField.main.js.map +1 -1
- package/dist/useDateField.mjs +28 -27
- package/dist/useDateField.module.js +27 -26
- package/dist/useDateField.module.js.map +1 -1
- package/dist/useDatePicker.main.js +23 -23
- package/dist/useDatePicker.main.js.map +1 -1
- package/dist/useDatePicker.mjs +24 -24
- package/dist/useDatePicker.module.js +23 -23
- package/dist/useDatePicker.module.js.map +1 -1
- package/dist/useDatePickerGroup.main.js +10 -10
- package/dist/useDatePickerGroup.main.js.map +1 -1
- package/dist/useDatePickerGroup.mjs +11 -11
- package/dist/useDatePickerGroup.module.js +10 -10
- package/dist/useDatePickerGroup.module.js.map +1 -1
- package/dist/useDateRangePicker.main.js +28 -28
- package/dist/useDateRangePicker.main.js.map +1 -1
- package/dist/useDateRangePicker.mjs +29 -29
- package/dist/useDateRangePicker.module.js +28 -28
- package/dist/useDateRangePicker.module.js.map +1 -1
- package/dist/useDateSegment.main.js +79 -72
- package/dist/useDateSegment.main.js.map +1 -1
- package/dist/useDateSegment.mjs +80 -73
- package/dist/useDateSegment.module.js +79 -72
- package/dist/useDateSegment.module.js.map +1 -1
- package/dist/useDisplayNames.main.js +2 -2
- package/dist/useDisplayNames.mjs +3 -3
- package/dist/useDisplayNames.module.js +2 -2
- package/dist/zh-CN.mjs +1 -1
- package/dist/zh-TW.mjs +1 -1
- package/package.json +21 -21
- package/src/useDateField.ts +8 -7
- package/src/useDatePicker.ts +3 -3
- package/src/useDatePickerGroup.ts +4 -4
- package/src/useDateRangePicker.ts +3 -3
- package/src/useDateSegment.ts +15 -5
|
@@ -4,10 +4,10 @@ import {useDatePickerGroup as $3dfb0f96be0d6a08$export$4a931266a3838b86} from ".
|
|
|
4
4
|
import {createFocusManager as $4lVjK$createFocusManager} from "@react-aria/focus";
|
|
5
5
|
import {useId as $4lVjK$useId, useDescription as $4lVjK$useDescription, filterDOMProps as $4lVjK$filterDOMProps, mergeProps as $4lVjK$mergeProps} from "@react-aria/utils";
|
|
6
6
|
import {privateValidationStateProp as $4lVjK$privateValidationStateProp} from "@react-stately/form";
|
|
7
|
-
import {useMemo as $4lVjK$useMemo} from "react";
|
|
8
7
|
import {useField as $4lVjK$useField} from "@react-aria/label";
|
|
9
8
|
import {useFocusWithin as $4lVjK$useFocusWithin} from "@react-aria/interactions";
|
|
10
9
|
import {useLocalizedStringFormatter as $4lVjK$useLocalizedStringFormatter, useLocale as $4lVjK$useLocale} from "@react-aria/i18n";
|
|
10
|
+
import {useMemo as $4lVjK$useMemo} from "react";
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
function $parcel$interopDefault(a) {
|
|
@@ -37,28 +37,28 @@ function $6057a3d2a53a12fd$export$42df105a73306d51(props, state, ref) {
|
|
|
37
37
|
let buttonId = (0, $4lVjK$useId)();
|
|
38
38
|
let dialogId = (0, $4lVjK$useId)();
|
|
39
39
|
let fieldId = (0, $4lVjK$useId)();
|
|
40
|
-
let stringFormatter = (0, $4lVjK$useLocalizedStringFormatter)((0, ($parcel$interopDefault($4lVjK$intlStringsmodulejs))),
|
|
40
|
+
let stringFormatter = (0, $4lVjK$useLocalizedStringFormatter)((0, ($parcel$interopDefault($4lVjK$intlStringsmodulejs))), '@react-aria/datepicker');
|
|
41
41
|
let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = state.displayValidation;
|
|
42
42
|
let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $4lVjK$useField)({
|
|
43
43
|
...props,
|
|
44
|
-
labelElementType:
|
|
44
|
+
labelElementType: 'span',
|
|
45
45
|
isInvalid: isInvalid,
|
|
46
46
|
errorMessage: props.errorMessage || validationErrors
|
|
47
47
|
});
|
|
48
48
|
let groupProps = (0, $3dfb0f96be0d6a08$export$4a931266a3838b86)(state, ref);
|
|
49
|
-
let labelledBy = fieldProps[
|
|
49
|
+
let labelledBy = fieldProps['aria-labelledby'] || fieldProps.id;
|
|
50
50
|
let { locale: locale } = (0, $4lVjK$useLocale)();
|
|
51
51
|
let date = state.formatValue(locale, {
|
|
52
|
-
month:
|
|
52
|
+
month: 'long'
|
|
53
53
|
});
|
|
54
|
-
let description = date ? stringFormatter.format(
|
|
54
|
+
let description = date ? stringFormatter.format('selectedDateDescription', {
|
|
55
55
|
date: date
|
|
56
|
-
}) :
|
|
56
|
+
}) : '';
|
|
57
57
|
let descProps = (0, $4lVjK$useDescription)(description);
|
|
58
58
|
let ariaDescribedBy = [
|
|
59
|
-
descProps[
|
|
60
|
-
fieldProps[
|
|
61
|
-
].filter(Boolean).join(
|
|
59
|
+
descProps['aria-describedby'],
|
|
60
|
+
fieldProps['aria-describedby']
|
|
61
|
+
].filter(Boolean).join(' ') || undefined;
|
|
62
62
|
let domProps = (0, $4lVjK$filterDOMProps)(props);
|
|
63
63
|
let focusManager = (0, $4lVjK$useMemo)(()=>(0, $4lVjK$createFocusManager)(ref), [
|
|
64
64
|
ref
|
|
@@ -72,10 +72,10 @@ function $6057a3d2a53a12fd$export$42df105a73306d51(props, state, ref) {
|
|
|
72
72
|
});
|
|
73
73
|
return {
|
|
74
74
|
groupProps: (0, $4lVjK$mergeProps)(domProps, groupProps, fieldProps, descProps, focusWithinProps, {
|
|
75
|
-
role:
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
75
|
+
role: 'group',
|
|
76
|
+
'aria-disabled': props.isDisabled || null,
|
|
77
|
+
'aria-labelledby': labelledBy,
|
|
78
|
+
'aria-describedby': ariaDescribedBy,
|
|
79
79
|
onKeyDown (e) {
|
|
80
80
|
if (state.isOpen) return;
|
|
81
81
|
if (props.onKeyDown) props.onKeyDown(e);
|
|
@@ -94,8 +94,8 @@ function $6057a3d2a53a12fd$export$42df105a73306d51(props, state, ref) {
|
|
|
94
94
|
fieldProps: {
|
|
95
95
|
...fieldProps,
|
|
96
96
|
id: fieldId,
|
|
97
|
-
[(0, $16f0b7bb276bc17e$export$300019f83c56d282)]:
|
|
98
|
-
|
|
97
|
+
[(0, $16f0b7bb276bc17e$export$300019f83c56d282)]: 'presentation',
|
|
98
|
+
'aria-describedby': ariaDescribedBy,
|
|
99
99
|
value: state.value,
|
|
100
100
|
onChange: state.setValue,
|
|
101
101
|
placeholderValue: props.placeholderValue,
|
|
@@ -117,17 +117,17 @@ function $6057a3d2a53a12fd$export$42df105a73306d51(props, state, ref) {
|
|
|
117
117
|
buttonProps: {
|
|
118
118
|
...descProps,
|
|
119
119
|
id: buttonId,
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
120
|
+
'aria-haspopup': 'dialog',
|
|
121
|
+
'aria-label': stringFormatter.format('calendar'),
|
|
122
|
+
'aria-labelledby': `${buttonId} ${labelledBy}`,
|
|
123
|
+
'aria-describedby': ariaDescribedBy,
|
|
124
|
+
'aria-expanded': state.isOpen,
|
|
125
125
|
isDisabled: props.isDisabled || props.isReadOnly,
|
|
126
126
|
onPress: ()=>state.setOpen(true)
|
|
127
127
|
},
|
|
128
128
|
dialogProps: {
|
|
129
129
|
id: dialogId,
|
|
130
|
-
|
|
130
|
+
'aria-labelledby': `${buttonId} ${labelledBy}`
|
|
131
131
|
},
|
|
132
132
|
calendarProps: {
|
|
133
133
|
autoFocus: true,
|
|
@@ -140,7 +140,7 @@ function $6057a3d2a53a12fd$export$42df105a73306d51(props, state, ref) {
|
|
|
140
140
|
isDateUnavailable: props.isDateUnavailable,
|
|
141
141
|
defaultFocusedValue: state.dateValue ? undefined : props.placeholderValue,
|
|
142
142
|
isInvalid: state.isInvalid,
|
|
143
|
-
errorMessage: typeof props.errorMessage ===
|
|
143
|
+
errorMessage: typeof props.errorMessage === 'function' ? props.errorMessage(state.displayValidation) : props.errorMessage || state.displayValidation.validationErrors.join(' ')
|
|
144
144
|
},
|
|
145
145
|
isInvalid: isInvalid,
|
|
146
146
|
validationErrors: validationErrors,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AA2CM,SAAS,0CAAmC,KAA6B,EAAE,KAAsB,EAAE,
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-aria/datepicker/src/useDatePicker.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaButtonProps} from '@react-types/button';\nimport {AriaDatePickerProps, DateValue} from '@react-types/datepicker';\nimport {AriaDialogProps} from '@react-types/dialog';\nimport {CalendarProps} from '@react-types/calendar';\nimport {createFocusManager} from '@react-aria/focus';\nimport {DatePickerState} from '@react-stately/datepicker';\nimport {DOMAttributes, GroupDOMAttributes, KeyboardEvent, RefObject, ValidationResult} from '@react-types/shared';\nimport {filterDOMProps, mergeProps, useDescription, useId} from '@react-aria/utils';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {privateValidationStateProp} from '@react-stately/form';\nimport {roleSymbol} from './useDateField';\nimport {useDatePickerGroup} from './useDatePickerGroup';\nimport {useField} from '@react-aria/label';\nimport {useFocusWithin} from '@react-aria/interactions';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useMemo} from 'react';\n\nexport interface DatePickerAria extends ValidationResult {\n /** Props for the date picker's visible label element, if any. */\n labelProps: DOMAttributes,\n /** Props for the grouping element containing the date field and button. */\n groupProps: GroupDOMAttributes,\n /** Props for the date field. */\n fieldProps: AriaDatePickerProps<DateValue>,\n /** Props for the popover trigger button. */\n buttonProps: AriaButtonProps,\n /** Props for the description element, if any. */\n descriptionProps: DOMAttributes,\n /** Props for the error message element, if any. */\n errorMessageProps: DOMAttributes,\n /** Props for the popover dialog. */\n dialogProps: AriaDialogProps,\n /** Props for the calendar within the popover dialog. */\n calendarProps: CalendarProps<DateValue>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a date picker component.\n * A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value.\n */\nexport function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>, state: DatePickerState, ref: RefObject<Element | null>): DatePickerAria {\n let buttonId = useId();\n let dialogId = useId();\n let fieldId = useId();\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/datepicker');\n\n let {isInvalid, validationErrors, validationDetails} = state.displayValidation;\n let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({\n ...props,\n labelElementType: 'span',\n isInvalid,\n errorMessage: props.errorMessage || validationErrors\n });\n\n let groupProps = useDatePickerGroup(state, ref);\n\n let labelledBy = fieldProps['aria-labelledby'] || fieldProps.id;\n\n let {locale} = useLocale();\n let date = state.formatValue(locale, {month: 'long'});\n let description = date ? stringFormatter.format('selectedDateDescription', {date}) : '';\n let descProps = useDescription(description);\n let ariaDescribedBy = [descProps['aria-describedby'], fieldProps['aria-describedby']].filter(Boolean).join(' ') || undefined;\n let domProps = filterDOMProps(props);\n let focusManager = useMemo(() => createFocusManager(ref), [ref]);\n\n let {focusWithinProps} = useFocusWithin({\n ...props,\n isDisabled: state.isOpen,\n onBlurWithin: props.onBlur,\n onFocusWithin: props.onFocus,\n onFocusWithinChange: props.onFocusChange\n });\n\n return {\n groupProps: mergeProps(domProps, groupProps, fieldProps, descProps, focusWithinProps, {\n role: 'group' as const,\n 'aria-disabled': props.isDisabled || null,\n 'aria-labelledby': labelledBy,\n 'aria-describedby': ariaDescribedBy,\n onKeyDown(e: KeyboardEvent) {\n if (state.isOpen) {\n return;\n }\n\n if (props.onKeyDown) {\n props.onKeyDown(e);\n }\n },\n onKeyUp(e: KeyboardEvent) {\n if (state.isOpen) {\n return;\n }\n\n if (props.onKeyUp) {\n props.onKeyUp(e);\n }\n }\n }),\n labelProps: {\n ...labelProps,\n onClick: () => {\n focusManager.focusFirst();\n }\n },\n fieldProps: {\n ...fieldProps,\n id: fieldId,\n [roleSymbol]: 'presentation',\n 'aria-describedby': ariaDescribedBy,\n value: state.value,\n onChange: state.setValue,\n placeholderValue: props.placeholderValue,\n hideTimeZone: props.hideTimeZone,\n hourCycle: props.hourCycle,\n shouldForceLeadingZeros: props.shouldForceLeadingZeros,\n granularity: props.granularity,\n isDisabled: props.isDisabled,\n isReadOnly: props.isReadOnly,\n isRequired: props.isRequired,\n validationBehavior: props.validationBehavior,\n // DatePicker owns the validation state for the date field.\n [privateValidationStateProp]: state,\n autoFocus: props.autoFocus,\n name: props.name\n },\n descriptionProps,\n errorMessageProps,\n buttonProps: {\n ...descProps,\n id: buttonId,\n 'aria-haspopup': 'dialog',\n 'aria-label': stringFormatter.format('calendar'),\n 'aria-labelledby': `${buttonId} ${labelledBy}`,\n 'aria-describedby': ariaDescribedBy,\n 'aria-expanded': state.isOpen,\n isDisabled: props.isDisabled || props.isReadOnly,\n onPress: () => state.setOpen(true)\n },\n dialogProps: {\n id: dialogId,\n 'aria-labelledby': `${buttonId} ${labelledBy}`\n },\n calendarProps: {\n autoFocus: true,\n value: state.dateValue,\n onChange: state.setDateValue,\n minValue: props.minValue,\n maxValue: props.maxValue,\n isDisabled: props.isDisabled,\n isReadOnly: props.isReadOnly,\n isDateUnavailable: props.isDateUnavailable,\n defaultFocusedValue: state.dateValue ? undefined : props.placeholderValue,\n isInvalid: state.isInvalid,\n errorMessage: typeof props.errorMessage === 'function' ? props.errorMessage(state.displayValidation) : (props.errorMessage || state.displayValidation.validationErrors.join(' '))\n },\n isInvalid,\n validationErrors,\n validationDetails\n };\n}\n"],"names":[],"version":3,"file":"useDatePicker.module.js.map"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
var $19S5E$reactariafocus = require("@react-aria/focus");
|
|
2
2
|
var $19S5E$reactariautils = require("@react-aria/utils");
|
|
3
|
-
var $19S5E$react = require("react");
|
|
4
3
|
var $19S5E$reactariai18n = require("@react-aria/i18n");
|
|
4
|
+
var $19S5E$react = require("react");
|
|
5
5
|
var $19S5E$reactariainteractions = require("@react-aria/interactions");
|
|
6
6
|
|
|
7
7
|
|
|
@@ -23,23 +23,23 @@ function $715562ad3b4cced4$export$4a931266a3838b86(state, ref, disableArrowNavig
|
|
|
23
23
|
// Open the popover on alt + arrow down
|
|
24
24
|
let onKeyDown = (e)=>{
|
|
25
25
|
if (!e.currentTarget.contains(e.target)) return;
|
|
26
|
-
if (e.altKey && (e.key ===
|
|
26
|
+
if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp') && 'setOpen' in state) {
|
|
27
27
|
e.preventDefault();
|
|
28
28
|
e.stopPropagation();
|
|
29
29
|
state.setOpen(true);
|
|
30
30
|
}
|
|
31
31
|
if (disableArrowNavigation) return;
|
|
32
32
|
switch(e.key){
|
|
33
|
-
case
|
|
33
|
+
case 'ArrowLeft':
|
|
34
34
|
e.preventDefault();
|
|
35
35
|
e.stopPropagation();
|
|
36
|
-
if (direction ===
|
|
36
|
+
if (direction === 'rtl') focusManager.focusNext();
|
|
37
37
|
else focusManager.focusPrevious();
|
|
38
38
|
break;
|
|
39
|
-
case
|
|
39
|
+
case 'ArrowRight':
|
|
40
40
|
e.preventDefault();
|
|
41
41
|
e.stopPropagation();
|
|
42
|
-
if (direction ===
|
|
42
|
+
if (direction === 'rtl') focusManager.focusPrevious();
|
|
43
43
|
else focusManager.focusNext();
|
|
44
44
|
break;
|
|
45
45
|
}
|
|
@@ -65,9 +65,9 @@ function $715562ad3b4cced4$export$4a931266a3838b86(state, ref, disableArrowNavig
|
|
|
65
65
|
}while (last);
|
|
66
66
|
}
|
|
67
67
|
// Now go backwards until we find an element that is not a placeholder.
|
|
68
|
-
while(target === null || target === void 0 ? void 0 : target.hasAttribute(
|
|
68
|
+
while(target === null || target === void 0 ? void 0 : target.hasAttribute('data-placeholder')){
|
|
69
69
|
let prev = walker.previousNode();
|
|
70
|
-
if (prev && prev.hasAttribute(
|
|
70
|
+
if (prev && prev.hasAttribute('data-placeholder')) target = prev;
|
|
71
71
|
else break;
|
|
72
72
|
}
|
|
73
73
|
if (target) target.focus();
|
|
@@ -76,10 +76,10 @@ function $715562ad3b4cced4$export$4a931266a3838b86(state, ref, disableArrowNavig
|
|
|
76
76
|
preventFocusOnPress: true,
|
|
77
77
|
allowTextSelectionOnPress: true,
|
|
78
78
|
onPressStart (e) {
|
|
79
|
-
if (e.pointerType ===
|
|
79
|
+
if (e.pointerType === 'mouse') focusLast();
|
|
80
80
|
},
|
|
81
81
|
onPress (e) {
|
|
82
|
-
if (e.pointerType !==
|
|
82
|
+
if (e.pointerType !== 'mouse') focusLast();
|
|
83
83
|
}
|
|
84
84
|
});
|
|
85
85
|
return (0, $19S5E$reactariautils.mergeProps)(pressProps, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;AAQO,SAAS,0CAAmB,KAA8D,EAAE,
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;AAQO,SAAS,0CAAmB,KAA8D,EAAE,GAA8B,EAAE,sBAAgC;IACjK,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,8BAAQ;IAC1B,IAAI,eAAe,CAAA,GAAA,oBAAM,EAAE,IAAM,CAAA,GAAA,wCAAiB,EAAE,MAAM;QAAC;KAAI;IAE/D,uCAAuC;IACvC,IAAI,YAAY,CAAC;QACf,IAAI,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,EAAE,MAAM,GACpC;QAGF,IAAI,EAAE,MAAM,IAAK,CAAA,EAAE,GAAG,KAAK,eAAe,EAAE,GAAG,KAAK,SAAQ,KAAM,aAAa,OAAO;YACpF,EAAE,cAAc;YAChB,EAAE,eAAe;YACjB,MAAM,OAAO,CAAC;QAChB;QAEA,IAAI,wBACF;QAGF,OAAQ,EAAE,GAAG;YACX,KAAK;gBACH,EAAE,cAAc;gBAChB,EAAE,eAAe;gBACjB,IAAI,cAAc,OAChB,aAAa,SAAS;qBAEtB,aAAa,aAAa;gBAE5B;YACF,KAAK;gBACH,EAAE,cAAc;gBAChB,EAAE,eAAe;gBACjB,IAAI,cAAc,OAChB,aAAa,aAAa;qBAE1B,aAAa,SAAS;gBAExB;QACJ;IACF;IAEA,wFAAwF;IACxF,IAAI,YAAY;YAED;QADb,oEAAoE;QACpE,IAAI,UAAS,gBAAA,OAAO,KAAK,cAAZ,oCAAA,cAAc,MAAM;QACjC,IAAI,SAAS,CAAA,GAAA,4CAAqB,EAAE,IAAI,OAAO,EAAE;YAAC,UAAU;QAAI;QAChE,IAAI,QAAQ;YACV,OAAO,WAAW,GAAG;YACrB,SAAS,OAAO,YAAY;QAC9B;QAEA,0DAA0D;QAC1D,IAAI,CAAC,QAAQ;YACX,IAAI;YACJ,GAAG;gBACD,OAAO,OAAO,SAAS;gBACvB,IAAI,MACF,SAAS;YAEb,QAAS,MAAM;QACjB;QAEA,uEAAuE;QACvE,MAAO,mBAAA,6BAAA,OAAQ,YAAY,CAAC,oBAAqB;YAC/C,IAAI,OAAO,OAAO,YAAY;YAC9B,IAAI,QAAQ,KAAK,YAAY,CAAC,qBAC5B,SAAS;iBAET;QAEJ;QAEA,IAAI,QACF,OAAO,KAAK;IAEhB;IAEA,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,qCAAO,EAAE;QAC1B,qBAAqB;QACrB,2BAA2B;QAC3B,cAAa,CAAC;YACZ,IAAI,EAAE,WAAW,KAAK,SACpB;QAEJ;QACA,SAAQ,CAAC;YACP,IAAI,EAAE,WAAW,KAAK,SACpB;QAEJ;IACF;IAEA,OAAO,CAAA,GAAA,gCAAS,EAAE,YAAY;mBAAC;IAAS;AAC1C","sources":["packages/@react-aria/datepicker/src/useDatePickerGroup.ts"],"sourcesContent":["import {createFocusManager, getFocusableTreeWalker} from '@react-aria/focus';\nimport {DateFieldState, DatePickerState, DateRangePickerState} from '@react-stately/datepicker';\nimport {FocusableElement, KeyboardEvent, RefObject} from '@react-types/shared';\nimport {mergeProps} from '@react-aria/utils';\nimport {useLocale} from '@react-aria/i18n';\nimport {useMemo} from 'react';\nimport {usePress} from '@react-aria/interactions';\n\nexport function useDatePickerGroup(state: DatePickerState | DateRangePickerState | DateFieldState, ref: RefObject<Element | null>, disableArrowNavigation?: boolean) {\n let {direction} = useLocale();\n let focusManager = useMemo(() => createFocusManager(ref), [ref]);\n\n // Open the popover on alt + arrow down\n let onKeyDown = (e: KeyboardEvent) => {\n if (!e.currentTarget.contains(e.target)) {\n return;\n }\n\n if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp') && 'setOpen' in state) {\n e.preventDefault();\n e.stopPropagation();\n state.setOpen(true);\n }\n\n if (disableArrowNavigation) {\n return;\n }\n\n switch (e.key) {\n case 'ArrowLeft':\n e.preventDefault();\n e.stopPropagation();\n if (direction === 'rtl') {\n focusManager.focusNext();\n } else {\n focusManager.focusPrevious();\n }\n break;\n case 'ArrowRight':\n e.preventDefault();\n e.stopPropagation();\n if (direction === 'rtl') {\n focusManager.focusPrevious();\n } else {\n focusManager.focusNext();\n }\n break;\n }\n };\n\n // Focus the first placeholder segment from the end on mouse down/touch up in the field.\n let focusLast = () => {\n // Try to find the segment prior to the element that was clicked on.\n let target = window.event?.target as FocusableElement;\n let walker = getFocusableTreeWalker(ref.current, {tabbable: true});\n if (target) {\n walker.currentNode = target;\n target = walker.previousNode() as FocusableElement;\n }\n\n // If no target found, find the last element from the end.\n if (!target) {\n let last: FocusableElement;\n do {\n last = walker.lastChild() as FocusableElement;\n if (last) {\n target = last;\n }\n } while (last);\n }\n\n // Now go backwards until we find an element that is not a placeholder.\n while (target?.hasAttribute('data-placeholder')) {\n let prev = walker.previousNode() as FocusableElement;\n if (prev && prev.hasAttribute('data-placeholder')) {\n target = prev;\n } else {\n break;\n }\n }\n\n if (target) {\n target.focus();\n }\n };\n\n let {pressProps} = usePress({\n preventFocusOnPress: true,\n allowTextSelectionOnPress: true,\n onPressStart(e) {\n if (e.pointerType === 'mouse') {\n focusLast();\n }\n },\n onPress(e) {\n if (e.pointerType !== 'mouse') {\n focusLast();\n }\n }\n });\n\n return mergeProps(pressProps, {onKeyDown});\n}\n"],"names":[],"version":3,"file":"useDatePickerGroup.main.js.map"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import {createFocusManager as $7CEvq$createFocusManager, getFocusableTreeWalker as $7CEvq$getFocusableTreeWalker} from "@react-aria/focus";
|
|
2
2
|
import {mergeProps as $7CEvq$mergeProps} from "@react-aria/utils";
|
|
3
|
-
import {useMemo as $7CEvq$useMemo} from "react";
|
|
4
3
|
import {useLocale as $7CEvq$useLocale} from "@react-aria/i18n";
|
|
4
|
+
import {useMemo as $7CEvq$useMemo} from "react";
|
|
5
5
|
import {usePress as $7CEvq$usePress} from "@react-aria/interactions";
|
|
6
6
|
|
|
7
7
|
|
|
@@ -17,23 +17,23 @@ function $3dfb0f96be0d6a08$export$4a931266a3838b86(state, ref, disableArrowNavig
|
|
|
17
17
|
// Open the popover on alt + arrow down
|
|
18
18
|
let onKeyDown = (e)=>{
|
|
19
19
|
if (!e.currentTarget.contains(e.target)) return;
|
|
20
|
-
if (e.altKey && (e.key ===
|
|
20
|
+
if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp') && 'setOpen' in state) {
|
|
21
21
|
e.preventDefault();
|
|
22
22
|
e.stopPropagation();
|
|
23
23
|
state.setOpen(true);
|
|
24
24
|
}
|
|
25
25
|
if (disableArrowNavigation) return;
|
|
26
26
|
switch(e.key){
|
|
27
|
-
case
|
|
27
|
+
case 'ArrowLeft':
|
|
28
28
|
e.preventDefault();
|
|
29
29
|
e.stopPropagation();
|
|
30
|
-
if (direction ===
|
|
30
|
+
if (direction === 'rtl') focusManager.focusNext();
|
|
31
31
|
else focusManager.focusPrevious();
|
|
32
32
|
break;
|
|
33
|
-
case
|
|
33
|
+
case 'ArrowRight':
|
|
34
34
|
e.preventDefault();
|
|
35
35
|
e.stopPropagation();
|
|
36
|
-
if (direction ===
|
|
36
|
+
if (direction === 'rtl') focusManager.focusPrevious();
|
|
37
37
|
else focusManager.focusNext();
|
|
38
38
|
break;
|
|
39
39
|
}
|
|
@@ -59,9 +59,9 @@ function $3dfb0f96be0d6a08$export$4a931266a3838b86(state, ref, disableArrowNavig
|
|
|
59
59
|
}while (last);
|
|
60
60
|
}
|
|
61
61
|
// Now go backwards until we find an element that is not a placeholder.
|
|
62
|
-
while(target === null || target === void 0 ? void 0 : target.hasAttribute(
|
|
62
|
+
while(target === null || target === void 0 ? void 0 : target.hasAttribute('data-placeholder')){
|
|
63
63
|
let prev = walker.previousNode();
|
|
64
|
-
if (prev && prev.hasAttribute(
|
|
64
|
+
if (prev && prev.hasAttribute('data-placeholder')) target = prev;
|
|
65
65
|
else break;
|
|
66
66
|
}
|
|
67
67
|
if (target) target.focus();
|
|
@@ -70,10 +70,10 @@ function $3dfb0f96be0d6a08$export$4a931266a3838b86(state, ref, disableArrowNavig
|
|
|
70
70
|
preventFocusOnPress: true,
|
|
71
71
|
allowTextSelectionOnPress: true,
|
|
72
72
|
onPressStart (e) {
|
|
73
|
-
if (e.pointerType ===
|
|
73
|
+
if (e.pointerType === 'mouse') focusLast();
|
|
74
74
|
},
|
|
75
75
|
onPress (e) {
|
|
76
|
-
if (e.pointerType !==
|
|
76
|
+
if (e.pointerType !== 'mouse') focusLast();
|
|
77
77
|
}
|
|
78
78
|
});
|
|
79
79
|
return (0, $7CEvq$mergeProps)(pressProps, {
|
|
@@ -83,4 +83,4 @@ function $3dfb0f96be0d6a08$export$4a931266a3838b86(state, ref, disableArrowNavig
|
|
|
83
83
|
|
|
84
84
|
|
|
85
85
|
export {$3dfb0f96be0d6a08$export$4a931266a3838b86 as useDatePickerGroup};
|
|
86
|
-
//# sourceMappingURL=useDatePickerGroup.
|
|
86
|
+
//# sourceMappingURL=useDatePickerGroup.module.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import {createFocusManager as $7CEvq$createFocusManager, getFocusableTreeWalker as $7CEvq$getFocusableTreeWalker} from "@react-aria/focus";
|
|
2
2
|
import {mergeProps as $7CEvq$mergeProps} from "@react-aria/utils";
|
|
3
|
-
import {useMemo as $7CEvq$useMemo} from "react";
|
|
4
3
|
import {useLocale as $7CEvq$useLocale} from "@react-aria/i18n";
|
|
4
|
+
import {useMemo as $7CEvq$useMemo} from "react";
|
|
5
5
|
import {usePress as $7CEvq$usePress} from "@react-aria/interactions";
|
|
6
6
|
|
|
7
7
|
|
|
@@ -17,23 +17,23 @@ function $3dfb0f96be0d6a08$export$4a931266a3838b86(state, ref, disableArrowNavig
|
|
|
17
17
|
// Open the popover on alt + arrow down
|
|
18
18
|
let onKeyDown = (e)=>{
|
|
19
19
|
if (!e.currentTarget.contains(e.target)) return;
|
|
20
|
-
if (e.altKey && (e.key ===
|
|
20
|
+
if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp') && 'setOpen' in state) {
|
|
21
21
|
e.preventDefault();
|
|
22
22
|
e.stopPropagation();
|
|
23
23
|
state.setOpen(true);
|
|
24
24
|
}
|
|
25
25
|
if (disableArrowNavigation) return;
|
|
26
26
|
switch(e.key){
|
|
27
|
-
case
|
|
27
|
+
case 'ArrowLeft':
|
|
28
28
|
e.preventDefault();
|
|
29
29
|
e.stopPropagation();
|
|
30
|
-
if (direction ===
|
|
30
|
+
if (direction === 'rtl') focusManager.focusNext();
|
|
31
31
|
else focusManager.focusPrevious();
|
|
32
32
|
break;
|
|
33
|
-
case
|
|
33
|
+
case 'ArrowRight':
|
|
34
34
|
e.preventDefault();
|
|
35
35
|
e.stopPropagation();
|
|
36
|
-
if (direction ===
|
|
36
|
+
if (direction === 'rtl') focusManager.focusPrevious();
|
|
37
37
|
else focusManager.focusNext();
|
|
38
38
|
break;
|
|
39
39
|
}
|
|
@@ -59,9 +59,9 @@ function $3dfb0f96be0d6a08$export$4a931266a3838b86(state, ref, disableArrowNavig
|
|
|
59
59
|
}while (last);
|
|
60
60
|
}
|
|
61
61
|
// Now go backwards until we find an element that is not a placeholder.
|
|
62
|
-
while(target === null || target === void 0 ? void 0 : target.hasAttribute(
|
|
62
|
+
while(target === null || target === void 0 ? void 0 : target.hasAttribute('data-placeholder')){
|
|
63
63
|
let prev = walker.previousNode();
|
|
64
|
-
if (prev && prev.hasAttribute(
|
|
64
|
+
if (prev && prev.hasAttribute('data-placeholder')) target = prev;
|
|
65
65
|
else break;
|
|
66
66
|
}
|
|
67
67
|
if (target) target.focus();
|
|
@@ -70,10 +70,10 @@ function $3dfb0f96be0d6a08$export$4a931266a3838b86(state, ref, disableArrowNavig
|
|
|
70
70
|
preventFocusOnPress: true,
|
|
71
71
|
allowTextSelectionOnPress: true,
|
|
72
72
|
onPressStart (e) {
|
|
73
|
-
if (e.pointerType ===
|
|
73
|
+
if (e.pointerType === 'mouse') focusLast();
|
|
74
74
|
},
|
|
75
75
|
onPress (e) {
|
|
76
|
-
if (e.pointerType !==
|
|
76
|
+
if (e.pointerType !== 'mouse') focusLast();
|
|
77
77
|
}
|
|
78
78
|
});
|
|
79
79
|
return (0, $7CEvq$mergeProps)(pressProps, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;AAQO,SAAS,0CAAmB,KAA8D,EAAE,
|
|
1
|
+
{"mappings":";;;;;;;;;;;AAQO,SAAS,0CAAmB,KAA8D,EAAE,GAA8B,EAAE,sBAAgC;IACjK,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAC1B,IAAI,eAAe,CAAA,GAAA,cAAM,EAAE,IAAM,CAAA,GAAA,yBAAiB,EAAE,MAAM;QAAC;KAAI;IAE/D,uCAAuC;IACvC,IAAI,YAAY,CAAC;QACf,IAAI,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,EAAE,MAAM,GACpC;QAGF,IAAI,EAAE,MAAM,IAAK,CAAA,EAAE,GAAG,KAAK,eAAe,EAAE,GAAG,KAAK,SAAQ,KAAM,aAAa,OAAO;YACpF,EAAE,cAAc;YAChB,EAAE,eAAe;YACjB,MAAM,OAAO,CAAC;QAChB;QAEA,IAAI,wBACF;QAGF,OAAQ,EAAE,GAAG;YACX,KAAK;gBACH,EAAE,cAAc;gBAChB,EAAE,eAAe;gBACjB,IAAI,cAAc,OAChB,aAAa,SAAS;qBAEtB,aAAa,aAAa;gBAE5B;YACF,KAAK;gBACH,EAAE,cAAc;gBAChB,EAAE,eAAe;gBACjB,IAAI,cAAc,OAChB,aAAa,aAAa;qBAE1B,aAAa,SAAS;gBAExB;QACJ;IACF;IAEA,wFAAwF;IACxF,IAAI,YAAY;YAED;QADb,oEAAoE;QACpE,IAAI,UAAS,gBAAA,OAAO,KAAK,cAAZ,oCAAA,cAAc,MAAM;QACjC,IAAI,SAAS,CAAA,GAAA,6BAAqB,EAAE,IAAI,OAAO,EAAE;YAAC,UAAU;QAAI;QAChE,IAAI,QAAQ;YACV,OAAO,WAAW,GAAG;YACrB,SAAS,OAAO,YAAY;QAC9B;QAEA,0DAA0D;QAC1D,IAAI,CAAC,QAAQ;YACX,IAAI;YACJ,GAAG;gBACD,OAAO,OAAO,SAAS;gBACvB,IAAI,MACF,SAAS;YAEb,QAAS,MAAM;QACjB;QAEA,uEAAuE;QACvE,MAAO,mBAAA,6BAAA,OAAQ,YAAY,CAAC,oBAAqB;YAC/C,IAAI,OAAO,OAAO,YAAY;YAC9B,IAAI,QAAQ,KAAK,YAAY,CAAC,qBAC5B,SAAS;iBAET;QAEJ;QAEA,IAAI,QACF,OAAO,KAAK;IAEhB;IAEA,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,eAAO,EAAE;QAC1B,qBAAqB;QACrB,2BAA2B;QAC3B,cAAa,CAAC;YACZ,IAAI,EAAE,WAAW,KAAK,SACpB;QAEJ;QACA,SAAQ,CAAC;YACP,IAAI,EAAE,WAAW,KAAK,SACpB;QAEJ;IACF;IAEA,OAAO,CAAA,GAAA,iBAAS,EAAE,YAAY;mBAAC;IAAS;AAC1C","sources":["packages/@react-aria/datepicker/src/useDatePickerGroup.ts"],"sourcesContent":["import {createFocusManager, getFocusableTreeWalker} from '@react-aria/focus';\nimport {DateFieldState, DatePickerState, DateRangePickerState} from '@react-stately/datepicker';\nimport {FocusableElement, KeyboardEvent, RefObject} from '@react-types/shared';\nimport {mergeProps} from '@react-aria/utils';\nimport {useLocale} from '@react-aria/i18n';\nimport {useMemo} from 'react';\nimport {usePress} from '@react-aria/interactions';\n\nexport function useDatePickerGroup(state: DatePickerState | DateRangePickerState | DateFieldState, ref: RefObject<Element | null>, disableArrowNavigation?: boolean) {\n let {direction} = useLocale();\n let focusManager = useMemo(() => createFocusManager(ref), [ref]);\n\n // Open the popover on alt + arrow down\n let onKeyDown = (e: KeyboardEvent) => {\n if (!e.currentTarget.contains(e.target)) {\n return;\n }\n\n if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp') && 'setOpen' in state) {\n e.preventDefault();\n e.stopPropagation();\n state.setOpen(true);\n }\n\n if (disableArrowNavigation) {\n return;\n }\n\n switch (e.key) {\n case 'ArrowLeft':\n e.preventDefault();\n e.stopPropagation();\n if (direction === 'rtl') {\n focusManager.focusNext();\n } else {\n focusManager.focusPrevious();\n }\n break;\n case 'ArrowRight':\n e.preventDefault();\n e.stopPropagation();\n if (direction === 'rtl') {\n focusManager.focusPrevious();\n } else {\n focusManager.focusNext();\n }\n break;\n }\n };\n\n // Focus the first placeholder segment from the end on mouse down/touch up in the field.\n let focusLast = () => {\n // Try to find the segment prior to the element that was clicked on.\n let target = window.event?.target as FocusableElement;\n let walker = getFocusableTreeWalker(ref.current, {tabbable: true});\n if (target) {\n walker.currentNode = target;\n target = walker.previousNode() as FocusableElement;\n }\n\n // If no target found, find the last element from the end.\n if (!target) {\n let last: FocusableElement;\n do {\n last = walker.lastChild() as FocusableElement;\n if (last) {\n target = last;\n }\n } while (last);\n }\n\n // Now go backwards until we find an element that is not a placeholder.\n while (target?.hasAttribute('data-placeholder')) {\n let prev = walker.previousNode() as FocusableElement;\n if (prev && prev.hasAttribute('data-placeholder')) {\n target = prev;\n } else {\n break;\n }\n }\n\n if (target) {\n target.focus();\n }\n };\n\n let {pressProps} = usePress({\n preventFocusOnPress: true,\n allowTextSelectionOnPress: true,\n onPressStart(e) {\n if (e.pointerType === 'mouse') {\n focusLast();\n }\n },\n onPress(e) {\n if (e.pointerType !== 'mouse') {\n focusLast();\n }\n }\n });\n\n return mergeProps(pressProps, {onKeyDown});\n}\n"],"names":[],"version":3,"file":"useDatePickerGroup.module.js.map"}
|
|
@@ -4,10 +4,10 @@ var $715562ad3b4cced4$exports = require("./useDatePickerGroup.main.js");
|
|
|
4
4
|
var $Xt1Bd$reactariafocus = require("@react-aria/focus");
|
|
5
5
|
var $Xt1Bd$reactstatelyform = require("@react-stately/form");
|
|
6
6
|
var $Xt1Bd$reactariautils = require("@react-aria/utils");
|
|
7
|
-
var $Xt1Bd$react = require("react");
|
|
8
7
|
var $Xt1Bd$reactarialabel = require("@react-aria/label");
|
|
9
8
|
var $Xt1Bd$reactariainteractions = require("@react-aria/interactions");
|
|
10
9
|
var $Xt1Bd$reactariai18n = require("@react-aria/i18n");
|
|
10
|
+
var $Xt1Bd$react = require("react");
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
function $parcel$interopDefault(a) {
|
|
@@ -41,39 +41,39 @@ $parcel$export(module.exports, "useDateRangePicker", () => $20f695b1b69e6b9e$exp
|
|
|
41
41
|
|
|
42
42
|
function $20f695b1b69e6b9e$export$12fd5f0e9f4bb192(props, state, ref) {
|
|
43
43
|
var _state_value, _state_value1;
|
|
44
|
-
let stringFormatter = (0, $Xt1Bd$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($c1905b78f6d2f5bf$exports))),
|
|
44
|
+
let stringFormatter = (0, $Xt1Bd$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($c1905b78f6d2f5bf$exports))), '@react-aria/datepicker');
|
|
45
45
|
let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = state.displayValidation;
|
|
46
46
|
let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $Xt1Bd$reactarialabel.useField)({
|
|
47
47
|
...props,
|
|
48
|
-
labelElementType:
|
|
48
|
+
labelElementType: 'span',
|
|
49
49
|
isInvalid: isInvalid,
|
|
50
50
|
errorMessage: props.errorMessage || validationErrors
|
|
51
51
|
});
|
|
52
|
-
let labelledBy = fieldProps[
|
|
52
|
+
let labelledBy = fieldProps['aria-labelledby'] || fieldProps.id;
|
|
53
53
|
let { locale: locale } = (0, $Xt1Bd$reactariai18n.useLocale)();
|
|
54
54
|
let range = state.formatValue(locale, {
|
|
55
|
-
month:
|
|
55
|
+
month: 'long'
|
|
56
56
|
});
|
|
57
|
-
let description = range ? stringFormatter.format(
|
|
57
|
+
let description = range ? stringFormatter.format('selectedRangeDescription', {
|
|
58
58
|
startDate: range.start,
|
|
59
59
|
endDate: range.end
|
|
60
|
-
}) :
|
|
60
|
+
}) : '';
|
|
61
61
|
let descProps = (0, $Xt1Bd$reactariautils.useDescription)(description);
|
|
62
62
|
let startFieldProps = {
|
|
63
|
-
|
|
64
|
-
|
|
63
|
+
'aria-label': stringFormatter.format('startDate'),
|
|
64
|
+
'aria-labelledby': labelledBy
|
|
65
65
|
};
|
|
66
66
|
let endFieldProps = {
|
|
67
|
-
|
|
68
|
-
|
|
67
|
+
'aria-label': stringFormatter.format('endDate'),
|
|
68
|
+
'aria-labelledby': labelledBy
|
|
69
69
|
};
|
|
70
70
|
let buttonId = (0, $Xt1Bd$reactariautils.useId)();
|
|
71
71
|
let dialogId = (0, $Xt1Bd$reactariautils.useId)();
|
|
72
72
|
let groupProps = (0, $715562ad3b4cced4$exports.useDatePickerGroup)(state, ref);
|
|
73
73
|
let ariaDescribedBy = [
|
|
74
|
-
descProps[
|
|
75
|
-
fieldProps[
|
|
76
|
-
].filter(Boolean).join(
|
|
74
|
+
descProps['aria-describedby'],
|
|
75
|
+
fieldProps['aria-describedby']
|
|
76
|
+
].filter(Boolean).join(' ') || undefined;
|
|
77
77
|
let focusManager = (0, $Xt1Bd$react.useMemo)(()=>(0, $Xt1Bd$reactariafocus.createFocusManager)(ref, {
|
|
78
78
|
// Exclude the button from the focus manager.
|
|
79
79
|
accept: (element)=>element.id !== buttonId
|
|
@@ -83,8 +83,8 @@ function $20f695b1b69e6b9e$export$12fd5f0e9f4bb192(props, state, ref) {
|
|
|
83
83
|
]);
|
|
84
84
|
let commonFieldProps = {
|
|
85
85
|
[(0, $4acc2f407c169e55$exports.focusManagerSymbol)]: focusManager,
|
|
86
|
-
[(0, $4acc2f407c169e55$exports.roleSymbol)]:
|
|
87
|
-
|
|
86
|
+
[(0, $4acc2f407c169e55$exports.roleSymbol)]: 'presentation',
|
|
87
|
+
'aria-describedby': ariaDescribedBy,
|
|
88
88
|
placeholderValue: props.placeholderValue,
|
|
89
89
|
hideTimeZone: props.hideTimeZone,
|
|
90
90
|
hourCycle: props.hourCycle,
|
|
@@ -107,9 +107,9 @@ function $20f695b1b69e6b9e$export$12fd5f0e9f4bb192(props, state, ref) {
|
|
|
107
107
|
let endFieldValidation = (0, $Xt1Bd$react.useRef)((0, $Xt1Bd$reactstatelyform.DEFAULT_VALIDATION_RESULT));
|
|
108
108
|
return {
|
|
109
109
|
groupProps: (0, $Xt1Bd$reactariautils.mergeProps)(domProps, groupProps, fieldProps, descProps, focusWithinProps, {
|
|
110
|
-
role:
|
|
111
|
-
|
|
112
|
-
|
|
110
|
+
role: 'group',
|
|
111
|
+
'aria-disabled': props.isDisabled || null,
|
|
112
|
+
'aria-describedby': ariaDescribedBy,
|
|
113
113
|
onKeyDown (e) {
|
|
114
114
|
if (state.isOpen) return;
|
|
115
115
|
if (props.onKeyDown) props.onKeyDown(e);
|
|
@@ -128,23 +128,23 @@ function $20f695b1b69e6b9e$export$12fd5f0e9f4bb192(props, state, ref) {
|
|
|
128
128
|
buttonProps: {
|
|
129
129
|
...descProps,
|
|
130
130
|
id: buttonId,
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
131
|
+
'aria-haspopup': 'dialog',
|
|
132
|
+
'aria-label': stringFormatter.format('calendar'),
|
|
133
|
+
'aria-labelledby': `${buttonId} ${labelledBy}`,
|
|
134
|
+
'aria-describedby': ariaDescribedBy,
|
|
135
|
+
'aria-expanded': state.isOpen,
|
|
136
136
|
isDisabled: props.isDisabled || props.isReadOnly,
|
|
137
137
|
onPress: ()=>state.setOpen(true)
|
|
138
138
|
},
|
|
139
139
|
dialogProps: {
|
|
140
140
|
id: dialogId,
|
|
141
|
-
|
|
141
|
+
'aria-labelledby': `${buttonId} ${labelledBy}`
|
|
142
142
|
},
|
|
143
143
|
startFieldProps: {
|
|
144
144
|
...startFieldProps,
|
|
145
145
|
...commonFieldProps,
|
|
146
146
|
value: (_state_value = state.value) === null || _state_value === void 0 ? void 0 : _state_value.start,
|
|
147
|
-
onChange: (start)=>state.setDateTime(
|
|
147
|
+
onChange: (start)=>state.setDateTime('start', start),
|
|
148
148
|
autoFocus: props.autoFocus,
|
|
149
149
|
name: props.startName,
|
|
150
150
|
[(0, $Xt1Bd$reactstatelyform.privateValidationStateProp)]: {
|
|
@@ -162,7 +162,7 @@ function $20f695b1b69e6b9e$export$12fd5f0e9f4bb192(props, state, ref) {
|
|
|
162
162
|
...endFieldProps,
|
|
163
163
|
...commonFieldProps,
|
|
164
164
|
value: (_state_value1 = state.value) === null || _state_value1 === void 0 ? void 0 : _state_value1.end,
|
|
165
|
-
onChange: (end)=>state.setDateTime(
|
|
165
|
+
onChange: (end)=>state.setDateTime('end', end),
|
|
166
166
|
name: props.endName,
|
|
167
167
|
[(0, $Xt1Bd$reactstatelyform.privateValidationStateProp)]: {
|
|
168
168
|
realtimeValidation: state.realtimeValidation,
|
|
@@ -189,7 +189,7 @@ function $20f695b1b69e6b9e$export$12fd5f0e9f4bb192(props, state, ref) {
|
|
|
189
189
|
allowsNonContiguousRanges: props.allowsNonContiguousRanges,
|
|
190
190
|
defaultFocusedValue: state.dateRange ? undefined : props.placeholderValue,
|
|
191
191
|
isInvalid: state.isInvalid,
|
|
192
|
-
errorMessage: typeof props.errorMessage ===
|
|
192
|
+
errorMessage: typeof props.errorMessage === 'function' ? props.errorMessage(state.displayValidation) : props.errorMessage || state.displayValidation.validationErrors.join(' ')
|
|
193
193
|
},
|
|
194
194
|
isInvalid: isInvalid,
|
|
195
195
|
validationErrors: validationErrors,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-aria/datepicker/src/useDateRangePicker.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaButtonProps} from '@react-types/button';\nimport {AriaDatePickerProps, AriaDateRangePickerProps, DateValue} from '@react-types/datepicker';\nimport {AriaDialogProps} from '@react-types/dialog';\nimport {createFocusManager} from '@react-aria/focus';\nimport {DateRangePickerState} from '@react-stately/datepicker';\nimport {DEFAULT_VALIDATION_RESULT, mergeValidation, privateValidationStateProp} from '@react-stately/form';\nimport {DOMAttributes, GroupDOMAttributes, KeyboardEvent, ValidationResult} from '@react-types/shared';\nimport {filterDOMProps, mergeProps, useDescription, useId} from '@react-aria/utils';\nimport {focusManagerSymbol, roleSymbol} from './useDateField';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {RangeCalendarProps} from '@react-types/calendar';\nimport {RefObject, useMemo, useRef} from 'react';\nimport {useDatePickerGroup} from './useDatePickerGroup';\nimport {useField} from '@react-aria/label';\nimport {useFocusWithin} from '@react-aria/interactions';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\n\nexport interface DateRangePickerAria extends ValidationResult {\n /** Props for the date range picker's visible label element, if any. */\n labelProps: DOMAttributes,\n /** Props for the grouping element containing the date fields and button. */\n groupProps: GroupDOMAttributes,\n /** Props for the start date field. */\n startFieldProps: AriaDatePickerProps<DateValue>,\n /** Props for the end date field. */\n endFieldProps: AriaDatePickerProps<DateValue>,\n /** Props for the popover trigger button. */\n buttonProps: AriaButtonProps,\n /** Props for the description element, if any. */\n descriptionProps: DOMAttributes,\n /** Props for the error message element, if any. */\n errorMessageProps: DOMAttributes,\n /** Props for the popover dialog. */\n dialogProps: AriaDialogProps,\n /** Props for the range calendar within the popover dialog. */\n calendarProps: RangeCalendarProps<DateValue>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a date picker component.\n * A date range picker combines two DateFields and a RangeCalendar popover to allow\n * users to enter or select a date and time range.\n */\nexport function useDateRangePicker<T extends DateValue>(props: AriaDateRangePickerProps<T>, state: DateRangePickerState, ref: RefObject<Element>): DateRangePickerAria {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/datepicker');\n let {isInvalid, validationErrors, validationDetails} = state.displayValidation;\n let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({\n ...props,\n labelElementType: 'span',\n isInvalid,\n errorMessage: props.errorMessage || validationErrors\n });\n\n let labelledBy = fieldProps['aria-labelledby'] || fieldProps.id;\n\n let {locale} = useLocale();\n let range = state.formatValue(locale, {month: 'long'});\n let description = range ? stringFormatter.format('selectedRangeDescription', {startDate: range.start, endDate: range.end}) : '';\n let descProps = useDescription(description);\n\n let startFieldProps = {\n 'aria-label': stringFormatter.format('startDate'),\n 'aria-labelledby': labelledBy\n };\n\n let endFieldProps = {\n 'aria-label': stringFormatter.format('endDate'),\n 'aria-labelledby': labelledBy\n };\n\n let buttonId = useId();\n let dialogId = useId();\n\n let groupProps = useDatePickerGroup(state, ref);\n\n let ariaDescribedBy = [descProps['aria-describedby'], fieldProps['aria-describedby']].filter(Boolean).join(' ') || undefined;\n let focusManager = useMemo(() => createFocusManager(ref, {\n // Exclude the button from the focus manager.\n accept: element => element.id !== buttonId\n }), [ref, buttonId]);\n\n let commonFieldProps = {\n [focusManagerSymbol]: focusManager,\n [roleSymbol]: 'presentation',\n 'aria-describedby': ariaDescribedBy,\n placeholderValue: props.placeholderValue,\n hideTimeZone: props.hideTimeZone,\n hourCycle: props.hourCycle,\n granularity: props.granularity,\n shouldForceLeadingZeros: props.shouldForceLeadingZeros,\n isDisabled: props.isDisabled,\n isReadOnly: props.isReadOnly,\n isRequired: props.isRequired,\n validationBehavior: props.validationBehavior\n };\n\n let domProps = filterDOMProps(props);\n\n let {focusWithinProps} = useFocusWithin({\n ...props,\n isDisabled: state.isOpen,\n onBlurWithin: props.onBlur,\n onFocusWithin: props.onFocus,\n onFocusWithinChange: props.onFocusChange\n });\n\n let startFieldValidation = useRef(DEFAULT_VALIDATION_RESULT);\n let endFieldValidation = useRef(DEFAULT_VALIDATION_RESULT);\n\n return {\n groupProps: mergeProps(domProps, groupProps, fieldProps, descProps, focusWithinProps, {\n role: 'group' as const,\n 'aria-disabled': props.isDisabled || null,\n 'aria-describedby': ariaDescribedBy,\n onKeyDown(e: KeyboardEvent) {\n if (state.isOpen) {\n return;\n }\n\n if (props.onKeyDown) {\n props.onKeyDown(e);\n }\n },\n onKeyUp(e: KeyboardEvent) {\n if (state.isOpen) {\n return;\n }\n\n if (props.onKeyUp) {\n props.onKeyUp(e);\n }\n }\n }),\n labelProps: {\n ...labelProps,\n onClick: () => {\n focusManager.focusFirst();\n }\n },\n buttonProps: {\n ...descProps,\n id: buttonId,\n 'aria-haspopup': 'dialog',\n 'aria-label': stringFormatter.format('calendar'),\n 'aria-labelledby': `${buttonId} ${labelledBy}`,\n 'aria-describedby': ariaDescribedBy,\n 'aria-expanded': state.isOpen,\n isDisabled: props.isDisabled || props.isReadOnly,\n onPress: () => state.setOpen(true)\n },\n dialogProps: {\n id: dialogId,\n 'aria-labelledby': `${buttonId} ${labelledBy}`\n },\n startFieldProps: {\n ...startFieldProps,\n ...commonFieldProps,\n value: state.value?.start,\n onChange: start => state.setDateTime('start', start),\n autoFocus: props.autoFocus,\n name: props.startName,\n [privateValidationStateProp]: {\n realtimeValidation: state.realtimeValidation,\n displayValidation: state.displayValidation,\n updateValidation(e) {\n startFieldValidation.current = e;\n state.updateValidation(mergeValidation(e, endFieldValidation.current));\n },\n resetValidation: state.resetValidation,\n commitValidation: state.commitValidation\n }\n },\n endFieldProps: {\n ...endFieldProps,\n ...commonFieldProps,\n value: state.value?.end,\n onChange: end => state.setDateTime('end', end),\n name: props.endName,\n [privateValidationStateProp]: {\n realtimeValidation: state.realtimeValidation,\n displayValidation: state.displayValidation,\n updateValidation(e) {\n endFieldValidation.current = e;\n state.updateValidation(mergeValidation(startFieldValidation.current, e));\n },\n resetValidation: state.resetValidation,\n commitValidation: state.commitValidation\n }\n },\n descriptionProps,\n errorMessageProps,\n calendarProps: {\n autoFocus: true,\n value: state.dateRange,\n onChange: state.setDateRange,\n minValue: props.minValue,\n maxValue: props.maxValue,\n isDisabled: props.isDisabled,\n isReadOnly: props.isReadOnly,\n isDateUnavailable: props.isDateUnavailable,\n allowsNonContiguousRanges: props.allowsNonContiguousRanges,\n defaultFocusedValue: state.dateRange ? undefined : props.placeholderValue,\n isInvalid: state.isInvalid,\n errorMessage: typeof props.errorMessage === 'function' ? props.errorMessage(state.displayValidation) : (props.errorMessage || state.displayValidation.validationErrors.join(' '))\n },\n isInvalid,\n validationErrors,\n validationDetails\n };\n}\n"],"names":[],"version":3,"file":"useDateRangePicker.main.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-aria/datepicker/src/useDateRangePicker.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaButtonProps} from '@react-types/button';\nimport {AriaDatePickerProps, AriaDateRangePickerProps, DateValue} from '@react-types/datepicker';\nimport {AriaDialogProps} from '@react-types/dialog';\nimport {createFocusManager} from '@react-aria/focus';\nimport {DateRangePickerState} from '@react-stately/datepicker';\nimport {DEFAULT_VALIDATION_RESULT, mergeValidation, privateValidationStateProp} from '@react-stately/form';\nimport {DOMAttributes, GroupDOMAttributes, KeyboardEvent, RefObject, ValidationResult} from '@react-types/shared';\nimport {filterDOMProps, mergeProps, useDescription, useId} from '@react-aria/utils';\nimport {focusManagerSymbol, roleSymbol} from './useDateField';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {RangeCalendarProps} from '@react-types/calendar';\nimport {useDatePickerGroup} from './useDatePickerGroup';\nimport {useField} from '@react-aria/label';\nimport {useFocusWithin} from '@react-aria/interactions';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useMemo, useRef} from 'react';\n\nexport interface DateRangePickerAria extends ValidationResult {\n /** Props for the date range picker's visible label element, if any. */\n labelProps: DOMAttributes,\n /** Props for the grouping element containing the date fields and button. */\n groupProps: GroupDOMAttributes,\n /** Props for the start date field. */\n startFieldProps: AriaDatePickerProps<DateValue>,\n /** Props for the end date field. */\n endFieldProps: AriaDatePickerProps<DateValue>,\n /** Props for the popover trigger button. */\n buttonProps: AriaButtonProps,\n /** Props for the description element, if any. */\n descriptionProps: DOMAttributes,\n /** Props for the error message element, if any. */\n errorMessageProps: DOMAttributes,\n /** Props for the popover dialog. */\n dialogProps: AriaDialogProps,\n /** Props for the range calendar within the popover dialog. */\n calendarProps: RangeCalendarProps<DateValue>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a date picker component.\n * A date range picker combines two DateFields and a RangeCalendar popover to allow\n * users to enter or select a date and time range.\n */\nexport function useDateRangePicker<T extends DateValue>(props: AriaDateRangePickerProps<T>, state: DateRangePickerState, ref: RefObject<Element | null>): DateRangePickerAria {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/datepicker');\n let {isInvalid, validationErrors, validationDetails} = state.displayValidation;\n let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({\n ...props,\n labelElementType: 'span',\n isInvalid,\n errorMessage: props.errorMessage || validationErrors\n });\n\n let labelledBy = fieldProps['aria-labelledby'] || fieldProps.id;\n\n let {locale} = useLocale();\n let range = state.formatValue(locale, {month: 'long'});\n let description = range ? stringFormatter.format('selectedRangeDescription', {startDate: range.start, endDate: range.end}) : '';\n let descProps = useDescription(description);\n\n let startFieldProps = {\n 'aria-label': stringFormatter.format('startDate'),\n 'aria-labelledby': labelledBy\n };\n\n let endFieldProps = {\n 'aria-label': stringFormatter.format('endDate'),\n 'aria-labelledby': labelledBy\n };\n\n let buttonId = useId();\n let dialogId = useId();\n\n let groupProps = useDatePickerGroup(state, ref);\n\n let ariaDescribedBy = [descProps['aria-describedby'], fieldProps['aria-describedby']].filter(Boolean).join(' ') || undefined;\n let focusManager = useMemo(() => createFocusManager(ref, {\n // Exclude the button from the focus manager.\n accept: element => element.id !== buttonId\n }), [ref, buttonId]);\n\n let commonFieldProps = {\n [focusManagerSymbol]: focusManager,\n [roleSymbol]: 'presentation',\n 'aria-describedby': ariaDescribedBy,\n placeholderValue: props.placeholderValue,\n hideTimeZone: props.hideTimeZone,\n hourCycle: props.hourCycle,\n granularity: props.granularity,\n shouldForceLeadingZeros: props.shouldForceLeadingZeros,\n isDisabled: props.isDisabled,\n isReadOnly: props.isReadOnly,\n isRequired: props.isRequired,\n validationBehavior: props.validationBehavior\n };\n\n let domProps = filterDOMProps(props);\n\n let {focusWithinProps} = useFocusWithin({\n ...props,\n isDisabled: state.isOpen,\n onBlurWithin: props.onBlur,\n onFocusWithin: props.onFocus,\n onFocusWithinChange: props.onFocusChange\n });\n\n let startFieldValidation = useRef(DEFAULT_VALIDATION_RESULT);\n let endFieldValidation = useRef(DEFAULT_VALIDATION_RESULT);\n\n return {\n groupProps: mergeProps(domProps, groupProps, fieldProps, descProps, focusWithinProps, {\n role: 'group' as const,\n 'aria-disabled': props.isDisabled || null,\n 'aria-describedby': ariaDescribedBy,\n onKeyDown(e: KeyboardEvent) {\n if (state.isOpen) {\n return;\n }\n\n if (props.onKeyDown) {\n props.onKeyDown(e);\n }\n },\n onKeyUp(e: KeyboardEvent) {\n if (state.isOpen) {\n return;\n }\n\n if (props.onKeyUp) {\n props.onKeyUp(e);\n }\n }\n }),\n labelProps: {\n ...labelProps,\n onClick: () => {\n focusManager.focusFirst();\n }\n },\n buttonProps: {\n ...descProps,\n id: buttonId,\n 'aria-haspopup': 'dialog',\n 'aria-label': stringFormatter.format('calendar'),\n 'aria-labelledby': `${buttonId} ${labelledBy}`,\n 'aria-describedby': ariaDescribedBy,\n 'aria-expanded': state.isOpen,\n isDisabled: props.isDisabled || props.isReadOnly,\n onPress: () => state.setOpen(true)\n },\n dialogProps: {\n id: dialogId,\n 'aria-labelledby': `${buttonId} ${labelledBy}`\n },\n startFieldProps: {\n ...startFieldProps,\n ...commonFieldProps,\n value: state.value?.start,\n onChange: start => state.setDateTime('start', start),\n autoFocus: props.autoFocus,\n name: props.startName,\n [privateValidationStateProp]: {\n realtimeValidation: state.realtimeValidation,\n displayValidation: state.displayValidation,\n updateValidation(e) {\n startFieldValidation.current = e;\n state.updateValidation(mergeValidation(e, endFieldValidation.current));\n },\n resetValidation: state.resetValidation,\n commitValidation: state.commitValidation\n }\n },\n endFieldProps: {\n ...endFieldProps,\n ...commonFieldProps,\n value: state.value?.end,\n onChange: end => state.setDateTime('end', end),\n name: props.endName,\n [privateValidationStateProp]: {\n realtimeValidation: state.realtimeValidation,\n displayValidation: state.displayValidation,\n updateValidation(e) {\n endFieldValidation.current = e;\n state.updateValidation(mergeValidation(startFieldValidation.current, e));\n },\n resetValidation: state.resetValidation,\n commitValidation: state.commitValidation\n }\n },\n descriptionProps,\n errorMessageProps,\n calendarProps: {\n autoFocus: true,\n value: state.dateRange,\n onChange: state.setDateRange,\n minValue: props.minValue,\n maxValue: props.maxValue,\n isDisabled: props.isDisabled,\n isReadOnly: props.isReadOnly,\n isDateUnavailable: props.isDateUnavailable,\n allowsNonContiguousRanges: props.allowsNonContiguousRanges,\n defaultFocusedValue: state.dateRange ? undefined : props.placeholderValue,\n isInvalid: state.isInvalid,\n errorMessage: typeof props.errorMessage === 'function' ? props.errorMessage(state.displayValidation) : (props.errorMessage || state.displayValidation.validationErrors.join(' '))\n },\n isInvalid,\n validationErrors,\n validationDetails\n };\n}\n"],"names":[],"version":3,"file":"useDateRangePicker.main.js.map"}
|