@react-spectrum/checkbox 3.8.2 → 3.9.1

package/dist/import.mjs

@@ -1,3 +1,5 @@
+"use client";
+
 import "./main.css";
 import $gpy1V$spectrumiconsuiCheckmarkSmall from "@spectrum-icons/ui/CheckmarkSmall";
 import {useStyleProps as $gpy1V$useStyleProps, useFocusableRef as $gpy1V$useFocusableRef, classNames as $gpy1V$classNames, useDOMRef as $gpy1V$useDOMRef} from "@react-spectrum/utils";
@@ -5,16 +7,18 @@ import $gpy1V$spectrumiconsuiDashSmall from "@spectrum-icons/ui/DashSmall";
 import {FocusRing as $gpy1V$FocusRing} from "@react-aria/focus";
 import $gpy1V$react, {useRef as $gpy1V$useRef, useContext as $gpy1V$useContext, forwardRef as $gpy1V$forwardRef} from "react";
 import {useCheckboxGroupItem as $gpy1V$useCheckboxGroupItem, useCheckbox as $gpy1V$useCheckbox, useCheckboxGroup as $gpy1V$useCheckboxGroup} from "@react-aria/checkbox";
+import {useFormProps as $gpy1V$useFormProps} from "@react-spectrum/form";
 import {useHover as $gpy1V$useHover} from "@react-aria/interactions";
 import {useProviderProps as $gpy1V$useProviderProps, Provider as $gpy1V$Provider} from "@react-spectrum/provider";
 import {useToggleState as $gpy1V$useToggleState} from "@react-stately/toggle";
 import {Field as $gpy1V$Field} from "@react-spectrum/label";
 import {useCheckboxGroupState as $gpy1V$useCheckboxGroupState} from "@react-stately/checkbox";
-import {useFormProps as $gpy1V$useFormProps} from "@react-spectrum/form";
+
 
 function $parcel$interopDefault(a) {
   return a && a.__esModule ? a.default : a;
 }
+
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
@@ -117,21 +121,20 @@ $fe1a56c62936037c$export$2927016961429360 = `ISsn1a_spectrum-FocusRing--quiet`;
 
 
 
+
 function $25b6292d81af2844$var$Checkbox(props, ref) {
     let originalProps = props;
     props = (0, $gpy1V$useProviderProps)(props);
-    let { isIndeterminate: isIndeterminate = false, isEmphasized: isEmphasized = false, isDisabled: isDisabled = false, autoFocus: autoFocus, children: children, validationState: validationState, isInvalid: isInvalid, ...otherProps } = props;
+    props = (0, $gpy1V$useFormProps)(props);
+    let { isIndeterminate: isIndeterminate = false, isEmphasized: isEmphasized = false, autoFocus: autoFocus, children: children, ...otherProps } = props;
     let { styleProps: styleProps } = (0, $gpy1V$useStyleProps)(otherProps);
-    let { hoverProps: hoverProps, isHovered: isHovered } = (0, $gpy1V$useHover)({
-        isDisabled: isDisabled
-    });
     let inputRef = (0, $gpy1V$useRef)(null);
     let domRef = (0, $gpy1V$useFocusableRef)(ref, inputRef);
     // Swap hooks depending on whether this checkbox is inside a CheckboxGroup.
     // This is a bit unorthodox. Typically, hooks cannot be called in a conditional,
     // but since the checkbox won't move in and out of a group, it should be safe.
     let groupState = (0, $gpy1V$useContext)((0, $8c8ab388b155237e$export$baf37c4be89255b8));
-    let { inputProps: inputProps } = groupState ? (0, $gpy1V$useCheckboxGroupItem)({
+    let { inputProps: inputProps, isInvalid: isInvalid, isDisabled: isDisabled } = groupState ? (0, $gpy1V$useCheckboxGroupItem)({
         ...props,
         // Value is optional for standalone checkboxes, but required for CheckboxGroup items;
         // it's passed explicitly here to avoid typescript error (requires ignore).
@@ -143,6 +146,9 @@ function $25b6292d81af2844$var$Checkbox(props, ref) {
         validationState: originalProps.validationState,
         isInvalid: originalProps.isInvalid
     }, groupState, inputRef) : (0, $gpy1V$useCheckbox)(props, (0, $gpy1V$useToggleState)(props), inputRef);
+    let { hoverProps: hoverProps, isHovered: isHovered } = (0, $gpy1V$useHover)({
+        isDisabled: isDisabled
+    });
     let markIcon = isIndeterminate ? /*#__PURE__*/ (0, $gpy1V$react).createElement((0, $gpy1V$spectrumiconsuiDashSmall), {
         UNSAFE_className: (0, $gpy1V$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($fe1a56c62936037c$exports))), "spectrum-Checkbox-partialCheckmark")
     }) : /*#__PURE__*/ (0, $gpy1V$react).createElement((0, $gpy1V$spectrumiconsuiCheckmarkSmall), {
@@ -164,7 +170,7 @@ function $25b6292d81af2844$var$Checkbox(props, ref) {
             "is-checked": inputProps.checked,
             "is-indeterminate": isIndeterminate,
             "spectrum-Checkbox--quiet": !isEmphasized,
-            "is-invalid": isInvalid || validationState === "invalid",
+            "is-invalid": isInvalid,
             "is-disabled": isDisabled,
             "is-hovered": isHovered
         }, styleProps.className)
@@ -239,14 +245,12 @@ function $73f43ce9d441cc69$var$CheckboxGroup(props, ref) {
     let { isEmphasized: isEmphasized, children: children, orientation: orientation = "vertical" } = props;
     let domRef = (0, $gpy1V$useDOMRef)(ref);
     let state = (0, $gpy1V$useCheckboxGroupState)(props);
-    let { labelProps: labelProps, groupProps: groupProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $gpy1V$useCheckboxGroup)(props, state);
+    let { groupProps: groupProps, ...otherProps } = (0, $gpy1V$useCheckboxGroup)(props, state);
     return /*#__PURE__*/ (0, $gpy1V$react).createElement((0, $gpy1V$Field), {
         ...props,
+        ...otherProps,
         ref: domRef,
         wrapperClassName: (0, $gpy1V$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($4cb2b26710154c56$exports))), "spectrum-FieldGroup"),
-        labelProps: labelProps,
-        descriptionProps: descriptionProps,
-        errorMessageProps: errorMessageProps,
         elementType: "span",
         includeNecessityIndicatorInAccessibilityName: true
     }, /*#__PURE__*/ (0, $gpy1V$react).createElement("div", {
@@ -255,8 +259,7 @@ function $73f43ce9d441cc69$var$CheckboxGroup(props, ref) {
             "spectrum-FieldGroup-group--horizontal": orientation === "horizontal"
         })
     }, /*#__PURE__*/ (0, $gpy1V$react).createElement((0, $gpy1V$Provider), {
-        isEmphasized: isEmphasized,
-        validationState: state.isInvalid ? "invalid" : undefined
+        isEmphasized: isEmphasized
     }, /*#__PURE__*/ (0, $gpy1V$react).createElement((0, $8c8ab388b155237e$export$baf37c4be89255b8).Provider, {
         value: state
     }, children))));