From 1d8e40bd2750d164f10ccd10e171da3bbad4cf7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Wed, 29 Jul 2020 16:25:51 +0200
Subject: [PATCH 1/6] Introduce useCheckboxGroup, useCheckboxGroupState &
 useGroupedCheckbox hooks

---
 packages/@react-aria/checkbox/package.json    |   2 +
 packages/@react-aria/checkbox/src/index.ts    |   2 +
 .../checkbox/src/useCheckboxGroup.ts          |  62 ++++++
 .../checkbox/src/useGroupedCheckbox.ts        |  40 ++++
 .../checkbox/test/useCheckboxGroup.test.tsx   |  71 ++++++
 packages/@react-stately/toggle/src/index.ts   |   1 +
 .../toggle/src/useCheckboxGroupState.ts       |  86 ++++++++
 .../test/useCheckboxGroupState.test.tsx       | 208 ++++++++++++++++++
 packages/@react-types/checkbox/src/index.d.ts |  22 +-
 9 files changed, 493 insertions(+), 1 deletion(-)
 create mode 100644 packages/@react-aria/checkbox/src/useCheckboxGroup.ts
 create mode 100644 packages/@react-aria/checkbox/src/useGroupedCheckbox.ts
 create mode 100644 packages/@react-aria/checkbox/test/useCheckboxGroup.test.tsx
 create mode 100644 packages/@react-stately/toggle/src/useCheckboxGroupState.ts
 create mode 100644 packages/@react-stately/toggle/test/useCheckboxGroupState.test.tsx

diff --git a/packages/@react-aria/checkbox/package.json b/packages/@react-aria/checkbox/package.json
index 7f31bff075a..e23f6b576a3 100644
--- a/packages/@react-aria/checkbox/package.json
+++ b/packages/@react-aria/checkbox/package.json
@@ -18,7 +18,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
+    "@react-aria/label": "^3.1.0",
     "@react-aria/toggle": "^3.1.0",
+    "@react-aria/utils": "^3.1.0",
     "@react-stately/toggle": "^3.1.0",
     "@react-types/checkbox": "^3.1.0"
   },
diff --git a/packages/@react-aria/checkbox/src/index.ts b/packages/@react-aria/checkbox/src/index.ts
index 38cda41ccc4..e8d445dafad 100644
--- a/packages/@react-aria/checkbox/src/index.ts
+++ b/packages/@react-aria/checkbox/src/index.ts
@@ -11,3 +11,5 @@
  */
 
 export * from './useCheckbox';
+export * from './useCheckboxGroup';
+export * from './useGroupedCheckbox';
diff --git a/packages/@react-aria/checkbox/src/useCheckboxGroup.ts b/packages/@react-aria/checkbox/src/useCheckboxGroup.ts
new file mode 100644
index 00000000000..a38ef919a10
--- /dev/null
+++ b/packages/@react-aria/checkbox/src/useCheckboxGroup.ts
@@ -0,0 +1,62 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {AriaCheckboxGroupProps} from '@react-types/checkbox';
+import {filterDOMProps, mergeProps} from '@react-aria/utils';
+import {HTMLAttributes} from 'react';
+import {useLabel} from '@react-aria/label';
+
+interface CheckboxGroupAria {
+  /** Props for the checkbox group wrapper element. */
+  checkboxGroupProps: HTMLAttributes<HTMLElement>,
+  /** Props for the checkbox group's visible label (if any). */
+  labelProps: HTMLAttributes<HTMLElement>
+}
+
+/**
+ * Provides the behavior and accessibility implementation for a checkbox group component.
+ * Checkbox groups allow users to select multiple items from a list of options.
+ * @param props - Props for the checkbox group.
+ * @param state - State for the checkbox group, as returned by `useCheckboxGroupState`.
+ */
+export function useCheckboxGroup(props: AriaCheckboxGroupProps): CheckboxGroupAria {
+  let {
+    validationState,
+    isReadOnly,
+    isRequired,
+    isDisabled,
+    orientation = 'vertical'
+  } = props;
+
+  let {labelProps, fieldProps} = useLabel({
+    ...props,
+    // Checkbox group is not an HTML input element so it
+    // shouldn't be labeled by a <label> element.
+    labelElementType: 'span'
+  });
+
+  let domProps = filterDOMProps(props, {labelable: true});
+
+  return {
+    checkboxGroupProps: mergeProps(domProps, {
+      role: 'group',
+      'aria-invalid': validationState === 'invalid' || undefined,
+      'aria-errormessage': props['aria-errormessage'],
+      'aria-readonly': isReadOnly || undefined,
+      'aria-required': isRequired || undefined,
+      'aria-disabled': isDisabled || undefined,
+      'aria-orientation': orientation,
+      ...fieldProps
+    }),
+    labelProps
+  };
+}
diff --git a/packages/@react-aria/checkbox/src/useGroupedCheckbox.ts b/packages/@react-aria/checkbox/src/useGroupedCheckbox.ts
new file mode 100644
index 00000000000..b8d5ce6c39f
--- /dev/null
+++ b/packages/@react-aria/checkbox/src/useGroupedCheckbox.ts
@@ -0,0 +1,40 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {AriaGroupedCheckboxProps} from '@react-types/checkbox';
+import {CheckboxAria, useCheckbox} from './useCheckbox';
+import {CheckboxGroupState, useToggleState} from '@react-stately/toggle';
+import {RefObject} from 'react';
+
+/**
+ * Provides the behavior and accessibility implementation for a checkbox component contained within a checkbox group.
+ * Checkbox groups allow users to select multiple items from a list of options.
+ * @param props - Props for the checkbox.
+ * @param state - State for the checkbox, as returned by `useCheckboxGroupState`.
+ * @param inputRef - A ref for the HTML input element.
+ */
+export function useGroupedCheckbox(props: AriaGroupedCheckboxProps, state: CheckboxGroupState, inputRef: RefObject<HTMLInputElement>): CheckboxAria {
+  const toggleState = useToggleState({
+    isReadOnly: props.isReadOnly,
+    isSelected: state.value.includes(props.value),
+    onChange(isSelected) {
+      if (isSelected) {
+        state.addValue(props.value);
+      } else {
+        state.removeValue(props.value);
+      }
+
+      props.onChange(isSelected);
+    }
+  });
+  return useCheckbox(props, toggleState, inputRef);
+}
diff --git a/packages/@react-aria/checkbox/test/useCheckboxGroup.test.tsx b/packages/@react-aria/checkbox/test/useCheckboxGroup.test.tsx
new file mode 100644
index 00000000000..7286ee0c921
--- /dev/null
+++ b/packages/@react-aria/checkbox/test/useCheckboxGroup.test.tsx
@@ -0,0 +1,71 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {CheckboxGroupState, useCheckboxGroupState} from '@react-stately/toggle';
+import React, {useRef} from 'react';
+import {render} from '@testing-library/react';
+import {useCheckboxGroup, useGroupedCheckbox} from '../';
+
+interface CheckboxProps {
+  checkboxGroupState: CheckboxGroupState,
+  index: number,
+  value?: string,
+  children?: string
+}
+interface CheckboxGroupsProps {
+  checkboxProps?: CheckboxProps[],
+  label?: string
+}
+
+const checkboxDefaults = [
+  {value: 'foo', children: 'Foo'},
+  {value: 'bar', children: 'Bar'},
+  {value: 'xyz', children: 'Xyz'}
+];
+
+function Checkbox({checkboxGroupState, index, ...props}: CheckboxProps) {
+  const finalProps = {
+    ...checkboxDefaults[index],
+    ...props
+  };
+  const ref = useRef<HTMLInputElement>();
+  const {children} = finalProps;
+  const {inputProps} = useGroupedCheckbox(finalProps, checkboxGroupState, ref);
+  return <label>{children}<input ref={ref} {...inputProps} /></label>;
+}
+
+function CheckboxGroup({
+  label = 'Legend',
+  checkboxProps = [],
+  ...props
+}: CheckboxGroupsProps) {
+  const state = useCheckboxGroupState();
+  const {checkboxGroupProps, labelProps} = useCheckboxGroup({
+    ...props,
+    label
+  });
+  return (
+    <div {...checkboxGroupProps}>
+      <span {...labelProps}>{label}</span>
+      <Checkbox checkboxGroupState={state} index={0} {...checkboxProps[0]} />
+      <Checkbox checkboxGroupState={state} index={1} {...checkboxProps[1]} />
+      <Checkbox checkboxGroupState={state} index={2} {...checkboxProps[2]} />
+    </div>
+  );
+}
+
+describe('useCheckboxGroup', () => {
+  it('should return role="group"', () => {
+    let {getByRole} = render(<CheckboxGroup />);
+    expect(getByRole('group', {exact: true})).toBeTruthy();
+  });
+});
diff --git a/packages/@react-stately/toggle/src/index.ts b/packages/@react-stately/toggle/src/index.ts
index a269b3366c7..f67e9454890 100644
--- a/packages/@react-stately/toggle/src/index.ts
+++ b/packages/@react-stately/toggle/src/index.ts
@@ -10,4 +10,5 @@
  * governing permissions and limitations under the License.
  */
 
+export * from './useCheckboxGroupState';
 export * from './useToggleState';
diff --git a/packages/@react-stately/toggle/src/useCheckboxGroupState.ts b/packages/@react-stately/toggle/src/useCheckboxGroupState.ts
new file mode 100644
index 00000000000..7ab51f651e9
--- /dev/null
+++ b/packages/@react-stately/toggle/src/useCheckboxGroupState.ts
@@ -0,0 +1,86 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {CheckboxGroupProps} from '@react-types/checkbox';
+import {useControlledState} from '@react-stately/utils';
+import {useMemo} from 'react';
+
+export interface CheckboxGroupState {
+  /** The name for the group, used for native form submission. */
+  readonly name: string,
+
+  /** Current selected values. */
+  readonly value: readonly string[],
+
+  /** Sets the selected values. */
+  setValue(value: string[]): void,
+
+  /** Adds a value to the set of selected values. */
+  addValue(value: string): void,
+
+  /** Removes a value from the set of selected values. */
+  removeValue(value: string): void,
+
+  /** Toggles a value in the set of selected values. */
+  toggleValue(value: string): void
+}
+
+let instance = Math.round(Math.random() * 10000000000);
+let i = 0;
+
+/**
+ * Provides state management for a checkbox group component. Provides a name for the group,
+ * and manages selection and focus state.
+ */
+export function useCheckboxGroupState(props: CheckboxGroupProps = {}): CheckboxGroupState {
+  let name = useMemo(() => props.name || `checkbox-group-${instance}-${++i}`, [props.name]);
+  let [selectedValue, setValue] = useControlledState(props.value, props.defaultValue || [], props.onChange);
+
+  return {
+    name,
+    value: selectedValue,
+    setValue,
+    addValue(value) {
+      if (props.isReadOnly) {
+        return;
+      }
+      setValue(values => {
+        if (!values.includes(value)) {
+          return values.concat(value);
+        }
+        return values;
+      });
+    },
+    removeValue(value) {
+      if (props.isReadOnly) {
+        return;
+      }
+      setValue(values => {
+        if (values.includes(value)) {
+          return values.filter(existingValue => existingValue !== value);
+        }
+        return values;
+      });
+    },
+    toggleValue(value) {
+      if (props.isReadOnly) {
+        return;
+      }
+      setValue(values => {
+        if (values.includes(value)) {
+          return values.filter(existingValue => existingValue !== value);
+        }
+        return values.concat(value);
+      });
+    }
+  };
+}
diff --git a/packages/@react-stately/toggle/test/useCheckboxGroupState.test.tsx b/packages/@react-stately/toggle/test/useCheckboxGroupState.test.tsx
new file mode 100644
index 00000000000..dda007f7ebe
--- /dev/null
+++ b/packages/@react-stately/toggle/test/useCheckboxGroupState.test.tsx
@@ -0,0 +1,208 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {act, render} from '@testing-library/react';
+import React from 'react';
+import {useCheckboxGroupState} from '../';
+
+describe('useCheckboxGroupState', () => {
+  it('should return basic interface when no props are provided', () => {
+    function Test() {
+      const state = useCheckboxGroupState();
+
+      expect(typeof state.name).toBe('string');
+      expect(state.value).toEqual([]);
+      expect(typeof state.setValue).toBe('function');
+      expect(typeof state.addValue).toBe('function');
+      expect(typeof state.removeValue).toBe('function');
+      expect(typeof state.toggleValue).toBe('function');
+
+      return null;
+    }
+    render(<Test />);
+  });
+
+  it('should return the same `name` that has been provided', () => {
+    function Test() {
+      const state = useCheckboxGroupState({name: 'foo'});
+
+      expect(state.name).toBe('foo');
+
+      return null;
+    }
+    render(<Test />);
+  });
+
+  it('should be possible to provide the initial value', () => {
+    function Test() {
+      const state = useCheckboxGroupState({value: ['foo', 'bar']});
+
+      expect(state.value).toEqual(['foo', 'bar']);
+
+      return null;
+    }
+    render(<Test />);
+  });
+
+  it('should be possible to provide a default value', () => {
+    function Test() {
+      const state = useCheckboxGroupState({defaultValue: ['foo', 'bar']});
+
+      expect(state.value).toEqual(['foo', 'bar']);
+
+      return null;
+    }
+    render(<Test />);
+  });
+
+  it('should be possible to control the value', () => {
+    function Test({value}: { value: string[] }) {
+      const state = useCheckboxGroupState({value});
+      return <>{state.value.join(', ')}</>;
+    }
+    const {container, rerender} = render(<Test value={['foo']} />);
+
+    expect(container.textContent).toBe('foo');
+
+    rerender(<Test value={['foo', 'bar']} />);
+
+    expect(container.textContent).toBe('foo, bar');
+  });
+
+  it('should be possible to have the value uncontrolled', () => {
+    let setValue: (value: string[]) => void;
+    function Test() {
+      const state = useCheckboxGroupState({defaultValue: ['foo']});
+      setValue = state.setValue;
+      return <>{state.value.join(', ')}</>;
+    }
+    const {container} = render(<Test />);
+
+    expect(container.textContent).toBe('foo');
+
+    act(() => {
+      setValue(['foo', 'bar']);
+    });
+
+    expect(container.textContent).toBe('foo, bar');
+  });
+
+  it('should call the provided `onChange` callback whenever value changes', () => {
+    const onChangeSpy = jest.fn();
+    const nextValue = ['foo', 'bar'];
+    let setValue: (value: string[]) => void;
+
+    function Test() {
+      const state = useCheckboxGroupState({defaultValue: ['foo'], onChange: onChangeSpy});
+      setValue = state.setValue;
+      return <>{state.value.join(', ')}</>;
+    }
+
+    render(<Test />);
+
+    act(() => {
+      setValue(nextValue);
+    });
+
+    expect(onChangeSpy).toHaveBeenCalledWith(nextValue);
+  });
+
+  it('should be possible to add a value using `addValue`', () => {
+    let addValue: (value: string) => void;
+    function Test() {
+      const state = useCheckboxGroupState({defaultValue: ['foo']});
+      addValue = state.addValue;
+      return <>{state.value.join(', ')}</>;
+    }
+    const {container} = render(<Test />);
+
+    act(() => {
+      addValue('baz');
+    });
+
+    expect(container.textContent).toBe('foo, baz');
+  });
+
+  it('should not add the same value multiple times when using `addValue`', () => {
+    let addValue: (value: string) => void;
+    function Test() {
+      const state = useCheckboxGroupState({defaultValue: ['foo']});
+      addValue = state.addValue;
+      return <>{state.value.join(', ')}</>;
+    }
+    const {container} = render(<Test />);
+
+    act(() => {
+      addValue('baz');
+      addValue('baz');
+      addValue('baz');
+      addValue('baz');
+    });
+
+    expect(container.textContent).toBe('foo, baz');
+  });
+
+  it('should be possible to remove a value using `removeValue`', () => {
+    let removeValue: (value: string) => void;
+    function Test() {
+      const state = useCheckboxGroupState({defaultValue: ['foo', 'qwe']});
+      removeValue = state.removeValue;
+      return <>{state.value.join(', ')}</>;
+    }
+    const {container} = render(<Test />);
+
+    act(() => {
+      removeValue('foo');
+    });
+
+    expect(container.textContent).toBe('qwe');
+  });
+
+  it('should be possible to add & remove value based on it being or not in the stored value using `toggleValue`', () => {
+    let toggleValue: (value: string) => void;
+    function Test() {
+      const state = useCheckboxGroupState({defaultValue: ['foo', 'qwe']});
+      toggleValue = state.toggleValue;
+      return <>{state.value.join(', ')}</>;
+    }
+    const {container} = render(<Test />);
+
+    act(() => {
+      toggleValue('foo');
+    });
+
+    expect(container.textContent).toBe('qwe');
+
+    act(() => {
+      toggleValue('foo');
+    });
+
+    expect(container.textContent).toBe('qwe, foo');
+  });
+
+  it('should go back to the initial value after `toggleState` being called twice with the same value synchronously', () => {
+    let toggleValue: (value: string) => void;
+    function Test() {
+      const state = useCheckboxGroupState({defaultValue: ['foo', 'qwe']});
+      toggleValue = state.toggleValue;
+      return <>{state.value.join(', ')}</>;
+    }
+    const {container} = render(<Test />);
+
+    act(() => {
+      toggleValue('qwe');
+      toggleValue('qwe');
+    });
+
+    expect(container.textContent).toBe('foo, qwe');
+  });
+});
diff --git a/packages/@react-types/checkbox/src/index.d.ts b/packages/@react-types/checkbox/src/index.d.ts
index d5e766db5c3..c897b8dc1c0 100644
--- a/packages/@react-types/checkbox/src/index.d.ts
+++ b/packages/@react-types/checkbox/src/index.d.ts
@@ -13,11 +13,15 @@
 import {
   AriaLabelingProps,
   AriaValidationProps,
+  DOMProps,
   FocusableDOMProps,
   FocusableProps,
   InputBase,
+  LabelableProps,
+  Orientation,
   StyleProps,
-  Validation
+  Validation,
+  ValueBase
 } from '@react-types/shared';
 import {ReactNode} from 'react';
 
@@ -55,6 +59,18 @@ export interface AriaToggleProps extends ToggleProps, FocusableDOMProps, AriaLab
   'aria-controls'?: string
 }
 
+export interface CheckboxGroupProps extends ValueBase<string[]>, InputBase, Validation, LabelableProps {
+  /**
+   * The axis the Checkbox Button(s) should align with.
+   * @default 'vertical'
+   */
+  orientation?: Orientation,
+  /**
+   * The name of the CheckboxGroup, used when submitting an HTML form.
+   */
+  name?: string
+}
+
 export interface CheckboxProps extends ToggleProps {
   /**
    * Indeterminism is presentational only.
@@ -65,6 +81,10 @@ export interface CheckboxProps extends ToggleProps {
 
 export interface AriaCheckboxProps extends CheckboxProps, AriaToggleProps {}
 
+export interface AriaCheckboxGroupProps extends CheckboxGroupProps, DOMProps, AriaLabelingProps, AriaValidationProps {}
+
+export interface AriaGroupedCheckboxProps extends Omit<AriaCheckboxProps, 'isSelected' | 'defaultSelected'> {}
+
 export interface SpectrumCheckboxProps extends AriaCheckboxProps, StyleProps {
   /**
    * This prop sets the emphasized style which provides visual prominence.

From b811982c60a48aeb002576bed99c678c581bea70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Mon, 3 Aug 2020 13:42:04 +0200
Subject: [PATCH 2/6] Removed invalid aria attributes from useCheckboxGroup

---
 .../@react-aria/checkbox/src/useCheckboxGroup.ts    | 13 +------------
 packages/@react-types/checkbox/src/index.d.ts       | 12 +++++-------
 2 files changed, 6 insertions(+), 19 deletions(-)

diff --git a/packages/@react-aria/checkbox/src/useCheckboxGroup.ts b/packages/@react-aria/checkbox/src/useCheckboxGroup.ts
index a38ef919a10..28be095a42e 100644
--- a/packages/@react-aria/checkbox/src/useCheckboxGroup.ts
+++ b/packages/@react-aria/checkbox/src/useCheckboxGroup.ts
@@ -29,13 +29,7 @@ interface CheckboxGroupAria {
  * @param state - State for the checkbox group, as returned by `useCheckboxGroupState`.
  */
 export function useCheckboxGroup(props: AriaCheckboxGroupProps): CheckboxGroupAria {
-  let {
-    validationState,
-    isReadOnly,
-    isRequired,
-    isDisabled,
-    orientation = 'vertical'
-  } = props;
+  let {isDisabled} = props;
 
   let {labelProps, fieldProps} = useLabel({
     ...props,
@@ -49,12 +43,7 @@ export function useCheckboxGroup(props: AriaCheckboxGroupProps): CheckboxGroupAr
   return {
     checkboxGroupProps: mergeProps(domProps, {
       role: 'group',
-      'aria-invalid': validationState === 'invalid' || undefined,
-      'aria-errormessage': props['aria-errormessage'],
-      'aria-readonly': isReadOnly || undefined,
-      'aria-required': isRequired || undefined,
       'aria-disabled': isDisabled || undefined,
-      'aria-orientation': orientation,
       ...fieldProps
     }),
     labelProps
diff --git a/packages/@react-types/checkbox/src/index.d.ts b/packages/@react-types/checkbox/src/index.d.ts
index c897b8dc1c0..0d502210bc1 100644
--- a/packages/@react-types/checkbox/src/index.d.ts
+++ b/packages/@react-types/checkbox/src/index.d.ts
@@ -18,7 +18,6 @@ import {
   FocusableProps,
   InputBase,
   LabelableProps,
-  Orientation,
   StyleProps,
   Validation,
   ValueBase
@@ -59,16 +58,15 @@ export interface AriaToggleProps extends ToggleProps, FocusableDOMProps, AriaLab
   'aria-controls'?: string
 }
 
-export interface CheckboxGroupProps extends ValueBase<string[]>, InputBase, Validation, LabelableProps {
-  /**
-   * The axis the Checkbox Button(s) should align with.
-   * @default 'vertical'
-   */
-  orientation?: Orientation,
+export interface CheckboxGroupProps extends ValueBase<string[]>, LabelableProps {
   /**
    * The name of the CheckboxGroup, used when submitting an HTML form.
    */
   name?: string
+  /**
+   * Whether the checkbox group is disabled.
+   */
+  isDisabled?: boolean
 }
 
 export interface CheckboxProps extends ToggleProps {

From 500d35a8936316248e5c7eea68c28200b4ca44e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Mon, 3 Aug 2020 13:57:29 +0200
Subject: [PATCH 3/6] Refactor useGroupedCheckbox to
 CheckboxGroupState['getCheckboxState']

---
 packages/@react-aria/checkbox/src/index.ts    |   1 -
 .../checkbox/src/useGroupedCheckbox.ts        |  40 ----
 .../checkbox/test/useCheckboxGroup.test.tsx   | 221 ++++++++++++++----
 .../toggle/src/useCheckboxGroupState.ts       |  33 ++-
 .../test/useCheckboxGroupState.test.tsx       | 132 ++++++++++-
 packages/@react-types/checkbox/src/index.d.ts |   8 +-
 6 files changed, 340 insertions(+), 95 deletions(-)
 delete mode 100644 packages/@react-aria/checkbox/src/useGroupedCheckbox.ts

diff --git a/packages/@react-aria/checkbox/src/index.ts b/packages/@react-aria/checkbox/src/index.ts
index e8d445dafad..4b60f3f351d 100644
--- a/packages/@react-aria/checkbox/src/index.ts
+++ b/packages/@react-aria/checkbox/src/index.ts
@@ -12,4 +12,3 @@
 
 export * from './useCheckbox';
 export * from './useCheckboxGroup';
-export * from './useGroupedCheckbox';
diff --git a/packages/@react-aria/checkbox/src/useGroupedCheckbox.ts b/packages/@react-aria/checkbox/src/useGroupedCheckbox.ts
deleted file mode 100644
index b8d5ce6c39f..00000000000
--- a/packages/@react-aria/checkbox/src/useGroupedCheckbox.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {AriaGroupedCheckboxProps} from '@react-types/checkbox';
-import {CheckboxAria, useCheckbox} from './useCheckbox';
-import {CheckboxGroupState, useToggleState} from '@react-stately/toggle';
-import {RefObject} from 'react';
-
-/**
- * Provides the behavior and accessibility implementation for a checkbox component contained within a checkbox group.
- * Checkbox groups allow users to select multiple items from a list of options.
- * @param props - Props for the checkbox.
- * @param state - State for the checkbox, as returned by `useCheckboxGroupState`.
- * @param inputRef - A ref for the HTML input element.
- */
-export function useGroupedCheckbox(props: AriaGroupedCheckboxProps, state: CheckboxGroupState, inputRef: RefObject<HTMLInputElement>): CheckboxAria {
-  const toggleState = useToggleState({
-    isReadOnly: props.isReadOnly,
-    isSelected: state.value.includes(props.value),
-    onChange(isSelected) {
-      if (isSelected) {
-        state.addValue(props.value);
-      } else {
-        state.removeValue(props.value);
-      }
-
-      props.onChange(isSelected);
-    }
-  });
-  return useCheckbox(props, toggleState, inputRef);
-}
diff --git a/packages/@react-aria/checkbox/test/useCheckboxGroup.test.tsx b/packages/@react-aria/checkbox/test/useCheckboxGroup.test.tsx
index 7286ee0c921..1ad90942c05 100644
--- a/packages/@react-aria/checkbox/test/useCheckboxGroup.test.tsx
+++ b/packages/@react-aria/checkbox/test/useCheckboxGroup.test.tsx
@@ -10,62 +10,197 @@
  * governing permissions and limitations under the License.
  */
 
+import {act, render} from '@testing-library/react';
+import {AriaCheckboxGroupProps, AriaCheckboxProps} from '@react-types/checkbox';
 import {CheckboxGroupState, useCheckboxGroupState} from '@react-stately/toggle';
 import React, {useRef} from 'react';
-import {render} from '@testing-library/react';
-import {useCheckboxGroup, useGroupedCheckbox} from '../';
-
-interface CheckboxProps {
-  checkboxGroupState: CheckboxGroupState,
-  index: number,
-  value?: string,
-  children?: string
-}
-interface CheckboxGroupsProps {
-  checkboxProps?: CheckboxProps[],
-  label?: string
-}
+import {useCheckbox, useCheckboxGroup} from '../';
+import userEvent from '@testing-library/user-event';
 
-const checkboxDefaults = [
-  {value: 'foo', children: 'Foo'},
-  {value: 'bar', children: 'Bar'},
-  {value: 'xyz', children: 'Xyz'}
-];
-
-function Checkbox({checkboxGroupState, index, ...props}: CheckboxProps) {
-  const finalProps = {
-    ...checkboxDefaults[index],
-    ...props
-  };
+function Checkbox({checkboxGroupState, ...props}: AriaCheckboxProps & { checkboxGroupState: CheckboxGroupState }) {
   const ref = useRef<HTMLInputElement>();
-  const {children} = finalProps;
-  const {inputProps} = useGroupedCheckbox(finalProps, checkboxGroupState, ref);
+  const {children} = props;
+  const {inputProps} = useCheckbox({...props, name: checkboxGroupState.name}, checkboxGroupState.getCheckboxState(props), ref);
   return <label>{children}<input ref={ref} {...inputProps} /></label>;
 }
 
-function CheckboxGroup({
-  label = 'Legend',
-  checkboxProps = [],
-  ...props
-}: CheckboxGroupsProps) {
-  const state = useCheckboxGroupState();
-  const {checkboxGroupProps, labelProps} = useCheckboxGroup({
-    ...props,
-    label
-  });
+function CheckboxGroup({groupProps, checkboxProps}: {groupProps: AriaCheckboxGroupProps, checkboxProps: AriaCheckboxProps[]}) {
+  const state = useCheckboxGroupState(groupProps);
+  const {checkboxGroupProps, labelProps} = useCheckboxGroup(groupProps);
   return (
     <div {...checkboxGroupProps}>
-      <span {...labelProps}>{label}</span>
-      <Checkbox checkboxGroupState={state} index={0} {...checkboxProps[0]} />
-      <Checkbox checkboxGroupState={state} index={1} {...checkboxProps[1]} />
-      <Checkbox checkboxGroupState={state} index={2} {...checkboxProps[2]} />
+      {groupProps.label && <span {...labelProps}>{groupProps.label}</span>}
+      <Checkbox checkboxGroupState={state} {...checkboxProps[0]} />
+      <Checkbox checkboxGroupState={state} {...checkboxProps[1]} />
+      <Checkbox checkboxGroupState={state} {...checkboxProps[2]} />
     </div>
   );
 }
 
 describe('useCheckboxGroup', () => {
-  it('should return role="group"', () => {
-    let {getByRole} = render(<CheckboxGroup />);
-    expect(getByRole('group', {exact: true})).toBeTruthy();
+  it('handles defaults', () => {
+    let onChangeSpy = jest.fn();
+    let {getByRole, getAllByRole, getByLabelText} = render(
+      <CheckboxGroup
+        groupProps={{label: 'Favorite Pet', onChange: onChangeSpy}}
+        checkboxProps={[
+          {value: 'dogs', children: 'Dogs'},
+          {value: 'cats', children: 'Cats'},
+          {value: 'dragons', children: 'Dragons'}
+        ]} />
+    );
+
+    let checkboxGroup = getByRole('group', {exact: true});
+    let checkboxes = getAllByRole('checkbox') as HTMLInputElement[];
+    expect(checkboxGroup).toBeInTheDocument();
+    expect(checkboxes.length).toBe(3);
+
+    let groupName = checkboxes[0].getAttribute('name');
+    expect(checkboxes[0]).toHaveAttribute('name', groupName);
+    expect(checkboxes[1]).toHaveAttribute('name', groupName);
+    expect(checkboxes[2]).toHaveAttribute('name', groupName);
+
+    expect(checkboxes[0].value).toBe('dogs');
+    expect(checkboxes[1].value).toBe('cats');
+    expect(checkboxes[2].value).toBe('dragons');
+
+    expect(checkboxes[0].checked).toBe(false);
+    expect(checkboxes[1].checked).toBe(false);
+    expect(checkboxes[2].checked).toBe(false);
+
+    let dragons = getByLabelText('Dragons');
+    act(() => {userEvent.click(dragons);});
+    expect(onChangeSpy).toHaveBeenCalledTimes(1);
+    expect(onChangeSpy).toHaveBeenCalledWith(['dragons']);
+
+    expect(checkboxes[0].checked).toBe(false);
+    expect(checkboxes[1].checked).toBe(false);
+    expect(checkboxes[2].checked).toBe(true);
+  });
+
+  it('can have a default value', () => {
+    let {getByLabelText} = render(
+      <CheckboxGroup
+        groupProps={{label: 'Favorite Pet', value: ['cats']}}
+        checkboxProps={[
+          {value: 'dogs', children: 'Dogs'},
+          {value: 'cats', children: 'Cats'},
+          {value: 'dragons', children: 'Dragons'}
+        ]} />
+    );
+
+    expect((getByLabelText('Cats') as HTMLInputElement).checked).toBe(true);
+  });
+
+  it('name can be controlled', () => {
+    let {getAllByRole} = render(
+      <CheckboxGroup
+        groupProps={{name: 'awesome-react-aria', label: 'Favorite Pet'}}
+        checkboxProps={[
+          {value: 'dogs', children: 'Dogs'},
+          {value: 'cats', children: 'Cats'},
+          {value: 'dragons', children: 'Dragons'}
+        ]} />
+    );
+
+    let checkboxes = getAllByRole('checkbox') as HTMLInputElement[];
+
+    expect(checkboxes[0]).toHaveAttribute('name', 'awesome-react-aria');
+    expect(checkboxes[1]).toHaveAttribute('name', 'awesome-react-aria');
+    expect(checkboxes[2]).toHaveAttribute('name', 'awesome-react-aria');
+  });
+
+  it('supports labeling', () => {
+    let {getByRole} = render(
+      <CheckboxGroup
+        groupProps={{label: 'Favorite Pet'}}
+        checkboxProps={[
+          {value: 'dogs', children: 'Dogs'},
+          {value: 'cats', children: 'Cats'},
+          {value: 'dragons', children: 'Dragons'}
+        ]} />
+    );
+    let checkboxGroup = getByRole('group', {exact: true});
+
+    let labelId = checkboxGroup.getAttribute('aria-labelledby');
+    expect(labelId).toBeDefined();
+    let label = document.getElementById(labelId);
+    expect(label).toHaveTextContent('Favorite Pet');
+  });
+
+  it('supports aria-label', () => {
+    let {getByRole} = render(
+      <CheckboxGroup
+        groupProps={{'aria-label': 'My Favorite Pet'}}
+        checkboxProps={[
+          {value: 'dogs', children: 'Dogs'},
+          {value: 'cats', children: 'Cats'},
+          {value: 'dragons', children: 'Dragons'}
+        ]} />
+    );
+    let checkboxGroup = getByRole('group', {exact: true});
+
+    expect(checkboxGroup).toHaveAttribute('aria-label', 'My Favorite Pet');
+  });
+
+  it('supports custom props', () => {
+    const groupProps = {label: 'Favorite Pet', 'data-testid': 'favorite-pet'};
+    let {getByRole} = render(
+      <CheckboxGroup
+        groupProps={groupProps}
+        checkboxProps={[
+          {value: 'dogs', children: 'Dogs'},
+          {value: 'cats', children: 'Cats'},
+          {value: 'dragons', children: 'Dragons'}
+        ]} />
+    );
+    let checkboxGroup = getByRole('group', {exact: true});
+
+    expect(checkboxGroup).toHaveAttribute('data-testid', 'favorite-pet');
+  });
+
+  it('sets aria-disabled when isDisabled is true', () => {
+    let {getByRole} = render(
+      <CheckboxGroup
+        groupProps={{label: 'Favorite Pet', isDisabled: true}}
+        checkboxProps={[
+          {value: 'dogs', children: 'Dogs'},
+          {value: 'cats', children: 'Cats'},
+          {value: 'dragons', children: 'Dragons'}
+        ]} />
+    );
+    let checkboxGroup = getByRole('group', {exact: true});
+
+    expect(checkboxGroup).toHaveAttribute('aria-disabled', 'true');
+  });
+
+  it('doesn\'t set aria-disabled by default', () => {
+    let {getByRole} = render(
+      <CheckboxGroup
+        groupProps={{label: 'Favorite Pet'}}
+        checkboxProps={[
+          {value: 'dogs', children: 'Dogs'},
+          {value: 'cats', children: 'Cats'},
+          {value: 'dragons', children: 'Dragons'}
+        ]} />
+    );
+    let checkboxGroup = getByRole('group', {exact: true});
+
+    expect(checkboxGroup).not.toHaveAttribute('aria-disabled');
+  });
+
+  it('doesn\'t set aria-disabled when isDisabled is false', () => {
+    let {getByRole} = render(
+      <CheckboxGroup
+        groupProps={{label: 'Favorite Pet', isDisabled: false}}
+        checkboxProps={[
+          {value: 'dogs', children: 'Dogs'},
+          {value: 'cats', children: 'Cats'},
+          {value: 'dragons', children: 'Dragons'}
+        ]} />
+    );
+    let checkboxGroup = getByRole('group', {exact: true});
+
+    expect(checkboxGroup).not.toHaveAttribute('aria-disabled');
   });
 });
diff --git a/packages/@react-stately/toggle/src/useCheckboxGroupState.ts b/packages/@react-stately/toggle/src/useCheckboxGroupState.ts
index 7ab51f651e9..c5d40246703 100644
--- a/packages/@react-stately/toggle/src/useCheckboxGroupState.ts
+++ b/packages/@react-stately/toggle/src/useCheckboxGroupState.ts
@@ -10,7 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {CheckboxGroupProps} from '@react-types/checkbox';
+import {CheckboxGroupProps, ToggleProps} from '@react-types/checkbox';
+import {ToggleState} from './useToggleState';
 import {useControlledState} from '@react-stately/utils';
 import {useMemo} from 'react';
 
@@ -31,7 +32,10 @@ export interface CheckboxGroupState {
   removeValue(value: string): void,
 
   /** Toggles a value in the set of selected values. */
-  toggleValue(value: string): void
+  toggleValue(value: string): void,
+
+  /** Gets checkbox state for a given checkbox. */
+  getCheckboxState(value: ToggleProps): ToggleState
 }
 
 let instance = Math.round(Math.random() * 10000000000);
@@ -45,7 +49,7 @@ export function useCheckboxGroupState(props: CheckboxGroupProps = {}): CheckboxG
   let name = useMemo(() => props.name || `checkbox-group-${instance}-${++i}`, [props.name]);
   let [selectedValue, setValue] = useControlledState(props.value, props.defaultValue || [], props.onChange);
 
-  return {
+  const state: CheckboxGroupState = {
     name,
     value: selectedValue,
     setValue,
@@ -81,6 +85,29 @@ export function useCheckboxGroupState(props: CheckboxGroupProps = {}): CheckboxG
         }
         return values.concat(value);
       });
+    },
+    getCheckboxState(props) {
+      const {value, onChange, isReadOnly} = props;
+      return {
+        isSelected: state.value.includes(value),
+        setSelected(isSelected) {
+          if (isReadOnly) {
+            return;
+          }
+
+          if (isSelected) {
+            state.addValue(value);
+          } else {
+            state.removeValue(value);
+          }
+
+          if (onChange) {
+            onChange(isSelected);
+          }
+        }
+      };
     }
   };
+
+  return state;
 }
diff --git a/packages/@react-stately/toggle/test/useCheckboxGroupState.test.tsx b/packages/@react-stately/toggle/test/useCheckboxGroupState.test.tsx
index dda007f7ebe..3db81c6713e 100644
--- a/packages/@react-stately/toggle/test/useCheckboxGroupState.test.tsx
+++ b/packages/@react-stately/toggle/test/useCheckboxGroupState.test.tsx
@@ -25,6 +25,20 @@ describe('useCheckboxGroupState', () => {
       expect(typeof state.addValue).toBe('function');
       expect(typeof state.removeValue).toBe('function');
       expect(typeof state.toggleValue).toBe('function');
+      expect(typeof state.getCheckboxState).toBe('function');
+
+      return null;
+    }
+    render(<Test />);
+  });
+
+  it('should return toggle state interface from `getCheckboxState`', () => {
+    function Test() {
+      const state = useCheckboxGroupState();
+      const checkboxState = state.getCheckboxState({value: 'test'});
+
+      expect(checkboxState.isSelected).toBe(false);
+      expect(typeof checkboxState.setSelected).toBe('function');
 
       return null;
     }
@@ -65,7 +79,7 @@ describe('useCheckboxGroupState', () => {
   });
 
   it('should be possible to control the value', () => {
-    function Test({value}: { value: string[] }) {
+    function Test({value}: {value: string[]}) {
       const state = useCheckboxGroupState({value});
       return <>{state.value.join(', ')}</>;
     }
@@ -205,4 +219,120 @@ describe('useCheckboxGroupState', () => {
 
     expect(container.textContent).toBe('foo, qwe');
   });
+
+  it('should update checkbox state after calling `setSelected` for it', () => {
+    let setSelected: (isSelected: boolean) => void;
+    let isSelected = false;
+
+    function Test() {
+      const state = useCheckboxGroupState();
+      const checkboxState = state.getCheckboxState({value: 'test'});
+      setSelected = checkboxState.setSelected;
+      isSelected = checkboxState.isSelected;
+
+      return <>{state.value.join(', ')}</>;
+    }
+
+    const {container} = render(<Test />);
+
+    expect(container.textContent).toBe('');
+    expect(isSelected).toBe(false);
+
+    act(() => {
+      setSelected(true);
+    });
+
+    expect(container.textContent).toBe('test');
+    expect(isSelected).toBe(true);
+  });
+
+  it('should not update state for readonly group', () => {
+    let addValue: (value: string) => void;
+    let removeValue: (value: string) => void;
+    let toggleValue: (value: string) => void;
+    let setSelected: (isSelected: boolean) => void;
+
+    function Test() {
+      const state = useCheckboxGroupState({isReadOnly: true});
+      addValue = state.addValue;
+      removeValue = state.removeValue;
+      toggleValue = state.toggleValue;
+
+      const checkboxState = state.getCheckboxState({value: 'test'});
+      setSelected = checkboxState.setSelected;
+
+      return <>{state.value.join(', ')}</>;
+    }
+
+    const {container} = render(<Test />);
+
+    expect(container.textContent).toBe('');
+
+    act(() => {
+      addValue('test');
+    });
+
+    expect(container.textContent).toBe('');
+
+    act(() => {
+      removeValue('test');
+    });
+
+    expect(container.textContent).toBe('');
+
+    act(() => {
+      toggleValue('test');
+    });
+
+    expect(container.textContent).toBe('');
+
+    act(() => {
+      setSelected(true);
+    });
+
+    expect(container.textContent).toBe('');
+  });
+
+  it('should not update state for readonly checkbox', () => {
+    let setSelected: (isSelected: boolean) => void;
+
+    function Test() {
+      const state = useCheckboxGroupState();
+      const checkboxState = state.getCheckboxState({value: 'test', isReadOnly: true});
+      setSelected = checkboxState.setSelected;
+
+      return <>{state.value.join(', ')}</>;
+    }
+
+    const {container} = render(<Test />);
+
+    expect(container.textContent).toBe('');
+
+    act(() => {
+      setSelected(true);
+    });
+
+    expect(container.textContent).toBe('');
+  });
+
+  it('should call `onChange` for a checkbox when updating state with `setSelected`', () => {
+    let setSelected: (isSelected: boolean) => void;
+    let onChangeSpy = jest.fn();
+
+    function Test() {
+      const state = useCheckboxGroupState();
+      const checkboxState = state.getCheckboxState({value: 'test', onChange: onChangeSpy});
+      setSelected = checkboxState.setSelected;
+
+      return null;
+    }
+
+    render(<Test />);
+
+    act(() => {
+      setSelected(true);
+    });
+
+    expect(onChangeSpy).toHaveBeenCalledWith(true);
+  });
 });
diff --git a/packages/@react-types/checkbox/src/index.d.ts b/packages/@react-types/checkbox/src/index.d.ts
index 0d502210bc1..a5388491fd3 100644
--- a/packages/@react-types/checkbox/src/index.d.ts
+++ b/packages/@react-types/checkbox/src/index.d.ts
@@ -58,15 +58,11 @@ export interface AriaToggleProps extends ToggleProps, FocusableDOMProps, AriaLab
   'aria-controls'?: string
 }
 
-export interface CheckboxGroupProps extends ValueBase<string[]>, LabelableProps {
+export interface CheckboxGroupProps extends ValueBase<string[]>, InputBase, LabelableProps {
   /**
    * The name of the CheckboxGroup, used when submitting an HTML form.
    */
   name?: string
-  /**
-   * Whether the checkbox group is disabled.
-   */
-  isDisabled?: boolean
 }
 
 export interface CheckboxProps extends ToggleProps {
@@ -81,8 +77,6 @@ export interface AriaCheckboxProps extends CheckboxProps, AriaToggleProps {}
 
 export interface AriaCheckboxGroupProps extends CheckboxGroupProps, DOMProps, AriaLabelingProps, AriaValidationProps {}
 
-export interface AriaGroupedCheckboxProps extends Omit<AriaCheckboxProps, 'isSelected' | 'defaultSelected'> {}
-
 export interface SpectrumCheckboxProps extends AriaCheckboxProps, StyleProps {
   /**
    * This prop sets the emphasized style which provides visual prominence.

From 6306a285dee3548bc0b99911e95260abe5adf22c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Mon, 3 Aug 2020 17:04:49 +0200
Subject: [PATCH 4/6] Create new @react/stately-checkbox pkg

---
 packages/@react-aria/checkbox/package.json    |  1 +
 .../checkbox/test/useCheckboxGroup.test.tsx   |  2 +-
 .../@react-spectrum/checkbox/package.json     |  1 +
 packages/@react-stately/checkbox/README.md    |  3 ++
 .../checkbox/docs/useToggleState.mdx          | 40 +++++++++++++++++++
 packages/@react-stately/checkbox/index.ts     | 13 ++++++
 packages/@react-stately/checkbox/package.json | 31 ++++++++++++++
 packages/@react-stately/checkbox/src/index.ts | 13 ++++++
 .../src/useCheckboxGroupState.ts              |  2 +-
 .../test/useCheckboxGroupState.test.tsx       |  0
 packages/@react-stately/toggle/src/index.ts   |  1 -
 11 files changed, 104 insertions(+), 3 deletions(-)
 create mode 100644 packages/@react-stately/checkbox/README.md
 create mode 100644 packages/@react-stately/checkbox/docs/useToggleState.mdx
 create mode 100644 packages/@react-stately/checkbox/index.ts
 create mode 100644 packages/@react-stately/checkbox/package.json
 create mode 100644 packages/@react-stately/checkbox/src/index.ts
 rename packages/@react-stately/{toggle => checkbox}/src/useCheckboxGroupState.ts (98%)
 rename packages/@react-stately/{toggle => checkbox}/test/useCheckboxGroupState.test.tsx (100%)

diff --git a/packages/@react-aria/checkbox/package.json b/packages/@react-aria/checkbox/package.json
index e23f6b576a3..1ed2cb40a64 100644
--- a/packages/@react-aria/checkbox/package.json
+++ b/packages/@react-aria/checkbox/package.json
@@ -21,6 +21,7 @@
     "@react-aria/label": "^3.1.0",
     "@react-aria/toggle": "^3.1.0",
     "@react-aria/utils": "^3.1.0",
+    "@react-stately/checkbox": "^3.1.0",
     "@react-stately/toggle": "^3.1.0",
     "@react-types/checkbox": "^3.1.0"
   },
diff --git a/packages/@react-aria/checkbox/test/useCheckboxGroup.test.tsx b/packages/@react-aria/checkbox/test/useCheckboxGroup.test.tsx
index 1ad90942c05..64c2985e737 100644
--- a/packages/@react-aria/checkbox/test/useCheckboxGroup.test.tsx
+++ b/packages/@react-aria/checkbox/test/useCheckboxGroup.test.tsx
@@ -12,7 +12,7 @@
 
 import {act, render} from '@testing-library/react';
 import {AriaCheckboxGroupProps, AriaCheckboxProps} from '@react-types/checkbox';
-import {CheckboxGroupState, useCheckboxGroupState} from '@react-stately/toggle';
+import {CheckboxGroupState, useCheckboxGroupState} from '@react-stately/checkbox';
 import React, {useRef} from 'react';
 import {useCheckbox, useCheckboxGroup} from '../';
 import userEvent from '@testing-library/user-event';
diff --git a/packages/@react-spectrum/checkbox/package.json b/packages/@react-spectrum/checkbox/package.json
index f12719bfad7..fc186fb0bba 100644
--- a/packages/@react-spectrum/checkbox/package.json
+++ b/packages/@react-spectrum/checkbox/package.json
@@ -36,6 +36,7 @@
     "@react-aria/focus": "^3.1.0",
     "@react-aria/interactions": "^3.1.0",
     "@react-spectrum/utils": "^3.1.0",
+    "@react-stately/checkbox": "^3.1.0",
     "@react-stately/toggle": "^3.1.0",
     "@react-types/checkbox": "^3.1.0",
     "@react-types/shared": "^3.1.0",
diff --git a/packages/@react-stately/checkbox/README.md b/packages/@react-stately/checkbox/README.md
new file mode 100644
index 00000000000..cec3b216977
--- /dev/null
+++ b/packages/@react-stately/checkbox/README.md
@@ -0,0 +1,3 @@
+# @react-stately/checkbox
+
+This package is part of [react-spectrum](https://github.com/adobe/react-spectrum). See the repo for more details.
diff --git a/packages/@react-stately/checkbox/docs/useToggleState.mdx b/packages/@react-stately/checkbox/docs/useToggleState.mdx
new file mode 100644
index 00000000000..015ff9cf7f0
--- /dev/null
+++ b/packages/@react-stately/checkbox/docs/useToggleState.mdx
@@ -0,0 +1,40 @@
+<!-- Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License. -->
+
+import {Layout} from '@react-spectrum/docs';
+export default Layout;
+
+import docs from 'docs:@react-stately/toggle';
+import {ClassAPI, HeaderInfo, TypeContext, FunctionAPI, TypeLink} from '@react-spectrum/docs';
+import packageData from '@react-stately/toggle/package.json';
+
+---
+category: Forms
+keywords: [toggle, checkbox, switch, input, state]
+---
+
+# useToggleState
+
+<p>{docs.exports.useToggleState.description}</p>
+
+<HeaderInfo
+  packageData={packageData}
+  componentNames={['useToggleState']} />
+
+## API
+
+<FunctionAPI function={docs.exports.useToggleState} links={docs.links} />
+
+## Interface
+
+<ClassAPI links={docs.links} class={docs.links[docs.exports.useToggleState.return.id]} />
+
+## Example
+
+See the docs for [useCheckbox](/react-aria/useCheckbox.html) in react-aria for an example of `useToggleState`.
diff --git a/packages/@react-stately/checkbox/index.ts b/packages/@react-stately/checkbox/index.ts
new file mode 100644
index 00000000000..1210ae1e402
--- /dev/null
+++ b/packages/@react-stately/checkbox/index.ts
@@ -0,0 +1,13 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+export * from './src';
diff --git a/packages/@react-stately/checkbox/package.json b/packages/@react-stately/checkbox/package.json
new file mode 100644
index 00000000000..8e75509bf6f
--- /dev/null
+++ b/packages/@react-stately/checkbox/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "@react-stately/checkbox",
+  "version": "3.1.0",
+  "description": "Spectrum UI components in React",
+  "license": "Apache-2.0",
+  "main": "dist/main.js",
+  "module": "dist/module.js",
+  "types": "dist/types.d.ts",
+  "source": "src/index.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/adobe/react-spectrum"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.6.2",
+    "@react-stately/toggle": "^3.1.0",
+    "@react-stately/utils": "^3.1.0",
+    "@react-types/checkbox": "^3.1.0"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/packages/@react-stately/checkbox/src/index.ts b/packages/@react-stately/checkbox/src/index.ts
new file mode 100644
index 00000000000..c12402a5b8a
--- /dev/null
+++ b/packages/@react-stately/checkbox/src/index.ts
@@ -0,0 +1,13 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+export * from './useCheckboxGroupState';
diff --git a/packages/@react-stately/toggle/src/useCheckboxGroupState.ts b/packages/@react-stately/checkbox/src/useCheckboxGroupState.ts
similarity index 98%
rename from packages/@react-stately/toggle/src/useCheckboxGroupState.ts
rename to packages/@react-stately/checkbox/src/useCheckboxGroupState.ts
index c5d40246703..0103580bd8a 100644
--- a/packages/@react-stately/toggle/src/useCheckboxGroupState.ts
+++ b/packages/@react-stately/checkbox/src/useCheckboxGroupState.ts
@@ -11,7 +11,7 @@
  */
 
 import {CheckboxGroupProps, ToggleProps} from '@react-types/checkbox';
-import {ToggleState} from './useToggleState';
+import {ToggleState} from '@react-stately/toggle';
 import {useControlledState} from '@react-stately/utils';
 import {useMemo} from 'react';
 
diff --git a/packages/@react-stately/toggle/test/useCheckboxGroupState.test.tsx b/packages/@react-stately/checkbox/test/useCheckboxGroupState.test.tsx
similarity index 100%
rename from packages/@react-stately/toggle/test/useCheckboxGroupState.test.tsx
rename to packages/@react-stately/checkbox/test/useCheckboxGroupState.test.tsx
diff --git a/packages/@react-stately/toggle/src/index.ts b/packages/@react-stately/toggle/src/index.ts
index f67e9454890..a269b3366c7 100644
--- a/packages/@react-stately/toggle/src/index.ts
+++ b/packages/@react-stately/toggle/src/index.ts
@@ -10,5 +10,4 @@
  * governing permissions and limitations under the License.
  */
 
-export * from './useCheckboxGroupState';
 export * from './useToggleState';

From 29b2c3b2a408f4e80eb09eb33a3ebddf9a0a6645 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Mon, 17 Aug 2020 17:45:08 +0200
Subject: [PATCH 5/6] Revert back to the `useGroupedCheckbox` implementation,
 just renamed to `useCheckboxGroupItem`

---
 packages/@react-aria/checkbox/src/index.ts    |   1 +
 .../checkbox/src/useCheckboxGroupItem.ts      |  43 +++++++
 .../checkbox/test/useCheckboxGroup.test.tsx   |  27 ++++-
 .../checkbox/src/useCheckboxGroupState.ts     |  29 +----
 .../test/useCheckboxGroupState.test.tsx       | 107 ++----------------
 packages/@react-types/checkbox/src/index.d.ts |   2 +
 6 files changed, 80 insertions(+), 129 deletions(-)
 create mode 100644 packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts

diff --git a/packages/@react-aria/checkbox/src/index.ts b/packages/@react-aria/checkbox/src/index.ts
index 4b60f3f351d..63e2a88c34d 100644
--- a/packages/@react-aria/checkbox/src/index.ts
+++ b/packages/@react-aria/checkbox/src/index.ts
@@ -12,3 +12,4 @@
 
 export * from './useCheckbox';
 export * from './useCheckboxGroup';
+export * from './useCheckboxGroupItem';
diff --git a/packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts b/packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts
new file mode 100644
index 00000000000..5a917eca608
--- /dev/null
+++ b/packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts
@@ -0,0 +1,43 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {AriaCheckboxGroupItemProps} from '@react-types/checkbox';
+import {CheckboxAria, useCheckbox} from './useCheckbox';
+import {CheckboxGroupState} from '@react-stately/checkbox';
+import {RefObject} from 'react';
+import {useToggleState} from '@react-stately/toggle';
+
+/**
+ * Provides the behavior and accessibility implementation for a checkbox component contained within a checkbox group.
+ * Checkbox groups allow users to select multiple items from a list of options.
+ * @param props - Props for the checkbox.
+ * @param state - State for the checkbox, as returned by `useCheckboxGroupState`.
+ * @param inputRef - A ref for the HTML input element.
+ */
+export function useCheckboxGroupItem(props: AriaCheckboxGroupItemProps, state: CheckboxGroupState, inputRef: RefObject<HTMLInputElement>): CheckboxAria {
+  const toggleState = useToggleState({
+    isReadOnly: props.isReadOnly,
+    isSelected: state.value.includes(props.value),
+    onChange(isSelected) {
+      if (isSelected) {
+        state.addValue(props.value);
+      } else {
+        state.removeValue(props.value);
+      }
+
+      if (props.onChange) {
+        props.onChange(isSelected);
+      }
+    }
+  });
+  return useCheckbox({...props, name: state.name}, toggleState, inputRef);
+}
diff --git a/packages/@react-aria/checkbox/test/useCheckboxGroup.test.tsx b/packages/@react-aria/checkbox/test/useCheckboxGroup.test.tsx
index 64c2985e737..c1f2e477c58 100644
--- a/packages/@react-aria/checkbox/test/useCheckboxGroup.test.tsx
+++ b/packages/@react-aria/checkbox/test/useCheckboxGroup.test.tsx
@@ -14,13 +14,13 @@ import {act, render} from '@testing-library/react';
 import {AriaCheckboxGroupProps, AriaCheckboxProps} from '@react-types/checkbox';
 import {CheckboxGroupState, useCheckboxGroupState} from '@react-stately/checkbox';
 import React, {useRef} from 'react';
-import {useCheckbox, useCheckboxGroup} from '../';
+import {useCheckboxGroup, useCheckboxGroupItem} from '../';
 import userEvent from '@testing-library/user-event';
 
 function Checkbox({checkboxGroupState, ...props}: AriaCheckboxProps & { checkboxGroupState: CheckboxGroupState }) {
   const ref = useRef<HTMLInputElement>();
   const {children} = props;
-  const {inputProps} = useCheckbox({...props, name: checkboxGroupState.name}, checkboxGroupState.getCheckboxState(props), ref);
+  const {inputProps} = useCheckboxGroupItem(props, checkboxGroupState, ref);
   return <label>{children}<input ref={ref} {...inputProps} /></label>;
 }
 
@@ -203,4 +203,27 @@ describe('useCheckboxGroup', () => {
 
     expect(checkboxGroup).not.toHaveAttribute('aria-disabled');
   });
+
+  it('should not update state for readonly checkbox', () => {
+    let groupOnChangeSpy = jest.fn();
+    let checkboxOnChangeSpy = jest.fn();
+    let {getAllByRole, getByLabelText} = render(
+      <CheckboxGroup
+        groupProps={{label: 'Favorite Pet', onChange: groupOnChangeSpy}}
+        checkboxProps={[
+          {value: 'dogs', children: 'Dogs'},
+          {value: 'cats', children: 'Cats'},
+          {value: 'dragons', children: 'Dragons', isReadOnly: true, onChange: checkboxOnChangeSpy}
+        ]} />
+    );
+
+    let checkboxes = getAllByRole('checkbox') as HTMLInputElement[];
+    let dragons = getByLabelText('Dragons');
+
+    act(() => {userEvent.click(dragons);});
+
+    expect(groupOnChangeSpy).toHaveBeenCalledTimes(0);
+    expect(checkboxOnChangeSpy).toHaveBeenCalledTimes(0);
+    expect(checkboxes[2].checked).toBe(false);
+  });
 });
diff --git a/packages/@react-stately/checkbox/src/useCheckboxGroupState.ts b/packages/@react-stately/checkbox/src/useCheckboxGroupState.ts
index 0103580bd8a..918134e4801 100644
--- a/packages/@react-stately/checkbox/src/useCheckboxGroupState.ts
+++ b/packages/@react-stately/checkbox/src/useCheckboxGroupState.ts
@@ -10,8 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {CheckboxGroupProps, ToggleProps} from '@react-types/checkbox';
-import {ToggleState} from '@react-stately/toggle';
+import {CheckboxGroupProps} from '@react-types/checkbox';
 import {useControlledState} from '@react-stately/utils';
 import {useMemo} from 'react';
 
@@ -32,10 +31,7 @@ export interface CheckboxGroupState {
   removeValue(value: string): void,
 
   /** Toggles a value in the set of selected values. */
-  toggleValue(value: string): void,
-
-  /** Gets checkbox state for a given checkbox. */
-  getCheckboxState(value: ToggleProps): ToggleState
+  toggleValue(value: string): void
 }
 
 let instance = Math.round(Math.random() * 10000000000);
@@ -85,27 +81,6 @@ export function useCheckboxGroupState(props: CheckboxGroupProps = {}): CheckboxG
         }
         return values.concat(value);
       });
-    },
-    getCheckboxState(props) {
-      const {value, onChange, isReadOnly} = props;
-      return {
-        isSelected: state.value.includes(value),
-        setSelected(isSelected) {
-          if (isReadOnly) {
-            return;
-          }
-
-          if (isSelected) {
-            state.addValue(value);
-          } else {
-            state.removeValue(value);
-          }
-
-          if (onChange) {
-            onChange(isSelected);
-          }
-        }
-      };
     }
   };
 
diff --git a/packages/@react-stately/checkbox/test/useCheckboxGroupState.test.tsx b/packages/@react-stately/checkbox/test/useCheckboxGroupState.test.tsx
index 3db81c6713e..912ee5302d2 100644
--- a/packages/@react-stately/checkbox/test/useCheckboxGroupState.test.tsx
+++ b/packages/@react-stately/checkbox/test/useCheckboxGroupState.test.tsx
@@ -25,20 +25,6 @@ describe('useCheckboxGroupState', () => {
       expect(typeof state.addValue).toBe('function');
       expect(typeof state.removeValue).toBe('function');
       expect(typeof state.toggleValue).toBe('function');
-      expect(typeof state.getCheckboxState).toBe('function');
-
-      return null;
-    }
-    render(<Test />);
-  });
-
-  it('should return toggle state interface from `getCheckboxState`', () => {
-    function Test() {
-      const state = useCheckboxGroupState();
-      const checkboxState = state.getCheckboxState({value: 'test'});
-
-      expect(checkboxState.isSelected).toBe(false);
-      expect(typeof checkboxState.setSelected).toBe('function');
 
       return null;
     }
@@ -220,119 +206,40 @@ describe('useCheckboxGroupState', () => {
     expect(container.textContent).toBe('foo, qwe');
   });
 
-  it('should update checkbox state after calling `setSelected` for it', () => {
-    let setSelected: (isSelected: boolean) => void;
-    let isSelected = false;
-
-    function Test() {
-      const state = useCheckboxGroupState();
-      const checkboxState = state.getCheckboxState({value: 'test'});
-      setSelected = checkboxState.setSelected;
-      isSelected = checkboxState.isSelected;
-
-      return <>{state.value.join(', ')}</>;
-    }
-
-    const {container} = render(<Test />);
-
-    expect(container.textContent).toBe('');
-    expect(isSelected).toBe(false);
-
-    act(() => {
-      setSelected(true);
-    });
-
-    expect(container.textContent).toBe('test');
-    expect(isSelected).toBe(true);
-  });
-
   it('should not update state for readonly group', () => {
     let addValue: (value: string) => void;
     let removeValue: (value: string) => void;
     let toggleValue: (value: string) => void;
-    let setSelected: (isSelected: boolean) => void;
 
     function Test() {
-      const state = useCheckboxGroupState({isReadOnly: true});
+      const state = useCheckboxGroupState({isReadOnly: true, defaultValue: ['test']});
       addValue = state.addValue;
       removeValue = state.removeValue;
       toggleValue = state.toggleValue;
 
-      const checkboxState = state.getCheckboxState({value: 'test'});
-      setSelected = checkboxState.setSelected;
-
       return <>{state.value.join(', ')}</>;
     }
 
     const {container} = render(<Test />);
 
-    expect(container.textContent).toBe('');
+    expect(container.textContent).toBe('test');
 
     act(() => {
-      addValue('test');
+      addValue('foo');
     });
 
-    expect(container.textContent).toBe('');
+    expect(container.textContent).toBe('test');
 
     act(() => {
       removeValue('test');
     });
 
-    expect(container.textContent).toBe('');
-
-    act(() => {
-      toggleValue('test');
-    });
-
-    expect(container.textContent).toBe('');
-
-    act(() => {
-      setSelected(true);
-    });
-
-    expect(container.textContent).toBe('');
-  });
-
-  it('should not update state for readonly checkbox', () => {
-    let setSelected: (isSelected: boolean) => void;
-
-    function Test() {
-      const state = useCheckboxGroupState();
-      const checkboxState = state.getCheckboxState({value: 'test', isReadOnly: true});
-      setSelected = checkboxState.setSelected;
-
-      return <>{state.value.join(', ')}</>;
-    }
-
-    const {container} = render(<Test />);
-
-    expect(container.textContent).toBe('');
-
-    act(() => {
-      setSelected(true);
-    });
-
-    expect(container.textContent).toBe('');
-  });
-
-  it('should call `onChange` for a checkbox when updating state with `setSelected`', () => {
-    let setSelected: (isSelected: boolean) => void;
-    let onChangeSpy = jest.fn();
-
-    function Test() {
-      const state = useCheckboxGroupState();
-      const checkboxState = state.getCheckboxState({value: 'test', onChange: onChangeSpy});
-      setSelected = checkboxState.setSelected;
-
-      return null;
-    }
-
-    render(<Test />);
+    expect(container.textContent).toBe('test');
 
     act(() => {
-      setSelected(true);
+      toggleValue('foo');
     });
 
-    expect(onChangeSpy).toHaveBeenCalledWith(true);
+    expect(container.textContent).toBe('test');
   });
 });
diff --git a/packages/@react-types/checkbox/src/index.d.ts b/packages/@react-types/checkbox/src/index.d.ts
index a5388491fd3..92253e59063 100644
--- a/packages/@react-types/checkbox/src/index.d.ts
+++ b/packages/@react-types/checkbox/src/index.d.ts
@@ -77,6 +77,8 @@ export interface AriaCheckboxProps extends CheckboxProps, AriaToggleProps {}
 
 export interface AriaCheckboxGroupProps extends CheckboxGroupProps, DOMProps, AriaLabelingProps, AriaValidationProps {}
 
+export interface AriaCheckboxGroupItemProps extends Omit<AriaCheckboxProps, 'isSelected' | 'defaultSelected'> {}
+
 export interface SpectrumCheckboxProps extends AriaCheckboxProps, StyleProps {
   /**
    * This prop sets the emphasized style which provides visual prominence.

From b35eecf959734e2fa2bb5eef1c5eececdb0bc854 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Mon, 17 Aug 2020 17:47:17 +0200
Subject: [PATCH 6/6] Add basic docs for useCheckboxGroupState

---
 ...ggleState.mdx => useCheckboxGroupState.mdx} | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)
 rename packages/@react-stately/checkbox/docs/{useToggleState.mdx => useCheckboxGroupState.mdx} (64%)

diff --git a/packages/@react-stately/checkbox/docs/useToggleState.mdx b/packages/@react-stately/checkbox/docs/useCheckboxGroupState.mdx
similarity index 64%
rename from packages/@react-stately/checkbox/docs/useToggleState.mdx
rename to packages/@react-stately/checkbox/docs/useCheckboxGroupState.mdx
index 015ff9cf7f0..5970788609b 100644
--- a/packages/@react-stately/checkbox/docs/useToggleState.mdx
+++ b/packages/@react-stately/checkbox/docs/useCheckboxGroupState.mdx
@@ -10,31 +10,27 @@ governing permissions and limitations under the License. -->
 import {Layout} from '@react-spectrum/docs';
 export default Layout;
 
-import docs from 'docs:@react-stately/toggle';
+import docs from 'docs:@react-stately/checkbox';
 import {ClassAPI, HeaderInfo, TypeContext, FunctionAPI, TypeLink} from '@react-spectrum/docs';
-import packageData from '@react-stately/toggle/package.json';
+import packageData from '@react-stately/checkbox/package.json';
 
 ---
 category: Forms
 keywords: [toggle, checkbox, switch, input, state]
 ---
 
-# useToggleState
+# useCheckboxGroupState
 
-<p>{docs.exports.useToggleState.description}</p>
+<p>{docs.exports.useCheckboxGroupState.description}</p>
 
 <HeaderInfo
   packageData={packageData}
-  componentNames={['useToggleState']} />
+  componentNames={['useCheckboxGroupState']} />
 
 ## API
 
-<FunctionAPI function={docs.exports.useToggleState} links={docs.links} />
+<FunctionAPI function={docs.exports.useCheckboxGroupState} links={docs.links} />
 
 ## Interface
 
-<ClassAPI links={docs.links} class={docs.links[docs.exports.useToggleState.return.id]} />
-
-## Example
-
-See the docs for [useCheckbox](/react-aria/useCheckbox.html) in react-aria for an example of `useToggleState`.
+<ClassAPI links={docs.links} class={docs.links[docs.exports.useCheckboxGroupState.return.id]} />