@react-spectrum/checkbox 3.7.3 → 3.8.0

package/dist/import.mjs

@@ -108,7 +108,7 @@ $fe1a56c62936037c$export$14a30de2866685fa = "is-invalid_4870fc";
 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 , ...otherProps } = props;
+    let { isIndeterminate: isIndeterminate = false , isEmphasized: isEmphasized = false , isDisabled: isDisabled = false , autoFocus: autoFocus , children: children , validationState: validationState , isInvalid: isInvalid , ...otherProps } = props;
     let { styleProps: styleProps  } = (0, $gpy1V$useStyleProps)(otherProps);
     let { hoverProps: hoverProps , isHovered: isHovered  } = (0, $gpy1V$useHover)({
         isDisabled: isDisabled
@@ -128,7 +128,8 @@ function $25b6292d81af2844$var$Checkbox(props, ref) {
         // Only pass isRequired and validationState to react-aria if they came from
         // the props for this individual checkbox, and not from the group via context.
         isRequired: originalProps.isRequired,
-        validationState: originalProps.validationState
+        validationState: originalProps.validationState,
+        isInvalid: originalProps.isInvalid
     }, groupState, inputRef) : (0, $gpy1V$useCheckbox)(props, (0, $gpy1V$useToggleState)(props), inputRef);
     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")
@@ -151,7 +152,7 @@ function $25b6292d81af2844$var$Checkbox(props, ref) {
             "is-checked": inputProps.checked,
             "is-indeterminate": isIndeterminate,
             "spectrum-Checkbox--quiet": !isEmphasized,
-            "is-invalid": validationState === "invalid",
+            "is-invalid": isInvalid || validationState === "invalid",
             "is-disabled": isDisabled,
             "is-hovered": isHovered
         }, styleProps.className)
@@ -208,7 +209,7 @@ $4cb2b26710154c56$export$1ad8646bcba21c0e = "spectrum-FieldGroup-group--horizont
 function $73f43ce9d441cc69$var$CheckboxGroup(props, ref) {
     props = (0, $gpy1V$useProviderProps)(props);
     props = (0, $gpy1V$useFormProps)(props);
-    let { isEmphasized: isEmphasized , children: children , orientation: orientation = "vertical" , validationState: validationState  } = props;
+    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);
@@ -228,7 +229,7 @@ function $73f43ce9d441cc69$var$CheckboxGroup(props, ref) {
         })
     }, /*#__PURE__*/ (0, $gpy1V$react).createElement((0, $gpy1V$Provider), {
         isEmphasized: isEmphasized,
-        validationState: validationState
+        validationState: state.isInvalid ? "invalid" : undefined
     }, /*#__PURE__*/ (0, $gpy1V$react).createElement((0, $8c8ab388b155237e$export$baf37c4be89255b8).Provider, {
         value: state
     }, children))));

package/dist/main.js

@@ -111,7 +111,7 @@ $591f3ccba6339bdb$export$14a30de2866685fa = "is-invalid_4870fc";
 function $096ccd12d23dd6cc$var$Checkbox(props, ref) {
     let originalProps = props;
     props = (0, $5Ft2u$reactspectrumprovider.useProviderProps)(props);
-    let { isIndeterminate: isIndeterminate = false , isEmphasized: isEmphasized = false , isDisabled: isDisabled = false , autoFocus: autoFocus , children: children , validationState: validationState , ...otherProps } = props;
+    let { isIndeterminate: isIndeterminate = false , isEmphasized: isEmphasized = false , isDisabled: isDisabled = false , autoFocus: autoFocus , children: children , validationState: validationState , isInvalid: isInvalid , ...otherProps } = props;
     let { styleProps: styleProps  } = (0, $5Ft2u$reactspectrumutils.useStyleProps)(otherProps);
     let { hoverProps: hoverProps , isHovered: isHovered  } = (0, $5Ft2u$reactariainteractions.useHover)({
         isDisabled: isDisabled
@@ -131,7 +131,8 @@ function $096ccd12d23dd6cc$var$Checkbox(props, ref) {
         // Only pass isRequired and validationState to react-aria if they came from
         // the props for this individual checkbox, and not from the group via context.
         isRequired: originalProps.isRequired,
-        validationState: originalProps.validationState
+        validationState: originalProps.validationState,
+        isInvalid: originalProps.isInvalid
     }, groupState, inputRef) : (0, $5Ft2u$reactariacheckbox.useCheckbox)(props, (0, $5Ft2u$reactstatelytoggle.useToggleState)(props), inputRef);
     let markIcon = isIndeterminate ? /*#__PURE__*/ (0, ($parcel$interopDefault($5Ft2u$react))).createElement((0, ($parcel$interopDefault($5Ft2u$spectrumiconsuiDashSmall))), {
         UNSAFE_className: (0, $5Ft2u$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($591f3ccba6339bdb$exports))), "spectrum-Checkbox-partialCheckmark")
@@ -154,7 +155,7 @@ function $096ccd12d23dd6cc$var$Checkbox(props, ref) {
             "is-checked": inputProps.checked,
             "is-indeterminate": isIndeterminate,
             "spectrum-Checkbox--quiet": !isEmphasized,
-            "is-invalid": validationState === "invalid",
+            "is-invalid": isInvalid || validationState === "invalid",
             "is-disabled": isDisabled,
             "is-hovered": isHovered
         }, styleProps.className)
@@ -211,7 +212,7 @@ $53124a3a0fd56fca$export$1ad8646bcba21c0e = "spectrum-FieldGroup-group--horizont
 function $1151290755e16c44$var$CheckboxGroup(props, ref) {
     props = (0, $5Ft2u$reactspectrumprovider.useProviderProps)(props);
     props = (0, $5Ft2u$reactspectrumform.useFormProps)(props);
-    let { isEmphasized: isEmphasized , children: children , orientation: orientation = "vertical" , validationState: validationState  } = props;
+    let { isEmphasized: isEmphasized , children: children , orientation: orientation = "vertical"  } = props;
     let domRef = (0, $5Ft2u$reactspectrumutils.useDOMRef)(ref);
     let state = (0, $5Ft2u$reactstatelycheckbox.useCheckboxGroupState)(props);
     let { labelProps: labelProps , groupProps: groupProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps  } = (0, $5Ft2u$reactariacheckbox.useCheckboxGroup)(props, state);
@@ -231,7 +232,7 @@ function $1151290755e16c44$var$CheckboxGroup(props, ref) {
         })
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($5Ft2u$react))).createElement((0, $5Ft2u$reactspectrumprovider.Provider), {
         isEmphasized: isEmphasized,
-        validationState: validationState
+        validationState: state.isInvalid ? "invalid" : undefined
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($5Ft2u$react))).createElement((0, $bdf3bf7fe71fe120$export$baf37c4be89255b8).Provider, {
         value: state
     }, children))));

package/dist/main.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/checkbox/src/index.ts","packages/@react-spectrum/checkbox/src/Checkbox.tsx","packages/@react-spectrum/checkbox/src/context.ts","packages/@adobe/spectrum-css-temp/components/checkbox/vars.css","packages/@react-spectrum/checkbox/src/CheckboxGroup.tsx","packages/@adobe/spectrum-css-temp/components/fieldgroup/vars.css"],"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/// <reference types=\"css-module-types\" />\nexport {Checkbox} from './Checkbox';\nexport {CheckboxGroup} from './CheckboxGroup';\nexport type {SpectrumCheckboxProps, SpectrumCheckboxGroupProps} from '@react-types/checkbox';\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 {CheckboxGroupContext} from './context';\nimport CheckmarkSmall from '@spectrum-icons/ui/CheckmarkSmall';\nimport {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport DashSmall from '@spectrum-icons/ui/DashSmall';\nimport {FocusableRef} from '@react-types/shared';\nimport {FocusRing} from '@react-aria/focus';\nimport React, {forwardRef, useContext, useRef} from 'react';\nimport {SpectrumCheckboxProps} from '@react-types/checkbox';\nimport styles from '@adobe/spectrum-css-temp/components/checkbox/vars.css';\nimport {useCheckbox, useCheckboxGroupItem} from '@react-aria/checkbox';\nimport {useHover} from '@react-aria/interactions';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useToggleState} from '@react-stately/toggle';\n\nfunction Checkbox(props: SpectrumCheckboxProps, ref: FocusableRef<HTMLLabelElement>) {\n  let originalProps = props;\n  props = useProviderProps(props);\n  let {\n    isIndeterminate = false,\n    isEmphasized = false,\n    isDisabled = false,\n    autoFocus,\n    children,\n    validationState,\n    ...otherProps\n  } = props;\n  let {styleProps} = useStyleProps(otherProps);\n  let {hoverProps, isHovered} = useHover({isDisabled});\n\n  let inputRef = useRef<HTMLInputElement>(null);\n  let domRef = useFocusableRef(ref, inputRef);\n\n  // Swap hooks depending on whether this checkbox is inside a CheckboxGroup.\n  // This is a bit unorthodox. Typically, hooks cannot be called in a conditional,\n  // but since the checkbox won't move in and out of a group, it should be safe.\n  let groupState = useContext(CheckboxGroupContext);\n  let {inputProps} = groupState\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    ? useCheckboxGroupItem({\n      ...props,\n      // Value is optional for standalone checkboxes, but required for CheckboxGroup items;\n      // it's passed explicitly here to avoid typescript error (requires ignore).\n      // @ts-ignore\n      value: props.value,\n      // Only pass isRequired and validationState to react-aria if they came from\n      // the props for this individual checkbox, and not from the group via context.\n      isRequired: originalProps.isRequired,\n      validationState: originalProps.validationState\n    }, groupState, inputRef)\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    : useCheckbox(props, useToggleState(props), inputRef);\n\n  let markIcon = isIndeterminate\n    ? <DashSmall UNSAFE_className={classNames(styles, 'spectrum-Checkbox-partialCheckmark')} />\n    : <CheckmarkSmall UNSAFE_className={classNames(styles, 'spectrum-Checkbox-checkmark')} />;\n\n  if (groupState) {\n    for (let key of ['isSelected', 'defaultSelected', 'isEmphasized']) {\n      if (originalProps[key] != null) {\n        console.warn(`${key} is unsupported on individual <Checkbox> elements within a <CheckboxGroup>. Please apply these props to the group instead.`);\n      }\n    }\n    if (props.value == null) {\n      console.warn('A <Checkbox> element within a <CheckboxGroup> requires a `value` property.');\n    }\n  }\n\n  return (\n    <label\n      {...styleProps}\n      {...hoverProps}\n      ref={domRef}\n      className={\n        classNames(\n          styles,\n          'spectrum-Checkbox',\n          {\n            'is-checked': inputProps.checked,\n            'is-indeterminate': isIndeterminate,\n            'spectrum-Checkbox--quiet': !isEmphasized,\n            'is-invalid': validationState === 'invalid',\n            'is-disabled': isDisabled,\n            'is-hovered': isHovered\n          },\n          styleProps.className\n        )\n      }>\n      <FocusRing focusRingClass={classNames(styles, 'focus-ring')} autoFocus={autoFocus}>\n        <input\n          {...inputProps}\n          ref={inputRef}\n          className={classNames(styles, 'spectrum-Checkbox-input')} />\n      </FocusRing>\n      <span className={classNames(styles, 'spectrum-Checkbox-box')}>{markIcon}</span>\n      {children && (\n        <span className={classNames(styles, 'spectrum-Checkbox-label')}>\n          {children}\n        </span>\n      )}\n    </label>\n  );\n}\n/**\n * Checkboxes allow users to select multiple items from a list of individual items,\n * or to mark one individual item as selected.\n */\nlet _Checkbox = forwardRef(Checkbox);\nexport {_Checkbox as Checkbox};\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 {CheckboxGroupState} from '@react-stately/checkbox';\nimport React from 'react';\n\nexport const CheckboxGroupContext = React.createContext<CheckboxGroupState | null>(null);\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\n@import './index.css';\n@import './skin.css';\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 {CheckboxGroupContext} from './context';\nimport {classNames, useDOMRef} from '@react-spectrum/utils';\nimport {DOMRef} from '@react-types/shared';\nimport {Field} from '@react-spectrum/label';\nimport {Provider, useProviderProps} from '@react-spectrum/provider';\nimport React from 'react';\nimport {SpectrumCheckboxGroupProps} from '@react-types/checkbox';\nimport styles from '@adobe/spectrum-css-temp/components/fieldgroup/vars.css';\nimport {useCheckboxGroup} from '@react-aria/checkbox';\nimport {useCheckboxGroupState} from '@react-stately/checkbox';\nimport {useFormProps} from '@react-spectrum/form';\n\nfunction CheckboxGroup(props: SpectrumCheckboxGroupProps, ref: DOMRef<HTMLDivElement>) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  let {\n    isEmphasized,\n    children,\n    orientation = 'vertical',\n    validationState\n  } = props;\n  let domRef = useDOMRef(ref);\n  let state = useCheckboxGroupState(props);\n  let {labelProps, groupProps, descriptionProps, errorMessageProps} = useCheckboxGroup(props, state);\n\n  return (\n    <Field\n      {...props}\n      ref={domRef}\n      wrapperClassName={classNames(styles, 'spectrum-FieldGroup')}\n      labelProps={labelProps}\n      descriptionProps={descriptionProps}\n      errorMessageProps={errorMessageProps}\n      elementType=\"span\"\n      includeNecessityIndicatorInAccessibilityName>\n      <div\n        {...groupProps}\n        className={\n          classNames(\n            styles,\n            'spectrum-FieldGroup-group',\n            {\n              'spectrum-FieldGroup-group--horizontal': orientation === 'horizontal'\n            }\n          )\n        }>\n        <Provider isEmphasized={isEmphasized} validationState={validationState}>\n          <CheckboxGroupContext.Provider value={state}>\n            {children}\n          </CheckboxGroupContext.Provider>\n        </Provider>\n      </div>\n    </Field>\n  );\n}\n\n/**\n * A CheckboxGroup allows users to select one or more items from a list of choices.\n */\nconst _CheckboxGroup = React.forwardRef(CheckboxGroup);\nexport {_CheckboxGroup as CheckboxGroup};\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\n@import './index.css';\n"],"names":[],"version":3,"file":"main.js.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC,GACD,0CAA0C;ACX1C;;;;;;;;;;ACAA;;;;;;;;;;CAUC;AAKM,MAAM,4CAAuB,CAAA,GAAA,sCAAI,EAAE,cAAyC;;CDLlF;;;;;;;;;;;;;;;;;;;;;AEVD,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AAZA,4CAAsC;AACtC,4CAA4C;AAC5C,4CAA+B;AAC/B,4CAA0C;AAC1C,2CAAqC;AACrC,4CAAgD;AAChD,4CAAuD;AACvD,4CAA+B;AAC/B,4CAA4C;AAC5C,4CAA+B;AAC/B,4CAAgC;AAChC,4CAA6C;AAC7C,4CAA+B;;;;;;;AFc/B,SAAS,+BAAS,KAA4B,EAAE,GAAmC;IACjF,IAAI,gBAAgB;IACpB,QAAQ,CAAA,GAAA,6CAAe,EAAE;IACzB,IAAI,mBACF,kBAAkB,sBAClB,eAAe,oBACf,aAAa,mBACb,UAAS,YACT,SAAQ,mBACR,gBAAe,aACf,UAAS,EACT,GAAG,YACJ,GAAG;IACJ,IAAI,cAAC,WAAU,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;IACjC,IAAI,cAAC,WAAU,aAAE,UAAS,EAAC,GAAG,CAAA,GAAA,qCAAO,EAAE;oBAAC;IAAU;IAElD,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAoB;IACxC,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE,KAAK;IAElC,2EAA2E;IAC3E,gFAAgF;IAChF,8EAA8E;IAC9E,IAAI,aAAa,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,yCAAmB;IAC/C,IAAI,cAAC,WAAU,EAAC,GAAG,aAEf,CAAA,GAAA,6CAAmB,EAAE;QACrB,GAAG,KAAK;QACR,qFAAqF;QACrF,2EAA2E;QAC3E,aAAa;QACb,OAAO,MAAM;QACb,2EAA2E;QAC3E,8EAA8E;QAC9E,YAAY,cAAc;QAC1B,iBAAiB,cAAc;QAC/B,WAAW,cAAc;IAC3B,GAAG,YAAY,YAEb,CAAA,GAAA,oCAAU,EAAE,OAAO,CAAA,GAAA,wCAAa,EAAE,QAAQ;IAE9C,IAAI,WAAW,gCACX,0DAAC,CAAA,GAAA,yDAAQ;QAAE,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,gEAAK,GAAG;uBAChD,0DAAC,CAAA,GAAA,8DAAa;QAAE,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,gEAAK,GAAG;;IAEzD,IAAI,YAAY;QACd,KAAK,IAAI,OAAO;YAAC;YAAc;YAAmB;SAAe,CAC/D,IAAI,aAAa,CAAC,IAAI,IAAI,MACxB,QAAQ,KAAK,CAAC,EAAE,IAAI,0HAA0H,CAAC;QAGnJ,IAAI,MAAM,SAAS,MACjB,QAAQ,KAAK;IAEjB;IAEA,qBACE,0DAAC;QACE,GAAG,UAAU;QACb,GAAG,UAAU;QACd,KAAK;QACL,WACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,gEAAK,GACL,qBACA;YACE,cAAc,WAAW;YACzB,oBAAoB;YACpB,4BAA4B,CAAC;YAC7B,cAAc,aAAa,oBAAoB;YAC/C,eAAe;YACf,cAAc;QAChB,GACA,WAAW;qBAGf,0DAAC,CAAA,GAAA,+BAAQ;QAAE,gBAAgB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,gEAAK,GAAG;QAAe,WAAW;qBACtE,0DAAC;QACE,GAAG,UAAU;QACd,KAAK;QACL,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,gEAAK,GAAG;uBAElC,0DAAC;QAAK,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,gEAAK,GAAG;OAA2B,WAC9D,0BACC,0DAAC;QAAK,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,gEAAK,GAAG;OACjC;AAKX;AACA;;;CAGC,GACD,IAAI,0DAAY,CAAA,GAAA,uBAAS,EAAE;;;AGxH3B;;;;;;;;;;CAUC;;;;;;;;;;ACVD,IAAA;AACA,IAAA;AACA,IAAA;AAFA,4CAAwC;AACxC,4CAA8C;AAC9C,4CAA0D;;;;;;ADsB1D,SAAS,oCAAc,KAAiC,EAAE,GAA2B;IACnF,QAAQ,CAAA,GAAA,6CAAe,EAAE;IACzB,QAAQ,CAAA,GAAA,qCAAW,EAAE;IACrB,IAAI,gBACF,aAAY,YACZ,SAAQ,eACR,cAAc,aACf,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,QAAQ,CAAA,GAAA,iDAAoB,EAAE;IAClC,IAAI,cAAC,WAAU,cAAE,WAAU,oBAAE,iBAAgB,qBAAE,kBAAiB,EAAC,GAAG,CAAA,GAAA,yCAAe,EAAE,OAAO;IAE5F,qBACE,0DAAC,CAAA,GAAA,+BAAI;QACF,GAAG,KAAK;QACT,KAAK;QACL,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,gEAAK,GAAG;QACrC,YAAY;QACZ,kBAAkB;QAClB,mBAAmB;QACnB,aAAY;QACZ,8CAAA;qBACA,0DAAC;QACE,GAAG,UAAU;QACd,WACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,gEAAK,GACL,6BACA;YACE,yCAAyC,gBAAgB;QAC3D;qBAGJ,0DAAC,CAAA,GAAA,qCAAO;QAAE,cAAc;QAAc,iBAAiB,MAAM,YAAY,YAAY;qBACnF,0DAAC,CAAA,GAAA,yCAAmB,EAAE;QAAS,OAAO;OACnC;AAMb;AAEA;;CAEC,GACD,MAAM,0DAAiB,CAAA,GAAA,sCAAI,EAAE,WAAW;;","sources":["packages/@react-spectrum/checkbox/src/index.ts","packages/@react-spectrum/checkbox/src/Checkbox.tsx","packages/@react-spectrum/checkbox/src/context.ts","packages/@adobe/spectrum-css-temp/components/checkbox/vars.css","packages/@react-spectrum/checkbox/src/CheckboxGroup.tsx","packages/@adobe/spectrum-css-temp/components/fieldgroup/vars.css"],"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/// <reference types=\"css-module-types\" />\nexport {Checkbox} from './Checkbox';\nexport {CheckboxGroup} from './CheckboxGroup';\nexport type {SpectrumCheckboxProps, SpectrumCheckboxGroupProps} from '@react-types/checkbox';\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 {CheckboxGroupContext} from './context';\nimport CheckmarkSmall from '@spectrum-icons/ui/CheckmarkSmall';\nimport {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport DashSmall from '@spectrum-icons/ui/DashSmall';\nimport {FocusableRef} from '@react-types/shared';\nimport {FocusRing} from '@react-aria/focus';\nimport React, {forwardRef, useContext, useRef} from 'react';\nimport {SpectrumCheckboxProps} from '@react-types/checkbox';\nimport styles from '@adobe/spectrum-css-temp/components/checkbox/vars.css';\nimport {useCheckbox, useCheckboxGroupItem} from '@react-aria/checkbox';\nimport {useHover} from '@react-aria/interactions';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useToggleState} from '@react-stately/toggle';\n\nfunction Checkbox(props: SpectrumCheckboxProps, ref: FocusableRef<HTMLLabelElement>) {\n  let originalProps = props;\n  props = useProviderProps(props);\n  let {\n    isIndeterminate = false,\n    isEmphasized = false,\n    isDisabled = false,\n    autoFocus,\n    children,\n    validationState,\n    isInvalid,\n    ...otherProps\n  } = props;\n  let {styleProps} = useStyleProps(otherProps);\n  let {hoverProps, isHovered} = useHover({isDisabled});\n\n  let inputRef = useRef<HTMLInputElement>(null);\n  let domRef = useFocusableRef(ref, inputRef);\n\n  // Swap hooks depending on whether this checkbox is inside a CheckboxGroup.\n  // This is a bit unorthodox. Typically, hooks cannot be called in a conditional,\n  // but since the checkbox won't move in and out of a group, it should be safe.\n  let groupState = useContext(CheckboxGroupContext);\n  let {inputProps} = groupState\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    ? useCheckboxGroupItem({\n      ...props,\n      // Value is optional for standalone checkboxes, but required for CheckboxGroup items;\n      // it's passed explicitly here to avoid typescript error (requires ignore).\n      // @ts-ignore\n      value: props.value,\n      // Only pass isRequired and validationState to react-aria if they came from\n      // the props for this individual checkbox, and not from the group via context.\n      isRequired: originalProps.isRequired,\n      validationState: originalProps.validationState,\n      isInvalid: originalProps.isInvalid\n    }, groupState, inputRef)\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    : useCheckbox(props, useToggleState(props), inputRef);\n\n  let markIcon = isIndeterminate\n    ? <DashSmall UNSAFE_className={classNames(styles, 'spectrum-Checkbox-partialCheckmark')} />\n    : <CheckmarkSmall UNSAFE_className={classNames(styles, 'spectrum-Checkbox-checkmark')} />;\n\n  if (groupState) {\n    for (let key of ['isSelected', 'defaultSelected', 'isEmphasized']) {\n      if (originalProps[key] != null) {\n        console.warn(`${key} is unsupported on individual <Checkbox> elements within a <CheckboxGroup>. Please apply these props to the group instead.`);\n      }\n    }\n    if (props.value == null) {\n      console.warn('A <Checkbox> element within a <CheckboxGroup> requires a `value` property.');\n    }\n  }\n\n  return (\n    <label\n      {...styleProps}\n      {...hoverProps}\n      ref={domRef}\n      className={\n        classNames(\n          styles,\n          'spectrum-Checkbox',\n          {\n            'is-checked': inputProps.checked,\n            'is-indeterminate': isIndeterminate,\n            'spectrum-Checkbox--quiet': !isEmphasized,\n            'is-invalid': isInvalid || validationState === 'invalid',\n            'is-disabled': isDisabled,\n            'is-hovered': isHovered\n          },\n          styleProps.className\n        )\n      }>\n      <FocusRing focusRingClass={classNames(styles, 'focus-ring')} autoFocus={autoFocus}>\n        <input\n          {...inputProps}\n          ref={inputRef}\n          className={classNames(styles, 'spectrum-Checkbox-input')} />\n      </FocusRing>\n      <span className={classNames(styles, 'spectrum-Checkbox-box')}>{markIcon}</span>\n      {children && (\n        <span className={classNames(styles, 'spectrum-Checkbox-label')}>\n          {children}\n        </span>\n      )}\n    </label>\n  );\n}\n/**\n * Checkboxes allow users to select multiple items from a list of individual items,\n * or to mark one individual item as selected.\n */\nlet _Checkbox = forwardRef(Checkbox);\nexport {_Checkbox as Checkbox};\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 {CheckboxGroupState} from '@react-stately/checkbox';\nimport React from 'react';\n\nexport const CheckboxGroupContext = React.createContext<CheckboxGroupState | null>(null);\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\n@import './index.css';\n@import './skin.css';\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 {CheckboxGroupContext} from './context';\nimport {classNames, useDOMRef} from '@react-spectrum/utils';\nimport {DOMRef} from '@react-types/shared';\nimport {Field} from '@react-spectrum/label';\nimport {Provider, useProviderProps} from '@react-spectrum/provider';\nimport React from 'react';\nimport {SpectrumCheckboxGroupProps} from '@react-types/checkbox';\nimport styles from '@adobe/spectrum-css-temp/components/fieldgroup/vars.css';\nimport {useCheckboxGroup} from '@react-aria/checkbox';\nimport {useCheckboxGroupState} from '@react-stately/checkbox';\nimport {useFormProps} from '@react-spectrum/form';\n\nfunction CheckboxGroup(props: SpectrumCheckboxGroupProps, ref: DOMRef<HTMLDivElement>) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  let {\n    isEmphasized,\n    children,\n    orientation = 'vertical'\n  } = props;\n  let domRef = useDOMRef(ref);\n  let state = useCheckboxGroupState(props);\n  let {labelProps, groupProps, descriptionProps, errorMessageProps} = useCheckboxGroup(props, state);\n\n  return (\n    <Field\n      {...props}\n      ref={domRef}\n      wrapperClassName={classNames(styles, 'spectrum-FieldGroup')}\n      labelProps={labelProps}\n      descriptionProps={descriptionProps}\n      errorMessageProps={errorMessageProps}\n      elementType=\"span\"\n      includeNecessityIndicatorInAccessibilityName>\n      <div\n        {...groupProps}\n        className={\n          classNames(\n            styles,\n            'spectrum-FieldGroup-group',\n            {\n              'spectrum-FieldGroup-group--horizontal': orientation === 'horizontal'\n            }\n          )\n        }>\n        <Provider isEmphasized={isEmphasized} validationState={state.isInvalid ? 'invalid' : undefined}>\n          <CheckboxGroupContext.Provider value={state}>\n            {children}\n          </CheckboxGroupContext.Provider>\n        </Provider>\n      </div>\n    </Field>\n  );\n}\n\n/**\n * A CheckboxGroup allows users to select one or more items from a list of choices.\n */\nconst _CheckboxGroup = React.forwardRef(CheckboxGroup);\nexport {_CheckboxGroup as CheckboxGroup};\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\n@import './index.css';\n"],"names":[],"version":3,"file":"main.js.map"}

package/dist/module.js

@@ -108,7 +108,7 @@ $fe1a56c62936037c$export$14a30de2866685fa = "is-invalid_4870fc";
 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 , ...otherProps } = props;
+    let { isIndeterminate: isIndeterminate = false , isEmphasized: isEmphasized = false , isDisabled: isDisabled = false , autoFocus: autoFocus , children: children , validationState: validationState , isInvalid: isInvalid , ...otherProps } = props;
     let { styleProps: styleProps  } = (0, $gpy1V$useStyleProps)(otherProps);
     let { hoverProps: hoverProps , isHovered: isHovered  } = (0, $gpy1V$useHover)({
         isDisabled: isDisabled
@@ -128,7 +128,8 @@ function $25b6292d81af2844$var$Checkbox(props, ref) {
         // Only pass isRequired and validationState to react-aria if they came from
         // the props for this individual checkbox, and not from the group via context.
         isRequired: originalProps.isRequired,
-        validationState: originalProps.validationState
+        validationState: originalProps.validationState,
+        isInvalid: originalProps.isInvalid
     }, groupState, inputRef) : (0, $gpy1V$useCheckbox)(props, (0, $gpy1V$useToggleState)(props), inputRef);
     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")
@@ -151,7 +152,7 @@ function $25b6292d81af2844$var$Checkbox(props, ref) {
             "is-checked": inputProps.checked,
             "is-indeterminate": isIndeterminate,
             "spectrum-Checkbox--quiet": !isEmphasized,
-            "is-invalid": validationState === "invalid",
+            "is-invalid": isInvalid || validationState === "invalid",
             "is-disabled": isDisabled,
             "is-hovered": isHovered
         }, styleProps.className)
@@ -208,7 +209,7 @@ $4cb2b26710154c56$export$1ad8646bcba21c0e = "spectrum-FieldGroup-group--horizont
 function $73f43ce9d441cc69$var$CheckboxGroup(props, ref) {
     props = (0, $gpy1V$useProviderProps)(props);
     props = (0, $gpy1V$useFormProps)(props);
-    let { isEmphasized: isEmphasized , children: children , orientation: orientation = "vertical" , validationState: validationState  } = props;
+    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);
@@ -228,7 +229,7 @@ function $73f43ce9d441cc69$var$CheckboxGroup(props, ref) {
         })
     }, /*#__PURE__*/ (0, $gpy1V$react).createElement((0, $gpy1V$Provider), {
         isEmphasized: isEmphasized,
-        validationState: validationState
+        validationState: state.isInvalid ? "invalid" : undefined
     }, /*#__PURE__*/ (0, $gpy1V$react).createElement((0, $8c8ab388b155237e$export$baf37c4be89255b8).Provider, {
         value: state
     }, children))));

package/dist/module.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/checkbox/src/index.ts","packages/@react-spectrum/checkbox/src/Checkbox.tsx","packages/@react-spectrum/checkbox/src/context.ts","packages/@adobe/spectrum-css-temp/components/checkbox/vars.css","packages/@react-spectrum/checkbox/src/CheckboxGroup.tsx","packages/@adobe/spectrum-css-temp/components/fieldgroup/vars.css"],"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/// <reference types=\"css-module-types\" />\nexport {Checkbox} from './Checkbox';\nexport {CheckboxGroup} from './CheckboxGroup';\nexport type {SpectrumCheckboxProps, SpectrumCheckboxGroupProps} from '@react-types/checkbox';\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 {CheckboxGroupContext} from './context';\nimport CheckmarkSmall from '@spectrum-icons/ui/CheckmarkSmall';\nimport {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport DashSmall from '@spectrum-icons/ui/DashSmall';\nimport {FocusableRef} from '@react-types/shared';\nimport {FocusRing} from '@react-aria/focus';\nimport React, {forwardRef, useContext, useRef} from 'react';\nimport {SpectrumCheckboxProps} from '@react-types/checkbox';\nimport styles from '@adobe/spectrum-css-temp/components/checkbox/vars.css';\nimport {useCheckbox, useCheckboxGroupItem} from '@react-aria/checkbox';\nimport {useHover} from '@react-aria/interactions';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useToggleState} from '@react-stately/toggle';\n\nfunction Checkbox(props: SpectrumCheckboxProps, ref: FocusableRef<HTMLLabelElement>) {\n  let originalProps = props;\n  props = useProviderProps(props);\n  let {\n    isIndeterminate = false,\n    isEmphasized = false,\n    isDisabled = false,\n    autoFocus,\n    children,\n    validationState,\n    ...otherProps\n  } = props;\n  let {styleProps} = useStyleProps(otherProps);\n  let {hoverProps, isHovered} = useHover({isDisabled});\n\n  let inputRef = useRef<HTMLInputElement>(null);\n  let domRef = useFocusableRef(ref, inputRef);\n\n  // Swap hooks depending on whether this checkbox is inside a CheckboxGroup.\n  // This is a bit unorthodox. Typically, hooks cannot be called in a conditional,\n  // but since the checkbox won't move in and out of a group, it should be safe.\n  let groupState = useContext(CheckboxGroupContext);\n  let {inputProps} = groupState\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    ? useCheckboxGroupItem({\n      ...props,\n      // Value is optional for standalone checkboxes, but required for CheckboxGroup items;\n      // it's passed explicitly here to avoid typescript error (requires ignore).\n      // @ts-ignore\n      value: props.value,\n      // Only pass isRequired and validationState to react-aria if they came from\n      // the props for this individual checkbox, and not from the group via context.\n      isRequired: originalProps.isRequired,\n      validationState: originalProps.validationState\n    }, groupState, inputRef)\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    : useCheckbox(props, useToggleState(props), inputRef);\n\n  let markIcon = isIndeterminate\n    ? <DashSmall UNSAFE_className={classNames(styles, 'spectrum-Checkbox-partialCheckmark')} />\n    : <CheckmarkSmall UNSAFE_className={classNames(styles, 'spectrum-Checkbox-checkmark')} />;\n\n  if (groupState) {\n    for (let key of ['isSelected', 'defaultSelected', 'isEmphasized']) {\n      if (originalProps[key] != null) {\n        console.warn(`${key} is unsupported on individual <Checkbox> elements within a <CheckboxGroup>. Please apply these props to the group instead.`);\n      }\n    }\n    if (props.value == null) {\n      console.warn('A <Checkbox> element within a <CheckboxGroup> requires a `value` property.');\n    }\n  }\n\n  return (\n    <label\n      {...styleProps}\n      {...hoverProps}\n      ref={domRef}\n      className={\n        classNames(\n          styles,\n          'spectrum-Checkbox',\n          {\n            'is-checked': inputProps.checked,\n            'is-indeterminate': isIndeterminate,\n            'spectrum-Checkbox--quiet': !isEmphasized,\n            'is-invalid': validationState === 'invalid',\n            'is-disabled': isDisabled,\n            'is-hovered': isHovered\n          },\n          styleProps.className\n        )\n      }>\n      <FocusRing focusRingClass={classNames(styles, 'focus-ring')} autoFocus={autoFocus}>\n        <input\n          {...inputProps}\n          ref={inputRef}\n          className={classNames(styles, 'spectrum-Checkbox-input')} />\n      </FocusRing>\n      <span className={classNames(styles, 'spectrum-Checkbox-box')}>{markIcon}</span>\n      {children && (\n        <span className={classNames(styles, 'spectrum-Checkbox-label')}>\n          {children}\n        </span>\n      )}\n    </label>\n  );\n}\n/**\n * Checkboxes allow users to select multiple items from a list of individual items,\n * or to mark one individual item as selected.\n */\nlet _Checkbox = forwardRef(Checkbox);\nexport {_Checkbox as Checkbox};\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 {CheckboxGroupState} from '@react-stately/checkbox';\nimport React from 'react';\n\nexport const CheckboxGroupContext = React.createContext<CheckboxGroupState | null>(null);\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\n@import './index.css';\n@import './skin.css';\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 {CheckboxGroupContext} from './context';\nimport {classNames, useDOMRef} from '@react-spectrum/utils';\nimport {DOMRef} from '@react-types/shared';\nimport {Field} from '@react-spectrum/label';\nimport {Provider, useProviderProps} from '@react-spectrum/provider';\nimport React from 'react';\nimport {SpectrumCheckboxGroupProps} from '@react-types/checkbox';\nimport styles from '@adobe/spectrum-css-temp/components/fieldgroup/vars.css';\nimport {useCheckboxGroup} from '@react-aria/checkbox';\nimport {useCheckboxGroupState} from '@react-stately/checkbox';\nimport {useFormProps} from '@react-spectrum/form';\n\nfunction CheckboxGroup(props: SpectrumCheckboxGroupProps, ref: DOMRef<HTMLDivElement>) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  let {\n    isEmphasized,\n    children,\n    orientation = 'vertical',\n    validationState\n  } = props;\n  let domRef = useDOMRef(ref);\n  let state = useCheckboxGroupState(props);\n  let {labelProps, groupProps, descriptionProps, errorMessageProps} = useCheckboxGroup(props, state);\n\n  return (\n    <Field\n      {...props}\n      ref={domRef}\n      wrapperClassName={classNames(styles, 'spectrum-FieldGroup')}\n      labelProps={labelProps}\n      descriptionProps={descriptionProps}\n      errorMessageProps={errorMessageProps}\n      elementType=\"span\"\n      includeNecessityIndicatorInAccessibilityName>\n      <div\n        {...groupProps}\n        className={\n          classNames(\n            styles,\n            'spectrum-FieldGroup-group',\n            {\n              'spectrum-FieldGroup-group--horizontal': orientation === 'horizontal'\n            }\n          )\n        }>\n        <Provider isEmphasized={isEmphasized} validationState={validationState}>\n          <CheckboxGroupContext.Provider value={state}>\n            {children}\n          </CheckboxGroupContext.Provider>\n        </Provider>\n      </div>\n    </Field>\n  );\n}\n\n/**\n * A CheckboxGroup allows users to select one or more items from a list of choices.\n */\nconst _CheckboxGroup = React.forwardRef(CheckboxGroup);\nexport {_CheckboxGroup as CheckboxGroup};\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\n@import './index.css';\n"],"names":[],"version":3,"file":"module.js.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/checkbox/src/index.ts","packages/@react-spectrum/checkbox/src/Checkbox.tsx","packages/@react-spectrum/checkbox/src/context.ts","packages/@adobe/spectrum-css-temp/components/checkbox/vars.css","packages/@react-spectrum/checkbox/src/CheckboxGroup.tsx","packages/@adobe/spectrum-css-temp/components/fieldgroup/vars.css"],"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/// <reference types=\"css-module-types\" />\nexport {Checkbox} from './Checkbox';\nexport {CheckboxGroup} from './CheckboxGroup';\nexport type {SpectrumCheckboxProps, SpectrumCheckboxGroupProps} from '@react-types/checkbox';\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 {CheckboxGroupContext} from './context';\nimport CheckmarkSmall from '@spectrum-icons/ui/CheckmarkSmall';\nimport {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport DashSmall from '@spectrum-icons/ui/DashSmall';\nimport {FocusableRef} from '@react-types/shared';\nimport {FocusRing} from '@react-aria/focus';\nimport React, {forwardRef, useContext, useRef} from 'react';\nimport {SpectrumCheckboxProps} from '@react-types/checkbox';\nimport styles from '@adobe/spectrum-css-temp/components/checkbox/vars.css';\nimport {useCheckbox, useCheckboxGroupItem} from '@react-aria/checkbox';\nimport {useHover} from '@react-aria/interactions';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useToggleState} from '@react-stately/toggle';\n\nfunction Checkbox(props: SpectrumCheckboxProps, ref: FocusableRef<HTMLLabelElement>) {\n  let originalProps = props;\n  props = useProviderProps(props);\n  let {\n    isIndeterminate = false,\n    isEmphasized = false,\n    isDisabled = false,\n    autoFocus,\n    children,\n    validationState,\n    isInvalid,\n    ...otherProps\n  } = props;\n  let {styleProps} = useStyleProps(otherProps);\n  let {hoverProps, isHovered} = useHover({isDisabled});\n\n  let inputRef = useRef<HTMLInputElement>(null);\n  let domRef = useFocusableRef(ref, inputRef);\n\n  // Swap hooks depending on whether this checkbox is inside a CheckboxGroup.\n  // This is a bit unorthodox. Typically, hooks cannot be called in a conditional,\n  // but since the checkbox won't move in and out of a group, it should be safe.\n  let groupState = useContext(CheckboxGroupContext);\n  let {inputProps} = groupState\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    ? useCheckboxGroupItem({\n      ...props,\n      // Value is optional for standalone checkboxes, but required for CheckboxGroup items;\n      // it's passed explicitly here to avoid typescript error (requires ignore).\n      // @ts-ignore\n      value: props.value,\n      // Only pass isRequired and validationState to react-aria if they came from\n      // the props for this individual checkbox, and not from the group via context.\n      isRequired: originalProps.isRequired,\n      validationState: originalProps.validationState,\n      isInvalid: originalProps.isInvalid\n    }, groupState, inputRef)\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    : useCheckbox(props, useToggleState(props), inputRef);\n\n  let markIcon = isIndeterminate\n    ? <DashSmall UNSAFE_className={classNames(styles, 'spectrum-Checkbox-partialCheckmark')} />\n    : <CheckmarkSmall UNSAFE_className={classNames(styles, 'spectrum-Checkbox-checkmark')} />;\n\n  if (groupState) {\n    for (let key of ['isSelected', 'defaultSelected', 'isEmphasized']) {\n      if (originalProps[key] != null) {\n        console.warn(`${key} is unsupported on individual <Checkbox> elements within a <CheckboxGroup>. Please apply these props to the group instead.`);\n      }\n    }\n    if (props.value == null) {\n      console.warn('A <Checkbox> element within a <CheckboxGroup> requires a `value` property.');\n    }\n  }\n\n  return (\n    <label\n      {...styleProps}\n      {...hoverProps}\n      ref={domRef}\n      className={\n        classNames(\n          styles,\n          'spectrum-Checkbox',\n          {\n            'is-checked': inputProps.checked,\n            'is-indeterminate': isIndeterminate,\n            'spectrum-Checkbox--quiet': !isEmphasized,\n            'is-invalid': isInvalid || validationState === 'invalid',\n            'is-disabled': isDisabled,\n            'is-hovered': isHovered\n          },\n          styleProps.className\n        )\n      }>\n      <FocusRing focusRingClass={classNames(styles, 'focus-ring')} autoFocus={autoFocus}>\n        <input\n          {...inputProps}\n          ref={inputRef}\n          className={classNames(styles, 'spectrum-Checkbox-input')} />\n      </FocusRing>\n      <span className={classNames(styles, 'spectrum-Checkbox-box')}>{markIcon}</span>\n      {children && (\n        <span className={classNames(styles, 'spectrum-Checkbox-label')}>\n          {children}\n        </span>\n      )}\n    </label>\n  );\n}\n/**\n * Checkboxes allow users to select multiple items from a list of individual items,\n * or to mark one individual item as selected.\n */\nlet _Checkbox = forwardRef(Checkbox);\nexport {_Checkbox as Checkbox};\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 {CheckboxGroupState} from '@react-stately/checkbox';\nimport React from 'react';\n\nexport const CheckboxGroupContext = React.createContext<CheckboxGroupState | null>(null);\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\n@import './index.css';\n@import './skin.css';\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 {CheckboxGroupContext} from './context';\nimport {classNames, useDOMRef} from '@react-spectrum/utils';\nimport {DOMRef} from '@react-types/shared';\nimport {Field} from '@react-spectrum/label';\nimport {Provider, useProviderProps} from '@react-spectrum/provider';\nimport React from 'react';\nimport {SpectrumCheckboxGroupProps} from '@react-types/checkbox';\nimport styles from '@adobe/spectrum-css-temp/components/fieldgroup/vars.css';\nimport {useCheckboxGroup} from '@react-aria/checkbox';\nimport {useCheckboxGroupState} from '@react-stately/checkbox';\nimport {useFormProps} from '@react-spectrum/form';\n\nfunction CheckboxGroup(props: SpectrumCheckboxGroupProps, ref: DOMRef<HTMLDivElement>) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  let {\n    isEmphasized,\n    children,\n    orientation = 'vertical'\n  } = props;\n  let domRef = useDOMRef(ref);\n  let state = useCheckboxGroupState(props);\n  let {labelProps, groupProps, descriptionProps, errorMessageProps} = useCheckboxGroup(props, state);\n\n  return (\n    <Field\n      {...props}\n      ref={domRef}\n      wrapperClassName={classNames(styles, 'spectrum-FieldGroup')}\n      labelProps={labelProps}\n      descriptionProps={descriptionProps}\n      errorMessageProps={errorMessageProps}\n      elementType=\"span\"\n      includeNecessityIndicatorInAccessibilityName>\n      <div\n        {...groupProps}\n        className={\n          classNames(\n            styles,\n            'spectrum-FieldGroup-group',\n            {\n              'spectrum-FieldGroup-group--horizontal': orientation === 'horizontal'\n            }\n          )\n        }>\n        <Provider isEmphasized={isEmphasized} validationState={state.isInvalid ? 'invalid' : undefined}>\n          <CheckboxGroupContext.Provider value={state}>\n            {children}\n          </CheckboxGroupContext.Provider>\n        </Provider>\n      </div>\n    </Field>\n  );\n}\n\n/**\n * A CheckboxGroup allows users to select one or more items from a list of choices.\n */\nconst _CheckboxGroup = React.forwardRef(CheckboxGroup);\nexport {_CheckboxGroup as CheckboxGroup};\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\n@import './index.css';\n"],"names":[],"version":3,"file":"module.js.map"}

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"mappings":";;ACkHA;;;GAGG;AACH,OAAA,IAAI,2KAAgC,CAAC;AClDrC;;GAEG;AACH,OAAA,MAAM,2JAAgD,CAAC;ACzDvD,YAAY,EAAC,qBAAqB,EAAE,0BAA0B,EAAC,MAAM,uBAAuB,CAAC","sources":["packages/@react-spectrum/checkbox/src/packages/@react-spectrum/checkbox/src/context.ts","packages/@react-spectrum/checkbox/src/packages/@react-spectrum/checkbox/src/Checkbox.tsx","packages/@react-spectrum/checkbox/src/packages/@react-spectrum/checkbox/src/CheckboxGroup.tsx","packages/@react-spectrum/checkbox/src/packages/@react-spectrum/checkbox/src/index.ts","packages/@react-spectrum/checkbox/src/index.ts"],"sourcesContent":[null,null,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/// <reference types=\"css-module-types\" />\nexport {Checkbox} from './Checkbox';\nexport {CheckboxGroup} from './CheckboxGroup';\nexport type {SpectrumCheckboxProps, SpectrumCheckboxGroupProps} from '@react-types/checkbox';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
+{"mappings":";;ACoHA;;;GAGG;AACH,OAAA,IAAI,2KAAgC,CAAC;ACrDrC;;GAEG;AACH,OAAA,MAAM,2JAAgD,CAAC;ACxDvD,YAAY,EAAC,qBAAqB,EAAE,0BAA0B,EAAC,MAAM,uBAAuB,CAAC","sources":["packages/@react-spectrum/checkbox/src/packages/@react-spectrum/checkbox/src/context.ts","packages/@react-spectrum/checkbox/src/packages/@react-spectrum/checkbox/src/Checkbox.tsx","packages/@react-spectrum/checkbox/src/packages/@react-spectrum/checkbox/src/CheckboxGroup.tsx","packages/@react-spectrum/checkbox/src/packages/@react-spectrum/checkbox/src/index.ts","packages/@react-spectrum/checkbox/src/index.ts"],"sourcesContent":[null,null,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/// <reference types=\"css-module-types\" />\nexport {Checkbox} from './Checkbox';\nexport {CheckboxGroup} from './CheckboxGroup';\nexport type {SpectrumCheckboxProps, SpectrumCheckboxGroupProps} from '@react-types/checkbox';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/checkbox",
-  "version": "3.7.3",
+  "version": "3.8.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -36,17 +36,17 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/checkbox": "^3.9.2",
-    "@react-aria/focus": "^3.13.0",
-    "@react-aria/interactions": "^3.16.0",
-    "@react-spectrum/form": "^3.6.3",
-    "@react-spectrum/label": "^3.13.0",
-    "@react-spectrum/utils": "^3.10.0",
-    "@react-stately/checkbox": "^3.4.3",
-    "@react-stately/toggle": "^3.6.0",
-    "@react-types/checkbox": "^3.4.4",
-    "@react-types/shared": "^3.18.1",
-    "@spectrum-icons/ui": "^3.5.3",
+    "@react-aria/checkbox": "^3.11.0",
+    "@react-aria/focus": "^3.14.1",
+    "@react-aria/interactions": "^3.18.0",
+    "@react-spectrum/form": "^3.6.5",
+    "@react-spectrum/label": "^3.14.0",
+    "@react-spectrum/utils": "^3.10.2",
+    "@react-stately/checkbox": "^3.5.0",
+    "@react-stately/toggle": "^3.6.2",
+    "@react-types/checkbox": "^3.5.1",
+    "@react-types/shared": "^3.20.0",
+    "@spectrum-icons/ui": "^3.5.5",
     "@swc/helpers": "^0.5.0"
   },
   "devDependencies": {
@@ -59,5 +59,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "504e40e0a50c1b20ed0fb3ba9561a263b6d5565e"
+  "gitHead": "54fbaa67cc56867506811819fef765546d403253"
 }

package/src/Checkbox.tsx

@@ -34,6 +34,7 @@ function Checkbox(props: SpectrumCheckboxProps, ref: FocusableRef<HTMLLabelEleme
     autoFocus,
     children,
     validationState,
+    isInvalid,
     ...otherProps
   } = props;
   let {styleProps} = useStyleProps(otherProps);
@@ -57,7 +58,8 @@ function Checkbox(props: SpectrumCheckboxProps, ref: FocusableRef<HTMLLabelEleme
       // Only pass isRequired and validationState to react-aria if they came from
       // the props for this individual checkbox, and not from the group via context.
       isRequired: originalProps.isRequired,
-      validationState: originalProps.validationState
+      validationState: originalProps.validationState,
+      isInvalid: originalProps.isInvalid
     }, groupState, inputRef)
     // eslint-disable-next-line react-hooks/rules-of-hooks
     : useCheckbox(props, useToggleState(props), inputRef);
@@ -90,7 +92,7 @@ function Checkbox(props: SpectrumCheckboxProps, ref: FocusableRef<HTMLLabelEleme
             'is-checked': inputProps.checked,
             'is-indeterminate': isIndeterminate,
             'spectrum-Checkbox--quiet': !isEmphasized,
-            'is-invalid': validationState === 'invalid',
+            'is-invalid': isInvalid || validationState === 'invalid',
             'is-disabled': isDisabled,
             'is-hovered': isHovered
           },

package/src/CheckboxGroup.tsx

@@ -28,8 +28,7 @@ function CheckboxGroup(props: SpectrumCheckboxGroupProps, ref: DOMRef<HTMLDivEle
   let {
     isEmphasized,
     children,
-    orientation = 'vertical',
-    validationState
+    orientation = 'vertical'
   } = props;
   let domRef = useDOMRef(ref);
   let state = useCheckboxGroupState(props);
@@ -56,7 +55,7 @@ function CheckboxGroup(props: SpectrumCheckboxGroupProps, ref: DOMRef<HTMLDivEle
             }
           )
         }>
-        <Provider isEmphasized={isEmphasized} validationState={validationState}>
+        <Provider isEmphasized={isEmphasized} validationState={state.isInvalid ? 'invalid' : undefined}>
           <CheckboxGroupContext.Provider value={state}>
             {children}
           </CheckboxGroupContext.Provider>