@react-aria/datepicker 3.10.0 → 3.11.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/ar-AE.mjs +1 -1
- package/dist/bg-BG.mjs +1 -1
- package/dist/cs-CZ.mjs +1 -1
- package/dist/da-DK.mjs +1 -1
- package/dist/de-DE.mjs +1 -1
- package/dist/el-GR.mjs +1 -1
- package/dist/en-US.mjs +1 -1
- package/dist/es-ES.mjs +1 -1
- package/dist/et-EE.mjs +1 -1
- package/dist/fi-FI.mjs +1 -1
- package/dist/fr-FR.mjs +1 -1
- package/dist/he-IL.mjs +1 -1
- package/dist/hr-HR.mjs +1 -1
- package/dist/hu-HU.mjs +1 -1
- package/dist/intlStrings.mjs +1 -1
- package/dist/it-IT.mjs +1 -1
- package/dist/ja-JP.mjs +1 -1
- package/dist/ko-KR.mjs +1 -1
- package/dist/lt-LT.mjs +1 -1
- package/dist/lv-LV.mjs +1 -1
- package/dist/nb-NO.mjs +1 -1
- package/dist/nl-NL.mjs +1 -1
- package/dist/pl-PL.mjs +1 -1
- package/dist/pt-BR.mjs +1 -1
- package/dist/pt-PT.mjs +1 -1
- package/dist/ro-RO.mjs +1 -1
- package/dist/ru-RU.mjs +1 -1
- package/dist/sk-SK.mjs +1 -1
- package/dist/sl-SI.mjs +1 -1
- package/dist/sr-SP.mjs +1 -1
- package/dist/sv-SE.mjs +1 -1
- package/dist/tr-TR.mjs +1 -1
- package/dist/types.d.ts +10 -10
- package/dist/types.d.ts.map +1 -1
- package/dist/uk-UA.mjs +1 -1
- package/dist/useDateField.main.js +27 -26
- package/dist/useDateField.main.js.map +1 -1
- package/dist/useDateField.mjs +28 -27
- package/dist/useDateField.module.js +27 -26
- package/dist/useDateField.module.js.map +1 -1
- package/dist/useDatePicker.main.js +23 -23
- package/dist/useDatePicker.main.js.map +1 -1
- package/dist/useDatePicker.mjs +24 -24
- package/dist/useDatePicker.module.js +23 -23
- package/dist/useDatePicker.module.js.map +1 -1
- package/dist/useDatePickerGroup.main.js +10 -10
- package/dist/useDatePickerGroup.main.js.map +1 -1
- package/dist/useDatePickerGroup.mjs +11 -11
- package/dist/useDatePickerGroup.module.js +10 -10
- package/dist/useDatePickerGroup.module.js.map +1 -1
- package/dist/useDateRangePicker.main.js +28 -28
- package/dist/useDateRangePicker.main.js.map +1 -1
- package/dist/useDateRangePicker.mjs +29 -29
- package/dist/useDateRangePicker.module.js +28 -28
- package/dist/useDateRangePicker.module.js.map +1 -1
- package/dist/useDateSegment.main.js +79 -72
- package/dist/useDateSegment.main.js.map +1 -1
- package/dist/useDateSegment.mjs +80 -73
- package/dist/useDateSegment.module.js +79 -72
- package/dist/useDateSegment.module.js.map +1 -1
- package/dist/useDisplayNames.main.js +2 -2
- package/dist/useDisplayNames.mjs +3 -3
- package/dist/useDisplayNames.module.js +2 -2
- package/dist/zh-CN.mjs +1 -1
- package/dist/zh-TW.mjs +1 -1
- package/package.json +21 -21
- package/src/useDateField.ts +8 -7
- package/src/useDatePicker.ts +3 -3
- package/src/useDatePickerGroup.ts +4 -4
- package/src/useDateRangePicker.ts +3 -3
- package/src/useDateSegment.ts +15 -5
|
@@ -36,27 +36,27 @@ $parcel$export(module.exports, "useDateSegment", () => $5c015c6316d1904d$export$
|
|
|
36
36
|
|
|
37
37
|
|
|
38
38
|
function $5c015c6316d1904d$export$1315d136e6f7581(segment, state, ref) {
|
|
39
|
-
let enteredKeys = (0, $5Tgzj$react.useRef)(
|
|
39
|
+
let enteredKeys = (0, $5Tgzj$react.useRef)('');
|
|
40
40
|
let { locale: locale } = (0, $5Tgzj$reactariai18n.useLocale)();
|
|
41
41
|
let displayNames = (0, $934ac650a0aceb4b$exports.useDisplayNames)();
|
|
42
42
|
let { ariaLabel: ariaLabel, ariaLabelledBy: ariaLabelledBy, ariaDescribedBy: ariaDescribedBy, focusManager: focusManager } = (0, $4acc2f407c169e55$exports.hookData).get(state);
|
|
43
|
-
let textValue = segment.isPlaceholder ?
|
|
43
|
+
let textValue = segment.isPlaceholder ? '' : segment.text;
|
|
44
44
|
let options = (0, $5Tgzj$react.useMemo)(()=>state.dateFormatter.resolvedOptions(), [
|
|
45
45
|
state.dateFormatter
|
|
46
46
|
]);
|
|
47
47
|
let monthDateFormatter = (0, $5Tgzj$reactariai18n.useDateFormatter)({
|
|
48
|
-
month:
|
|
48
|
+
month: 'long',
|
|
49
49
|
timeZone: options.timeZone
|
|
50
50
|
});
|
|
51
51
|
let hourDateFormatter = (0, $5Tgzj$reactariai18n.useDateFormatter)({
|
|
52
|
-
hour:
|
|
52
|
+
hour: 'numeric',
|
|
53
53
|
hour12: options.hour12,
|
|
54
54
|
timeZone: options.timeZone
|
|
55
55
|
});
|
|
56
|
-
if (segment.type ===
|
|
56
|
+
if (segment.type === 'month' && !segment.isPlaceholder) {
|
|
57
57
|
let monthTextValue = monthDateFormatter.format(state.dateValue);
|
|
58
58
|
textValue = monthTextValue !== textValue ? `${textValue} \u{2013} ${monthTextValue}` : monthTextValue;
|
|
59
|
-
} else if (segment.type ===
|
|
59
|
+
} else if (segment.type === 'hour' && !segment.isPlaceholder) textValue = hourDateFormatter.format(state.dateValue);
|
|
60
60
|
let { spinButtonProps: spinButtonProps } = (0, $5Tgzj$reactariaspinbutton.useSpinButton)({
|
|
61
61
|
// The ARIA spec says aria-valuenow is optional if there's no value, but aXe seems to require it.
|
|
62
62
|
// This doesn't seem to have any negative effects with real AT since we also use aria-valuetext.
|
|
@@ -69,27 +69,27 @@ function $5c015c6316d1904d$export$1315d136e6f7581(segment, state, ref) {
|
|
|
69
69
|
isReadOnly: state.isReadOnly || !segment.isEditable,
|
|
70
70
|
isRequired: state.isRequired,
|
|
71
71
|
onIncrement: ()=>{
|
|
72
|
-
enteredKeys.current =
|
|
72
|
+
enteredKeys.current = '';
|
|
73
73
|
state.increment(segment.type);
|
|
74
74
|
},
|
|
75
75
|
onDecrement: ()=>{
|
|
76
|
-
enteredKeys.current =
|
|
76
|
+
enteredKeys.current = '';
|
|
77
77
|
state.decrement(segment.type);
|
|
78
78
|
},
|
|
79
79
|
onIncrementPage: ()=>{
|
|
80
|
-
enteredKeys.current =
|
|
80
|
+
enteredKeys.current = '';
|
|
81
81
|
state.incrementPage(segment.type);
|
|
82
82
|
},
|
|
83
83
|
onDecrementPage: ()=>{
|
|
84
|
-
enteredKeys.current =
|
|
84
|
+
enteredKeys.current = '';
|
|
85
85
|
state.decrementPage(segment.type);
|
|
86
86
|
},
|
|
87
87
|
onIncrementToMax: ()=>{
|
|
88
|
-
enteredKeys.current =
|
|
88
|
+
enteredKeys.current = '';
|
|
89
89
|
state.setSegment(segment.type, segment.maxValue);
|
|
90
90
|
},
|
|
91
91
|
onDecrementToMin: ()=>{
|
|
92
|
-
enteredKeys.current =
|
|
92
|
+
enteredKeys.current = '';
|
|
93
93
|
state.setSegment(segment.type, segment.minValue);
|
|
94
94
|
}
|
|
95
95
|
});
|
|
@@ -103,20 +103,20 @@ function $5c015c6316d1904d$export$1315d136e6f7581(segment, state, ref) {
|
|
|
103
103
|
if (parser.isValidPartialNumber(segment.text) && !state.isReadOnly && !segment.isPlaceholder) {
|
|
104
104
|
let newValue = segment.text.slice(0, -1);
|
|
105
105
|
let parsed = parser.parse(newValue);
|
|
106
|
-
newValue = parsed === 0 ?
|
|
106
|
+
newValue = parsed === 0 ? '' : newValue;
|
|
107
107
|
if (newValue.length === 0 || parsed === 0) state.clearSegment(segment.type);
|
|
108
108
|
else state.setSegment(segment.type, parsed);
|
|
109
109
|
enteredKeys.current = newValue;
|
|
110
|
-
} else if (segment.type ===
|
|
110
|
+
} else if (segment.type === 'dayPeriod') state.clearSegment(segment.type);
|
|
111
111
|
};
|
|
112
112
|
let onKeyDown = (e)=>{
|
|
113
113
|
// Firefox does not fire selectstart for Ctrl/Cmd + A
|
|
114
114
|
// https://bugzilla.mozilla.org/show_bug.cgi?id=1742153
|
|
115
|
-
if (e.key ===
|
|
115
|
+
if (e.key === 'a' && ((0, $5Tgzj$reactariautils.isMac)() ? e.metaKey : e.ctrlKey)) e.preventDefault();
|
|
116
116
|
if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;
|
|
117
117
|
switch(e.key){
|
|
118
|
-
case
|
|
119
|
-
case
|
|
118
|
+
case 'Backspace':
|
|
119
|
+
case 'Delete':
|
|
120
120
|
// Safari on iOS does not fire beforeinput for the backspace key because the cursor is at the start.
|
|
121
121
|
e.preventDefault();
|
|
122
122
|
e.stopPropagation();
|
|
@@ -126,34 +126,34 @@ function $5c015c6316d1904d$export$1315d136e6f7581(segment, state, ref) {
|
|
|
126
126
|
};
|
|
127
127
|
// Safari dayPeriod option doesn't work...
|
|
128
128
|
let { startsWith: startsWith } = (0, $5Tgzj$reactariai18n.useFilter)({
|
|
129
|
-
sensitivity:
|
|
129
|
+
sensitivity: 'base'
|
|
130
130
|
});
|
|
131
131
|
let amPmFormatter = (0, $5Tgzj$reactariai18n.useDateFormatter)({
|
|
132
|
-
hour:
|
|
132
|
+
hour: 'numeric',
|
|
133
133
|
hour12: true
|
|
134
134
|
});
|
|
135
135
|
let am = (0, $5Tgzj$react.useMemo)(()=>{
|
|
136
136
|
let date = new Date();
|
|
137
137
|
date.setHours(0);
|
|
138
|
-
return amPmFormatter.formatToParts(date).find((part)=>part.type ===
|
|
138
|
+
return amPmFormatter.formatToParts(date).find((part)=>part.type === 'dayPeriod').value;
|
|
139
139
|
}, [
|
|
140
140
|
amPmFormatter
|
|
141
141
|
]);
|
|
142
142
|
let pm = (0, $5Tgzj$react.useMemo)(()=>{
|
|
143
143
|
let date = new Date();
|
|
144
144
|
date.setHours(12);
|
|
145
|
-
return amPmFormatter.formatToParts(date).find((part)=>part.type ===
|
|
145
|
+
return amPmFormatter.formatToParts(date).find((part)=>part.type === 'dayPeriod').value;
|
|
146
146
|
}, [
|
|
147
147
|
amPmFormatter
|
|
148
148
|
]);
|
|
149
149
|
// Get a list of formatted era names so users can type the first character to choose one.
|
|
150
150
|
let eraFormatter = (0, $5Tgzj$reactariai18n.useDateFormatter)({
|
|
151
|
-
year:
|
|
152
|
-
era:
|
|
153
|
-
timeZone:
|
|
151
|
+
year: 'numeric',
|
|
152
|
+
era: 'narrow',
|
|
153
|
+
timeZone: 'UTC'
|
|
154
154
|
});
|
|
155
155
|
let eras = (0, $5Tgzj$react.useMemo)(()=>{
|
|
156
|
-
if (segment.type !==
|
|
156
|
+
if (segment.type !== 'era') return [];
|
|
157
157
|
let date = (0, $5Tgzj$internationalizeddate.toCalendar)(new (0, $5Tgzj$internationalizeddate.CalendarDate)(1, 1, 1), state.calendar);
|
|
158
158
|
let eras = state.calendar.getEras().map((era)=>{
|
|
159
159
|
let eraDate = date.set({
|
|
@@ -161,9 +161,9 @@ function $5c015c6316d1904d$export$1315d136e6f7581(segment, state, ref) {
|
|
|
161
161
|
month: 1,
|
|
162
162
|
day: 1,
|
|
163
163
|
era: era
|
|
164
|
-
}).toDate(
|
|
164
|
+
}).toDate('UTC');
|
|
165
165
|
let parts = eraFormatter.formatToParts(eraDate);
|
|
166
|
-
let formatted = parts.find((p)=>p.type ===
|
|
166
|
+
let formatted = parts.find((p)=>p.type === 'era').value;
|
|
167
167
|
return {
|
|
168
168
|
era: era,
|
|
169
169
|
formatted: formatted
|
|
@@ -184,38 +184,38 @@ function $5c015c6316d1904d$export$1315d136e6f7581(segment, state, ref) {
|
|
|
184
184
|
if (state.isDisabled || state.isReadOnly) return;
|
|
185
185
|
let newValue = enteredKeys.current + key;
|
|
186
186
|
switch(segment.type){
|
|
187
|
-
case
|
|
188
|
-
if (startsWith(am, key)) state.setSegment(
|
|
189
|
-
else if (startsWith(pm, key)) state.setSegment(
|
|
187
|
+
case 'dayPeriod':
|
|
188
|
+
if (startsWith(am, key)) state.setSegment('dayPeriod', 0);
|
|
189
|
+
else if (startsWith(pm, key)) state.setSegment('dayPeriod', 12);
|
|
190
190
|
else break;
|
|
191
191
|
focusManager.focusNext();
|
|
192
192
|
break;
|
|
193
|
-
case
|
|
193
|
+
case 'era':
|
|
194
194
|
{
|
|
195
195
|
let matched = eras.find((e)=>startsWith(e.formatted, key));
|
|
196
196
|
if (matched) {
|
|
197
|
-
state.setSegment(
|
|
197
|
+
state.setSegment('era', matched.era);
|
|
198
198
|
focusManager.focusNext();
|
|
199
199
|
}
|
|
200
200
|
break;
|
|
201
201
|
}
|
|
202
|
-
case
|
|
203
|
-
case
|
|
204
|
-
case
|
|
205
|
-
case
|
|
206
|
-
case
|
|
207
|
-
case
|
|
202
|
+
case 'day':
|
|
203
|
+
case 'hour':
|
|
204
|
+
case 'minute':
|
|
205
|
+
case 'second':
|
|
206
|
+
case 'month':
|
|
207
|
+
case 'year':
|
|
208
208
|
{
|
|
209
209
|
if (!parser.isValidPartialNumber(newValue)) return;
|
|
210
210
|
let numberValue = parser.parse(newValue);
|
|
211
211
|
let segmentValue = numberValue;
|
|
212
212
|
let allowsZero = segment.minValue === 0;
|
|
213
|
-
if (segment.type ===
|
|
213
|
+
if (segment.type === 'hour' && state.dateFormatter.resolvedOptions().hour12) {
|
|
214
214
|
switch(state.dateFormatter.resolvedOptions().hourCycle){
|
|
215
|
-
case
|
|
215
|
+
case 'h11':
|
|
216
216
|
if (numberValue > 11) segmentValue = parser.parse(key);
|
|
217
217
|
break;
|
|
218
|
-
case
|
|
218
|
+
case 'h12':
|
|
219
219
|
allowsZero = false;
|
|
220
220
|
if (numberValue > 12) segmentValue = parser.parse(key);
|
|
221
221
|
break;
|
|
@@ -225,8 +225,8 @@ function $5c015c6316d1904d$export$1315d136e6f7581(segment, state, ref) {
|
|
|
225
225
|
if (isNaN(numberValue)) return;
|
|
226
226
|
let shouldSetValue = segmentValue !== 0 || allowsZero;
|
|
227
227
|
if (shouldSetValue) state.setSegment(segment.type, segmentValue);
|
|
228
|
-
if (Number(numberValue +
|
|
229
|
-
enteredKeys.current =
|
|
228
|
+
if (Number(numberValue + '0') > segment.maxValue || newValue.length >= String(segment.maxValue).length) {
|
|
229
|
+
enteredKeys.current = '';
|
|
230
230
|
if (shouldSetValue) focusManager.focusNext();
|
|
231
231
|
} else enteredKeys.current = newValue;
|
|
232
232
|
break;
|
|
@@ -234,7 +234,7 @@ function $5c015c6316d1904d$export$1315d136e6f7581(segment, state, ref) {
|
|
|
234
234
|
}
|
|
235
235
|
};
|
|
236
236
|
let onFocus = ()=>{
|
|
237
|
-
enteredKeys.current =
|
|
237
|
+
enteredKeys.current = '';
|
|
238
238
|
(0, $5Tgzj$reactariautils.scrollIntoViewport)(ref.current, {
|
|
239
239
|
containingElement: (0, $5Tgzj$reactariautils.getScrollParent)(ref.current)
|
|
240
240
|
});
|
|
@@ -242,16 +242,24 @@ function $5c015c6316d1904d$export$1315d136e6f7581(segment, state, ref) {
|
|
|
242
242
|
let selection = window.getSelection();
|
|
243
243
|
selection.collapse(ref.current);
|
|
244
244
|
};
|
|
245
|
-
let
|
|
245
|
+
let documentRef = (0, $5Tgzj$react.useRef)(typeof document !== 'undefined' ? document : null);
|
|
246
|
+
(0, $5Tgzj$reactariautils.useEvent)(documentRef, 'selectionchange', ()=>{
|
|
247
|
+
// Enforce that the selection is collapsed when inside a date segment.
|
|
248
|
+
// Otherwise, when tapping on a segment in Android Chrome and then entering text,
|
|
249
|
+
// composition events will be fired that break the DOM structure and crash the page.
|
|
250
|
+
let selection = window.getSelection();
|
|
251
|
+
if (ref.current.contains(selection.anchorNode)) selection.collapse(ref.current);
|
|
252
|
+
});
|
|
253
|
+
let compositionRef = (0, $5Tgzj$react.useRef)('');
|
|
246
254
|
// @ts-ignore - TODO: possibly old TS version? doesn't fail in my editor...
|
|
247
|
-
(0, $5Tgzj$reactariautils.useEvent)(ref,
|
|
255
|
+
(0, $5Tgzj$reactariautils.useEvent)(ref, 'beforeinput', (e)=>{
|
|
248
256
|
e.preventDefault();
|
|
249
257
|
switch(e.inputType){
|
|
250
|
-
case
|
|
251
|
-
case
|
|
258
|
+
case 'deleteContentBackward':
|
|
259
|
+
case 'deleteContentForward':
|
|
252
260
|
if (parser.isValidPartialNumber(segment.text) && !state.isReadOnly) backspace();
|
|
253
261
|
break;
|
|
254
|
-
case
|
|
262
|
+
case 'insertCompositionText':
|
|
255
263
|
// insertCompositionText cannot be canceled.
|
|
256
264
|
// Record the current state of the element so we can restore it in the `input` event below.
|
|
257
265
|
compositionRef.current = ref.current.textContent;
|
|
@@ -264,10 +272,10 @@ function $5c015c6316d1904d$export$1315d136e6f7581(segment, state, ref) {
|
|
|
264
272
|
break;
|
|
265
273
|
}
|
|
266
274
|
});
|
|
267
|
-
(0, $5Tgzj$reactariautils.useEvent)(ref,
|
|
275
|
+
(0, $5Tgzj$reactariautils.useEvent)(ref, 'input', (e)=>{
|
|
268
276
|
let { inputType: inputType, data: data } = e;
|
|
269
277
|
switch(inputType){
|
|
270
|
-
case
|
|
278
|
+
case 'insertCompositionText':
|
|
271
279
|
// Reset the DOM to how it was in the beforeinput event.
|
|
272
280
|
ref.current.textContent = compositionRef.current;
|
|
273
281
|
// Android sometimes fires key presses of letters as composition events. Need to handle am/pm keys here too.
|
|
@@ -290,12 +298,12 @@ function $5c015c6316d1904d$export$1315d136e6f7581(segment, state, ref) {
|
|
|
290
298
|
focusManager
|
|
291
299
|
]);
|
|
292
300
|
// spinbuttons cannot be focused with VoiceOver on iOS.
|
|
293
|
-
let touchPropOverrides = (0, $5Tgzj$reactariautils.isIOS)() || segment.type ===
|
|
294
|
-
role:
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
301
|
+
let touchPropOverrides = (0, $5Tgzj$reactariautils.isIOS)() || segment.type === 'timeZoneName' ? {
|
|
302
|
+
role: 'textbox',
|
|
303
|
+
'aria-valuemax': null,
|
|
304
|
+
'aria-valuemin': null,
|
|
305
|
+
'aria-valuetext': null,
|
|
306
|
+
'aria-valuenow': null
|
|
299
307
|
} : {};
|
|
300
308
|
// Only apply aria-describedby to the first segment, unless the field is invalid. This avoids it being
|
|
301
309
|
// read every time the user navigates to a new segment.
|
|
@@ -307,39 +315,38 @@ function $5c015c6316d1904d$export$1315d136e6f7581(segment, state, ref) {
|
|
|
307
315
|
let isEditable = !state.isDisabled && !state.isReadOnly && segment.isEditable;
|
|
308
316
|
// Prepend the label passed from the field to each segment name.
|
|
309
317
|
// This is needed because VoiceOver on iOS does not announce groups.
|
|
310
|
-
let name = segment.type ===
|
|
318
|
+
let name = segment.type === 'literal' ? '' : displayNames.of(segment.type);
|
|
311
319
|
let labelProps = (0, $5Tgzj$reactariautils.useLabels)({
|
|
312
|
-
|
|
313
|
-
|
|
320
|
+
'aria-label': `${name}${ariaLabel ? `, ${ariaLabel}` : ''}${ariaLabelledBy ? ', ' : ''}`,
|
|
321
|
+
'aria-labelledby': ariaLabelledBy
|
|
314
322
|
});
|
|
315
323
|
// Literal segments should not be visible to screen readers. We don't really need any of the above,
|
|
316
324
|
// but the rules of hooks mean hooks cannot be conditional so we have to put this condition here.
|
|
317
|
-
if (segment.type ===
|
|
325
|
+
if (segment.type === 'literal') return {
|
|
318
326
|
segmentProps: {
|
|
319
|
-
|
|
327
|
+
'aria-hidden': true
|
|
320
328
|
}
|
|
321
329
|
};
|
|
322
330
|
return {
|
|
323
331
|
segmentProps: (0, $5Tgzj$reactariautils.mergeProps)(spinButtonProps, labelProps, {
|
|
324
332
|
id: id,
|
|
325
333
|
...touchPropOverrides,
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
334
|
+
'aria-invalid': state.isInvalid ? 'true' : undefined,
|
|
335
|
+
'aria-describedby': ariaDescribedBy,
|
|
336
|
+
'aria-readonly': state.isReadOnly || !segment.isEditable ? 'true' : undefined,
|
|
337
|
+
'data-placeholder': segment.isPlaceholder || undefined,
|
|
330
338
|
contentEditable: isEditable,
|
|
331
339
|
suppressContentEditableWarning: isEditable,
|
|
332
|
-
spellCheck: isEditable ?
|
|
333
|
-
|
|
334
|
-
autoCorrect: isEditable ? "off" : undefined,
|
|
340
|
+
spellCheck: isEditable ? 'false' : undefined,
|
|
341
|
+
autoCorrect: isEditable ? 'off' : undefined,
|
|
335
342
|
// Capitalization was changed in React 17...
|
|
336
|
-
[parseInt((0, ($parcel$interopDefault($5Tgzj$react))).version, 10) >= 17 ?
|
|
337
|
-
inputMode: state.isDisabled || segment.type ===
|
|
343
|
+
[parseInt((0, ($parcel$interopDefault($5Tgzj$react))).version, 10) >= 17 ? 'enterKeyHint' : 'enterkeyhint']: isEditable ? 'next' : undefined,
|
|
344
|
+
inputMode: state.isDisabled || segment.type === 'dayPeriod' || segment.type === 'era' || !isEditable ? undefined : 'numeric',
|
|
338
345
|
tabIndex: state.isDisabled ? undefined : 0,
|
|
339
346
|
onKeyDown: onKeyDown,
|
|
340
347
|
onFocus: onFocus,
|
|
341
348
|
style: {
|
|
342
|
-
caretColor:
|
|
349
|
+
caretColor: 'transparent'
|
|
343
350
|
},
|
|
344
351
|
// Prevent pointer events from reaching useDatePickerGroup, and allow native browser behavior to focus the segment.
|
|
345
352
|
onPointerDown (e) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-aria/datepicker/src/useDateSegment.ts"],"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 {CalendarDate, toCalendar} from '@internationalized/date';\nimport {DateFieldState, DateSegment} from '@react-stately/datepicker';\nimport {DOMAttributes} from '@react-types/shared';\nimport {getScrollParent, isIOS, isMac, mergeProps, scrollIntoViewport, useEvent, useId, useLabels, useLayoutEffect} from '@react-aria/utils';\nimport {hookData} from './useDateField';\nimport {NumberParser} from '@internationalized/number';\nimport React, {RefObject, useMemo, useRef} from 'react';\nimport {useDateFormatter, useFilter, useLocale} from '@react-aria/i18n';\nimport {useDisplayNames} from './useDisplayNames';\nimport {useSpinButton} from '@react-aria/spinbutton';\n\nexport interface DateSegmentAria {\n /** Props for the segment element. */\n segmentProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a segment in a date field.\n * A date segment displays an individual unit of a date and time, and allows users to edit\n * the value by typing or using the arrow keys to increment and decrement.\n */\nexport function useDateSegment(segment: DateSegment, state: DateFieldState, ref: RefObject<HTMLElement>): DateSegmentAria {\n let enteredKeys = useRef('');\n let {locale} = useLocale();\n let displayNames = useDisplayNames();\n let {ariaLabel, ariaLabelledBy, ariaDescribedBy, focusManager} = hookData.get(state);\n\n let textValue = segment.isPlaceholder ? '' : segment.text;\n let options = useMemo(() => state.dateFormatter.resolvedOptions(), [state.dateFormatter]);\n let monthDateFormatter = useDateFormatter({month: 'long', timeZone: options.timeZone});\n let hourDateFormatter = useDateFormatter({\n hour: 'numeric',\n hour12: options.hour12,\n timeZone: options.timeZone\n });\n\n if (segment.type === 'month' && !segment.isPlaceholder) {\n let monthTextValue = monthDateFormatter.format(state.dateValue);\n textValue = monthTextValue !== textValue ? `${textValue} – ${monthTextValue}` : monthTextValue;\n } else if (segment.type === 'hour' && !segment.isPlaceholder) {\n textValue = hourDateFormatter.format(state.dateValue);\n }\n\n let {spinButtonProps} = useSpinButton({\n // The ARIA spec says aria-valuenow is optional if there's no value, but aXe seems to require it.\n // This doesn't seem to have any negative effects with real AT since we also use aria-valuetext.\n // https://github.com/dequelabs/axe-core/issues/3505\n value: segment.value,\n textValue,\n minValue: segment.minValue,\n maxValue: segment.maxValue,\n isDisabled: state.isDisabled,\n isReadOnly: state.isReadOnly || !segment.isEditable,\n isRequired: state.isRequired,\n onIncrement: () => {\n enteredKeys.current = '';\n state.increment(segment.type);\n },\n onDecrement: () => {\n enteredKeys.current = '';\n state.decrement(segment.type);\n },\n onIncrementPage: () => {\n enteredKeys.current = '';\n state.incrementPage(segment.type);\n },\n onDecrementPage: () => {\n enteredKeys.current = '';\n state.decrementPage(segment.type);\n },\n onIncrementToMax: () => {\n enteredKeys.current = '';\n state.setSegment(segment.type, segment.maxValue);\n },\n onDecrementToMin: () => {\n enteredKeys.current = '';\n state.setSegment(segment.type, segment.minValue);\n }\n });\n\n let parser = useMemo(() => new NumberParser(locale, {maximumFractionDigits: 0}), [locale]);\n\n let backspace = () => {\n if (segment.text === segment.placeholder) {\n focusManager.focusPrevious();\n }\n if (parser.isValidPartialNumber(segment.text) && !state.isReadOnly && !segment.isPlaceholder) {\n let newValue = segment.text.slice(0, -1);\n let parsed = parser.parse(newValue);\n newValue = parsed === 0 ? '' : newValue;\n if (newValue.length === 0 || parsed === 0) {\n state.clearSegment(segment.type);\n } else {\n state.setSegment(segment.type, parsed);\n }\n enteredKeys.current = newValue;\n } else if (segment.type === 'dayPeriod') {\n state.clearSegment(segment.type);\n }\n };\n\n let onKeyDown = (e) => {\n // Firefox does not fire selectstart for Ctrl/Cmd + A\n // https://bugzilla.mozilla.org/show_bug.cgi?id=1742153\n if (e.key === 'a' && (isMac() ? e.metaKey : e.ctrlKey)) {\n e.preventDefault();\n }\n\n if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) {\n return;\n }\n\n switch (e.key) {\n case 'Backspace':\n case 'Delete': {\n // Safari on iOS does not fire beforeinput for the backspace key because the cursor is at the start.\n e.preventDefault();\n e.stopPropagation();\n backspace();\n break;\n }\n }\n };\n\n // Safari dayPeriod option doesn't work...\n let {startsWith} = useFilter({sensitivity: 'base'});\n let amPmFormatter = useDateFormatter({hour: 'numeric', hour12: true});\n let am = useMemo(() => {\n let date = new Date();\n date.setHours(0);\n return amPmFormatter.formatToParts(date).find(part => part.type === 'dayPeriod').value;\n }, [amPmFormatter]);\n\n let pm = useMemo(() => {\n let date = new Date();\n date.setHours(12);\n return amPmFormatter.formatToParts(date).find(part => part.type === 'dayPeriod').value;\n }, [amPmFormatter]);\n\n // Get a list of formatted era names so users can type the first character to choose one.\n let eraFormatter = useDateFormatter({year: 'numeric', era: 'narrow', timeZone: 'UTC'});\n let eras = useMemo(() => {\n if (segment.type !== 'era') {\n return [];\n }\n\n let date = toCalendar(new CalendarDate(1, 1, 1), state.calendar);\n let eras = state.calendar.getEras().map(era => {\n let eraDate = date.set({year: 1, month: 1, day: 1, era}).toDate('UTC');\n let parts = eraFormatter.formatToParts(eraDate);\n let formatted = parts.find(p => p.type === 'era').value;\n return {era, formatted};\n });\n\n // Remove the common prefix from formatted values. This is so that in calendars with eras like\n // ERA0 and ERA1 (e.g. Ethiopic), users can press \"0\" and \"1\" to select an era. In other cases,\n // the first letter is used.\n let prefixLength = commonPrefixLength(eras.map(era => era.formatted));\n if (prefixLength) {\n for (let era of eras) {\n era.formatted = era.formatted.slice(prefixLength);\n }\n }\n\n return eras;\n }, [eraFormatter, state.calendar, segment.type]);\n\n let onInput = (key: string) => {\n if (state.isDisabled || state.isReadOnly) {\n return;\n }\n\n let newValue = enteredKeys.current + key;\n\n switch (segment.type) {\n case 'dayPeriod':\n if (startsWith(am, key)) {\n state.setSegment('dayPeriod', 0);\n } else if (startsWith(pm, key)) {\n state.setSegment('dayPeriod', 12);\n } else {\n break;\n }\n focusManager.focusNext();\n break;\n case 'era': {\n let matched = eras.find(e => startsWith(e.formatted, key));\n if (matched) {\n state.setSegment('era', matched.era);\n focusManager.focusNext();\n }\n break;\n }\n case 'day':\n case 'hour':\n case 'minute':\n case 'second':\n case 'month':\n case 'year': {\n if (!parser.isValidPartialNumber(newValue)) {\n return;\n }\n\n let numberValue = parser.parse(newValue);\n let segmentValue = numberValue;\n let allowsZero = segment.minValue === 0;\n if (segment.type === 'hour' && state.dateFormatter.resolvedOptions().hour12) {\n switch (state.dateFormatter.resolvedOptions().hourCycle) {\n case 'h11':\n if (numberValue > 11) {\n segmentValue = parser.parse(key);\n }\n break;\n case 'h12':\n allowsZero = false;\n if (numberValue > 12) {\n segmentValue = parser.parse(key);\n }\n break;\n }\n\n if (segment.value >= 12 && numberValue > 1) {\n numberValue += 12;\n }\n } else if (numberValue > segment.maxValue) {\n segmentValue = parser.parse(key);\n }\n\n if (isNaN(numberValue)) {\n return;\n }\n\n let shouldSetValue = segmentValue !== 0 || allowsZero;\n if (shouldSetValue) {\n state.setSegment(segment.type, segmentValue);\n }\n\n if (Number(numberValue + '0') > segment.maxValue || newValue.length >= String(segment.maxValue).length) {\n enteredKeys.current = '';\n if (shouldSetValue) {\n focusManager.focusNext();\n }\n } else {\n enteredKeys.current = newValue;\n }\n break;\n }\n }\n };\n\n let onFocus = () => {\n enteredKeys.current = '';\n scrollIntoViewport(ref.current, {containingElement: getScrollParent(ref.current)});\n\n // Collapse selection to start or Chrome won't fire input events.\n let selection = window.getSelection();\n selection.collapse(ref.current);\n };\n\n let compositionRef = useRef('');\n // @ts-ignore - TODO: possibly old TS version? doesn't fail in my editor...\n useEvent(ref, 'beforeinput', e => {\n e.preventDefault();\n\n switch (e.inputType) {\n case 'deleteContentBackward':\n case 'deleteContentForward':\n if (parser.isValidPartialNumber(segment.text) && !state.isReadOnly) {\n backspace();\n }\n break;\n case 'insertCompositionText':\n // insertCompositionText cannot be canceled.\n // Record the current state of the element so we can restore it in the `input` event below.\n compositionRef.current = ref.current.textContent;\n\n // Safari gets stuck in a composition state unless we also assign to the value here.\n // eslint-disable-next-line no-self-assign\n ref.current.textContent = ref.current.textContent;\n break;\n default:\n if (e.data != null) {\n onInput(e.data);\n }\n break;\n }\n });\n\n useEvent(ref, 'input', (e: InputEvent) => {\n let {inputType, data} = e;\n switch (inputType) {\n case 'insertCompositionText':\n // Reset the DOM to how it was in the beforeinput event.\n ref.current.textContent = compositionRef.current;\n\n // Android sometimes fires key presses of letters as composition events. Need to handle am/pm keys here too.\n // Can also happen e.g. with Pinyin keyboard on iOS.\n if (startsWith(am, data) || startsWith(pm, data)) {\n onInput(data);\n }\n break;\n }\n });\n\n useLayoutEffect(() => {\n let element = ref.current;\n return () => {\n // If the focused segment is removed, focus the previous one, or the next one if there was no previous one.\n if (document.activeElement === element) {\n let prev = focusManager.focusPrevious();\n if (!prev) {\n focusManager.focusNext();\n }\n }\n };\n }, [ref, focusManager]);\n\n // spinbuttons cannot be focused with VoiceOver on iOS.\n let touchPropOverrides = isIOS() || segment.type === 'timeZoneName' ? {\n role: 'textbox',\n 'aria-valuemax': null,\n 'aria-valuemin': null,\n 'aria-valuetext': null,\n 'aria-valuenow': null\n } : {};\n\n // Only apply aria-describedby to the first segment, unless the field is invalid. This avoids it being\n // read every time the user navigates to a new segment.\n let firstSegment = useMemo(() => state.segments.find(s => s.isEditable), [state.segments]);\n if (segment !== firstSegment && !state.isInvalid) {\n ariaDescribedBy = undefined;\n }\n\n let id = useId();\n let isEditable = !state.isDisabled && !state.isReadOnly && segment.isEditable;\n\n // Prepend the label passed from the field to each segment name.\n // This is needed because VoiceOver on iOS does not announce groups.\n let name = segment.type === 'literal' ? '' : displayNames.of(segment.type);\n let labelProps = useLabels({\n 'aria-label': `${name}${ariaLabel ? `, ${ariaLabel}` : ''}${ariaLabelledBy ? ', ' : ''}`,\n 'aria-labelledby': ariaLabelledBy\n });\n\n // Literal segments should not be visible to screen readers. We don't really need any of the above,\n // but the rules of hooks mean hooks cannot be conditional so we have to put this condition here.\n if (segment.type === 'literal') {\n return {\n segmentProps: {\n 'aria-hidden': true\n }\n };\n }\n\n return {\n segmentProps: mergeProps(spinButtonProps, labelProps, {\n id,\n ...touchPropOverrides,\n 'aria-invalid': state.isInvalid ? 'true' : undefined,\n 'aria-describedby': ariaDescribedBy,\n 'aria-readonly': state.isReadOnly || !segment.isEditable ? 'true' : undefined,\n 'data-placeholder': segment.isPlaceholder || undefined,\n contentEditable: isEditable,\n suppressContentEditableWarning: isEditable,\n spellCheck: isEditable ? 'false' : undefined,\n autoCapitalize: isEditable ? 'off' : undefined,\n autoCorrect: isEditable ? 'off' : undefined,\n // Capitalization was changed in React 17...\n [parseInt(React.version, 10) >= 17 ? 'enterKeyHint' : 'enterkeyhint']: isEditable ? 'next' : undefined,\n inputMode: state.isDisabled || segment.type === 'dayPeriod' || segment.type === 'era' || !isEditable ? undefined : 'numeric',\n tabIndex: state.isDisabled ? undefined : 0,\n onKeyDown,\n onFocus,\n style: {\n caretColor: 'transparent'\n },\n // Prevent pointer events from reaching useDatePickerGroup, and allow native browser behavior to focus the segment.\n onPointerDown(e) {\n e.stopPropagation();\n },\n onMouseDown(e) {\n e.stopPropagation();\n }\n })\n };\n}\n\nfunction commonPrefixLength(strings: string[]): number {\n // Sort the strings, and compare the characters in the first and last to find the common prefix.\n strings.sort();\n let first = strings[0];\n let last = strings[strings.length - 1];\n for (let i = 0; i < first.length; i++) {\n if (first[i] !== last[i]) {\n return i;\n }\n }\n return 0;\n}\n"],"names":[],"version":3,"file":"useDateSegment.main.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-aria/datepicker/src/useDateSegment.ts"],"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 {CalendarDate, toCalendar} from '@internationalized/date';\nimport {DateFieldState, DateSegment} from '@react-stately/datepicker';\nimport {getScrollParent, isIOS, isMac, mergeProps, scrollIntoViewport, useEvent, useId, useLabels, useLayoutEffect} from '@react-aria/utils';\nimport {hookData} from './useDateField';\nimport {NumberParser} from '@internationalized/number';\nimport React, {useMemo, useRef} from 'react';\nimport {RefObject} from '@react-types/shared';\nimport {useDateFormatter, useFilter, useLocale} from '@react-aria/i18n';\nimport {useDisplayNames} from './useDisplayNames';\nimport {useSpinButton} from '@react-aria/spinbutton';\n\nexport interface DateSegmentAria {\n /** Props for the segment element. */\n segmentProps: React.HTMLAttributes<HTMLDivElement>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a segment in a date field.\n * A date segment displays an individual unit of a date and time, and allows users to edit\n * the value by typing or using the arrow keys to increment and decrement.\n */\nexport function useDateSegment(segment: DateSegment, state: DateFieldState, ref: RefObject<HTMLElement | null>): DateSegmentAria {\n let enteredKeys = useRef('');\n let {locale} = useLocale();\n let displayNames = useDisplayNames();\n let {ariaLabel, ariaLabelledBy, ariaDescribedBy, focusManager} = hookData.get(state);\n\n let textValue = segment.isPlaceholder ? '' : segment.text;\n let options = useMemo(() => state.dateFormatter.resolvedOptions(), [state.dateFormatter]);\n let monthDateFormatter = useDateFormatter({month: 'long', timeZone: options.timeZone});\n let hourDateFormatter = useDateFormatter({\n hour: 'numeric',\n hour12: options.hour12,\n timeZone: options.timeZone\n });\n\n if (segment.type === 'month' && !segment.isPlaceholder) {\n let monthTextValue = monthDateFormatter.format(state.dateValue);\n textValue = monthTextValue !== textValue ? `${textValue} – ${monthTextValue}` : monthTextValue;\n } else if (segment.type === 'hour' && !segment.isPlaceholder) {\n textValue = hourDateFormatter.format(state.dateValue);\n }\n\n let {spinButtonProps} = useSpinButton({\n // The ARIA spec says aria-valuenow is optional if there's no value, but aXe seems to require it.\n // This doesn't seem to have any negative effects with real AT since we also use aria-valuetext.\n // https://github.com/dequelabs/axe-core/issues/3505\n value: segment.value,\n textValue,\n minValue: segment.minValue,\n maxValue: segment.maxValue,\n isDisabled: state.isDisabled,\n isReadOnly: state.isReadOnly || !segment.isEditable,\n isRequired: state.isRequired,\n onIncrement: () => {\n enteredKeys.current = '';\n state.increment(segment.type);\n },\n onDecrement: () => {\n enteredKeys.current = '';\n state.decrement(segment.type);\n },\n onIncrementPage: () => {\n enteredKeys.current = '';\n state.incrementPage(segment.type);\n },\n onDecrementPage: () => {\n enteredKeys.current = '';\n state.decrementPage(segment.type);\n },\n onIncrementToMax: () => {\n enteredKeys.current = '';\n state.setSegment(segment.type, segment.maxValue);\n },\n onDecrementToMin: () => {\n enteredKeys.current = '';\n state.setSegment(segment.type, segment.minValue);\n }\n });\n\n let parser = useMemo(() => new NumberParser(locale, {maximumFractionDigits: 0}), [locale]);\n\n let backspace = () => {\n if (segment.text === segment.placeholder) {\n focusManager.focusPrevious();\n }\n if (parser.isValidPartialNumber(segment.text) && !state.isReadOnly && !segment.isPlaceholder) {\n let newValue = segment.text.slice(0, -1);\n let parsed = parser.parse(newValue);\n newValue = parsed === 0 ? '' : newValue;\n if (newValue.length === 0 || parsed === 0) {\n state.clearSegment(segment.type);\n } else {\n state.setSegment(segment.type, parsed);\n }\n enteredKeys.current = newValue;\n } else if (segment.type === 'dayPeriod') {\n state.clearSegment(segment.type);\n }\n };\n\n let onKeyDown = (e) => {\n // Firefox does not fire selectstart for Ctrl/Cmd + A\n // https://bugzilla.mozilla.org/show_bug.cgi?id=1742153\n if (e.key === 'a' && (isMac() ? e.metaKey : e.ctrlKey)) {\n e.preventDefault();\n }\n\n if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) {\n return;\n }\n\n switch (e.key) {\n case 'Backspace':\n case 'Delete': {\n // Safari on iOS does not fire beforeinput for the backspace key because the cursor is at the start.\n e.preventDefault();\n e.stopPropagation();\n backspace();\n break;\n }\n }\n };\n\n // Safari dayPeriod option doesn't work...\n let {startsWith} = useFilter({sensitivity: 'base'});\n let amPmFormatter = useDateFormatter({hour: 'numeric', hour12: true});\n let am = useMemo(() => {\n let date = new Date();\n date.setHours(0);\n return amPmFormatter.formatToParts(date).find(part => part.type === 'dayPeriod').value;\n }, [amPmFormatter]);\n\n let pm = useMemo(() => {\n let date = new Date();\n date.setHours(12);\n return amPmFormatter.formatToParts(date).find(part => part.type === 'dayPeriod').value;\n }, [amPmFormatter]);\n\n // Get a list of formatted era names so users can type the first character to choose one.\n let eraFormatter = useDateFormatter({year: 'numeric', era: 'narrow', timeZone: 'UTC'});\n let eras = useMemo(() => {\n if (segment.type !== 'era') {\n return [];\n }\n\n let date = toCalendar(new CalendarDate(1, 1, 1), state.calendar);\n let eras = state.calendar.getEras().map(era => {\n let eraDate = date.set({year: 1, month: 1, day: 1, era}).toDate('UTC');\n let parts = eraFormatter.formatToParts(eraDate);\n let formatted = parts.find(p => p.type === 'era').value;\n return {era, formatted};\n });\n\n // Remove the common prefix from formatted values. This is so that in calendars with eras like\n // ERA0 and ERA1 (e.g. Ethiopic), users can press \"0\" and \"1\" to select an era. In other cases,\n // the first letter is used.\n let prefixLength = commonPrefixLength(eras.map(era => era.formatted));\n if (prefixLength) {\n for (let era of eras) {\n era.formatted = era.formatted.slice(prefixLength);\n }\n }\n\n return eras;\n }, [eraFormatter, state.calendar, segment.type]);\n\n let onInput = (key: string) => {\n if (state.isDisabled || state.isReadOnly) {\n return;\n }\n\n let newValue = enteredKeys.current + key;\n\n switch (segment.type) {\n case 'dayPeriod':\n if (startsWith(am, key)) {\n state.setSegment('dayPeriod', 0);\n } else if (startsWith(pm, key)) {\n state.setSegment('dayPeriod', 12);\n } else {\n break;\n }\n focusManager.focusNext();\n break;\n case 'era': {\n let matched = eras.find(e => startsWith(e.formatted, key));\n if (matched) {\n state.setSegment('era', matched.era);\n focusManager.focusNext();\n }\n break;\n }\n case 'day':\n case 'hour':\n case 'minute':\n case 'second':\n case 'month':\n case 'year': {\n if (!parser.isValidPartialNumber(newValue)) {\n return;\n }\n\n let numberValue = parser.parse(newValue);\n let segmentValue = numberValue;\n let allowsZero = segment.minValue === 0;\n if (segment.type === 'hour' && state.dateFormatter.resolvedOptions().hour12) {\n switch (state.dateFormatter.resolvedOptions().hourCycle) {\n case 'h11':\n if (numberValue > 11) {\n segmentValue = parser.parse(key);\n }\n break;\n case 'h12':\n allowsZero = false;\n if (numberValue > 12) {\n segmentValue = parser.parse(key);\n }\n break;\n }\n\n if (segment.value >= 12 && numberValue > 1) {\n numberValue += 12;\n }\n } else if (numberValue > segment.maxValue) {\n segmentValue = parser.parse(key);\n }\n\n if (isNaN(numberValue)) {\n return;\n }\n\n let shouldSetValue = segmentValue !== 0 || allowsZero;\n if (shouldSetValue) {\n state.setSegment(segment.type, segmentValue);\n }\n\n if (Number(numberValue + '0') > segment.maxValue || newValue.length >= String(segment.maxValue).length) {\n enteredKeys.current = '';\n if (shouldSetValue) {\n focusManager.focusNext();\n }\n } else {\n enteredKeys.current = newValue;\n }\n break;\n }\n }\n };\n\n let onFocus = () => {\n enteredKeys.current = '';\n scrollIntoViewport(ref.current, {containingElement: getScrollParent(ref.current)});\n\n // Collapse selection to start or Chrome won't fire input events.\n let selection = window.getSelection();\n selection.collapse(ref.current);\n };\n\n let documentRef = useRef(typeof document !== 'undefined' ? document : null);\n useEvent(documentRef, 'selectionchange', () => {\n // Enforce that the selection is collapsed when inside a date segment.\n // Otherwise, when tapping on a segment in Android Chrome and then entering text,\n // composition events will be fired that break the DOM structure and crash the page.\n let selection = window.getSelection();\n if (ref.current.contains(selection.anchorNode)) {\n selection.collapse(ref.current);\n }\n });\n\n let compositionRef = useRef('');\n // @ts-ignore - TODO: possibly old TS version? doesn't fail in my editor...\n useEvent(ref, 'beforeinput', e => {\n e.preventDefault();\n\n switch (e.inputType) {\n case 'deleteContentBackward':\n case 'deleteContentForward':\n if (parser.isValidPartialNumber(segment.text) && !state.isReadOnly) {\n backspace();\n }\n break;\n case 'insertCompositionText':\n // insertCompositionText cannot be canceled.\n // Record the current state of the element so we can restore it in the `input` event below.\n compositionRef.current = ref.current.textContent;\n\n // Safari gets stuck in a composition state unless we also assign to the value here.\n // eslint-disable-next-line no-self-assign\n ref.current.textContent = ref.current.textContent;\n break;\n default:\n if (e.data != null) {\n onInput(e.data);\n }\n break;\n }\n });\n\n useEvent(ref, 'input', (e: InputEvent) => {\n let {inputType, data} = e;\n switch (inputType) {\n case 'insertCompositionText':\n // Reset the DOM to how it was in the beforeinput event.\n ref.current.textContent = compositionRef.current;\n\n // Android sometimes fires key presses of letters as composition events. Need to handle am/pm keys here too.\n // Can also happen e.g. with Pinyin keyboard on iOS.\n if (startsWith(am, data) || startsWith(pm, data)) {\n onInput(data);\n }\n break;\n }\n });\n\n useLayoutEffect(() => {\n let element = ref.current;\n return () => {\n // If the focused segment is removed, focus the previous one, or the next one if there was no previous one.\n if (document.activeElement === element) {\n let prev = focusManager.focusPrevious();\n if (!prev) {\n focusManager.focusNext();\n }\n }\n };\n }, [ref, focusManager]);\n\n // spinbuttons cannot be focused with VoiceOver on iOS.\n let touchPropOverrides = isIOS() || segment.type === 'timeZoneName' ? {\n role: 'textbox',\n 'aria-valuemax': null,\n 'aria-valuemin': null,\n 'aria-valuetext': null,\n 'aria-valuenow': null\n } : {};\n\n // Only apply aria-describedby to the first segment, unless the field is invalid. This avoids it being\n // read every time the user navigates to a new segment.\n let firstSegment = useMemo(() => state.segments.find(s => s.isEditable), [state.segments]);\n if (segment !== firstSegment && !state.isInvalid) {\n ariaDescribedBy = undefined;\n }\n\n let id = useId();\n let isEditable = !state.isDisabled && !state.isReadOnly && segment.isEditable;\n\n // Prepend the label passed from the field to each segment name.\n // This is needed because VoiceOver on iOS does not announce groups.\n let name = segment.type === 'literal' ? '' : displayNames.of(segment.type);\n let labelProps = useLabels({\n 'aria-label': `${name}${ariaLabel ? `, ${ariaLabel}` : ''}${ariaLabelledBy ? ', ' : ''}`,\n 'aria-labelledby': ariaLabelledBy\n });\n\n // Literal segments should not be visible to screen readers. We don't really need any of the above,\n // but the rules of hooks mean hooks cannot be conditional so we have to put this condition here.\n if (segment.type === 'literal') {\n return {\n segmentProps: {\n 'aria-hidden': true\n }\n };\n }\n\n return {\n segmentProps: mergeProps(spinButtonProps, labelProps, {\n id,\n ...touchPropOverrides,\n 'aria-invalid': state.isInvalid ? 'true' : undefined,\n 'aria-describedby': ariaDescribedBy,\n 'aria-readonly': state.isReadOnly || !segment.isEditable ? 'true' : undefined,\n 'data-placeholder': segment.isPlaceholder || undefined,\n contentEditable: isEditable,\n suppressContentEditableWarning: isEditable,\n spellCheck: isEditable ? 'false' : undefined,\n autoCorrect: isEditable ? 'off' : undefined,\n // Capitalization was changed in React 17...\n [parseInt(React.version, 10) >= 17 ? 'enterKeyHint' : 'enterkeyhint']: isEditable ? 'next' : undefined,\n inputMode: state.isDisabled || segment.type === 'dayPeriod' || segment.type === 'era' || !isEditable ? undefined : 'numeric',\n tabIndex: state.isDisabled ? undefined : 0,\n onKeyDown,\n onFocus,\n style: {\n caretColor: 'transparent'\n },\n // Prevent pointer events from reaching useDatePickerGroup, and allow native browser behavior to focus the segment.\n onPointerDown(e) {\n e.stopPropagation();\n },\n onMouseDown(e) {\n e.stopPropagation();\n }\n })\n };\n}\n\nfunction commonPrefixLength(strings: string[]): number {\n // Sort the strings, and compare the characters in the first and last to find the common prefix.\n strings.sort();\n let first = strings[0];\n let last = strings[strings.length - 1];\n for (let i = 0; i < first.length; i++) {\n if (first[i] !== last[i]) {\n return i;\n }\n }\n return 0;\n}\n"],"names":[],"version":3,"file":"useDateSegment.main.js.map"}
|