@react-ui-types/shared

property 'aria-describedby'

'aria-describedby'?: string;

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

property 'aria-details'

'aria-details'?: string;

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

property 'aria-label'

'aria-label'?: string;

• Defines a string value that labels the current element.

property 'aria-labelledby'

'aria-labelledby'?: string;

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

property 'aria-errormessage'

'aria-errormessage'?: string;

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

property isLoading

isLoading?: boolean;

• Whether the items are currently loading.

property onLoadMore

onLoadMore?: () => any;

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

property alignContent

alignContent?:
    | '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?:
    | '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?: DimensionValue;

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

property gap

gap?: 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?:
    | '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?: DimensionValue;

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

property size

readonly size: number;

• The number of items in the collection.

method getFirstKey

getFirstKey: () => Key | null;

• Get the first key in the collection.

method getItem

getItem: (key: Key) => T;

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

property children

children: CollectionChildren<T>;

• The contents of the collection.

property disabledKeys

disabledKeys?: Iterable<Key>;

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

property items

items?: Iterable<T>;

• Item objects in the collection.

property dragDelegate

dragDelegate?: DragDelegate;

property dropDelegate

dropDelegate?: DropDelegate;

property id

id?: string;

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

method UNSAFE_getDOMNode

UNSAFE_getDOMNode: () => T;

method getAllowedDropOperations

getAllowedDropOperations: (target: DropTarget) => DropOperation;

method onDragEnd

onDragEnd: (target: DropTarget, dropOperation: DropOperation) => void;

method prepareDragData

prepareDragData: (target: DragTarget, dataTransfer: DataTransfer) => void;

method renderDragView

renderDragView: (items: Array<any>) => ReactNode;

method shouldAllowDrag

shouldAllowDrag: (target: DragTarget) => boolean;

property key

key: Key;

• The key of the view being dragged.

property type

type: string;

• The type of view being dragged.

method getAllowedDropPositions

getAllowedDropPositions: (target: DropTarget) => DropPosition;

method getDropOperation

getDropOperation: (
    target: DropTarget,
    allowedOperations: DropOperation
) => DropOperation;

method onDrop

onDrop: (
    target: DropTarget,
    dataTransfer: DataTransfer,
    dropOperation: DropOperation
) => void;

method overrideDropTarget

overrideDropTarget: (target: DropTarget) => DropTarget;

method shouldAcceptDrop

shouldAcceptDrop: (target: DropTarget, types: Set<string>) => boolean;

property dropPosition

dropPosition: DropPosition;

property key

key: Key | null;

• The key of the view being dropped on or between. If null, it represents the entire collection view.

property type

type: string;

• The type of view being dropped on or between.

property defaultExpandedKeys

defaultExpandedKeys?: Iterable<Key>;

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

property expandedKeys

expandedKeys?: Iterable<Key>;

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

property onExpandedChange

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

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

property direction

direction?: '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?: boolean | 'wrap' | 'nowrap' | 'wrap-reverse';

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

property excludeFromTabOrder

excludeFromTabOrder?: boolean;

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

property autoFocus

autoFocus?: boolean;

• Whether the element should receive focus on render.

method focus

focus: () => void;

property onBlur

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

• Handler that is called when the element loses focus.

property onFocus

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

• Handler that is called when the element receives focus.

property onFocusChange

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

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

property areas

areas?: string[];

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

property autoColumns

autoColumns?: 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?: '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?: 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?: 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?:
    | '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?: string | DimensionValue[];

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

property pointerType

pointerType: 'mouse' | 'pen';

• The pointer type that triggered the hover event.

property target

target: HTMLElement;

• The target element of the hover event.

property type

type: 'hoverstart' | 'hoverend';

• The type of hover event being fired.

property onHoverChange

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

• Handler that is called when the hover state changes.

property onHoverEnd

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

• Handler that is called when a hover interaction ends.

property onHoverStart

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

• Handler that is called when a hover interaction starts.

property isDisabled

isDisabled?: boolean;

• Whether the input is disabled.

property isReadOnly

isReadOnly?: boolean;

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

property '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 component

component?: any;

property disableHoverEffect

disableHoverEffect?: boolean;

property disableItemClick

disableItemClick?: boolean;

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.

property to

to?: string;

• Use for react router link component.

property UNSAFE_className

UNSAFE_className?: string;

property useCustomIcon

useCustomIcon?: boolean;

method getFirstKey

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

• Returns the first key, or null for none.

method getKeyAbove

getKeyAbove: (key: Key) => Key;

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

method getKeyBelow

getKeyBelow: (key: Key) => Key;

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

method getKeyForSearch

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

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

method getKeyLeftOf

getKeyLeftOf: (key: Key) => Key;

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

method getKeyPageAbove

getKeyPageAbove: (key: Key) => Key;

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

method getKeyPageBelow

getKeyPageBelow: (key: Key) => Key;

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

method getKeyRightOf

getKeyRightOf: (key: Key) => Key;

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

method getLastKey

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

• Returns the last key, or null for none.

property onKeyDown

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

• Handler that is called when a key is pressed.

property onKeyUp

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

• Handler that is called when a key is released.

property isRequired

isRequired?: boolean;

• Whether the label is labeling a required field or group.

property label

label?: ReactNode;

• The content to display as the label.

property defaultSelectedKeys

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

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

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.

property 'aria-label'

'aria-label'?: string;

• An accessibility label for this node.

property childNodes

childNodes: Iterable<Node<T>>;

• The loaded children of this node.

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;

• The key of the node after this node.

property parentKey

parentKey?: Key;

• The key of the parent node.

property prevKey

prevKey?: Key;

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

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

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

• The target element of the press event.

property type

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

• The type of press event being fired.

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.

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

property end

end: T;

• The end value of the range.

property start

start: T;

• The start value of the range.

property isRemovable

isRemovable?: boolean;

property onRemove

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

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.

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;

• The currently selected key in the collection (controlled).

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.

property column

column?: Key;

• The key of the column to sort by.

property direction

direction?: SortDirection;

• The direction to sort by.

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'

property 'aria-label'

'aria-label'?: string;

property 'aria-labelledby'

'aria-labelledby'?: string;

property allowsResizing

allowsResizing?: boolean;

property containerRef

containerRef?: MutableRefObject<HTMLDivElement>;

property id

id?: string;

property onMouseDown

onMouseDown?: MouseEventHandler;

property orientation

orientation?: Orientation;

property primaryMaxSize

primaryMaxSize?: number;

property primaryMinSize

primaryMinSize?: number;

property primaryPane

primaryPane?: 0 | 1;

property secondaryMaxSize

secondaryMaxSize?: number;

property secondaryMinSize

secondaryMinSize?: number;

property maxPos

maxPos: number;

property minPos

minPos: number;

property setMaxPos

setMaxPos: Dispatch<SetStateAction<number>>;

property setMinPos

setMinPos: Dispatch<SetStateAction<number>>;

property collapseToggle

collapseToggle: () => void;

property decrement

decrement: () => void;

property decrementToMin

decrementToMin: () => void;

property dragging

dragging: boolean;

property hovered

hovered: boolean;

property increment

increment: () => void;

property incrementToMax

incrementToMax: () => void;

property offset

offset: number;

property setDragging

setDragging: (value: boolean) => void;

property setHover

setHover: (value: boolean) => void;

property setOffset

setOffset: (value: number) => void;

property allowsCollapsing

allowsCollapsing?: boolean;

property allowsResizing

allowsResizing?: boolean;

property children

children: [ReactElement, ReactElement];

property defaultPrimarySize

defaultPrimarySize?: number;

property onResize

onResize?: (primarySize: number) => void;

property onResizeEnd

onResizeEnd?: (primarySize: number) => void;

property orientation

orientation?: Orientation;

property primaryMaxSize

primaryMaxSize?: number;

property primaryMinSize

primaryMinSize?: number;

property primaryPane

primaryPane?: 0 | 1;

property primarySize

primarySize?: number;

property secondaryMaxSize

secondaryMaxSize?: number;

property secondaryMinSize

secondaryMinSize?: number;

property containerState

containerState: SplitViewContainerState;

property handleState

handleState: SplitViewHandleState;

property allowsCollapsing

allowsCollapsing?: boolean;

property defaultPrimarySize

defaultPrimarySize?: number;

property onResize

onResize?: (primarySize: number) => void;

property onResizeEnd

onResizeEnd?: (primarySize: number) => void;

property primarySize

primarySize?: number;

property alignSelf

alignSelf?:
    | '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?: DimensionValue;

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

property end

end?: 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?: 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?: 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?: 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?: 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?: 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?: 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?: 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?: 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?: 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?: 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?: 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?: DimensionValue;

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

property isHidden

isHidden?: boolean;

• Hides the element.

property justifySelf

justifySelf?:
    | '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?: 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?: 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?: 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?: 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?: 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?: 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?: 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?: 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?: DimensionValue;

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

property maxWidth

maxWidth?: DimensionValue;

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

property minHeight

minHeight?: DimensionValue;

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

property minWidth

minWidth?: DimensionValue;

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

property order

order?: 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?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';