@react-types/shared

property 'aria-describedby'

'aria-describedby'?: string;

• Identifies the element (or elements) that describes the object.

property 'aria-details'

'aria-details'?: string;

• Identifies the element (or elements) that provide a detailed, extended description for the object.

property 'aria-label'

'aria-label'?: string;

• Defines a string value that labels the current element.

property 'aria-labelledby'

'aria-labelledby'?: string;

• Identifies the element (or elements) that labels the current element.

property 'aria-errormessage'

'aria-errormessage'?: string;

• Identifies the element that provides an error message for the object.

property isLoading

isLoading?: boolean;

• Whether the items are currently loading.

property onLoadMore

onLoadMore?: () => any;

• Handler that is called when more items should be loaded, e.g. while scrolling near the bottom.

property altKey

altKey: boolean;

• Whether the alt keyboard modifier was held during the move event.

property ctrlKey

ctrlKey: boolean;

• Whether the ctrl keyboard modifier was held during the move event.

property metaKey

metaKey: boolean;

• Whether the meta keyboard modifier was held during the move event.

property pointerType

pointerType: PointerType;

• The pointer type that triggered the move event.

property shiftKey

shiftKey: boolean;

• Whether the shift keyboard modifier was held during the move event.

property alignContent

alignContent?: Responsive<
    | 'start'
    | 'end'
    | 'center'
    | 'space-between'
    | 'space-around'
    | 'space-evenly'
    | 'stretch'
    | 'baseline'
    | 'first baseline'
    | 'last baseline'
    | 'safe center'
    | 'unsafe center'
>;

• The distribution of space around child items along the cross axis. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content).

property alignItems

alignItems?: Responsive<
    | 'start'
    | 'end'
    | 'center'
    | 'stretch'
    | 'self-start'
    | 'self-end'
    | 'baseline'
    | 'first baseline'
    | 'last baseline'
    | 'safe center'
    | 'unsafe center'
>;

• The alignment of children within their container. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items).

property columnGap

columnGap?: Responsive<DimensionValue>;

• The space to display between columns. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap).

property gap

gap?: Responsive<DimensionValue>;

• The space to display between both rows and columns. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap).

property justifyContent

justifyContent?: Responsive<
    | 'start'
    | 'end'
    | 'center'
    | 'left'
    | 'right'
    | 'space-between'
    | 'space-around'
    | 'space-evenly'
    | 'stretch'
    | 'baseline'
    | 'first baseline'
    | 'last baseline'
    | 'safe center'
    | 'unsafe center'
>;

• The distribution of space around items along the main axis. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content).

property rowGap

rowGap?: Responsive<DimensionValue>;

• The space to display between rows. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap).

property size

readonly size: number;

• The number of items in the collection.

method at

at: (idx: number) => T | null;

• Get an item by the index of its key.

method getChildren

getChildren: (key: Key) => Iterable<T>;

• Iterate over the child items of the given key.

method getFirstKey

getFirstKey: () => Key | null;

• Get the first key in the collection.

method getItem

getItem: (key: Key) => T | null;

• Get an item by its key.

method getKeyAfter

getKeyAfter: (key: Key) => Key | null;

• Get the key that comes after the given key in the collection.

method getKeyBefore

getKeyBefore: (key: Key) => Key | null;

• Get the key that comes before the given key in the collection.

method getKeys

getKeys: () => Iterable<Key>;

• Iterate over all keys in the collection.

method getLastKey

getLastKey: () => Key | null;

• Get the last key in the collection.

method getTextValue

getTextValue: (key: Key) => string;

• Returns a string representation of the item's contents.

method UNSTABLE_filter

UNSTABLE_filter: (filterFn: (nodeValue: string) => boolean) => Collection<T>;

• Filters the collection using the given function.

property children

children: CollectionChildren<T>;

• The contents of the collection.

property disabledKeys

disabledKeys?: Iterable<Key>;

• The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.

property items

items?: Iterable<T>;

• Item objects in the collection.

property collection

collection?: C;

• A pre-constructed collection to use instead of building one from items and children.

property kind

kind: 'directory';

• The item kind.

property name

name: string;

• The directory name.

method getEntries

getEntries: () => AsyncIterable<FileDropItem | DirectoryDropItem>;

• Returns the entries contained within the directory.

property className

className?: string | undefined;

property id

id?: string | undefined;

property role

role?: AriaRole | undefined;

property style

style?: CSSProperties | undefined;

property tabIndex

tabIndex?: number | undefined;

property id

id?: string;

• The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).

method UNSAFE_getDOMNode

UNSAFE_getDOMNode: () => T | null;

property x

x: number;

• The x coordinate of the event, relative to the target element.

property y

y: number;

• The y coordinate of the event, relative to the target element.

property dropOperation

dropOperation: DropOperation;

• The drop operation that occurred.

property type

type: 'dragend';

• The event type.

property isInternal

isInternal: boolean;

• Whether the drop ended within the same collection as it originated.

property keys

keys: Set<Key>;

• The keys of the items that were dragged.

property keys

keys: Set<Key>;

• The keys of the items that were dragged.

property getAllowedDropOperations

getAllowedDropOperations?: () => DropOperation[];

• Function that returns the drop operations that are allowed for the dragged items. If not provided, all drop operations are allowed.

property getItems

getItems: (keys: Set<Key>) => DragItem[];

• A function that returns the items being dragged.

property onDragEnd

onDragEnd?: (e: DraggableCollectionEndEvent) => void;

• Handler that is called when the drag operation is ended, either as a result of a drop or a cancellation.

property onDragMove

onDragMove?: (e: DraggableCollectionMoveEvent) => void;

• Handler that is called when the drag is moved.

property onDragStart

onDragStart?: (e: DraggableCollectionStartEvent) => void;

• Handler that is called when a drag operation is started.

property preview

preview?: RefObject<DragPreviewRenderer | null>;

• The ref of the element that will be rendered as the drag preview while dragging.

property keys

keys: Set<Key>;

• The keys of the items that were dragged.

index signature

[type: string]: string;

property type

type: 'dragmove';

• The event type.

property type

type: 'dragstart';

• The event type.

method has

has: (type: string | symbol) => boolean;

• Returns whether the drag contains data of the given type.

property type

type: 'dropactivate';

• The event type.

property type

type: 'dropenter';

• The event type.

property dropOperation

dropOperation: DropOperation;

• The drop operation that should occur.

property items

items: DropItem[];

• The dropped items.

property type

type: 'drop';

• The event type.

property type

type: 'dropexit';

• The event type.

property type

type: 'dropmove';

• The event type.

property target

target: DropTarget;

• The drop target.

property getDropOperation

getDropOperation?: (
    target: DropTarget,
    types: DragTypes,
    allowedOperations: DropOperation[]
) => DropOperation;

• A function returning the drop operation to be performed when items matching the given types are dropped on the drop target.

property onDrop

onDrop?: (e: DroppableCollectionDropEvent) => void;

• Handler that is called when a valid drag is dropped on a drop target. When defined, this overrides other drop handlers such as onInsert, and onItemDrop.

property onDropActivate

onDropActivate?: (e: DroppableCollectionActivateEvent) => void;

• Handler that is called after a valid drag is held over a drop target for a period of time.

property onDropEnter

onDropEnter?: (e: DroppableCollectionEnterEvent) => void;

• Handler that is called when a valid drag enters a drop target.

property onDropExit

onDropExit?: (e: DroppableCollectionExitEvent) => void;

• Handler that is called when a valid drag exits a drop target.

property target

target: DropTarget;

• The drop target.

property target

target: DropTarget;

• The drop target.

property target

target: DropTarget;

• The drop target.

property dropOperation

dropOperation: DropOperation;

• The drop operation that should occur.

property items

items: DropItem[];

• The dropped items.

property target

target: ItemDropTarget;

• The drop target.

property target

target: DropTarget;

• The drop target.

property dropOperation

dropOperation: DropOperation;

• The drop operation that should occur.

property isInternal

isInternal: boolean;

• Whether the drag originated within the same collection as the drop.

property items

items: DropItem[];

• The dropped items.

property target

target: ItemDropTarget;

• The drop target.

property dropOperation

dropOperation: DropOperation;

• The drop operation that should occur.

property keys

keys: Set<Key>;

• The keys of the items that were reordered.

property target

target: ItemDropTarget;

• The drop target.

property dropOperation

dropOperation: DropOperation;

• The drop operation that should occur.

property items

items: DropItem[];

• The dropped items.

property acceptedDragTypes

acceptedDragTypes?: 'all' | Array<string | symbol>;

• The drag types that the droppable collection accepts. If the collection accepts directories, include DIRECTORY_DRAG_TYPE in your array of allowed types. 'all'

property onInsert

onInsert?: (e: DroppableCollectionInsertDropEvent) => void;

• Handler that is called when external items are dropped "between" items.

property onItemDrop

onItemDrop?: (e: DroppableCollectionOnItemDropEvent) => void;

• Handler that is called when items are dropped "on" an item.

property onReorder

onReorder?: (e: DroppableCollectionReorderEvent) => void;

• Handler that is called when items are reordered via drag in the source collection.

property onRootDrop

onRootDrop?: (e: DroppableCollectionRootDropEvent) => void;

• Handler that is called when external items are dropped on the droppable collection's root.

property shouldAcceptItemDrop

shouldAcceptItemDrop?: (target: ItemDropTarget, types: DragTypes) => boolean;

• A function returning whether a given target in the droppable collection is a valid "on" drop target for the current drag types.

method getDropTargetFromPoint

getDropTargetFromPoint: (
    x: number,
    y: number,
    isValidDropTarget: (target: DropTarget) => boolean
) => DropTarget | null;

• Returns a drop target within a collection for the given x and y coordinates. The point is provided relative to the top left corner of the collection container. A drop target can be checked to see if it is valid using the provided isValidDropTarget function.

property defaultExpandedKeys

defaultExpandedKeys?: Iterable<Key>;

• The initial expanded keys in the collection (uncontrolled).

property expandedKeys

expandedKeys?: Iterable<Key>;

• The currently expanded keys in the collection (controlled).

property onExpandedChange

onExpandedChange?: (keys: Set<Key>) => any;

• Handler that is called when items are expanded or collapsed.

property kind

kind: 'file';

• The item kind.

property name

name: string;

• The file name.

property type

type: string;

• The file type (usually a mime type).

method getFile

getFile: () => Promise<File>;

• Returns the contents of the file as a blob.

method getText

getText: () => Promise<string>;

• Returns the contents of the file as a string.

property direction

direction?: Responsive<'row' | 'column' | 'row-reverse' | 'column-reverse'>;

• The direction in which to layout children. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction). 'row'

property wrap

wrap?: Responsive<boolean | 'wrap' | 'nowrap' | 'wrap-reverse'>;

• Whether to wrap items onto multiple lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap). false

property excludeFromTabOrder

excludeFromTabOrder?: boolean;

• Whether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available.

property autoFocus

autoFocus?: boolean;

• Whether the element should receive focus on render.

method focus

focus: () => void;

property onBlur

onBlur?: (e: FocusEvent<Target>) => void;

• Handler that is called when the element loses focus.

property onFocus

onFocus?: (e: FocusEvent<Target>) => void;

• Handler that is called when the element receives focus.

property onFocusChange

onFocusChange?: (isFocused: boolean) => void;

• Handler that is called when the element's focus status changes.

property areas

areas?: Responsive<string[]>;

• Defines named grid areas. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas).

property autoColumns

autoColumns?: Responsive<DimensionValue>;

• Defines the size of implicitly generated columns. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns).

property autoFlow

autoFlow?: Responsive<'row' | 'column' | 'row dense' | 'column dense'>;

• Controls how auto-placed items are flowed into the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow).

property autoRows

autoRows?: Responsive<DimensionValue>;

• Defines the size of implicitly generated rows. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows).

property columns

columns?: Responsive<string | DimensionValue[]>;

• Defines the sizes of each column in the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns).

property justifyItems

justifyItems?: Responsive<
    | 'auto'
    | 'normal'
    | 'start'
    | 'end'
    | 'center'
    | 'left'
    | 'right'
    | 'stretch'
    | 'self-start'
    | 'self-end'
    | 'baseline'
    | 'first baseline'
    | 'last baseline'
    | 'safe center'
    | 'unsafe center'
    | 'legacy right'
    | 'legacy left'
    | 'legacy center'
>;

• Defines the default justifySelf for all items in the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items).

property rows

rows?: Responsive<string | DimensionValue[]>;

• Defines the sizes of each row in the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows).

property role

role?: 'group' | 'region' | 'presentation';

property description

description?: ReactNode;

• A description for the field. Provides a hint such as specific requirements for what to choose.

property errorMessage

errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode);

• An error message for the field.

property pointerType

pointerType: 'mouse' | 'pen';

• The pointer type that triggered the hover event.

property target

target: HTMLElement;

• The target element of the hover event.

property type

type: 'hoverstart' | 'hoverend';

• The type of hover event being fired.

property onHoverChange

onHoverChange?: (isHovering: boolean) => void;

• Handler that is called when the hover state changes.

property onHoverEnd

onHoverEnd?: (e: HoverEvent) => void;

• Handler that is called when a hover interaction ends.

property onHoverStart

onHoverStart?: (e: HoverEvent) => void;

• Handler that is called when a hover interaction starts.

property isDisabled

isDisabled?: boolean;

• Whether the input is disabled.

property isReadOnly

isReadOnly?: boolean;

• Whether the input can be selected but not changed by the user.

property name

name?: string;

• The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).

property dropPosition

dropPosition: DropPosition;

• The drop position relative to the item.

property key

key: Key;

• The item key.

property type

type: 'item';

• The drop target type.

property 'aria-label'

'aria-label'?: string;

• An accessibility label for this item.

property childItems

childItems?: Iterable<T>;

• A list of child item objects. Used for dynamic collections.

property children

children: ReactNode;

• Rendered contents of the item or child items.

property hasChildItems

hasChildItems?: boolean;

• Whether this item has children, even if not loaded yet.

property textValue

textValue?: string;

• A string representation of the item's contents, used for features like typeahead.

property title

title?: ReactNode;

• Rendered contents of the item if children contains child items.

method getFirstKey

getFirstKey: (key?: Key | null, global?: boolean) => Key | null;

• Returns the first key, or null for none.

method getKeyAbove

getKeyAbove: (key: Key) => Key | null;

• Returns the key visually above the given one, or null for none.

method getKeyBelow

getKeyBelow: (key: Key) => Key | null;

• Returns the key visually below the given one, or null for none.

method getKeyForSearch

getKeyForSearch: (search: string, fromKey?: Key | null) => Key | null;

• Returns the next key after fromKey that matches the given search string, or null for none.

method getKeyLeftOf

getKeyLeftOf: (key: Key) => Key | null;

• Returns the key visually to the left of the given one, or null for none.

method getKeyPageAbove

getKeyPageAbove: (key: Key) => Key | null;

• Returns the key visually one page above the given one, or null for none.

method getKeyPageBelow

getKeyPageBelow: (key: Key) => Key | null;

• Returns the key visually one page below the given one, or null for none.

method getKeyRightOf

getKeyRightOf: (key: Key) => Key | null;

• Returns the key visually to the right of the given one, or null for none.

method getLastKey

getLastKey: (key?: Key | null, global?: boolean) => Key | null;

• Returns the last key, or null for none.

property onKeyDown

onKeyDown?: (e: KeyboardEvent) => void;

• Handler that is called when a key is pressed.

property onKeyUp

onKeyUp?: (e: KeyboardEvent) => void;

• Handler that is called when a key is released.

property label

label?: ReactNode;

• The content to display as the label.

method getContentSize

getContentSize: () => Size;

• Returns the size of the scrollable content in the collection.

method getItemRect

getItemRect: (key: Key) => Rect | null;

• Returns a rectangle for the item with the given key.

method getKeyRange

getKeyRange: (from: Key, to: Key) => Key[];

• Returns a list of keys between from and to.

method getVisibleRect

getVisibleRect: () => Rect;

• Returns the visible rectangle of the collection.

property download

download?: boolean | string;

• Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).

property href

href?: Href;

• A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).

property hrefLang

hrefLang?: string;

• Hints at the human language of the linked URL. See[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang).

property ping

ping?: string;

• A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping).

property referrerPolicy

referrerPolicy?: HTMLAttributeReferrerPolicy;

• How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).

property rel

rel?: string;

• The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).

property routerOptions

routerOptions?: RouterOptions;

• Options for the configured client side router.

property target

target?: HTMLAttributeAnchorTarget;

• The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).

property type

type: 'longpressstart' | 'longpressend' | 'longpress';

• The type of long press event being fired.

property type

type: 'moveend';

• The type of move event being fired.

property onMove

onMove?: (e: MoveMoveEvent) => void;

• Handler that is called when the element is moved.

property onMoveEnd

onMoveEnd?: (e: MoveEndEvent) => void;

• Handler that is called when a move interaction ends.

property onMoveStart