@react-aria/datepicker 3.4.1 → 3.6.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 +33 -18
- package/dist/main.js +32 -17
- package/dist/main.js.map +1 -1
- package/dist/module.js +33 -18
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +12 -4
- package/dist/types.d.ts.map +1 -1
- package/package.json +18 -18
- package/src/useDateField.ts +26 -7
- package/src/useDatePicker.ts +5 -3
- package/src/useDateRangePicker.ts +7 -4
- package/src/useDateSegment.ts +1 -1
- package/src/useDisplayNames.ts +1 -1
package/dist/types.d.ts
CHANGED
|
@@ -1,17 +1,21 @@
|
|
|
1
1
|
import { AriaDateFieldProps, AriaTimeFieldProps, DateValue, TimeValue, AriaDatePickerProps, AriaDateRangePickerProps } from "@react-types/datepicker";
|
|
2
|
-
import { DateFieldState, DatePickerState, DateSegment, DateRangePickerState } from "@react-stately/datepicker";
|
|
2
|
+
import { DateFieldState, TimeFieldState, DatePickerState, DateSegment, DateRangePickerState } from "@react-stately/datepicker";
|
|
3
3
|
import { DOMAttributes } from "@react-types/shared";
|
|
4
|
-
import { RefObject } from "react";
|
|
4
|
+
import { InputHTMLAttributes, RefObject } from "react";
|
|
5
5
|
import { AriaButtonProps } from "@react-types/button";
|
|
6
6
|
import { AriaDialogProps } from "@react-types/dialog";
|
|
7
7
|
import { CalendarProps, RangeCalendarProps } from "@react-types/calendar";
|
|
8
8
|
export interface AriaDateFieldOptions<T extends DateValue> extends Omit<AriaDateFieldProps<T>, 'value' | 'defaultValue' | 'onChange' | 'minValue' | 'maxValue' | 'placeholderValue'> {
|
|
9
|
+
/** A ref for the hidden input element for HTML form submission. */
|
|
10
|
+
inputRef?: RefObject<HTMLInputElement>;
|
|
9
11
|
}
|
|
10
12
|
export interface DateFieldAria {
|
|
11
13
|
/** Props for the field's visible label element, if any. */
|
|
12
14
|
labelProps: DOMAttributes;
|
|
13
15
|
/** Props for the field grouping element. */
|
|
14
16
|
fieldProps: DOMAttributes;
|
|
17
|
+
/** Props for the hidden input element for HTML form submission. */
|
|
18
|
+
inputProps: InputHTMLAttributes<HTMLInputElement>;
|
|
15
19
|
/** Props for the description element, if any. */
|
|
16
20
|
descriptionProps: DOMAttributes;
|
|
17
21
|
/** Props for the error message element, if any. */
|
|
@@ -23,12 +27,16 @@ export interface DateFieldAria {
|
|
|
23
27
|
* Each part of a date value is displayed in an individually editable segment.
|
|
24
28
|
*/
|
|
25
29
|
export function useDateField<T extends DateValue>(props: AriaDateFieldOptions<T>, state: DateFieldState, ref: RefObject<Element>): DateFieldAria;
|
|
30
|
+
interface AriaTimeFieldOptions<T extends TimeValue> extends AriaTimeFieldProps<T> {
|
|
31
|
+
/** A ref for the hidden input element for HTML form submission. */
|
|
32
|
+
inputRef?: RefObject<HTMLInputElement>;
|
|
33
|
+
}
|
|
26
34
|
/**
|
|
27
35
|
* Provides the behavior and accessibility implementation for a time field component.
|
|
28
36
|
* A time field allows users to enter and edit time values using a keyboard.
|
|
29
37
|
* Each part of a time value is displayed in an individually editable segment.
|
|
30
38
|
*/
|
|
31
|
-
export function useTimeField<T extends TimeValue>(props:
|
|
39
|
+
export function useTimeField<T extends TimeValue>(props: AriaTimeFieldOptions<T>, state: TimeFieldState, ref: RefObject<Element>): DateFieldAria;
|
|
32
40
|
export interface DatePickerAria {
|
|
33
41
|
/** Props for the date picker's visible label element, if any. */
|
|
34
42
|
labelProps: DOMAttributes;
|
|
@@ -52,7 +60,7 @@ export interface DatePickerAria {
|
|
|
52
60
|
* A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value.
|
|
53
61
|
*/
|
|
54
62
|
export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>, state: DatePickerState, ref: RefObject<Element>): DatePickerAria;
|
|
55
|
-
type Field =
|
|
63
|
+
type Field = Intl.DateTimeFormatPartTypes;
|
|
56
64
|
interface DisplayNames {
|
|
57
65
|
of(field: Field): string;
|
|
58
66
|
}
|
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;
|
|
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.6.0",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -22,22 +22,22 @@
|
|
|
22
22
|
"url": "https://github.com/adobe/react-spectrum"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@internationalized/date": "^3.
|
|
26
|
-
"@internationalized/number": "^3.2.
|
|
27
|
-
"@internationalized/string": "^3.1.
|
|
28
|
-
"@react-aria/focus": "^3.
|
|
29
|
-
"@react-aria/i18n": "^3.
|
|
30
|
-
"@react-aria/interactions": "^3.
|
|
31
|
-
"@react-aria/label": "^3.
|
|
32
|
-
"@react-aria/spinbutton": "^3.
|
|
33
|
-
"@react-aria/utils": "^3.
|
|
34
|
-
"@react-stately/datepicker": "^3.
|
|
35
|
-
"@react-types/button": "^3.7.
|
|
36
|
-
"@react-types/calendar": "^3.
|
|
37
|
-
"@react-types/datepicker": "^3.
|
|
38
|
-
"@react-types/dialog": "^3.5.
|
|
39
|
-
"@react-types/shared": "^3.
|
|
40
|
-
"@swc/helpers": "^0.
|
|
25
|
+
"@internationalized/date": "^3.4.0",
|
|
26
|
+
"@internationalized/number": "^3.2.1",
|
|
27
|
+
"@internationalized/string": "^3.1.1",
|
|
28
|
+
"@react-aria/focus": "^3.14.0",
|
|
29
|
+
"@react-aria/i18n": "^3.8.1",
|
|
30
|
+
"@react-aria/interactions": "^3.17.0",
|
|
31
|
+
"@react-aria/label": "^3.6.1",
|
|
32
|
+
"@react-aria/spinbutton": "^3.5.1",
|
|
33
|
+
"@react-aria/utils": "^3.19.0",
|
|
34
|
+
"@react-stately/datepicker": "^3.6.0",
|
|
35
|
+
"@react-types/button": "^3.7.4",
|
|
36
|
+
"@react-types/calendar": "^3.3.1",
|
|
37
|
+
"@react-types/datepicker": "^3.5.0",
|
|
38
|
+
"@react-types/dialog": "^3.5.4",
|
|
39
|
+
"@react-types/shared": "^3.19.0",
|
|
40
|
+
"@swc/helpers": "^0.5.0"
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|
|
43
43
|
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
|
|
@@ -46,5 +46,5 @@
|
|
|
46
46
|
"publishConfig": {
|
|
47
47
|
"access": "public"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "d4dfe4bb842a914f10045ee63fc6b92f034c5b30"
|
|
50
50
|
}
|
package/src/useDateField.ts
CHANGED
|
@@ -12,10 +12,10 @@
|
|
|
12
12
|
|
|
13
13
|
import {AriaDateFieldProps as AriaDateFieldPropsBase, AriaTimeFieldProps, DateValue, TimeValue} from '@react-types/datepicker';
|
|
14
14
|
import {createFocusManager, FocusManager} from '@react-aria/focus';
|
|
15
|
-
import {DateFieldState} from '@react-stately/datepicker';
|
|
15
|
+
import {DateFieldState, TimeFieldState} from '@react-stately/datepicker';
|
|
16
16
|
import {DOMAttributes, KeyboardEvent} from '@react-types/shared';
|
|
17
|
-
import {filterDOMProps, mergeProps, useDescription} from '@react-aria/utils';
|
|
18
|
-
import {FocusEvent, RefObject, useEffect, useMemo, useRef} from 'react';
|
|
17
|
+
import {filterDOMProps, mergeProps, useDescription, useFormReset} from '@react-aria/utils';
|
|
18
|
+
import {FocusEvent, InputHTMLAttributes, RefObject, useEffect, useMemo, useRef} from 'react';
|
|
19
19
|
// @ts-ignore
|
|
20
20
|
import intlMessages from '../intl/*.json';
|
|
21
21
|
import {useDatePickerGroup} from './useDatePickerGroup';
|
|
@@ -24,13 +24,18 @@ import {useFocusWithin} from '@react-aria/interactions';
|
|
|
24
24
|
import {useLocalizedStringFormatter} from '@react-aria/i18n';
|
|
25
25
|
|
|
26
26
|
// Allows this hook to also be used with TimeField
|
|
27
|
-
export interface AriaDateFieldOptions<T extends DateValue> extends Omit<AriaDateFieldPropsBase<T>, 'value' | 'defaultValue' | 'onChange' | 'minValue' | 'maxValue' | 'placeholderValue'> {
|
|
27
|
+
export interface AriaDateFieldOptions<T extends DateValue> extends Omit<AriaDateFieldPropsBase<T>, 'value' | 'defaultValue' | 'onChange' | 'minValue' | 'maxValue' | 'placeholderValue'> {
|
|
28
|
+
/** A ref for the hidden input element for HTML form submission. */
|
|
29
|
+
inputRef?: RefObject<HTMLInputElement>
|
|
30
|
+
}
|
|
28
31
|
|
|
29
32
|
export interface DateFieldAria {
|
|
30
33
|
/** Props for the field's visible label element, if any. */
|
|
31
34
|
labelProps: DOMAttributes,
|
|
32
35
|
/** Props for the field grouping element. */
|
|
33
36
|
fieldProps: DOMAttributes,
|
|
37
|
+
/** Props for the hidden input element for HTML form submission. */
|
|
38
|
+
inputProps: InputHTMLAttributes<HTMLInputElement>,
|
|
34
39
|
/** Props for the description element, if any. */
|
|
35
40
|
descriptionProps: DOMAttributes,
|
|
36
41
|
/** Props for the error message element, if any. */
|
|
@@ -94,7 +99,7 @@ export function useDateField<T extends DateValue>(props: AriaDateFieldOptions<T>
|
|
|
94
99
|
// Pass labels and other information to segments.
|
|
95
100
|
hookData.set(state, {
|
|
96
101
|
ariaLabel: props['aria-label'],
|
|
97
|
-
ariaLabelledBy: [props['aria-labelledby']
|
|
102
|
+
ariaLabelledBy: [labelProps.id, props['aria-labelledby']].filter(Boolean).join(' ') || undefined,
|
|
98
103
|
ariaDescribedBy: describedBy,
|
|
99
104
|
focusManager
|
|
100
105
|
});
|
|
@@ -125,6 +130,8 @@ export function useDateField<T extends DateValue>(props: AriaDateFieldOptions<T>
|
|
|
125
130
|
autoFocusRef.current = false;
|
|
126
131
|
}, [focusManager]);
|
|
127
132
|
|
|
133
|
+
useFormReset(props.inputRef, state.value, state.setValue);
|
|
134
|
+
|
|
128
135
|
let domProps = filterDOMProps(props);
|
|
129
136
|
return {
|
|
130
137
|
labelProps: {
|
|
@@ -145,16 +152,28 @@ export function useDateField<T extends DateValue>(props: AriaDateFieldOptions<T>
|
|
|
145
152
|
}
|
|
146
153
|
}
|
|
147
154
|
}),
|
|
155
|
+
inputProps: {
|
|
156
|
+
type: 'hidden',
|
|
157
|
+
name: props.name,
|
|
158
|
+
value: state.value?.toString() || ''
|
|
159
|
+
},
|
|
148
160
|
descriptionProps,
|
|
149
161
|
errorMessageProps
|
|
150
162
|
};
|
|
151
163
|
}
|
|
152
164
|
|
|
165
|
+
export interface AriaTimeFieldOptions<T extends TimeValue> extends AriaTimeFieldProps<T> {
|
|
166
|
+
/** A ref for the hidden input element for HTML form submission. */
|
|
167
|
+
inputRef?: RefObject<HTMLInputElement>
|
|
168
|
+
}
|
|
169
|
+
|
|
153
170
|
/**
|
|
154
171
|
* Provides the behavior and accessibility implementation for a time field component.
|
|
155
172
|
* A time field allows users to enter and edit time values using a keyboard.
|
|
156
173
|
* Each part of a time value is displayed in an individually editable segment.
|
|
157
174
|
*/
|
|
158
|
-
export function useTimeField<T extends TimeValue>(props:
|
|
159
|
-
|
|
175
|
+
export function useTimeField<T extends TimeValue>(props: AriaTimeFieldOptions<T>, state: TimeFieldState, ref: RefObject<Element>): DateFieldAria {
|
|
176
|
+
let res = useDateField(props, state, ref);
|
|
177
|
+
res.inputProps.value = state.timeValue?.toString() || '';
|
|
178
|
+
return res;
|
|
160
179
|
}
|
package/src/useDatePicker.ts
CHANGED
|
@@ -124,12 +124,14 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
|
|
|
124
124
|
placeholderValue: props.placeholderValue,
|
|
125
125
|
hideTimeZone: props.hideTimeZone,
|
|
126
126
|
hourCycle: props.hourCycle,
|
|
127
|
+
shouldForceLeadingZeros: props.shouldForceLeadingZeros,
|
|
127
128
|
granularity: props.granularity,
|
|
128
129
|
isDisabled: props.isDisabled,
|
|
129
130
|
isReadOnly: props.isReadOnly,
|
|
130
131
|
isRequired: props.isRequired,
|
|
131
132
|
validationState: state.validationState,
|
|
132
|
-
autoFocus: props.autoFocus
|
|
133
|
+
autoFocus: props.autoFocus,
|
|
134
|
+
name: props.name
|
|
133
135
|
},
|
|
134
136
|
descriptionProps,
|
|
135
137
|
errorMessageProps,
|
|
@@ -138,14 +140,14 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
|
|
|
138
140
|
id: buttonId,
|
|
139
141
|
'aria-haspopup': 'dialog',
|
|
140
142
|
'aria-label': stringFormatter.format('calendar'),
|
|
141
|
-
'aria-labelledby': `${
|
|
143
|
+
'aria-labelledby': `${buttonId} ${labelledBy}`,
|
|
142
144
|
'aria-describedby': ariaDescribedBy,
|
|
143
145
|
'aria-expanded': state.isOpen || undefined,
|
|
144
146
|
onPress: () => state.setOpen(true)
|
|
145
147
|
},
|
|
146
148
|
dialogProps: {
|
|
147
149
|
id: dialogId,
|
|
148
|
-
'aria-labelledby': `${
|
|
150
|
+
'aria-labelledby': `${buttonId} ${labelledBy}`
|
|
149
151
|
},
|
|
150
152
|
calendarProps: {
|
|
151
153
|
autoFocus: true,
|
|
@@ -98,6 +98,7 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
|
|
|
98
98
|
hideTimeZone: props.hideTimeZone,
|
|
99
99
|
hourCycle: props.hourCycle,
|
|
100
100
|
granularity: props.granularity,
|
|
101
|
+
shouldForceLeadingZeros: props.shouldForceLeadingZeros,
|
|
101
102
|
isDisabled: props.isDisabled,
|
|
102
103
|
isReadOnly: props.isReadOnly,
|
|
103
104
|
isRequired: props.isRequired,
|
|
@@ -149,27 +150,29 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
|
|
|
149
150
|
id: buttonId,
|
|
150
151
|
'aria-haspopup': 'dialog',
|
|
151
152
|
'aria-label': stringFormatter.format('calendar'),
|
|
152
|
-
'aria-labelledby': `${
|
|
153
|
+
'aria-labelledby': `${buttonId} ${labelledBy}`,
|
|
153
154
|
'aria-describedby': ariaDescribedBy,
|
|
154
155
|
'aria-expanded': state.isOpen || undefined,
|
|
155
156
|
onPress: () => state.setOpen(true)
|
|
156
157
|
},
|
|
157
158
|
dialogProps: {
|
|
158
159
|
id: dialogId,
|
|
159
|
-
'aria-labelledby': `${
|
|
160
|
+
'aria-labelledby': `${buttonId} ${labelledBy}`
|
|
160
161
|
},
|
|
161
162
|
startFieldProps: {
|
|
162
163
|
...startFieldProps,
|
|
163
164
|
...commonFieldProps,
|
|
164
165
|
value: state.value?.start,
|
|
165
166
|
onChange: start => state.setDateTime('start', start),
|
|
166
|
-
autoFocus: props.autoFocus
|
|
167
|
+
autoFocus: props.autoFocus,
|
|
168
|
+
name: props.startName
|
|
167
169
|
},
|
|
168
170
|
endFieldProps: {
|
|
169
171
|
...endFieldProps,
|
|
170
172
|
...commonFieldProps,
|
|
171
173
|
value: state.value?.end,
|
|
172
|
-
onChange: end => state.setDateTime('end', end)
|
|
174
|
+
onChange: end => state.setDateTime('end', end),
|
|
175
|
+
name: props.endName
|
|
173
176
|
},
|
|
174
177
|
descriptionProps,
|
|
175
178
|
errorMessageProps,
|
package/src/useDateSegment.ts
CHANGED
|
@@ -346,7 +346,7 @@ export function useDateSegment(segment: DateSegment, state: DateFieldState, ref:
|
|
|
346
346
|
// This is needed because VoiceOver on iOS does not announce groups.
|
|
347
347
|
let name = segment.type === 'literal' ? '' : displayNames.of(segment.type);
|
|
348
348
|
let labelProps = useLabels({
|
|
349
|
-
'aria-label':
|
|
349
|
+
'aria-label': `${name}${ariaLabel ? `, ${ariaLabel}` : ''}${ariaLabelledBy ? ', ' : ''}`,
|
|
350
350
|
'aria-labelledby': ariaLabelledBy
|
|
351
351
|
});
|
|
352
352
|
|
package/src/useDisplayNames.ts
CHANGED
|
@@ -16,7 +16,7 @@ import {LocalizedStringDictionary} from '@internationalized/string';
|
|
|
16
16
|
import {useLocale} from '@react-aria/i18n';
|
|
17
17
|
import {useMemo} from 'react';
|
|
18
18
|
|
|
19
|
-
type Field =
|
|
19
|
+
type Field = Intl.DateTimeFormatPartTypes;
|
|
20
20
|
interface DisplayNames {
|
|
21
21
|
of(field: Field): string
|
|
22
22
|
}
|