@react-aria/datepicker 3.5.0 → 3.7.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 -11
- package/dist/main.js +24 -10
- package/dist/main.js.map +1 -1
- package/dist/module.js +25 -11
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +11 -3
- package/dist/types.d.ts.map +1 -1
- package/package.json +15 -15
- package/src/useDateField.ts +25 -6
- package/src/useDatePicker.ts +4 -3
- package/src/useDatePickerGroup.ts +4 -0
- package/src/useDateRangePicker.ts +6 -4
- 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;
|
|
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.7.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.
|
|
25
|
+
"@internationalized/date": "^3.5.0",
|
|
26
26
|
"@internationalized/number": "^3.2.1",
|
|
27
27
|
"@internationalized/string": "^3.1.1",
|
|
28
|
-
"@react-aria/focus": "^3.
|
|
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.1",
|
|
29
|
+
"@react-aria/i18n": "^3.8.2",
|
|
30
|
+
"@react-aria/interactions": "^3.18.0",
|
|
31
|
+
"@react-aria/label": "^3.7.0",
|
|
32
|
+
"@react-aria/spinbutton": "^3.5.2",
|
|
33
|
+
"@react-aria/utils": "^3.20.0",
|
|
34
|
+
"@react-stately/datepicker": "^3.7.0",
|
|
35
|
+
"@react-types/button": "^3.8.0",
|
|
36
|
+
"@react-types/calendar": "^3.4.0",
|
|
37
|
+
"@react-types/datepicker": "^3.6.0",
|
|
38
|
+
"@react-types/dialog": "^3.5.5",
|
|
39
|
+
"@react-types/shared": "^3.20.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": "54fbaa67cc56867506811819fef765546d403253"
|
|
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. */
|
|
@@ -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
|
@@ -129,8 +129,9 @@ 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
|
-
|
|
133
|
-
autoFocus: props.autoFocus
|
|
132
|
+
isInvalid: state.isInvalid,
|
|
133
|
+
autoFocus: props.autoFocus,
|
|
134
|
+
name: props.name
|
|
134
135
|
},
|
|
135
136
|
descriptionProps,
|
|
136
137
|
errorMessageProps,
|
|
@@ -158,7 +159,7 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
|
|
|
158
159
|
isReadOnly: props.isReadOnly,
|
|
159
160
|
isDateUnavailable: props.isDateUnavailable,
|
|
160
161
|
defaultFocusedValue: state.dateValue ? undefined : props.placeholderValue,
|
|
161
|
-
|
|
162
|
+
isInvalid: state.isInvalid,
|
|
162
163
|
errorMessage: props.errorMessage
|
|
163
164
|
}
|
|
164
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();
|
|
@@ -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);
|
|
@@ -164,13 +164,15 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
|
|
|
164
164
|
...commonFieldProps,
|
|
165
165
|
value: state.value?.start,
|
|
166
166
|
onChange: start => state.setDateTime('start', start),
|
|
167
|
-
autoFocus: props.autoFocus
|
|
167
|
+
autoFocus: props.autoFocus,
|
|
168
|
+
name: props.startName
|
|
168
169
|
},
|
|
169
170
|
endFieldProps: {
|
|
170
171
|
...endFieldProps,
|
|
171
172
|
...commonFieldProps,
|
|
172
173
|
value: state.value?.end,
|
|
173
|
-
onChange: end => state.setDateTime('end', end)
|
|
174
|
+
onChange: end => state.setDateTime('end', end),
|
|
175
|
+
name: props.endName
|
|
174
176
|
},
|
|
175
177
|
descriptionProps,
|
|
176
178
|
errorMessageProps,
|
|
@@ -185,7 +187,7 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
|
|
|
185
187
|
isDateUnavailable: props.isDateUnavailable,
|
|
186
188
|
allowsNonContiguousRanges: props.allowsNonContiguousRanges,
|
|
187
189
|
defaultFocusedValue: state.dateRange ? undefined : props.placeholderValue,
|
|
188
|
-
|
|
190
|
+
isInvalid: state.isInvalid,
|
|
189
191
|
errorMessage: props.errorMessage
|
|
190
192
|
}
|
|
191
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,
|