From dc3816b99baa270cfd9b3710049dd6075c834a04 Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Mon, 13 Feb 2023 12:03:29 -0800 Subject: [PATCH 1/2] Adding descriptions to Tag related interfaces --- packages/@react-aria/tag/src/useTag.ts | 4 ++++ packages/@react-spectrum/tag/src/TagGroup.tsx | 6 +++--- packages/@react-types/tag/src/index.d.ts | 5 +++++ 3 files changed, 12 insertions(+), 3 deletions(-) diff --git a/packages/@react-aria/tag/src/useTag.ts b/packages/@react-aria/tag/src/useTag.ts index a3b1610d751..a6554cacc90 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 } diff --git a/packages/@react-spectrum/tag/src/TagGroup.tsx b/packages/@react-spectrum/tag/src/TagGroup.tsx index e9023e8302d..f1a8e28b572 100644 --- a/packages/@react-spectrum/tag/src/TagGroup.tsx +++ b/packages/@react-spectrum/tag/src/TagGroup.tsx @@ -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 3632f49c130..8dc55384a29 100644 --- a/packages/@react-types/tag/src/index.d.ts +++ b/packages/@react-types/tag/src/index.d.ts @@ -23,9 +23,14 @@ 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, + /** The ref of the tag row element. */ tagRowRef: RefObject } From ca1bdfad24389bff89edb753354956a7667c8972 Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Mon, 13 Feb 2023 14:21:48 -0800 Subject: [PATCH 2/2] Add description for ref --- packages/@react-aria/tag/src/useTag.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/@react-aria/tag/src/useTag.ts b/packages/@react-aria/tag/src/useTag.ts index abb0690d7dc..0d4b17b8c29 100644 --- a/packages/@react-aria/tag/src/useTag.ts +++ b/packages/@react-aria/tag/src/useTag.ts @@ -37,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 {