@react-stately/numberfield 3.6.2 → 3.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/import.mjs +27 -3
  2. package/dist/main.js +27 -2
  3. package/dist/main.js.map +1 -1
  4. package/dist/module.js +27 -3
  5. package/dist/module.js.map +1 -1
  6. package/dist/types.d.ts +2 -1
  7. package/dist/types.d.ts.map +1 -1
  8. package/package.json +6 -6
  9. package/src/useNumberFieldState.ts +32 -1
package/dist/import.mjs CHANGED
@@ -1,4 +1,5 @@
1
- import {useControlledState as $vhjCi$useControlledState, clamp as $vhjCi$clamp, snapValueToStep as $vhjCi$snapValueToStep} from "@react-stately/utils";
1
+ import {snapValueToStep as $vhjCi$snapValueToStep, clamp as $vhjCi$clamp, useControlledState as $vhjCi$useControlledState} from "@react-stately/utils";
2
+ import {useFormValidationState as $vhjCi$useFormValidationState} from "@react-stately/form";
2
3
  import {NumberFormatter as $vhjCi$NumberFormatter, NumberParser as $vhjCi$NumberParser} from "@internationalized/number";
3
4
  import {useState as $vhjCi$useState, useMemo as $vhjCi$useMemo, useCallback as $vhjCi$useCallback} from "react";
4
5
 
@@ -25,8 +26,18 @@ import {useState as $vhjCi$useState, useMemo as $vhjCi$useMemo, useCallback as $
25
26
  */
26
27
 
27
28
 
29
+
28
30
  function $de67e98908f0c6ee$export$7f629e9dc1ecf37c(props) {
29
31
  let { minValue: minValue, maxValue: maxValue, step: step, formatOptions: formatOptions, value: value, defaultValue: defaultValue, onChange: onChange, locale: locale, isDisabled: isDisabled, isReadOnly: isReadOnly } = props;
32
+ if (value === null) value = NaN;
33
+ if (!isNaN(value)) {
34
+ if (!isNaN(step)) value = (0, $vhjCi$snapValueToStep)(value, minValue, maxValue, step);
35
+ else value = (0, $vhjCi$clamp)(value, minValue, maxValue);
36
+ }
37
+ if (!isNaN(defaultValue)) {
38
+ if (!isNaN(step)) defaultValue = (0, $vhjCi$snapValueToStep)(defaultValue, minValue, maxValue, step);
39
+ else defaultValue = (0, $vhjCi$clamp)(defaultValue, minValue, maxValue);
40
+ }
30
41
  let [numberValue, setNumberValue] = (0, $vhjCi$useControlledState)(value, isNaN(defaultValue) ? NaN : defaultValue, onChange);
31
42
  let [inputValue, setInputValue] = (0, $vhjCi$useState)(()=>isNaN(numberValue) ? "" : new (0, $vhjCi$NumberFormatter)(locale, formatOptions).format(numberValue));
32
43
  let numberParser = (0, $vhjCi$useMemo)(()=>new (0, $vhjCi$NumberParser)(locale, formatOptions), [
@@ -51,6 +62,10 @@ function $de67e98908f0c6ee$export$7f629e9dc1ecf37c(props) {
51
62
  let format = (0, $vhjCi$useCallback)((value)=>isNaN(value) || value === null ? "" : formatter.format(value), [
52
63
  formatter
53
64
  ]);
65
+ let validation = (0, $vhjCi$useFormValidationState)({
66
+ ...props,
67
+ value: numberValue
68
+ });
54
69
  let clampStep = !isNaN(step) ? step : 1;
55
70
  if (intlOptions.style === "percent" && isNaN(step)) clampStep = 0.01;
56
71
  // Update the input value when the number value or format options change. This is done
@@ -113,17 +128,25 @@ function $de67e98908f0c6ee$export$7f629e9dc1ecf37c(props) {
113
128
  // you'd be at 5, then incrementing to 5 again, so no re-render would happen and 4 would be left in the input
114
129
  if (newValue === numberValue) setInputValue(format(newValue));
115
130
  setNumberValue(newValue);
131
+ validation.commitValidation();
116
132
  };
117
133
  let decrement = ()=>{
118
134
  let newValue = safeNextStep("-", maxValue);
119
135
  if (newValue === numberValue) setInputValue(format(newValue));
120
136
  setNumberValue(newValue);
137
+ validation.commitValidation();
121
138
  };
122
139
  let incrementToMax = ()=>{
123
- if (maxValue != null) setNumberValue((0, $vhjCi$snapValueToStep)(maxValue, minValue, maxValue, clampStep));
140
+ if (maxValue != null) {
141
+ setNumberValue((0, $vhjCi$snapValueToStep)(maxValue, minValue, maxValue, clampStep));
142
+ validation.commitValidation();
143
+ }
124
144
  };
125
145
  let decrementToMin = ()=>{
126
- if (minValue != null) setNumberValue(minValue);
146
+ if (minValue != null) {
147
+ setNumberValue(minValue);
148
+ validation.commitValidation();
149
+ }
127
150
  };
128
151
  let canIncrement = (0, $vhjCi$useMemo)(()=>!isDisabled && !isReadOnly && (isNaN(parsedValue) || isNaN(maxValue) || (0, $vhjCi$snapValueToStep)(parsedValue, minValue, maxValue, clampStep) > parsedValue || $de67e98908f0c6ee$var$handleDecimalOperation("+", parsedValue, clampStep) <= maxValue), [
129
152
  isDisabled,
@@ -143,6 +166,7 @@ function $de67e98908f0c6ee$export$7f629e9dc1ecf37c(props) {
143
166
  ]);
144
167
  let validate = (value)=>numberParser.isValidPartialNumber(value, minValue, maxValue);
145
168
  return {
169
+ ...validation,
146
170
  validate: validate,
147
171
  increment: increment,
148
172
  incrementToMax: incrementToMax,
package/dist/main.js CHANGED
@@ -1,7 +1,9 @@
1
1
  var $cmJn2$reactstatelyutils = require("@react-stately/utils");
2
+ var $cmJn2$reactstatelyform = require("@react-stately/form");
2
3
  var $cmJn2$internationalizednumber = require("@internationalized/number");
3
4
  var $cmJn2$react = require("react");
4
5
 
6
+
5
7
  function $parcel$export(e, n, v, s) {
6
8
  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
7
9
  }
@@ -30,8 +32,18 @@ $parcel$export(module.exports, "useNumberFieldState", () => $e18a693eeaf9c060$ex
30
32
  */
31
33
 
32
34
 
35
+
33
36
  function $e18a693eeaf9c060$export$7f629e9dc1ecf37c(props) {
34
37
  let { minValue: minValue, maxValue: maxValue, step: step, formatOptions: formatOptions, value: value, defaultValue: defaultValue, onChange: onChange, locale: locale, isDisabled: isDisabled, isReadOnly: isReadOnly } = props;
38
+ if (value === null) value = NaN;
39
+ if (!isNaN(value)) {
40
+ if (!isNaN(step)) value = (0, $cmJn2$reactstatelyutils.snapValueToStep)(value, minValue, maxValue, step);
41
+ else value = (0, $cmJn2$reactstatelyutils.clamp)(value, minValue, maxValue);
42
+ }
43
+ if (!isNaN(defaultValue)) {
44
+ if (!isNaN(step)) defaultValue = (0, $cmJn2$reactstatelyutils.snapValueToStep)(defaultValue, minValue, maxValue, step);
45
+ else defaultValue = (0, $cmJn2$reactstatelyutils.clamp)(defaultValue, minValue, maxValue);
46
+ }
35
47
  let [numberValue, setNumberValue] = (0, $cmJn2$reactstatelyutils.useControlledState)(value, isNaN(defaultValue) ? NaN : defaultValue, onChange);
36
48
  let [inputValue, setInputValue] = (0, $cmJn2$react.useState)(()=>isNaN(numberValue) ? "" : new (0, $cmJn2$internationalizednumber.NumberFormatter)(locale, formatOptions).format(numberValue));
37
49
  let numberParser = (0, $cmJn2$react.useMemo)(()=>new (0, $cmJn2$internationalizednumber.NumberParser)(locale, formatOptions), [
@@ -56,6 +68,10 @@ function $e18a693eeaf9c060$export$7f629e9dc1ecf37c(props) {
56
68
  let format = (0, $cmJn2$react.useCallback)((value)=>isNaN(value) || value === null ? "" : formatter.format(value), [
57
69
  formatter
58
70
  ]);
71
+ let validation = (0, $cmJn2$reactstatelyform.useFormValidationState)({
72
+ ...props,
73
+ value: numberValue
74
+ });
59
75
  let clampStep = !isNaN(step) ? step : 1;
60
76
  if (intlOptions.style === "percent" && isNaN(step)) clampStep = 0.01;
61
77
  // Update the input value when the number value or format options change. This is done
@@ -118,17 +134,25 @@ function $e18a693eeaf9c060$export$7f629e9dc1ecf37c(props) {
118
134
  // you'd be at 5, then incrementing to 5 again, so no re-render would happen and 4 would be left in the input
119
135
  if (newValue === numberValue) setInputValue(format(newValue));
120
136
  setNumberValue(newValue);
137
+ validation.commitValidation();
121
138
  };
122
139
  let decrement = ()=>{
123
140
  let newValue = safeNextStep("-", maxValue);
124
141
  if (newValue === numberValue) setInputValue(format(newValue));
125
142
  setNumberValue(newValue);
143
+ validation.commitValidation();
126
144
  };
127
145
  let incrementToMax = ()=>{
128
- if (maxValue != null) setNumberValue((0, $cmJn2$reactstatelyutils.snapValueToStep)(maxValue, minValue, maxValue, clampStep));
146
+ if (maxValue != null) {
147
+ setNumberValue((0, $cmJn2$reactstatelyutils.snapValueToStep)(maxValue, minValue, maxValue, clampStep));
148
+ validation.commitValidation();
149
+ }
129
150
  };
130
151
  let decrementToMin = ()=>{
131
- if (minValue != null) setNumberValue(minValue);
152
+ if (minValue != null) {
153
+ setNumberValue(minValue);
154
+ validation.commitValidation();
155
+ }
132
156
  };
133
157
  let canIncrement = (0, $cmJn2$react.useMemo)(()=>!isDisabled && !isReadOnly && (isNaN(parsedValue) || isNaN(maxValue) || (0, $cmJn2$reactstatelyutils.snapValueToStep)(parsedValue, minValue, maxValue, clampStep) > parsedValue || $e18a693eeaf9c060$var$handleDecimalOperation("+", parsedValue, clampStep) <= maxValue), [
134
158
  isDisabled,
@@ -148,6 +172,7 @@ function $e18a693eeaf9c060$export$7f629e9dc1ecf37c(props) {
148
172
  ]);
149
173
  let validate = (value)=>numberParser.isValidPartialNumber(value, minValue, maxValue);
150
174
  return {
175
+ ...validation,
151
176
  validate: validate,
152
177
  increment: increment,
153
178
  incrementToMax: incrementToMax,
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/@react-stately/numberfield/src/index.ts","packages/@react-stately/numberfield/src/useNumberFieldState.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\nexport {useNumberFieldState} from './useNumberFieldState';\n\nexport type {NumberFieldStateOptions} from './useNumberFieldState';\nexport type {NumberFieldState} from './useNumberFieldState';\n","/*\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 {clamp, snapValueToStep, useControlledState} from '@react-stately/utils';\nimport {NumberFieldProps} from '@react-types/numberfield';\nimport {NumberFormatter, NumberParser} from '@internationalized/number';\nimport {useCallback, useMemo, useState} from 'react';\n\nexport interface NumberFieldState {\n /**\n * The current text value of the input. Updated as the user types,\n * and formatted according to `formatOptions` on blur.\n */\n inputValue: string,\n /**\n * The currently parsed number value, or NaN if a valid number could not be parsed.\n * Updated based on the `inputValue` as the user types.\n */\n numberValue: number,\n /** The minimum value of the number field. */\n minValue: number,\n /** The maximum value of the number field. */\n maxValue: number,\n /** Whether the current value can be incremented according to the maximum value and step. */\n canIncrement: boolean,\n /** Whether the current value can be decremented according to the minimum value and step. */\n canDecrement: boolean,\n /**\n * Validates a user input string according to the current locale and format options.\n * Values can be partially entered, and may be valid even if they cannot currently be parsed to a number.\n * Can be used to implement validation as a user types.\n */\n validate(value: string): boolean,\n /** Sets the current text value of the input. */\n setInputValue(val: string): void,\n /** Sets the number value. */\n setNumberValue(val: number): void,\n /**\n * Commits the current input value. The value is parsed to a number, clamped according\n * to the minimum and maximum values of the field, and snapped to the nearest step value.\n * This will fire the `onChange` prop with the new value, and if uncontrolled, update the `numberValue`.\n * Typically this is called when the field is blurred.\n */\n commit(): void,\n /** Increments the current input value to the next step boundary, and fires `onChange`. */\n increment(): void,\n /** Decrements the current input value to the next step boundary, and fires `onChange`. */\n decrement(): void,\n /** Sets the current value to the `maxValue` if any, and fires `onChange`. */\n incrementToMax(): void,\n /** Sets the current value to the `minValue` if any, and fires `onChange`. */\n decrementToMin(): void\n}\n\nexport interface NumberFieldStateOptions extends NumberFieldProps {\n /**\n * The locale that should be used for parsing.\n * @default 'en-US'\n */\n locale: string\n}\n\n/**\n * Provides state management for a number field component. Number fields allow users to enter a number,\n * and increment or decrement the value using stepper buttons.\n */\nexport function useNumberFieldState(\n props: NumberFieldStateOptions\n): NumberFieldState {\n let {\n minValue,\n maxValue,\n step,\n formatOptions,\n value,\n defaultValue,\n onChange,\n locale,\n isDisabled,\n isReadOnly\n } = props;\n\n let [numberValue, setNumberValue] = useControlledState<number>(value, isNaN(defaultValue) ? NaN : defaultValue, onChange);\n let [inputValue, setInputValue] = useState(() => isNaN(numberValue) ? '' : new NumberFormatter(locale, formatOptions).format(numberValue));\n\n let numberParser = useMemo(() => new NumberParser(locale, formatOptions), [locale, formatOptions]);\n let numberingSystem = useMemo(() => numberParser.getNumberingSystem(inputValue), [numberParser, inputValue]);\n let formatter = useMemo(() => new NumberFormatter(locale, {...formatOptions, numberingSystem}), [locale, formatOptions, numberingSystem]);\n let intlOptions = useMemo(() => formatter.resolvedOptions(), [formatter]);\n let format = useCallback((value: number) => (isNaN(value) || value === null) ? '' : formatter.format(value), [formatter]);\n\n let clampStep = !isNaN(step) ? step : 1;\n if (intlOptions.style === 'percent' && isNaN(step)) {\n clampStep = 0.01;\n }\n\n // Update the input value when the number value or format options change. This is done\n // in a useEffect so that the controlled behavior is correct and we only update the\n // textfield after prop changes.\n let [prevValue, setPrevValue] = useState(numberValue);\n let [prevLocale, setPrevLocale] = useState(locale);\n let [prevFormatOptions, setPrevFormatOptions] = useState(formatOptions);\n if (!Object.is(numberValue, prevValue) || locale !== prevLocale || formatOptions !== prevFormatOptions) {\n setInputValue(format(numberValue));\n setPrevValue(numberValue);\n setPrevLocale(locale);\n setPrevFormatOptions(formatOptions);\n }\n\n let parsedValue = useMemo(() => numberParser.parse(inputValue), [numberParser, inputValue]);\n let commit = () => {\n // Set to empty state if input value is empty\n if (!inputValue.length) {\n setNumberValue(NaN);\n setInputValue(value === undefined ? '' : format(numberValue));\n return;\n }\n\n // if it failed to parse, then reset input to formatted version of current number\n if (isNaN(parsedValue)) {\n setInputValue(format(numberValue));\n return;\n }\n\n // Clamp to min and max, round to the nearest step, and round to specified number of digits\n let clampedValue: number;\n if (isNaN(step)) {\n clampedValue = clamp(parsedValue, minValue, maxValue);\n } else {\n clampedValue = snapValueToStep(parsedValue, minValue, maxValue, step);\n }\n\n clampedValue = numberParser.parse(format(clampedValue));\n setNumberValue(clampedValue);\n\n // in a controlled state, the numberValue won't change, so we won't go back to our old input without help\n setInputValue(format(value === undefined ? clampedValue : numberValue));\n };\n\n let safeNextStep = (operation: '+' | '-', minMax: number) => {\n let prev = parsedValue;\n\n if (isNaN(prev)) {\n // if the input is empty, start from the min/max value when incrementing/decrementing,\n // or zero if there is no min/max value defined.\n let newValue = isNaN(minMax) ? 0 : minMax;\n return snapValueToStep(newValue, minValue, maxValue, clampStep);\n } else {\n // otherwise, first snap the current value to the nearest step. if it moves in the direction\n // we're going, use that value, otherwise add the step and snap that value.\n let newValue = snapValueToStep(prev, minValue, maxValue, clampStep);\n if ((operation === '+' && newValue > prev) || (operation === '-' && newValue < prev)) {\n return newValue;\n }\n\n return snapValueToStep(\n handleDecimalOperation(operation, prev, clampStep),\n minValue,\n maxValue,\n clampStep\n );\n }\n };\n\n let increment = () => {\n let newValue = safeNextStep('+', minValue);\n\n // if we've arrived at the same value that was previously in the state, the\n // input value should be updated to match\n // ex type 4, press increment, highlight the number in the input, type 4 again, press increment\n // you'd be at 5, then incrementing to 5 again, so no re-render would happen and 4 would be left in the input\n if (newValue === numberValue) {\n setInputValue(format(newValue));\n }\n\n setNumberValue(newValue);\n };\n\n let decrement = () => {\n let newValue = safeNextStep('-', maxValue);\n\n if (newValue === numberValue) {\n setInputValue(format(newValue));\n }\n\n setNumberValue(newValue);\n };\n\n let incrementToMax = () => {\n if (maxValue != null) {\n setNumberValue(snapValueToStep(maxValue, minValue, maxValue, clampStep));\n }\n };\n\n let decrementToMin = () => {\n if (minValue != null) {\n setNumberValue(minValue);\n }\n };\n\n let canIncrement = useMemo(() => (\n !isDisabled &&\n !isReadOnly &&\n (\n isNaN(parsedValue) ||\n isNaN(maxValue) ||\n snapValueToStep(parsedValue, minValue, maxValue, clampStep) > parsedValue ||\n handleDecimalOperation('+', parsedValue, clampStep) <= maxValue\n )\n ), [isDisabled, isReadOnly, minValue, maxValue, clampStep, parsedValue]);\n\n let canDecrement = useMemo(() => (\n !isDisabled &&\n !isReadOnly &&\n (\n isNaN(parsedValue) ||\n isNaN(minValue) ||\n snapValueToStep(parsedValue, minValue, maxValue, clampStep) < parsedValue ||\n handleDecimalOperation('-', parsedValue, clampStep) >= minValue\n )\n ), [isDisabled, isReadOnly, minValue, maxValue, clampStep, parsedValue]);\n\n let validate = (value: string) => numberParser.isValidPartialNumber(value, minValue, maxValue);\n\n return {\n validate,\n increment,\n incrementToMax,\n decrement,\n decrementToMin,\n canIncrement,\n canDecrement,\n minValue,\n maxValue,\n numberValue: parsedValue,\n setNumberValue,\n setInputValue,\n inputValue,\n commit\n };\n}\n\nfunction handleDecimalOperation(operator: '-' | '+', value1: number, value2: number): number {\n let result = operator === '+' ? value1 + value2 : value1 - value2;\n\n // Check if we have decimals\n if (value1 % 1 !== 0 || value2 % 1 !== 0) {\n const value1Decimal = value1.toString().split('.');\n const value2Decimal = value2.toString().split('.');\n const value1DecimalLength = (value1Decimal[1] && value1Decimal[1].length) || 0;\n const value2DecimalLength = (value2Decimal[1] && value2Decimal[1].length) || 0;\n const multiplier = Math.pow(10, Math.max(value1DecimalLength, value2DecimalLength));\n\n // Transform the decimals to integers based on the precision\n value1 = Math.round(value1 * multiplier);\n value2 = Math.round(value2 * multiplier);\n\n // Perform the operation on integers values to make sure we don't get a fancy decimal value\n result = operator === '+' ? value1 + value2 : value1 - value2;\n\n // Transform the integer result back to decimal\n result /= multiplier;\n }\n\n return result;\n}\n"],"names":[],"version":3,"file":"main.js.map"}
1
+ {"mappings":"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","sources":["packages/@react-stately/numberfield/src/index.ts","packages/@react-stately/numberfield/src/useNumberFieldState.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\nexport {useNumberFieldState} from './useNumberFieldState';\n\nexport type {NumberFieldStateOptions} from './useNumberFieldState';\nexport type {NumberFieldState} from './useNumberFieldState';\n","/*\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 {clamp, snapValueToStep, useControlledState} from '@react-stately/utils';\nimport {FormValidationState, useFormValidationState} from '@react-stately/form';\nimport {NumberFieldProps} from '@react-types/numberfield';\nimport {NumberFormatter, NumberParser} from '@internationalized/number';\nimport {useCallback, useMemo, useState} from 'react';\n\nexport interface NumberFieldState extends FormValidationState {\n /**\n * The current text value of the input. Updated as the user types,\n * and formatted according to `formatOptions` on blur.\n */\n inputValue: string,\n /**\n * The currently parsed number value, or NaN if a valid number could not be parsed.\n * Updated based on the `inputValue` as the user types.\n */\n numberValue: number,\n /** The minimum value of the number field. */\n minValue: number,\n /** The maximum value of the number field. */\n maxValue: number,\n /** Whether the current value can be incremented according to the maximum value and step. */\n canIncrement: boolean,\n /** Whether the current value can be decremented according to the minimum value and step. */\n canDecrement: boolean,\n /**\n * Validates a user input string according to the current locale and format options.\n * Values can be partially entered, and may be valid even if they cannot currently be parsed to a number.\n * Can be used to implement validation as a user types.\n */\n validate(value: string): boolean,\n /** Sets the current text value of the input. */\n setInputValue(val: string): void,\n /** Sets the number value. */\n setNumberValue(val: number): void,\n /**\n * Commits the current input value. The value is parsed to a number, clamped according\n * to the minimum and maximum values of the field, and snapped to the nearest step value.\n * This will fire the `onChange` prop with the new value, and if uncontrolled, update the `numberValue`.\n * Typically this is called when the field is blurred.\n */\n commit(): void,\n /** Increments the current input value to the next step boundary, and fires `onChange`. */\n increment(): void,\n /** Decrements the current input value to the next step boundary, and fires `onChange`. */\n decrement(): void,\n /** Sets the current value to the `maxValue` if any, and fires `onChange`. */\n incrementToMax(): void,\n /** Sets the current value to the `minValue` if any, and fires `onChange`. */\n decrementToMin(): void\n}\n\nexport interface NumberFieldStateOptions extends NumberFieldProps {\n /**\n * The locale that should be used for parsing.\n * @default 'en-US'\n */\n locale: string\n}\n\n/**\n * Provides state management for a number field component. Number fields allow users to enter a number,\n * and increment or decrement the value using stepper buttons.\n */\nexport function useNumberFieldState(\n props: NumberFieldStateOptions\n): NumberFieldState {\n let {\n minValue,\n maxValue,\n step,\n formatOptions,\n value,\n defaultValue,\n onChange,\n locale,\n isDisabled,\n isReadOnly\n } = props;\n\n if (value === null) {\n value = NaN;\n }\n\n if (!isNaN(value)) {\n if (!isNaN(step)) {\n value = snapValueToStep(value, minValue, maxValue, step);\n } else {\n value = clamp(value, minValue, maxValue);\n }\n }\n\n if (!isNaN(defaultValue)) {\n if (!isNaN(step)) {\n defaultValue = snapValueToStep(defaultValue, minValue, maxValue, step);\n } else {\n defaultValue = clamp(defaultValue, minValue, maxValue);\n }\n }\n\n let [numberValue, setNumberValue] = useControlledState<number>(value, isNaN(defaultValue) ? NaN : defaultValue, onChange);\n let [inputValue, setInputValue] = useState(() => isNaN(numberValue) ? '' : new NumberFormatter(locale, formatOptions).format(numberValue));\n\n let numberParser = useMemo(() => new NumberParser(locale, formatOptions), [locale, formatOptions]);\n let numberingSystem = useMemo(() => numberParser.getNumberingSystem(inputValue), [numberParser, inputValue]);\n let formatter = useMemo(() => new NumberFormatter(locale, {...formatOptions, numberingSystem}), [locale, formatOptions, numberingSystem]);\n let intlOptions = useMemo(() => formatter.resolvedOptions(), [formatter]);\n let format = useCallback((value: number) => (isNaN(value) || value === null) ? '' : formatter.format(value), [formatter]);\n\n let validation = useFormValidationState({\n ...props,\n value: numberValue\n });\n\n let clampStep = !isNaN(step) ? step : 1;\n if (intlOptions.style === 'percent' && isNaN(step)) {\n clampStep = 0.01;\n }\n\n // Update the input value when the number value or format options change. This is done\n // in a useEffect so that the controlled behavior is correct and we only update the\n // textfield after prop changes.\n let [prevValue, setPrevValue] = useState(numberValue);\n let [prevLocale, setPrevLocale] = useState(locale);\n let [prevFormatOptions, setPrevFormatOptions] = useState(formatOptions);\n if (!Object.is(numberValue, prevValue) || locale !== prevLocale || formatOptions !== prevFormatOptions) {\n setInputValue(format(numberValue));\n setPrevValue(numberValue);\n setPrevLocale(locale);\n setPrevFormatOptions(formatOptions);\n }\n\n let parsedValue = useMemo(() => numberParser.parse(inputValue), [numberParser, inputValue]);\n let commit = () => {\n // Set to empty state if input value is empty\n if (!inputValue.length) {\n setNumberValue(NaN);\n setInputValue(value === undefined ? '' : format(numberValue));\n return;\n }\n\n // if it failed to parse, then reset input to formatted version of current number\n if (isNaN(parsedValue)) {\n setInputValue(format(numberValue));\n return;\n }\n\n // Clamp to min and max, round to the nearest step, and round to specified number of digits\n let clampedValue: number;\n if (isNaN(step)) {\n clampedValue = clamp(parsedValue, minValue, maxValue);\n } else {\n clampedValue = snapValueToStep(parsedValue, minValue, maxValue, step);\n }\n\n clampedValue = numberParser.parse(format(clampedValue));\n setNumberValue(clampedValue);\n\n // in a controlled state, the numberValue won't change, so we won't go back to our old input without help\n setInputValue(format(value === undefined ? clampedValue : numberValue));\n };\n\n let safeNextStep = (operation: '+' | '-', minMax: number) => {\n let prev = parsedValue;\n\n if (isNaN(prev)) {\n // if the input is empty, start from the min/max value when incrementing/decrementing,\n // or zero if there is no min/max value defined.\n let newValue = isNaN(minMax) ? 0 : minMax;\n return snapValueToStep(newValue, minValue, maxValue, clampStep);\n } else {\n // otherwise, first snap the current value to the nearest step. if it moves in the direction\n // we're going, use that value, otherwise add the step and snap that value.\n let newValue = snapValueToStep(prev, minValue, maxValue, clampStep);\n if ((operation === '+' && newValue > prev) || (operation === '-' && newValue < prev)) {\n return newValue;\n }\n\n return snapValueToStep(\n handleDecimalOperation(operation, prev, clampStep),\n minValue,\n maxValue,\n clampStep\n );\n }\n };\n\n let increment = () => {\n let newValue = safeNextStep('+', minValue);\n\n // if we've arrived at the same value that was previously in the state, the\n // input value should be updated to match\n // ex type 4, press increment, highlight the number in the input, type 4 again, press increment\n // you'd be at 5, then incrementing to 5 again, so no re-render would happen and 4 would be left in the input\n if (newValue === numberValue) {\n setInputValue(format(newValue));\n }\n\n setNumberValue(newValue);\n validation.commitValidation();\n };\n\n let decrement = () => {\n let newValue = safeNextStep('-', maxValue);\n\n if (newValue === numberValue) {\n setInputValue(format(newValue));\n }\n\n setNumberValue(newValue);\n validation.commitValidation();\n };\n\n let incrementToMax = () => {\n if (maxValue != null) {\n setNumberValue(snapValueToStep(maxValue, minValue, maxValue, clampStep));\n validation.commitValidation();\n }\n };\n\n let decrementToMin = () => {\n if (minValue != null) {\n setNumberValue(minValue);\n validation.commitValidation();\n }\n };\n\n let canIncrement = useMemo(() => (\n !isDisabled &&\n !isReadOnly &&\n (\n isNaN(parsedValue) ||\n isNaN(maxValue) ||\n snapValueToStep(parsedValue, minValue, maxValue, clampStep) > parsedValue ||\n handleDecimalOperation('+', parsedValue, clampStep) <= maxValue\n )\n ), [isDisabled, isReadOnly, minValue, maxValue, clampStep, parsedValue]);\n\n let canDecrement = useMemo(() => (\n !isDisabled &&\n !isReadOnly &&\n (\n isNaN(parsedValue) ||\n isNaN(minValue) ||\n snapValueToStep(parsedValue, minValue, maxValue, clampStep) < parsedValue ||\n handleDecimalOperation('-', parsedValue, clampStep) >= minValue\n )\n ), [isDisabled, isReadOnly, minValue, maxValue, clampStep, parsedValue]);\n\n let validate = (value: string) => numberParser.isValidPartialNumber(value, minValue, maxValue);\n\n return {\n ...validation,\n validate,\n increment,\n incrementToMax,\n decrement,\n decrementToMin,\n canIncrement,\n canDecrement,\n minValue,\n maxValue,\n numberValue: parsedValue,\n setNumberValue,\n setInputValue,\n inputValue,\n commit\n };\n}\n\nfunction handleDecimalOperation(operator: '-' | '+', value1: number, value2: number): number {\n let result = operator === '+' ? value1 + value2 : value1 - value2;\n\n // Check if we have decimals\n if (value1 % 1 !== 0 || value2 % 1 !== 0) {\n const value1Decimal = value1.toString().split('.');\n const value2Decimal = value2.toString().split('.');\n const value1DecimalLength = (value1Decimal[1] && value1Decimal[1].length) || 0;\n const value2DecimalLength = (value2Decimal[1] && value2Decimal[1].length) || 0;\n const multiplier = Math.pow(10, Math.max(value1DecimalLength, value2DecimalLength));\n\n // Transform the decimals to integers based on the precision\n value1 = Math.round(value1 * multiplier);\n value2 = Math.round(value2 * multiplier);\n\n // Perform the operation on integers values to make sure we don't get a fancy decimal value\n result = operator === '+' ? value1 + value2 : value1 - value2;\n\n // Transform the integer result back to decimal\n result /= multiplier;\n }\n\n return result;\n}\n"],"names":[],"version":3,"file":"main.js.map"}
package/dist/module.js CHANGED
@@ -1,4 +1,5 @@
1
- import {useControlledState as $vhjCi$useControlledState, clamp as $vhjCi$clamp, snapValueToStep as $vhjCi$snapValueToStep} from "@react-stately/utils";
1
+ import {snapValueToStep as $vhjCi$snapValueToStep, clamp as $vhjCi$clamp, useControlledState as $vhjCi$useControlledState} from "@react-stately/utils";
2
+ import {useFormValidationState as $vhjCi$useFormValidationState} from "@react-stately/form";
2
3
  import {NumberFormatter as $vhjCi$NumberFormatter, NumberParser as $vhjCi$NumberParser} from "@internationalized/number";
3
4
  import {useState as $vhjCi$useState, useMemo as $vhjCi$useMemo, useCallback as $vhjCi$useCallback} from "react";
4
5
 
@@ -25,8 +26,18 @@ import {useState as $vhjCi$useState, useMemo as $vhjCi$useMemo, useCallback as $
25
26
  */
26
27
 
27
28
 
29
+
28
30
  function $de67e98908f0c6ee$export$7f629e9dc1ecf37c(props) {
29
31
  let { minValue: minValue, maxValue: maxValue, step: step, formatOptions: formatOptions, value: value, defaultValue: defaultValue, onChange: onChange, locale: locale, isDisabled: isDisabled, isReadOnly: isReadOnly } = props;
32
+ if (value === null) value = NaN;
33
+ if (!isNaN(value)) {
34
+ if (!isNaN(step)) value = (0, $vhjCi$snapValueToStep)(value, minValue, maxValue, step);
35
+ else value = (0, $vhjCi$clamp)(value, minValue, maxValue);
36
+ }
37
+ if (!isNaN(defaultValue)) {
38
+ if (!isNaN(step)) defaultValue = (0, $vhjCi$snapValueToStep)(defaultValue, minValue, maxValue, step);
39
+ else defaultValue = (0, $vhjCi$clamp)(defaultValue, minValue, maxValue);
40
+ }
30
41
  let [numberValue, setNumberValue] = (0, $vhjCi$useControlledState)(value, isNaN(defaultValue) ? NaN : defaultValue, onChange);
31
42
  let [inputValue, setInputValue] = (0, $vhjCi$useState)(()=>isNaN(numberValue) ? "" : new (0, $vhjCi$NumberFormatter)(locale, formatOptions).format(numberValue));
32
43
  let numberParser = (0, $vhjCi$useMemo)(()=>new (0, $vhjCi$NumberParser)(locale, formatOptions), [
@@ -51,6 +62,10 @@ function $de67e98908f0c6ee$export$7f629e9dc1ecf37c(props) {
51
62
  let format = (0, $vhjCi$useCallback)((value)=>isNaN(value) || value === null ? "" : formatter.format(value), [
52
63
  formatter
53
64
  ]);
65
+ let validation = (0, $vhjCi$useFormValidationState)({
66
+ ...props,
67
+ value: numberValue
68
+ });
54
69
  let clampStep = !isNaN(step) ? step : 1;
55
70
  if (intlOptions.style === "percent" && isNaN(step)) clampStep = 0.01;
56
71
  // Update the input value when the number value or format options change. This is done
@@ -113,17 +128,25 @@ function $de67e98908f0c6ee$export$7f629e9dc1ecf37c(props) {
113
128
  // you'd be at 5, then incrementing to 5 again, so no re-render would happen and 4 would be left in the input
114
129
  if (newValue === numberValue) setInputValue(format(newValue));
115
130
  setNumberValue(newValue);
131
+ validation.commitValidation();
116
132
  };
117
133
  let decrement = ()=>{
118
134
  let newValue = safeNextStep("-", maxValue);
119
135
  if (newValue === numberValue) setInputValue(format(newValue));
120
136
  setNumberValue(newValue);
137
+ validation.commitValidation();
121
138
  };
122
139
  let incrementToMax = ()=>{
123
- if (maxValue != null) setNumberValue((0, $vhjCi$snapValueToStep)(maxValue, minValue, maxValue, clampStep));
140
+ if (maxValue != null) {
141
+ setNumberValue((0, $vhjCi$snapValueToStep)(maxValue, minValue, maxValue, clampStep));
142
+ validation.commitValidation();
143
+ }
124
144
  };
125
145
  let decrementToMin = ()=>{
126
- if (minValue != null) setNumberValue(minValue);
146
+ if (minValue != null) {
147
+ setNumberValue(minValue);
148
+ validation.commitValidation();
149
+ }
127
150
  };
128
151
  let canIncrement = (0, $vhjCi$useMemo)(()=>!isDisabled && !isReadOnly && (isNaN(parsedValue) || isNaN(maxValue) || (0, $vhjCi$snapValueToStep)(parsedValue, minValue, maxValue, clampStep) > parsedValue || $de67e98908f0c6ee$var$handleDecimalOperation("+", parsedValue, clampStep) <= maxValue), [
129
152
  isDisabled,
@@ -143,6 +166,7 @@ function $de67e98908f0c6ee$export$7f629e9dc1ecf37c(props) {
143
166
  ]);
144
167
  let validate = (value)=>numberParser.isValidPartialNumber(value, minValue, maxValue);
145
168
  return {
169
+ ...validation,
146
170
  validate: validate,
147
171
  increment: increment,
148
172
  incrementToMax: incrementToMax,
package/dist/module.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/@react-stately/numberfield/src/index.ts","packages/@react-stately/numberfield/src/useNumberFieldState.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\nexport {useNumberFieldState} from './useNumberFieldState';\n\nexport type {NumberFieldStateOptions} from './useNumberFieldState';\nexport type {NumberFieldState} from './useNumberFieldState';\n","/*\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 {clamp, snapValueToStep, useControlledState} from '@react-stately/utils';\nimport {NumberFieldProps} from '@react-types/numberfield';\nimport {NumberFormatter, NumberParser} from '@internationalized/number';\nimport {useCallback, useMemo, useState} from 'react';\n\nexport interface NumberFieldState {\n /**\n * The current text value of the input. Updated as the user types,\n * and formatted according to `formatOptions` on blur.\n */\n inputValue: string,\n /**\n * The currently parsed number value, or NaN if a valid number could not be parsed.\n * Updated based on the `inputValue` as the user types.\n */\n numberValue: number,\n /** The minimum value of the number field. */\n minValue: number,\n /** The maximum value of the number field. */\n maxValue: number,\n /** Whether the current value can be incremented according to the maximum value and step. */\n canIncrement: boolean,\n /** Whether the current value can be decremented according to the minimum value and step. */\n canDecrement: boolean,\n /**\n * Validates a user input string according to the current locale and format options.\n * Values can be partially entered, and may be valid even if they cannot currently be parsed to a number.\n * Can be used to implement validation as a user types.\n */\n validate(value: string): boolean,\n /** Sets the current text value of the input. */\n setInputValue(val: string): void,\n /** Sets the number value. */\n setNumberValue(val: number): void,\n /**\n * Commits the current input value. The value is parsed to a number, clamped according\n * to the minimum and maximum values of the field, and snapped to the nearest step value.\n * This will fire the `onChange` prop with the new value, and if uncontrolled, update the `numberValue`.\n * Typically this is called when the field is blurred.\n */\n commit(): void,\n /** Increments the current input value to the next step boundary, and fires `onChange`. */\n increment(): void,\n /** Decrements the current input value to the next step boundary, and fires `onChange`. */\n decrement(): void,\n /** Sets the current value to the `maxValue` if any, and fires `onChange`. */\n incrementToMax(): void,\n /** Sets the current value to the `minValue` if any, and fires `onChange`. */\n decrementToMin(): void\n}\n\nexport interface NumberFieldStateOptions extends NumberFieldProps {\n /**\n * The locale that should be used for parsing.\n * @default 'en-US'\n */\n locale: string\n}\n\n/**\n * Provides state management for a number field component. Number fields allow users to enter a number,\n * and increment or decrement the value using stepper buttons.\n */\nexport function useNumberFieldState(\n props: NumberFieldStateOptions\n): NumberFieldState {\n let {\n minValue,\n maxValue,\n step,\n formatOptions,\n value,\n defaultValue,\n onChange,\n locale,\n isDisabled,\n isReadOnly\n } = props;\n\n let [numberValue, setNumberValue] = useControlledState<number>(value, isNaN(defaultValue) ? NaN : defaultValue, onChange);\n let [inputValue, setInputValue] = useState(() => isNaN(numberValue) ? '' : new NumberFormatter(locale, formatOptions).format(numberValue));\n\n let numberParser = useMemo(() => new NumberParser(locale, formatOptions), [locale, formatOptions]);\n let numberingSystem = useMemo(() => numberParser.getNumberingSystem(inputValue), [numberParser, inputValue]);\n let formatter = useMemo(() => new NumberFormatter(locale, {...formatOptions, numberingSystem}), [locale, formatOptions, numberingSystem]);\n let intlOptions = useMemo(() => formatter.resolvedOptions(), [formatter]);\n let format = useCallback((value: number) => (isNaN(value) || value === null) ? '' : formatter.format(value), [formatter]);\n\n let clampStep = !isNaN(step) ? step : 1;\n if (intlOptions.style === 'percent' && isNaN(step)) {\n clampStep = 0.01;\n }\n\n // Update the input value when the number value or format options change. This is done\n // in a useEffect so that the controlled behavior is correct and we only update the\n // textfield after prop changes.\n let [prevValue, setPrevValue] = useState(numberValue);\n let [prevLocale, setPrevLocale] = useState(locale);\n let [prevFormatOptions, setPrevFormatOptions] = useState(formatOptions);\n if (!Object.is(numberValue, prevValue) || locale !== prevLocale || formatOptions !== prevFormatOptions) {\n setInputValue(format(numberValue));\n setPrevValue(numberValue);\n setPrevLocale(locale);\n setPrevFormatOptions(formatOptions);\n }\n\n let parsedValue = useMemo(() => numberParser.parse(inputValue), [numberParser, inputValue]);\n let commit = () => {\n // Set to empty state if input value is empty\n if (!inputValue.length) {\n setNumberValue(NaN);\n setInputValue(value === undefined ? '' : format(numberValue));\n return;\n }\n\n // if it failed to parse, then reset input to formatted version of current number\n if (isNaN(parsedValue)) {\n setInputValue(format(numberValue));\n return;\n }\n\n // Clamp to min and max, round to the nearest step, and round to specified number of digits\n let clampedValue: number;\n if (isNaN(step)) {\n clampedValue = clamp(parsedValue, minValue, maxValue);\n } else {\n clampedValue = snapValueToStep(parsedValue, minValue, maxValue, step);\n }\n\n clampedValue = numberParser.parse(format(clampedValue));\n setNumberValue(clampedValue);\n\n // in a controlled state, the numberValue won't change, so we won't go back to our old input without help\n setInputValue(format(value === undefined ? clampedValue : numberValue));\n };\n\n let safeNextStep = (operation: '+' | '-', minMax: number) => {\n let prev = parsedValue;\n\n if (isNaN(prev)) {\n // if the input is empty, start from the min/max value when incrementing/decrementing,\n // or zero if there is no min/max value defined.\n let newValue = isNaN(minMax) ? 0 : minMax;\n return snapValueToStep(newValue, minValue, maxValue, clampStep);\n } else {\n // otherwise, first snap the current value to the nearest step. if it moves in the direction\n // we're going, use that value, otherwise add the step and snap that value.\n let newValue = snapValueToStep(prev, minValue, maxValue, clampStep);\n if ((operation === '+' && newValue > prev) || (operation === '-' && newValue < prev)) {\n return newValue;\n }\n\n return snapValueToStep(\n handleDecimalOperation(operation, prev, clampStep),\n minValue,\n maxValue,\n clampStep\n );\n }\n };\n\n let increment = () => {\n let newValue = safeNextStep('+', minValue);\n\n // if we've arrived at the same value that was previously in the state, the\n // input value should be updated to match\n // ex type 4, press increment, highlight the number in the input, type 4 again, press increment\n // you'd be at 5, then incrementing to 5 again, so no re-render would happen and 4 would be left in the input\n if (newValue === numberValue) {\n setInputValue(format(newValue));\n }\n\n setNumberValue(newValue);\n };\n\n let decrement = () => {\n let newValue = safeNextStep('-', maxValue);\n\n if (newValue === numberValue) {\n setInputValue(format(newValue));\n }\n\n setNumberValue(newValue);\n };\n\n let incrementToMax = () => {\n if (maxValue != null) {\n setNumberValue(snapValueToStep(maxValue, minValue, maxValue, clampStep));\n }\n };\n\n let decrementToMin = () => {\n if (minValue != null) {\n setNumberValue(minValue);\n }\n };\n\n let canIncrement = useMemo(() => (\n !isDisabled &&\n !isReadOnly &&\n (\n isNaN(parsedValue) ||\n isNaN(maxValue) ||\n snapValueToStep(parsedValue, minValue, maxValue, clampStep) > parsedValue ||\n handleDecimalOperation('+', parsedValue, clampStep) <= maxValue\n )\n ), [isDisabled, isReadOnly, minValue, maxValue, clampStep, parsedValue]);\n\n let canDecrement = useMemo(() => (\n !isDisabled &&\n !isReadOnly &&\n (\n isNaN(parsedValue) ||\n isNaN(minValue) ||\n snapValueToStep(parsedValue, minValue, maxValue, clampStep) < parsedValue ||\n handleDecimalOperation('-', parsedValue, clampStep) >= minValue\n )\n ), [isDisabled, isReadOnly, minValue, maxValue, clampStep, parsedValue]);\n\n let validate = (value: string) => numberParser.isValidPartialNumber(value, minValue, maxValue);\n\n return {\n validate,\n increment,\n incrementToMax,\n decrement,\n decrementToMin,\n canIncrement,\n canDecrement,\n minValue,\n maxValue,\n numberValue: parsedValue,\n setNumberValue,\n setInputValue,\n inputValue,\n commit\n };\n}\n\nfunction handleDecimalOperation(operator: '-' | '+', value1: number, value2: number): number {\n let result = operator === '+' ? value1 + value2 : value1 - value2;\n\n // Check if we have decimals\n if (value1 % 1 !== 0 || value2 % 1 !== 0) {\n const value1Decimal = value1.toString().split('.');\n const value2Decimal = value2.toString().split('.');\n const value1DecimalLength = (value1Decimal[1] && value1Decimal[1].length) || 0;\n const value2DecimalLength = (value2Decimal[1] && value2Decimal[1].length) || 0;\n const multiplier = Math.pow(10, Math.max(value1DecimalLength, value2DecimalLength));\n\n // Transform the decimals to integers based on the precision\n value1 = Math.round(value1 * multiplier);\n value2 = Math.round(value2 * multiplier);\n\n // Perform the operation on integers values to make sure we don't get a fancy decimal value\n result = operator === '+' ? value1 + value2 : value1 - value2;\n\n // Transform the integer result back to decimal\n result /= multiplier;\n }\n\n return result;\n}\n"],"names":[],"version":3,"file":"module.js.map"}
1
+ {"mappings":"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","sources":["packages/@react-stately/numberfield/src/index.ts","packages/@react-stately/numberfield/src/useNumberFieldState.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\nexport {useNumberFieldState} from './useNumberFieldState';\n\nexport type {NumberFieldStateOptions} from './useNumberFieldState';\nexport type {NumberFieldState} from './useNumberFieldState';\n","/*\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 {clamp, snapValueToStep, useControlledState} from '@react-stately/utils';\nimport {FormValidationState, useFormValidationState} from '@react-stately/form';\nimport {NumberFieldProps} from '@react-types/numberfield';\nimport {NumberFormatter, NumberParser} from '@internationalized/number';\nimport {useCallback, useMemo, useState} from 'react';\n\nexport interface NumberFieldState extends FormValidationState {\n /**\n * The current text value of the input. Updated as the user types,\n * and formatted according to `formatOptions` on blur.\n */\n inputValue: string,\n /**\n * The currently parsed number value, or NaN if a valid number could not be parsed.\n * Updated based on the `inputValue` as the user types.\n */\n numberValue: number,\n /** The minimum value of the number field. */\n minValue: number,\n /** The maximum value of the number field. */\n maxValue: number,\n /** Whether the current value can be incremented according to the maximum value and step. */\n canIncrement: boolean,\n /** Whether the current value can be decremented according to the minimum value and step. */\n canDecrement: boolean,\n /**\n * Validates a user input string according to the current locale and format options.\n * Values can be partially entered, and may be valid even if they cannot currently be parsed to a number.\n * Can be used to implement validation as a user types.\n */\n validate(value: string): boolean,\n /** Sets the current text value of the input. */\n setInputValue(val: string): void,\n /** Sets the number value. */\n setNumberValue(val: number): void,\n /**\n * Commits the current input value. The value is parsed to a number, clamped according\n * to the minimum and maximum values of the field, and snapped to the nearest step value.\n * This will fire the `onChange` prop with the new value, and if uncontrolled, update the `numberValue`.\n * Typically this is called when the field is blurred.\n */\n commit(): void,\n /** Increments the current input value to the next step boundary, and fires `onChange`. */\n increment(): void,\n /** Decrements the current input value to the next step boundary, and fires `onChange`. */\n decrement(): void,\n /** Sets the current value to the `maxValue` if any, and fires `onChange`. */\n incrementToMax(): void,\n /** Sets the current value to the `minValue` if any, and fires `onChange`. */\n decrementToMin(): void\n}\n\nexport interface NumberFieldStateOptions extends NumberFieldProps {\n /**\n * The locale that should be used for parsing.\n * @default 'en-US'\n */\n locale: string\n}\n\n/**\n * Provides state management for a number field component. Number fields allow users to enter a number,\n * and increment or decrement the value using stepper buttons.\n */\nexport function useNumberFieldState(\n props: NumberFieldStateOptions\n): NumberFieldState {\n let {\n minValue,\n maxValue,\n step,\n formatOptions,\n value,\n defaultValue,\n onChange,\n locale,\n isDisabled,\n isReadOnly\n } = props;\n\n if (value === null) {\n value = NaN;\n }\n\n if (!isNaN(value)) {\n if (!isNaN(step)) {\n value = snapValueToStep(value, minValue, maxValue, step);\n } else {\n value = clamp(value, minValue, maxValue);\n }\n }\n\n if (!isNaN(defaultValue)) {\n if (!isNaN(step)) {\n defaultValue = snapValueToStep(defaultValue, minValue, maxValue, step);\n } else {\n defaultValue = clamp(defaultValue, minValue, maxValue);\n }\n }\n\n let [numberValue, setNumberValue] = useControlledState<number>(value, isNaN(defaultValue) ? NaN : defaultValue, onChange);\n let [inputValue, setInputValue] = useState(() => isNaN(numberValue) ? '' : new NumberFormatter(locale, formatOptions).format(numberValue));\n\n let numberParser = useMemo(() => new NumberParser(locale, formatOptions), [locale, formatOptions]);\n let numberingSystem = useMemo(() => numberParser.getNumberingSystem(inputValue), [numberParser, inputValue]);\n let formatter = useMemo(() => new NumberFormatter(locale, {...formatOptions, numberingSystem}), [locale, formatOptions, numberingSystem]);\n let intlOptions = useMemo(() => formatter.resolvedOptions(), [formatter]);\n let format = useCallback((value: number) => (isNaN(value) || value === null) ? '' : formatter.format(value), [formatter]);\n\n let validation = useFormValidationState({\n ...props,\n value: numberValue\n });\n\n let clampStep = !isNaN(step) ? step : 1;\n if (intlOptions.style === 'percent' && isNaN(step)) {\n clampStep = 0.01;\n }\n\n // Update the input value when the number value or format options change. This is done\n // in a useEffect so that the controlled behavior is correct and we only update the\n // textfield after prop changes.\n let [prevValue, setPrevValue] = useState(numberValue);\n let [prevLocale, setPrevLocale] = useState(locale);\n let [prevFormatOptions, setPrevFormatOptions] = useState(formatOptions);\n if (!Object.is(numberValue, prevValue) || locale !== prevLocale || formatOptions !== prevFormatOptions) {\n setInputValue(format(numberValue));\n setPrevValue(numberValue);\n setPrevLocale(locale);\n setPrevFormatOptions(formatOptions);\n }\n\n let parsedValue = useMemo(() => numberParser.parse(inputValue), [numberParser, inputValue]);\n let commit = () => {\n // Set to empty state if input value is empty\n if (!inputValue.length) {\n setNumberValue(NaN);\n setInputValue(value === undefined ? '' : format(numberValue));\n return;\n }\n\n // if it failed to parse, then reset input to formatted version of current number\n if (isNaN(parsedValue)) {\n setInputValue(format(numberValue));\n return;\n }\n\n // Clamp to min and max, round to the nearest step, and round to specified number of digits\n let clampedValue: number;\n if (isNaN(step)) {\n clampedValue = clamp(parsedValue, minValue, maxValue);\n } else {\n clampedValue = snapValueToStep(parsedValue, minValue, maxValue, step);\n }\n\n clampedValue = numberParser.parse(format(clampedValue));\n setNumberValue(clampedValue);\n\n // in a controlled state, the numberValue won't change, so we won't go back to our old input without help\n setInputValue(format(value === undefined ? clampedValue : numberValue));\n };\n\n let safeNextStep = (operation: '+' | '-', minMax: number) => {\n let prev = parsedValue;\n\n if (isNaN(prev)) {\n // if the input is empty, start from the min/max value when incrementing/decrementing,\n // or zero if there is no min/max value defined.\n let newValue = isNaN(minMax) ? 0 : minMax;\n return snapValueToStep(newValue, minValue, maxValue, clampStep);\n } else {\n // otherwise, first snap the current value to the nearest step. if it moves in the direction\n // we're going, use that value, otherwise add the step and snap that value.\n let newValue = snapValueToStep(prev, minValue, maxValue, clampStep);\n if ((operation === '+' && newValue > prev) || (operation === '-' && newValue < prev)) {\n return newValue;\n }\n\n return snapValueToStep(\n handleDecimalOperation(operation, prev, clampStep),\n minValue,\n maxValue,\n clampStep\n );\n }\n };\n\n let increment = () => {\n let newValue = safeNextStep('+', minValue);\n\n // if we've arrived at the same value that was previously in the state, the\n // input value should be updated to match\n // ex type 4, press increment, highlight the number in the input, type 4 again, press increment\n // you'd be at 5, then incrementing to 5 again, so no re-render would happen and 4 would be left in the input\n if (newValue === numberValue) {\n setInputValue(format(newValue));\n }\n\n setNumberValue(newValue);\n validation.commitValidation();\n };\n\n let decrement = () => {\n let newValue = safeNextStep('-', maxValue);\n\n if (newValue === numberValue) {\n setInputValue(format(newValue));\n }\n\n setNumberValue(newValue);\n validation.commitValidation();\n };\n\n let incrementToMax = () => {\n if (maxValue != null) {\n setNumberValue(snapValueToStep(maxValue, minValue, maxValue, clampStep));\n validation.commitValidation();\n }\n };\n\n let decrementToMin = () => {\n if (minValue != null) {\n setNumberValue(minValue);\n validation.commitValidation();\n }\n };\n\n let canIncrement = useMemo(() => (\n !isDisabled &&\n !isReadOnly &&\n (\n isNaN(parsedValue) ||\n isNaN(maxValue) ||\n snapValueToStep(parsedValue, minValue, maxValue, clampStep) > parsedValue ||\n handleDecimalOperation('+', parsedValue, clampStep) <= maxValue\n )\n ), [isDisabled, isReadOnly, minValue, maxValue, clampStep, parsedValue]);\n\n let canDecrement = useMemo(() => (\n !isDisabled &&\n !isReadOnly &&\n (\n isNaN(parsedValue) ||\n isNaN(minValue) ||\n snapValueToStep(parsedValue, minValue, maxValue, clampStep) < parsedValue ||\n handleDecimalOperation('-', parsedValue, clampStep) >= minValue\n )\n ), [isDisabled, isReadOnly, minValue, maxValue, clampStep, parsedValue]);\n\n let validate = (value: string) => numberParser.isValidPartialNumber(value, minValue, maxValue);\n\n return {\n ...validation,\n validate,\n increment,\n incrementToMax,\n decrement,\n decrementToMin,\n canIncrement,\n canDecrement,\n minValue,\n maxValue,\n numberValue: parsedValue,\n setNumberValue,\n setInputValue,\n inputValue,\n commit\n };\n}\n\nfunction handleDecimalOperation(operator: '-' | '+', value1: number, value2: number): number {\n let result = operator === '+' ? value1 + value2 : value1 - value2;\n\n // Check if we have decimals\n if (value1 % 1 !== 0 || value2 % 1 !== 0) {\n const value1Decimal = value1.toString().split('.');\n const value2Decimal = value2.toString().split('.');\n const value1DecimalLength = (value1Decimal[1] && value1Decimal[1].length) || 0;\n const value2DecimalLength = (value2Decimal[1] && value2Decimal[1].length) || 0;\n const multiplier = Math.pow(10, Math.max(value1DecimalLength, value2DecimalLength));\n\n // Transform the decimals to integers based on the precision\n value1 = Math.round(value1 * multiplier);\n value2 = Math.round(value2 * multiplier);\n\n // Perform the operation on integers values to make sure we don't get a fancy decimal value\n result = operator === '+' ? value1 + value2 : value1 - value2;\n\n // Transform the integer result back to decimal\n result /= multiplier;\n }\n\n return result;\n}\n"],"names":[],"version":3,"file":"module.js.map"}
package/dist/types.d.ts CHANGED
@@ -1,5 +1,6 @@
1
+ import { FormValidationState } from "@react-stately/form";
1
2
  import { NumberFieldProps } from "@react-types/numberfield";
2
- export interface NumberFieldState {
3
+ export interface NumberFieldState extends FormValidationState {
3
4
  /**
4
5
  * The current text value of the input. Updated as the user types,
5
6
  * and formatted according to `formatOptions` on blur.
package/dist/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"mappings":";AAiBA;IACE;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB,6CAA6C;IAC7C,QAAQ,EAAE,MAAM,CAAC;IACjB,6CAA6C;IAC7C,QAAQ,EAAE,MAAM,CAAC;IACjB,4FAA4F;IAC5F,YAAY,EAAE,OAAO,CAAC;IACtB,4FAA4F;IAC5F,YAAY,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC;IACjC,gDAAgD;IAChD,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,6BAA6B;IAC7B,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC;;;;;OAKG;IACH,MAAM,IAAI,IAAI,CAAC;IACf,0FAA0F;IAC1F,SAAS,IAAI,IAAI,CAAC;IAClB,0FAA0F;IAC1F,SAAS,IAAI,IAAI,CAAC;IAClB,6EAA6E;IAC7E,cAAc,IAAI,IAAI,CAAC;IACvB,6EAA6E;IAC7E,cAAc,IAAI,IAAI,CAAA;CACvB;AAED,wCAAyC,SAAQ,gBAAgB;IAC/D;;;OAGG;IACH,MAAM,EAAE,MAAM,CAAA;CACf;AAED;;;GAGG;AACH,oCACE,KAAK,EAAE,uBAAuB,GAC7B,gBAAgB,CA4KlB","sources":["packages/@react-stately/numberfield/src/packages/@react-stately/numberfield/src/useNumberFieldState.ts","packages/@react-stately/numberfield/src/packages/@react-stately/numberfield/src/index.ts","packages/@react-stately/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 */\n\nexport {useNumberFieldState} from './useNumberFieldState';\n\nexport type {NumberFieldStateOptions} from './useNumberFieldState';\nexport type {NumberFieldState} from './useNumberFieldState';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
1
+ {"mappings":";;AAkBA,iCAAkC,SAAQ,mBAAmB;IAC3D;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB,6CAA6C;IAC7C,QAAQ,EAAE,MAAM,CAAC;IACjB,6CAA6C;IAC7C,QAAQ,EAAE,MAAM,CAAC;IACjB,4FAA4F;IAC5F,YAAY,EAAE,OAAO,CAAC;IACtB,4FAA4F;IAC5F,YAAY,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC;IACjC,gDAAgD;IAChD,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,6BAA6B;IAC7B,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC;;;;;OAKG;IACH,MAAM,IAAI,IAAI,CAAC;IACf,0FAA0F;IAC1F,SAAS,IAAI,IAAI,CAAC;IAClB,0FAA0F;IAC1F,SAAS,IAAI,IAAI,CAAC;IAClB,6EAA6E;IAC7E,cAAc,IAAI,IAAI,CAAC;IACvB,6EAA6E;IAC7E,cAAc,IAAI,IAAI,CAAA;CACvB;AAED,wCAAyC,SAAQ,gBAAgB;IAC/D;;;OAGG;IACH,MAAM,EAAE,MAAM,CAAA;CACf;AAED;;;GAGG;AACH,oCACE,KAAK,EAAE,uBAAuB,GAC7B,gBAAgB,CA0MlB","sources":["packages/@react-stately/numberfield/src/packages/@react-stately/numberfield/src/useNumberFieldState.ts","packages/@react-stately/numberfield/src/packages/@react-stately/numberfield/src/index.ts","packages/@react-stately/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 */\n\nexport {useNumberFieldState} from './useNumberFieldState';\n\nexport type {NumberFieldStateOptions} from './useNumberFieldState';\nexport type {NumberFieldState} from './useNumberFieldState';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-stately/numberfield",
3
- "version": "3.6.2",
3
+ "version": "3.8.0",
4
4
  "description": "Spectrum UI components in React",
5
5
  "license": "Apache-2.0",
6
6
  "main": "dist/main.js",
@@ -22,10 +22,10 @@
22
22
  "url": "https://github.com/adobe/react-spectrum"
23
23
  },
24
24
  "dependencies": {
25
- "@internationalized/number": "^3.3.0",
26
- "@react-stately/utils": "^3.8.0",
27
- "@react-types/numberfield": "^3.6.1",
28
- "@react-types/shared": "^3.21.0",
25
+ "@internationalized/number": "^3.5.0",
26
+ "@react-stately/form": "^3.0.0",
27
+ "@react-stately/utils": "^3.9.0",
28
+ "@react-types/numberfield": "^3.7.0",
29
29
  "@swc/helpers": "^0.5.0"
30
30
  },
31
31
  "peerDependencies": {
@@ -34,5 +34,5 @@
34
34
  "publishConfig": {
35
35
  "access": "public"
36
36
  },
37
- "gitHead": "4122e44d1991c90507d630d35ed297f89db435d3"
37
+ "gitHead": "86b38c87868ce7f262e0df905e5ac4eb2653791d"
38
38
  }
package/src/useNumberFieldState.ts CHANGED
@@ -11,11 +11,12 @@
11
11
  */
12
12
 
13
13
  import {clamp, snapValueToStep, useControlledState} from '@react-stately/utils';
14
+ import {FormValidationState, useFormValidationState} from '@react-stately/form';
14
15
  import {NumberFieldProps} from '@react-types/numberfield';
15
16
  import {NumberFormatter, NumberParser} from '@internationalized/number';
16
17
  import {useCallback, useMemo, useState} from 'react';
17
18
 
18
- export interface NumberFieldState {
19
+ export interface NumberFieldState extends FormValidationState {
19
20
  /**
20
21
  * The current text value of the input. Updated as the user types,
21
22
  * and formatted according to `formatOptions` on blur.
@@ -89,6 +90,26 @@ export function useNumberFieldState(
89
90
  isReadOnly
90
91
  } = props;
91
92
 
93
+ if (value === null) {
94
+ value = NaN;
95
+ }
96
+
97
+ if (!isNaN(value)) {
98
+ if (!isNaN(step)) {
99
+ value = snapValueToStep(value, minValue, maxValue, step);
100
+ } else {
101
+ value = clamp(value, minValue, maxValue);
102
+ }
103
+ }
104
+
105
+ if (!isNaN(defaultValue)) {
106
+ if (!isNaN(step)) {
107
+ defaultValue = snapValueToStep(defaultValue, minValue, maxValue, step);
108
+ } else {
109
+ defaultValue = clamp(defaultValue, minValue, maxValue);
110
+ }
111
+ }
112
+
92
113
  let [numberValue, setNumberValue] = useControlledState<number>(value, isNaN(defaultValue) ? NaN : defaultValue, onChange);
93
114
  let [inputValue, setInputValue] = useState(() => isNaN(numberValue) ? '' : new NumberFormatter(locale, formatOptions).format(numberValue));
94
115
 
@@ -98,6 +119,11 @@ export function useNumberFieldState(
98
119
  let intlOptions = useMemo(() => formatter.resolvedOptions(), [formatter]);
99
120
  let format = useCallback((value: number) => (isNaN(value) || value === null) ? '' : formatter.format(value), [formatter]);
100
121
 
122
+ let validation = useFormValidationState({
123
+ ...props,
124
+ value: numberValue
125
+ });
126
+
101
127
  let clampStep = !isNaN(step) ? step : 1;
102
128
  if (intlOptions.style === 'percent' && isNaN(step)) {
103
129
  clampStep = 0.01;
@@ -183,6 +209,7 @@ export function useNumberFieldState(
183
209
  }
184
210
 
185
211
  setNumberValue(newValue);
212
+ validation.commitValidation();
186
213
  };
187
214
 
188
215
  let decrement = () => {
@@ -193,17 +220,20 @@ export function useNumberFieldState(
193
220
  }
194
221
 
195
222
  setNumberValue(newValue);
223
+ validation.commitValidation();
196
224
  };
197
225
 
198
226
  let incrementToMax = () => {
199
227
  if (maxValue != null) {
200
228
  setNumberValue(snapValueToStep(maxValue, minValue, maxValue, clampStep));
229
+ validation.commitValidation();
201
230
  }
202
231
  };
203
232
 
204
233
  let decrementToMin = () => {
205
234
  if (minValue != null) {
206
235
  setNumberValue(minValue);
236
+ validation.commitValidation();
207
237
  }
208
238
  };
209
239
 
@@ -232,6 +262,7 @@ export function useNumberFieldState(
232
262
  let validate = (value: string) => numberParser.isValidPartialNumber(value, minValue, maxValue);
233
263
 
234
264
  return {
265
+ ...validation,
235
266
  validate,
236
267
  increment,
237
268
  incrementToMax,