@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 $eIQ1H$createFocusManager} from "@react-aria/focus";
|
|
5
5
|
import {DEFAULT_VALIDATION_RESULT as $eIQ1H$DEFAULT_VALIDATION_RESULT, privateValidationStateProp as $eIQ1H$privateValidationStateProp, mergeValidation as $eIQ1H$mergeValidation} from "@react-stately/form";
|
|
6
6
|
import {useDescription as $eIQ1H$useDescription, useId as $eIQ1H$useId, filterDOMProps as $eIQ1H$filterDOMProps, mergeProps as $eIQ1H$mergeProps} from "@react-aria/utils";
|
|
7
|
-
import {useMemo as $eIQ1H$useMemo, useRef as $eIQ1H$useRef} from "react";
|
|
8
7
|
import {useField as $eIQ1H$useField} from "@react-aria/label";
|
|
9
8
|
import {useFocusWithin as $eIQ1H$useFocusWithin} from "@react-aria/interactions";
|
|
10
9
|
import {useLocalizedStringFormatter as $eIQ1H$useLocalizedStringFormatter, useLocale as $eIQ1H$useLocale} from "@react-aria/i18n";
|
|
10
|
+
import {useMemo as $eIQ1H$useMemo, useRef as $eIQ1H$useRef} from "react";
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
function $parcel$interopDefault(a) {
|
|
@@ -35,39 +35,39 @@ function $parcel$interopDefault(a) {
|
|
|
35
35
|
|
|
36
36
|
function $887cac91b7cc8801$export$12fd5f0e9f4bb192(props, state, ref) {
|
|
37
37
|
var _state_value, _state_value1;
|
|
38
|
-
let stringFormatter = (0, $eIQ1H$useLocalizedStringFormatter)((0, ($parcel$interopDefault($eIQ1H$intlStringsmodulejs))),
|
|
38
|
+
let stringFormatter = (0, $eIQ1H$useLocalizedStringFormatter)((0, ($parcel$interopDefault($eIQ1H$intlStringsmodulejs))), '@react-aria/datepicker');
|
|
39
39
|
let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = state.displayValidation;
|
|
40
40
|
let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $eIQ1H$useField)({
|
|
41
41
|
...props,
|
|
42
|
-
labelElementType:
|
|
42
|
+
labelElementType: 'span',
|
|
43
43
|
isInvalid: isInvalid,
|
|
44
44
|
errorMessage: props.errorMessage || validationErrors
|
|
45
45
|
});
|
|
46
|
-
let labelledBy = fieldProps[
|
|
46
|
+
let labelledBy = fieldProps['aria-labelledby'] || fieldProps.id;
|
|
47
47
|
let { locale: locale } = (0, $eIQ1H$useLocale)();
|
|
48
48
|
let range = state.formatValue(locale, {
|
|
49
|
-
month:
|
|
49
|
+
month: 'long'
|
|
50
50
|
});
|
|
51
|
-
let description = range ? stringFormatter.format(
|
|
51
|
+
let description = range ? stringFormatter.format('selectedRangeDescription', {
|
|
52
52
|
startDate: range.start,
|
|
53
53
|
endDate: range.end
|
|
54
|
-
}) :
|
|
54
|
+
}) : '';
|
|
55
55
|
let descProps = (0, $eIQ1H$useDescription)(description);
|
|
56
56
|
let startFieldProps = {
|
|
57
|
-
|
|
58
|
-
|
|
57
|
+
'aria-label': stringFormatter.format('startDate'),
|
|
58
|
+
'aria-labelledby': labelledBy
|
|
59
59
|
};
|
|
60
60
|
let endFieldProps = {
|
|
61
|
-
|
|
62
|
-
|
|
61
|
+
'aria-label': stringFormatter.format('endDate'),
|
|
62
|
+
'aria-labelledby': labelledBy
|
|
63
63
|
};
|
|
64
64
|
let buttonId = (0, $eIQ1H$useId)();
|
|
65
65
|
let dialogId = (0, $eIQ1H$useId)();
|
|
66
66
|
let groupProps = (0, $3dfb0f96be0d6a08$export$4a931266a3838b86)(state, ref);
|
|
67
67
|
let ariaDescribedBy = [
|
|
68
|
-
descProps[
|
|
69
|
-
fieldProps[
|
|
70
|
-
].filter(Boolean).join(
|
|
68
|
+
descProps['aria-describedby'],
|
|
69
|
+
fieldProps['aria-describedby']
|
|
70
|
+
].filter(Boolean).join(' ') || undefined;
|
|
71
71
|
let focusManager = (0, $eIQ1H$useMemo)(()=>(0, $eIQ1H$createFocusManager)(ref, {
|
|
72
72
|
// Exclude the button from the focus manager.
|
|
73
73
|
accept: (element)=>element.id !== buttonId
|
|
@@ -77,8 +77,8 @@ function $887cac91b7cc8801$export$12fd5f0e9f4bb192(props, state, ref) {
|
|
|
77
77
|
]);
|
|
78
78
|
let commonFieldProps = {
|
|
79
79
|
[(0, $16f0b7bb276bc17e$export$7b3062cd49e80452)]: focusManager,
|
|
80
|
-
[(0, $16f0b7bb276bc17e$export$300019f83c56d282)]:
|
|
81
|
-
|
|
80
|
+
[(0, $16f0b7bb276bc17e$export$300019f83c56d282)]: 'presentation',
|
|
81
|
+
'aria-describedby': ariaDescribedBy,
|
|
82
82
|
placeholderValue: props.placeholderValue,
|
|
83
83
|
hideTimeZone: props.hideTimeZone,
|
|
84
84
|
hourCycle: props.hourCycle,
|
|
@@ -101,9 +101,9 @@ function $887cac91b7cc8801$export$12fd5f0e9f4bb192(props, state, ref) {
|
|
|
101
101
|
let endFieldValidation = (0, $eIQ1H$useRef)((0, $eIQ1H$DEFAULT_VALIDATION_RESULT));
|
|
102
102
|
return {
|
|
103
103
|
groupProps: (0, $eIQ1H$mergeProps)(domProps, groupProps, fieldProps, descProps, focusWithinProps, {
|
|
104
|
-
role:
|
|
105
|
-
|
|
106
|
-
|
|
104
|
+
role: 'group',
|
|
105
|
+
'aria-disabled': props.isDisabled || null,
|
|
106
|
+
'aria-describedby': ariaDescribedBy,
|
|
107
107
|
onKeyDown (e) {
|
|
108
108
|
if (state.isOpen) return;
|
|
109
109
|
if (props.onKeyDown) props.onKeyDown(e);
|
|
@@ -122,23 +122,23 @@ function $887cac91b7cc8801$export$12fd5f0e9f4bb192(props, state, ref) {
|
|
|
122
122
|
buttonProps: {
|
|
123
123
|
...descProps,
|
|
124
124
|
id: buttonId,
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
125
|
+
'aria-haspopup': 'dialog',
|
|
126
|
+
'aria-label': stringFormatter.format('calendar'),
|
|
127
|
+
'aria-labelledby': `${buttonId} ${labelledBy}`,
|
|
128
|
+
'aria-describedby': ariaDescribedBy,
|
|
129
|
+
'aria-expanded': state.isOpen,
|
|
130
130
|
isDisabled: props.isDisabled || props.isReadOnly,
|
|
131
131
|
onPress: ()=>state.setOpen(true)
|
|
132
132
|
},
|
|
133
133
|
dialogProps: {
|
|
134
134
|
id: dialogId,
|
|
135
|
-
|
|
135
|
+
'aria-labelledby': `${buttonId} ${labelledBy}`
|
|
136
136
|
},
|
|
137
137
|
startFieldProps: {
|
|
138
138
|
...startFieldProps,
|
|
139
139
|
...commonFieldProps,
|
|
140
140
|
value: (_state_value = state.value) === null || _state_value === void 0 ? void 0 : _state_value.start,
|
|
141
|
-
onChange: (start)=>state.setDateTime(
|
|
141
|
+
onChange: (start)=>state.setDateTime('start', start),
|
|
142
142
|
autoFocus: props.autoFocus,
|
|
143
143
|
name: props.startName,
|
|
144
144
|
[(0, $eIQ1H$privateValidationStateProp)]: {
|
|
@@ -156,7 +156,7 @@ function $887cac91b7cc8801$export$12fd5f0e9f4bb192(props, state, ref) {
|
|
|
156
156
|
...endFieldProps,
|
|
157
157
|
...commonFieldProps,
|
|
158
158
|
value: (_state_value1 = state.value) === null || _state_value1 === void 0 ? void 0 : _state_value1.end,
|
|
159
|
-
onChange: (end)=>state.setDateTime(
|
|
159
|
+
onChange: (end)=>state.setDateTime('end', end),
|
|
160
160
|
name: props.endName,
|
|
161
161
|
[(0, $eIQ1H$privateValidationStateProp)]: {
|
|
162
162
|
realtimeValidation: state.realtimeValidation,
|
|
@@ -183,7 +183,7 @@ function $887cac91b7cc8801$export$12fd5f0e9f4bb192(props, state, ref) {
|
|
|
183
183
|
allowsNonContiguousRanges: props.allowsNonContiguousRanges,
|
|
184
184
|
defaultFocusedValue: state.dateRange ? undefined : props.placeholderValue,
|
|
185
185
|
isInvalid: state.isInvalid,
|
|
186
|
-
errorMessage: typeof props.errorMessage ===
|
|
186
|
+
errorMessage: typeof props.errorMessage === 'function' ? props.errorMessage(state.displayValidation) : props.errorMessage || state.displayValidation.validationErrors.join(' ')
|
|
187
187
|
},
|
|
188
188
|
isInvalid: isInvalid,
|
|
189
189
|
validationErrors: validationErrors,
|
|
@@ -193,4 +193,4 @@ function $887cac91b7cc8801$export$12fd5f0e9f4bb192(props, state, ref) {
|
|
|
193
193
|
|
|
194
194
|
|
|
195
195
|
export {$887cac91b7cc8801$export$12fd5f0e9f4bb192 as useDateRangePicker};
|
|
196
|
-
//# sourceMappingURL=useDateRangePicker.
|
|
196
|
+
//# sourceMappingURL=useDateRangePicker.module.js.map
|
|
@@ -4,10 +4,10 @@ import {useDatePickerGroup as $3dfb0f96be0d6a08$export$4a931266a3838b86} from ".
|
|
|
4
4
|
import {createFocusManager as $eIQ1H$createFocusManager} from "@react-aria/focus";
|
|
5
5
|
import {DEFAULT_VALIDATION_RESULT as $eIQ1H$DEFAULT_VALIDATION_RESULT, privateValidationStateProp as $eIQ1H$privateValidationStateProp, mergeValidation as $eIQ1H$mergeValidation} from "@react-stately/form";
|
|
6
6
|
import {useDescription as $eIQ1H$useDescription, useId as $eIQ1H$useId, filterDOMProps as $eIQ1H$filterDOMProps, mergeProps as $eIQ1H$mergeProps} from "@react-aria/utils";
|
|
7
|
-
import {useMemo as $eIQ1H$useMemo, useRef as $eIQ1H$useRef} from "react";
|
|
8
7
|
import {useField as $eIQ1H$useField} from "@react-aria/label";
|
|
9
8
|
import {useFocusWithin as $eIQ1H$useFocusWithin} from "@react-aria/interactions";
|
|
10
9
|
import {useLocalizedStringFormatter as $eIQ1H$useLocalizedStringFormatter, useLocale as $eIQ1H$useLocale} from "@react-aria/i18n";
|
|
10
|
+
import {useMemo as $eIQ1H$useMemo, useRef as $eIQ1H$useRef} from "react";
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
function $parcel$interopDefault(a) {
|
|
@@ -35,39 +35,39 @@ function $parcel$interopDefault(a) {
|
|
|
35
35
|
|
|
36
36
|
function $887cac91b7cc8801$export$12fd5f0e9f4bb192(props, state, ref) {
|
|
37
37
|
var _state_value, _state_value1;
|
|
38
|
-
let stringFormatter = (0, $eIQ1H$useLocalizedStringFormatter)((0, ($parcel$interopDefault($eIQ1H$intlStringsmodulejs))),
|
|
38
|
+
let stringFormatter = (0, $eIQ1H$useLocalizedStringFormatter)((0, ($parcel$interopDefault($eIQ1H$intlStringsmodulejs))), '@react-aria/datepicker');
|
|
39
39
|
let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = state.displayValidation;
|
|
40
40
|
let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $eIQ1H$useField)({
|
|
41
41
|
...props,
|
|
42
|
-
labelElementType:
|
|
42
|
+
labelElementType: 'span',
|
|
43
43
|
isInvalid: isInvalid,
|
|
44
44
|
errorMessage: props.errorMessage || validationErrors
|
|
45
45
|
});
|
|
46
|
-
let labelledBy = fieldProps[
|
|
46
|
+
let labelledBy = fieldProps['aria-labelledby'] || fieldProps.id;
|
|
47
47
|
let { locale: locale } = (0, $eIQ1H$useLocale)();
|
|
48
48
|
let range = state.formatValue(locale, {
|
|
49
|
-
month:
|
|
49
|
+
month: 'long'
|
|
50
50
|
});
|
|
51
|
-
let description = range ? stringFormatter.format(
|
|
51
|
+
let description = range ? stringFormatter.format('selectedRangeDescription', {
|
|
52
52
|
startDate: range.start,
|
|
53
53
|
endDate: range.end
|
|
54
|
-
}) :
|
|
54
|
+
}) : '';
|
|
55
55
|
let descProps = (0, $eIQ1H$useDescription)(description);
|
|
56
56
|
let startFieldProps = {
|
|
57
|
-
|
|
58
|
-
|
|
57
|
+
'aria-label': stringFormatter.format('startDate'),
|
|
58
|
+
'aria-labelledby': labelledBy
|
|
59
59
|
};
|
|
60
60
|
let endFieldProps = {
|
|
61
|
-
|
|
62
|
-
|
|
61
|
+
'aria-label': stringFormatter.format('endDate'),
|
|
62
|
+
'aria-labelledby': labelledBy
|
|
63
63
|
};
|
|
64
64
|
let buttonId = (0, $eIQ1H$useId)();
|
|
65
65
|
let dialogId = (0, $eIQ1H$useId)();
|
|
66
66
|
let groupProps = (0, $3dfb0f96be0d6a08$export$4a931266a3838b86)(state, ref);
|
|
67
67
|
let ariaDescribedBy = [
|
|
68
|
-
descProps[
|
|
69
|
-
fieldProps[
|
|
70
|
-
].filter(Boolean).join(
|
|
68
|
+
descProps['aria-describedby'],
|
|
69
|
+
fieldProps['aria-describedby']
|
|
70
|
+
].filter(Boolean).join(' ') || undefined;
|
|
71
71
|
let focusManager = (0, $eIQ1H$useMemo)(()=>(0, $eIQ1H$createFocusManager)(ref, {
|
|
72
72
|
// Exclude the button from the focus manager.
|
|
73
73
|
accept: (element)=>element.id !== buttonId
|
|
@@ -77,8 +77,8 @@ function $887cac91b7cc8801$export$12fd5f0e9f4bb192(props, state, ref) {
|
|
|
77
77
|
]);
|
|
78
78
|
let commonFieldProps = {
|
|
79
79
|
[(0, $16f0b7bb276bc17e$export$7b3062cd49e80452)]: focusManager,
|
|
80
|
-
[(0, $16f0b7bb276bc17e$export$300019f83c56d282)]:
|
|
81
|
-
|
|
80
|
+
[(0, $16f0b7bb276bc17e$export$300019f83c56d282)]: 'presentation',
|
|
81
|
+
'aria-describedby': ariaDescribedBy,
|
|
82
82
|
placeholderValue: props.placeholderValue,
|
|
83
83
|
hideTimeZone: props.hideTimeZone,
|
|
84
84
|
hourCycle: props.hourCycle,
|
|
@@ -101,9 +101,9 @@ function $887cac91b7cc8801$export$12fd5f0e9f4bb192(props, state, ref) {
|
|
|
101
101
|
let endFieldValidation = (0, $eIQ1H$useRef)((0, $eIQ1H$DEFAULT_VALIDATION_RESULT));
|
|
102
102
|
return {
|
|
103
103
|
groupProps: (0, $eIQ1H$mergeProps)(domProps, groupProps, fieldProps, descProps, focusWithinProps, {
|
|
104
|
-
role:
|
|
105
|
-
|
|
106
|
-
|
|
104
|
+
role: 'group',
|
|
105
|
+
'aria-disabled': props.isDisabled || null,
|
|
106
|
+
'aria-describedby': ariaDescribedBy,
|
|
107
107
|
onKeyDown (e) {
|
|
108
108
|
if (state.isOpen) return;
|
|
109
109
|
if (props.onKeyDown) props.onKeyDown(e);
|
|
@@ -122,23 +122,23 @@ function $887cac91b7cc8801$export$12fd5f0e9f4bb192(props, state, ref) {
|
|
|
122
122
|
buttonProps: {
|
|
123
123
|
...descProps,
|
|
124
124
|
id: buttonId,
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
125
|
+
'aria-haspopup': 'dialog',
|
|
126
|
+
'aria-label': stringFormatter.format('calendar'),
|
|
127
|
+
'aria-labelledby': `${buttonId} ${labelledBy}`,
|
|
128
|
+
'aria-describedby': ariaDescribedBy,
|
|
129
|
+
'aria-expanded': state.isOpen,
|
|
130
130
|
isDisabled: props.isDisabled || props.isReadOnly,
|
|
131
131
|
onPress: ()=>state.setOpen(true)
|
|
132
132
|
},
|
|
133
133
|
dialogProps: {
|
|
134
134
|
id: dialogId,
|
|
135
|
-
|
|
135
|
+
'aria-labelledby': `${buttonId} ${labelledBy}`
|
|
136
136
|
},
|
|
137
137
|
startFieldProps: {
|
|
138
138
|
...startFieldProps,
|
|
139
139
|
...commonFieldProps,
|
|
140
140
|
value: (_state_value = state.value) === null || _state_value === void 0 ? void 0 : _state_value.start,
|
|
141
|
-
onChange: (start)=>state.setDateTime(
|
|
141
|
+
onChange: (start)=>state.setDateTime('start', start),
|
|
142
142
|
autoFocus: props.autoFocus,
|
|
143
143
|
name: props.startName,
|
|
144
144
|
[(0, $eIQ1H$privateValidationStateProp)]: {
|
|
@@ -156,7 +156,7 @@ function $887cac91b7cc8801$export$12fd5f0e9f4bb192(props, state, ref) {
|
|
|
156
156
|
...endFieldProps,
|
|
157
157
|
...commonFieldProps,
|
|
158
158
|
value: (_state_value1 = state.value) === null || _state_value1 === void 0 ? void 0 : _state_value1.end,
|
|
159
|
-
onChange: (end)=>state.setDateTime(
|
|
159
|
+
onChange: (end)=>state.setDateTime('end', end),
|
|
160
160
|
name: props.endName,
|
|
161
161
|
[(0, $eIQ1H$privateValidationStateProp)]: {
|
|
162
162
|
realtimeValidation: state.realtimeValidation,
|
|
@@ -183,7 +183,7 @@ function $887cac91b7cc8801$export$12fd5f0e9f4bb192(props, state, ref) {
|
|
|
183
183
|
allowsNonContiguousRanges: props.allowsNonContiguousRanges,
|
|
184
184
|
defaultFocusedValue: state.dateRange ? undefined : props.placeholderValue,
|
|
185
185
|
isInvalid: state.isInvalid,
|
|
186
|
-
errorMessage: typeof props.errorMessage ===
|
|
186
|
+
errorMessage: typeof props.errorMessage === 'function' ? props.errorMessage(state.displayValidation) : props.errorMessage || state.displayValidation.validationErrors.join(' ')
|
|
187
187
|
},
|
|
188
188
|
isInvalid: isInvalid,
|
|
189
189
|
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.module.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.module.js.map"}
|