@react-aria/datepicker 3.5.0 → 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 +18 -5
- package/dist/main.js +17 -4
- package/dist/main.js.map +1 -1
- package/dist/module.js +18 -5
- 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 +2 -1
- package/src/useDateRangePicker.ts +4 -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":";;;;;;;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,aAAa,CAAC;IAC1B,mEAAmE;IACnE,UAAU,EAAE,oBAAoB,gBAAgB,CAAC,CAAC;IAClD,iDAAiD;IACjD,gBAAgB,EAAE,aAAa,CAAC;IAChC,mDAAmD;IACnD,iBAAiB,EAAE,aAAa,CAAA;CACjC;AAiBD;;;;GAIG;AACH,6BAA6B,CAAC,SAAS,SAAS,EAAE,KAAK,EAAE,qBAAqB,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,UAAU,OAAO,CAAC,GAAG,aAAa,CAkG/I;AAED,+BAAsC,CAAC,SAAS,SAAS,CAAE,SAAQ,mBAAmB,CAAC,CAAC;IACtF,mEAAmE;IACnE,QAAQ,CAAC,EAAE,UAAU,gBAAgB,CAAC,CAAA;CACvC;AAED;;;;GAIG;AACH,6BAA6B,CAAC,SAAS,SAAS,EAAE,KAAK,EAAE,qBAAqB,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,UAAU,OAAO,CAAC,GAAG,aAAa,CAI/I;ACrJD;IACE,iEAAiE;IACjE,UAAU,EAAE,aAAa,CAAC;IAC1B,2EAA2E;IAC3E,UAAU,EAAE,aAAa,CAAC;IAC1B,gCAAgC;IAChC,UAAU,EAAE,oBAAoB,SAAS,CAAC,CAAC;IAC3C,4CAA4C;IAC5C,WAAW,EAAE,eAAe,CAAC;IAC7B,iDAAiD;IACjD,gBAAgB,EAAE,aAAa,CAAC;IAChC,mDAAmD;IACnD,iBAAiB,EAAE,aAAa,CAAC;IACjC,oCAAoC;IACpC,WAAW,EAAE,eAAe,CAAC;IAC7B,wDAAwD;IACxD,aAAa,EAAE,cAAc,SAAS,CAAC,CAAA;CACxC;AAED;;;GAGG;AACH,8BAA8B,CAAC,SAAS,SAAS,EAAE,KAAK,EAAE,oBAAoB,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,EAAE,GAAG,EAAE,UAAU,OAAO,CAAC,GAAG,cAAc,CAiHjJ;ACnJD,aAAa,KAAK,uBAAuB,CAAC;AAC1C;IACE,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM,CAAA;CACzB;AAED,eAAe;AACf,mCAAmC,YAAY,CAY9C;ACbD;IACE,qCAAqC;IACrC,YAAY,EAAE,aAAa,CAAA;CAC5B;AAED;;;;GAIG;AACH,+BAA+B,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,UAAU,WAAW,CAAC,GAAG,eAAe,CAwWxH;AC5WD;IACE,uEAAuE;IACvE,UAAU,EAAE,aAAa,CAAC;IAC1B,4EAA4E;IAC5E,UAAU,EAAE,aAAa,CAAC;IAC1B,sCAAsC;IACtC,eAAe,EAAE,oBAAoB,SAAS,CAAC,CAAC;IAChD,oCAAoC;IACpC,aAAa,EAAE,oBAAoB,SAAS,CAAC,CAAC;IAC9C,4CAA4C;IAC5C,WAAW,EAAE,eAAe,CAAC;IAC7B,iDAAiD;IACjD,gBAAgB,EAAE,aAAa,CAAC;IAChC,mDAAmD;IACnD,iBAAiB,EAAE,aAAa,CAAC;IACjC,oCAAoC;IACpC,WAAW,EAAE,eAAe,CAAC;IAC7B,8DAA8D;IAC9D,aAAa,EAAE,mBAAmB,SAAS,CAAC,CAAA;CAC7C;AAED;;;;GAIG;AACH,mCAAmC,CAAC,SAAS,SAAS,EAAE,KAAK,EAAE,yBAAyB,CAAC,CAAC,EAAE,KAAK,EAAE,oBAAoB,EAAE,GAAG,EAAE,UAAU,OAAO,CAAC,GAAG,mBAAmB,CA0IrK;AC/KD,YAAY,EAAC,kBAAkB,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,yBAAyB,CAAC;AAKhJ,YAAY,EAAC,kBAAkB,EAAC,MAAM,yBAAyB,CAAC","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,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.4.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.6.
|
|
32
|
-
"@react-aria/spinbutton": "^3.5.
|
|
33
|
-
"@react-aria/utils": "^3.
|
|
34
|
-
"@react-stately/datepicker": "^3.
|
|
35
|
-
"@react-types/button": "^3.7.
|
|
36
|
-
"@react-types/calendar": "^3.3.
|
|
37
|
-
"@react-types/datepicker": "^3.
|
|
38
|
-
"@react-types/dialog": "^3.5.
|
|
39
|
-
"@react-types/shared": "^3.
|
|
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
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": "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. */
|
|
@@ -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
|
@@ -130,7 +130,8 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
|
|
|
130
130
|
isReadOnly: props.isReadOnly,
|
|
131
131
|
isRequired: props.isRequired,
|
|
132
132
|
validationState: state.validationState,
|
|
133
|
-
autoFocus: props.autoFocus
|
|
133
|
+
autoFocus: props.autoFocus,
|
|
134
|
+
name: props.name
|
|
134
135
|
},
|
|
135
136
|
descriptionProps,
|
|
136
137
|
errorMessageProps,
|
|
@@ -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,
|