@react-types/shared
- Version 3.29.0
- Published
- 87.3 kB
- No dependencies
- Apache-2.0 license
Install
npm i @react-types/shared
yarn add @react-types/shared
pnpm add @react-types/shared
Overview
Spectrum UI components in React
Index
Functions
Interfaces
StyleProps
- alignSelf
- bottom
- end
- flex
- flexBasis
- flexGrow
- flexShrink
- gridArea
- gridColumn
- gridColumnEnd
- gridColumnStart
- gridRow
- gridRowEnd
- gridRowStart
- height
- isHidden
- justifySelf
- left
- margin
- marginBottom
- marginEnd
- marginStart
- marginTop
- marginX
- marginY
- maxHeight
- maxWidth
- minHeight
- minWidth
- order
- position
- right
- start
- top
- UNSAFE_className
- UNSAFE_style
- width
- zIndex
ViewStyleProps
- backgroundColor
- borderBottomColor
- borderBottomEndRadius
- borderBottomStartRadius
- borderBottomWidth
- borderColor
- borderEndColor
- borderEndWidth
- borderRadius
- borderStartColor
- borderStartWidth
- borderTopColor
- borderTopEndRadius
- borderTopStartRadius
- borderTopWidth
- borderWidth
- borderXColor
- borderXWidth
- borderYColor
- borderYWidth
- colorVersion
- overflow
- padding
- paddingBottom
- paddingEnd
- paddingStart
- paddingTop
- paddingX
- paddingY
Type Aliases
- Alignment
- BackgroundColor
- BackgroundColorAlias
- BackgroundColorValue
- BackgroundColorValueV6
- BaseEvent
- BorderColor
- BorderColorAlias
- BorderColorValue
- BorderColorValueV6
- BorderRadiusValue
- BorderSizeValue
- CollectionChildren
- CollectionElement
- ColorValue
- ColorValueV6
- ColorVersion
- DimensionValue
- Direction
- DisabledBehavior
- DOMRef
- DragPreviewRenderer
- DropItem
- DropOperation
- DropPosition
- DropTarget
- FocusableRef
- FocusStrategy
- forwardRefType
- Href
- IconColorValue
- ItemElement
- ItemRenderer
- Key
- KeyboardEvent
- LabelPosition
- LoadingState
- MoveEvent
- NecessityIndicator
- Orientation
- PointerType
- Responsive
- ResponsiveProp
- RouterOptions
- SectionElement
- Selection
- SelectionBehavior
- SelectionMode
- SemanticColorValue
- SortDirection
- ValidationError
- ValidationErrors
- ValidationFunction
- ValidationState
Functions
function forwardRef
forwardRef: <T, P = {}>( render: (props: P, ref: Ref<T>) => ReactElement | null) => (props: P & RefAttributes<T>) => ReactElement | null;
Interfaces
interface AriaLabelingProps
interface AriaLabelingProps {}
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.
interface AriaValidationProps
interface AriaValidationProps {}
property 'aria-errormessage'
'aria-errormessage'?: string;
Identifies the element that provides an error message for the object.
interface AsyncLoadable
interface AsyncLoadable {}
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.
interface BaseMoveEvent
interface BaseMoveEvent {}
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.
interface BoxAlignmentStyleProps
interface BoxAlignmentStyleProps {}
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).
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.
method UNSTABLE_filter
UNSTABLE_filter: (filterFn: (nodeValue: string) => boolean) => Collection<T>;
Filters the collection using the given function.
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.
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 | null;
interface DragDropEvent
interface DragDropEvent {}
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 | null>;
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
, andonItemDrop
.
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 GroupDOMAttributes
interface GroupDOMAttributes extends Omit<DOMAttributes<HTMLElement>, 'role'> {}
property role
role?: 'group' | 'region' | 'presentation';
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 | ((v: ValidationResult) => 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 InputDOMProps
interface InputDOMProps {}
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).
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> extends LinkDOMProps {}
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 | 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, ornull
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.
interface KeyboardEvents
interface KeyboardEvents {}
interface LabelableProps
interface LabelableProps {}
property label
label?: ReactNode;
The content to display as the label.
interface LayoutDelegate
interface LayoutDelegate {}
A LayoutDelegate provides layout information for collection items.
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
andto
.
method getVisibleRect
getVisibleRect: () => Rect;
Returns the visible rectangle of the collection.
interface LinkDOMProps
interface LinkDOMProps {}
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).
interface LongPressEvent
interface LongPressEvent extends Omit<PressEvent, 'type' | 'continuePropagation'> {}
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 {}
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) => void;
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 hierarchy.
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 render
render?: (node: Node<any>) => ReactElement;
A function that renders this node to a React Element in the DOM.
property rendered
rendered: ReactNode;
The rendered contents of this node (e.g. JSX).
property shouldInvalidate
shouldInvalidate?: (context: any) => 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.
property x
x: number;
X position relative to the target.
property y
y: number;
Y position relative to the target.
method continuePropagation
continuePropagation: () => void;
By default, press events stop propagation to parent elements. In cases where a handler decides not to handle a specific event, it can call
continuePropagation()
to allow a parent to handle it.
interface PressEvents
interface PressEvents {}
property onClick
onClick?: (e: MouseEvent<FocusableElement>) => void;
**Not recommended – use
onPress
instead.**onClick
is an alias foronPress
provided for compatibility with other libraries.onPress
provides additional event details for non-mouse interactions.
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> {}
interface RangeValue
interface RangeValue<T> {}
interface Rect
interface Rect {}
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 RouterConfig
interface RouterConfig {}
This type allows configuring link props with router options and type-safe URLs via TS module augmentation. By default, this is an empty type. Extend with
href
androuterOptions
properties to configure your router.
interface ScrollEvent
interface ScrollEvent {}
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) => void;
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 {}
interface SpectrumFieldValidation
interface SpectrumFieldValidation<T> extends Omit<Validation<T>, 'isInvalid' | 'validationState'> {}
property validationState
validationState?: ValidationState;
Whether the input should display its "valid" or "invalid" visual styling.
interface SpectrumHelpTextProps
interface SpectrumHelpTextProps extends HelpTextProps {}
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/HTMLElement/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 {}
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, InputDOMProps, 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 autoCorrect
autoCorrect?: string;
An attribute that takes as its value a space-separated string that describes what, if any, type of autocomplete functionality the input should provide. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autocomplete).
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 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 spellCheck
spellCheck?: string;
An enumerated attribute that defines whether the element may be checked for spelling errors. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck).
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<T = unknown> {}
property isInvalid
isInvalid?: boolean;
Whether the input value is invalid.
property isRequired
isRequired?: boolean;
Whether user input is required on the input before form submission.
property validate
validate?: (value: T) => ValidationError | true | null | undefined;
A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if
validationBehavior="native"
. For realtime validation, use theisInvalid
prop instead.
property validationBehavior
validationBehavior?: 'aria' | 'native';
Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA. 'aria'
property validationState
validationState?: ValidationState;
Deprecated
Use
isInvalid
instead.
interface ValidationResult
interface ValidationResult {}
property isInvalid
isInvalid: boolean;
Whether the input value is invalid.
property validationDetails
validationDetails: ValidityState;
The native validation details for the input.
property validationErrors
validationErrors: string[];
The current error messages for the input if it is invalid, otherwise an empty array.
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' | 'none';
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 | null) => 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 forwardRefType
type forwardRefType = typeof forwardRef;
type Href
type Href = RouterConfig extends { href: infer H } ? H : string;
type IconColorValue
type IconColorValue = 'negative' | 'notice' | 'positive' | 'informative';
type ItemElement
type ItemElement<T> = ReactElement<ItemProps<T>> | null;
type ItemRenderer
type ItemRenderer<T> = (item: T) => ItemElement<T>;
type Key
type Key = string | number;
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 RouterOptions
type RouterOptions = RouterConfig extends { routerOptions: infer O } ? O : never;
type SectionElement
type SectionElement<T> = ReactElement<SectionProps<T>> | null;
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 ValidationError
type ValidationError = string | string[];
type ValidationErrors
type ValidationErrors = Record<string, ValidationError>;
type ValidationFunction
type ValidationFunction<T> = (value: T) => ValidationError | true | null | undefined;
type ValidationState
type ValidationState = 'valid' | 'invalid';
Package Files (15)
Dependencies (0)
No dependencies.
Dev Dependencies (0)
No dev dependencies.
Peer Dependencies (1)
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[](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 .
Package analyzed in 4743 ms. - Missing or incorrect documentation? Open an issue for this package.