Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/@react-aria/tag/src/useTag.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,16 +23,21 @@ 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
}

/**
* 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<T>(props: TagProps<T>, state: TagGroupState<T>, ref: RefObject<FocusableElement>): TagAria {
let {
Expand Down
8 changes: 4 additions & 4 deletions packages/@react-spectrum/tag/src/TagGroup.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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<T> extends AriaTagGroupProps<T>, StyleProps, SpectrumLabelableProps, Validation, Omit<SpectrumHelpTextProps, 'showErrorIcon'> {
export interface SpectrumTagGroupProps<T> extends AriaTagGroupProps<T>, StyleProps, SpectrumLabelableProps, Omit<SpectrumHelpTextProps, 'showErrorIcon'> {
/** The label to display on the action button. */
actionLabel?: string,
/** Handler that is called when the action button is pressed. */
Expand Down Expand Up @@ -70,7 +70,7 @@ function TagGroup<T extends object>(props: SpectrumTagGroupProps<T>, 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;
Expand Down Expand Up @@ -113,7 +113,7 @@ function TagGroup<T extends object>(props: SpectrumTagGroupProps<T>, ref: DOMRef
}
return {visibleTagCount: index, showCollapseButton: index < state.collection.size};
};

setTagState(function *() {
// Update to show all items.
yield {visibleTagCount: state.collection.size, showCollapseButton: true};
Expand Down
4 changes: 4 additions & 0 deletions packages/@react-types/tag/src/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,12 @@ export interface TagGroupProps<T> extends Omit<CollectionBase<T>, 'disabledKeys'
}

export interface TagProps<T> extends ItemProps<any> {
/** 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<T>,
/** Handler that is called when the user triggers the tag's remove button. */
onRemove?: (key: Key) => void
}