@react-aria/datepicker 3.6.0 → 3.8.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/import.mjs +25 -24
- package/dist/main.js +25 -24
- package/dist/main.js.map +1 -1
- package/dist/module.js +25 -24
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +4 -4
- package/dist/types.d.ts.map +1 -1
- package/package.json +16 -16
- package/src/useDateField.ts +4 -4
- package/src/useDatePicker.ts +6 -6
- package/src/useDatePickerGroup.ts +4 -0
- package/src/useDateRangePicker.ts +6 -6
- package/src/useDateSegment.ts +2 -2
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;AC0BA,sCAAsC,CAAC,SAAS,SAAS,CAAE,SAAQ,IAAI,CAAC,mBAAuB,CAAC,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,kBAAkB,CAAC;IACtL,mEAAmE;IACnE,QAAQ,CAAC,EAAE,UAAU,gBAAgB,CAAC,CAAA;CACvC;AAED;IACG,2DAA2D;IAC5D,UAAU,EAAE,aAAa,CAAC;IACzB,4CAA4C;IAC7C,UAAU,EAAE,
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-aria/datepicker/src/packages/@react-aria/datepicker/src/useDatePickerGroup.ts","packages/@react-aria/datepicker/src/packages/@react-aria/datepicker/src/useDateField.ts","packages/@react-aria/datepicker/src/packages/@react-aria/datepicker/src/useDatePicker.ts","packages/@react-aria/datepicker/src/packages/@react-aria/datepicker/src/useDisplayNames.ts","packages/@react-aria/datepicker/src/packages/@react-aria/datepicker/src/useDateSegment.ts","packages/@react-aria/datepicker/src/packages/@react-aria/datepicker/src/useDateRangePicker.ts","packages/@react-aria/datepicker/src/packages/@react-aria/datepicker/src/index.ts","packages/@react-aria/datepicker/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,"/*\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\nexport {useDatePicker} from './useDatePicker';\nexport {useDateSegment} from './useDateSegment';\nexport {useDateField, useTimeField} from './useDateField';\nexport {useDateRangePicker} from './useDateRangePicker';\nexport {useDisplayNames} from './useDisplayNames';\n\nexport type {AriaDateFieldProps, AriaDatePickerProps, AriaDateRangePickerProps, DateRange, DateValue, TimeValue} from '@react-types/datepicker';\nexport type {AriaDateFieldOptions, DateFieldAria} from './useDateField';\nexport type {DatePickerAria} from './useDatePicker';\nexport type {DateRangePickerAria} from './useDateRangePicker';\nexport type {DateSegmentAria} from './useDateSegment';\nexport type {AriaTimeFieldProps} from '@react-types/datepicker';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-aria/datepicker",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.8.0",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -22,21 +22,21 @@
|
|
|
22
22
|
"url": "https://github.com/adobe/react-spectrum"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@internationalized/date": "^3.
|
|
26
|
-
"@internationalized/number": "^3.
|
|
25
|
+
"@internationalized/date": "^3.5.0",
|
|
26
|
+
"@internationalized/number": "^3.3.0",
|
|
27
27
|
"@internationalized/string": "^3.1.1",
|
|
28
|
-
"@react-aria/focus": "^3.14.
|
|
29
|
-
"@react-aria/i18n": "^3.8.
|
|
30
|
-
"@react-aria/interactions": "^3.
|
|
31
|
-
"@react-aria/label": "^3.
|
|
32
|
-
"@react-aria/spinbutton": "^3.5.
|
|
33
|
-
"@react-aria/utils": "^3.
|
|
34
|
-
"@react-stately/datepicker": "^3.
|
|
35
|
-
"@react-types/button": "^3.
|
|
36
|
-
"@react-types/calendar": "^3.
|
|
37
|
-
"@react-types/datepicker": "^3.
|
|
38
|
-
"@react-types/dialog": "^3.5.
|
|
39
|
-
"@react-types/shared": "^3.
|
|
28
|
+
"@react-aria/focus": "^3.14.2",
|
|
29
|
+
"@react-aria/i18n": "^3.8.3",
|
|
30
|
+
"@react-aria/interactions": "^3.19.0",
|
|
31
|
+
"@react-aria/label": "^3.7.1",
|
|
32
|
+
"@react-aria/spinbutton": "^3.5.3",
|
|
33
|
+
"@react-aria/utils": "^3.21.0",
|
|
34
|
+
"@react-stately/datepicker": "^3.8.0",
|
|
35
|
+
"@react-types/button": "^3.9.0",
|
|
36
|
+
"@react-types/calendar": "^3.4.1",
|
|
37
|
+
"@react-types/datepicker": "^3.6.1",
|
|
38
|
+
"@react-types/dialog": "^3.5.6",
|
|
39
|
+
"@react-types/shared": "^3.21.0",
|
|
40
40
|
"@swc/helpers": "^0.5.0"
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|
|
@@ -46,5 +46,5 @@
|
|
|
46
46
|
"publishConfig": {
|
|
47
47
|
"access": "public"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "4122e44d1991c90507d630d35ed297f89db435d3"
|
|
50
50
|
}
|
package/src/useDateField.ts
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import {AriaDateFieldProps as AriaDateFieldPropsBase, AriaTimeFieldProps, DateValue, TimeValue} from '@react-types/datepicker';
|
|
14
14
|
import {createFocusManager, FocusManager} from '@react-aria/focus';
|
|
15
15
|
import {DateFieldState, TimeFieldState} from '@react-stately/datepicker';
|
|
16
|
-
import {DOMAttributes, KeyboardEvent} from '@react-types/shared';
|
|
16
|
+
import {DOMAttributes, GroupDOMAttributes, KeyboardEvent} from '@react-types/shared';
|
|
17
17
|
import {filterDOMProps, mergeProps, useDescription, useFormReset} from '@react-aria/utils';
|
|
18
18
|
import {FocusEvent, InputHTMLAttributes, RefObject, useEffect, useMemo, useRef} from 'react';
|
|
19
19
|
// @ts-ignore
|
|
@@ -33,7 +33,7 @@ export interface DateFieldAria {
|
|
|
33
33
|
/** Props for the field's visible label element, if any. */
|
|
34
34
|
labelProps: DOMAttributes,
|
|
35
35
|
/** Props for the field grouping element. */
|
|
36
|
-
fieldProps:
|
|
36
|
+
fieldProps: GroupDOMAttributes,
|
|
37
37
|
/** Props for the hidden input element for HTML form submission. */
|
|
38
38
|
inputProps: InputHTMLAttributes<HTMLInputElement>,
|
|
39
39
|
/** Props for the description element, if any. */
|
|
@@ -110,14 +110,14 @@ export function useDateField<T extends DateValue>(props: AriaDateFieldOptions<T>
|
|
|
110
110
|
// rather than role="group". Since the date picker/date range picker already has a role="group"
|
|
111
111
|
// with a label and description, and the segments are already labeled by this as well, this
|
|
112
112
|
// avoids very verbose duplicate announcements.
|
|
113
|
-
let fieldDOMProps:
|
|
113
|
+
let fieldDOMProps: GroupDOMAttributes;
|
|
114
114
|
if (props[roleSymbol] === 'presentation') {
|
|
115
115
|
fieldDOMProps = {
|
|
116
116
|
role: 'presentation'
|
|
117
117
|
};
|
|
118
118
|
} else {
|
|
119
119
|
fieldDOMProps = mergeProps(fieldProps, {
|
|
120
|
-
role: 'group',
|
|
120
|
+
role: 'group' as const,
|
|
121
121
|
'aria-disabled': props.isDisabled || undefined,
|
|
122
122
|
'aria-describedby': describedBy
|
|
123
123
|
});
|
package/src/useDatePicker.ts
CHANGED
|
@@ -16,7 +16,7 @@ import {AriaDialogProps} from '@react-types/dialog';
|
|
|
16
16
|
import {CalendarProps} from '@react-types/calendar';
|
|
17
17
|
import {createFocusManager} from '@react-aria/focus';
|
|
18
18
|
import {DatePickerState} from '@react-stately/datepicker';
|
|
19
|
-
import {DOMAttributes, KeyboardEvent} from '@react-types/shared';
|
|
19
|
+
import {DOMAttributes, GroupDOMAttributes, KeyboardEvent} from '@react-types/shared';
|
|
20
20
|
import {filterDOMProps, mergeProps, useDescription, useId} from '@react-aria/utils';
|
|
21
21
|
// @ts-ignore
|
|
22
22
|
import intlMessages from '../intl/*.json';
|
|
@@ -31,7 +31,7 @@ export interface DatePickerAria {
|
|
|
31
31
|
/** Props for the date picker's visible label element, if any. */
|
|
32
32
|
labelProps: DOMAttributes,
|
|
33
33
|
/** Props for the grouping element containing the date field and button. */
|
|
34
|
-
groupProps:
|
|
34
|
+
groupProps: GroupDOMAttributes,
|
|
35
35
|
/** Props for the date field. */
|
|
36
36
|
fieldProps: AriaDatePickerProps<DateValue>,
|
|
37
37
|
/** Props for the popover trigger button. */
|
|
@@ -83,7 +83,7 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
|
|
|
83
83
|
|
|
84
84
|
return {
|
|
85
85
|
groupProps: mergeProps(domProps, groupProps, fieldProps, descProps, focusWithinProps, {
|
|
86
|
-
role: 'group',
|
|
86
|
+
role: 'group' as const,
|
|
87
87
|
'aria-disabled': props.isDisabled || null,
|
|
88
88
|
'aria-labelledby': labelledBy,
|
|
89
89
|
'aria-describedby': ariaDescribedBy,
|
|
@@ -129,7 +129,7 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
|
|
|
129
129
|
isDisabled: props.isDisabled,
|
|
130
130
|
isReadOnly: props.isReadOnly,
|
|
131
131
|
isRequired: props.isRequired,
|
|
132
|
-
|
|
132
|
+
isInvalid: state.isInvalid,
|
|
133
133
|
autoFocus: props.autoFocus,
|
|
134
134
|
name: props.name
|
|
135
135
|
},
|
|
@@ -142,7 +142,7 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
|
|
|
142
142
|
'aria-label': stringFormatter.format('calendar'),
|
|
143
143
|
'aria-labelledby': `${buttonId} ${labelledBy}`,
|
|
144
144
|
'aria-describedby': ariaDescribedBy,
|
|
145
|
-
'aria-expanded': state.isOpen
|
|
145
|
+
'aria-expanded': state.isOpen,
|
|
146
146
|
onPress: () => state.setOpen(true)
|
|
147
147
|
},
|
|
148
148
|
dialogProps: {
|
|
@@ -159,7 +159,7 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
|
|
|
159
159
|
isReadOnly: props.isReadOnly,
|
|
160
160
|
isDateUnavailable: props.isDateUnavailable,
|
|
161
161
|
defaultFocusedValue: state.dateValue ? undefined : props.placeholderValue,
|
|
162
|
-
|
|
162
|
+
isInvalid: state.isInvalid,
|
|
163
163
|
errorMessage: props.errorMessage
|
|
164
164
|
}
|
|
165
165
|
};
|
|
@@ -12,6 +12,10 @@ export function useDatePickerGroup(state: DatePickerState | DateRangePickerState
|
|
|
12
12
|
|
|
13
13
|
// Open the popover on alt + arrow down
|
|
14
14
|
let onKeyDown = (e: KeyboardEvent) => {
|
|
15
|
+
if (!e.currentTarget.contains(e.target)) {
|
|
16
|
+
return;
|
|
17
|
+
}
|
|
18
|
+
|
|
15
19
|
if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp') && 'setOpen' in state) {
|
|
16
20
|
e.preventDefault();
|
|
17
21
|
e.stopPropagation();
|
|
@@ -15,7 +15,7 @@ import {AriaDatePickerProps, AriaDateRangePickerProps, DateValue} from '@react-t
|
|
|
15
15
|
import {AriaDialogProps} from '@react-types/dialog';
|
|
16
16
|
import {createFocusManager} from '@react-aria/focus';
|
|
17
17
|
import {DateRangePickerState} from '@react-stately/datepicker';
|
|
18
|
-
import {DOMAttributes, KeyboardEvent} from '@react-types/shared';
|
|
18
|
+
import {DOMAttributes, GroupDOMAttributes, KeyboardEvent} from '@react-types/shared';
|
|
19
19
|
import {filterDOMProps, mergeProps, useDescription, useId} from '@react-aria/utils';
|
|
20
20
|
import {focusManagerSymbol, roleSymbol} from './useDateField';
|
|
21
21
|
// @ts-ignore
|
|
@@ -31,7 +31,7 @@ export interface DateRangePickerAria {
|
|
|
31
31
|
/** Props for the date range picker's visible label element, if any. */
|
|
32
32
|
labelProps: DOMAttributes,
|
|
33
33
|
/** Props for the grouping element containing the date fields and button. */
|
|
34
|
-
groupProps:
|
|
34
|
+
groupProps: GroupDOMAttributes,
|
|
35
35
|
/** Props for the start date field. */
|
|
36
36
|
startFieldProps: AriaDatePickerProps<DateValue>,
|
|
37
37
|
/** Props for the end date field. */
|
|
@@ -102,7 +102,7 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
|
|
|
102
102
|
isDisabled: props.isDisabled,
|
|
103
103
|
isReadOnly: props.isReadOnly,
|
|
104
104
|
isRequired: props.isRequired,
|
|
105
|
-
|
|
105
|
+
isInvalid: state.isInvalid
|
|
106
106
|
};
|
|
107
107
|
|
|
108
108
|
let domProps = filterDOMProps(props);
|
|
@@ -117,7 +117,7 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
|
|
|
117
117
|
|
|
118
118
|
return {
|
|
119
119
|
groupProps: mergeProps(domProps, groupProps, fieldProps, descProps, focusWithinProps, {
|
|
120
|
-
role: 'group',
|
|
120
|
+
role: 'group' as const,
|
|
121
121
|
'aria-disabled': props.isDisabled || null,
|
|
122
122
|
'aria-describedby': ariaDescribedBy,
|
|
123
123
|
onKeyDown(e: KeyboardEvent) {
|
|
@@ -152,7 +152,7 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
|
|
|
152
152
|
'aria-label': stringFormatter.format('calendar'),
|
|
153
153
|
'aria-labelledby': `${buttonId} ${labelledBy}`,
|
|
154
154
|
'aria-describedby': ariaDescribedBy,
|
|
155
|
-
'aria-expanded': state.isOpen
|
|
155
|
+
'aria-expanded': state.isOpen,
|
|
156
156
|
onPress: () => state.setOpen(true)
|
|
157
157
|
},
|
|
158
158
|
dialogProps: {
|
|
@@ -187,7 +187,7 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
|
|
|
187
187
|
isDateUnavailable: props.isDateUnavailable,
|
|
188
188
|
allowsNonContiguousRanges: props.allowsNonContiguousRanges,
|
|
189
189
|
defaultFocusedValue: state.dateRange ? undefined : props.placeholderValue,
|
|
190
|
-
|
|
190
|
+
isInvalid: state.isInvalid,
|
|
191
191
|
errorMessage: props.errorMessage
|
|
192
192
|
}
|
|
193
193
|
};
|
package/src/useDateSegment.ts
CHANGED
|
@@ -335,7 +335,7 @@ export function useDateSegment(segment: DateSegment, state: DateFieldState, ref:
|
|
|
335
335
|
// Only apply aria-describedby to the first segment, unless the field is invalid. This avoids it being
|
|
336
336
|
// read every time the user navigates to a new segment.
|
|
337
337
|
let firstSegment = useMemo(() => state.segments.find(s => s.isEditable), [state.segments]);
|
|
338
|
-
if (segment !== firstSegment && state.
|
|
338
|
+
if (segment !== firstSegment && !state.isInvalid) {
|
|
339
339
|
ariaDescribedBy = undefined;
|
|
340
340
|
}
|
|
341
341
|
|
|
@@ -364,7 +364,7 @@ export function useDateSegment(segment: DateSegment, state: DateFieldState, ref:
|
|
|
364
364
|
segmentProps: mergeProps(spinButtonProps, labelProps, {
|
|
365
365
|
id,
|
|
366
366
|
...touchPropOverrides,
|
|
367
|
-
'aria-invalid': state.
|
|
367
|
+
'aria-invalid': state.isInvalid ? 'true' : undefined,
|
|
368
368
|
'aria-describedby': ariaDescribedBy,
|
|
369
369
|
'aria-readonly': state.isReadOnly || !segment.isEditable ? 'true' : undefined,
|
|
370
370
|
'data-placeholder': segment.isPlaceholder || undefined,
|