diff --git a/packages/@react-aria/tag/src/useTag.ts b/packages/@react-aria/tag/src/useTag.ts index 58d1e579998..0d4b17b8c29 100644 --- a/packages/@react-aria/tag/src/useTag.ts +++ b/packages/@react-aria/tag/src/useTag.ts @@ -23,9 +23,13 @@ import {useLocalizedStringFormatter} from '@react-aria/i18n'; export interface TagAria { + /** Props for the tag visible label (if any). */ labelProps: DOMAttributes, + /** Props for the tag cell element. */ tagProps: DOMAttributes, + /** Props for the tag row element. */ tagRowProps: DOMAttributes, + /** Props for the tag clear button. */ clearButtonProps: AriaButtonProps } @@ -33,6 +37,7 @@ export interface TagAria { * 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 ref - A ref to a DOM element for the tag. */ export function useTag(props: TagProps, state: TagGroupState, ref: RefObject): TagAria { let { diff --git a/packages/@react-spectrum/tag/src/TagGroup.tsx b/packages/@react-spectrum/tag/src/TagGroup.tsx index e9023e8302d..05031ba14bd 100644 --- a/packages/@react-spectrum/tag/src/TagGroup.tsx +++ b/packages/@react-spectrum/tag/src/TagGroup.tsx @@ -13,7 +13,7 @@ import {ActionButton} from '@react-spectrum/button'; import {AriaTagGroupProps, TagKeyboardDelegate, useTagGroup} from '@react-aria/tag'; import {classNames, useDOMRef} from '@react-spectrum/utils'; -import {DOMRef, SpectrumHelpTextProps, SpectrumLabelableProps, StyleProps, Validation} from '@react-types/shared'; +import {DOMRef, SpectrumHelpTextProps, SpectrumLabelableProps, StyleProps} from '@react-types/shared'; import {Field} from '@react-spectrum/label'; import {FocusScope} from '@react-aria/focus'; // @ts-ignore @@ -28,7 +28,7 @@ import {useId, useLayoutEffect, useResizeObserver, useValueEffect} from '@react- import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n'; import {useTagGroupState} from '@react-stately/tag'; -export interface SpectrumTagGroupProps extends AriaTagGroupProps, StyleProps, SpectrumLabelableProps, Validation, Omit { +export interface SpectrumTagGroupProps extends AriaTagGroupProps, StyleProps, SpectrumLabelableProps, Omit { /** The label to display on the action button. */ actionLabel?: string, /** Handler that is called when the action button is pressed. */ @@ -70,7 +70,7 @@ function TagGroup(props: SpectrumTagGroupProps, ref: DOMRef let computeVisibleTagCount = () => { // Refs can be null at runtime. let currDomRef: HTMLDivElement | null = domRef.current; - let currContainerRef: HTMLDivElement | null = containerRef.current; + let currContainerRef: HTMLDivElement | null = containerRef.current; let currTagsRef: HTMLDivElement | null = tagsRef.current; if (!currDomRef || !currContainerRef || !currTagsRef) { return; @@ -113,7 +113,7 @@ function TagGroup(props: SpectrumTagGroupProps, ref: DOMRef } return {visibleTagCount: index, showCollapseButton: index < state.collection.size}; }; - + setTagState(function *() { // Update to show all items. yield {visibleTagCount: state.collection.size, showCollapseButton: true}; diff --git a/packages/@react-types/tag/src/index.d.ts b/packages/@react-types/tag/src/index.d.ts index 2e3c8cf4999..31de92e2e5b 100644 --- a/packages/@react-types/tag/src/index.d.ts +++ b/packages/@react-types/tag/src/index.d.ts @@ -23,8 +23,12 @@ export interface TagGroupProps extends Omit, 'disabledKeys' } export interface TagProps extends ItemProps { + /** Whether the tag is focused. */ isFocused: boolean, + /** Whether the tag is removable. */ allowsRemoving?: boolean, + /** An object representing the tag. Contains all the relevant information that makes up the tag. */ item: Node, + /** Handler that is called when the user triggers the tag's remove button. */ onRemove?: (key: Key) => void }