diff --git a/packages/@react-aria/checkbox/package.json b/packages/@react-aria/checkbox/package.json index 7f31bff075a..1ed2cb40a64 100644 --- a/packages/@react-aria/checkbox/package.json +++ b/packages/@react-aria/checkbox/package.json @@ -18,7 +18,10 @@ }, "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/checkbox": "^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..63e2a88c34d 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 './useCheckboxGroupItem'; diff --git a/packages/@react-aria/checkbox/src/useCheckboxGroup.ts b/packages/@react-aria/checkbox/src/useCheckboxGroup.ts new file mode 100644 index 00000000000..28be095a42e --- /dev/null +++ b/packages/@react-aria/checkbox/src/useCheckboxGroup.ts @@ -0,0 +1,51 @@ +/* + * 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, + /** Props for the checkbox group's visible label (if any). */ + labelProps: HTMLAttributes +} + +/** + * 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 {isDisabled} = props; + + let {labelProps, fieldProps} = useLabel({ + ...props, + // Checkbox group is not an HTML input element so it + // shouldn't be labeled by a