@react-spectrum/numberfield 3.8.2 → 3.9.0

package/dist/import.mjs

@@ -1,5 +1,3 @@
-"use client";
-
 import "./main.css";
 import {useStyleProps as $k6K00$useStyleProps, useFocusableRef as $k6K00$useFocusableRef, classNames as $k6K00$classNames} from "@react-spectrum/utils";
 import {Field as $k6K00$Field} from "@react-spectrum/label";
@@ -215,13 +213,14 @@ function $7f00b388e0d3b2f6$var$StepButton(props, ref) {
     props = (0, $k6K00$useProviderProps)(props);
     let { scale: scale } = (0, $k6K00$useProvider)();
     let { direction: direction, isDisabled: isDisabled, isQuiet: isQuiet } = props;
+    let domRef = (0, $k6K00$useFocusableRef)(ref);
     /**
    * Must use div for now because Safari pointer event bugs on disabled form elements.
    * Link https://bugs.webkit.org/show_bug.cgi?id=219188.
    */ let { buttonProps: buttonProps, isPressed: isPressed } = (0, $k6K00$useButton)({
         ...props,
         elementType: "div"
-    }, ref);
+    }, domRef);
     let { hoverProps: hoverProps, isHovered: isHovered } = (0, $k6K00$useHover)(props);
     return /*#__PURE__*/ (0, $k6K00$react).createElement((0, $k6K00$FocusRing), {
         focusRingClass: (0, $k6K00$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($ba58a329f3e1a776$exports))), "focus-ring")
@@ -235,7 +234,7 @@ function $7f00b388e0d3b2f6$var$StepButton(props, ref) {
             "is-disabled": isDisabled
         }),
         ...(0, $k6K00$mergeProps)(hoverProps, buttonProps),
-        ref: ref
+        ref: domRef
     }, direction === "up" && scale === "large" && /*#__PURE__*/ (0, $k6K00$react).createElement((0, $k6K00$spectrumiconsworkflowAdd), {
         UNSAFE_className: (0, $k6K00$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($ba58a329f3e1a776$exports))), "spectrum-Stepper-button-icon", "spectrum-Stepper-stepUpIcon"),
         size: "S"
@@ -271,7 +270,7 @@ function $48b879bdd771eb85$var$NumberField(props, ref) {
         ...props,
         locale: locale
     });
-    let inputRef = (0, $k6K00$useRef)();
+    let inputRef = (0, $k6K00$useRef)(null);
     let domRef = (0, $k6K00$useFocusableRef)(ref, inputRef);
     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);
     let isMobile = provider.scale === "large";
@@ -279,17 +278,16 @@ function $48b879bdd771eb85$var$NumberField(props, ref) {
     let { isHovered: isHovered, hoverProps: hoverProps } = (0, $k6K00$useHover)({
         isDisabled: isDisabled
     });
-    let validationState = props.validationState || (isInvalid ? "invalid" : null);
-    let className = (0, $k6K00$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($ba58a329f3e1a776$exports))), "spectrum-Stepper", {
+    let validationState = props.validationState || (isInvalid ? "invalid" : undefined);
+    let className = (0, $k6K00$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($ba58a329f3e1a776$exports))), "spectrum-Stepper", // because FocusRing won't pass along the className from Field, we have to handle that ourselves
+    !props.label && style.className ? style.className : "", {
         "spectrum-Stepper--isQuiet": isQuiet,
         "is-disabled": isDisabled,
         "spectrum-Stepper--readonly": isReadOnly,
         "is-invalid": validationState === "invalid" && !isDisabled,
         "spectrum-Stepper--showStepper": showStepper,
         "spectrum-Stepper--isMobile": isMobile,
-        "is-hovered": isHovered,
-        // because FocusRing won't pass along the className from Field, we have to handle that ourselves
-        [style.className]: !props.label && style.className
+        "is-hovered": isHovered
     });
     return /*#__PURE__*/ (0, $k6K00$react).createElement((0, $k6K00$Field), {
         ...props,