@react-spectrum/datepicker 3.14.10 → 3.15.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 +5 -5
- package/dist/main.js +8 -8
- package/dist/main.js.map +1 -1
- package/dist/module.js +5 -5
- package/dist/module.js.map +1 -1
- package/dist/types/src/index.d.ts +8 -0
- package/package.json +12 -44
- package/src/index.ts +9 -5
- package/dist/DateField.main.js +0 -108
- package/dist/DateField.main.js.map +0 -1
- package/dist/DateField.mjs +0 -103
- package/dist/DateField.module.js +0 -103
- package/dist/DateField.module.js.map +0 -1
- package/dist/DatePicker.main.js +0 -197
- package/dist/DatePicker.main.js.map +0 -1
- package/dist/DatePicker.mjs +0 -192
- package/dist/DatePicker.module.js +0 -192
- package/dist/DatePicker.module.js.map +0 -1
- package/dist/DatePickerField.main.js +0 -72
- package/dist/DatePickerField.main.js.map +0 -1
- package/dist/DatePickerField.mjs +0 -67
- package/dist/DatePickerField.module.js +0 -67
- package/dist/DatePickerField.module.js.map +0 -1
- package/dist/DatePickerSegment.main.js +0 -73
- package/dist/DatePickerSegment.main.js.map +0 -1
- package/dist/DatePickerSegment.mjs +0 -68
- package/dist/DatePickerSegment.module.js +0 -68
- package/dist/DatePickerSegment.module.js.map +0 -1
- package/dist/DateRangePicker.main.js +0 -229
- package/dist/DateRangePicker.main.js.map +0 -1
- package/dist/DateRangePicker.mjs +0 -224
- package/dist/DateRangePicker.module.js +0 -224
- package/dist/DateRangePicker.module.js.map +0 -1
- package/dist/Input.main.js +0 -128
- package/dist/Input.main.js.map +0 -1
- package/dist/Input.mjs +0 -123
- package/dist/Input.module.js +0 -123
- package/dist/Input.module.js.map +0 -1
- package/dist/TimeField.main.js +0 -100
- package/dist/TimeField.main.js.map +0 -1
- package/dist/TimeField.mjs +0 -95
- package/dist/TimeField.module.js +0 -95
- package/dist/TimeField.module.js.map +0 -1
- package/dist/ar-AE.main.js +0 -8
- package/dist/ar-AE.main.js.map +0 -1
- package/dist/ar-AE.mjs +0 -10
- package/dist/ar-AE.module.js +0 -10
- package/dist/ar-AE.module.js.map +0 -1
- package/dist/bg-BG.main.js +0 -8
- package/dist/bg-BG.main.js.map +0 -1
- package/dist/bg-BG.mjs +0 -10
- package/dist/bg-BG.module.js +0 -10
- package/dist/bg-BG.module.js.map +0 -1
- package/dist/cs-CZ.main.js +0 -8
- package/dist/cs-CZ.main.js.map +0 -1
- package/dist/cs-CZ.mjs +0 -10
- package/dist/cs-CZ.module.js +0 -10
- package/dist/cs-CZ.module.js.map +0 -1
- package/dist/da-DK.main.js +0 -8
- package/dist/da-DK.main.js.map +0 -1
- package/dist/da-DK.mjs +0 -10
- package/dist/da-DK.module.js +0 -10
- package/dist/da-DK.module.js.map +0 -1
- package/dist/datepicker.4d1286b0.css +0 -649
- package/dist/datepicker.4d1286b0.css.map +0 -1
- package/dist/datepicker.776a7787.css +0 -550
- package/dist/datepicker.776a7787.css.map +0 -1
- package/dist/datepicker.e85992d8.css +0 -204
- package/dist/datepicker.e85992d8.css.map +0 -1
- package/dist/de-DE.main.js +0 -8
- package/dist/de-DE.main.js.map +0 -1
- package/dist/de-DE.mjs +0 -10
- package/dist/de-DE.module.js +0 -10
- package/dist/de-DE.module.js.map +0 -1
- package/dist/el-GR.main.js +0 -8
- package/dist/el-GR.main.js.map +0 -1
- package/dist/el-GR.mjs +0 -10
- package/dist/el-GR.module.js +0 -10
- package/dist/el-GR.module.js.map +0 -1
- package/dist/en-US.main.js +0 -8
- package/dist/en-US.main.js.map +0 -1
- package/dist/en-US.mjs +0 -10
- package/dist/en-US.module.js +0 -10
- package/dist/en-US.module.js.map +0 -1
- package/dist/es-ES.main.js +0 -8
- package/dist/es-ES.main.js.map +0 -1
- package/dist/es-ES.mjs +0 -10
- package/dist/es-ES.module.js +0 -10
- package/dist/es-ES.module.js.map +0 -1
- package/dist/et-EE.main.js +0 -8
- package/dist/et-EE.main.js.map +0 -1
- package/dist/et-EE.mjs +0 -10
- package/dist/et-EE.module.js +0 -10
- package/dist/et-EE.module.js.map +0 -1
- package/dist/fi-FI.main.js +0 -8
- package/dist/fi-FI.main.js.map +0 -1
- package/dist/fi-FI.mjs +0 -10
- package/dist/fi-FI.module.js +0 -10
- package/dist/fi-FI.module.js.map +0 -1
- package/dist/fr-FR.main.js +0 -8
- package/dist/fr-FR.main.js.map +0 -1
- package/dist/fr-FR.mjs +0 -10
- package/dist/fr-FR.module.js +0 -10
- package/dist/fr-FR.module.js.map +0 -1
- package/dist/he-IL.main.js +0 -8
- package/dist/he-IL.main.js.map +0 -1
- package/dist/he-IL.mjs +0 -10
- package/dist/he-IL.module.js +0 -10
- package/dist/he-IL.module.js.map +0 -1
- package/dist/hr-HR.main.js +0 -8
- package/dist/hr-HR.main.js.map +0 -1
- package/dist/hr-HR.mjs +0 -10
- package/dist/hr-HR.module.js +0 -10
- package/dist/hr-HR.module.js.map +0 -1
- package/dist/hu-HU.main.js +0 -8
- package/dist/hu-HU.main.js.map +0 -1
- package/dist/hu-HU.mjs +0 -10
- package/dist/hu-HU.module.js +0 -10
- package/dist/hu-HU.module.js.map +0 -1
- package/dist/inputgroup_vars_css.main.js +0 -86
- package/dist/inputgroup_vars_css.main.js.map +0 -1
- package/dist/inputgroup_vars_css.mjs +0 -88
- package/dist/inputgroup_vars_css.module.js +0 -88
- package/dist/inputgroup_vars_css.module.js.map +0 -1
- package/dist/intlStrings.main.js +0 -108
- package/dist/intlStrings.main.js.map +0 -1
- package/dist/intlStrings.mjs +0 -110
- package/dist/intlStrings.module.js +0 -110
- package/dist/intlStrings.module.js.map +0 -1
- package/dist/it-IT.main.js +0 -8
- package/dist/it-IT.main.js.map +0 -1
- package/dist/it-IT.mjs +0 -10
- package/dist/it-IT.module.js +0 -10
- package/dist/it-IT.module.js.map +0 -1
- package/dist/ja-JP.main.js +0 -8
- package/dist/ja-JP.main.js.map +0 -1
- package/dist/ja-JP.mjs +0 -10
- package/dist/ja-JP.module.js +0 -10
- package/dist/ja-JP.module.js.map +0 -1
- package/dist/ko-KR.main.js +0 -8
- package/dist/ko-KR.main.js.map +0 -1
- package/dist/ko-KR.mjs +0 -10
- package/dist/ko-KR.module.js +0 -10
- package/dist/ko-KR.module.js.map +0 -1
- package/dist/lt-LT.main.js +0 -8
- package/dist/lt-LT.main.js.map +0 -1
- package/dist/lt-LT.mjs +0 -10
- package/dist/lt-LT.module.js +0 -10
- package/dist/lt-LT.module.js.map +0 -1
- package/dist/lv-LV.main.js +0 -8
- package/dist/lv-LV.main.js.map +0 -1
- package/dist/lv-LV.mjs +0 -10
- package/dist/lv-LV.module.js +0 -10
- package/dist/lv-LV.module.js.map +0 -1
- package/dist/nb-NO.main.js +0 -8
- package/dist/nb-NO.main.js.map +0 -1
- package/dist/nb-NO.mjs +0 -10
- package/dist/nb-NO.module.js +0 -10
- package/dist/nb-NO.module.js.map +0 -1
- package/dist/nl-NL.main.js +0 -8
- package/dist/nl-NL.main.js.map +0 -1
- package/dist/nl-NL.mjs +0 -10
- package/dist/nl-NL.module.js +0 -10
- package/dist/nl-NL.module.js.map +0 -1
- package/dist/pl-PL.main.js +0 -8
- package/dist/pl-PL.main.js.map +0 -1
- package/dist/pl-PL.mjs +0 -10
- package/dist/pl-PL.module.js +0 -10
- package/dist/pl-PL.module.js.map +0 -1
- package/dist/pt-BR.main.js +0 -8
- package/dist/pt-BR.main.js.map +0 -1
- package/dist/pt-BR.mjs +0 -10
- package/dist/pt-BR.module.js +0 -10
- package/dist/pt-BR.module.js.map +0 -1
- package/dist/pt-PT.main.js +0 -8
- package/dist/pt-PT.main.js.map +0 -1
- package/dist/pt-PT.mjs +0 -10
- package/dist/pt-PT.module.js +0 -10
- package/dist/pt-PT.module.js.map +0 -1
- package/dist/ro-RO.main.js +0 -8
- package/dist/ro-RO.main.js.map +0 -1
- package/dist/ro-RO.mjs +0 -10
- package/dist/ro-RO.module.js +0 -10
- package/dist/ro-RO.module.js.map +0 -1
- package/dist/ru-RU.main.js +0 -8
- package/dist/ru-RU.main.js.map +0 -1
- package/dist/ru-RU.mjs +0 -10
- package/dist/ru-RU.module.js +0 -10
- package/dist/ru-RU.module.js.map +0 -1
- package/dist/sk-SK.main.js +0 -8
- package/dist/sk-SK.main.js.map +0 -1
- package/dist/sk-SK.mjs +0 -10
- package/dist/sk-SK.module.js +0 -10
- package/dist/sk-SK.module.js.map +0 -1
- package/dist/sl-SI.main.js +0 -8
- package/dist/sl-SI.main.js.map +0 -1
- package/dist/sl-SI.mjs +0 -10
- package/dist/sl-SI.module.js +0 -10
- package/dist/sl-SI.module.js.map +0 -1
- package/dist/sr-SP.main.js +0 -8
- package/dist/sr-SP.main.js.map +0 -1
- package/dist/sr-SP.mjs +0 -10
- package/dist/sr-SP.module.js +0 -10
- package/dist/sr-SP.module.js.map +0 -1
- package/dist/styles_css.main.js +0 -77
- package/dist/styles_css.main.js.map +0 -1
- package/dist/styles_css.mjs +0 -79
- package/dist/styles_css.module.js +0 -79
- package/dist/styles_css.module.js.map +0 -1
- package/dist/sv-SE.main.js +0 -8
- package/dist/sv-SE.main.js.map +0 -1
- package/dist/sv-SE.mjs +0 -10
- package/dist/sv-SE.module.js +0 -10
- package/dist/sv-SE.module.js.map +0 -1
- package/dist/textfield_vars_css.main.js +0 -74
- package/dist/textfield_vars_css.main.js.map +0 -1
- package/dist/textfield_vars_css.mjs +0 -76
- package/dist/textfield_vars_css.module.js +0 -76
- package/dist/textfield_vars_css.module.js.map +0 -1
- package/dist/tr-TR.main.js +0 -8
- package/dist/tr-TR.main.js.map +0 -1
- package/dist/tr-TR.mjs +0 -10
- package/dist/tr-TR.module.js +0 -10
- package/dist/tr-TR.module.js.map +0 -1
- package/dist/types.d.ts +0 -33
- package/dist/types.d.ts.map +0 -1
- package/dist/uk-UA.main.js +0 -8
- package/dist/uk-UA.main.js.map +0 -1
- package/dist/uk-UA.mjs +0 -10
- package/dist/uk-UA.module.js +0 -10
- package/dist/uk-UA.module.js.map +0 -1
- package/dist/utils.main.js +0 -117
- package/dist/utils.main.js.map +0 -1
- package/dist/utils.mjs +0 -105
- package/dist/utils.module.js +0 -105
- package/dist/utils.module.js.map +0 -1
- package/dist/zh-CN.main.js +0 -8
- package/dist/zh-CN.main.js.map +0 -1
- package/dist/zh-CN.mjs +0 -10
- package/dist/zh-CN.module.js +0 -10
- package/dist/zh-CN.module.js.map +0 -1
- package/dist/zh-TW.main.js +0 -8
- package/dist/zh-TW.main.js.map +0 -1
- package/dist/zh-TW.mjs +0 -10
- package/dist/zh-TW.module.js +0 -10
- package/dist/zh-TW.module.js.map +0 -1
- package/src/DateField.tsx +0 -106
- package/src/DatePicker.tsx +0 -196
- package/src/DatePickerField.tsx +0 -61
- package/src/DatePickerSegment.tsx +0 -69
- package/src/DateRangePicker.tsx +0 -234
- package/src/Input.tsx +0 -142
- package/src/TimeField.tsx +0 -96
- package/src/styles.css +0 -203
- package/src/utils.tsx +0 -96
package/dist/DatePicker.main.js
DELETED
|
@@ -1,197 +0,0 @@
|
|
|
1
|
-
var $bd22dc8dad9522bc$exports = require("./DatePickerField.main.js");
|
|
2
|
-
require("./datepicker.e85992d8.css");
|
|
3
|
-
var $91c3db8c6a21ca71$exports = require("./styles_css.main.js");
|
|
4
|
-
var $c3ebc4931d9b9977$exports = require("./Input.main.js");
|
|
5
|
-
var $0045b32a117743a7$exports = require("./intlStrings.main.js");
|
|
6
|
-
require("./datepicker.776a7787.css");
|
|
7
|
-
require("./textfield_vars_css.main.js");
|
|
8
|
-
require("./datepicker.4d1286b0.css");
|
|
9
|
-
var $2f86633ce5b04f1e$exports = require("./inputgroup_vars_css.main.js");
|
|
10
|
-
var $740ff83729a8f317$exports = require("./TimeField.main.js");
|
|
11
|
-
var $9d3b96715dbbb2b7$exports = require("./utils.main.js");
|
|
12
|
-
var $2ni54$reactspectrumcalendar = require("@react-spectrum/calendar");
|
|
13
|
-
var $2ni54$spectrumiconsworkflowCalendar = require("@spectrum-icons/workflow/Calendar");
|
|
14
|
-
var $2ni54$reactspectrumutils = require("@react-spectrum/utils");
|
|
15
|
-
var $2ni54$reactspectrumview = require("@react-spectrum/view");
|
|
16
|
-
var $2ni54$reactspectrumdialog = require("@react-spectrum/dialog");
|
|
17
|
-
var $2ni54$reactspectrumlabel = require("@react-spectrum/label");
|
|
18
|
-
var $2ni54$reactspectrumbutton = require("@react-spectrum/button");
|
|
19
|
-
var $2ni54$reactariautils = require("@react-aria/utils");
|
|
20
|
-
var $2ni54$react = require("react");
|
|
21
|
-
var $2ni54$reactariadatepicker = require("@react-aria/datepicker");
|
|
22
|
-
var $2ni54$reactstatelydatepicker = require("@react-stately/datepicker");
|
|
23
|
-
var $2ni54$reactariafocus = require("@react-aria/focus");
|
|
24
|
-
var $2ni54$reactspectrumform = require("@react-spectrum/form");
|
|
25
|
-
var $2ni54$reactariainteractions = require("@react-aria/interactions");
|
|
26
|
-
var $2ni54$reactariai18n = require("@react-aria/i18n");
|
|
27
|
-
var $2ni54$reactspectrumprovider = require("@react-spectrum/provider");
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
function $parcel$interopDefault(a) {
|
|
31
|
-
return a && a.__esModule ? a.default : a;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
function $parcel$export(e, n, v, s) {
|
|
35
|
-
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
$parcel$export(module.exports, "DatePicker", () => $5c1ddf85d7c27889$export$5109c6dd95d8fb00);
|
|
39
|
-
/*
|
|
40
|
-
* Copyright 2020 Adobe. All rights reserved.
|
|
41
|
-
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
42
|
-
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
43
|
-
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
44
|
-
*
|
|
45
|
-
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
46
|
-
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
47
|
-
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
48
|
-
* governing permissions and limitations under the License.
|
|
49
|
-
*/
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
const $5c1ddf85d7c27889$export$5109c6dd95d8fb00 = /*#__PURE__*/ (0, ($parcel$interopDefault($2ni54$react))).forwardRef(function DatePicker(props, ref) {
|
|
74
|
-
props = (0, $2ni54$reactspectrumprovider.useProviderProps)(props);
|
|
75
|
-
props = (0, $2ni54$reactspectrumform.useFormProps)(props);
|
|
76
|
-
let { autoFocus: autoFocus, isQuiet: isQuiet, isDisabled: isDisabled, placeholderValue: placeholderValue, maxVisibleMonths: maxVisibleMonths = 1 } = props;
|
|
77
|
-
let { hoverProps: hoverProps, isHovered: isHovered } = (0, $2ni54$reactariainteractions.useHover)({
|
|
78
|
-
isDisabled: isDisabled
|
|
79
|
-
});
|
|
80
|
-
let targetRef = (0, $2ni54$react.useRef)(null);
|
|
81
|
-
let state = (0, $2ni54$reactstatelydatepicker.useDatePickerState)({
|
|
82
|
-
...props,
|
|
83
|
-
shouldCloseOnSelect: ()=>!state.hasTime
|
|
84
|
-
});
|
|
85
|
-
let { groupProps: groupProps, labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, buttonProps: buttonProps, dialogProps: dialogProps, calendarProps: calendarProps, isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = (0, $2ni54$reactariadatepicker.useDatePicker)(props, state, targetRef);
|
|
86
|
-
let { isOpen: isOpen, setOpen: setOpen } = state;
|
|
87
|
-
let { direction: direction } = (0, $2ni54$reactariai18n.useLocale)();
|
|
88
|
-
let domRef = (0, $9d3b96715dbbb2b7$exports.useFocusManagerRef)(ref);
|
|
89
|
-
let stringFormatter = (0, $2ni54$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($0045b32a117743a7$exports))), '@react-spectrum/datepicker');
|
|
90
|
-
let { isFocused: isFocused, isFocusVisible: isFocusVisible, focusProps: focusProps } = (0, $2ni54$reactariafocus.useFocusRing)({
|
|
91
|
-
within: true,
|
|
92
|
-
isTextInput: true,
|
|
93
|
-
autoFocus: autoFocus
|
|
94
|
-
});
|
|
95
|
-
let { isFocused: isFocusedButton, focusProps: focusPropsButton } = (0, $2ni54$reactariafocus.useFocusRing)({
|
|
96
|
-
within: false,
|
|
97
|
-
isTextInput: false,
|
|
98
|
-
autoFocus: autoFocus
|
|
99
|
-
});
|
|
100
|
-
let className = (0, $2ni54$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), 'spectrum-InputGroup', {
|
|
101
|
-
'spectrum-InputGroup--quiet': isQuiet,
|
|
102
|
-
'spectrum-InputGroup--invalid': isInvalid && !isDisabled,
|
|
103
|
-
'is-disabled': isDisabled,
|
|
104
|
-
'is-hovered': isHovered,
|
|
105
|
-
'is-focused': isFocused,
|
|
106
|
-
'focus-ring': isFocusVisible && !isFocusedButton
|
|
107
|
-
});
|
|
108
|
-
let fieldClassName = (0, $2ni54$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), 'spectrum-InputGroup-input', {
|
|
109
|
-
'is-disabled': isDisabled,
|
|
110
|
-
'is-invalid': isInvalid && !isDisabled
|
|
111
|
-
});
|
|
112
|
-
// Note: this description is intentionally not passed to useDatePicker.
|
|
113
|
-
// The format help text is unnecessary for screen reader users because each segment already has a label.
|
|
114
|
-
let description = (0, $9d3b96715dbbb2b7$exports.useFormatHelpText)(props);
|
|
115
|
-
if (description && !props.description) descriptionProps.id = undefined;
|
|
116
|
-
let placeholder = placeholderValue;
|
|
117
|
-
let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : null;
|
|
118
|
-
let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : null;
|
|
119
|
-
let timeMaxValue = props.maxValue && 'hour' in props.maxValue ? props.maxValue : null;
|
|
120
|
-
let timeGranularity = state.granularity === 'hour' || state.granularity === 'minute' || state.granularity === 'second' ? state.granularity : null;
|
|
121
|
-
let showTimeField = !!timeGranularity;
|
|
122
|
-
let visibleMonths = (0, $9d3b96715dbbb2b7$exports.useVisibleMonths)(maxVisibleMonths);
|
|
123
|
-
let validationState = state.validationState || (isInvalid ? 'invalid' : null);
|
|
124
|
-
let approximateWidth = (0, $9d3b96715dbbb2b7$exports.useFormattedDateWidth)(state) + 'ch';
|
|
125
|
-
return /*#__PURE__*/ (0, ($parcel$interopDefault($2ni54$react))).createElement((0, $2ni54$reactspectrumlabel.Field), {
|
|
126
|
-
...props,
|
|
127
|
-
ref: domRef,
|
|
128
|
-
elementType: "span",
|
|
129
|
-
description: description,
|
|
130
|
-
labelProps: labelProps,
|
|
131
|
-
descriptionProps: descriptionProps,
|
|
132
|
-
errorMessageProps: errorMessageProps,
|
|
133
|
-
validationState: validationState,
|
|
134
|
-
isInvalid: isInvalid,
|
|
135
|
-
validationErrors: validationErrors,
|
|
136
|
-
validationDetails: validationDetails,
|
|
137
|
-
wrapperClassName: (0, $2ni54$reactspectrumutils.classNames)((0, ($parcel$interopDefault($91c3db8c6a21ca71$exports))), 'react-spectrum-Datepicker-fieldWrapper')
|
|
138
|
-
}, /*#__PURE__*/ (0, ($parcel$interopDefault($2ni54$react))).createElement("div", {
|
|
139
|
-
...(0, $2ni54$reactariautils.mergeProps)(groupProps, hoverProps, focusProps),
|
|
140
|
-
className: className,
|
|
141
|
-
ref: targetRef
|
|
142
|
-
}, /*#__PURE__*/ (0, ($parcel$interopDefault($2ni54$react))).createElement((0, $c3ebc4931d9b9977$exports.Input), {
|
|
143
|
-
isDisabled: isDisabled,
|
|
144
|
-
isQuiet: isQuiet,
|
|
145
|
-
validationState: validationState,
|
|
146
|
-
className: (0, $2ni54$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), 'spectrum-InputGroup-field'),
|
|
147
|
-
inputClassName: fieldClassName,
|
|
148
|
-
disableFocusRing: true,
|
|
149
|
-
minWidth: approximateWidth
|
|
150
|
-
}, /*#__PURE__*/ (0, ($parcel$interopDefault($2ni54$react))).createElement((0, $bd22dc8dad9522bc$exports.DatePickerField), {
|
|
151
|
-
...fieldProps,
|
|
152
|
-
"data-testid": "date-field",
|
|
153
|
-
isQuiet: isQuiet
|
|
154
|
-
})), /*#__PURE__*/ (0, ($parcel$interopDefault($2ni54$react))).createElement((0, $2ni54$reactspectrumdialog.DialogTrigger), {
|
|
155
|
-
type: "popover",
|
|
156
|
-
mobileType: "tray",
|
|
157
|
-
placement: direction === 'rtl' ? 'bottom right' : 'bottom left',
|
|
158
|
-
targetRef: targetRef,
|
|
159
|
-
hideArrow: true,
|
|
160
|
-
isOpen: isOpen,
|
|
161
|
-
onOpenChange: setOpen,
|
|
162
|
-
shouldFlip: props.shouldFlip
|
|
163
|
-
}, /*#__PURE__*/ (0, ($parcel$interopDefault($2ni54$react))).createElement((0, $2ni54$reactspectrumbutton.FieldButton), {
|
|
164
|
-
...(0, $2ni54$reactariautils.mergeProps)(buttonProps, focusPropsButton),
|
|
165
|
-
UNSAFE_className: (0, $2ni54$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), 'spectrum-FieldButton'),
|
|
166
|
-
isQuiet: isQuiet,
|
|
167
|
-
validationState: validationState
|
|
168
|
-
}, /*#__PURE__*/ (0, ($parcel$interopDefault($2ni54$react))).createElement((0, ($parcel$interopDefault($2ni54$spectrumiconsworkflowCalendar))), null)), /*#__PURE__*/ (0, ($parcel$interopDefault($2ni54$react))).createElement((0, $2ni54$reactspectrumdialog.Dialog), {
|
|
169
|
-
UNSAFE_className: (0, $2ni54$reactspectrumutils.classNames)((0, ($parcel$interopDefault($91c3db8c6a21ca71$exports))), 'react-spectrum-Datepicker-dialog'),
|
|
170
|
-
...dialogProps
|
|
171
|
-
}, /*#__PURE__*/ (0, ($parcel$interopDefault($2ni54$react))).createElement((0, $2ni54$reactspectrumview.Content), null, /*#__PURE__*/ (0, ($parcel$interopDefault($2ni54$react))).createElement("div", {
|
|
172
|
-
className: (0, $2ni54$reactspectrumutils.classNames)((0, ($parcel$interopDefault($91c3db8c6a21ca71$exports))), 'react-spectrum-Datepicker-dialogContent')
|
|
173
|
-
}, /*#__PURE__*/ (0, ($parcel$interopDefault($2ni54$react))).createElement((0, $2ni54$reactspectrumcalendar.Calendar), {
|
|
174
|
-
...calendarProps,
|
|
175
|
-
visibleMonths: visibleMonths,
|
|
176
|
-
createCalendar: props.createCalendar,
|
|
177
|
-
UNSAFE_className: (0, $2ni54$reactspectrumutils.classNames)((0, ($parcel$interopDefault($91c3db8c6a21ca71$exports))), 'react-spectrum-Datepicker-calendar', {
|
|
178
|
-
'is-invalid': isInvalid
|
|
179
|
-
})
|
|
180
|
-
}), showTimeField && /*#__PURE__*/ (0, ($parcel$interopDefault($2ni54$react))).createElement("div", {
|
|
181
|
-
className: (0, $2ni54$reactspectrumutils.classNames)((0, ($parcel$interopDefault($91c3db8c6a21ca71$exports))), 'react-spectrum-Datepicker-timeFields')
|
|
182
|
-
}, /*#__PURE__*/ (0, ($parcel$interopDefault($2ni54$react))).createElement((0, $740ff83729a8f317$exports.TimeField), {
|
|
183
|
-
label: stringFormatter.format('time'),
|
|
184
|
-
value: state.timeValue,
|
|
185
|
-
onChange: state.setTimeValue,
|
|
186
|
-
placeholderValue: timePlaceholder,
|
|
187
|
-
granularity: timeGranularity,
|
|
188
|
-
minValue: timeMinValue,
|
|
189
|
-
maxValue: timeMaxValue,
|
|
190
|
-
hourCycle: props.hourCycle,
|
|
191
|
-
hideTimeZone: props.hideTimeZone,
|
|
192
|
-
marginTop: "size-100"
|
|
193
|
-
}))))))));
|
|
194
|
-
});
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
//# sourceMappingURL=DatePicker.main.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/datepicker/src/DatePicker.tsx"],"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 {Calendar} from '@react-spectrum/calendar';\nimport CalendarIcon from '@spectrum-icons/workflow/Calendar';\nimport {classNames} from '@react-spectrum/utils';\nimport {Content} from '@react-spectrum/view';\nimport {DatePickerField} from './DatePickerField';\nimport datepickerStyles from './styles.css';\nimport {DateValue, SpectrumDatePickerProps} from '@react-types/datepicker';\nimport {Dialog, DialogTrigger} from '@react-spectrum/dialog';\nimport {Field} from '@react-spectrum/label';\nimport {FieldButton} from '@react-spectrum/button';\nimport {FocusableRef} from '@react-types/shared';\nimport {Input} from './Input';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {ReactElement, useRef} from 'react';\nimport '@adobe/spectrum-css-temp/components/textfield/vars.css'; // HACK: must be included BEFORE inputgroup\nimport styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css';\nimport {TimeField} from './TimeField';\nimport {useDatePicker} from '@react-aria/datepicker';\nimport {useDatePickerState} from '@react-stately/datepicker';\nimport {useFocusManagerRef, useFormatHelpText, useFormattedDateWidth, useVisibleMonths} from './utils';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useHover} from '@react-aria/interactions';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\n/**\n * DatePickers combine a DateField and a Calendar popover to allow users to enter or select a date and time value.\n */\nexport const DatePicker = React.forwardRef(function DatePicker<T extends DateValue>(props: SpectrumDatePickerProps<T>, ref: FocusableRef<HTMLElement>) {\n props = useProviderProps(props);\n props = useFormProps(props);\n let {\n autoFocus,\n isQuiet,\n isDisabled,\n placeholderValue,\n maxVisibleMonths = 1\n } = props;\n let {hoverProps, isHovered} = useHover({isDisabled});\n let targetRef = useRef<HTMLDivElement | null>(null);\n let state = useDatePickerState({\n ...props,\n shouldCloseOnSelect: () => !state.hasTime\n });\n let {groupProps, labelProps, fieldProps, descriptionProps, errorMessageProps, buttonProps, dialogProps, calendarProps, isInvalid, validationErrors, validationDetails} = useDatePicker(props, state, targetRef);\n let {isOpen, setOpen} = state;\n let {direction} = useLocale();\n let domRef = useFocusManagerRef(ref);\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/datepicker');\n\n let {isFocused, isFocusVisible, focusProps} = useFocusRing({\n within: true,\n isTextInput: true,\n autoFocus\n });\n\n let {isFocused: isFocusedButton, focusProps: focusPropsButton} = useFocusRing({\n within: false,\n isTextInput: false,\n autoFocus\n });\n\n let className = classNames(\n styles,\n 'spectrum-InputGroup',\n {\n 'spectrum-InputGroup--quiet': isQuiet,\n 'spectrum-InputGroup--invalid': isInvalid && !isDisabled,\n 'is-disabled': isDisabled,\n 'is-hovered': isHovered,\n 'is-focused': isFocused,\n 'focus-ring': isFocusVisible && !isFocusedButton\n }\n );\n\n let fieldClassName = classNames(\n styles,\n 'spectrum-InputGroup-input',\n {\n 'is-disabled': isDisabled,\n 'is-invalid': isInvalid && !isDisabled\n }\n );\n\n // Note: this description is intentionally not passed to useDatePicker.\n // The format help text is unnecessary for screen reader users because each segment already has a label.\n let description = useFormatHelpText(props);\n if (description && !props.description) {\n descriptionProps.id = undefined;\n }\n\n let placeholder: DateValue | null | undefined = placeholderValue;\n let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : null;\n let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : null;\n let timeMaxValue = props.maxValue && 'hour' in props.maxValue ? props.maxValue : null;\n let timeGranularity = state.granularity === 'hour' || state.granularity === 'minute' || state.granularity === 'second' ? state.granularity : null;\n let showTimeField = !!timeGranularity;\n\n let visibleMonths = useVisibleMonths(maxVisibleMonths);\n let validationState = state.validationState || (isInvalid ? 'invalid' : null);\n\n let approximateWidth = useFormattedDateWidth(state) + 'ch';\n\n return (\n <Field\n {...props}\n ref={domRef}\n elementType=\"span\"\n description={description}\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n validationState={validationState}\n isInvalid={isInvalid}\n validationErrors={validationErrors}\n validationDetails={validationDetails}\n wrapperClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-fieldWrapper')}>\n <div\n {...mergeProps(groupProps, hoverProps, focusProps)}\n className={className}\n ref={targetRef}>\n <Input\n isDisabled={isDisabled}\n isQuiet={isQuiet}\n validationState={validationState}\n className={classNames(styles, 'spectrum-InputGroup-field')}\n inputClassName={fieldClassName}\n disableFocusRing\n minWidth={approximateWidth}>\n <DatePickerField\n {...fieldProps}\n data-testid=\"date-field\"\n isQuiet={isQuiet} />\n </Input>\n <DialogTrigger\n type=\"popover\"\n mobileType=\"tray\"\n placement={direction === 'rtl' ? 'bottom right' : 'bottom left'}\n targetRef={targetRef}\n hideArrow\n isOpen={isOpen}\n onOpenChange={setOpen}\n shouldFlip={props.shouldFlip}>\n <FieldButton\n {...mergeProps(buttonProps, focusPropsButton)}\n UNSAFE_className={classNames(styles, 'spectrum-FieldButton')}\n isQuiet={isQuiet}\n validationState={validationState}>\n <CalendarIcon />\n </FieldButton>\n <Dialog UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialog')} {...dialogProps}>\n <Content>\n <div className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialogContent')}>\n <Calendar\n {...calendarProps}\n visibleMonths={visibleMonths}\n createCalendar={props.createCalendar}\n UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-calendar', {'is-invalid': isInvalid})} />\n {showTimeField &&\n <div className={classNames(datepickerStyles, 'react-spectrum-Datepicker-timeFields')}>\n <TimeField\n label={stringFormatter.format('time')}\n value={state.timeValue}\n onChange={state.setTimeValue}\n placeholderValue={timePlaceholder}\n granularity={timeGranularity}\n minValue={timeMinValue}\n maxValue={timeMaxValue}\n hourCycle={props.hourCycle}\n hideTimeZone={props.hideTimeZone}\n marginTop=\"size-100\" />\n </div>\n }\n </div>\n </Content>\n </Dialog>\n </DialogTrigger>\n </div>\n </Field>\n );\n}) as <T extends DateValue>(props: SpectrumDatePickerProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\n"],"names":[],"version":3,"file":"DatePicker.main.js.map"}
|
package/dist/DatePicker.mjs
DELETED
|
@@ -1,192 +0,0 @@
|
|
|
1
|
-
import {DatePickerField as $d2bb88c82604b25f$export$34dc4cfa15ead1} from "./DatePickerField.mjs";
|
|
2
|
-
import "./datepicker.e85992d8.css";
|
|
3
|
-
import $8czI1$styles_cssmodulejs from "./styles_css.mjs";
|
|
4
|
-
import {Input as $79348162c55d687f$export$f5b8910cec6cf069} from "./Input.mjs";
|
|
5
|
-
import $8czI1$intlStringsmodulejs from "./intlStrings.mjs";
|
|
6
|
-
import "./datepicker.776a7787.css";
|
|
7
|
-
import "./textfield_vars_css.mjs";
|
|
8
|
-
import "./datepicker.4d1286b0.css";
|
|
9
|
-
import $8czI1$inputgroup_vars_cssmodulejs from "./inputgroup_vars_css.mjs";
|
|
10
|
-
import {TimeField as $f0a04554754386b6$export$5eaee2322dd727eb} from "./TimeField.mjs";
|
|
11
|
-
import {useFocusManagerRef as $ea94a5cfe92db3c2$export$71a23a36270e4bf0, useFormatHelpText as $ea94a5cfe92db3c2$export$322f4580ccd8dde6, useFormattedDateWidth as $ea94a5cfe92db3c2$export$31e22e3c931fc056, useVisibleMonths as $ea94a5cfe92db3c2$export$12ce2869ce471b1f} from "./utils.mjs";
|
|
12
|
-
import {Calendar as $8czI1$Calendar} from "@react-spectrum/calendar";
|
|
13
|
-
import $8czI1$spectrumiconsworkflowCalendar from "@spectrum-icons/workflow/Calendar";
|
|
14
|
-
import {classNames as $8czI1$classNames} from "@react-spectrum/utils";
|
|
15
|
-
import {Content as $8czI1$Content} from "@react-spectrum/view";
|
|
16
|
-
import {DialogTrigger as $8czI1$DialogTrigger, Dialog as $8czI1$Dialog} from "@react-spectrum/dialog";
|
|
17
|
-
import {Field as $8czI1$Field} from "@react-spectrum/label";
|
|
18
|
-
import {FieldButton as $8czI1$FieldButton} from "@react-spectrum/button";
|
|
19
|
-
import {mergeProps as $8czI1$mergeProps} from "@react-aria/utils";
|
|
20
|
-
import $8czI1$react, {useRef as $8czI1$useRef} from "react";
|
|
21
|
-
import {useDatePicker as $8czI1$useDatePicker} from "@react-aria/datepicker";
|
|
22
|
-
import {useDatePickerState as $8czI1$useDatePickerState} from "@react-stately/datepicker";
|
|
23
|
-
import {useFocusRing as $8czI1$useFocusRing} from "@react-aria/focus";
|
|
24
|
-
import {useFormProps as $8czI1$useFormProps} from "@react-spectrum/form";
|
|
25
|
-
import {useHover as $8czI1$useHover} from "@react-aria/interactions";
|
|
26
|
-
import {useLocale as $8czI1$useLocale, useLocalizedStringFormatter as $8czI1$useLocalizedStringFormatter} from "@react-aria/i18n";
|
|
27
|
-
import {useProviderProps as $8czI1$useProviderProps} from "@react-spectrum/provider";
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
function $parcel$interopDefault(a) {
|
|
31
|
-
return a && a.__esModule ? a.default : a;
|
|
32
|
-
}
|
|
33
|
-
/*
|
|
34
|
-
* Copyright 2020 Adobe. All rights reserved.
|
|
35
|
-
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
36
|
-
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
37
|
-
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
38
|
-
*
|
|
39
|
-
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
40
|
-
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
41
|
-
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
42
|
-
* governing permissions and limitations under the License.
|
|
43
|
-
*/
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
const $beaeefa091999363$export$5109c6dd95d8fb00 = /*#__PURE__*/ (0, $8czI1$react).forwardRef(function DatePicker(props, ref) {
|
|
68
|
-
props = (0, $8czI1$useProviderProps)(props);
|
|
69
|
-
props = (0, $8czI1$useFormProps)(props);
|
|
70
|
-
let { autoFocus: autoFocus, isQuiet: isQuiet, isDisabled: isDisabled, placeholderValue: placeholderValue, maxVisibleMonths: maxVisibleMonths = 1 } = props;
|
|
71
|
-
let { hoverProps: hoverProps, isHovered: isHovered } = (0, $8czI1$useHover)({
|
|
72
|
-
isDisabled: isDisabled
|
|
73
|
-
});
|
|
74
|
-
let targetRef = (0, $8czI1$useRef)(null);
|
|
75
|
-
let state = (0, $8czI1$useDatePickerState)({
|
|
76
|
-
...props,
|
|
77
|
-
shouldCloseOnSelect: ()=>!state.hasTime
|
|
78
|
-
});
|
|
79
|
-
let { groupProps: groupProps, labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, buttonProps: buttonProps, dialogProps: dialogProps, calendarProps: calendarProps, isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = (0, $8czI1$useDatePicker)(props, state, targetRef);
|
|
80
|
-
let { isOpen: isOpen, setOpen: setOpen } = state;
|
|
81
|
-
let { direction: direction } = (0, $8czI1$useLocale)();
|
|
82
|
-
let domRef = (0, $ea94a5cfe92db3c2$export$71a23a36270e4bf0)(ref);
|
|
83
|
-
let stringFormatter = (0, $8czI1$useLocalizedStringFormatter)((0, ($parcel$interopDefault($8czI1$intlStringsmodulejs))), '@react-spectrum/datepicker');
|
|
84
|
-
let { isFocused: isFocused, isFocusVisible: isFocusVisible, focusProps: focusProps } = (0, $8czI1$useFocusRing)({
|
|
85
|
-
within: true,
|
|
86
|
-
isTextInput: true,
|
|
87
|
-
autoFocus: autoFocus
|
|
88
|
-
});
|
|
89
|
-
let { isFocused: isFocusedButton, focusProps: focusPropsButton } = (0, $8czI1$useFocusRing)({
|
|
90
|
-
within: false,
|
|
91
|
-
isTextInput: false,
|
|
92
|
-
autoFocus: autoFocus
|
|
93
|
-
});
|
|
94
|
-
let className = (0, $8czI1$classNames)((0, ($parcel$interopDefault($8czI1$inputgroup_vars_cssmodulejs))), 'spectrum-InputGroup', {
|
|
95
|
-
'spectrum-InputGroup--quiet': isQuiet,
|
|
96
|
-
'spectrum-InputGroup--invalid': isInvalid && !isDisabled,
|
|
97
|
-
'is-disabled': isDisabled,
|
|
98
|
-
'is-hovered': isHovered,
|
|
99
|
-
'is-focused': isFocused,
|
|
100
|
-
'focus-ring': isFocusVisible && !isFocusedButton
|
|
101
|
-
});
|
|
102
|
-
let fieldClassName = (0, $8czI1$classNames)((0, ($parcel$interopDefault($8czI1$inputgroup_vars_cssmodulejs))), 'spectrum-InputGroup-input', {
|
|
103
|
-
'is-disabled': isDisabled,
|
|
104
|
-
'is-invalid': isInvalid && !isDisabled
|
|
105
|
-
});
|
|
106
|
-
// Note: this description is intentionally not passed to useDatePicker.
|
|
107
|
-
// The format help text is unnecessary for screen reader users because each segment already has a label.
|
|
108
|
-
let description = (0, $ea94a5cfe92db3c2$export$322f4580ccd8dde6)(props);
|
|
109
|
-
if (description && !props.description) descriptionProps.id = undefined;
|
|
110
|
-
let placeholder = placeholderValue;
|
|
111
|
-
let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : null;
|
|
112
|
-
let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : null;
|
|
113
|
-
let timeMaxValue = props.maxValue && 'hour' in props.maxValue ? props.maxValue : null;
|
|
114
|
-
let timeGranularity = state.granularity === 'hour' || state.granularity === 'minute' || state.granularity === 'second' ? state.granularity : null;
|
|
115
|
-
let showTimeField = !!timeGranularity;
|
|
116
|
-
let visibleMonths = (0, $ea94a5cfe92db3c2$export$12ce2869ce471b1f)(maxVisibleMonths);
|
|
117
|
-
let validationState = state.validationState || (isInvalid ? 'invalid' : null);
|
|
118
|
-
let approximateWidth = (0, $ea94a5cfe92db3c2$export$31e22e3c931fc056)(state) + 'ch';
|
|
119
|
-
return /*#__PURE__*/ (0, $8czI1$react).createElement((0, $8czI1$Field), {
|
|
120
|
-
...props,
|
|
121
|
-
ref: domRef,
|
|
122
|
-
elementType: "span",
|
|
123
|
-
description: description,
|
|
124
|
-
labelProps: labelProps,
|
|
125
|
-
descriptionProps: descriptionProps,
|
|
126
|
-
errorMessageProps: errorMessageProps,
|
|
127
|
-
validationState: validationState,
|
|
128
|
-
isInvalid: isInvalid,
|
|
129
|
-
validationErrors: validationErrors,
|
|
130
|
-
validationDetails: validationDetails,
|
|
131
|
-
wrapperClassName: (0, $8czI1$classNames)((0, ($parcel$interopDefault($8czI1$styles_cssmodulejs))), 'react-spectrum-Datepicker-fieldWrapper')
|
|
132
|
-
}, /*#__PURE__*/ (0, $8czI1$react).createElement("div", {
|
|
133
|
-
...(0, $8czI1$mergeProps)(groupProps, hoverProps, focusProps),
|
|
134
|
-
className: className,
|
|
135
|
-
ref: targetRef
|
|
136
|
-
}, /*#__PURE__*/ (0, $8czI1$react).createElement((0, $79348162c55d687f$export$f5b8910cec6cf069), {
|
|
137
|
-
isDisabled: isDisabled,
|
|
138
|
-
isQuiet: isQuiet,
|
|
139
|
-
validationState: validationState,
|
|
140
|
-
className: (0, $8czI1$classNames)((0, ($parcel$interopDefault($8czI1$inputgroup_vars_cssmodulejs))), 'spectrum-InputGroup-field'),
|
|
141
|
-
inputClassName: fieldClassName,
|
|
142
|
-
disableFocusRing: true,
|
|
143
|
-
minWidth: approximateWidth
|
|
144
|
-
}, /*#__PURE__*/ (0, $8czI1$react).createElement((0, $d2bb88c82604b25f$export$34dc4cfa15ead1), {
|
|
145
|
-
...fieldProps,
|
|
146
|
-
"data-testid": "date-field",
|
|
147
|
-
isQuiet: isQuiet
|
|
148
|
-
})), /*#__PURE__*/ (0, $8czI1$react).createElement((0, $8czI1$DialogTrigger), {
|
|
149
|
-
type: "popover",
|
|
150
|
-
mobileType: "tray",
|
|
151
|
-
placement: direction === 'rtl' ? 'bottom right' : 'bottom left',
|
|
152
|
-
targetRef: targetRef,
|
|
153
|
-
hideArrow: true,
|
|
154
|
-
isOpen: isOpen,
|
|
155
|
-
onOpenChange: setOpen,
|
|
156
|
-
shouldFlip: props.shouldFlip
|
|
157
|
-
}, /*#__PURE__*/ (0, $8czI1$react).createElement((0, $8czI1$FieldButton), {
|
|
158
|
-
...(0, $8czI1$mergeProps)(buttonProps, focusPropsButton),
|
|
159
|
-
UNSAFE_className: (0, $8czI1$classNames)((0, ($parcel$interopDefault($8czI1$inputgroup_vars_cssmodulejs))), 'spectrum-FieldButton'),
|
|
160
|
-
isQuiet: isQuiet,
|
|
161
|
-
validationState: validationState
|
|
162
|
-
}, /*#__PURE__*/ (0, $8czI1$react).createElement((0, $8czI1$spectrumiconsworkflowCalendar), null)), /*#__PURE__*/ (0, $8czI1$react).createElement((0, $8czI1$Dialog), {
|
|
163
|
-
UNSAFE_className: (0, $8czI1$classNames)((0, ($parcel$interopDefault($8czI1$styles_cssmodulejs))), 'react-spectrum-Datepicker-dialog'),
|
|
164
|
-
...dialogProps
|
|
165
|
-
}, /*#__PURE__*/ (0, $8czI1$react).createElement((0, $8czI1$Content), null, /*#__PURE__*/ (0, $8czI1$react).createElement("div", {
|
|
166
|
-
className: (0, $8czI1$classNames)((0, ($parcel$interopDefault($8czI1$styles_cssmodulejs))), 'react-spectrum-Datepicker-dialogContent')
|
|
167
|
-
}, /*#__PURE__*/ (0, $8czI1$react).createElement((0, $8czI1$Calendar), {
|
|
168
|
-
...calendarProps,
|
|
169
|
-
visibleMonths: visibleMonths,
|
|
170
|
-
createCalendar: props.createCalendar,
|
|
171
|
-
UNSAFE_className: (0, $8czI1$classNames)((0, ($parcel$interopDefault($8czI1$styles_cssmodulejs))), 'react-spectrum-Datepicker-calendar', {
|
|
172
|
-
'is-invalid': isInvalid
|
|
173
|
-
})
|
|
174
|
-
}), showTimeField && /*#__PURE__*/ (0, $8czI1$react).createElement("div", {
|
|
175
|
-
className: (0, $8czI1$classNames)((0, ($parcel$interopDefault($8czI1$styles_cssmodulejs))), 'react-spectrum-Datepicker-timeFields')
|
|
176
|
-
}, /*#__PURE__*/ (0, $8czI1$react).createElement((0, $f0a04554754386b6$export$5eaee2322dd727eb), {
|
|
177
|
-
label: stringFormatter.format('time'),
|
|
178
|
-
value: state.timeValue,
|
|
179
|
-
onChange: state.setTimeValue,
|
|
180
|
-
placeholderValue: timePlaceholder,
|
|
181
|
-
granularity: timeGranularity,
|
|
182
|
-
minValue: timeMinValue,
|
|
183
|
-
maxValue: timeMaxValue,
|
|
184
|
-
hourCycle: props.hourCycle,
|
|
185
|
-
hideTimeZone: props.hideTimeZone,
|
|
186
|
-
marginTop: "size-100"
|
|
187
|
-
}))))))));
|
|
188
|
-
});
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
export {$beaeefa091999363$export$5109c6dd95d8fb00 as DatePicker};
|
|
192
|
-
//# sourceMappingURL=DatePicker.module.js.map
|
|
@@ -1,192 +0,0 @@
|
|
|
1
|
-
import {DatePickerField as $d2bb88c82604b25f$export$34dc4cfa15ead1} from "./DatePickerField.module.js";
|
|
2
|
-
import "./datepicker.e85992d8.css";
|
|
3
|
-
import $8czI1$styles_cssmodulejs from "./styles_css.module.js";
|
|
4
|
-
import {Input as $79348162c55d687f$export$f5b8910cec6cf069} from "./Input.module.js";
|
|
5
|
-
import $8czI1$intlStringsmodulejs from "./intlStrings.module.js";
|
|
6
|
-
import "./datepicker.776a7787.css";
|
|
7
|
-
import "./textfield_vars_css.module.js";
|
|
8
|
-
import "./datepicker.4d1286b0.css";
|
|
9
|
-
import $8czI1$inputgroup_vars_cssmodulejs from "./inputgroup_vars_css.module.js";
|
|
10
|
-
import {TimeField as $f0a04554754386b6$export$5eaee2322dd727eb} from "./TimeField.module.js";
|
|
11
|
-
import {useFocusManagerRef as $ea94a5cfe92db3c2$export$71a23a36270e4bf0, useFormatHelpText as $ea94a5cfe92db3c2$export$322f4580ccd8dde6, useFormattedDateWidth as $ea94a5cfe92db3c2$export$31e22e3c931fc056, useVisibleMonths as $ea94a5cfe92db3c2$export$12ce2869ce471b1f} from "./utils.module.js";
|
|
12
|
-
import {Calendar as $8czI1$Calendar} from "@react-spectrum/calendar";
|
|
13
|
-
import $8czI1$spectrumiconsworkflowCalendar from "@spectrum-icons/workflow/Calendar";
|
|
14
|
-
import {classNames as $8czI1$classNames} from "@react-spectrum/utils";
|
|
15
|
-
import {Content as $8czI1$Content} from "@react-spectrum/view";
|
|
16
|
-
import {DialogTrigger as $8czI1$DialogTrigger, Dialog as $8czI1$Dialog} from "@react-spectrum/dialog";
|
|
17
|
-
import {Field as $8czI1$Field} from "@react-spectrum/label";
|
|
18
|
-
import {FieldButton as $8czI1$FieldButton} from "@react-spectrum/button";
|
|
19
|
-
import {mergeProps as $8czI1$mergeProps} from "@react-aria/utils";
|
|
20
|
-
import $8czI1$react, {useRef as $8czI1$useRef} from "react";
|
|
21
|
-
import {useDatePicker as $8czI1$useDatePicker} from "@react-aria/datepicker";
|
|
22
|
-
import {useDatePickerState as $8czI1$useDatePickerState} from "@react-stately/datepicker";
|
|
23
|
-
import {useFocusRing as $8czI1$useFocusRing} from "@react-aria/focus";
|
|
24
|
-
import {useFormProps as $8czI1$useFormProps} from "@react-spectrum/form";
|
|
25
|
-
import {useHover as $8czI1$useHover} from "@react-aria/interactions";
|
|
26
|
-
import {useLocale as $8czI1$useLocale, useLocalizedStringFormatter as $8czI1$useLocalizedStringFormatter} from "@react-aria/i18n";
|
|
27
|
-
import {useProviderProps as $8czI1$useProviderProps} from "@react-spectrum/provider";
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
function $parcel$interopDefault(a) {
|
|
31
|
-
return a && a.__esModule ? a.default : a;
|
|
32
|
-
}
|
|
33
|
-
/*
|
|
34
|
-
* Copyright 2020 Adobe. All rights reserved.
|
|
35
|
-
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
36
|
-
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
37
|
-
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
38
|
-
*
|
|
39
|
-
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
40
|
-
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
41
|
-
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
42
|
-
* governing permissions and limitations under the License.
|
|
43
|
-
*/
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
const $beaeefa091999363$export$5109c6dd95d8fb00 = /*#__PURE__*/ (0, $8czI1$react).forwardRef(function DatePicker(props, ref) {
|
|
68
|
-
props = (0, $8czI1$useProviderProps)(props);
|
|
69
|
-
props = (0, $8czI1$useFormProps)(props);
|
|
70
|
-
let { autoFocus: autoFocus, isQuiet: isQuiet, isDisabled: isDisabled, placeholderValue: placeholderValue, maxVisibleMonths: maxVisibleMonths = 1 } = props;
|
|
71
|
-
let { hoverProps: hoverProps, isHovered: isHovered } = (0, $8czI1$useHover)({
|
|
72
|
-
isDisabled: isDisabled
|
|
73
|
-
});
|
|
74
|
-
let targetRef = (0, $8czI1$useRef)(null);
|
|
75
|
-
let state = (0, $8czI1$useDatePickerState)({
|
|
76
|
-
...props,
|
|
77
|
-
shouldCloseOnSelect: ()=>!state.hasTime
|
|
78
|
-
});
|
|
79
|
-
let { groupProps: groupProps, labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, buttonProps: buttonProps, dialogProps: dialogProps, calendarProps: calendarProps, isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = (0, $8czI1$useDatePicker)(props, state, targetRef);
|
|
80
|
-
let { isOpen: isOpen, setOpen: setOpen } = state;
|
|
81
|
-
let { direction: direction } = (0, $8czI1$useLocale)();
|
|
82
|
-
let domRef = (0, $ea94a5cfe92db3c2$export$71a23a36270e4bf0)(ref);
|
|
83
|
-
let stringFormatter = (0, $8czI1$useLocalizedStringFormatter)((0, ($parcel$interopDefault($8czI1$intlStringsmodulejs))), '@react-spectrum/datepicker');
|
|
84
|
-
let { isFocused: isFocused, isFocusVisible: isFocusVisible, focusProps: focusProps } = (0, $8czI1$useFocusRing)({
|
|
85
|
-
within: true,
|
|
86
|
-
isTextInput: true,
|
|
87
|
-
autoFocus: autoFocus
|
|
88
|
-
});
|
|
89
|
-
let { isFocused: isFocusedButton, focusProps: focusPropsButton } = (0, $8czI1$useFocusRing)({
|
|
90
|
-
within: false,
|
|
91
|
-
isTextInput: false,
|
|
92
|
-
autoFocus: autoFocus
|
|
93
|
-
});
|
|
94
|
-
let className = (0, $8czI1$classNames)((0, ($parcel$interopDefault($8czI1$inputgroup_vars_cssmodulejs))), 'spectrum-InputGroup', {
|
|
95
|
-
'spectrum-InputGroup--quiet': isQuiet,
|
|
96
|
-
'spectrum-InputGroup--invalid': isInvalid && !isDisabled,
|
|
97
|
-
'is-disabled': isDisabled,
|
|
98
|
-
'is-hovered': isHovered,
|
|
99
|
-
'is-focused': isFocused,
|
|
100
|
-
'focus-ring': isFocusVisible && !isFocusedButton
|
|
101
|
-
});
|
|
102
|
-
let fieldClassName = (0, $8czI1$classNames)((0, ($parcel$interopDefault($8czI1$inputgroup_vars_cssmodulejs))), 'spectrum-InputGroup-input', {
|
|
103
|
-
'is-disabled': isDisabled,
|
|
104
|
-
'is-invalid': isInvalid && !isDisabled
|
|
105
|
-
});
|
|
106
|
-
// Note: this description is intentionally not passed to useDatePicker.
|
|
107
|
-
// The format help text is unnecessary for screen reader users because each segment already has a label.
|
|
108
|
-
let description = (0, $ea94a5cfe92db3c2$export$322f4580ccd8dde6)(props);
|
|
109
|
-
if (description && !props.description) descriptionProps.id = undefined;
|
|
110
|
-
let placeholder = placeholderValue;
|
|
111
|
-
let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : null;
|
|
112
|
-
let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : null;
|
|
113
|
-
let timeMaxValue = props.maxValue && 'hour' in props.maxValue ? props.maxValue : null;
|
|
114
|
-
let timeGranularity = state.granularity === 'hour' || state.granularity === 'minute' || state.granularity === 'second' ? state.granularity : null;
|
|
115
|
-
let showTimeField = !!timeGranularity;
|
|
116
|
-
let visibleMonths = (0, $ea94a5cfe92db3c2$export$12ce2869ce471b1f)(maxVisibleMonths);
|
|
117
|
-
let validationState = state.validationState || (isInvalid ? 'invalid' : null);
|
|
118
|
-
let approximateWidth = (0, $ea94a5cfe92db3c2$export$31e22e3c931fc056)(state) + 'ch';
|
|
119
|
-
return /*#__PURE__*/ (0, $8czI1$react).createElement((0, $8czI1$Field), {
|
|
120
|
-
...props,
|
|
121
|
-
ref: domRef,
|
|
122
|
-
elementType: "span",
|
|
123
|
-
description: description,
|
|
124
|
-
labelProps: labelProps,
|
|
125
|
-
descriptionProps: descriptionProps,
|
|
126
|
-
errorMessageProps: errorMessageProps,
|
|
127
|
-
validationState: validationState,
|
|
128
|
-
isInvalid: isInvalid,
|
|
129
|
-
validationErrors: validationErrors,
|
|
130
|
-
validationDetails: validationDetails,
|
|
131
|
-
wrapperClassName: (0, $8czI1$classNames)((0, ($parcel$interopDefault($8czI1$styles_cssmodulejs))), 'react-spectrum-Datepicker-fieldWrapper')
|
|
132
|
-
}, /*#__PURE__*/ (0, $8czI1$react).createElement("div", {
|
|
133
|
-
...(0, $8czI1$mergeProps)(groupProps, hoverProps, focusProps),
|
|
134
|
-
className: className,
|
|
135
|
-
ref: targetRef
|
|
136
|
-
}, /*#__PURE__*/ (0, $8czI1$react).createElement((0, $79348162c55d687f$export$f5b8910cec6cf069), {
|
|
137
|
-
isDisabled: isDisabled,
|
|
138
|
-
isQuiet: isQuiet,
|
|
139
|
-
validationState: validationState,
|
|
140
|
-
className: (0, $8czI1$classNames)((0, ($parcel$interopDefault($8czI1$inputgroup_vars_cssmodulejs))), 'spectrum-InputGroup-field'),
|
|
141
|
-
inputClassName: fieldClassName,
|
|
142
|
-
disableFocusRing: true,
|
|
143
|
-
minWidth: approximateWidth
|
|
144
|
-
}, /*#__PURE__*/ (0, $8czI1$react).createElement((0, $d2bb88c82604b25f$export$34dc4cfa15ead1), {
|
|
145
|
-
...fieldProps,
|
|
146
|
-
"data-testid": "date-field",
|
|
147
|
-
isQuiet: isQuiet
|
|
148
|
-
})), /*#__PURE__*/ (0, $8czI1$react).createElement((0, $8czI1$DialogTrigger), {
|
|
149
|
-
type: "popover",
|
|
150
|
-
mobileType: "tray",
|
|
151
|
-
placement: direction === 'rtl' ? 'bottom right' : 'bottom left',
|
|
152
|
-
targetRef: targetRef,
|
|
153
|
-
hideArrow: true,
|
|
154
|
-
isOpen: isOpen,
|
|
155
|
-
onOpenChange: setOpen,
|
|
156
|
-
shouldFlip: props.shouldFlip
|
|
157
|
-
}, /*#__PURE__*/ (0, $8czI1$react).createElement((0, $8czI1$FieldButton), {
|
|
158
|
-
...(0, $8czI1$mergeProps)(buttonProps, focusPropsButton),
|
|
159
|
-
UNSAFE_className: (0, $8czI1$classNames)((0, ($parcel$interopDefault($8czI1$inputgroup_vars_cssmodulejs))), 'spectrum-FieldButton'),
|
|
160
|
-
isQuiet: isQuiet,
|
|
161
|
-
validationState: validationState
|
|
162
|
-
}, /*#__PURE__*/ (0, $8czI1$react).createElement((0, $8czI1$spectrumiconsworkflowCalendar), null)), /*#__PURE__*/ (0, $8czI1$react).createElement((0, $8czI1$Dialog), {
|
|
163
|
-
UNSAFE_className: (0, $8czI1$classNames)((0, ($parcel$interopDefault($8czI1$styles_cssmodulejs))), 'react-spectrum-Datepicker-dialog'),
|
|
164
|
-
...dialogProps
|
|
165
|
-
}, /*#__PURE__*/ (0, $8czI1$react).createElement((0, $8czI1$Content), null, /*#__PURE__*/ (0, $8czI1$react).createElement("div", {
|
|
166
|
-
className: (0, $8czI1$classNames)((0, ($parcel$interopDefault($8czI1$styles_cssmodulejs))), 'react-spectrum-Datepicker-dialogContent')
|
|
167
|
-
}, /*#__PURE__*/ (0, $8czI1$react).createElement((0, $8czI1$Calendar), {
|
|
168
|
-
...calendarProps,
|
|
169
|
-
visibleMonths: visibleMonths,
|
|
170
|
-
createCalendar: props.createCalendar,
|
|
171
|
-
UNSAFE_className: (0, $8czI1$classNames)((0, ($parcel$interopDefault($8czI1$styles_cssmodulejs))), 'react-spectrum-Datepicker-calendar', {
|
|
172
|
-
'is-invalid': isInvalid
|
|
173
|
-
})
|
|
174
|
-
}), showTimeField && /*#__PURE__*/ (0, $8czI1$react).createElement("div", {
|
|
175
|
-
className: (0, $8czI1$classNames)((0, ($parcel$interopDefault($8czI1$styles_cssmodulejs))), 'react-spectrum-Datepicker-timeFields')
|
|
176
|
-
}, /*#__PURE__*/ (0, $8czI1$react).createElement((0, $f0a04554754386b6$export$5eaee2322dd727eb), {
|
|
177
|
-
label: stringFormatter.format('time'),
|
|
178
|
-
value: state.timeValue,
|
|
179
|
-
onChange: state.setTimeValue,
|
|
180
|
-
placeholderValue: timePlaceholder,
|
|
181
|
-
granularity: timeGranularity,
|
|
182
|
-
minValue: timeMinValue,
|
|
183
|
-
maxValue: timeMaxValue,
|
|
184
|
-
hourCycle: props.hourCycle,
|
|
185
|
-
hideTimeZone: props.hideTimeZone,
|
|
186
|
-
marginTop: "size-100"
|
|
187
|
-
}))))))));
|
|
188
|
-
});
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
export {$beaeefa091999363$export$5109c6dd95d8fb00 as DatePicker};
|
|
192
|
-
//# sourceMappingURL=DatePicker.module.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/datepicker/src/DatePicker.tsx"],"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 {Calendar} from '@react-spectrum/calendar';\nimport CalendarIcon from '@spectrum-icons/workflow/Calendar';\nimport {classNames} from '@react-spectrum/utils';\nimport {Content} from '@react-spectrum/view';\nimport {DatePickerField} from './DatePickerField';\nimport datepickerStyles from './styles.css';\nimport {DateValue, SpectrumDatePickerProps} from '@react-types/datepicker';\nimport {Dialog, DialogTrigger} from '@react-spectrum/dialog';\nimport {Field} from '@react-spectrum/label';\nimport {FieldButton} from '@react-spectrum/button';\nimport {FocusableRef} from '@react-types/shared';\nimport {Input} from './Input';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {ReactElement, useRef} from 'react';\nimport '@adobe/spectrum-css-temp/components/textfield/vars.css'; // HACK: must be included BEFORE inputgroup\nimport styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css';\nimport {TimeField} from './TimeField';\nimport {useDatePicker} from '@react-aria/datepicker';\nimport {useDatePickerState} from '@react-stately/datepicker';\nimport {useFocusManagerRef, useFormatHelpText, useFormattedDateWidth, useVisibleMonths} from './utils';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useHover} from '@react-aria/interactions';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\n/**\n * DatePickers combine a DateField and a Calendar popover to allow users to enter or select a date and time value.\n */\nexport const DatePicker = React.forwardRef(function DatePicker<T extends DateValue>(props: SpectrumDatePickerProps<T>, ref: FocusableRef<HTMLElement>) {\n props = useProviderProps(props);\n props = useFormProps(props);\n let {\n autoFocus,\n isQuiet,\n isDisabled,\n placeholderValue,\n maxVisibleMonths = 1\n } = props;\n let {hoverProps, isHovered} = useHover({isDisabled});\n let targetRef = useRef<HTMLDivElement | null>(null);\n let state = useDatePickerState({\n ...props,\n shouldCloseOnSelect: () => !state.hasTime\n });\n let {groupProps, labelProps, fieldProps, descriptionProps, errorMessageProps, buttonProps, dialogProps, calendarProps, isInvalid, validationErrors, validationDetails} = useDatePicker(props, state, targetRef);\n let {isOpen, setOpen} = state;\n let {direction} = useLocale();\n let domRef = useFocusManagerRef(ref);\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/datepicker');\n\n let {isFocused, isFocusVisible, focusProps} = useFocusRing({\n within: true,\n isTextInput: true,\n autoFocus\n });\n\n let {isFocused: isFocusedButton, focusProps: focusPropsButton} = useFocusRing({\n within: false,\n isTextInput: false,\n autoFocus\n });\n\n let className = classNames(\n styles,\n 'spectrum-InputGroup',\n {\n 'spectrum-InputGroup--quiet': isQuiet,\n 'spectrum-InputGroup--invalid': isInvalid && !isDisabled,\n 'is-disabled': isDisabled,\n 'is-hovered': isHovered,\n 'is-focused': isFocused,\n 'focus-ring': isFocusVisible && !isFocusedButton\n }\n );\n\n let fieldClassName = classNames(\n styles,\n 'spectrum-InputGroup-input',\n {\n 'is-disabled': isDisabled,\n 'is-invalid': isInvalid && !isDisabled\n }\n );\n\n // Note: this description is intentionally not passed to useDatePicker.\n // The format help text is unnecessary for screen reader users because each segment already has a label.\n let description = useFormatHelpText(props);\n if (description && !props.description) {\n descriptionProps.id = undefined;\n }\n\n let placeholder: DateValue | null | undefined = placeholderValue;\n let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : null;\n let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : null;\n let timeMaxValue = props.maxValue && 'hour' in props.maxValue ? props.maxValue : null;\n let timeGranularity = state.granularity === 'hour' || state.granularity === 'minute' || state.granularity === 'second' ? state.granularity : null;\n let showTimeField = !!timeGranularity;\n\n let visibleMonths = useVisibleMonths(maxVisibleMonths);\n let validationState = state.validationState || (isInvalid ? 'invalid' : null);\n\n let approximateWidth = useFormattedDateWidth(state) + 'ch';\n\n return (\n <Field\n {...props}\n ref={domRef}\n elementType=\"span\"\n description={description}\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n validationState={validationState}\n isInvalid={isInvalid}\n validationErrors={validationErrors}\n validationDetails={validationDetails}\n wrapperClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-fieldWrapper')}>\n <div\n {...mergeProps(groupProps, hoverProps, focusProps)}\n className={className}\n ref={targetRef}>\n <Input\n isDisabled={isDisabled}\n isQuiet={isQuiet}\n validationState={validationState}\n className={classNames(styles, 'spectrum-InputGroup-field')}\n inputClassName={fieldClassName}\n disableFocusRing\n minWidth={approximateWidth}>\n <DatePickerField\n {...fieldProps}\n data-testid=\"date-field\"\n isQuiet={isQuiet} />\n </Input>\n <DialogTrigger\n type=\"popover\"\n mobileType=\"tray\"\n placement={direction === 'rtl' ? 'bottom right' : 'bottom left'}\n targetRef={targetRef}\n hideArrow\n isOpen={isOpen}\n onOpenChange={setOpen}\n shouldFlip={props.shouldFlip}>\n <FieldButton\n {...mergeProps(buttonProps, focusPropsButton)}\n UNSAFE_className={classNames(styles, 'spectrum-FieldButton')}\n isQuiet={isQuiet}\n validationState={validationState}>\n <CalendarIcon />\n </FieldButton>\n <Dialog UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialog')} {...dialogProps}>\n <Content>\n <div className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialogContent')}>\n <Calendar\n {...calendarProps}\n visibleMonths={visibleMonths}\n createCalendar={props.createCalendar}\n UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-calendar', {'is-invalid': isInvalid})} />\n {showTimeField &&\n <div className={classNames(datepickerStyles, 'react-spectrum-Datepicker-timeFields')}>\n <TimeField\n label={stringFormatter.format('time')}\n value={state.timeValue}\n onChange={state.setTimeValue}\n placeholderValue={timePlaceholder}\n granularity={timeGranularity}\n minValue={timeMinValue}\n maxValue={timeMaxValue}\n hourCycle={props.hourCycle}\n hideTimeZone={props.hideTimeZone}\n marginTop=\"size-100\" />\n </div>\n }\n </div>\n </Content>\n </Dialog>\n </DialogTrigger>\n </div>\n </Field>\n );\n}) as <T extends DateValue>(props: SpectrumDatePickerProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\n"],"names":[],"version":3,"file":"DatePicker.module.js.map"}
|