@react-aria/numberfield 3.11.2 → 3.11.3
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/uk-UA.mjs +1 -1
- package/dist/useNumberField.main.js +32 -32
- package/dist/useNumberField.mjs +33 -33
- package/dist/useNumberField.module.js +32 -32
- package/dist/zh-CN.mjs +1 -1
- package/dist/zh-TW.mjs +1 -1
- package/package.json +12 -12
package/dist/ar-AE.mjs
CHANGED
package/dist/bg-BG.mjs
CHANGED
package/dist/cs-CZ.mjs
CHANGED
package/dist/da-DK.mjs
CHANGED
package/dist/de-DE.mjs
CHANGED
package/dist/el-GR.mjs
CHANGED
package/dist/en-US.mjs
CHANGED
package/dist/es-ES.mjs
CHANGED
package/dist/et-EE.mjs
CHANGED
package/dist/fi-FI.mjs
CHANGED
package/dist/fr-FR.mjs
CHANGED
package/dist/he-IL.mjs
CHANGED
package/dist/hr-HR.mjs
CHANGED
package/dist/hu-HU.mjs
CHANGED
package/dist/intlStrings.mjs
CHANGED
package/dist/it-IT.mjs
CHANGED
package/dist/ja-JP.mjs
CHANGED
package/dist/ko-KR.mjs
CHANGED
package/dist/lt-LT.mjs
CHANGED
package/dist/lv-LV.mjs
CHANGED
package/dist/nb-NO.mjs
CHANGED
package/dist/nl-NL.mjs
CHANGED
package/dist/pl-PL.mjs
CHANGED
package/dist/pt-BR.mjs
CHANGED
package/dist/pt-PT.mjs
CHANGED
package/dist/ro-RO.mjs
CHANGED
package/dist/ru-RU.mjs
CHANGED
package/dist/sk-SK.mjs
CHANGED
package/dist/sl-SI.mjs
CHANGED
package/dist/sr-SP.mjs
CHANGED
package/dist/sv-SE.mjs
CHANGED
package/dist/tr-TR.mjs
CHANGED
package/dist/uk-UA.mjs
CHANGED
|
@@ -38,7 +38,7 @@ $parcel$export(module.exports, "useNumberField", () => $fa863e9b015ae839$export$
|
|
|
38
38
|
function $fa863e9b015ae839$export$23f548e970bdf099(props, state, inputRef) {
|
|
39
39
|
let { id: id, decrementAriaLabel: decrementAriaLabel, incrementAriaLabel: incrementAriaLabel, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, minValue: minValue, maxValue: maxValue, autoFocus: autoFocus, label: label, formatOptions: formatOptions, onBlur: onBlur = ()=>{}, onFocus: onFocus, onFocusChange: onFocusChange, onKeyDown: onKeyDown, onKeyUp: onKeyUp, description: description, errorMessage: errorMessage, isWheelDisabled: isWheelDisabled, ...otherProps } = props;
|
|
40
40
|
let { increment: increment, incrementToMax: incrementToMax, decrement: decrement, decrementToMin: decrementToMin, numberValue: numberValue, inputValue: inputValue, commit: commit, commitValidation: commitValidation } = state;
|
|
41
|
-
const stringFormatter = (0, $9WaOX$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($4932e21065cdc2cd$exports))),
|
|
41
|
+
const stringFormatter = (0, $9WaOX$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($4932e21065cdc2cd$exports))), '@react-aria/numberfield');
|
|
42
42
|
let inputId = (0, $9WaOX$reactariautils.useId)(id);
|
|
43
43
|
let { focusProps: focusProps } = (0, $9WaOX$reactariainteractions.useFocus)({
|
|
44
44
|
onBlur () {
|
|
@@ -56,7 +56,7 @@ function $fa863e9b015ae839$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
56
56
|
...formatOptions,
|
|
57
57
|
currencySign: undefined
|
|
58
58
|
});
|
|
59
|
-
let textValue = (0, $9WaOX$react.useMemo)(()=>isNaN(numberValue) ?
|
|
59
|
+
let textValue = (0, $9WaOX$react.useMemo)(()=>isNaN(numberValue) ? '' : textValueFormatter.format(numberValue), [
|
|
60
60
|
textValueFormatter,
|
|
61
61
|
numberValue
|
|
62
62
|
]);
|
|
@@ -102,25 +102,25 @@ function $fa863e9b015ae839$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
102
102
|
// and based on testing on various devices to determine what keys are available in each inputMode.
|
|
103
103
|
let hasDecimals = intlOptions.maximumFractionDigits > 0;
|
|
104
104
|
let hasNegative = state.minValue === undefined || isNaN(state.minValue) || state.minValue < 0;
|
|
105
|
-
let inputMode =
|
|
105
|
+
let inputMode = 'numeric';
|
|
106
106
|
if ((0, $9WaOX$reactariautils.isIPhone)()) {
|
|
107
107
|
// iPhone doesn't have a minus sign in either numeric or decimal.
|
|
108
108
|
// Note this is only for iPhone, not iPad, which always has both
|
|
109
109
|
// minus and decimal in numeric.
|
|
110
|
-
if (hasNegative) inputMode =
|
|
111
|
-
else if (hasDecimals) inputMode =
|
|
110
|
+
if (hasNegative) inputMode = 'text';
|
|
111
|
+
else if (hasDecimals) inputMode = 'decimal';
|
|
112
112
|
} else if ((0, $9WaOX$reactariautils.isAndroid)()) {
|
|
113
113
|
// Android numeric has both a decimal point and minus key.
|
|
114
114
|
// decimal does not have a minus key.
|
|
115
|
-
if (hasNegative) inputMode =
|
|
116
|
-
else if (hasDecimals) inputMode =
|
|
115
|
+
if (hasNegative) inputMode = 'numeric';
|
|
116
|
+
else if (hasDecimals) inputMode = 'decimal';
|
|
117
117
|
}
|
|
118
118
|
let onChange = (value)=>{
|
|
119
119
|
if (state.validate(value)) state.setInputValue(value);
|
|
120
120
|
};
|
|
121
121
|
let domProps = (0, $9WaOX$reactariautils.filterDOMProps)(props);
|
|
122
122
|
let onKeyDownEnter = (0, $9WaOX$react.useCallback)((e)=>{
|
|
123
|
-
if (e.key ===
|
|
123
|
+
if (e.key === 'Enter') {
|
|
124
124
|
commit();
|
|
125
125
|
commitValidation();
|
|
126
126
|
} else e.continuePropagation();
|
|
@@ -142,11 +142,11 @@ function $fa863e9b015ae839$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
142
142
|
[(0, $9WaOX$reactstatelyform.privateValidationStateProp)]: state,
|
|
143
143
|
value: inputValue,
|
|
144
144
|
defaultValue: undefined,
|
|
145
|
-
autoComplete:
|
|
146
|
-
|
|
147
|
-
|
|
145
|
+
autoComplete: 'off',
|
|
146
|
+
'aria-label': props['aria-label'] || undefined,
|
|
147
|
+
'aria-labelledby': props['aria-labelledby'] || undefined,
|
|
148
148
|
id: inputId,
|
|
149
|
-
type:
|
|
149
|
+
type: 'text',
|
|
150
150
|
inputMode: inputMode,
|
|
151
151
|
onChange: onChange,
|
|
152
152
|
onBlur: onBlur,
|
|
@@ -165,15 +165,15 @@ function $fa863e9b015ae839$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
165
165
|
// override the spinbutton role, we can't focus a spin button with VO
|
|
166
166
|
role: null,
|
|
167
167
|
// ignore aria-roledescription on iOS so that required state will announce when it is present
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
autoCorrect:
|
|
174
|
-
spellCheck:
|
|
168
|
+
'aria-roledescription': !(0, $9WaOX$reactariautils.isIOS)() ? stringFormatter.format('numberField') : null,
|
|
169
|
+
'aria-valuemax': null,
|
|
170
|
+
'aria-valuemin': null,
|
|
171
|
+
'aria-valuenow': null,
|
|
172
|
+
'aria-valuetext': null,
|
|
173
|
+
autoCorrect: 'off',
|
|
174
|
+
spellCheck: 'false'
|
|
175
175
|
});
|
|
176
|
-
if (props.validationBehavior ===
|
|
176
|
+
if (props.validationBehavior === 'native') inputProps['aria-required'] = undefined;
|
|
177
177
|
let onButtonPressStart = (e)=>{
|
|
178
178
|
var _inputRef_current;
|
|
179
179
|
// If focus is already on the input, keep it there so we don't hide the
|
|
@@ -182,7 +182,7 @@ function $fa863e9b015ae839$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
182
182
|
// Otherwise, when using a mouse, move focus to the input.
|
|
183
183
|
// On touch, or with a screen reader, focus the button so that the software
|
|
184
184
|
// keyboard does not appear and the screen reader cursor is not moved off the button.
|
|
185
|
-
if (e.pointerType ===
|
|
185
|
+
if (e.pointerType === 'mouse') (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
|
|
186
186
|
else e.target.focus();
|
|
187
187
|
};
|
|
188
188
|
// Determine the label for the increment and decrement buttons. There are 4 cases:
|
|
@@ -195,18 +195,18 @@ function $fa863e9b015ae839$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
195
195
|
// (1) and (2) could possibly be combined and both use aria-labelledby. However, placing the label in
|
|
196
196
|
// the aria-label string rather than using aria-labelledby gives more flexibility to translators to change
|
|
197
197
|
// the order or add additional words around the label if needed.
|
|
198
|
-
let fieldLabel = props[
|
|
198
|
+
let fieldLabel = props['aria-label'] || (typeof props.label === 'string' ? props.label : '');
|
|
199
199
|
let ariaLabelledby;
|
|
200
|
-
if (!fieldLabel) ariaLabelledby = props.label != null ? labelProps.id : props[
|
|
200
|
+
if (!fieldLabel) ariaLabelledby = props.label != null ? labelProps.id : props['aria-labelledby'];
|
|
201
201
|
let incrementId = (0, $9WaOX$reactariautils.useId)();
|
|
202
202
|
let decrementId = (0, $9WaOX$reactariautils.useId)();
|
|
203
203
|
let incrementButtonProps = (0, $9WaOX$reactariautils.mergeProps)(incButtonProps, {
|
|
204
|
-
|
|
204
|
+
'aria-label': incrementAriaLabel || stringFormatter.format('increase', {
|
|
205
205
|
fieldLabel: fieldLabel
|
|
206
206
|
}).trim(),
|
|
207
207
|
id: ariaLabelledby && !incrementAriaLabel ? incrementId : null,
|
|
208
|
-
|
|
209
|
-
|
|
208
|
+
'aria-labelledby': ariaLabelledby && !incrementAriaLabel ? `${incrementId} ${ariaLabelledby}` : null,
|
|
209
|
+
'aria-controls': inputId,
|
|
210
210
|
excludeFromTabOrder: true,
|
|
211
211
|
preventFocusOnPress: true,
|
|
212
212
|
allowFocusWhenDisabled: true,
|
|
@@ -214,12 +214,12 @@ function $fa863e9b015ae839$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
214
214
|
onPressStart: onButtonPressStart
|
|
215
215
|
});
|
|
216
216
|
let decrementButtonProps = (0, $9WaOX$reactariautils.mergeProps)(decButtonProps, {
|
|
217
|
-
|
|
217
|
+
'aria-label': decrementAriaLabel || stringFormatter.format('decrease', {
|
|
218
218
|
fieldLabel: fieldLabel
|
|
219
219
|
}).trim(),
|
|
220
220
|
id: ariaLabelledby && !decrementAriaLabel ? decrementId : null,
|
|
221
|
-
|
|
222
|
-
|
|
221
|
+
'aria-labelledby': ariaLabelledby && !decrementAriaLabel ? `${decrementId} ${ariaLabelledby}` : null,
|
|
222
|
+
'aria-controls': inputId,
|
|
223
223
|
excludeFromTabOrder: true,
|
|
224
224
|
preventFocusOnPress: true,
|
|
225
225
|
allowFocusWhenDisabled: true,
|
|
@@ -229,9 +229,9 @@ function $fa863e9b015ae839$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
229
229
|
return {
|
|
230
230
|
groupProps: {
|
|
231
231
|
...focusWithinProps,
|
|
232
|
-
role:
|
|
233
|
-
|
|
234
|
-
|
|
232
|
+
role: 'group',
|
|
233
|
+
'aria-disabled': isDisabled,
|
|
234
|
+
'aria-invalid': isInvalid ? 'true' : undefined
|
|
235
235
|
},
|
|
236
236
|
labelProps: labelProps,
|
|
237
237
|
inputProps: inputProps,
|
package/dist/useNumberField.mjs
CHANGED
|
@@ -32,7 +32,7 @@ function $parcel$interopDefault(a) {
|
|
|
32
32
|
function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
|
|
33
33
|
let { id: id, decrementAriaLabel: decrementAriaLabel, incrementAriaLabel: incrementAriaLabel, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, minValue: minValue, maxValue: maxValue, autoFocus: autoFocus, label: label, formatOptions: formatOptions, onBlur: onBlur = ()=>{}, onFocus: onFocus, onFocusChange: onFocusChange, onKeyDown: onKeyDown, onKeyUp: onKeyUp, description: description, errorMessage: errorMessage, isWheelDisabled: isWheelDisabled, ...otherProps } = props;
|
|
34
34
|
let { increment: increment, incrementToMax: incrementToMax, decrement: decrement, decrementToMin: decrementToMin, numberValue: numberValue, inputValue: inputValue, commit: commit, commitValidation: commitValidation } = state;
|
|
35
|
-
const stringFormatter = (0, $jvaNJ$useLocalizedStringFormatter)((0, ($parcel$interopDefault($jvaNJ$intlStringsmodulejs))),
|
|
35
|
+
const stringFormatter = (0, $jvaNJ$useLocalizedStringFormatter)((0, ($parcel$interopDefault($jvaNJ$intlStringsmodulejs))), '@react-aria/numberfield');
|
|
36
36
|
let inputId = (0, $jvaNJ$useId)(id);
|
|
37
37
|
let { focusProps: focusProps } = (0, $jvaNJ$useFocus)({
|
|
38
38
|
onBlur () {
|
|
@@ -50,7 +50,7 @@ function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
50
50
|
...formatOptions,
|
|
51
51
|
currencySign: undefined
|
|
52
52
|
});
|
|
53
|
-
let textValue = (0, $jvaNJ$useMemo)(()=>isNaN(numberValue) ?
|
|
53
|
+
let textValue = (0, $jvaNJ$useMemo)(()=>isNaN(numberValue) ? '' : textValueFormatter.format(numberValue), [
|
|
54
54
|
textValueFormatter,
|
|
55
55
|
numberValue
|
|
56
56
|
]);
|
|
@@ -96,25 +96,25 @@ function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
96
96
|
// and based on testing on various devices to determine what keys are available in each inputMode.
|
|
97
97
|
let hasDecimals = intlOptions.maximumFractionDigits > 0;
|
|
98
98
|
let hasNegative = state.minValue === undefined || isNaN(state.minValue) || state.minValue < 0;
|
|
99
|
-
let inputMode =
|
|
99
|
+
let inputMode = 'numeric';
|
|
100
100
|
if ((0, $jvaNJ$isIPhone)()) {
|
|
101
101
|
// iPhone doesn't have a minus sign in either numeric or decimal.
|
|
102
102
|
// Note this is only for iPhone, not iPad, which always has both
|
|
103
103
|
// minus and decimal in numeric.
|
|
104
|
-
if (hasNegative) inputMode =
|
|
105
|
-
else if (hasDecimals) inputMode =
|
|
104
|
+
if (hasNegative) inputMode = 'text';
|
|
105
|
+
else if (hasDecimals) inputMode = 'decimal';
|
|
106
106
|
} else if ((0, $jvaNJ$isAndroid)()) {
|
|
107
107
|
// Android numeric has both a decimal point and minus key.
|
|
108
108
|
// decimal does not have a minus key.
|
|
109
|
-
if (hasNegative) inputMode =
|
|
110
|
-
else if (hasDecimals) inputMode =
|
|
109
|
+
if (hasNegative) inputMode = 'numeric';
|
|
110
|
+
else if (hasDecimals) inputMode = 'decimal';
|
|
111
111
|
}
|
|
112
112
|
let onChange = (value)=>{
|
|
113
113
|
if (state.validate(value)) state.setInputValue(value);
|
|
114
114
|
};
|
|
115
115
|
let domProps = (0, $jvaNJ$filterDOMProps)(props);
|
|
116
116
|
let onKeyDownEnter = (0, $jvaNJ$useCallback)((e)=>{
|
|
117
|
-
if (e.key ===
|
|
117
|
+
if (e.key === 'Enter') {
|
|
118
118
|
commit();
|
|
119
119
|
commitValidation();
|
|
120
120
|
} else e.continuePropagation();
|
|
@@ -136,11 +136,11 @@ function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
136
136
|
[(0, $jvaNJ$privateValidationStateProp)]: state,
|
|
137
137
|
value: inputValue,
|
|
138
138
|
defaultValue: undefined,
|
|
139
|
-
autoComplete:
|
|
140
|
-
|
|
141
|
-
|
|
139
|
+
autoComplete: 'off',
|
|
140
|
+
'aria-label': props['aria-label'] || undefined,
|
|
141
|
+
'aria-labelledby': props['aria-labelledby'] || undefined,
|
|
142
142
|
id: inputId,
|
|
143
|
-
type:
|
|
143
|
+
type: 'text',
|
|
144
144
|
inputMode: inputMode,
|
|
145
145
|
onChange: onChange,
|
|
146
146
|
onBlur: onBlur,
|
|
@@ -159,15 +159,15 @@ function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
159
159
|
// override the spinbutton role, we can't focus a spin button with VO
|
|
160
160
|
role: null,
|
|
161
161
|
// ignore aria-roledescription on iOS so that required state will announce when it is present
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
autoCorrect:
|
|
168
|
-
spellCheck:
|
|
162
|
+
'aria-roledescription': !(0, $jvaNJ$isIOS)() ? stringFormatter.format('numberField') : null,
|
|
163
|
+
'aria-valuemax': null,
|
|
164
|
+
'aria-valuemin': null,
|
|
165
|
+
'aria-valuenow': null,
|
|
166
|
+
'aria-valuetext': null,
|
|
167
|
+
autoCorrect: 'off',
|
|
168
|
+
spellCheck: 'false'
|
|
169
169
|
});
|
|
170
|
-
if (props.validationBehavior ===
|
|
170
|
+
if (props.validationBehavior === 'native') inputProps['aria-required'] = undefined;
|
|
171
171
|
let onButtonPressStart = (e)=>{
|
|
172
172
|
var _inputRef_current;
|
|
173
173
|
// If focus is already on the input, keep it there so we don't hide the
|
|
@@ -176,7 +176,7 @@ function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
176
176
|
// Otherwise, when using a mouse, move focus to the input.
|
|
177
177
|
// On touch, or with a screen reader, focus the button so that the software
|
|
178
178
|
// keyboard does not appear and the screen reader cursor is not moved off the button.
|
|
179
|
-
if (e.pointerType ===
|
|
179
|
+
if (e.pointerType === 'mouse') (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
|
|
180
180
|
else e.target.focus();
|
|
181
181
|
};
|
|
182
182
|
// Determine the label for the increment and decrement buttons. There are 4 cases:
|
|
@@ -189,18 +189,18 @@ function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
189
189
|
// (1) and (2) could possibly be combined and both use aria-labelledby. However, placing the label in
|
|
190
190
|
// the aria-label string rather than using aria-labelledby gives more flexibility to translators to change
|
|
191
191
|
// the order or add additional words around the label if needed.
|
|
192
|
-
let fieldLabel = props[
|
|
192
|
+
let fieldLabel = props['aria-label'] || (typeof props.label === 'string' ? props.label : '');
|
|
193
193
|
let ariaLabelledby;
|
|
194
|
-
if (!fieldLabel) ariaLabelledby = props.label != null ? labelProps.id : props[
|
|
194
|
+
if (!fieldLabel) ariaLabelledby = props.label != null ? labelProps.id : props['aria-labelledby'];
|
|
195
195
|
let incrementId = (0, $jvaNJ$useId)();
|
|
196
196
|
let decrementId = (0, $jvaNJ$useId)();
|
|
197
197
|
let incrementButtonProps = (0, $jvaNJ$mergeProps)(incButtonProps, {
|
|
198
|
-
|
|
198
|
+
'aria-label': incrementAriaLabel || stringFormatter.format('increase', {
|
|
199
199
|
fieldLabel: fieldLabel
|
|
200
200
|
}).trim(),
|
|
201
201
|
id: ariaLabelledby && !incrementAriaLabel ? incrementId : null,
|
|
202
|
-
|
|
203
|
-
|
|
202
|
+
'aria-labelledby': ariaLabelledby && !incrementAriaLabel ? `${incrementId} ${ariaLabelledby}` : null,
|
|
203
|
+
'aria-controls': inputId,
|
|
204
204
|
excludeFromTabOrder: true,
|
|
205
205
|
preventFocusOnPress: true,
|
|
206
206
|
allowFocusWhenDisabled: true,
|
|
@@ -208,12 +208,12 @@ function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
208
208
|
onPressStart: onButtonPressStart
|
|
209
209
|
});
|
|
210
210
|
let decrementButtonProps = (0, $jvaNJ$mergeProps)(decButtonProps, {
|
|
211
|
-
|
|
211
|
+
'aria-label': decrementAriaLabel || stringFormatter.format('decrease', {
|
|
212
212
|
fieldLabel: fieldLabel
|
|
213
213
|
}).trim(),
|
|
214
214
|
id: ariaLabelledby && !decrementAriaLabel ? decrementId : null,
|
|
215
|
-
|
|
216
|
-
|
|
215
|
+
'aria-labelledby': ariaLabelledby && !decrementAriaLabel ? `${decrementId} ${ariaLabelledby}` : null,
|
|
216
|
+
'aria-controls': inputId,
|
|
217
217
|
excludeFromTabOrder: true,
|
|
218
218
|
preventFocusOnPress: true,
|
|
219
219
|
allowFocusWhenDisabled: true,
|
|
@@ -223,9 +223,9 @@ function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
223
223
|
return {
|
|
224
224
|
groupProps: {
|
|
225
225
|
...focusWithinProps,
|
|
226
|
-
role:
|
|
227
|
-
|
|
228
|
-
|
|
226
|
+
role: 'group',
|
|
227
|
+
'aria-disabled': isDisabled,
|
|
228
|
+
'aria-invalid': isInvalid ? 'true' : undefined
|
|
229
229
|
},
|
|
230
230
|
labelProps: labelProps,
|
|
231
231
|
inputProps: inputProps,
|
|
@@ -241,4 +241,4 @@ function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
241
241
|
|
|
242
242
|
|
|
243
243
|
export {$81397a9303501bda$export$23f548e970bdf099 as useNumberField};
|
|
244
|
-
//# sourceMappingURL=useNumberField.
|
|
244
|
+
//# sourceMappingURL=useNumberField.module.js.map
|
|
@@ -32,7 +32,7 @@ function $parcel$interopDefault(a) {
|
|
|
32
32
|
function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
|
|
33
33
|
let { id: id, decrementAriaLabel: decrementAriaLabel, incrementAriaLabel: incrementAriaLabel, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, minValue: minValue, maxValue: maxValue, autoFocus: autoFocus, label: label, formatOptions: formatOptions, onBlur: onBlur = ()=>{}, onFocus: onFocus, onFocusChange: onFocusChange, onKeyDown: onKeyDown, onKeyUp: onKeyUp, description: description, errorMessage: errorMessage, isWheelDisabled: isWheelDisabled, ...otherProps } = props;
|
|
34
34
|
let { increment: increment, incrementToMax: incrementToMax, decrement: decrement, decrementToMin: decrementToMin, numberValue: numberValue, inputValue: inputValue, commit: commit, commitValidation: commitValidation } = state;
|
|
35
|
-
const stringFormatter = (0, $jvaNJ$useLocalizedStringFormatter)((0, ($parcel$interopDefault($jvaNJ$intlStringsmodulejs))),
|
|
35
|
+
const stringFormatter = (0, $jvaNJ$useLocalizedStringFormatter)((0, ($parcel$interopDefault($jvaNJ$intlStringsmodulejs))), '@react-aria/numberfield');
|
|
36
36
|
let inputId = (0, $jvaNJ$useId)(id);
|
|
37
37
|
let { focusProps: focusProps } = (0, $jvaNJ$useFocus)({
|
|
38
38
|
onBlur () {
|
|
@@ -50,7 +50,7 @@ function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
50
50
|
...formatOptions,
|
|
51
51
|
currencySign: undefined
|
|
52
52
|
});
|
|
53
|
-
let textValue = (0, $jvaNJ$useMemo)(()=>isNaN(numberValue) ?
|
|
53
|
+
let textValue = (0, $jvaNJ$useMemo)(()=>isNaN(numberValue) ? '' : textValueFormatter.format(numberValue), [
|
|
54
54
|
textValueFormatter,
|
|
55
55
|
numberValue
|
|
56
56
|
]);
|
|
@@ -96,25 +96,25 @@ function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
96
96
|
// and based on testing on various devices to determine what keys are available in each inputMode.
|
|
97
97
|
let hasDecimals = intlOptions.maximumFractionDigits > 0;
|
|
98
98
|
let hasNegative = state.minValue === undefined || isNaN(state.minValue) || state.minValue < 0;
|
|
99
|
-
let inputMode =
|
|
99
|
+
let inputMode = 'numeric';
|
|
100
100
|
if ((0, $jvaNJ$isIPhone)()) {
|
|
101
101
|
// iPhone doesn't have a minus sign in either numeric or decimal.
|
|
102
102
|
// Note this is only for iPhone, not iPad, which always has both
|
|
103
103
|
// minus and decimal in numeric.
|
|
104
|
-
if (hasNegative) inputMode =
|
|
105
|
-
else if (hasDecimals) inputMode =
|
|
104
|
+
if (hasNegative) inputMode = 'text';
|
|
105
|
+
else if (hasDecimals) inputMode = 'decimal';
|
|
106
106
|
} else if ((0, $jvaNJ$isAndroid)()) {
|
|
107
107
|
// Android numeric has both a decimal point and minus key.
|
|
108
108
|
// decimal does not have a minus key.
|
|
109
|
-
if (hasNegative) inputMode =
|
|
110
|
-
else if (hasDecimals) inputMode =
|
|
109
|
+
if (hasNegative) inputMode = 'numeric';
|
|
110
|
+
else if (hasDecimals) inputMode = 'decimal';
|
|
111
111
|
}
|
|
112
112
|
let onChange = (value)=>{
|
|
113
113
|
if (state.validate(value)) state.setInputValue(value);
|
|
114
114
|
};
|
|
115
115
|
let domProps = (0, $jvaNJ$filterDOMProps)(props);
|
|
116
116
|
let onKeyDownEnter = (0, $jvaNJ$useCallback)((e)=>{
|
|
117
|
-
if (e.key ===
|
|
117
|
+
if (e.key === 'Enter') {
|
|
118
118
|
commit();
|
|
119
119
|
commitValidation();
|
|
120
120
|
} else e.continuePropagation();
|
|
@@ -136,11 +136,11 @@ function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
136
136
|
[(0, $jvaNJ$privateValidationStateProp)]: state,
|
|
137
137
|
value: inputValue,
|
|
138
138
|
defaultValue: undefined,
|
|
139
|
-
autoComplete:
|
|
140
|
-
|
|
141
|
-
|
|
139
|
+
autoComplete: 'off',
|
|
140
|
+
'aria-label': props['aria-label'] || undefined,
|
|
141
|
+
'aria-labelledby': props['aria-labelledby'] || undefined,
|
|
142
142
|
id: inputId,
|
|
143
|
-
type:
|
|
143
|
+
type: 'text',
|
|
144
144
|
inputMode: inputMode,
|
|
145
145
|
onChange: onChange,
|
|
146
146
|
onBlur: onBlur,
|
|
@@ -159,15 +159,15 @@ function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
159
159
|
// override the spinbutton role, we can't focus a spin button with VO
|
|
160
160
|
role: null,
|
|
161
161
|
// ignore aria-roledescription on iOS so that required state will announce when it is present
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
autoCorrect:
|
|
168
|
-
spellCheck:
|
|
162
|
+
'aria-roledescription': !(0, $jvaNJ$isIOS)() ? stringFormatter.format('numberField') : null,
|
|
163
|
+
'aria-valuemax': null,
|
|
164
|
+
'aria-valuemin': null,
|
|
165
|
+
'aria-valuenow': null,
|
|
166
|
+
'aria-valuetext': null,
|
|
167
|
+
autoCorrect: 'off',
|
|
168
|
+
spellCheck: 'false'
|
|
169
169
|
});
|
|
170
|
-
if (props.validationBehavior ===
|
|
170
|
+
if (props.validationBehavior === 'native') inputProps['aria-required'] = undefined;
|
|
171
171
|
let onButtonPressStart = (e)=>{
|
|
172
172
|
var _inputRef_current;
|
|
173
173
|
// If focus is already on the input, keep it there so we don't hide the
|
|
@@ -176,7 +176,7 @@ function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
176
176
|
// Otherwise, when using a mouse, move focus to the input.
|
|
177
177
|
// On touch, or with a screen reader, focus the button so that the software
|
|
178
178
|
// keyboard does not appear and the screen reader cursor is not moved off the button.
|
|
179
|
-
if (e.pointerType ===
|
|
179
|
+
if (e.pointerType === 'mouse') (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
|
|
180
180
|
else e.target.focus();
|
|
181
181
|
};
|
|
182
182
|
// Determine the label for the increment and decrement buttons. There are 4 cases:
|
|
@@ -189,18 +189,18 @@ function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
189
189
|
// (1) and (2) could possibly be combined and both use aria-labelledby. However, placing the label in
|
|
190
190
|
// the aria-label string rather than using aria-labelledby gives more flexibility to translators to change
|
|
191
191
|
// the order or add additional words around the label if needed.
|
|
192
|
-
let fieldLabel = props[
|
|
192
|
+
let fieldLabel = props['aria-label'] || (typeof props.label === 'string' ? props.label : '');
|
|
193
193
|
let ariaLabelledby;
|
|
194
|
-
if (!fieldLabel) ariaLabelledby = props.label != null ? labelProps.id : props[
|
|
194
|
+
if (!fieldLabel) ariaLabelledby = props.label != null ? labelProps.id : props['aria-labelledby'];
|
|
195
195
|
let incrementId = (0, $jvaNJ$useId)();
|
|
196
196
|
let decrementId = (0, $jvaNJ$useId)();
|
|
197
197
|
let incrementButtonProps = (0, $jvaNJ$mergeProps)(incButtonProps, {
|
|
198
|
-
|
|
198
|
+
'aria-label': incrementAriaLabel || stringFormatter.format('increase', {
|
|
199
199
|
fieldLabel: fieldLabel
|
|
200
200
|
}).trim(),
|
|
201
201
|
id: ariaLabelledby && !incrementAriaLabel ? incrementId : null,
|
|
202
|
-
|
|
203
|
-
|
|
202
|
+
'aria-labelledby': ariaLabelledby && !incrementAriaLabel ? `${incrementId} ${ariaLabelledby}` : null,
|
|
203
|
+
'aria-controls': inputId,
|
|
204
204
|
excludeFromTabOrder: true,
|
|
205
205
|
preventFocusOnPress: true,
|
|
206
206
|
allowFocusWhenDisabled: true,
|
|
@@ -208,12 +208,12 @@ function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
208
208
|
onPressStart: onButtonPressStart
|
|
209
209
|
});
|
|
210
210
|
let decrementButtonProps = (0, $jvaNJ$mergeProps)(decButtonProps, {
|
|
211
|
-
|
|
211
|
+
'aria-label': decrementAriaLabel || stringFormatter.format('decrease', {
|
|
212
212
|
fieldLabel: fieldLabel
|
|
213
213
|
}).trim(),
|
|
214
214
|
id: ariaLabelledby && !decrementAriaLabel ? decrementId : null,
|
|
215
|
-
|
|
216
|
-
|
|
215
|
+
'aria-labelledby': ariaLabelledby && !decrementAriaLabel ? `${decrementId} ${ariaLabelledby}` : null,
|
|
216
|
+
'aria-controls': inputId,
|
|
217
217
|
excludeFromTabOrder: true,
|
|
218
218
|
preventFocusOnPress: true,
|
|
219
219
|
allowFocusWhenDisabled: true,
|
|
@@ -223,9 +223,9 @@ function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
223
223
|
return {
|
|
224
224
|
groupProps: {
|
|
225
225
|
...focusWithinProps,
|
|
226
|
-
role:
|
|
227
|
-
|
|
228
|
-
|
|
226
|
+
role: 'group',
|
|
227
|
+
'aria-disabled': isDisabled,
|
|
228
|
+
'aria-invalid': isInvalid ? 'true' : undefined
|
|
229
229
|
},
|
|
230
230
|
labelProps: labelProps,
|
|
231
231
|
inputProps: inputProps,
|
package/dist/zh-CN.mjs
CHANGED
package/dist/zh-TW.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-aria/numberfield",
|
|
3
|
-
"version": "3.11.
|
|
3
|
+
"version": "3.11.3",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -22,16 +22,16 @@
|
|
|
22
22
|
"url": "https://github.com/adobe/react-spectrum"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@react-aria/i18n": "^3.11.
|
|
26
|
-
"@react-aria/interactions": "^3.21.
|
|
27
|
-
"@react-aria/spinbutton": "^3.6.
|
|
28
|
-
"@react-aria/textfield": "^3.14.
|
|
29
|
-
"@react-aria/utils": "^3.24.
|
|
30
|
-
"@react-stately/form": "^3.0.
|
|
31
|
-
"@react-stately/numberfield": "^3.9.
|
|
32
|
-
"@react-types/button": "^3.9.
|
|
33
|
-
"@react-types/numberfield": "^3.8.
|
|
34
|
-
"@react-types/shared": "^3.23.
|
|
25
|
+
"@react-aria/i18n": "^3.11.1",
|
|
26
|
+
"@react-aria/interactions": "^3.21.3",
|
|
27
|
+
"@react-aria/spinbutton": "^3.6.5",
|
|
28
|
+
"@react-aria/textfield": "^3.14.5",
|
|
29
|
+
"@react-aria/utils": "^3.24.1",
|
|
30
|
+
"@react-stately/form": "^3.0.3",
|
|
31
|
+
"@react-stately/numberfield": "^3.9.3",
|
|
32
|
+
"@react-types/button": "^3.9.4",
|
|
33
|
+
"@react-types/numberfield": "^3.8.3",
|
|
34
|
+
"@react-types/shared": "^3.23.1",
|
|
35
35
|
"@swc/helpers": "^0.5.0"
|
|
36
36
|
},
|
|
37
37
|
"peerDependencies": {
|
|
@@ -41,5 +41,5 @@
|
|
|
41
41
|
"publishConfig": {
|
|
42
42
|
"access": "public"
|
|
43
43
|
},
|
|
44
|
-
"gitHead": "
|
|
44
|
+
"gitHead": "b77d7d594dff4dcfb5359bffbcfd18142b146433"
|
|
45
45
|
}
|