@react-spectrum/datepicker 3.14.11 → 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
|
@@ -1,229 +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.4d1286b0.css");
|
|
7
|
-
var $2f86633ce5b04f1e$exports = require("./inputgroup_vars_css.main.js");
|
|
8
|
-
var $740ff83729a8f317$exports = require("./TimeField.main.js");
|
|
9
|
-
var $9d3b96715dbbb2b7$exports = require("./utils.main.js");
|
|
10
|
-
var $56Vum$spectrumiconsworkflowCalendar = require("@spectrum-icons/workflow/Calendar");
|
|
11
|
-
var $56Vum$reactspectrumutils = require("@react-spectrum/utils");
|
|
12
|
-
var $56Vum$reactspectrumview = require("@react-spectrum/view");
|
|
13
|
-
var $56Vum$reactspectrumdialog = require("@react-spectrum/dialog");
|
|
14
|
-
var $56Vum$reactspectrumlabel = require("@react-spectrum/label");
|
|
15
|
-
var $56Vum$reactspectrumbutton = require("@react-spectrum/button");
|
|
16
|
-
var $56Vum$reactspectrumlayout = require("@react-spectrum/layout");
|
|
17
|
-
var $56Vum$reactariautils = require("@react-aria/utils");
|
|
18
|
-
var $56Vum$reactspectrumcalendar = require("@react-spectrum/calendar");
|
|
19
|
-
var $56Vum$react = require("react");
|
|
20
|
-
var $56Vum$reactariadatepicker = require("@react-aria/datepicker");
|
|
21
|
-
var $56Vum$reactstatelydatepicker = require("@react-stately/datepicker");
|
|
22
|
-
var $56Vum$reactariafocus = require("@react-aria/focus");
|
|
23
|
-
var $56Vum$reactspectrumform = require("@react-spectrum/form");
|
|
24
|
-
var $56Vum$reactariainteractions = require("@react-aria/interactions");
|
|
25
|
-
var $56Vum$reactariai18n = require("@react-aria/i18n");
|
|
26
|
-
var $56Vum$reactspectrumprovider = require("@react-spectrum/provider");
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
function $parcel$interopDefault(a) {
|
|
30
|
-
return a && a.__esModule ? a.default : a;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
function $parcel$export(e, n, v, s) {
|
|
34
|
-
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
$parcel$export(module.exports, "DateRangePicker", () => $16cafb71dac155a4$export$17334619f3ac2224);
|
|
38
|
-
/*
|
|
39
|
-
* Copyright 2020 Adobe. All rights reserved.
|
|
40
|
-
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
41
|
-
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
42
|
-
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
43
|
-
*
|
|
44
|
-
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
45
|
-
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
46
|
-
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
47
|
-
* governing permissions and limitations under the License.
|
|
48
|
-
*/
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
const $16cafb71dac155a4$export$17334619f3ac2224 = /*#__PURE__*/ (0, ($parcel$interopDefault($56Vum$react))).forwardRef(function DateRangePicker(props, ref) {
|
|
73
|
-
var _state_timeRange, _state_timeRange1;
|
|
74
|
-
props = (0, $56Vum$reactspectrumprovider.useProviderProps)(props);
|
|
75
|
-
props = (0, $56Vum$reactspectrumform.useFormProps)(props);
|
|
76
|
-
let { isQuiet: isQuiet, isDisabled: isDisabled, autoFocus: autoFocus, placeholderValue: placeholderValue, maxVisibleMonths: maxVisibleMonths = 1 } = props;
|
|
77
|
-
let { hoverProps: hoverProps, isHovered: isHovered } = (0, $56Vum$reactariainteractions.useHover)({
|
|
78
|
-
isDisabled: isDisabled
|
|
79
|
-
});
|
|
80
|
-
let targetRef = (0, $56Vum$react.useRef)(null);
|
|
81
|
-
let state = (0, $56Vum$reactstatelydatepicker.useDateRangePickerState)({
|
|
82
|
-
...props,
|
|
83
|
-
shouldCloseOnSelect: ()=>!state.hasTime
|
|
84
|
-
});
|
|
85
|
-
let { labelProps: labelProps, groupProps: groupProps, buttonProps: buttonProps, dialogProps: dialogProps, startFieldProps: startFieldProps, endFieldProps: endFieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, calendarProps: calendarProps, isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = (0, $56Vum$reactariadatepicker.useDateRangePicker)(props, state, targetRef);
|
|
86
|
-
let { isOpen: isOpen, setOpen: setOpen } = state;
|
|
87
|
-
let { direction: direction } = (0, $56Vum$reactariai18n.useLocale)();
|
|
88
|
-
let domRef = (0, $9d3b96715dbbb2b7$exports.useFocusManagerRef)(ref);
|
|
89
|
-
let stringFormatter = (0, $56Vum$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($0045b32a117743a7$exports))), '@react-spectrum/datepicker');
|
|
90
|
-
let { isFocused: isFocused, isFocusVisible: isFocusVisible, focusProps: focusProps } = (0, $56Vum$reactariafocus.useFocusRing)({
|
|
91
|
-
within: true,
|
|
92
|
-
isTextInput: true,
|
|
93
|
-
autoFocus: autoFocus
|
|
94
|
-
});
|
|
95
|
-
let { isFocused: isFocusedButton, focusProps: focusPropsButton } = (0, $56Vum$reactariafocus.useFocusRing)({
|
|
96
|
-
within: false,
|
|
97
|
-
isTextInput: false,
|
|
98
|
-
autoFocus: autoFocus
|
|
99
|
-
});
|
|
100
|
-
let className = (0, $56Vum$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, $56Vum$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
|
-
// Multiplying by two for the two dates, adding one character for the dash, and then the padding around the dash
|
|
125
|
-
let approximateWidth = `calc(${(0, $9d3b96715dbbb2b7$exports.useFormattedDateWidth)(state) * 2 + 1}ch + 2 * var(--spectrum-global-dimension-size-100))`;
|
|
126
|
-
return /*#__PURE__*/ (0, ($parcel$interopDefault($56Vum$react))).createElement((0, $56Vum$reactspectrumlabel.Field), {
|
|
127
|
-
...props,
|
|
128
|
-
ref: domRef,
|
|
129
|
-
elementType: "span",
|
|
130
|
-
description: description,
|
|
131
|
-
labelProps: labelProps,
|
|
132
|
-
descriptionProps: descriptionProps,
|
|
133
|
-
errorMessageProps: errorMessageProps,
|
|
134
|
-
validationState: validationState,
|
|
135
|
-
isInvalid: isInvalid,
|
|
136
|
-
validationErrors: validationErrors,
|
|
137
|
-
validationDetails: validationDetails,
|
|
138
|
-
wrapperClassName: (0, $56Vum$reactspectrumutils.classNames)((0, ($parcel$interopDefault($91c3db8c6a21ca71$exports))), 'react-spectrum-Datepicker-fieldWrapper')
|
|
139
|
-
}, /*#__PURE__*/ (0, ($parcel$interopDefault($56Vum$react))).createElement("div", {
|
|
140
|
-
...(0, $56Vum$reactariautils.mergeProps)(groupProps, hoverProps, focusProps),
|
|
141
|
-
className: className,
|
|
142
|
-
ref: targetRef
|
|
143
|
-
}, /*#__PURE__*/ (0, ($parcel$interopDefault($56Vum$react))).createElement("div", {
|
|
144
|
-
style: {
|
|
145
|
-
overflow: 'hidden',
|
|
146
|
-
width: '100%'
|
|
147
|
-
}
|
|
148
|
-
}, /*#__PURE__*/ (0, ($parcel$interopDefault($56Vum$react))).createElement((0, $c3ebc4931d9b9977$exports.Input), {
|
|
149
|
-
isDisabled: isDisabled,
|
|
150
|
-
isQuiet: isQuiet,
|
|
151
|
-
validationState: validationState,
|
|
152
|
-
className: (0, $56Vum$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), 'spectrum-InputGroup-field'),
|
|
153
|
-
inputClassName: fieldClassName,
|
|
154
|
-
disableFocusRing: true,
|
|
155
|
-
minWidth: approximateWidth
|
|
156
|
-
}, /*#__PURE__*/ (0, ($parcel$interopDefault($56Vum$react))).createElement((0, $bd22dc8dad9522bc$exports.DatePickerField), {
|
|
157
|
-
...startFieldProps,
|
|
158
|
-
"data-testid": "start-date",
|
|
159
|
-
isQuiet: props.isQuiet,
|
|
160
|
-
inputClassName: (0, $56Vum$reactspectrumutils.classNames)((0, ($parcel$interopDefault($91c3db8c6a21ca71$exports))), 'react-spectrum-Datepicker-startField')
|
|
161
|
-
}), /*#__PURE__*/ (0, ($parcel$interopDefault($56Vum$react))).createElement($16cafb71dac155a4$var$DateRangeDash, null), /*#__PURE__*/ (0, ($parcel$interopDefault($56Vum$react))).createElement((0, $bd22dc8dad9522bc$exports.DatePickerField), {
|
|
162
|
-
...endFieldProps,
|
|
163
|
-
"data-testid": "end-date",
|
|
164
|
-
isQuiet: props.isQuiet,
|
|
165
|
-
inputClassName: (0, $56Vum$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), 'spectrum-Datepicker-endField', (0, $56Vum$reactspectrumutils.classNames)((0, ($parcel$interopDefault($91c3db8c6a21ca71$exports))), 'react-spectrum-Datepicker-endField'))
|
|
166
|
-
}))), /*#__PURE__*/ (0, ($parcel$interopDefault($56Vum$react))).createElement((0, $56Vum$reactspectrumdialog.DialogTrigger), {
|
|
167
|
-
type: "popover",
|
|
168
|
-
mobileType: "tray",
|
|
169
|
-
placement: direction === 'rtl' ? 'bottom right' : 'bottom left',
|
|
170
|
-
targetRef: targetRef,
|
|
171
|
-
hideArrow: true,
|
|
172
|
-
isOpen: isOpen,
|
|
173
|
-
onOpenChange: setOpen,
|
|
174
|
-
shouldFlip: props.shouldFlip
|
|
175
|
-
}, /*#__PURE__*/ (0, ($parcel$interopDefault($56Vum$react))).createElement((0, $56Vum$reactspectrumbutton.FieldButton), {
|
|
176
|
-
...(0, $56Vum$reactariautils.mergeProps)(buttonProps, focusPropsButton),
|
|
177
|
-
UNSAFE_className: (0, $56Vum$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), 'spectrum-FieldButton'),
|
|
178
|
-
isQuiet: isQuiet,
|
|
179
|
-
validationState: validationState
|
|
180
|
-
}, /*#__PURE__*/ (0, ($parcel$interopDefault($56Vum$react))).createElement((0, ($parcel$interopDefault($56Vum$spectrumiconsworkflowCalendar))), null)), /*#__PURE__*/ (0, ($parcel$interopDefault($56Vum$react))).createElement((0, $56Vum$reactspectrumdialog.Dialog), {
|
|
181
|
-
UNSAFE_className: (0, $56Vum$reactspectrumutils.classNames)((0, ($parcel$interopDefault($91c3db8c6a21ca71$exports))), 'react-spectrum-Datepicker-dialog'),
|
|
182
|
-
...dialogProps
|
|
183
|
-
}, /*#__PURE__*/ (0, ($parcel$interopDefault($56Vum$react))).createElement((0, $56Vum$reactspectrumview.Content), null, /*#__PURE__*/ (0, ($parcel$interopDefault($56Vum$react))).createElement("div", {
|
|
184
|
-
className: (0, $56Vum$reactspectrumutils.classNames)((0, ($parcel$interopDefault($91c3db8c6a21ca71$exports))), 'react-spectrum-Datepicker-dialogContent')
|
|
185
|
-
}, /*#__PURE__*/ (0, ($parcel$interopDefault($56Vum$react))).createElement((0, $56Vum$reactspectrumcalendar.RangeCalendar), {
|
|
186
|
-
...calendarProps,
|
|
187
|
-
visibleMonths: visibleMonths,
|
|
188
|
-
createCalendar: props.createCalendar,
|
|
189
|
-
UNSAFE_className: (0, $56Vum$reactspectrumutils.classNames)((0, ($parcel$interopDefault($91c3db8c6a21ca71$exports))), 'react-spectrum-Datepicker-calendar', {
|
|
190
|
-
'is-invalid': validationState === 'invalid'
|
|
191
|
-
})
|
|
192
|
-
}), showTimeField && /*#__PURE__*/ (0, ($parcel$interopDefault($56Vum$react))).createElement((0, $56Vum$reactspectrumlayout.Flex), {
|
|
193
|
-
gap: "size-100",
|
|
194
|
-
marginTop: "size-100",
|
|
195
|
-
UNSAFE_className: (0, $56Vum$reactspectrumutils.classNames)((0, ($parcel$interopDefault($91c3db8c6a21ca71$exports))), 'react-spectrum-Datepicker-timeFields')
|
|
196
|
-
}, /*#__PURE__*/ (0, ($parcel$interopDefault($56Vum$react))).createElement((0, $740ff83729a8f317$exports.TimeField), {
|
|
197
|
-
label: stringFormatter.format('startTime'),
|
|
198
|
-
value: ((_state_timeRange = state.timeRange) === null || _state_timeRange === void 0 ? void 0 : _state_timeRange.start) || null,
|
|
199
|
-
onChange: (v)=>state.setTime('start', v),
|
|
200
|
-
placeholderValue: timePlaceholder,
|
|
201
|
-
granularity: timeGranularity,
|
|
202
|
-
minValue: timeMinValue,
|
|
203
|
-
maxValue: timeMaxValue,
|
|
204
|
-
hourCycle: props.hourCycle,
|
|
205
|
-
hideTimeZone: props.hideTimeZone,
|
|
206
|
-
flex: true
|
|
207
|
-
}), /*#__PURE__*/ (0, ($parcel$interopDefault($56Vum$react))).createElement((0, $740ff83729a8f317$exports.TimeField), {
|
|
208
|
-
label: stringFormatter.format('endTime'),
|
|
209
|
-
value: ((_state_timeRange1 = state.timeRange) === null || _state_timeRange1 === void 0 ? void 0 : _state_timeRange1.end) || null,
|
|
210
|
-
onChange: (v)=>state.setTime('end', v),
|
|
211
|
-
placeholderValue: timePlaceholder,
|
|
212
|
-
granularity: timeGranularity,
|
|
213
|
-
minValue: timeMinValue,
|
|
214
|
-
maxValue: timeMaxValue,
|
|
215
|
-
hourCycle: props.hourCycle,
|
|
216
|
-
hideTimeZone: props.hideTimeZone,
|
|
217
|
-
flex: true
|
|
218
|
-
}))))))));
|
|
219
|
-
});
|
|
220
|
-
function $16cafb71dac155a4$var$DateRangeDash() {
|
|
221
|
-
return /*#__PURE__*/ (0, ($parcel$interopDefault($56Vum$react))).createElement("span", {
|
|
222
|
-
"aria-hidden": "true",
|
|
223
|
-
"data-testid": "date-range-dash",
|
|
224
|
-
className: (0, $56Vum$reactspectrumutils.classNames)((0, ($parcel$interopDefault($91c3db8c6a21ca71$exports))), 'react-spectrum-Datepicker-rangeDash')
|
|
225
|
-
});
|
|
226
|
-
}
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
//# sourceMappingURL=DateRangePicker.main.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/datepicker/src/DateRangePicker.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 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, SpectrumDateRangePickerProps} from '@react-types/datepicker';\nimport {Dialog, DialogTrigger} from '@react-spectrum/dialog';\nimport {Field} from '@react-spectrum/label';\nimport {FieldButton} from '@react-spectrum/button';\nimport {Flex} from '@react-spectrum/layout';\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 {RangeCalendar} from '@react-spectrum/calendar';\nimport React, {ReactElement, useRef} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css';\nimport {TimeField} from './TimeField';\nimport {useDateRangePicker} from '@react-aria/datepicker';\nimport {useDateRangePickerState} 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 * DateRangePickers combine two DateFields and a RangeCalendar popover to allow users\n * to enter or select a date and time range.\n */\nexport const DateRangePicker = React.forwardRef(function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProps<T>, ref: FocusableRef<HTMLElement>) {\n props = useProviderProps(props);\n props = useFormProps(props);\n let {\n isQuiet,\n isDisabled,\n autoFocus,\n placeholderValue,\n maxVisibleMonths = 1\n } = props;\n let {hoverProps, isHovered} = useHover({isDisabled});\n let targetRef = useRef<HTMLDivElement | null>(null);\n let state = useDateRangePickerState({\n ...props,\n shouldCloseOnSelect: () => !state.hasTime\n });\n let {labelProps, groupProps, buttonProps, dialogProps, startFieldProps, endFieldProps, descriptionProps, errorMessageProps, calendarProps, isInvalid, validationErrors, validationDetails} = useDateRangePicker(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 // Multiplying by two for the two dates, adding one character for the dash, and then the padding around the dash\n let approximateWidth = `calc(${useFormattedDateWidth(state) * 2 + 1}ch + 2 * var(--spectrum-global-dimension-size-100))`;\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 <div style={{overflow: 'hidden', width: '100%'}}>\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 {...startFieldProps}\n data-testid=\"start-date\"\n isQuiet={props.isQuiet}\n inputClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-startField')} />\n <DateRangeDash />\n <DatePickerField\n {...endFieldProps}\n data-testid=\"end-date\"\n isQuiet={props.isQuiet}\n inputClassName={classNames(\n styles,\n 'spectrum-Datepicker-endField',\n classNames(\n datepickerStyles,\n 'react-spectrum-Datepicker-endField'\n )\n )} />\n </Input>\n </div>\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 <RangeCalendar\n {...calendarProps}\n visibleMonths={visibleMonths}\n createCalendar={props.createCalendar}\n UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-calendar', {'is-invalid': validationState === 'invalid'})} />\n {showTimeField &&\n <Flex gap=\"size-100\" marginTop=\"size-100\" UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-timeFields')}>\n <TimeField\n label={stringFormatter.format('startTime')}\n value={state.timeRange?.start || null}\n onChange={v => state.setTime('start', v)}\n placeholderValue={timePlaceholder}\n granularity={timeGranularity}\n minValue={timeMinValue}\n maxValue={timeMaxValue}\n hourCycle={props.hourCycle}\n hideTimeZone={props.hideTimeZone}\n flex />\n <TimeField\n label={stringFormatter.format('endTime')}\n value={state.timeRange?.end || null}\n onChange={v => state.setTime('end', v)}\n placeholderValue={timePlaceholder}\n granularity={timeGranularity}\n minValue={timeMinValue}\n maxValue={timeMaxValue}\n hourCycle={props.hourCycle}\n hideTimeZone={props.hideTimeZone}\n flex />\n </Flex>\n }\n </div>\n </Content>\n </Dialog>\n </DialogTrigger>\n </div>\n </Field>\n );\n}) as <T extends DateValue>(props: SpectrumDateRangePickerProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\n\nfunction DateRangeDash() {\n return (\n <span\n aria-hidden=\"true\"\n data-testid=\"date-range-dash\"\n className={classNames(datepickerStyles, 'react-spectrum-Datepicker-rangeDash')} />\n );\n}\n"],"names":[],"version":3,"file":"DateRangePicker.main.js.map"}
|
package/dist/DateRangePicker.mjs
DELETED
|
@@ -1,224 +0,0 @@
|
|
|
1
|
-
import {DatePickerField as $d2bb88c82604b25f$export$34dc4cfa15ead1} from "./DatePickerField.mjs";
|
|
2
|
-
import "./datepicker.e85992d8.css";
|
|
3
|
-
import $dUbU7$styles_cssmodulejs from "./styles_css.mjs";
|
|
4
|
-
import {Input as $79348162c55d687f$export$f5b8910cec6cf069} from "./Input.mjs";
|
|
5
|
-
import $dUbU7$intlStringsmodulejs from "./intlStrings.mjs";
|
|
6
|
-
import "./datepicker.4d1286b0.css";
|
|
7
|
-
import $dUbU7$inputgroup_vars_cssmodulejs from "./inputgroup_vars_css.mjs";
|
|
8
|
-
import {TimeField as $f0a04554754386b6$export$5eaee2322dd727eb} from "./TimeField.mjs";
|
|
9
|
-
import {useFocusManagerRef as $ea94a5cfe92db3c2$export$71a23a36270e4bf0, useFormatHelpText as $ea94a5cfe92db3c2$export$322f4580ccd8dde6, useFormattedDateWidth as $ea94a5cfe92db3c2$export$31e22e3c931fc056, useVisibleMonths as $ea94a5cfe92db3c2$export$12ce2869ce471b1f} from "./utils.mjs";
|
|
10
|
-
import $dUbU7$spectrumiconsworkflowCalendar from "@spectrum-icons/workflow/Calendar";
|
|
11
|
-
import {classNames as $dUbU7$classNames} from "@react-spectrum/utils";
|
|
12
|
-
import {Content as $dUbU7$Content} from "@react-spectrum/view";
|
|
13
|
-
import {DialogTrigger as $dUbU7$DialogTrigger, Dialog as $dUbU7$Dialog} from "@react-spectrum/dialog";
|
|
14
|
-
import {Field as $dUbU7$Field} from "@react-spectrum/label";
|
|
15
|
-
import {FieldButton as $dUbU7$FieldButton} from "@react-spectrum/button";
|
|
16
|
-
import {Flex as $dUbU7$Flex} from "@react-spectrum/layout";
|
|
17
|
-
import {mergeProps as $dUbU7$mergeProps} from "@react-aria/utils";
|
|
18
|
-
import {RangeCalendar as $dUbU7$RangeCalendar} from "@react-spectrum/calendar";
|
|
19
|
-
import $dUbU7$react, {useRef as $dUbU7$useRef} from "react";
|
|
20
|
-
import {useDateRangePicker as $dUbU7$useDateRangePicker} from "@react-aria/datepicker";
|
|
21
|
-
import {useDateRangePickerState as $dUbU7$useDateRangePickerState} from "@react-stately/datepicker";
|
|
22
|
-
import {useFocusRing as $dUbU7$useFocusRing} from "@react-aria/focus";
|
|
23
|
-
import {useFormProps as $dUbU7$useFormProps} from "@react-spectrum/form";
|
|
24
|
-
import {useHover as $dUbU7$useHover} from "@react-aria/interactions";
|
|
25
|
-
import {useLocale as $dUbU7$useLocale, useLocalizedStringFormatter as $dUbU7$useLocalizedStringFormatter} from "@react-aria/i18n";
|
|
26
|
-
import {useProviderProps as $dUbU7$useProviderProps} from "@react-spectrum/provider";
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
function $parcel$interopDefault(a) {
|
|
30
|
-
return a && a.__esModule ? a.default : a;
|
|
31
|
-
}
|
|
32
|
-
/*
|
|
33
|
-
* Copyright 2020 Adobe. All rights reserved.
|
|
34
|
-
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
35
|
-
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
36
|
-
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
37
|
-
*
|
|
38
|
-
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
39
|
-
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
40
|
-
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
41
|
-
* governing permissions and limitations under the License.
|
|
42
|
-
*/
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
const $cb301300011a98f7$export$17334619f3ac2224 = /*#__PURE__*/ (0, $dUbU7$react).forwardRef(function DateRangePicker(props, ref) {
|
|
67
|
-
var _state_timeRange, _state_timeRange1;
|
|
68
|
-
props = (0, $dUbU7$useProviderProps)(props);
|
|
69
|
-
props = (0, $dUbU7$useFormProps)(props);
|
|
70
|
-
let { isQuiet: isQuiet, isDisabled: isDisabled, autoFocus: autoFocus, placeholderValue: placeholderValue, maxVisibleMonths: maxVisibleMonths = 1 } = props;
|
|
71
|
-
let { hoverProps: hoverProps, isHovered: isHovered } = (0, $dUbU7$useHover)({
|
|
72
|
-
isDisabled: isDisabled
|
|
73
|
-
});
|
|
74
|
-
let targetRef = (0, $dUbU7$useRef)(null);
|
|
75
|
-
let state = (0, $dUbU7$useDateRangePickerState)({
|
|
76
|
-
...props,
|
|
77
|
-
shouldCloseOnSelect: ()=>!state.hasTime
|
|
78
|
-
});
|
|
79
|
-
let { labelProps: labelProps, groupProps: groupProps, buttonProps: buttonProps, dialogProps: dialogProps, startFieldProps: startFieldProps, endFieldProps: endFieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, calendarProps: calendarProps, isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = (0, $dUbU7$useDateRangePicker)(props, state, targetRef);
|
|
80
|
-
let { isOpen: isOpen, setOpen: setOpen } = state;
|
|
81
|
-
let { direction: direction } = (0, $dUbU7$useLocale)();
|
|
82
|
-
let domRef = (0, $ea94a5cfe92db3c2$export$71a23a36270e4bf0)(ref);
|
|
83
|
-
let stringFormatter = (0, $dUbU7$useLocalizedStringFormatter)((0, ($parcel$interopDefault($dUbU7$intlStringsmodulejs))), '@react-spectrum/datepicker');
|
|
84
|
-
let { isFocused: isFocused, isFocusVisible: isFocusVisible, focusProps: focusProps } = (0, $dUbU7$useFocusRing)({
|
|
85
|
-
within: true,
|
|
86
|
-
isTextInput: true,
|
|
87
|
-
autoFocus: autoFocus
|
|
88
|
-
});
|
|
89
|
-
let { isFocused: isFocusedButton, focusProps: focusPropsButton } = (0, $dUbU7$useFocusRing)({
|
|
90
|
-
within: false,
|
|
91
|
-
isTextInput: false,
|
|
92
|
-
autoFocus: autoFocus
|
|
93
|
-
});
|
|
94
|
-
let className = (0, $dUbU7$classNames)((0, ($parcel$interopDefault($dUbU7$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, $dUbU7$classNames)((0, ($parcel$interopDefault($dUbU7$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
|
-
// Multiplying by two for the two dates, adding one character for the dash, and then the padding around the dash
|
|
119
|
-
let approximateWidth = `calc(${(0, $ea94a5cfe92db3c2$export$31e22e3c931fc056)(state) * 2 + 1}ch + 2 * var(--spectrum-global-dimension-size-100))`;
|
|
120
|
-
return /*#__PURE__*/ (0, $dUbU7$react).createElement((0, $dUbU7$Field), {
|
|
121
|
-
...props,
|
|
122
|
-
ref: domRef,
|
|
123
|
-
elementType: "span",
|
|
124
|
-
description: description,
|
|
125
|
-
labelProps: labelProps,
|
|
126
|
-
descriptionProps: descriptionProps,
|
|
127
|
-
errorMessageProps: errorMessageProps,
|
|
128
|
-
validationState: validationState,
|
|
129
|
-
isInvalid: isInvalid,
|
|
130
|
-
validationErrors: validationErrors,
|
|
131
|
-
validationDetails: validationDetails,
|
|
132
|
-
wrapperClassName: (0, $dUbU7$classNames)((0, ($parcel$interopDefault($dUbU7$styles_cssmodulejs))), 'react-spectrum-Datepicker-fieldWrapper')
|
|
133
|
-
}, /*#__PURE__*/ (0, $dUbU7$react).createElement("div", {
|
|
134
|
-
...(0, $dUbU7$mergeProps)(groupProps, hoverProps, focusProps),
|
|
135
|
-
className: className,
|
|
136
|
-
ref: targetRef
|
|
137
|
-
}, /*#__PURE__*/ (0, $dUbU7$react).createElement("div", {
|
|
138
|
-
style: {
|
|
139
|
-
overflow: 'hidden',
|
|
140
|
-
width: '100%'
|
|
141
|
-
}
|
|
142
|
-
}, /*#__PURE__*/ (0, $dUbU7$react).createElement((0, $79348162c55d687f$export$f5b8910cec6cf069), {
|
|
143
|
-
isDisabled: isDisabled,
|
|
144
|
-
isQuiet: isQuiet,
|
|
145
|
-
validationState: validationState,
|
|
146
|
-
className: (0, $dUbU7$classNames)((0, ($parcel$interopDefault($dUbU7$inputgroup_vars_cssmodulejs))), 'spectrum-InputGroup-field'),
|
|
147
|
-
inputClassName: fieldClassName,
|
|
148
|
-
disableFocusRing: true,
|
|
149
|
-
minWidth: approximateWidth
|
|
150
|
-
}, /*#__PURE__*/ (0, $dUbU7$react).createElement((0, $d2bb88c82604b25f$export$34dc4cfa15ead1), {
|
|
151
|
-
...startFieldProps,
|
|
152
|
-
"data-testid": "start-date",
|
|
153
|
-
isQuiet: props.isQuiet,
|
|
154
|
-
inputClassName: (0, $dUbU7$classNames)((0, ($parcel$interopDefault($dUbU7$styles_cssmodulejs))), 'react-spectrum-Datepicker-startField')
|
|
155
|
-
}), /*#__PURE__*/ (0, $dUbU7$react).createElement($cb301300011a98f7$var$DateRangeDash, null), /*#__PURE__*/ (0, $dUbU7$react).createElement((0, $d2bb88c82604b25f$export$34dc4cfa15ead1), {
|
|
156
|
-
...endFieldProps,
|
|
157
|
-
"data-testid": "end-date",
|
|
158
|
-
isQuiet: props.isQuiet,
|
|
159
|
-
inputClassName: (0, $dUbU7$classNames)((0, ($parcel$interopDefault($dUbU7$inputgroup_vars_cssmodulejs))), 'spectrum-Datepicker-endField', (0, $dUbU7$classNames)((0, ($parcel$interopDefault($dUbU7$styles_cssmodulejs))), 'react-spectrum-Datepicker-endField'))
|
|
160
|
-
}))), /*#__PURE__*/ (0, $dUbU7$react).createElement((0, $dUbU7$DialogTrigger), {
|
|
161
|
-
type: "popover",
|
|
162
|
-
mobileType: "tray",
|
|
163
|
-
placement: direction === 'rtl' ? 'bottom right' : 'bottom left',
|
|
164
|
-
targetRef: targetRef,
|
|
165
|
-
hideArrow: true,
|
|
166
|
-
isOpen: isOpen,
|
|
167
|
-
onOpenChange: setOpen,
|
|
168
|
-
shouldFlip: props.shouldFlip
|
|
169
|
-
}, /*#__PURE__*/ (0, $dUbU7$react).createElement((0, $dUbU7$FieldButton), {
|
|
170
|
-
...(0, $dUbU7$mergeProps)(buttonProps, focusPropsButton),
|
|
171
|
-
UNSAFE_className: (0, $dUbU7$classNames)((0, ($parcel$interopDefault($dUbU7$inputgroup_vars_cssmodulejs))), 'spectrum-FieldButton'),
|
|
172
|
-
isQuiet: isQuiet,
|
|
173
|
-
validationState: validationState
|
|
174
|
-
}, /*#__PURE__*/ (0, $dUbU7$react).createElement((0, $dUbU7$spectrumiconsworkflowCalendar), null)), /*#__PURE__*/ (0, $dUbU7$react).createElement((0, $dUbU7$Dialog), {
|
|
175
|
-
UNSAFE_className: (0, $dUbU7$classNames)((0, ($parcel$interopDefault($dUbU7$styles_cssmodulejs))), 'react-spectrum-Datepicker-dialog'),
|
|
176
|
-
...dialogProps
|
|
177
|
-
}, /*#__PURE__*/ (0, $dUbU7$react).createElement((0, $dUbU7$Content), null, /*#__PURE__*/ (0, $dUbU7$react).createElement("div", {
|
|
178
|
-
className: (0, $dUbU7$classNames)((0, ($parcel$interopDefault($dUbU7$styles_cssmodulejs))), 'react-spectrum-Datepicker-dialogContent')
|
|
179
|
-
}, /*#__PURE__*/ (0, $dUbU7$react).createElement((0, $dUbU7$RangeCalendar), {
|
|
180
|
-
...calendarProps,
|
|
181
|
-
visibleMonths: visibleMonths,
|
|
182
|
-
createCalendar: props.createCalendar,
|
|
183
|
-
UNSAFE_className: (0, $dUbU7$classNames)((0, ($parcel$interopDefault($dUbU7$styles_cssmodulejs))), 'react-spectrum-Datepicker-calendar', {
|
|
184
|
-
'is-invalid': validationState === 'invalid'
|
|
185
|
-
})
|
|
186
|
-
}), showTimeField && /*#__PURE__*/ (0, $dUbU7$react).createElement((0, $dUbU7$Flex), {
|
|
187
|
-
gap: "size-100",
|
|
188
|
-
marginTop: "size-100",
|
|
189
|
-
UNSAFE_className: (0, $dUbU7$classNames)((0, ($parcel$interopDefault($dUbU7$styles_cssmodulejs))), 'react-spectrum-Datepicker-timeFields')
|
|
190
|
-
}, /*#__PURE__*/ (0, $dUbU7$react).createElement((0, $f0a04554754386b6$export$5eaee2322dd727eb), {
|
|
191
|
-
label: stringFormatter.format('startTime'),
|
|
192
|
-
value: ((_state_timeRange = state.timeRange) === null || _state_timeRange === void 0 ? void 0 : _state_timeRange.start) || null,
|
|
193
|
-
onChange: (v)=>state.setTime('start', v),
|
|
194
|
-
placeholderValue: timePlaceholder,
|
|
195
|
-
granularity: timeGranularity,
|
|
196
|
-
minValue: timeMinValue,
|
|
197
|
-
maxValue: timeMaxValue,
|
|
198
|
-
hourCycle: props.hourCycle,
|
|
199
|
-
hideTimeZone: props.hideTimeZone,
|
|
200
|
-
flex: true
|
|
201
|
-
}), /*#__PURE__*/ (0, $dUbU7$react).createElement((0, $f0a04554754386b6$export$5eaee2322dd727eb), {
|
|
202
|
-
label: stringFormatter.format('endTime'),
|
|
203
|
-
value: ((_state_timeRange1 = state.timeRange) === null || _state_timeRange1 === void 0 ? void 0 : _state_timeRange1.end) || null,
|
|
204
|
-
onChange: (v)=>state.setTime('end', v),
|
|
205
|
-
placeholderValue: timePlaceholder,
|
|
206
|
-
granularity: timeGranularity,
|
|
207
|
-
minValue: timeMinValue,
|
|
208
|
-
maxValue: timeMaxValue,
|
|
209
|
-
hourCycle: props.hourCycle,
|
|
210
|
-
hideTimeZone: props.hideTimeZone,
|
|
211
|
-
flex: true
|
|
212
|
-
}))))))));
|
|
213
|
-
});
|
|
214
|
-
function $cb301300011a98f7$var$DateRangeDash() {
|
|
215
|
-
return /*#__PURE__*/ (0, $dUbU7$react).createElement("span", {
|
|
216
|
-
"aria-hidden": "true",
|
|
217
|
-
"data-testid": "date-range-dash",
|
|
218
|
-
className: (0, $dUbU7$classNames)((0, ($parcel$interopDefault($dUbU7$styles_cssmodulejs))), 'react-spectrum-Datepicker-rangeDash')
|
|
219
|
-
});
|
|
220
|
-
}
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
export {$cb301300011a98f7$export$17334619f3ac2224 as DateRangePicker};
|
|
224
|
-
//# sourceMappingURL=DateRangePicker.module.js.map
|