@react-spectrum/numberfield 3.7.3 → 3.8.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/import.mjs +15 -3
- package/dist/main.css +1104 -1
- package/dist/main.css.map +1 -0
- package/dist/main.js +15 -3
- package/dist/main.js.map +1 -1
- package/dist/module.js +15 -3
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts.map +1 -1
- package/package.json +18 -18
- package/src/NumberField.tsx +13 -3
package/dist/import.mjs
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
1
3
|
import "./main.css";
|
|
2
4
|
import {useStyleProps as $k6K00$useStyleProps, useFocusableRef as $k6K00$useFocusableRef, classNames as $k6K00$classNames} from "@react-spectrum/utils";
|
|
3
5
|
import {Field as $k6K00$Field} from "@react-spectrum/label";
|
|
@@ -6,6 +8,7 @@ import {mergeProps as $k6K00$mergeProps} from "@react-aria/utils";
|
|
|
6
8
|
import {useNumberFieldState as $k6K00$useNumberFieldState} from "@react-stately/numberfield";
|
|
7
9
|
import $k6K00$react, {useRef as $k6K00$useRef} from "react";
|
|
8
10
|
import {TextFieldBase as $k6K00$TextFieldBase} from "@react-spectrum/textfield";
|
|
11
|
+
import {useFormProps as $k6K00$useFormProps} from "@react-spectrum/form";
|
|
9
12
|
import {useHover as $k6K00$useHover} from "@react-aria/interactions";
|
|
10
13
|
import {useLocale as $k6K00$useLocale} from "@react-aria/i18n";
|
|
11
14
|
import {useNumberField as $k6K00$useNumberField} from "@react-aria/numberfield";
|
|
@@ -16,9 +19,11 @@ import $k6K00$spectrumiconsuiChevronUpSmall from "@spectrum-icons/ui/ChevronUpSm
|
|
|
16
19
|
import $k6K00$spectrumiconsworkflowRemove from "@spectrum-icons/workflow/Remove";
|
|
17
20
|
import {useButton as $k6K00$useButton} from "@react-aria/button";
|
|
18
21
|
|
|
22
|
+
|
|
19
23
|
function $parcel$interopDefault(a) {
|
|
20
24
|
return a && a.__esModule ? a.default : a;
|
|
21
25
|
}
|
|
26
|
+
|
|
22
27
|
function $parcel$export(e, n, v, s) {
|
|
23
28
|
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
24
29
|
}
|
|
@@ -254,8 +259,10 @@ function $7f00b388e0d3b2f6$var$StepButton(props, ref) {
|
|
|
254
259
|
|
|
255
260
|
|
|
256
261
|
|
|
262
|
+
|
|
257
263
|
function $48b879bdd771eb85$var$NumberField(props, ref) {
|
|
258
264
|
props = (0, $k6K00$useProviderProps)(props);
|
|
265
|
+
props = (0, $k6K00$useFormProps)(props);
|
|
259
266
|
let provider = (0, $k6K00$useProvider)();
|
|
260
267
|
let { isQuiet: isQuiet, isReadOnly: isReadOnly, isDisabled: isDisabled, hideStepper: hideStepper } = props;
|
|
261
268
|
let { styleProps: style } = (0, $k6K00$useStyleProps)(props);
|
|
@@ -266,17 +273,18 @@ function $48b879bdd771eb85$var$NumberField(props, ref) {
|
|
|
266
273
|
});
|
|
267
274
|
let inputRef = (0, $k6K00$useRef)();
|
|
268
275
|
let domRef = (0, $k6K00$useFocusableRef)(ref, inputRef);
|
|
269
|
-
let { groupProps: groupProps, labelProps: labelProps, inputProps: inputProps, incrementButtonProps: incrementButtonProps, decrementButtonProps: decrementButtonProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $k6K00$useNumberField)(props, state, inputRef);
|
|
276
|
+
let { groupProps: groupProps, labelProps: labelProps, inputProps: inputProps, incrementButtonProps: incrementButtonProps, decrementButtonProps: decrementButtonProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = (0, $k6K00$useNumberField)(props, state, inputRef);
|
|
270
277
|
let isMobile = provider.scale === "large";
|
|
271
278
|
let showStepper = !hideStepper;
|
|
272
279
|
let { isHovered: isHovered, hoverProps: hoverProps } = (0, $k6K00$useHover)({
|
|
273
280
|
isDisabled: isDisabled
|
|
274
281
|
});
|
|
282
|
+
let validationState = props.validationState || (isInvalid ? "invalid" : null);
|
|
275
283
|
let className = (0, $k6K00$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($ba58a329f3e1a776$exports))), "spectrum-Stepper", {
|
|
276
284
|
"spectrum-Stepper--isQuiet": isQuiet,
|
|
277
285
|
"is-disabled": isDisabled,
|
|
278
286
|
"spectrum-Stepper--readonly": isReadOnly,
|
|
279
|
-
"is-invalid":
|
|
287
|
+
"is-invalid": validationState === "invalid" && !isDisabled,
|
|
280
288
|
"spectrum-Stepper--showStepper": showStepper,
|
|
281
289
|
"spectrum-Stepper--isMobile": isMobile,
|
|
282
290
|
"is-hovered": isHovered,
|
|
@@ -287,6 +295,9 @@ function $48b879bdd771eb85$var$NumberField(props, ref) {
|
|
|
287
295
|
...props,
|
|
288
296
|
descriptionProps: descriptionProps,
|
|
289
297
|
errorMessageProps: errorMessageProps,
|
|
298
|
+
isInvalid: isInvalid,
|
|
299
|
+
validationErrors: validationErrors,
|
|
300
|
+
validationDetails: validationDetails,
|
|
290
301
|
labelProps: labelProps,
|
|
291
302
|
ref: domRef,
|
|
292
303
|
wrapperClassName: (0, $k6K00$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($ba58a329f3e1a776$exports))), "spectrum-Stepper-container", {
|
|
@@ -301,7 +312,8 @@ function $48b879bdd771eb85$var$NumberField(props, ref) {
|
|
|
301
312
|
decrementProps: decrementButtonProps,
|
|
302
313
|
className: className,
|
|
303
314
|
style: style,
|
|
304
|
-
state: state
|
|
315
|
+
state: state,
|
|
316
|
+
validationState: validationState
|
|
305
317
|
}));
|
|
306
318
|
}
|
|
307
319
|
const $48b879bdd771eb85$var$NumberFieldInput = /*#__PURE__*/ (0, $k6K00$react).forwardRef(function NumberFieldInput(props, ref) {
|