@react-aria/numberfield 3.11.2 → 3.11.4
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 +1 -1
- package/dist/types.d.ts.map +1 -1
- package/dist/uk-UA.mjs +1 -1
- package/dist/useNumberField.main.js +34 -33
- package/dist/useNumberField.main.js.map +1 -1
- package/dist/useNumberField.mjs +35 -34
- package/dist/useNumberField.module.js +34 -33
- package/dist/useNumberField.module.js.map +1 -1
- package/dist/zh-CN.mjs +1 -1
- package/dist/zh-TW.mjs +1 -1
- package/package.json +14 -14
- package/src/useNumberField.ts +2 -2
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/types.d.ts
CHANGED
|
@@ -23,7 +23,7 @@ export interface NumberFieldAria extends ValidationResult {
|
|
|
23
23
|
* Provides the behavior and accessibility implementation for a number field component.
|
|
24
24
|
* Number fields allow users to enter a number, and increment or decrement the value using stepper buttons.
|
|
25
25
|
*/
|
|
26
|
-
export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldState, inputRef: RefObject<HTMLInputElement>): NumberFieldAria;
|
|
26
|
+
export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldState, inputRef: RefObject<HTMLInputElement | null>): NumberFieldAria;
|
|
27
27
|
export type { AriaNumberFieldProps } from '@react-types/numberfield';
|
|
28
28
|
|
|
29
29
|
//# sourceMappingURL=types.d.ts.map
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;AAoCA,gCAAiC,SAAQ,gBAAgB;IACvD,mCAAmC;IACnC,UAAU,EAAE,oBAAoB,gBAAgB,CAAC,CAAC;IAClD,wEAAwE;IACxE,UAAU,EAAE,kBAAkB,CAAC;IAC/B,mCAAmC;IACnC,UAAU,EAAE,oBAAoB,gBAAgB,CAAC,CAAC;IAClD,mFAAmF;IACnF,oBAAoB,EAAE,eAAe,CAAC;IACtC,mFAAmF;IACnF,oBAAoB,EAAE,eAAe,CAAC;IACtC,gEAAgE;IAChE,gBAAgB,EAAE,aAAa,CAAC;IAChC,kEAAkE;IAClE,iBAAiB,EAAE,aAAa,CAAA;CACjC;AAED;;;GAGG;AACH,+BAA+B,KAAK,EAAE,oBAAoB,EAAE,KAAK,EAAE,gBAAgB,EAAE,QAAQ,EAAE,UAAU,gBAAgB,CAAC,GAAG,eAAe,
|
|
1
|
+
{"mappings":";;;;;AAoCA,gCAAiC,SAAQ,gBAAgB;IACvD,mCAAmC;IACnC,UAAU,EAAE,oBAAoB,gBAAgB,CAAC,CAAC;IAClD,wEAAwE;IACxE,UAAU,EAAE,kBAAkB,CAAC;IAC/B,mCAAmC;IACnC,UAAU,EAAE,oBAAoB,gBAAgB,CAAC,CAAC;IAClD,mFAAmF;IACnF,oBAAoB,EAAE,eAAe,CAAC;IACtC,mFAAmF;IACnF,oBAAoB,EAAE,eAAe,CAAC;IACtC,gEAAgE;IAChE,gBAAgB,EAAE,aAAa,CAAC;IAChC,kEAAkE;IAClE,iBAAiB,EAAE,aAAa,CAAA;CACjC;AAED;;;GAGG;AACH,+BAA+B,KAAK,EAAE,oBAAoB,EAAE,KAAK,EAAE,gBAAgB,EAAE,QAAQ,EAAE,UAAU,gBAAgB,GAAG,IAAI,CAAC,GAAG,eAAe,CA2QlJ;ACxTD,YAAY,EAAC,oBAAoB,EAAC,MAAM,0BAA0B,CAAC","sources":["packages/@react-aria/numberfield/src/packages/@react-aria/numberfield/src/useNumberField.ts","packages/@react-aria/numberfield/src/packages/@react-aria/numberfield/src/index.ts","packages/@react-aria/numberfield/src/index.ts"],"sourcesContent":[null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nexport {useNumberField} from './useNumberField';\nexport type {AriaNumberFieldProps} from '@react-types/numberfield';\nexport type {NumberFieldAria} from './useNumberField';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
|
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
|
]);
|
|
@@ -96,31 +96,32 @@ function $fa863e9b015ae839$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
96
96
|
onScroll: onWheel,
|
|
97
97
|
isDisabled: scrollingDisabled
|
|
98
98
|
}, inputRef);
|
|
99
|
+
var _intlOptions_maximumFractionDigits;
|
|
99
100
|
// The inputMode attribute influences the software keyboard that is shown on touch devices.
|
|
100
101
|
// Browsers and operating systems are quite inconsistent about what keys are available, however.
|
|
101
102
|
// We choose between numeric and decimal based on whether we allow negative and fractional numbers,
|
|
102
103
|
// and based on testing on various devices to determine what keys are available in each inputMode.
|
|
103
|
-
let hasDecimals = intlOptions.maximumFractionDigits > 0;
|
|
104
|
+
let hasDecimals = ((_intlOptions_maximumFractionDigits = intlOptions.maximumFractionDigits) !== null && _intlOptions_maximumFractionDigits !== void 0 ? _intlOptions_maximumFractionDigits : 0) > 0;
|
|
104
105
|
let hasNegative = state.minValue === undefined || isNaN(state.minValue) || state.minValue < 0;
|
|
105
|
-
let inputMode =
|
|
106
|
+
let inputMode = 'numeric';
|
|
106
107
|
if ((0, $9WaOX$reactariautils.isIPhone)()) {
|
|
107
108
|
// iPhone doesn't have a minus sign in either numeric or decimal.
|
|
108
109
|
// Note this is only for iPhone, not iPad, which always has both
|
|
109
110
|
// minus and decimal in numeric.
|
|
110
|
-
if (hasNegative) inputMode =
|
|
111
|
-
else if (hasDecimals) inputMode =
|
|
111
|
+
if (hasNegative) inputMode = 'text';
|
|
112
|
+
else if (hasDecimals) inputMode = 'decimal';
|
|
112
113
|
} else if ((0, $9WaOX$reactariautils.isAndroid)()) {
|
|
113
114
|
// Android numeric has both a decimal point and minus key.
|
|
114
115
|
// decimal does not have a minus key.
|
|
115
|
-
if (hasNegative) inputMode =
|
|
116
|
-
else if (hasDecimals) inputMode =
|
|
116
|
+
if (hasNegative) inputMode = 'numeric';
|
|
117
|
+
else if (hasDecimals) inputMode = 'decimal';
|
|
117
118
|
}
|
|
118
119
|
let onChange = (value)=>{
|
|
119
120
|
if (state.validate(value)) state.setInputValue(value);
|
|
120
121
|
};
|
|
121
122
|
let domProps = (0, $9WaOX$reactariautils.filterDOMProps)(props);
|
|
122
123
|
let onKeyDownEnter = (0, $9WaOX$react.useCallback)((e)=>{
|
|
123
|
-
if (e.key ===
|
|
124
|
+
if (e.key === 'Enter') {
|
|
124
125
|
commit();
|
|
125
126
|
commitValidation();
|
|
126
127
|
} else e.continuePropagation();
|
|
@@ -142,11 +143,11 @@ function $fa863e9b015ae839$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
142
143
|
[(0, $9WaOX$reactstatelyform.privateValidationStateProp)]: state,
|
|
143
144
|
value: inputValue,
|
|
144
145
|
defaultValue: undefined,
|
|
145
|
-
autoComplete:
|
|
146
|
-
|
|
147
|
-
|
|
146
|
+
autoComplete: 'off',
|
|
147
|
+
'aria-label': props['aria-label'] || undefined,
|
|
148
|
+
'aria-labelledby': props['aria-labelledby'] || undefined,
|
|
148
149
|
id: inputId,
|
|
149
|
-
type:
|
|
150
|
+
type: 'text',
|
|
150
151
|
inputMode: inputMode,
|
|
151
152
|
onChange: onChange,
|
|
152
153
|
onBlur: onBlur,
|
|
@@ -165,15 +166,15 @@ function $fa863e9b015ae839$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
165
166
|
// override the spinbutton role, we can't focus a spin button with VO
|
|
166
167
|
role: null,
|
|
167
168
|
// ignore aria-roledescription on iOS so that required state will announce when it is present
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
autoCorrect:
|
|
174
|
-
spellCheck:
|
|
169
|
+
'aria-roledescription': !(0, $9WaOX$reactariautils.isIOS)() ? stringFormatter.format('numberField') : null,
|
|
170
|
+
'aria-valuemax': null,
|
|
171
|
+
'aria-valuemin': null,
|
|
172
|
+
'aria-valuenow': null,
|
|
173
|
+
'aria-valuetext': null,
|
|
174
|
+
autoCorrect: 'off',
|
|
175
|
+
spellCheck: 'false'
|
|
175
176
|
});
|
|
176
|
-
if (props.validationBehavior ===
|
|
177
|
+
if (props.validationBehavior === 'native') inputProps['aria-required'] = undefined;
|
|
177
178
|
let onButtonPressStart = (e)=>{
|
|
178
179
|
var _inputRef_current;
|
|
179
180
|
// If focus is already on the input, keep it there so we don't hide the
|
|
@@ -182,7 +183,7 @@ function $fa863e9b015ae839$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
182
183
|
// Otherwise, when using a mouse, move focus to the input.
|
|
183
184
|
// On touch, or with a screen reader, focus the button so that the software
|
|
184
185
|
// keyboard does not appear and the screen reader cursor is not moved off the button.
|
|
185
|
-
if (e.pointerType ===
|
|
186
|
+
if (e.pointerType === 'mouse') (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
|
|
186
187
|
else e.target.focus();
|
|
187
188
|
};
|
|
188
189
|
// Determine the label for the increment and decrement buttons. There are 4 cases:
|
|
@@ -195,18 +196,18 @@ function $fa863e9b015ae839$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
195
196
|
// (1) and (2) could possibly be combined and both use aria-labelledby. However, placing the label in
|
|
196
197
|
// the aria-label string rather than using aria-labelledby gives more flexibility to translators to change
|
|
197
198
|
// the order or add additional words around the label if needed.
|
|
198
|
-
let fieldLabel = props[
|
|
199
|
+
let fieldLabel = props['aria-label'] || (typeof props.label === 'string' ? props.label : '');
|
|
199
200
|
let ariaLabelledby;
|
|
200
|
-
if (!fieldLabel) ariaLabelledby = props.label != null ? labelProps.id : props[
|
|
201
|
+
if (!fieldLabel) ariaLabelledby = props.label != null ? labelProps.id : props['aria-labelledby'];
|
|
201
202
|
let incrementId = (0, $9WaOX$reactariautils.useId)();
|
|
202
203
|
let decrementId = (0, $9WaOX$reactariautils.useId)();
|
|
203
204
|
let incrementButtonProps = (0, $9WaOX$reactariautils.mergeProps)(incButtonProps, {
|
|
204
|
-
|
|
205
|
+
'aria-label': incrementAriaLabel || stringFormatter.format('increase', {
|
|
205
206
|
fieldLabel: fieldLabel
|
|
206
207
|
}).trim(),
|
|
207
208
|
id: ariaLabelledby && !incrementAriaLabel ? incrementId : null,
|
|
208
|
-
|
|
209
|
-
|
|
209
|
+
'aria-labelledby': ariaLabelledby && !incrementAriaLabel ? `${incrementId} ${ariaLabelledby}` : null,
|
|
210
|
+
'aria-controls': inputId,
|
|
210
211
|
excludeFromTabOrder: true,
|
|
211
212
|
preventFocusOnPress: true,
|
|
212
213
|
allowFocusWhenDisabled: true,
|
|
@@ -214,12 +215,12 @@ function $fa863e9b015ae839$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
214
215
|
onPressStart: onButtonPressStart
|
|
215
216
|
});
|
|
216
217
|
let decrementButtonProps = (0, $9WaOX$reactariautils.mergeProps)(decButtonProps, {
|
|
217
|
-
|
|
218
|
+
'aria-label': decrementAriaLabel || stringFormatter.format('decrease', {
|
|
218
219
|
fieldLabel: fieldLabel
|
|
219
220
|
}).trim(),
|
|
220
221
|
id: ariaLabelledby && !decrementAriaLabel ? decrementId : null,
|
|
221
|
-
|
|
222
|
-
|
|
222
|
+
'aria-labelledby': ariaLabelledby && !decrementAriaLabel ? `${decrementId} ${ariaLabelledby}` : null,
|
|
223
|
+
'aria-controls': inputId,
|
|
223
224
|
excludeFromTabOrder: true,
|
|
224
225
|
preventFocusOnPress: true,
|
|
225
226
|
allowFocusWhenDisabled: true,
|
|
@@ -229,9 +230,9 @@ function $fa863e9b015ae839$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
229
230
|
return {
|
|
230
231
|
groupProps: {
|
|
231
232
|
...focusWithinProps,
|
|
232
|
-
role:
|
|
233
|
-
|
|
234
|
-
|
|
233
|
+
role: 'group',
|
|
234
|
+
'aria-disabled': isDisabled,
|
|
235
|
+
'aria-invalid': isInvalid ? 'true' : undefined
|
|
235
236
|
},
|
|
236
237
|
labelProps: labelProps,
|
|
237
238
|
inputProps: inputProps,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-aria/numberfield/src/useNumberField.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 {AriaButtonProps} from '@react-types/button';\nimport {AriaNumberFieldProps} from '@react-types/numberfield';\nimport {chain, filterDOMProps, isAndroid, isIOS, isIPhone, mergeProps, useFormReset, useId} from '@react-aria/utils';\nimport {DOMAttributes, GroupDOMAttributes, TextInputDOMProps, ValidationResult} from '@react-types/shared';\nimport {\n InputHTMLAttributes,\n LabelHTMLAttributes,\n RefObject,\n useCallback,\n useMemo,\n useState\n} from 'react';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {NumberFieldState} from '@react-stately/numberfield';\nimport {privateValidationStateProp} from '@react-stately/form';\nimport {useFocus, useFocusWithin, useScrollWheel} from '@react-aria/interactions';\nimport {useFormattedTextField} from '@react-aria/textfield';\nimport {\n useLocalizedStringFormatter,\n useNumberFormatter\n} from '@react-aria/i18n';\nimport {useSpinButton} from '@react-aria/spinbutton';\n\nexport interface NumberFieldAria extends ValidationResult {\n /** Props for the label element. */\n labelProps: LabelHTMLAttributes<HTMLLabelElement>,\n /** Props for the group wrapper around the input and stepper buttons. */\n groupProps: GroupDOMAttributes,\n /** Props for the input element. */\n inputProps: InputHTMLAttributes<HTMLInputElement>,\n /** Props for the increment button, to be passed to [useButton](useButton.html). */\n incrementButtonProps: AriaButtonProps,\n /** Props for the decrement button, to be passed to [useButton](useButton.html). */\n decrementButtonProps: AriaButtonProps,\n /** Props for the number field's description element, if any. */\n descriptionProps: DOMAttributes,\n /** Props for the number field's error message element, if any. */\n errorMessageProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a number field component.\n * Number fields allow users to enter a number, and increment or decrement the value using stepper buttons.\n */\nexport function useNumberField(props: AriaNumberFieldProps, state: NumberFieldState, inputRef: RefObject<HTMLInputElement>): NumberFieldAria {\n let {\n id,\n decrementAriaLabel,\n incrementAriaLabel,\n isDisabled,\n isReadOnly,\n isRequired,\n minValue,\n maxValue,\n autoFocus,\n label,\n formatOptions,\n onBlur = () => {},\n onFocus,\n onFocusChange,\n onKeyDown,\n onKeyUp,\n description,\n errorMessage,\n isWheelDisabled,\n ...otherProps\n } = props;\n\n let {\n increment,\n incrementToMax,\n decrement,\n decrementToMin,\n numberValue,\n inputValue,\n commit,\n commitValidation\n } = state;\n\n const stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/numberfield');\n\n let inputId = useId(id);\n let {focusProps} = useFocus({\n onBlur() {\n // Set input value to normalized valid value\n commit();\n }\n });\n\n let numberFormatter = useNumberFormatter(formatOptions);\n let intlOptions = useMemo(() => numberFormatter.resolvedOptions(), [numberFormatter]);\n\n // Replace negative textValue formatted using currencySign: 'accounting'\n // with a textValue that can be announced using a minus sign.\n let textValueFormatter = useNumberFormatter({...formatOptions, currencySign: undefined});\n let textValue = useMemo(() => isNaN(numberValue) ? '' : textValueFormatter.format(numberValue), [textValueFormatter, numberValue]);\n\n let {\n spinButtonProps,\n incrementButtonProps: incButtonProps,\n decrementButtonProps: decButtonProps\n } = useSpinButton(\n {\n isDisabled,\n isReadOnly,\n isRequired,\n maxValue,\n minValue,\n onIncrement: increment,\n onIncrementToMax: incrementToMax,\n onDecrement: decrement,\n onDecrementToMin: decrementToMin,\n value: numberValue,\n textValue\n }\n );\n\n let [focusWithin, setFocusWithin] = useState(false);\n let {focusWithinProps} = useFocusWithin({isDisabled, onFocusWithinChange: setFocusWithin});\n\n let onWheel = useCallback((e) => {\n // if on a trackpad, users can scroll in both X and Y at once, check the magnitude of the change\n // if it's mostly in the X direction, then just return, the user probably doesn't mean to inc/dec\n // this isn't perfect, events come in fast with small deltas and a part of the scroll may give a false indication\n // especially if the user is scrolling near 45deg\n if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) {\n return;\n }\n if (e.deltaY > 0) {\n increment();\n } else if (e.deltaY < 0) {\n decrement();\n }\n }, [decrement, increment]);\n // If the input isn't supposed to receive input, disable scrolling.\n let scrollingDisabled = isWheelDisabled || isDisabled || isReadOnly || !focusWithin;\n useScrollWheel({onScroll: onWheel, isDisabled: scrollingDisabled}, inputRef);\n\n // The inputMode attribute influences the software keyboard that is shown on touch devices.\n // Browsers and operating systems are quite inconsistent about what keys are available, however.\n // We choose between numeric and decimal based on whether we allow negative and fractional numbers,\n // and based on testing on various devices to determine what keys are available in each inputMode.\n let hasDecimals = intlOptions.maximumFractionDigits > 0;\n let hasNegative = (state.minValue === undefined || isNaN(state.minValue)) || state.minValue < 0;\n let inputMode: TextInputDOMProps['inputMode'] = 'numeric';\n if (isIPhone()) {\n // iPhone doesn't have a minus sign in either numeric or decimal.\n // Note this is only for iPhone, not iPad, which always has both\n // minus and decimal in numeric.\n if (hasNegative) {\n inputMode = 'text';\n } else if (hasDecimals) {\n inputMode = 'decimal';\n }\n } else if (isAndroid()) {\n // Android numeric has both a decimal point and minus key.\n // decimal does not have a minus key.\n if (hasNegative) {\n inputMode = 'numeric';\n } else if (hasDecimals) {\n inputMode = 'decimal';\n }\n }\n\n let onChange = value => {\n if (state.validate(value)) {\n state.setInputValue(value);\n }\n };\n\n let domProps = filterDOMProps(props);\n let onKeyDownEnter = useCallback((e) => {\n if (e.key === 'Enter') {\n commit();\n commitValidation();\n } else {\n e.continuePropagation();\n }\n }, [commit, commitValidation]);\n\n let {isInvalid, validationErrors, validationDetails} = state.displayValidation;\n let {labelProps, inputProps: textFieldProps, descriptionProps, errorMessageProps} = useFormattedTextField({\n ...otherProps,\n ...domProps,\n name: undefined,\n label,\n autoFocus,\n isDisabled,\n isReadOnly,\n isRequired,\n validate: undefined,\n [privateValidationStateProp]: state,\n value: inputValue,\n defaultValue: undefined, // defaultValue already used to populate state.inputValue, unneeded here\n autoComplete: 'off',\n 'aria-label': props['aria-label'] || undefined,\n 'aria-labelledby': props['aria-labelledby'] || undefined,\n id: inputId,\n type: 'text', // Can't use type=\"number\" because then we can't have things like $ in the field.\n inputMode,\n onChange,\n onBlur,\n onFocus,\n onFocusChange,\n onKeyDown: useMemo(() => chain(onKeyDownEnter, onKeyDown), [onKeyDownEnter, onKeyDown]),\n onKeyUp,\n description,\n errorMessage\n }, state, inputRef);\n\n useFormReset(inputRef, state.numberValue, state.setNumberValue);\n\n let inputProps: InputHTMLAttributes<HTMLInputElement> = mergeProps(\n spinButtonProps,\n focusProps,\n textFieldProps,\n {\n // override the spinbutton role, we can't focus a spin button with VO\n role: null,\n // ignore aria-roledescription on iOS so that required state will announce when it is present\n 'aria-roledescription': (!isIOS() ? stringFormatter.format('numberField') : null),\n 'aria-valuemax': null,\n 'aria-valuemin': null,\n 'aria-valuenow': null,\n 'aria-valuetext': null,\n autoCorrect: 'off',\n spellCheck: 'false'\n }\n );\n\n if (props.validationBehavior === 'native') {\n inputProps['aria-required'] = undefined;\n }\n\n let onButtonPressStart = (e) => {\n // If focus is already on the input, keep it there so we don't hide the\n // software keyboard when tapping the increment/decrement buttons.\n if (document.activeElement === inputRef.current) {\n return;\n }\n\n // Otherwise, when using a mouse, move focus to the input.\n // On touch, or with a screen reader, focus the button so that the software\n // keyboard does not appear and the screen reader cursor is not moved off the button.\n if (e.pointerType === 'mouse') {\n inputRef.current?.focus();\n } else {\n e.target.focus();\n }\n };\n\n // Determine the label for the increment and decrement buttons. There are 4 cases:\n //\n // 1. With a visible label that is a string: aria-label: `Increase ${props.label}`\n // 2. With a visible label that is JSX: aria-label: 'Increase', aria-labelledby: '${incrementId} ${labelId}'\n // 3. With an aria-label: aria-label: `Increase ${props['aria-label']}`\n // 4. With an aria-labelledby: aria-label: 'Increase', aria-labelledby: `${incrementId} ${props['aria-labelledby']}`\n //\n // (1) and (2) could possibly be combined and both use aria-labelledby. However, placing the label in\n // the aria-label string rather than using aria-labelledby gives more flexibility to translators to change\n // the order or add additional words around the label if needed.\n let fieldLabel = props['aria-label'] || (typeof props.label === 'string' ? props.label : '');\n let ariaLabelledby: string | undefined;\n if (!fieldLabel) {\n ariaLabelledby = props.label != null ? labelProps.id : props['aria-labelledby'];\n }\n\n let incrementId = useId();\n let decrementId = useId();\n\n let incrementButtonProps: AriaButtonProps = mergeProps(incButtonProps, {\n 'aria-label': incrementAriaLabel || stringFormatter.format('increase', {fieldLabel}).trim(),\n id: ariaLabelledby && !incrementAriaLabel ? incrementId : null,\n 'aria-labelledby': ariaLabelledby && !incrementAriaLabel ? `${incrementId} ${ariaLabelledby}` : null,\n 'aria-controls': inputId,\n excludeFromTabOrder: true,\n preventFocusOnPress: true,\n allowFocusWhenDisabled: true,\n isDisabled: !state.canIncrement,\n onPressStart: onButtonPressStart\n });\n\n let decrementButtonProps: AriaButtonProps = mergeProps(decButtonProps, {\n 'aria-label': decrementAriaLabel || stringFormatter.format('decrease', {fieldLabel}).trim(),\n id: ariaLabelledby && !decrementAriaLabel ? decrementId : null,\n 'aria-labelledby': ariaLabelledby && !decrementAriaLabel ? `${decrementId} ${ariaLabelledby}` : null,\n 'aria-controls': inputId,\n excludeFromTabOrder: true,\n preventFocusOnPress: true,\n allowFocusWhenDisabled: true,\n isDisabled: !state.canDecrement,\n onPressStart: onButtonPressStart\n });\n\n return {\n groupProps: {\n ...focusWithinProps,\n role: 'group',\n 'aria-disabled': isDisabled,\n 'aria-invalid': isInvalid ? 'true' : undefined\n },\n labelProps,\n inputProps,\n incrementButtonProps,\n decrementButtonProps,\n errorMessageProps,\n descriptionProps,\n isInvalid,\n validationErrors,\n validationDetails\n };\n}\n"],"names":[],"version":3,"file":"useNumberField.main.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-aria/numberfield/src/useNumberField.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 {AriaButtonProps} from '@react-types/button';\nimport {AriaNumberFieldProps} from '@react-types/numberfield';\nimport {chain, filterDOMProps, isAndroid, isIOS, isIPhone, mergeProps, useFormReset, useId} from '@react-aria/utils';\nimport {DOMAttributes, GroupDOMAttributes, TextInputDOMProps, ValidationResult} from '@react-types/shared';\nimport {\n InputHTMLAttributes,\n LabelHTMLAttributes,\n RefObject,\n useCallback,\n useMemo,\n useState\n} from 'react';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {NumberFieldState} from '@react-stately/numberfield';\nimport {privateValidationStateProp} from '@react-stately/form';\nimport {useFocus, useFocusWithin, useScrollWheel} from '@react-aria/interactions';\nimport {useFormattedTextField} from '@react-aria/textfield';\nimport {\n useLocalizedStringFormatter,\n useNumberFormatter\n} from '@react-aria/i18n';\nimport {useSpinButton} from '@react-aria/spinbutton';\n\nexport interface NumberFieldAria extends ValidationResult {\n /** Props for the label element. */\n labelProps: LabelHTMLAttributes<HTMLLabelElement>,\n /** Props for the group wrapper around the input and stepper buttons. */\n groupProps: GroupDOMAttributes,\n /** Props for the input element. */\n inputProps: InputHTMLAttributes<HTMLInputElement>,\n /** Props for the increment button, to be passed to [useButton](useButton.html). */\n incrementButtonProps: AriaButtonProps,\n /** Props for the decrement button, to be passed to [useButton](useButton.html). */\n decrementButtonProps: AriaButtonProps,\n /** Props for the number field's description element, if any. */\n descriptionProps: DOMAttributes,\n /** Props for the number field's error message element, if any. */\n errorMessageProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a number field component.\n * Number fields allow users to enter a number, and increment or decrement the value using stepper buttons.\n */\nexport function useNumberField(props: AriaNumberFieldProps, state: NumberFieldState, inputRef: RefObject<HTMLInputElement | null>): NumberFieldAria {\n let {\n id,\n decrementAriaLabel,\n incrementAriaLabel,\n isDisabled,\n isReadOnly,\n isRequired,\n minValue,\n maxValue,\n autoFocus,\n label,\n formatOptions,\n onBlur = () => {},\n onFocus,\n onFocusChange,\n onKeyDown,\n onKeyUp,\n description,\n errorMessage,\n isWheelDisabled,\n ...otherProps\n } = props;\n\n let {\n increment,\n incrementToMax,\n decrement,\n decrementToMin,\n numberValue,\n inputValue,\n commit,\n commitValidation\n } = state;\n\n const stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/numberfield');\n\n let inputId = useId(id);\n let {focusProps} = useFocus({\n onBlur() {\n // Set input value to normalized valid value\n commit();\n }\n });\n\n let numberFormatter = useNumberFormatter(formatOptions);\n let intlOptions = useMemo(() => numberFormatter.resolvedOptions(), [numberFormatter]);\n\n // Replace negative textValue formatted using currencySign: 'accounting'\n // with a textValue that can be announced using a minus sign.\n let textValueFormatter = useNumberFormatter({...formatOptions, currencySign: undefined});\n let textValue = useMemo(() => isNaN(numberValue) ? '' : textValueFormatter.format(numberValue), [textValueFormatter, numberValue]);\n\n let {\n spinButtonProps,\n incrementButtonProps: incButtonProps,\n decrementButtonProps: decButtonProps\n } = useSpinButton(\n {\n isDisabled,\n isReadOnly,\n isRequired,\n maxValue,\n minValue,\n onIncrement: increment,\n onIncrementToMax: incrementToMax,\n onDecrement: decrement,\n onDecrementToMin: decrementToMin,\n value: numberValue,\n textValue\n }\n );\n\n let [focusWithin, setFocusWithin] = useState(false);\n let {focusWithinProps} = useFocusWithin({isDisabled, onFocusWithinChange: setFocusWithin});\n\n let onWheel = useCallback((e) => {\n // if on a trackpad, users can scroll in both X and Y at once, check the magnitude of the change\n // if it's mostly in the X direction, then just return, the user probably doesn't mean to inc/dec\n // this isn't perfect, events come in fast with small deltas and a part of the scroll may give a false indication\n // especially if the user is scrolling near 45deg\n if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) {\n return;\n }\n if (e.deltaY > 0) {\n increment();\n } else if (e.deltaY < 0) {\n decrement();\n }\n }, [decrement, increment]);\n // If the input isn't supposed to receive input, disable scrolling.\n let scrollingDisabled = isWheelDisabled || isDisabled || isReadOnly || !focusWithin;\n useScrollWheel({onScroll: onWheel, isDisabled: scrollingDisabled}, inputRef);\n\n // The inputMode attribute influences the software keyboard that is shown on touch devices.\n // Browsers and operating systems are quite inconsistent about what keys are available, however.\n // We choose between numeric and decimal based on whether we allow negative and fractional numbers,\n // and based on testing on various devices to determine what keys are available in each inputMode.\n let hasDecimals = (intlOptions.maximumFractionDigits ?? 0) > 0;\n let hasNegative = (state.minValue === undefined || isNaN(state.minValue)) || state.minValue < 0;\n let inputMode: TextInputDOMProps['inputMode'] = 'numeric';\n if (isIPhone()) {\n // iPhone doesn't have a minus sign in either numeric or decimal.\n // Note this is only for iPhone, not iPad, which always has both\n // minus and decimal in numeric.\n if (hasNegative) {\n inputMode = 'text';\n } else if (hasDecimals) {\n inputMode = 'decimal';\n }\n } else if (isAndroid()) {\n // Android numeric has both a decimal point and minus key.\n // decimal does not have a minus key.\n if (hasNegative) {\n inputMode = 'numeric';\n } else if (hasDecimals) {\n inputMode = 'decimal';\n }\n }\n\n let onChange = value => {\n if (state.validate(value)) {\n state.setInputValue(value);\n }\n };\n\n let domProps = filterDOMProps(props);\n let onKeyDownEnter = useCallback((e) => {\n if (e.key === 'Enter') {\n commit();\n commitValidation();\n } else {\n e.continuePropagation();\n }\n }, [commit, commitValidation]);\n\n let {isInvalid, validationErrors, validationDetails} = state.displayValidation;\n let {labelProps, inputProps: textFieldProps, descriptionProps, errorMessageProps} = useFormattedTextField({\n ...otherProps,\n ...domProps,\n name: undefined,\n label,\n autoFocus,\n isDisabled,\n isReadOnly,\n isRequired,\n validate: undefined,\n [privateValidationStateProp]: state,\n value: inputValue,\n defaultValue: undefined, // defaultValue already used to populate state.inputValue, unneeded here\n autoComplete: 'off',\n 'aria-label': props['aria-label'] || undefined,\n 'aria-labelledby': props['aria-labelledby'] || undefined,\n id: inputId,\n type: 'text', // Can't use type=\"number\" because then we can't have things like $ in the field.\n inputMode,\n onChange,\n onBlur,\n onFocus,\n onFocusChange,\n onKeyDown: useMemo(() => chain(onKeyDownEnter, onKeyDown), [onKeyDownEnter, onKeyDown]),\n onKeyUp,\n description,\n errorMessage\n }, state, inputRef);\n\n useFormReset(inputRef, state.numberValue, state.setNumberValue);\n\n let inputProps: InputHTMLAttributes<HTMLInputElement> = mergeProps(\n spinButtonProps,\n focusProps,\n textFieldProps,\n {\n // override the spinbutton role, we can't focus a spin button with VO\n role: null,\n // ignore aria-roledescription on iOS so that required state will announce when it is present\n 'aria-roledescription': (!isIOS() ? stringFormatter.format('numberField') : null),\n 'aria-valuemax': null,\n 'aria-valuemin': null,\n 'aria-valuenow': null,\n 'aria-valuetext': null,\n autoCorrect: 'off',\n spellCheck: 'false'\n }\n );\n\n if (props.validationBehavior === 'native') {\n inputProps['aria-required'] = undefined;\n }\n\n let onButtonPressStart = (e) => {\n // If focus is already on the input, keep it there so we don't hide the\n // software keyboard when tapping the increment/decrement buttons.\n if (document.activeElement === inputRef.current) {\n return;\n }\n\n // Otherwise, when using a mouse, move focus to the input.\n // On touch, or with a screen reader, focus the button so that the software\n // keyboard does not appear and the screen reader cursor is not moved off the button.\n if (e.pointerType === 'mouse') {\n inputRef.current?.focus();\n } else {\n e.target.focus();\n }\n };\n\n // Determine the label for the increment and decrement buttons. There are 4 cases:\n //\n // 1. With a visible label that is a string: aria-label: `Increase ${props.label}`\n // 2. With a visible label that is JSX: aria-label: 'Increase', aria-labelledby: '${incrementId} ${labelId}'\n // 3. With an aria-label: aria-label: `Increase ${props['aria-label']}`\n // 4. With an aria-labelledby: aria-label: 'Increase', aria-labelledby: `${incrementId} ${props['aria-labelledby']}`\n //\n // (1) and (2) could possibly be combined and both use aria-labelledby. However, placing the label in\n // the aria-label string rather than using aria-labelledby gives more flexibility to translators to change\n // the order or add additional words around the label if needed.\n let fieldLabel = props['aria-label'] || (typeof props.label === 'string' ? props.label : '');\n let ariaLabelledby: string | undefined;\n if (!fieldLabel) {\n ariaLabelledby = props.label != null ? labelProps.id : props['aria-labelledby'];\n }\n\n let incrementId = useId();\n let decrementId = useId();\n\n let incrementButtonProps: AriaButtonProps = mergeProps(incButtonProps, {\n 'aria-label': incrementAriaLabel || stringFormatter.format('increase', {fieldLabel}).trim(),\n id: ariaLabelledby && !incrementAriaLabel ? incrementId : null,\n 'aria-labelledby': ariaLabelledby && !incrementAriaLabel ? `${incrementId} ${ariaLabelledby}` : null,\n 'aria-controls': inputId,\n excludeFromTabOrder: true,\n preventFocusOnPress: true,\n allowFocusWhenDisabled: true,\n isDisabled: !state.canIncrement,\n onPressStart: onButtonPressStart\n });\n\n let decrementButtonProps: AriaButtonProps = mergeProps(decButtonProps, {\n 'aria-label': decrementAriaLabel || stringFormatter.format('decrease', {fieldLabel}).trim(),\n id: ariaLabelledby && !decrementAriaLabel ? decrementId : null,\n 'aria-labelledby': ariaLabelledby && !decrementAriaLabel ? `${decrementId} ${ariaLabelledby}` : null,\n 'aria-controls': inputId,\n excludeFromTabOrder: true,\n preventFocusOnPress: true,\n allowFocusWhenDisabled: true,\n isDisabled: !state.canDecrement,\n onPressStart: onButtonPressStart\n });\n\n return {\n groupProps: {\n ...focusWithinProps,\n role: 'group',\n 'aria-disabled': isDisabled,\n 'aria-invalid': isInvalid ? 'true' : undefined\n },\n labelProps,\n inputProps,\n incrementButtonProps,\n decrementButtonProps,\n errorMessageProps,\n descriptionProps,\n isInvalid,\n validationErrors,\n validationDetails\n };\n}\n"],"names":[],"version":3,"file":"useNumberField.main.js.map"}
|
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
|
]);
|
|
@@ -90,31 +90,32 @@ function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
90
90
|
onScroll: onWheel,
|
|
91
91
|
isDisabled: scrollingDisabled
|
|
92
92
|
}, inputRef);
|
|
93
|
+
var _intlOptions_maximumFractionDigits;
|
|
93
94
|
// The inputMode attribute influences the software keyboard that is shown on touch devices.
|
|
94
95
|
// Browsers and operating systems are quite inconsistent about what keys are available, however.
|
|
95
96
|
// We choose between numeric and decimal based on whether we allow negative and fractional numbers,
|
|
96
97
|
// and based on testing on various devices to determine what keys are available in each inputMode.
|
|
97
|
-
let hasDecimals = intlOptions.maximumFractionDigits > 0;
|
|
98
|
+
let hasDecimals = ((_intlOptions_maximumFractionDigits = intlOptions.maximumFractionDigits) !== null && _intlOptions_maximumFractionDigits !== void 0 ? _intlOptions_maximumFractionDigits : 0) > 0;
|
|
98
99
|
let hasNegative = state.minValue === undefined || isNaN(state.minValue) || state.minValue < 0;
|
|
99
|
-
let inputMode =
|
|
100
|
+
let inputMode = 'numeric';
|
|
100
101
|
if ((0, $jvaNJ$isIPhone)()) {
|
|
101
102
|
// iPhone doesn't have a minus sign in either numeric or decimal.
|
|
102
103
|
// Note this is only for iPhone, not iPad, which always has both
|
|
103
104
|
// minus and decimal in numeric.
|
|
104
|
-
if (hasNegative) inputMode =
|
|
105
|
-
else if (hasDecimals) inputMode =
|
|
105
|
+
if (hasNegative) inputMode = 'text';
|
|
106
|
+
else if (hasDecimals) inputMode = 'decimal';
|
|
106
107
|
} else if ((0, $jvaNJ$isAndroid)()) {
|
|
107
108
|
// Android numeric has both a decimal point and minus key.
|
|
108
109
|
// decimal does not have a minus key.
|
|
109
|
-
if (hasNegative) inputMode =
|
|
110
|
-
else if (hasDecimals) inputMode =
|
|
110
|
+
if (hasNegative) inputMode = 'numeric';
|
|
111
|
+
else if (hasDecimals) inputMode = 'decimal';
|
|
111
112
|
}
|
|
112
113
|
let onChange = (value)=>{
|
|
113
114
|
if (state.validate(value)) state.setInputValue(value);
|
|
114
115
|
};
|
|
115
116
|
let domProps = (0, $jvaNJ$filterDOMProps)(props);
|
|
116
117
|
let onKeyDownEnter = (0, $jvaNJ$useCallback)((e)=>{
|
|
117
|
-
if (e.key ===
|
|
118
|
+
if (e.key === 'Enter') {
|
|
118
119
|
commit();
|
|
119
120
|
commitValidation();
|
|
120
121
|
} else e.continuePropagation();
|
|
@@ -136,11 +137,11 @@ function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
136
137
|
[(0, $jvaNJ$privateValidationStateProp)]: state,
|
|
137
138
|
value: inputValue,
|
|
138
139
|
defaultValue: undefined,
|
|
139
|
-
autoComplete:
|
|
140
|
-
|
|
141
|
-
|
|
140
|
+
autoComplete: 'off',
|
|
141
|
+
'aria-label': props['aria-label'] || undefined,
|
|
142
|
+
'aria-labelledby': props['aria-labelledby'] || undefined,
|
|
142
143
|
id: inputId,
|
|
143
|
-
type:
|
|
144
|
+
type: 'text',
|
|
144
145
|
inputMode: inputMode,
|
|
145
146
|
onChange: onChange,
|
|
146
147
|
onBlur: onBlur,
|
|
@@ -159,15 +160,15 @@ function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
159
160
|
// override the spinbutton role, we can't focus a spin button with VO
|
|
160
161
|
role: null,
|
|
161
162
|
// ignore aria-roledescription on iOS so that required state will announce when it is present
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
autoCorrect:
|
|
168
|
-
spellCheck:
|
|
163
|
+
'aria-roledescription': !(0, $jvaNJ$isIOS)() ? stringFormatter.format('numberField') : null,
|
|
164
|
+
'aria-valuemax': null,
|
|
165
|
+
'aria-valuemin': null,
|
|
166
|
+
'aria-valuenow': null,
|
|
167
|
+
'aria-valuetext': null,
|
|
168
|
+
autoCorrect: 'off',
|
|
169
|
+
spellCheck: 'false'
|
|
169
170
|
});
|
|
170
|
-
if (props.validationBehavior ===
|
|
171
|
+
if (props.validationBehavior === 'native') inputProps['aria-required'] = undefined;
|
|
171
172
|
let onButtonPressStart = (e)=>{
|
|
172
173
|
var _inputRef_current;
|
|
173
174
|
// If focus is already on the input, keep it there so we don't hide the
|
|
@@ -176,7 +177,7 @@ function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
176
177
|
// Otherwise, when using a mouse, move focus to the input.
|
|
177
178
|
// On touch, or with a screen reader, focus the button so that the software
|
|
178
179
|
// keyboard does not appear and the screen reader cursor is not moved off the button.
|
|
179
|
-
if (e.pointerType ===
|
|
180
|
+
if (e.pointerType === 'mouse') (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
|
|
180
181
|
else e.target.focus();
|
|
181
182
|
};
|
|
182
183
|
// Determine the label for the increment and decrement buttons. There are 4 cases:
|
|
@@ -189,18 +190,18 @@ function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
189
190
|
// (1) and (2) could possibly be combined and both use aria-labelledby. However, placing the label in
|
|
190
191
|
// the aria-label string rather than using aria-labelledby gives more flexibility to translators to change
|
|
191
192
|
// the order or add additional words around the label if needed.
|
|
192
|
-
let fieldLabel = props[
|
|
193
|
+
let fieldLabel = props['aria-label'] || (typeof props.label === 'string' ? props.label : '');
|
|
193
194
|
let ariaLabelledby;
|
|
194
|
-
if (!fieldLabel) ariaLabelledby = props.label != null ? labelProps.id : props[
|
|
195
|
+
if (!fieldLabel) ariaLabelledby = props.label != null ? labelProps.id : props['aria-labelledby'];
|
|
195
196
|
let incrementId = (0, $jvaNJ$useId)();
|
|
196
197
|
let decrementId = (0, $jvaNJ$useId)();
|
|
197
198
|
let incrementButtonProps = (0, $jvaNJ$mergeProps)(incButtonProps, {
|
|
198
|
-
|
|
199
|
+
'aria-label': incrementAriaLabel || stringFormatter.format('increase', {
|
|
199
200
|
fieldLabel: fieldLabel
|
|
200
201
|
}).trim(),
|
|
201
202
|
id: ariaLabelledby && !incrementAriaLabel ? incrementId : null,
|
|
202
|
-
|
|
203
|
-
|
|
203
|
+
'aria-labelledby': ariaLabelledby && !incrementAriaLabel ? `${incrementId} ${ariaLabelledby}` : null,
|
|
204
|
+
'aria-controls': inputId,
|
|
204
205
|
excludeFromTabOrder: true,
|
|
205
206
|
preventFocusOnPress: true,
|
|
206
207
|
allowFocusWhenDisabled: true,
|
|
@@ -208,12 +209,12 @@ function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
208
209
|
onPressStart: onButtonPressStart
|
|
209
210
|
});
|
|
210
211
|
let decrementButtonProps = (0, $jvaNJ$mergeProps)(decButtonProps, {
|
|
211
|
-
|
|
212
|
+
'aria-label': decrementAriaLabel || stringFormatter.format('decrease', {
|
|
212
213
|
fieldLabel: fieldLabel
|
|
213
214
|
}).trim(),
|
|
214
215
|
id: ariaLabelledby && !decrementAriaLabel ? decrementId : null,
|
|
215
|
-
|
|
216
|
-
|
|
216
|
+
'aria-labelledby': ariaLabelledby && !decrementAriaLabel ? `${decrementId} ${ariaLabelledby}` : null,
|
|
217
|
+
'aria-controls': inputId,
|
|
217
218
|
excludeFromTabOrder: true,
|
|
218
219
|
preventFocusOnPress: true,
|
|
219
220
|
allowFocusWhenDisabled: true,
|
|
@@ -223,9 +224,9 @@ function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
223
224
|
return {
|
|
224
225
|
groupProps: {
|
|
225
226
|
...focusWithinProps,
|
|
226
|
-
role:
|
|
227
|
-
|
|
228
|
-
|
|
227
|
+
role: 'group',
|
|
228
|
+
'aria-disabled': isDisabled,
|
|
229
|
+
'aria-invalid': isInvalid ? 'true' : undefined
|
|
229
230
|
},
|
|
230
231
|
labelProps: labelProps,
|
|
231
232
|
inputProps: inputProps,
|
|
@@ -241,4 +242,4 @@ function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
241
242
|
|
|
242
243
|
|
|
243
244
|
export {$81397a9303501bda$export$23f548e970bdf099 as useNumberField};
|
|
244
|
-
//# sourceMappingURL=useNumberField.
|
|
245
|
+
//# 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
|
]);
|
|
@@ -90,31 +90,32 @@ function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
90
90
|
onScroll: onWheel,
|
|
91
91
|
isDisabled: scrollingDisabled
|
|
92
92
|
}, inputRef);
|
|
93
|
+
var _intlOptions_maximumFractionDigits;
|
|
93
94
|
// The inputMode attribute influences the software keyboard that is shown on touch devices.
|
|
94
95
|
// Browsers and operating systems are quite inconsistent about what keys are available, however.
|
|
95
96
|
// We choose between numeric and decimal based on whether we allow negative and fractional numbers,
|
|
96
97
|
// and based on testing on various devices to determine what keys are available in each inputMode.
|
|
97
|
-
let hasDecimals = intlOptions.maximumFractionDigits > 0;
|
|
98
|
+
let hasDecimals = ((_intlOptions_maximumFractionDigits = intlOptions.maximumFractionDigits) !== null && _intlOptions_maximumFractionDigits !== void 0 ? _intlOptions_maximumFractionDigits : 0) > 0;
|
|
98
99
|
let hasNegative = state.minValue === undefined || isNaN(state.minValue) || state.minValue < 0;
|
|
99
|
-
let inputMode =
|
|
100
|
+
let inputMode = 'numeric';
|
|
100
101
|
if ((0, $jvaNJ$isIPhone)()) {
|
|
101
102
|
// iPhone doesn't have a minus sign in either numeric or decimal.
|
|
102
103
|
// Note this is only for iPhone, not iPad, which always has both
|
|
103
104
|
// minus and decimal in numeric.
|
|
104
|
-
if (hasNegative) inputMode =
|
|
105
|
-
else if (hasDecimals) inputMode =
|
|
105
|
+
if (hasNegative) inputMode = 'text';
|
|
106
|
+
else if (hasDecimals) inputMode = 'decimal';
|
|
106
107
|
} else if ((0, $jvaNJ$isAndroid)()) {
|
|
107
108
|
// Android numeric has both a decimal point and minus key.
|
|
108
109
|
// decimal does not have a minus key.
|
|
109
|
-
if (hasNegative) inputMode =
|
|
110
|
-
else if (hasDecimals) inputMode =
|
|
110
|
+
if (hasNegative) inputMode = 'numeric';
|
|
111
|
+
else if (hasDecimals) inputMode = 'decimal';
|
|
111
112
|
}
|
|
112
113
|
let onChange = (value)=>{
|
|
113
114
|
if (state.validate(value)) state.setInputValue(value);
|
|
114
115
|
};
|
|
115
116
|
let domProps = (0, $jvaNJ$filterDOMProps)(props);
|
|
116
117
|
let onKeyDownEnter = (0, $jvaNJ$useCallback)((e)=>{
|
|
117
|
-
if (e.key ===
|
|
118
|
+
if (e.key === 'Enter') {
|
|
118
119
|
commit();
|
|
119
120
|
commitValidation();
|
|
120
121
|
} else e.continuePropagation();
|
|
@@ -136,11 +137,11 @@ function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
136
137
|
[(0, $jvaNJ$privateValidationStateProp)]: state,
|
|
137
138
|
value: inputValue,
|
|
138
139
|
defaultValue: undefined,
|
|
139
|
-
autoComplete:
|
|
140
|
-
|
|
141
|
-
|
|
140
|
+
autoComplete: 'off',
|
|
141
|
+
'aria-label': props['aria-label'] || undefined,
|
|
142
|
+
'aria-labelledby': props['aria-labelledby'] || undefined,
|
|
142
143
|
id: inputId,
|
|
143
|
-
type:
|
|
144
|
+
type: 'text',
|
|
144
145
|
inputMode: inputMode,
|
|
145
146
|
onChange: onChange,
|
|
146
147
|
onBlur: onBlur,
|
|
@@ -159,15 +160,15 @@ function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
159
160
|
// override the spinbutton role, we can't focus a spin button with VO
|
|
160
161
|
role: null,
|
|
161
162
|
// ignore aria-roledescription on iOS so that required state will announce when it is present
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
autoCorrect:
|
|
168
|
-
spellCheck:
|
|
163
|
+
'aria-roledescription': !(0, $jvaNJ$isIOS)() ? stringFormatter.format('numberField') : null,
|
|
164
|
+
'aria-valuemax': null,
|
|
165
|
+
'aria-valuemin': null,
|
|
166
|
+
'aria-valuenow': null,
|
|
167
|
+
'aria-valuetext': null,
|
|
168
|
+
autoCorrect: 'off',
|
|
169
|
+
spellCheck: 'false'
|
|
169
170
|
});
|
|
170
|
-
if (props.validationBehavior ===
|
|
171
|
+
if (props.validationBehavior === 'native') inputProps['aria-required'] = undefined;
|
|
171
172
|
let onButtonPressStart = (e)=>{
|
|
172
173
|
var _inputRef_current;
|
|
173
174
|
// If focus is already on the input, keep it there so we don't hide the
|
|
@@ -176,7 +177,7 @@ function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
176
177
|
// Otherwise, when using a mouse, move focus to the input.
|
|
177
178
|
// On touch, or with a screen reader, focus the button so that the software
|
|
178
179
|
// keyboard does not appear and the screen reader cursor is not moved off the button.
|
|
179
|
-
if (e.pointerType ===
|
|
180
|
+
if (e.pointerType === 'mouse') (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
|
|
180
181
|
else e.target.focus();
|
|
181
182
|
};
|
|
182
183
|
// Determine the label for the increment and decrement buttons. There are 4 cases:
|
|
@@ -189,18 +190,18 @@ function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
189
190
|
// (1) and (2) could possibly be combined and both use aria-labelledby. However, placing the label in
|
|
190
191
|
// the aria-label string rather than using aria-labelledby gives more flexibility to translators to change
|
|
191
192
|
// the order or add additional words around the label if needed.
|
|
192
|
-
let fieldLabel = props[
|
|
193
|
+
let fieldLabel = props['aria-label'] || (typeof props.label === 'string' ? props.label : '');
|
|
193
194
|
let ariaLabelledby;
|
|
194
|
-
if (!fieldLabel) ariaLabelledby = props.label != null ? labelProps.id : props[
|
|
195
|
+
if (!fieldLabel) ariaLabelledby = props.label != null ? labelProps.id : props['aria-labelledby'];
|
|
195
196
|
let incrementId = (0, $jvaNJ$useId)();
|
|
196
197
|
let decrementId = (0, $jvaNJ$useId)();
|
|
197
198
|
let incrementButtonProps = (0, $jvaNJ$mergeProps)(incButtonProps, {
|
|
198
|
-
|
|
199
|
+
'aria-label': incrementAriaLabel || stringFormatter.format('increase', {
|
|
199
200
|
fieldLabel: fieldLabel
|
|
200
201
|
}).trim(),
|
|
201
202
|
id: ariaLabelledby && !incrementAriaLabel ? incrementId : null,
|
|
202
|
-
|
|
203
|
-
|
|
203
|
+
'aria-labelledby': ariaLabelledby && !incrementAriaLabel ? `${incrementId} ${ariaLabelledby}` : null,
|
|
204
|
+
'aria-controls': inputId,
|
|
204
205
|
excludeFromTabOrder: true,
|
|
205
206
|
preventFocusOnPress: true,
|
|
206
207
|
allowFocusWhenDisabled: true,
|
|
@@ -208,12 +209,12 @@ function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
208
209
|
onPressStart: onButtonPressStart
|
|
209
210
|
});
|
|
210
211
|
let decrementButtonProps = (0, $jvaNJ$mergeProps)(decButtonProps, {
|
|
211
|
-
|
|
212
|
+
'aria-label': decrementAriaLabel || stringFormatter.format('decrease', {
|
|
212
213
|
fieldLabel: fieldLabel
|
|
213
214
|
}).trim(),
|
|
214
215
|
id: ariaLabelledby && !decrementAriaLabel ? decrementId : null,
|
|
215
|
-
|
|
216
|
-
|
|
216
|
+
'aria-labelledby': ariaLabelledby && !decrementAriaLabel ? `${decrementId} ${ariaLabelledby}` : null,
|
|
217
|
+
'aria-controls': inputId,
|
|
217
218
|
excludeFromTabOrder: true,
|
|
218
219
|
preventFocusOnPress: true,
|
|
219
220
|
allowFocusWhenDisabled: true,
|
|
@@ -223,9 +224,9 @@ function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
|
|
|
223
224
|
return {
|
|
224
225
|
groupProps: {
|
|
225
226
|
...focusWithinProps,
|
|
226
|
-
role:
|
|
227
|
-
|
|
228
|
-
|
|
227
|
+
role: 'group',
|
|
228
|
+
'aria-disabled': isDisabled,
|
|
229
|
+
'aria-invalid': isInvalid ? 'true' : undefined
|
|
229
230
|
},
|
|
230
231
|
labelProps: labelProps,
|
|
231
232
|
inputProps: inputProps,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-aria/numberfield/src/useNumberField.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 {AriaButtonProps} from '@react-types/button';\nimport {AriaNumberFieldProps} from '@react-types/numberfield';\nimport {chain, filterDOMProps, isAndroid, isIOS, isIPhone, mergeProps, useFormReset, useId} from '@react-aria/utils';\nimport {DOMAttributes, GroupDOMAttributes, TextInputDOMProps, ValidationResult} from '@react-types/shared';\nimport {\n InputHTMLAttributes,\n LabelHTMLAttributes,\n RefObject,\n useCallback,\n useMemo,\n useState\n} from 'react';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {NumberFieldState} from '@react-stately/numberfield';\nimport {privateValidationStateProp} from '@react-stately/form';\nimport {useFocus, useFocusWithin, useScrollWheel} from '@react-aria/interactions';\nimport {useFormattedTextField} from '@react-aria/textfield';\nimport {\n useLocalizedStringFormatter,\n useNumberFormatter\n} from '@react-aria/i18n';\nimport {useSpinButton} from '@react-aria/spinbutton';\n\nexport interface NumberFieldAria extends ValidationResult {\n /** Props for the label element. */\n labelProps: LabelHTMLAttributes<HTMLLabelElement>,\n /** Props for the group wrapper around the input and stepper buttons. */\n groupProps: GroupDOMAttributes,\n /** Props for the input element. */\n inputProps: InputHTMLAttributes<HTMLInputElement>,\n /** Props for the increment button, to be passed to [useButton](useButton.html). */\n incrementButtonProps: AriaButtonProps,\n /** Props for the decrement button, to be passed to [useButton](useButton.html). */\n decrementButtonProps: AriaButtonProps,\n /** Props for the number field's description element, if any. */\n descriptionProps: DOMAttributes,\n /** Props for the number field's error message element, if any. */\n errorMessageProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a number field component.\n * Number fields allow users to enter a number, and increment or decrement the value using stepper buttons.\n */\nexport function useNumberField(props: AriaNumberFieldProps, state: NumberFieldState, inputRef: RefObject<HTMLInputElement>): NumberFieldAria {\n let {\n id,\n decrementAriaLabel,\n incrementAriaLabel,\n isDisabled,\n isReadOnly,\n isRequired,\n minValue,\n maxValue,\n autoFocus,\n label,\n formatOptions,\n onBlur = () => {},\n onFocus,\n onFocusChange,\n onKeyDown,\n onKeyUp,\n description,\n errorMessage,\n isWheelDisabled,\n ...otherProps\n } = props;\n\n let {\n increment,\n incrementToMax,\n decrement,\n decrementToMin,\n numberValue,\n inputValue,\n commit,\n commitValidation\n } = state;\n\n const stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/numberfield');\n\n let inputId = useId(id);\n let {focusProps} = useFocus({\n onBlur() {\n // Set input value to normalized valid value\n commit();\n }\n });\n\n let numberFormatter = useNumberFormatter(formatOptions);\n let intlOptions = useMemo(() => numberFormatter.resolvedOptions(), [numberFormatter]);\n\n // Replace negative textValue formatted using currencySign: 'accounting'\n // with a textValue that can be announced using a minus sign.\n let textValueFormatter = useNumberFormatter({...formatOptions, currencySign: undefined});\n let textValue = useMemo(() => isNaN(numberValue) ? '' : textValueFormatter.format(numberValue), [textValueFormatter, numberValue]);\n\n let {\n spinButtonProps,\n incrementButtonProps: incButtonProps,\n decrementButtonProps: decButtonProps\n } = useSpinButton(\n {\n isDisabled,\n isReadOnly,\n isRequired,\n maxValue,\n minValue,\n onIncrement: increment,\n onIncrementToMax: incrementToMax,\n onDecrement: decrement,\n onDecrementToMin: decrementToMin,\n value: numberValue,\n textValue\n }\n );\n\n let [focusWithin, setFocusWithin] = useState(false);\n let {focusWithinProps} = useFocusWithin({isDisabled, onFocusWithinChange: setFocusWithin});\n\n let onWheel = useCallback((e) => {\n // if on a trackpad, users can scroll in both X and Y at once, check the magnitude of the change\n // if it's mostly in the X direction, then just return, the user probably doesn't mean to inc/dec\n // this isn't perfect, events come in fast with small deltas and a part of the scroll may give a false indication\n // especially if the user is scrolling near 45deg\n if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) {\n return;\n }\n if (e.deltaY > 0) {\n increment();\n } else if (e.deltaY < 0) {\n decrement();\n }\n }, [decrement, increment]);\n // If the input isn't supposed to receive input, disable scrolling.\n let scrollingDisabled = isWheelDisabled || isDisabled || isReadOnly || !focusWithin;\n useScrollWheel({onScroll: onWheel, isDisabled: scrollingDisabled}, inputRef);\n\n // The inputMode attribute influences the software keyboard that is shown on touch devices.\n // Browsers and operating systems are quite inconsistent about what keys are available, however.\n // We choose between numeric and decimal based on whether we allow negative and fractional numbers,\n // and based on testing on various devices to determine what keys are available in each inputMode.\n let hasDecimals = intlOptions.maximumFractionDigits > 0;\n let hasNegative = (state.minValue === undefined || isNaN(state.minValue)) || state.minValue < 0;\n let inputMode: TextInputDOMProps['inputMode'] = 'numeric';\n if (isIPhone()) {\n // iPhone doesn't have a minus sign in either numeric or decimal.\n // Note this is only for iPhone, not iPad, which always has both\n // minus and decimal in numeric.\n if (hasNegative) {\n inputMode = 'text';\n } else if (hasDecimals) {\n inputMode = 'decimal';\n }\n } else if (isAndroid()) {\n // Android numeric has both a decimal point and minus key.\n // decimal does not have a minus key.\n if (hasNegative) {\n inputMode = 'numeric';\n } else if (hasDecimals) {\n inputMode = 'decimal';\n }\n }\n\n let onChange = value => {\n if (state.validate(value)) {\n state.setInputValue(value);\n }\n };\n\n let domProps = filterDOMProps(props);\n let onKeyDownEnter = useCallback((e) => {\n if (e.key === 'Enter') {\n commit();\n commitValidation();\n } else {\n e.continuePropagation();\n }\n }, [commit, commitValidation]);\n\n let {isInvalid, validationErrors, validationDetails} = state.displayValidation;\n let {labelProps, inputProps: textFieldProps, descriptionProps, errorMessageProps} = useFormattedTextField({\n ...otherProps,\n ...domProps,\n name: undefined,\n label,\n autoFocus,\n isDisabled,\n isReadOnly,\n isRequired,\n validate: undefined,\n [privateValidationStateProp]: state,\n value: inputValue,\n defaultValue: undefined, // defaultValue already used to populate state.inputValue, unneeded here\n autoComplete: 'off',\n 'aria-label': props['aria-label'] || undefined,\n 'aria-labelledby': props['aria-labelledby'] || undefined,\n id: inputId,\n type: 'text', // Can't use type=\"number\" because then we can't have things like $ in the field.\n inputMode,\n onChange,\n onBlur,\n onFocus,\n onFocusChange,\n onKeyDown: useMemo(() => chain(onKeyDownEnter, onKeyDown), [onKeyDownEnter, onKeyDown]),\n onKeyUp,\n description,\n errorMessage\n }, state, inputRef);\n\n useFormReset(inputRef, state.numberValue, state.setNumberValue);\n\n let inputProps: InputHTMLAttributes<HTMLInputElement> = mergeProps(\n spinButtonProps,\n focusProps,\n textFieldProps,\n {\n // override the spinbutton role, we can't focus a spin button with VO\n role: null,\n // ignore aria-roledescription on iOS so that required state will announce when it is present\n 'aria-roledescription': (!isIOS() ? stringFormatter.format('numberField') : null),\n 'aria-valuemax': null,\n 'aria-valuemin': null,\n 'aria-valuenow': null,\n 'aria-valuetext': null,\n autoCorrect: 'off',\n spellCheck: 'false'\n }\n );\n\n if (props.validationBehavior === 'native') {\n inputProps['aria-required'] = undefined;\n }\n\n let onButtonPressStart = (e) => {\n // If focus is already on the input, keep it there so we don't hide the\n // software keyboard when tapping the increment/decrement buttons.\n if (document.activeElement === inputRef.current) {\n return;\n }\n\n // Otherwise, when using a mouse, move focus to the input.\n // On touch, or with a screen reader, focus the button so that the software\n // keyboard does not appear and the screen reader cursor is not moved off the button.\n if (e.pointerType === 'mouse') {\n inputRef.current?.focus();\n } else {\n e.target.focus();\n }\n };\n\n // Determine the label for the increment and decrement buttons. There are 4 cases:\n //\n // 1. With a visible label that is a string: aria-label: `Increase ${props.label}`\n // 2. With a visible label that is JSX: aria-label: 'Increase', aria-labelledby: '${incrementId} ${labelId}'\n // 3. With an aria-label: aria-label: `Increase ${props['aria-label']}`\n // 4. With an aria-labelledby: aria-label: 'Increase', aria-labelledby: `${incrementId} ${props['aria-labelledby']}`\n //\n // (1) and (2) could possibly be combined and both use aria-labelledby. However, placing the label in\n // the aria-label string rather than using aria-labelledby gives more flexibility to translators to change\n // the order or add additional words around the label if needed.\n let fieldLabel = props['aria-label'] || (typeof props.label === 'string' ? props.label : '');\n let ariaLabelledby: string | undefined;\n if (!fieldLabel) {\n ariaLabelledby = props.label != null ? labelProps.id : props['aria-labelledby'];\n }\n\n let incrementId = useId();\n let decrementId = useId();\n\n let incrementButtonProps: AriaButtonProps = mergeProps(incButtonProps, {\n 'aria-label': incrementAriaLabel || stringFormatter.format('increase', {fieldLabel}).trim(),\n id: ariaLabelledby && !incrementAriaLabel ? incrementId : null,\n 'aria-labelledby': ariaLabelledby && !incrementAriaLabel ? `${incrementId} ${ariaLabelledby}` : null,\n 'aria-controls': inputId,\n excludeFromTabOrder: true,\n preventFocusOnPress: true,\n allowFocusWhenDisabled: true,\n isDisabled: !state.canIncrement,\n onPressStart: onButtonPressStart\n });\n\n let decrementButtonProps: AriaButtonProps = mergeProps(decButtonProps, {\n 'aria-label': decrementAriaLabel || stringFormatter.format('decrease', {fieldLabel}).trim(),\n id: ariaLabelledby && !decrementAriaLabel ? decrementId : null,\n 'aria-labelledby': ariaLabelledby && !decrementAriaLabel ? `${decrementId} ${ariaLabelledby}` : null,\n 'aria-controls': inputId,\n excludeFromTabOrder: true,\n preventFocusOnPress: true,\n allowFocusWhenDisabled: true,\n isDisabled: !state.canDecrement,\n onPressStart: onButtonPressStart\n });\n\n return {\n groupProps: {\n ...focusWithinProps,\n role: 'group',\n 'aria-disabled': isDisabled,\n 'aria-invalid': isInvalid ? 'true' : undefined\n },\n labelProps,\n inputProps,\n incrementButtonProps,\n decrementButtonProps,\n errorMessageProps,\n descriptionProps,\n isInvalid,\n validationErrors,\n validationDetails\n };\n}\n"],"names":[],"version":3,"file":"useNumberField.module.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-aria/numberfield/src/useNumberField.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 {AriaButtonProps} from '@react-types/button';\nimport {AriaNumberFieldProps} from '@react-types/numberfield';\nimport {chain, filterDOMProps, isAndroid, isIOS, isIPhone, mergeProps, useFormReset, useId} from '@react-aria/utils';\nimport {DOMAttributes, GroupDOMAttributes, TextInputDOMProps, ValidationResult} from '@react-types/shared';\nimport {\n InputHTMLAttributes,\n LabelHTMLAttributes,\n RefObject,\n useCallback,\n useMemo,\n useState\n} from 'react';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {NumberFieldState} from '@react-stately/numberfield';\nimport {privateValidationStateProp} from '@react-stately/form';\nimport {useFocus, useFocusWithin, useScrollWheel} from '@react-aria/interactions';\nimport {useFormattedTextField} from '@react-aria/textfield';\nimport {\n useLocalizedStringFormatter,\n useNumberFormatter\n} from '@react-aria/i18n';\nimport {useSpinButton} from '@react-aria/spinbutton';\n\nexport interface NumberFieldAria extends ValidationResult {\n /** Props for the label element. */\n labelProps: LabelHTMLAttributes<HTMLLabelElement>,\n /** Props for the group wrapper around the input and stepper buttons. */\n groupProps: GroupDOMAttributes,\n /** Props for the input element. */\n inputProps: InputHTMLAttributes<HTMLInputElement>,\n /** Props for the increment button, to be passed to [useButton](useButton.html). */\n incrementButtonProps: AriaButtonProps,\n /** Props for the decrement button, to be passed to [useButton](useButton.html). */\n decrementButtonProps: AriaButtonProps,\n /** Props for the number field's description element, if any. */\n descriptionProps: DOMAttributes,\n /** Props for the number field's error message element, if any. */\n errorMessageProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a number field component.\n * Number fields allow users to enter a number, and increment or decrement the value using stepper buttons.\n */\nexport function useNumberField(props: AriaNumberFieldProps, state: NumberFieldState, inputRef: RefObject<HTMLInputElement | null>): NumberFieldAria {\n let {\n id,\n decrementAriaLabel,\n incrementAriaLabel,\n isDisabled,\n isReadOnly,\n isRequired,\n minValue,\n maxValue,\n autoFocus,\n label,\n formatOptions,\n onBlur = () => {},\n onFocus,\n onFocusChange,\n onKeyDown,\n onKeyUp,\n description,\n errorMessage,\n isWheelDisabled,\n ...otherProps\n } = props;\n\n let {\n increment,\n incrementToMax,\n decrement,\n decrementToMin,\n numberValue,\n inputValue,\n commit,\n commitValidation\n } = state;\n\n const stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/numberfield');\n\n let inputId = useId(id);\n let {focusProps} = useFocus({\n onBlur() {\n // Set input value to normalized valid value\n commit();\n }\n });\n\n let numberFormatter = useNumberFormatter(formatOptions);\n let intlOptions = useMemo(() => numberFormatter.resolvedOptions(), [numberFormatter]);\n\n // Replace negative textValue formatted using currencySign: 'accounting'\n // with a textValue that can be announced using a minus sign.\n let textValueFormatter = useNumberFormatter({...formatOptions, currencySign: undefined});\n let textValue = useMemo(() => isNaN(numberValue) ? '' : textValueFormatter.format(numberValue), [textValueFormatter, numberValue]);\n\n let {\n spinButtonProps,\n incrementButtonProps: incButtonProps,\n decrementButtonProps: decButtonProps\n } = useSpinButton(\n {\n isDisabled,\n isReadOnly,\n isRequired,\n maxValue,\n minValue,\n onIncrement: increment,\n onIncrementToMax: incrementToMax,\n onDecrement: decrement,\n onDecrementToMin: decrementToMin,\n value: numberValue,\n textValue\n }\n );\n\n let [focusWithin, setFocusWithin] = useState(false);\n let {focusWithinProps} = useFocusWithin({isDisabled, onFocusWithinChange: setFocusWithin});\n\n let onWheel = useCallback((e) => {\n // if on a trackpad, users can scroll in both X and Y at once, check the magnitude of the change\n // if it's mostly in the X direction, then just return, the user probably doesn't mean to inc/dec\n // this isn't perfect, events come in fast with small deltas and a part of the scroll may give a false indication\n // especially if the user is scrolling near 45deg\n if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) {\n return;\n }\n if (e.deltaY > 0) {\n increment();\n } else if (e.deltaY < 0) {\n decrement();\n }\n }, [decrement, increment]);\n // If the input isn't supposed to receive input, disable scrolling.\n let scrollingDisabled = isWheelDisabled || isDisabled || isReadOnly || !focusWithin;\n useScrollWheel({onScroll: onWheel, isDisabled: scrollingDisabled}, inputRef);\n\n // The inputMode attribute influences the software keyboard that is shown on touch devices.\n // Browsers and operating systems are quite inconsistent about what keys are available, however.\n // We choose between numeric and decimal based on whether we allow negative and fractional numbers,\n // and based on testing on various devices to determine what keys are available in each inputMode.\n let hasDecimals = (intlOptions.maximumFractionDigits ?? 0) > 0;\n let hasNegative = (state.minValue === undefined || isNaN(state.minValue)) || state.minValue < 0;\n let inputMode: TextInputDOMProps['inputMode'] = 'numeric';\n if (isIPhone()) {\n // iPhone doesn't have a minus sign in either numeric or decimal.\n // Note this is only for iPhone, not iPad, which always has both\n // minus and decimal in numeric.\n if (hasNegative) {\n inputMode = 'text';\n } else if (hasDecimals) {\n inputMode = 'decimal';\n }\n } else if (isAndroid()) {\n // Android numeric has both a decimal point and minus key.\n // decimal does not have a minus key.\n if (hasNegative) {\n inputMode = 'numeric';\n } else if (hasDecimals) {\n inputMode = 'decimal';\n }\n }\n\n let onChange = value => {\n if (state.validate(value)) {\n state.setInputValue(value);\n }\n };\n\n let domProps = filterDOMProps(props);\n let onKeyDownEnter = useCallback((e) => {\n if (e.key === 'Enter') {\n commit();\n commitValidation();\n } else {\n e.continuePropagation();\n }\n }, [commit, commitValidation]);\n\n let {isInvalid, validationErrors, validationDetails} = state.displayValidation;\n let {labelProps, inputProps: textFieldProps, descriptionProps, errorMessageProps} = useFormattedTextField({\n ...otherProps,\n ...domProps,\n name: undefined,\n label,\n autoFocus,\n isDisabled,\n isReadOnly,\n isRequired,\n validate: undefined,\n [privateValidationStateProp]: state,\n value: inputValue,\n defaultValue: undefined, // defaultValue already used to populate state.inputValue, unneeded here\n autoComplete: 'off',\n 'aria-label': props['aria-label'] || undefined,\n 'aria-labelledby': props['aria-labelledby'] || undefined,\n id: inputId,\n type: 'text', // Can't use type=\"number\" because then we can't have things like $ in the field.\n inputMode,\n onChange,\n onBlur,\n onFocus,\n onFocusChange,\n onKeyDown: useMemo(() => chain(onKeyDownEnter, onKeyDown), [onKeyDownEnter, onKeyDown]),\n onKeyUp,\n description,\n errorMessage\n }, state, inputRef);\n\n useFormReset(inputRef, state.numberValue, state.setNumberValue);\n\n let inputProps: InputHTMLAttributes<HTMLInputElement> = mergeProps(\n spinButtonProps,\n focusProps,\n textFieldProps,\n {\n // override the spinbutton role, we can't focus a spin button with VO\n role: null,\n // ignore aria-roledescription on iOS so that required state will announce when it is present\n 'aria-roledescription': (!isIOS() ? stringFormatter.format('numberField') : null),\n 'aria-valuemax': null,\n 'aria-valuemin': null,\n 'aria-valuenow': null,\n 'aria-valuetext': null,\n autoCorrect: 'off',\n spellCheck: 'false'\n }\n );\n\n if (props.validationBehavior === 'native') {\n inputProps['aria-required'] = undefined;\n }\n\n let onButtonPressStart = (e) => {\n // If focus is already on the input, keep it there so we don't hide the\n // software keyboard when tapping the increment/decrement buttons.\n if (document.activeElement === inputRef.current) {\n return;\n }\n\n // Otherwise, when using a mouse, move focus to the input.\n // On touch, or with a screen reader, focus the button so that the software\n // keyboard does not appear and the screen reader cursor is not moved off the button.\n if (e.pointerType === 'mouse') {\n inputRef.current?.focus();\n } else {\n e.target.focus();\n }\n };\n\n // Determine the label for the increment and decrement buttons. There are 4 cases:\n //\n // 1. With a visible label that is a string: aria-label: `Increase ${props.label}`\n // 2. With a visible label that is JSX: aria-label: 'Increase', aria-labelledby: '${incrementId} ${labelId}'\n // 3. With an aria-label: aria-label: `Increase ${props['aria-label']}`\n // 4. With an aria-labelledby: aria-label: 'Increase', aria-labelledby: `${incrementId} ${props['aria-labelledby']}`\n //\n // (1) and (2) could possibly be combined and both use aria-labelledby. However, placing the label in\n // the aria-label string rather than using aria-labelledby gives more flexibility to translators to change\n // the order or add additional words around the label if needed.\n let fieldLabel = props['aria-label'] || (typeof props.label === 'string' ? props.label : '');\n let ariaLabelledby: string | undefined;\n if (!fieldLabel) {\n ariaLabelledby = props.label != null ? labelProps.id : props['aria-labelledby'];\n }\n\n let incrementId = useId();\n let decrementId = useId();\n\n let incrementButtonProps: AriaButtonProps = mergeProps(incButtonProps, {\n 'aria-label': incrementAriaLabel || stringFormatter.format('increase', {fieldLabel}).trim(),\n id: ariaLabelledby && !incrementAriaLabel ? incrementId : null,\n 'aria-labelledby': ariaLabelledby && !incrementAriaLabel ? `${incrementId} ${ariaLabelledby}` : null,\n 'aria-controls': inputId,\n excludeFromTabOrder: true,\n preventFocusOnPress: true,\n allowFocusWhenDisabled: true,\n isDisabled: !state.canIncrement,\n onPressStart: onButtonPressStart\n });\n\n let decrementButtonProps: AriaButtonProps = mergeProps(decButtonProps, {\n 'aria-label': decrementAriaLabel || stringFormatter.format('decrease', {fieldLabel}).trim(),\n id: ariaLabelledby && !decrementAriaLabel ? decrementId : null,\n 'aria-labelledby': ariaLabelledby && !decrementAriaLabel ? `${decrementId} ${ariaLabelledby}` : null,\n 'aria-controls': inputId,\n excludeFromTabOrder: true,\n preventFocusOnPress: true,\n allowFocusWhenDisabled: true,\n isDisabled: !state.canDecrement,\n onPressStart: onButtonPressStart\n });\n\n return {\n groupProps: {\n ...focusWithinProps,\n role: 'group',\n 'aria-disabled': isDisabled,\n 'aria-invalid': isInvalid ? 'true' : undefined\n },\n labelProps,\n inputProps,\n incrementButtonProps,\n decrementButtonProps,\n errorMessageProps,\n descriptionProps,\n isInvalid,\n validationErrors,\n validationDetails\n };\n}\n"],"names":[],"version":3,"file":"useNumberField.module.js.map"}
|
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.4",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -22,24 +22,24 @@
|
|
|
22
22
|
"url": "https://github.com/adobe/react-spectrum"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@react-aria/i18n": "^3.
|
|
26
|
-
"@react-aria/interactions": "^3.
|
|
27
|
-
"@react-aria/spinbutton": "^3.6.
|
|
28
|
-
"@react-aria/textfield": "^3.14.
|
|
29
|
-
"@react-aria/utils": "^3.
|
|
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.
|
|
25
|
+
"@react-aria/i18n": "^3.12.0",
|
|
26
|
+
"@react-aria/interactions": "^3.22.0",
|
|
27
|
+
"@react-aria/spinbutton": "^3.6.6",
|
|
28
|
+
"@react-aria/textfield": "^3.14.6",
|
|
29
|
+
"@react-aria/utils": "^3.25.0",
|
|
30
|
+
"@react-stately/form": "^3.0.4",
|
|
31
|
+
"@react-stately/numberfield": "^3.9.4",
|
|
32
|
+
"@react-types/button": "^3.9.5",
|
|
33
|
+
"@react-types/numberfield": "^3.8.4",
|
|
34
|
+
"@react-types/shared": "^3.24.0",
|
|
35
35
|
"@swc/helpers": "^0.5.0"
|
|
36
36
|
},
|
|
37
37
|
"peerDependencies": {
|
|
38
|
-
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
|
|
39
|
-
"react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
|
|
38
|
+
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0",
|
|
39
|
+
"react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
|
|
40
40
|
},
|
|
41
41
|
"publishConfig": {
|
|
42
42
|
"access": "public"
|
|
43
43
|
},
|
|
44
|
-
"gitHead": "
|
|
44
|
+
"gitHead": "86d80e3216bc32e75108831cf3a5a720bc849206"
|
|
45
45
|
}
|
package/src/useNumberField.ts
CHANGED
|
@@ -55,7 +55,7 @@ export interface NumberFieldAria extends ValidationResult {
|
|
|
55
55
|
* Provides the behavior and accessibility implementation for a number field component.
|
|
56
56
|
* Number fields allow users to enter a number, and increment or decrement the value using stepper buttons.
|
|
57
57
|
*/
|
|
58
|
-
export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldState, inputRef: RefObject<HTMLInputElement>): NumberFieldAria {
|
|
58
|
+
export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldState, inputRef: RefObject<HTMLInputElement | null>): NumberFieldAria {
|
|
59
59
|
let {
|
|
60
60
|
id,
|
|
61
61
|
decrementAriaLabel,
|
|
@@ -153,7 +153,7 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
|
|
|
153
153
|
// Browsers and operating systems are quite inconsistent about what keys are available, however.
|
|
154
154
|
// We choose between numeric and decimal based on whether we allow negative and fractional numbers,
|
|
155
155
|
// and based on testing on various devices to determine what keys are available in each inputMode.
|
|
156
|
-
let hasDecimals = intlOptions.maximumFractionDigits > 0;
|
|
156
|
+
let hasDecimals = (intlOptions.maximumFractionDigits ?? 0) > 0;
|
|
157
157
|
let hasNegative = (state.minValue === undefined || isNaN(state.minValue)) || state.minValue < 0;
|
|
158
158
|
let inputMode: TextInputDOMProps['inputMode'] = 'numeric';
|
|
159
159
|
if (isIPhone()) {
|