diff --git a/packages/@react-aria/tag/docs/useTagGroup.mdx b/packages/@react-aria/tag/docs/useTagGroup.mdx index d039afb359c..42ed13777ff 100644 --- a/packages/@react-aria/tag/docs/useTagGroup.mdx +++ b/packages/@react-aria/tag/docs/useTagGroup.mdx @@ -77,7 +77,7 @@ Each individual tag should use `rowProps` on its outer container, and use `gridC ```tsx example export=true import {useTag, useTagGroup} from '@react-aria/tag'; -import {useTagGroupState} from '@react-stately/tag'; +import {useListState} from '@react-stately/list'; import {Item} from '@react-stately/collections'; import {useFocusRing} from '@react-aria/focus'; @@ -88,7 +88,7 @@ function TagGroup(props) { let { label, description, errorMessage, validationState, allowsRemoving, onRemove } = props; let ref = React.useRef(null); - let state = useTagGroupState(props); + let state = useListState(props); let { gridProps, labelProps, diff --git a/packages/@react-aria/tag/package.json b/packages/@react-aria/tag/package.json index 1e7160b6792..f599b48793e 100644 --- a/packages/@react-aria/tag/package.json +++ b/packages/@react-aria/tag/package.json @@ -28,7 +28,6 @@ "@react-aria/label": "^3.5.1", "@react-aria/utils": "^3.16.0", "@react-stately/list": "^3.8.0", - "@react-stately/tag": "3.0.0-rc.0", "@react-types/button": "^3.7.2", "@react-types/shared": "^3.18.0", "@react-types/tag": "3.0.0-rc.0", diff --git a/packages/@react-aria/tag/src/useTag.ts b/packages/@react-aria/tag/src/useTag.ts index 1bd0ea21463..b7f7806147a 100644 --- a/packages/@react-aria/tag/src/useTag.ts +++ b/packages/@react-aria/tag/src/useTag.ts @@ -12,11 +12,11 @@ import {AriaButtonProps} from '@react-types/button'; import {AriaLabelingProps, DOMAttributes, DOMProps, FocusableElement} from '@react-types/shared'; -import {chain, filterDOMProps, mergeProps, useDescription, useId} from '@react-aria/utils'; +import {filterDOMProps, mergeProps, useDescription, useId} from '@react-aria/utils'; // @ts-ignore import intlMessages from '../intl/*.json'; import {KeyboardEvent, RefObject} from 'react'; -import type {TagGroupState} from '@react-stately/tag'; +import type {ListState} from '@react-stately/list'; import {TagProps} from '@react-types/tag'; import {useGridListItem} from '@react-aria/gridlist'; import {useInteractionModality} from '@react-aria/interactions'; @@ -39,13 +39,14 @@ export interface AriaTagProps extends TagProps, DOMProps, AriaLabelingProp /** * Provides the behavior and accessibility implementation for a tag component. * @param props - Props to be applied to the tag. - * @param state - State for the tag group, as returned by `useTagGroupState`. + * @param state - State for the tag group, as returned by `useListState`. * @param ref - A ref to a DOM element for the tag. */ -export function useTag(props: AriaTagProps, state: TagGroupState, ref: RefObject): TagAria { +export function useTag(props: AriaTagProps, state: ListState, ref: RefObject): TagAria { let { allowsRemoving, - item + item, + onRemove } = props; let stringFormatter = useLocalizedStringFormatter(intlMessages); let labelId = useId(); @@ -58,8 +59,6 @@ export function useTag(props: AriaTagProps, state: TagGroupState, ref: // We want the group to handle keyboard navigation between tags. delete rowProps.onKeyDownCapture; - let onRemove = chain(props.onRemove, state.onRemove); - let onKeyDown = (e: KeyboardEvent) => { if (e.key === 'Delete' || e.key === 'Backspace') { onRemove(item.key); diff --git a/packages/@react-aria/tag/src/useTagGroup.ts b/packages/@react-aria/tag/src/useTagGroup.ts index e1736f2744d..76bb5855b23 100644 --- a/packages/@react-aria/tag/src/useTagGroup.ts +++ b/packages/@react-aria/tag/src/useTagGroup.ts @@ -12,9 +12,9 @@ import {AriaLabelingProps, DOMAttributes, DOMProps, Validation} from '@react-types/shared'; import {filterDOMProps, mergeProps} from '@react-aria/utils'; +import type {ListState} from '@react-stately/list'; import {RefObject, useState} from 'react'; import {TagGroupProps} from '@react-types/tag'; -import type {TagGroupState} from '@react-stately/tag'; import {TagKeyboardDelegate} from './TagKeyboardDelegate'; import {useField} from '@react-aria/label'; import {useFocusWithin} from '@react-aria/interactions'; @@ -44,10 +44,10 @@ export interface AriaTagGroupProps extends TagGroupProps, DOMProps, AriaLa * Provides the behavior and accessibility implementation for a tag group component. * A tag group is a focusable list of labels, categories, keywords, or other items, with support for keyboard navigation and removal. * @param props - Props to be applied to the tag group. - * @param state - State for the tag group, as returned by `useTagGroupState`. + * @param state - State for the tag group, as returned by `useListState`. * @param ref - A ref to a DOM element for the tag group. */ -export function useTagGroup(props: AriaTagGroupProps, state: TagGroupState, ref: RefObject): TagGroupAria { +export function useTagGroup(props: AriaTagGroupProps, state: ListState, ref: RefObject): TagGroupAria { let {direction} = useLocale(); let keyboardDelegate = props.keyboardDelegate || new TagKeyboardDelegate(state.collection, direction); let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField(props); diff --git a/packages/@react-spectrum/tag/package.json b/packages/@react-spectrum/tag/package.json index 76463776cd0..abcc940c3f3 100644 --- a/packages/@react-spectrum/tag/package.json +++ b/packages/@react-spectrum/tag/package.json @@ -48,7 +48,6 @@ "@react-spectrum/utils": "^3.9.1", "@react-stately/collections": "^3.7.0", "@react-stately/list": "^3.8.0", - "@react-stately/tag": "3.0.0-rc.0", "@react-types/shared": "^3.18.0", "@react-types/tag": "3.0.0-rc.0", "@swc/helpers": "^0.4.14" diff --git a/packages/@react-spectrum/tag/src/Tag.tsx b/packages/@react-spectrum/tag/src/Tag.tsx index e1c6e680a5e..0e276224f71 100644 --- a/packages/@react-spectrum/tag/src/Tag.tsx +++ b/packages/@react-spectrum/tag/src/Tag.tsx @@ -12,10 +12,10 @@ import {classNames, ClearSlots, SlotProvider, useStyleProps} from '@react-spectrum/utils'; import {ClearButton} from '@react-spectrum/button'; +import type {ListState} from '@react-stately/list'; import {mergeProps} from '@react-aria/utils'; import React, {useRef} from 'react'; import styles from '@adobe/spectrum-css-temp/components/tags/vars.css'; -import type {TagGroupState} from '@react-stately/tag'; import {TagProps} from '@react-types/tag'; import {Text} from '@react-spectrum/text'; import {useFocusRing} from '@react-aria/focus'; @@ -23,7 +23,7 @@ import {useHover} from '@react-aria/interactions'; import {useTag} from '@react-aria/tag'; export interface SpectrumTagProps extends TagProps { - state: TagGroupState + state: ListState } export function Tag(props: SpectrumTagProps) { diff --git a/packages/@react-spectrum/tag/src/TagGroup.tsx b/packages/@react-spectrum/tag/src/TagGroup.tsx index 16bafa257ef..46ab163fc19 100644 --- a/packages/@react-spectrum/tag/src/TagGroup.tsx +++ b/packages/@react-spectrum/tag/src/TagGroup.tsx @@ -18,7 +18,7 @@ import {Field} from '@react-spectrum/label'; import {FocusScope} from '@react-aria/focus'; // @ts-ignore import intlMessages from '../intl/*.json'; -import {ListCollection} from '@react-stately/list'; +import {ListCollection, useListState} from '@react-stately/list'; import {Provider, useProviderProps} from '@react-spectrum/provider'; import React, {ReactElement, useCallback, useEffect, useMemo, useRef, useState} from 'react'; import styles from '@adobe/spectrum-css-temp/components/tags/vars.css'; @@ -26,7 +26,6 @@ import {Tag} from './Tag'; import {useFormProps} from '@react-spectrum/form'; import {useId, useLayoutEffect, useResizeObserver, useValueEffect} from '@react-aria/utils'; import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n'; -import {useTagGroupState} from '@react-stately/tag'; export interface SpectrumTagGroupProps extends AriaTagGroupProps, StyleProps, SpectrumLabelableProps, Omit { /** The label to display on the action button. */ @@ -53,7 +52,7 @@ function TagGroup(props: SpectrumTagGroupProps, ref: DOMRef let {direction} = useLocale(); let stringFormatter = useLocalizedStringFormatter(intlMessages); let [isCollapsed, setIsCollapsed] = useState(maxRows != null); - let state = useTagGroupState(props); + let state = useListState(props); let [tagState, setTagState] = useValueEffect({visibleTagCount: state.collection.size, showCollapseButton: false, maxHeight: undefined}); let keyboardDelegate = useMemo(() => ( isCollapsed diff --git a/packages/@react-stately/tag/README.md b/packages/@react-stately/tag/README.md deleted file mode 100644 index 49c22e51ddb..00000000000 --- a/packages/@react-stately/tag/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# @react-stately/tag - -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/tag/index.ts b/packages/@react-stately/tag/index.ts deleted file mode 100644 index 4e9931530d8..00000000000 --- a/packages/@react-stately/tag/index.ts +++ /dev/null @@ -1,13 +0,0 @@ -/* - * Copyright 2022 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/tag/package.json b/packages/@react-stately/tag/package.json deleted file mode 100644 index 6f80188358b..00000000000 --- a/packages/@react-stately/tag/package.json +++ /dev/null @@ -1,36 +0,0 @@ -{ - "name": "@react-stately/tag", - "version": "3.0.0-rc.0", - "description": "Spectrum UI components in React", - "license": "Apache-2.0", - "main": "dist/main.js", - "module": "dist/module.js", - "exports": { - "types": "./dist/types.d.ts", - "import": "./dist/import.mjs", - "require": "./dist/main.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/list": "^3.8.0", - "@react-types/tag": "3.0.0-rc.0", - "@swc/helpers": "^0.4.14" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" - }, - "publishConfig": { - "access": "public" - } -} diff --git a/packages/@react-stately/tag/src/index.ts b/packages/@react-stately/tag/src/index.ts deleted file mode 100644 index 30273c72c2b..00000000000 --- a/packages/@react-stately/tag/src/index.ts +++ /dev/null @@ -1,16 +0,0 @@ -/* - * Copyright 2022 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 {useTagGroupState} from './useTagGroupState'; - -export type {TagGroupState} from './useTagGroupState'; -export type {TagGroupProps} from '@react-types/tag'; diff --git a/packages/@react-stately/tag/src/useTagGroupState.ts b/packages/@react-stately/tag/src/useTagGroupState.ts deleted file mode 100644 index 4d0663dc692..00000000000 --- a/packages/@react-stately/tag/src/useTagGroupState.ts +++ /dev/null @@ -1,37 +0,0 @@ -/* - * Copyright 2022 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 {Key} from 'react'; -import {ListState, useListState} from '@react-stately/list'; -import {TagGroupProps} from '@react-types/tag'; - -export interface TagGroupState extends ListState{ - onRemove?: (key: Key) => void -} - -/** - * Provides state management for a TagGroup component. - */ -export function useTagGroupState(props: TagGroupProps): TagGroupState { - let state = useListState(props); - - let onRemove = (key) => { - // If a tag is removed, restore focus to the tag after, or tag before if no tag after. - let restoreKey = state.collection.getKeyAfter(key) || state.collection.getKeyBefore(key); - state.selectionManager.setFocusedKey(restoreKey); - }; - - return { - onRemove, - ...state - }; -}