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). 'start'

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). 'stretch'

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). 'stretch'

property rowGap

rowGap?: Responsive<DimensionValue>;

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

interface Collection

interface Collection<T> extends Iterable<T> {}

A generic interface to access a readonly sequential collection of unique keyed items.

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.

interface CollectionBase

interface CollectionBase<T> {}

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.

interface CollectionStateBase

interface CollectionStateBase<T, C extends Collection<Node<T>> = Collection<Node<T>>>
    extends Partial<CollectionBase<T>> {}

property collection

collection?: C;

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

interface DirectoryDropItem

interface DirectoryDropItem {}

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.

interface DOMAttributes

interface DOMAttributes<T = FocusableElement>
    extends AriaAttributes,
        ReactDOMAttributes<T> {}

All DOM attributes supported across both HTML and SVG elements.

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;

interface DOMProps

interface DOMProps {}

property id

id?: string;

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

interface DOMRefValue

interface DOMRefValue<T extends HTMLElement = HTMLElement> {}

method UNSAFE_getDOMNode

UNSAFE_getDOMNode: () => T;

interface DragDropEvent

interface DragDropEvent {}

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.

interface DragEndEvent

interface DragEndEvent extends DragDropEvent {}

property dropOperation

dropOperation: DropOperation;

The drop operation that occurred.

property type

type: 'dragend';

The event type.

interface DraggableCollectionEndEvent

interface DraggableCollectionEndEvent extends DragEndEvent {}

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.

interface DraggableCollectionMoveEvent

interface DraggableCollectionMoveEvent extends DragMoveEvent {}

property keys

keys: Set<Key>;

The keys of the items that were dragged.

interface DraggableCollectionProps

interface DraggableCollectionProps {}

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>;

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

interface DraggableCollectionStartEvent

interface DraggableCollectionStartEvent extends DragStartEvent {}

property keys

keys: Set<Key>;

The keys of the items that were dragged.

interface DragItem

interface DragItem {}

index signature

[type: string]: string;

interface DragMoveEvent

interface DragMoveEvent extends DragDropEvent {}

property type

type: 'dragmove';

The event type.

interface DragStartEvent

interface DragStartEvent extends DragDropEvent {}

property type

type: 'dragstart';

The event type.

interface DragTypes

interface DragTypes {}

method has

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

Returns whether the drag contains data of the given type.

interface DropActivateEvent

interface DropActivateEvent extends DragDropEvent {}

property type

type: 'dropactivate';

The event type.

interface DropEnterEvent

interface DropEnterEvent extends DragDropEvent {}

property type

type: 'dropenter';

The event type.

interface DropEvent

interface DropEvent extends DragDropEvent {}

property dropOperation

dropOperation: DropOperation;

The drop operation that should occur.

property items

items: DropItem[];

The dropped items.

property type

type: 'drop';

The event type.

interface DropExitEvent

interface DropExitEvent extends DragDropEvent {}

property type

type: 'dropexit';

The event type.

interface DropMoveEvent

interface DropMoveEvent extends DragDropEvent {}

property type

type: 'dropmove';

The event type.

interface DroppableCollectionActivateEvent

interface DroppableCollectionActivateEvent extends DropActivateEvent {}

property target

target: DropTarget;

The drop target.

interface DroppableCollectionBaseProps

interface DroppableCollectionBaseProps {}

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.

interface DroppableCollectionDropEvent

interface DroppableCollectionDropEvent extends DropEvent {}

property target

target: DropTarget;

The drop target.

interface DroppableCollectionEnterEvent

interface DroppableCollectionEnterEvent extends DropEnterEvent {}

property target

target: DropTarget;

The drop target.

interface DroppableCollectionExitEvent

interface DroppableCollectionExitEvent extends DropExitEvent {}

property target

target: DropTarget;

The drop target.

interface DroppableCollectionInsertDropEvent

interface DroppableCollectionInsertDropEvent {}

property dropOperation

dropOperation: DropOperation;

The drop operation that should occur.

property items

items: DropItem[];

The dropped items.

property target

target: ItemDropTarget;

The drop target.

interface DroppableCollectionMoveEvent

interface DroppableCollectionMoveEvent extends DropMoveEvent {}

property target

target: DropTarget;

The drop target.

interface DroppableCollectionOnItemDropEvent

interface DroppableCollectionOnItemDropEvent {}

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.

interface DroppableCollectionProps

interface DroppableCollectionProps
    extends DroppableCollectionUtilityOptions,
        DroppableCollectionBaseProps {}

interface DroppableCollectionReorderEvent

interface DroppableCollectionReorderEvent {}

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.

interface DroppableCollectionRootDropEvent

interface DroppableCollectionRootDropEvent {}

property dropOperation

dropOperation: DropOperation;

The drop operation that should occur.

property items

items: DropItem[];

The dropped items.

interface DroppableCollectionUtilityOptions

interface DroppableCollectionUtilityOptions {}

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.

interface DropTargetDelegate

interface DropTargetDelegate {}

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.

interface Expandable

interface Expandable {}

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.

interface FileDropItem

interface FileDropItem {}

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.

interface FlexStyleProps

interface FlexStyleProps extends BoxAlignmentStyleProps, StyleProps {}

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

interface FocusableDOMProps

interface FocusableDOMProps extends DOMProps {}

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.

interface FocusableElement

interface FocusableElement extends Element, HTMLOrSVGElement {}

Any focusable element, including both HTML and SVG elements.

interface FocusableProps

interface FocusableProps<Target = Element>
    extends FocusEvents<Target>,
        KeyboardEvents {}

property autoFocus

autoFocus?: boolean;

Whether the element should receive focus on render.

interface FocusableRefValue

interface FocusableRefValue<
    T extends HTMLElement = HTMLElement,
    D extends HTMLElement = T
> extends DOMRefValue<D> {}

method focus

focus: () => void;

interface FocusEvents

interface FocusEvents<Target = Element> {}

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.

interface GridStyleProps

interface GridStyleProps extends BoxAlignmentStyleProps, StyleProps {}

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).

interface HelpTextProps

interface HelpTextProps {}

property description

description?: ReactNode;

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

property errorMessage

errorMessage?: ReactNode;

An error message for the field.

interface HoverEvent

interface HoverEvent {}

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.

interface HoverEvents

interface HoverEvents {}

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.

interface InputBase

interface InputBase {}

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.

interface ItemDropTarget

interface ItemDropTarget {}

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.

interface ItemProps

interface ItemProps<T> {}

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.

interface KeyboardDelegate

interface KeyboardDelegate {}

method getFirstKey

getFirstKey: (key?: Key, 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) => 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, global?: boolean) => Key | null;

Returns the last key, or null for none.

interface KeyboardEvents

interface KeyboardEvents {}

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.

interface LabelableProps

interface LabelableProps {}

property label

label?: ReactNode;

The content to display as the label.

interface LongPressEvent

interface LongPressEvent extends Omit<PressEvent, 'type'> {}

property type

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

The type of long press event being fired.

interface MoveEndEvent

interface MoveEndEvent extends BaseMoveEvent {}

property type

type: 'moveend';

The type of move event being fired.

interface MoveEvents

interface MoveEvents {}

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

onMoveStart?: (e: MoveStartEvent) => void;

Handler that is called when a move interaction starts.

interface MoveMoveEvent

interface MoveMoveEvent extends BaseMoveEvent {}

property deltaX

deltaX: number;

The amount moved in the X direction since the last event.

property deltaY

deltaY: number;

The amount moved in the Y direction since the last event.

property type

type: 'move';

The type of move event being fired.

interface MoveStartEvent

interface MoveStartEvent extends BaseMoveEvent {}

property type

type: 'movestart';

The type of move event being fired.

interface MultipleSelection

interface MultipleSelection {}

property defaultSelectedKeys

defaultSelectedKeys?: 'all' | Iterable<Key>;

The initial selected keys in the collection (uncontrolled).

property disabledKeys

disabledKeys?: Iterable<Key>;

The currently disabled keys in the collection (controlled).

property disallowEmptySelection

disallowEmptySelection?: boolean;

Whether the collection allows empty selection.

property onSelectionChange

onSelectionChange?: (keys: Selection) => any;

Handler that is called when the selection changes.

property selectedKeys

selectedKeys?: 'all' | Iterable<Key>;

The currently selected keys in the collection (controlled).

property selectionMode

selectionMode?: SelectionMode;

The type of selection that is allowed in the collection.

interface Node

interface Node<T> {}

property 'aria-label'

'aria-label'?: string;

An accessibility label for this node.

property childNodes

childNodes: Iterable<Node<T>>;

The loaded children of this node.
Deprecated
Use collection.getChildren(node.key) instead.

property hasChildNodes

hasChildNodes: boolean;

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

property index

index?: number;

The index of this node within its parent.

property key

key: Key;

A unique key for the node.

property level

level: number;

The level of depth this node is at in the heirarchy.

property nextKey

nextKey?: Key | null;

The key of the node after this node.

property parentKey

parentKey?: Key | null;

The key of the parent node.

property prevKey

prevKey?: Key | null;

The key of the node before this node.

property props

props?: any;

Additional properties specific to a particular node type.

property rendered

rendered: ReactNode;

The rendered contents of this node (e.g. JSX).

property shouldInvalidate

shouldInvalidate?: (context: unknown) => boolean;

property textValue

textValue: string;

A string value for this node, used for features like typeahead.

property type

type: string;

The type of item this node represents.

property value

value: T | null;

The object value the node was created from.

property wrapper

wrapper?: (element: ReactElement) => ReactElement;

A function that should be called to wrap the rendered node.

interface PressEvent

interface PressEvent {}

property altKey

altKey: boolean;

Whether the alt keyboard modifier was held during the press event.

property ctrlKey

ctrlKey: boolean;

Whether the ctrl keyboard modifier was held during the press event.

property metaKey

metaKey: boolean;

Whether the meta keyboard modifier was held during the press event.

property pointerType

pointerType: PointerType;

The pointer type that triggered the press event.

property shiftKey

shiftKey: boolean;

Whether the shift keyboard modifier was held during the press event.

property target

target: Element;

The target element of the press event.

property type

type: 'pressstart' | 'pressend' | 'pressup' | 'press';

The type of press event being fired.

interface PressEvents

interface PressEvents {}

property onPress

onPress?: (e: PressEvent) => void;

Handler that is called when the press is released over the target.

property onPressChange

onPressChange?: (isPressed: boolean) => void;

Handler that is called when the press state changes.

property onPressEnd

onPressEnd?: (e: PressEvent) => void;

Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.

property onPressStart

onPressStart?: (e: PressEvent) => void;

Handler that is called when a press interaction starts.

property onPressUp

onPressUp?: (e: PressEvent) => void;

Handler that is called when a press is released over the target, regardless of whether it started on the target or not.

interface RangeInputBase

interface RangeInputBase<T> {}

property maxValue

maxValue?: T;

The largest value allowed for the input.

property minValue

minValue?: T;

The smallest value allowed for the input.

property step

step?: T;

The amount that the input value changes with each increment or decrement "tick".

interface RangeValue

interface RangeValue<T> {}

property end

end: T;

The end value of the range.

property start

start: T;

The start value of the range.

interface Removable

interface Removable<T, R> {}

property isRemovable

isRemovable?: boolean;

property onRemove

onRemove?: (value: T, event?: SyntheticEvent) => R;

interface RootDropTarget

interface RootDropTarget {}

property type

type: 'root';

The event type.

interface ScrollEvent

interface ScrollEvent {}

property deltaX

deltaX: number;

The amount moved in the X direction since the last event.

property deltaY

deltaY: number;

The amount moved in the Y direction since the last event.

interface ScrollEvents

interface ScrollEvents {}

property onScroll

onScroll?: (e: ScrollEvent) => void;

Handler that is called when the scroll wheel moves.

interface SectionProps

interface SectionProps<T> {}

property 'aria-label'

'aria-label'?: string;

An accessibility label for the section.

property children

children: ItemElement<T> | ItemElement<T>[] | ItemRenderer<T>;

Static child items or a function to render children.

property items

items?: Iterable<T>;

Item objects in the section.

property title

title?: ReactNode;

Rendered contents of the section, e.g. a header.

interface SingleSelection

interface SingleSelection {}

property defaultSelectedKey

defaultSelectedKey?: Key;

The initial selected key in the collection (uncontrolled).

property disallowEmptySelection

disallowEmptySelection?: boolean;

Whether the collection allows empty selection.

property onSelectionChange

onSelectionChange?: (key: Key) => any;

Handler that is called when the selection changes.

property selectedKey

selectedKey?: Key | null;

The currently selected key in the collection (controlled).

interface Sortable

interface Sortable {}

property onSortChange

onSortChange?: (descriptor: SortDescriptor) => any;

Handler that is called when the sorted column or direction changes.

property sortDescriptor

sortDescriptor?: SortDescriptor;

The current sorted column and direction.

interface SortDescriptor

interface SortDescriptor {}

property column

column?: Key;

The key of the column to sort by.

property direction

direction?: SortDirection;

The direction to sort by.

interface SpectrumHelpTextProps

interface SpectrumHelpTextProps extends HelpTextProps, Validation {}

property isDisabled

isDisabled?: boolean;

Whether the description is displayed with lighter text.

property showErrorIcon

showErrorIcon?: boolean;

Whether an error icon is rendered.

interface SpectrumLabelableProps

interface SpectrumLabelableProps extends LabelableProps {}

property contextualHelp

contextualHelp?: ReactNode;

A ContextualHelp element to place next to the label.

property isRequired

isRequired?: boolean;

Whether the label is labeling a required field or group.

property labelAlign

labelAlign?: Alignment;

The label's horizontal alignment relative to the element it is labeling. 'start'

property labelPosition

labelPosition?: LabelPosition;

The label's overall position relative to the element it is labeling. 'top'

property necessityIndicator

necessityIndicator?: NecessityIndicator;

Whether the required state should be shown as an icon or text. 'icon'

interface SpectrumSelectionProps

interface SpectrumSelectionProps {}

property selectionStyle

selectionStyle?: 'checkbox' | 'highlight';

How selection should be displayed.

interface SpectrumTextInputBase

interface SpectrumTextInputBase {}

property placeholder

placeholder?: string;

Temporary text that occupies the text input when it is empty. Please use help text instead.
Deprecated

interface StyleProps

interface StyleProps {}

property alignSelf

alignSelf?: Responsive<
    | 'auto'
    | 'normal'
    | 'start'
    | 'end'
    | 'center'
    | 'flex-start'
    | 'flex-end'
    | 'self-start'
    | 'self-end'
    | 'stretch'
>;

Overrides the alignItems property of a flex or grid container. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self).

property bottom

bottom?: Responsive<DimensionValue>;

The bottom position for the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom).

property end

end?: Responsive<DimensionValue>;

The logical end position for the element, depending on layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end).

property flex

flex?: Responsive<string | number | boolean>;

When used in a flex layout, specifies how the element will grow or shrink to fit the space available. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex).

property flexBasis

flexBasis?: Responsive<number | string>;

When used in a flex layout, specifies the initial main size of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis).

property flexGrow

flexGrow?: Responsive<number>;

When used in a flex layout, specifies how the element will grow to fit the space available. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow).

property flexShrink

flexShrink?: Responsive<number>;

When used in a flex layout, specifies how the element will shrink to fit the space available. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink).

property gridArea

gridArea?: Responsive<string>;

When used in a grid layout, specifies the named grid area that the element should be placed in within the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area).

property gridColumn

gridColumn?: Responsive<string>;

When used in a grid layout, specifies the column the element should be placed in within the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column).

property gridColumnEnd

gridColumnEnd?: Responsive<string>;

When used in a grid layout, specifies the ending column to span within the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end).

property gridColumnStart

gridColumnStart?: Responsive<string>;

When used in a grid layout, specifies the starting column to span within the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start).

property gridRow

gridRow?: Responsive<string>;

When used in a grid layout, specifies the row the element should be placed in within the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row).

property gridRowEnd

gridRowEnd?: Responsive<string>;

When used in a grid layout, specifies the ending row to span within the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end).

property gridRowStart

gridRowStart?: Responsive<string>;

When used in a grid layout, specifies the starting row to span within the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start).

property height

height?: Responsive<DimensionValue>;

The height of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height).

property isHidden

isHidden?: Responsive<boolean>;

Hides the element.

property justifySelf

justifySelf?: Responsive<
    | 'auto'
    | 'normal'
    | 'start'
    | 'end'
    | 'flex-start'
    | 'flex-end'
    | 'self-start'
    | 'self-end'
    | 'center'
    | 'left'
    | 'right'
    | 'stretch'
>;

Specifies how the element is justified inside a flex or grid container. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self).

property left

left?: Responsive<DimensionValue>;

The left position for the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/left). Consider using start instead for RTL support.

property margin

margin?: Responsive<DimensionValue>;

The margin for all four sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin).

property marginBottom

marginBottom?: Responsive<DimensionValue>;

The margin for the bottom side of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom).

property marginEnd

marginEnd?: Responsive<DimensionValue>;

The margin for the logical end side of an element, depending on layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-end).

property marginStart

marginStart?: Responsive<DimensionValue>;

The margin for the logical start side of the element, depending on layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-start).

property marginTop

marginTop?: Responsive<DimensionValue>;

The margin for the top side of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top).

property marginX

marginX?: Responsive<DimensionValue>;

The margin for both the left and right sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin).

property marginY

marginY?: Responsive<DimensionValue>;

The margin for both the top and bottom sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin).

property maxHeight

maxHeight?: Responsive<DimensionValue>;

The maximum height of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height).

property maxWidth

maxWidth?: Responsive<DimensionValue>;

The maximum width of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width).

property minHeight

minHeight?: Responsive<DimensionValue>;

The minimum height of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height).

property minWidth

minWidth?: Responsive<DimensionValue>;

The minimum width of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width).

property order

order?: Responsive<number>;

The layout order for the element within a flex or grid container. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/order).

property position

position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>;

Specifies how the element is positioned. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/position).

property right

right?: Responsive<DimensionValue>;

The right position for the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/right). Consider using start instead for RTL support.

property start

start?: Responsive<DimensionValue>;

The logical start position for the element, depending on layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start).

property top

top?: Responsive<DimensionValue>;

The top position for the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/top).

property UNSAFE_className

UNSAFE_className?: string;

Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use style props instead.

property UNSAFE_style

UNSAFE_style?: CSSProperties;

Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/Element/style) for the element. Only use as a **last resort**. Use style props instead.

property width

width?: Responsive<DimensionValue>;

The width of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width).

property zIndex

zIndex?: Responsive<number>;

The stacking order for the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).

interface TextDropItem

interface TextDropItem {}

property kind

kind: 'text';

The item kind.

property types

types: Set<string>;

The drag types available for this item. These are often mime types, but may be custom app-specific types.

method getText

getText: (type: string) => Promise<string>;

Returns the data for the given type as a string.

interface TextInputBase

interface TextInputBase {}

property placeholder

placeholder?: string;

Temporary text that occupies the text input when it is empty.

interface TextInputDOMEvents

interface TextInputDOMEvents {}

property onBeforeInput

onBeforeInput?: FormEventHandler<HTMLInputElement>;

Handler that is called when the input value is about to be modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event).

property onCompositionEnd

onCompositionEnd?: CompositionEventHandler<HTMLInputElement>;

Handler that is called when a text composition system completes or cancels the current text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event).

property onCompositionStart

onCompositionStart?: CompositionEventHandler<HTMLInputElement>;

Handler that is called when a text composition system starts a new text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event).

property onCompositionUpdate

onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>;

Handler that is called when a new character is received in the current text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionupdate_event).

property onCopy

onCopy?: ClipboardEventHandler<HTMLInputElement>;

Handler that is called when the user copies text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncopy).

property onCut

onCut?: ClipboardEventHandler<HTMLInputElement>;

Handler that is called when the user cuts text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncut).

property onInput

onInput?: FormEventHandler<HTMLInputElement>;

Handler that is called when the input value is modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event).

property onPaste

onPaste?: ClipboardEventHandler<HTMLInputElement>;

Handler that is called when the user pastes text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/onpaste).

property onSelect

onSelect?: ReactEventHandler<HTMLInputElement>;

Handler that is called when text in the input is selected. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event).

interface TextInputDOMProps

interface TextInputDOMProps extends DOMProps, TextInputDOMEvents {}

property autoComplete

autoComplete?: string;

Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).

property inputMode

inputMode?:
    | 'none'
    | 'text'
    | 'tel'
    | 'url'
    | 'email'
    | 'numeric'
    | 'decimal'
    | 'search';

Hints at the type of data that might be entered by the user while editing the element or its contents. See [MDN](https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute).

property maxLength

maxLength?: number;

The maximum number of characters supported by the input. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefmaxlength).

property minLength

minLength?: number;

The minimum number of characters required by the input. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefminlength).

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 pattern

pattern?: string;

Regex pattern that the value of the input must match to be valid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefpattern).

property placeholder

placeholder?: string;

Content that appears in the input when it is empty. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefplaceholder).

property type

type?: 'text' | 'search' | 'url' | 'tel' | 'email' | 'password' | (string & {});

The type of input to render. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype).

interface Validation

interface Validation {}

property isRequired

isRequired?: boolean;

Whether user input is required on the input before form submission. Often paired with the necessityIndicator prop to add a visual indicator to the input.

property validationState

validationState?: ValidationState;

Whether the input should display its "valid" or "invalid" visual styling.

interface ValueBase

interface ValueBase<T, C = T> {}

property defaultValue

defaultValue?: T;

The default value (uncontrolled).

property onChange

onChange?: (value: C) => void;

Handler that is called when the value changes.

property value

value?: T;

The current value (controlled).

interface ViewStyleProps

interface ViewStyleProps<C extends ColorVersion> extends StyleProps {}

property backgroundColor

backgroundColor?: Responsive<BackgroundColor[C]>;

The background color for the element.

property borderBottomColor

borderBottomColor?: Responsive<BorderColor[C]>;

The color of the bottom border. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color).

property borderBottomEndRadius

borderBottomEndRadius?: Responsive<BorderRadiusValue>;

The border radius for the bottom end corner of the element, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-end-radius).

property borderBottomStartRadius

borderBottomStartRadius?: Responsive<BorderRadiusValue>;

The border radius for the bottom start corner of the element, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-start-radius).

property borderBottomWidth

borderBottomWidth?: Responsive<BorderSizeValue>;

The width of the bottom border. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width).

property borderColor

borderColor?: Responsive<BorderColor[C]>;

The color of the element's border on all four sides. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color).

property borderEndColor

borderEndColor?: Responsive<BorderColor[C]>;

The color of the border on the logical end side, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-color).

property borderEndWidth

borderEndWidth?: Responsive<BorderSizeValue>;

The width of the border on the logical end side, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-width).

property borderRadius

borderRadius?: Responsive<BorderRadiusValue>;

The border radius on all four sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius).

property borderStartColor

borderStartColor?: Responsive<BorderColor[C]>;

The color of the border on the logical start side, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-color).

property borderStartWidth

borderStartWidth?: Responsive<BorderSizeValue>;

The width of the border on the logical start side, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-width).

property borderTopColor

borderTopColor?: Responsive<BorderColor[C]>;

The color of the top border. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color).

property borderTopEndRadius

borderTopEndRadius?: Responsive<BorderRadiusValue>;

The border radius for the top end corner of the element, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-end-radius).

property borderTopStartRadius

borderTopStartRadius?: Responsive<BorderRadiusValue>;

The border radius for the top start corner of the element, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-start-radius).

property borderTopWidth

borderTopWidth?: Responsive<BorderSizeValue>;

The width of the top border. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width).

property borderWidth

borderWidth?: Responsive<BorderSizeValue>;

The width of the element's border on all four sides. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width).

property borderXColor

borderXColor?: Responsive<BorderColor[C]>;

The color of the left and right borders. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color).

property borderXWidth

borderXWidth?: Responsive<BorderSizeValue>;

The width of the left and right borders. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width).

property borderYColor

borderYColor?: Responsive<BorderColor[C]>;

The color of the top and bottom borders. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width).

property borderYWidth

borderYWidth?: Responsive<BorderSizeValue>;

The width of the top and bottom borders. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width).

property colorVersion

colorVersion?: C;

The Spectrum color token version number. 5

property overflow

overflow?: Responsive<string>;

Species what to do when the element's content is too long to fit its size. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow).

property padding

padding?: Responsive<DimensionValue>;

The padding for all four sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding).

property paddingBottom

paddingBottom?: Responsive<DimensionValue>;

The padding for the bottom side of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom).

property paddingEnd

paddingEnd?: Responsive<DimensionValue>;

The padding for the logical end side of an element, depending on layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-end).

property paddingStart

paddingStart?: Responsive<DimensionValue>;

The padding for the logical start side of the element, depending on layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-start).

property paddingTop

paddingTop?: Responsive<DimensionValue>;

The padding for the top side of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top).

property paddingX

paddingX?: Responsive<DimensionValue>;

The padding for both the left and right sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding).

property paddingY

paddingY?: Responsive<DimensionValue>;

The padding for both the top and bottom sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding).

Type Aliases

type Alignment

type Alignment = 'start' | 'end';

type BackgroundColor

type BackgroundColor = {
    5: BackgroundColorValue;
    6: BackgroundColorValueV6;
};

type BackgroundColorAlias

type BackgroundColorAlias = 'default' | 'disabled' | 'transparent' | 'label-gray';

type BackgroundColorValue

type BackgroundColorValue = BackgroundColorAlias | ColorValue;

type BackgroundColorValueV6

type BackgroundColorValueV6 = BackgroundColorAlias | ColorValueV6;

type BaseEvent

type BaseEvent<T extends SyntheticEvent> = T & {
    /**
     * Use continuePropagation.
     * @deprecated */
    stopPropagation(): void;
    continuePropagation(): void;
};

type BorderColor

type BorderColor = {
    5: BorderColorValue;
    6: BorderColorValueV6;
};

type BorderColorAlias

type BorderColorAlias =
    | 'negative'
    | 'notice'
    | 'positive'
    | 'informative'
    | 'hover'
    | 'down'
    | 'focus'
    | 'mouse-focus'
    | 'disabled'
    | 'extralight'
    | 'light'
    | 'mid'
    | 'dark'
    | 'transparent'
    | 'translucent-dark'
    | 'translucent-darker';

type BorderColorValue

type BorderColorValue = 'default' | BorderColorAlias | ColorValue;

type BorderColorValueV6

type BorderColorValueV6 = BorderColorAlias | ColorValueV6;

type BorderRadiusValue

type BorderRadiusValue = 'xsmall' | 'small' | 'regular' | 'medium' | 'large';

type BorderSizeValue

type BorderSizeValue = 'thin' | 'thick' | 'thicker' | 'thickest';

type CollectionChildren

type CollectionChildren<T> =
    | CollectionElement<T>
    | CollectionElement<T>[]
    | ((item: T) => CollectionElement<T>);

type CollectionElement

type CollectionElement<T> = SectionElement<T> | ItemElement<T>;

type ColorValue

type ColorValue =
    | 'celery-400'
    | 'celery-500'
    | 'celery-600'
    | 'celery-700'
    | 'chartreuse-400'
    | 'chartreuse-500'
    | 'chartreuse-600'
    | 'chartreuse-700'
    | 'yellow-400'
    | 'yellow-500'
    | 'yellow-600'
    | 'yellow-700'
    | 'magenta-400'
    | 'magenta-500'
    | 'magenta-600'
    | 'magenta-700'
    | 'fuchsia-400'
    | 'fuchsia-500'
    | 'fuchsia-600'
    | 'fuchsia-700'
    | 'purple-400'
    | 'purple-500'
    | 'purple-600'
    | 'purple-700'
    | 'indigo-400'
    | 'indigo-500'
    | 'indigo-600'
    | 'indigo-700'
    | 'seafoam-400'
    | 'seafoam-500'
    | 'seafoam-600'
    | 'seafoam-700'
    | 'red-400'
    | 'red-500'
    | 'red-600'
    | 'red-700'
    | 'orange-400'
    | 'orange-500'
    | 'orange-600'
    | 'orange-700'
    | 'green-400'
    | 'green-500'
    | 'green-600'
    | 'green-700'
    | 'blue-400'
    | 'blue-500'
    | 'blue-600'
    | 'blue-700'
    | 'gray-50'
    | 'gray-75'
    | 'gray-100'
    | 'gray-200'
    | 'gray-300'
    | 'gray-400'
    | 'gray-500'
    | 'gray-600'
    | 'gray-700'
    | 'gray-800'
    | 'gray-900'
    | 'static-black'
    | 'static-white'
    | 'static-blue'
    | 'static-gray-50'
    | 'static-gray-75'
    | 'static-gray-100'
    | 'static-gray-200'
    | 'static-gray-300'
    | 'static-gray-400'
    | 'static-gray-500'
    | 'static-gray-600'
    | 'static-gray-700'
    | 'static-gray-800'
    | 'static-gray-900'
    | 'static-blue-200'
    | 'static-blue-300'
    | 'static-blue-400'
    | 'static-blue-500'
    | 'static-blue-600'
    | 'static-blue-700'
    | 'static-blue-800'
    | 'static-red-400'
    | 'static-red-500'
    | 'static-red-600'
    | 'static-red-700'
    | 'static-orange-400'
    | 'static-orange-500'
    | 'static-orange-600'
    | 'static-orange-700'
    | 'static-green-400'
    | 'static-green-500'
    | 'static-green-600'
    | 'static-green-700'
    | 'static-celery-200'
    | 'static-celery-300'
    | 'static-celery-400'
    | 'static-celery-500'
    | 'static-celery-600'
    | 'static-celery-700'
    | 'static-chartreuse-300'
    | 'static-chartreuse-400'
    | 'static-chartreuse-500'
    | 'static-chartreuse-600'
    | 'static-chartreuse-700'
    | 'static-yellow-200'
    | 'static-yellow-300'
    | 'static-yellow-400'
    | 'static-yellow-500'
    | 'static-yellow-600'
    | 'static-yellow-700'
    | 'static-magenta-200'
    | 'static-magenta-300'
    | 'static-magenta-400'
    | 'static-magenta-500'
    | 'static-magenta-600'
    | 'static-magenta-700'
    | 'static-fuchsia-400'
    | 'static-fuchsia-500'
    | 'static-fuchsia-600'
    | 'static-fuchsia-700'
    | 'static-purple-400'
    | 'static-purple-500'
    | 'static-purple-600'
    | 'static-purple-700'
    | 'static-purple-800'
    | 'static-indigo-200'
    | 'static-indigo-300'
    | 'static-indigo-400'
    | 'static-indigo-500'
    | 'static-indigo-600'
    | 'static-indigo-700'
    | 'static-seafoam-200'
    | 'static-seafoam-300'
    | 'static-seafoam-400'
    | 'static-seafoam-500'
    | 'static-seafoam-600'
    | 'static-seafoam-700'
    | SemanticColorValue;

type ColorValueV6

type ColorValueV6 =
    | 'gray-50'
    | 'gray-75'
    | 'gray-100'
    | 'gray-200'
    | 'gray-300'
    | 'gray-400'
    | 'gray-500'
    | 'gray-600'
    | 'gray-700'
    | 'gray-800'
    | 'gray-900'
    | 'red-100'
    | 'red-200'
    | 'red-300'
    | 'red-400'
    | 'red-500'
    | 'red-600'
    | 'red-700'
    | 'red-800'
    | 'red-900'
    | 'red-1000'
    | 'red-1100'
    | 'red-1200'
    | 'red-1300'
    | 'red-1400'
    | 'orange-100'
    | 'orange-200'
    | 'orange-300'
    | 'orange-400'
    | 'orange-500'
    | 'orange-600'
    | 'orange-700'
    | 'orange-800'
    | 'orange-900'
    | 'orange-1000'
    | 'orange-1100'
    | 'orange-1200'
    | 'orange-1300'
    | 'orange-1400'
    | 'yellow-100'
    | 'yellow-200'
    | 'yellow-300'
    | 'yellow-400'
    | 'yellow-500'
    | 'yellow-600'
    | 'yellow-700'
    | 'yellow-800'
    | 'yellow-900'
    | 'yellow-1000'
    | 'yellow-1100'
    | 'yellow-1200'
    | 'yellow-1300'
    | 'yellow-1400'
    | 'chartreuse-100'
    | 'chartreuse-200'
    | 'chartreuse-300'
    | 'chartreuse-400'
    | 'chartreuse-500'
    | 'chartreuse-600'
    | 'chartreuse-700'
    | 'chartreuse-800'
    | 'chartreuse-900'
    | 'chartreuse-1000'
    | 'chartreuse-1100'
    | 'chartreuse-1200'
    | 'chartreuse-1300'
    | 'chartreuse-1400'
    | 'celery-100'
    | 'celery-200'
    | 'celery-300'
    | 'celery-400'
    | 'celery-500'
    | 'celery-600'
    | 'celery-700'
    | 'celery-800'
    | 'celery-900'
    | 'celery-1000'
    | 'celery-1100'
    | 'celery-1200'
    | 'celery-1300'
    | 'celery-1400'
    | 'green-100'
    | 'green-200'
    | 'green-300'
    | 'green-400'
    | 'green-500'
    | 'green-600'
    | 'green-700'
    | 'green-800'
    | 'green-900'
    | 'green-1000'
    | 'green-1100'
    | 'green-1200'
    | 'green-1300'
    | 'green-1400'
    | 'seafoam-100'
    | 'seafoam-200'
    | 'seafoam-300'
    | 'seafoam-400'
    | 'seafoam-500'
    | 'seafoam-600'
    | 'seafoam-700'
    | 'seafoam-800'
    | 'seafoam-900'
    | 'seafoam-1000'
    | 'seafoam-1100'
    | 'seafoam-1200'
    | 'seafoam-1300'
    | 'seafoam-1400'
    | 'cyan-100'
    | 'cyan-200'
    | 'cyan-300'
    | 'cyan-400'
    | 'cyan-500'
    | 'cyan-600'
    | 'cyan-700'
    | 'cyan-800'
    | 'cyan-900'
    | 'cyan-1000'
    | 'cyan-1100'
    | 'cyan-1200'
    | 'cyan-1300'
    | 'cyan-1400'
    | 'blue-100'
    | 'blue-200'
    | 'blue-300'
    | 'blue-400'
    | 'blue-500'
    | 'blue-600'
    | 'blue-700'
    | 'blue-800'
    | 'blue-900'
    | 'blue-1000'
    | 'blue-1100'
    | 'blue-1200'
    | 'blue-1300'
    | 'blue-1400'
    | 'indigo-100'
    | 'indigo-200'
    | 'indigo-300'
    | 'indigo-400'
    | 'indigo-500'
    | 'indigo-600'
    | 'indigo-700'
    | 'indigo-800'
    | 'indigo-900'
    | 'indigo-1000'
    | 'indigo-1100'
    | 'indigo-1200'
    | 'indigo-1300'
    | 'indigo-1400'
    | 'purple-100'
    | 'purple-200'
    | 'purple-300'
    | 'purple-400'
    | 'purple-500'
    | 'purple-600'
    | 'purple-700'
    | 'purple-800'
    | 'purple-900'
    | 'purple-1000'
    | 'purple-1100'
    | 'purple-1200'
    | 'purple-1300'
    | 'purple-1400'
    | 'fuchsia-100'
    | 'fuchsia-200'
    | 'fuchsia-300'
    | 'fuchsia-400'
    | 'fuchsia-500'
    | 'fuchsia-600'
    | 'fuchsia-700'
    | 'fuchsia-800'
    | 'fuchsia-900'
    | 'fuchsia-1000'
    | 'fuchsia-1100'
    | 'fuchsia-1200'
    | 'fuchsia-1300'
    | 'fuchsia-1400'
    | 'magenta-100'
    | 'magenta-200'
    | 'magenta-300'
    | 'magenta-400'
    | 'magenta-500'
    | 'magenta-600'
    | 'magenta-700'
    | 'magenta-800'
    | 'magenta-900'
    | 'magenta-1000'
    | 'magenta-1100'
    | 'magenta-1200'
    | 'magenta-1300'
    | 'magenta-1400'
    | SemanticColorValue;

type ColorVersion

type ColorVersion = 5 | 6;

type DimensionValue

type DimensionValue =
    | 'size-0'
    | 'size-10'
    | 'size-25'
    | 'size-40'
    | 'size-50'
    | 'size-65'
    | 'size-75'
    | 'size-85'
    | 'size-100'
    | 'size-115'
    | 'size-125'
    | 'size-130'
    | 'size-150'
    | 'size-160'
    | 'size-175'
    | 'size-200'
    | 'size-225'
    | 'size-250'
    | 'size-275'
    | 'size-300'
    | 'size-325'
    | 'size-350'
    | 'size-400'
    | 'size-450'
    | 'size-500'
    | 'size-550'
    | 'size-600'
    | 'size-675'
    | 'size-700'
    | 'size-800'
    | 'size-900'
    | 'size-1000'
    | 'size-1200'
    | 'size-1250'
    | 'size-1600'
    | 'size-1700'
    | 'size-2000'
    | 'size-2400'
    | 'size-3000'
    | 'size-3400'
    | 'size-3600'
    | 'size-4600'
    | 'size-5000'
    | 'size-6000'
    | 'static-size-0'
    | 'static-size-10'
    | 'static-size-25'
    | 'static-size-50'
    | 'static-size-40'
    | 'static-size-65'
    | 'static-size-100'
    | 'static-size-115'
    | 'static-size-125'
    | 'static-size-130'
    | 'static-size-150'
    | 'static-size-160'
    | 'static-size-175'
    | 'static-size-200'
    | 'static-size-225'
    | 'static-size-250'
    | 'static-size-300'
    | 'static-size-400'
    | 'static-size-450'
    | 'static-size-500'
    | 'static-size-550'
    | 'static-size-600'
    | 'static-size-700'
    | 'static-size-800'
    | 'static-size-900'
    | 'static-size-1000'
    | 'static-size-1200'
    | 'static-size-1700'
    | 'static-size-2400'
    | 'static-size-2600'
    | 'static-size-3400'
    | 'static-size-3600'
    | 'static-size-4600'
    | 'static-size-5000'
    | 'static-size-6000'
    | 'single-line-height'
    | 'single-line-width'
    // This allows autocomplete to work properly and not collapse the above options into just `string`.
    // See https://github.com/microsoft/TypeScript/issues/29729.
    | (string & {})
    | number;

See the [Styling docs](styling.html#dimension-values) for a visualization of these values.

type Direction

type Direction = 'ltr' | 'rtl';

type DisabledBehavior

type DisabledBehavior = 'selection' | 'all';

type DOMRef

type DOMRef<T extends HTMLElement = HTMLElement> = Ref<DOMRefValue<T>>;

type DragPreviewRenderer

type DragPreviewRenderer = (
    items: DragItem[],
    callback: (node: HTMLElement) => void
) => void;

type DropItem

type DropItem = TextDropItem | FileDropItem | DirectoryDropItem;

type DropOperation

type DropOperation = 'copy' | 'link' | 'move' | 'cancel';

type DropPosition

type DropPosition = 'on' | 'before' | 'after';

type DropTarget

type DropTarget = RootDropTarget | ItemDropTarget;

type FocusableRef

type FocusableRef<T extends HTMLElement = HTMLElement> = Ref<FocusableRefValue<T>>;

type FocusStrategy

type FocusStrategy = 'first' | 'last';

type IconColorValue

type IconColorValue = 'negative' | 'notice' | 'positive' | 'informative';

type ItemElement

type ItemElement<T> = ReactElement<ItemProps<T>>;

type ItemRenderer

type ItemRenderer<T> = (item: T) => ItemElement<T>;

type KeyboardEvent

type KeyboardEvent = BaseEvent<ReactKeyboardEvent<any>>;

type LabelPosition

type LabelPosition = 'top' | 'side';

type LoadingState

type LoadingState =
    | 'loading'
    | 'sorting'
    | 'loadingMore'
    | 'error'
    | 'idle'
    | 'filtering';

type MoveEvent

type MoveEvent = MoveStartEvent | MoveMoveEvent | MoveEndEvent;

type NecessityIndicator

type NecessityIndicator = 'icon' | 'label';

type Orientation

type Orientation = 'horizontal' | 'vertical';

type PointerType

type PointerType = 'mouse' | 'pen' | 'touch' | 'keyboard' | 'virtual';

type Responsive

type Responsive<T> = T | ResponsiveProp<T>;

type ResponsiveProp

type ResponsiveProp<T> = {
    base?: T;
    S?: T;
    M?: T;
    L?: T;
    [custom: string]: T | undefined;
};

type SectionElement

type SectionElement<T> = ReactElement<SectionProps<T>>;

type Selection

type Selection = 'all' | Set<Key>;

type SelectionBehavior

type SelectionBehavior = 'toggle' | 'replace';

type SelectionMode

type SelectionMode = 'none' | 'single' | 'multiple';

type SemanticColorValue

type SemanticColorValue = 'negative' | 'notice' | 'positive' | 'informative';

type SortDirection

type SortDirection = 'ascending' | 'descending';

type ValidationState

type ValidationState = 'valid' | 'invalid';

Package Files (14)

Dependencies (0)

No dependencies.

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (1)

react

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@react-types/shared.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@react-types/shared)

HTML

<a href="https://www.jsdocs.io/package/@react-types/shared"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 1 month ago.
Package analyzed in 7908 ms.
Missing or incorrect documentation? Open an issue for this package.