@react-types/shared

  • Version 3.13.0
  • Published
  • 69.8 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

Interfaces

Type Aliases

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

            property alignItems

            alignItems?: Responsive<
            | 'start'
            | 'end'
            | 'center'
            | 'stretch'
            | 'self-start'
            | 'self-end'
            | 'baseline'
            | 'first baseline'
            | 'last baseline'
            | 'safe center'
            | 'unsafe center'
            >;
            • The alignment of children within their container. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items). 'stretch'

            property columnGap

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

            property gap

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

            property justifyContent

            justifyContent?: Responsive<
            | 'start'
            | 'end'
            | 'center'
            | 'left'
            | 'right'
            | 'space-between'
            | 'space-around'
            | 'space-evenly'
            | 'stretch'
            | 'baseline'
            | 'first baseline'
            | 'last baseline'
            | 'safe center'
            | 'unsafe center'
            >;
            • The distribution of space around items along the main axis. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content). 'stretch'

            property rowGap

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

            interface Collection

            interface Collection<T> extends Iterable<T> {}
            • A generic interface to access a readonly sequential collection of unique keyed items.

            property size

            readonly size: number;
            • The number of items in the collection.

            method at

            at: (idx: number) => T;
            • Get an item by the index of its key.

            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.

            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 DirectoryItem

              interface DirectoryItem {}

                property kind

                kind: 'directory';

                  property name

                  name: string;

                    method getEntries

                    getEntries: () => AsyncIterable<FileItem | DirectoryItem>;

                      interface DOMProps

                      interface DOMProps {}

                        property id

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

                        interface DOMRefValue

                        interface DOMRefValue<T extends HTMLElement = HTMLElement> {}

                          method UNSAFE_getDOMNode

                          UNSAFE_getDOMNode: () => T;

                            interface DragDropEvent

                            interface DragDropEvent {}

                              property x

                              x: number;

                                property y

                                y: number;

                                  interface DragEndEvent

                                  interface DragEndEvent extends DragDropEvent {}

                                    property dropOperation

                                    dropOperation: DropOperation;

                                      property type

                                      type: 'dragend';

                                        interface DraggableCollectionEndEvent

                                        interface DraggableCollectionEndEvent extends DragEndEvent {}

                                          property keys

                                          keys: Set<Key>;

                                            interface DraggableCollectionMoveEvent

                                            interface DraggableCollectionMoveEvent extends DragMoveEvent {}

                                              property keys

                                              keys: Set<Key>;

                                                interface DraggableCollectionProps

                                                interface DraggableCollectionProps {}

                                                  property getAllowedDropOperations

                                                  getAllowedDropOperations?: () => DropOperation[];

                                                    property getItems

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

                                                      property onDragEnd

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

                                                        property onDragMove

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

                                                          property onDragStart

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

                                                            property preview

                                                            preview?: RefObject<DragPreviewRenderer>;

                                                              interface DraggableCollectionStartEvent

                                                              interface DraggableCollectionStartEvent extends DragStartEvent {}

                                                                property keys

                                                                keys: Set<Key>;

                                                                  interface DragItem

                                                                  interface DragItem {}

                                                                    index signature

                                                                    [type: string]: string;

                                                                      interface DragMoveEvent

                                                                      interface DragMoveEvent extends DragDropEvent {}

                                                                        property type

                                                                        type: 'dragmove';

                                                                          interface DragStartEvent

                                                                          interface DragStartEvent extends DragDropEvent {}

                                                                            property type

                                                                            type: 'dragstart';

                                                                              interface DragTypes

                                                                              interface DragTypes {}

                                                                                method has

                                                                                has: (type: string) => boolean;

                                                                                  interface DropActivateEvent

                                                                                  interface DropActivateEvent extends DragDropEvent {}

                                                                                    property type

                                                                                    type: 'dropactivate';

                                                                                      interface DropEnterEvent

                                                                                      interface DropEnterEvent extends DragDropEvent {}

                                                                                        property type

                                                                                        type: 'dropenter';

                                                                                          interface DropEvent

                                                                                          interface DropEvent extends DragDropEvent {}

                                                                                            property dropOperation

                                                                                            dropOperation: DropOperation;

                                                                                              property items

                                                                                              items: DropItem[];

                                                                                                property type

                                                                                                type: 'drop';

                                                                                                  interface DropExitEvent

                                                                                                  interface DropExitEvent extends DragDropEvent {}

                                                                                                    property type

                                                                                                    type: 'dropexit';

                                                                                                      interface DropMoveEvent

                                                                                                      interface DropMoveEvent extends DragDropEvent {}

                                                                                                        property type

                                                                                                        type: 'dropmove';

                                                                                                          interface DroppableCollectionActivateEvent

                                                                                                          interface DroppableCollectionActivateEvent extends DropActivateEvent {}

                                                                                                            property target

                                                                                                            target: DropTarget;

                                                                                                              interface DroppableCollectionDropEvent

                                                                                                              interface DroppableCollectionDropEvent extends DropEvent {}

                                                                                                                property target

                                                                                                                target: DropTarget;

                                                                                                                  interface DroppableCollectionEnterEvent

                                                                                                                  interface DroppableCollectionEnterEvent extends DropEnterEvent {}

                                                                                                                    property target

                                                                                                                    target: DropTarget;

                                                                                                                      interface DroppableCollectionExitEvent

                                                                                                                      interface DroppableCollectionExitEvent extends DropExitEvent {}

                                                                                                                        property target

                                                                                                                        target: DropTarget;

                                                                                                                          interface DroppableCollectionMoveEvent

                                                                                                                          interface DroppableCollectionMoveEvent extends DropMoveEvent {}

                                                                                                                            property target

                                                                                                                            target: DropTarget;

                                                                                                                              interface DroppableCollectionProps

                                                                                                                              interface DroppableCollectionProps {}

                                                                                                                                property getDropOperation

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

                                                                                                                                  property onDrop

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

                                                                                                                                    property onDropActivate

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

                                                                                                                                      property onDropEnter

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

                                                                                                                                        property onDropExit

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

                                                                                                                                          property onDropMove

                                                                                                                                          onDropMove?: (e: DroppableCollectionMoveEvent) => void;

                                                                                                                                            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 FileItem

                                                                                                                                              interface FileItem {}

                                                                                                                                                property kind

                                                                                                                                                kind: 'file';

                                                                                                                                                  property name

                                                                                                                                                  name: string;

                                                                                                                                                    property type

                                                                                                                                                    type: string;

                                                                                                                                                      method getFile

                                                                                                                                                      getFile: () => Promise<File>;

                                                                                                                                                        method getText

                                                                                                                                                        getText: () => Promise<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 FocusableProps

                                                                                                                                                              interface FocusableProps extends FocusEvents, 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 {}

                                                                                                                                                                      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.

                                                                                                                                                                      interface GridStyleProps

                                                                                                                                                                      interface GridStyleProps extends BoxAlignmentStyleProps, StyleProps {}

                                                                                                                                                                        property areas

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

                                                                                                                                                                        property autoColumns

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

                                                                                                                                                                        property autoFlow

                                                                                                                                                                        autoFlow?: Responsive<'row' | 'column' | 'row dense' | 'column dense'>;
                                                                                                                                                                        • Controls how auto-placed items are flowed into the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow).

                                                                                                                                                                        property autoRows

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

                                                                                                                                                                        property columns

                                                                                                                                                                        columns?: Responsive<string | DimensionValue[]>;
                                                                                                                                                                        • Defines the sizes of each column in the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns).

                                                                                                                                                                        property justifyItems

                                                                                                                                                                        justifyItems?: Responsive<
                                                                                                                                                                        | 'auto'
                                                                                                                                                                        | 'normal'
                                                                                                                                                                        | 'start'
                                                                                                                                                                        | 'end'
                                                                                                                                                                        | 'center'
                                                                                                                                                                        | 'left'
                                                                                                                                                                        | 'right'
                                                                                                                                                                        | 'stretch'
                                                                                                                                                                        | 'self-start'
                                                                                                                                                                        | 'self-end'
                                                                                                                                                                        | 'baseline'
                                                                                                                                                                        | 'first baseline'
                                                                                                                                                                        | 'last baseline'
                                                                                                                                                                        | 'safe center'
                                                                                                                                                                        | 'unsafe center'
                                                                                                                                                                        | 'legacy right'
                                                                                                                                                                        | 'legacy left'
                                                                                                                                                                        | 'legacy center'
                                                                                                                                                                        >;
                                                                                                                                                                        • Defines the default justifySelf for all items in the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items).

                                                                                                                                                                        property rows

                                                                                                                                                                        rows?: Responsive<string | DimensionValue[]>;
                                                                                                                                                                        • Defines the sizes of each row in the grid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows).

                                                                                                                                                                        interface HelpTextProps

                                                                                                                                                                        interface HelpTextProps {}

                                                                                                                                                                          property description

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

                                                                                                                                                                          property errorMessage

                                                                                                                                                                          errorMessage?: ReactNode;
                                                                                                                                                                          • An error message for the field.

                                                                                                                                                                          interface HoverEvent

                                                                                                                                                                          interface HoverEvent {}

                                                                                                                                                                            property pointerType

                                                                                                                                                                            pointerType: 'mouse' | 'pen';
                                                                                                                                                                            • The pointer type that triggered the hover event.

                                                                                                                                                                            property target

                                                                                                                                                                            target: HTMLElement;
                                                                                                                                                                            • The target element of the hover event.

                                                                                                                                                                            property type

                                                                                                                                                                            type: 'hoverstart' | 'hoverend';
                                                                                                                                                                            • The type of hover event being fired.

                                                                                                                                                                            interface HoverEvents

                                                                                                                                                                            interface HoverEvents {}

                                                                                                                                                                              property onHoverChange

                                                                                                                                                                              onHoverChange?: (isHovering: boolean) => void;
                                                                                                                                                                              • Handler that is called when the hover state changes.

                                                                                                                                                                              property onHoverEnd

                                                                                                                                                                              onHoverEnd?: (e: HoverEvent) => void;
                                                                                                                                                                              • Handler that is called when a hover interaction ends.

                                                                                                                                                                              property onHoverStart

                                                                                                                                                                              onHoverStart?: (e: HoverEvent) => void;
                                                                                                                                                                              • Handler that is called when a hover interaction starts.

                                                                                                                                                                              interface InputBase

                                                                                                                                                                              interface InputBase {}

                                                                                                                                                                                property isDisabled

                                                                                                                                                                                isDisabled?: boolean;
                                                                                                                                                                                • Whether the input is disabled.

                                                                                                                                                                                property isReadOnly

                                                                                                                                                                                isReadOnly?: boolean;
                                                                                                                                                                                • Whether the input can be selected but not changed by the user.

                                                                                                                                                                                interface ItemDropTarget

                                                                                                                                                                                interface ItemDropTarget {}

                                                                                                                                                                                  property dropPosition

                                                                                                                                                                                  dropPosition: DropPosition;

                                                                                                                                                                                    property key

                                                                                                                                                                                    key: Key;

                                                                                                                                                                                      property type

                                                                                                                                                                                      type: 'item';

                                                                                                                                                                                        interface ItemProps

                                                                                                                                                                                        interface ItemProps<T> {}

                                                                                                                                                                                          property 'aria-label'

                                                                                                                                                                                          'aria-label'?: string;
                                                                                                                                                                                          • An accessibility label for this item.

                                                                                                                                                                                          property childItems

                                                                                                                                                                                          childItems?: Iterable<T>;
                                                                                                                                                                                          • A list of child item objects. Used for dynamic collections.

                                                                                                                                                                                          property children

                                                                                                                                                                                          children: ReactNode;
                                                                                                                                                                                          • Rendered contents of the item or child items.

                                                                                                                                                                                          property hasChildItems

                                                                                                                                                                                          hasChildItems?: boolean;
                                                                                                                                                                                          • Whether this item has children, even if not loaded yet.

                                                                                                                                                                                          property textValue

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

                                                                                                                                                                                          property title

                                                                                                                                                                                          title?: ReactNode;
                                                                                                                                                                                          • Rendered contents of the item if children contains child items.

                                                                                                                                                                                          interface KeyboardDelegate

                                                                                                                                                                                          interface KeyboardDelegate {}

                                                                                                                                                                                            method getFirstKey

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

                                                                                                                                                                                            interface KeyboardEvents

                                                                                                                                                                                            interface KeyboardEvents {}

                                                                                                                                                                                              property onKeyDown

                                                                                                                                                                                              onKeyDown?: (e: KeyboardEvent) => void;
                                                                                                                                                                                              • Handler that is called when a key is pressed.

                                                                                                                                                                                              property onKeyUp

                                                                                                                                                                                              onKeyUp?: (e: KeyboardEvent) => void;
                                                                                                                                                                                              • Handler that is called when a key is released.

                                                                                                                                                                                              interface LabelableProps

                                                                                                                                                                                              interface LabelableProps {}

                                                                                                                                                                                                property label

                                                                                                                                                                                                label?: ReactNode;
                                                                                                                                                                                                • The content to display as the label.

                                                                                                                                                                                                interface LongPressEvent

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

                                                                                                                                                                                                  property type

                                                                                                                                                                                                  type: 'longpressstart' | 'longpressend' | 'longpress';
                                                                                                                                                                                                  • The type of long press event being fired.

                                                                                                                                                                                                  interface MoveEndEvent

                                                                                                                                                                                                  interface MoveEndEvent extends BaseMoveEvent {}

                                                                                                                                                                                                    property type

                                                                                                                                                                                                    type: 'moveend';
                                                                                                                                                                                                    • The type of move event being fired.

                                                                                                                                                                                                    interface MoveEvents

                                                                                                                                                                                                    interface MoveEvents {}

                                                                                                                                                                                                      property onMove

                                                                                                                                                                                                      onMove?: (e: MoveMoveEvent) => void;
                                                                                                                                                                                                      • Handler that is called when the element is moved.

                                                                                                                                                                                                      property onMoveEnd

                                                                                                                                                                                                      onMoveEnd?: (e: MoveEndEvent) => void;
                                                                                                                                                                                                      • Handler that is called when a move interaction ends.

                                                                                                                                                                                                      property onMoveStart

                                                                                                                                                                                                      onMoveStart?: (e: MoveStartEvent) => void;
                                                                                                                                                                                                      • Handler that is called when a move interaction starts.

                                                                                                                                                                                                      interface MoveMoveEvent

                                                                                                                                                                                                      interface MoveMoveEvent extends BaseMoveEvent {}

                                                                                                                                                                                                        property deltaX

                                                                                                                                                                                                        deltaX: number;
                                                                                                                                                                                                        • The amount moved in the X direction since the last event.

                                                                                                                                                                                                        property deltaY

                                                                                                                                                                                                        deltaY: number;
                                                                                                                                                                                                        • The amount moved in the Y direction since the last event.

                                                                                                                                                                                                        property type

                                                                                                                                                                                                        type: 'move';
                                                                                                                                                                                                        • The type of move event being fired.

                                                                                                                                                                                                        interface MoveStartEvent

                                                                                                                                                                                                        interface MoveStartEvent extends BaseMoveEvent {}

                                                                                                                                                                                                          property type

                                                                                                                                                                                                          type: 'movestart';
                                                                                                                                                                                                          • The type of move event being fired.

                                                                                                                                                                                                          interface MultipleSelection

                                                                                                                                                                                                          interface MultipleSelection {}

                                                                                                                                                                                                            property defaultSelectedKeys

                                                                                                                                                                                                            defaultSelectedKeys?: 'all' | Iterable<Key>;
                                                                                                                                                                                                            • The initial selected keys in the collection (uncontrolled).

                                                                                                                                                                                                            property disabledKeys

                                                                                                                                                                                                            disabledKeys?: Iterable<Key>;
                                                                                                                                                                                                            • The currently disabled keys in the collection (controlled).

                                                                                                                                                                                                            property disallowEmptySelection

                                                                                                                                                                                                            disallowEmptySelection?: boolean;
                                                                                                                                                                                                            • Whether the collection allows empty selection.

                                                                                                                                                                                                            property onSelectionChange

                                                                                                                                                                                                            onSelectionChange?: (keys: Selection) => any;
                                                                                                                                                                                                            • Handler that is called when the selection changes.

                                                                                                                                                                                                            property selectedKeys

                                                                                                                                                                                                            selectedKeys?: 'all' | Iterable<Key>;
                                                                                                                                                                                                            • The currently selected keys in the collection (controlled).

                                                                                                                                                                                                            property selectionMode

                                                                                                                                                                                                            selectionMode?: SelectionMode;
                                                                                                                                                                                                            • The type of selection that is allowed in the collection.

                                                                                                                                                                                                            interface Node

                                                                                                                                                                                                            interface Node<T> {}

                                                                                                                                                                                                              property 'aria-label'

                                                                                                                                                                                                              'aria-label'?: string;
                                                                                                                                                                                                              • An accessibility label for this node.

                                                                                                                                                                                                              property childNodes

                                                                                                                                                                                                              childNodes: Iterable<Node<T>>;
                                                                                                                                                                                                              • The loaded children of this node.

                                                                                                                                                                                                              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.

                                                                                                                                                                                                              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: HTMLElement;
                                                                                                                                                                                                                • The target element of the press event.

                                                                                                                                                                                                                property type

                                                                                                                                                                                                                type: 'pressstart' | 'pressend' | 'pressup' | 'press';
                                                                                                                                                                                                                • The type of press event being fired.

                                                                                                                                                                                                                interface PressEvents

                                                                                                                                                                                                                interface PressEvents {}

                                                                                                                                                                                                                  property onPress

                                                                                                                                                                                                                  onPress?: (e: PressEvent) => void;
                                                                                                                                                                                                                  • Handler that is called when the press is released over the target.

                                                                                                                                                                                                                  property onPressChange

                                                                                                                                                                                                                  onPressChange?: (isPressed: boolean) => void;
                                                                                                                                                                                                                  • Handler that is called when the press state changes.

                                                                                                                                                                                                                  property onPressEnd

                                                                                                                                                                                                                  onPressEnd?: (e: PressEvent) => void;
                                                                                                                                                                                                                  • Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.

                                                                                                                                                                                                                  property onPressStart

                                                                                                                                                                                                                  onPressStart?: (e: PressEvent) => void;
                                                                                                                                                                                                                  • Handler that is called when a press interaction starts.

                                                                                                                                                                                                                  property onPressUp

                                                                                                                                                                                                                  onPressUp?: (e: PressEvent) => void;
                                                                                                                                                                                                                  • Handler that is called when a press is released over the target, regardless of whether it started on the target or not.

                                                                                                                                                                                                                  interface RangeInputBase

                                                                                                                                                                                                                  interface RangeInputBase<T> {}

                                                                                                                                                                                                                    property maxValue

                                                                                                                                                                                                                    maxValue?: T;
                                                                                                                                                                                                                    • The largest value allowed for the input.

                                                                                                                                                                                                                    property minValue

                                                                                                                                                                                                                    minValue?: T;
                                                                                                                                                                                                                    • The smallest value allowed for the input.

                                                                                                                                                                                                                    property step

                                                                                                                                                                                                                    step?: T;
                                                                                                                                                                                                                    • The amount that the input value changes with each increment or decrement "tick".

                                                                                                                                                                                                                    interface RangeValue

                                                                                                                                                                                                                    interface RangeValue<T> {}

                                                                                                                                                                                                                      property end

                                                                                                                                                                                                                      end: T;
                                                                                                                                                                                                                      • The end value of the range.

                                                                                                                                                                                                                      property start

                                                                                                                                                                                                                      start: T;
                                                                                                                                                                                                                      • The start value of the range.

                                                                                                                                                                                                                      interface Removable

                                                                                                                                                                                                                      interface Removable<T, R> {}

                                                                                                                                                                                                                        property isRemovable

                                                                                                                                                                                                                        isRemovable?: boolean;

                                                                                                                                                                                                                          property onRemove

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

                                                                                                                                                                                                                            interface RootDropTarget

                                                                                                                                                                                                                            interface RootDropTarget {}

                                                                                                                                                                                                                              property type

                                                                                                                                                                                                                              type: 'root';

                                                                                                                                                                                                                                interface ScrollEvent

                                                                                                                                                                                                                                interface ScrollEvent {}

                                                                                                                                                                                                                                  property deltaX

                                                                                                                                                                                                                                  deltaX: number;
                                                                                                                                                                                                                                  • The amount moved in the X direction since the last event.

                                                                                                                                                                                                                                  property deltaY

                                                                                                                                                                                                                                  deltaY: number;
                                                                                                                                                                                                                                  • The amount moved in the Y direction since the last event.

                                                                                                                                                                                                                                  interface ScrollEvents

                                                                                                                                                                                                                                  interface ScrollEvents {}

                                                                                                                                                                                                                                    property onScroll

                                                                                                                                                                                                                                    onScroll?: (e: ScrollEvent) => void;
                                                                                                                                                                                                                                    • Handler that is called when the scroll wheel moves.

                                                                                                                                                                                                                                    interface SectionProps

                                                                                                                                                                                                                                    interface SectionProps<T> {}

                                                                                                                                                                                                                                      property 'aria-label'

                                                                                                                                                                                                                                      'aria-label'?: string;
                                                                                                                                                                                                                                      • An accessibility label for the section.

                                                                                                                                                                                                                                      property children

                                                                                                                                                                                                                                      children: ItemElement<T> | ItemElement<T>[] | ItemRenderer<T>;
                                                                                                                                                                                                                                      • Static child items or a function to render children.

                                                                                                                                                                                                                                      property items

                                                                                                                                                                                                                                      items?: Iterable<T>;
                                                                                                                                                                                                                                      • Item objects in the section.

                                                                                                                                                                                                                                      property title

                                                                                                                                                                                                                                      title?: ReactNode;
                                                                                                                                                                                                                                      • Rendered contents of the section, e.g. a header.

                                                                                                                                                                                                                                      interface SingleSelection

                                                                                                                                                                                                                                      interface SingleSelection {}

                                                                                                                                                                                                                                        property defaultSelectedKey

                                                                                                                                                                                                                                        defaultSelectedKey?: Key;
                                                                                                                                                                                                                                        • The initial selected key in the collection (uncontrolled).

                                                                                                                                                                                                                                        property disallowEmptySelection

                                                                                                                                                                                                                                        disallowEmptySelection?: boolean;
                                                                                                                                                                                                                                        • Whether the collection allows empty selection.

                                                                                                                                                                                                                                        property onSelectionChange

                                                                                                                                                                                                                                        onSelectionChange?: (key: Key) => any;
                                                                                                                                                                                                                                        • Handler that is called when the selection changes.

                                                                                                                                                                                                                                        property selectedKey

                                                                                                                                                                                                                                        selectedKey?: Key | null;
                                                                                                                                                                                                                                        • The currently selected key in the collection (controlled).

                                                                                                                                                                                                                                        interface Sortable

                                                                                                                                                                                                                                        interface Sortable {}

                                                                                                                                                                                                                                          property onSortChange

                                                                                                                                                                                                                                          onSortChange?: (descriptor: SortDescriptor) => any;
                                                                                                                                                                                                                                          • Handler that is called when the sorted column or direction changes.

                                                                                                                                                                                                                                          property sortDescriptor

                                                                                                                                                                                                                                          sortDescriptor?: SortDescriptor;
                                                                                                                                                                                                                                          • The current sorted column and direction.

                                                                                                                                                                                                                                          interface SortDescriptor

                                                                                                                                                                                                                                          interface SortDescriptor {}

                                                                                                                                                                                                                                            property column

                                                                                                                                                                                                                                            column?: Key;
                                                                                                                                                                                                                                            • The key of the column to sort by.

                                                                                                                                                                                                                                            property direction

                                                                                                                                                                                                                                            direction?: SortDirection;
                                                                                                                                                                                                                                            • The direction to sort by.

                                                                                                                                                                                                                                            interface SpectrumHelpTextProps

                                                                                                                                                                                                                                            interface SpectrumHelpTextProps extends HelpTextProps, Validation {}

                                                                                                                                                                                                                                              property isDisabled

                                                                                                                                                                                                                                              isDisabled?: boolean;
                                                                                                                                                                                                                                              • Whether the description is displayed with lighter text.

                                                                                                                                                                                                                                              property showErrorIcon

                                                                                                                                                                                                                                              showErrorIcon?: boolean;
                                                                                                                                                                                                                                              • Whether an error icon is rendered.

                                                                                                                                                                                                                                              interface SpectrumLabelableProps

                                                                                                                                                                                                                                              interface SpectrumLabelableProps extends LabelableProps {}

                                                                                                                                                                                                                                                property isRequired

                                                                                                                                                                                                                                                isRequired?: boolean;
                                                                                                                                                                                                                                                • Whether the label is labeling a required field or group.

                                                                                                                                                                                                                                                property labelAlign

                                                                                                                                                                                                                                                labelAlign?: Alignment;
                                                                                                                                                                                                                                                • The label's horizontal alignment relative to the element it is labeling. 'start'

                                                                                                                                                                                                                                                property labelPosition

                                                                                                                                                                                                                                                labelPosition?: LabelPosition;
                                                                                                                                                                                                                                                • The label's overall position relative to the element it is labeling. 'top'

                                                                                                                                                                                                                                                property necessityIndicator

                                                                                                                                                                                                                                                necessityIndicator?: NecessityIndicator;
                                                                                                                                                                                                                                                • Whether the required state should be shown as an icon or text. 'icon'

                                                                                                                                                                                                                                                interface SpectrumSelectionProps

                                                                                                                                                                                                                                                interface SpectrumSelectionProps {}

                                                                                                                                                                                                                                                  property selectionStyle

                                                                                                                                                                                                                                                  selectionStyle?: 'checkbox' | 'highlight';
                                                                                                                                                                                                                                                  • How selection should be displayed.

                                                                                                                                                                                                                                                  interface SpectrumTextInputBase

                                                                                                                                                                                                                                                  interface SpectrumTextInputBase {}

                                                                                                                                                                                                                                                    property placeholder

                                                                                                                                                                                                                                                    placeholder?: string;
                                                                                                                                                                                                                                                    • Temporary text that occupies the text input when it is empty. Please use help text instead.

                                                                                                                                                                                                                                                      Deprecated

                                                                                                                                                                                                                                                    interface StyleProps

                                                                                                                                                                                                                                                    interface StyleProps {}

                                                                                                                                                                                                                                                      property alignSelf

                                                                                                                                                                                                                                                      alignSelf?: Responsive<
                                                                                                                                                                                                                                                      | 'auto'
                                                                                                                                                                                                                                                      | 'normal'
                                                                                                                                                                                                                                                      | 'start'
                                                                                                                                                                                                                                                      | 'end'
                                                                                                                                                                                                                                                      | 'center'
                                                                                                                                                                                                                                                      | 'flex-start'
                                                                                                                                                                                                                                                      | 'flex-end'
                                                                                                                                                                                                                                                      | 'self-start'
                                                                                                                                                                                                                                                      | 'self-end'
                                                                                                                                                                                                                                                      | 'stretch'
                                                                                                                                                                                                                                                      >;
                                                                                                                                                                                                                                                      • Overrides the alignItems property of a flex or grid container. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self).

                                                                                                                                                                                                                                                      property bottom

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

                                                                                                                                                                                                                                                      property end

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

                                                                                                                                                                                                                                                      property flex

                                                                                                                                                                                                                                                      flex?: Responsive<string | number | boolean>;
                                                                                                                                                                                                                                                      • When used in a flex layout, specifies how the element will grow or shrink to fit the space available. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex).

                                                                                                                                                                                                                                                      property flexBasis

                                                                                                                                                                                                                                                      flexBasis?: Responsive<number | string>;
                                                                                                                                                                                                                                                      • When used in a flex layout, specifies the initial main size of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis).

                                                                                                                                                                                                                                                      property flexGrow

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

                                                                                                                                                                                                                                                      property flexShrink

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

                                                                                                                                                                                                                                                      property gridArea

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

                                                                                                                                                                                                                                                      property gridColumn

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

                                                                                                                                                                                                                                                      property gridColumnEnd

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

                                                                                                                                                                                                                                                      property gridColumnStart

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

                                                                                                                                                                                                                                                      property gridRow

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

                                                                                                                                                                                                                                                      property gridRowEnd

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

                                                                                                                                                                                                                                                      property gridRowStart

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

                                                                                                                                                                                                                                                      property height

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

                                                                                                                                                                                                                                                      property isHidden

                                                                                                                                                                                                                                                      isHidden?: Responsive<boolean>;
                                                                                                                                                                                                                                                      • Hides the element.

                                                                                                                                                                                                                                                      property justifySelf

                                                                                                                                                                                                                                                      justifySelf?: Responsive<
                                                                                                                                                                                                                                                      | 'auto'
                                                                                                                                                                                                                                                      | 'normal'
                                                                                                                                                                                                                                                      | 'start'
                                                                                                                                                                                                                                                      | 'end'
                                                                                                                                                                                                                                                      | 'flex-start'
                                                                                                                                                                                                                                                      | 'flex-end'
                                                                                                                                                                                                                                                      | 'self-start'
                                                                                                                                                                                                                                                      | 'self-end'
                                                                                                                                                                                                                                                      | 'center'
                                                                                                                                                                                                                                                      | 'left'
                                                                                                                                                                                                                                                      | 'right'
                                                                                                                                                                                                                                                      | 'stretch'
                                                                                                                                                                                                                                                      >;
                                                                                                                                                                                                                                                      • Specifies how the element is justified inside a flex or grid container. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self).

                                                                                                                                                                                                                                                      property left

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

                                                                                                                                                                                                                                                      property margin

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

                                                                                                                                                                                                                                                      property marginBottom

                                                                                                                                                                                                                                                      marginBottom?: Responsive<DimensionValue>;
                                                                                                                                                                                                                                                      • The margin for the bottom side of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom).

                                                                                                                                                                                                                                                      property marginEnd

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

                                                                                                                                                                                                                                                      property marginStart

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

                                                                                                                                                                                                                                                      property marginTop

                                                                                                                                                                                                                                                      marginTop?: Responsive<DimensionValue>;
                                                                                                                                                                                                                                                      • The margin for the top side of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top).

                                                                                                                                                                                                                                                      property marginX

                                                                                                                                                                                                                                                      marginX?: Responsive<DimensionValue>;
                                                                                                                                                                                                                                                      • The margin for both the left and right sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin).

                                                                                                                                                                                                                                                      property marginY

                                                                                                                                                                                                                                                      marginY?: Responsive<DimensionValue>;
                                                                                                                                                                                                                                                      • The margin for both the top and bottom sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin).

                                                                                                                                                                                                                                                      property maxHeight

                                                                                                                                                                                                                                                      maxHeight?: Responsive<DimensionValue>;
                                                                                                                                                                                                                                                      • The maximum height of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height).

                                                                                                                                                                                                                                                      property maxWidth

                                                                                                                                                                                                                                                      maxWidth?: Responsive<DimensionValue>;
                                                                                                                                                                                                                                                      • The maximum width of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width).

                                                                                                                                                                                                                                                      property minHeight

                                                                                                                                                                                                                                                      minHeight?: Responsive<DimensionValue>;
                                                                                                                                                                                                                                                      • The minimum height of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height).

                                                                                                                                                                                                                                                      property minWidth

                                                                                                                                                                                                                                                      minWidth?: Responsive<DimensionValue>;
                                                                                                                                                                                                                                                      • The minimum width of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width).

                                                                                                                                                                                                                                                      property order

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

                                                                                                                                                                                                                                                      property position

                                                                                                                                                                                                                                                      position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>;
                                                                                                                                                                                                                                                      • Specifies how the element is positioned. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/position).

                                                                                                                                                                                                                                                      property right

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

                                                                                                                                                                                                                                                      property start

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

                                                                                                                                                                                                                                                      property top

                                                                                                                                                                                                                                                      top?: Responsive<DimensionValue>;
                                                                                                                                                                                                                                                      • The top position for the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/top).

                                                                                                                                                                                                                                                      property UNSAFE_className

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

                                                                                                                                                                                                                                                      property UNSAFE_style

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

                                                                                                                                                                                                                                                      property width

                                                                                                                                                                                                                                                      width?: Responsive<DimensionValue>;
                                                                                                                                                                                                                                                      • The width of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width).

                                                                                                                                                                                                                                                      property zIndex

                                                                                                                                                                                                                                                      zIndex?: Responsive<number>;
                                                                                                                                                                                                                                                      • The stacking order for the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).

                                                                                                                                                                                                                                                      interface TextInputBase

                                                                                                                                                                                                                                                      interface TextInputBase {}

                                                                                                                                                                                                                                                        property placeholder

                                                                                                                                                                                                                                                        placeholder?: string;
                                                                                                                                                                                                                                                        • Temporary text that occupies the text input when it is empty.

                                                                                                                                                                                                                                                        interface TextInputDOMEvents

                                                                                                                                                                                                                                                        interface TextInputDOMEvents {}

                                                                                                                                                                                                                                                          property onBeforeInput

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

                                                                                                                                                                                                                                                          property onCompositionEnd

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

                                                                                                                                                                                                                                                          property onCompositionStart

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

                                                                                                                                                                                                                                                          property onCompositionUpdate

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

                                                                                                                                                                                                                                                          property onCopy

                                                                                                                                                                                                                                                          onCopy?: ClipboardEventHandler<HTMLInputElement>;
                                                                                                                                                                                                                                                          • Handler that is called when the user copies text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncopy).

                                                                                                                                                                                                                                                          property onCut

                                                                                                                                                                                                                                                          onCut?: ClipboardEventHandler<HTMLInputElement>;
                                                                                                                                                                                                                                                          • Handler that is called when the user cuts text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncut).

                                                                                                                                                                                                                                                          property onInput

                                                                                                                                                                                                                                                          onInput?: FormEventHandler<HTMLInputElement>;
                                                                                                                                                                                                                                                          • Handler that is called when the input value is modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event).

                                                                                                                                                                                                                                                          property onPaste

                                                                                                                                                                                                                                                          onPaste?: ClipboardEventHandler<HTMLInputElement>;
                                                                                                                                                                                                                                                          • Handler that is called when the user pastes text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/onpaste).

                                                                                                                                                                                                                                                          property onSelect

                                                                                                                                                                                                                                                          onSelect?: ReactEventHandler<HTMLInputElement>;
                                                                                                                                                                                                                                                          • Handler that is called when text in the input is selected. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event).

                                                                                                                                                                                                                                                          interface TextInputDOMProps

                                                                                                                                                                                                                                                          interface TextInputDOMProps extends DOMProps, TextInputDOMEvents {}

                                                                                                                                                                                                                                                            property autoComplete

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

                                                                                                                                                                                                                                                            property inputMode

                                                                                                                                                                                                                                                            inputMode?:
                                                                                                                                                                                                                                                            | 'none'
                                                                                                                                                                                                                                                            | 'text'
                                                                                                                                                                                                                                                            | 'tel'
                                                                                                                                                                                                                                                            | 'url'
                                                                                                                                                                                                                                                            | 'email'
                                                                                                                                                                                                                                                            | 'numeric'
                                                                                                                                                                                                                                                            | 'decimal'
                                                                                                                                                                                                                                                            | 'search';
                                                                                                                                                                                                                                                            • Hints at the type of data that might be entered by the user while editing the element or its contents. See [MDN](https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute).

                                                                                                                                                                                                                                                            property maxLength

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

                                                                                                                                                                                                                                                            property minLength

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

                                                                                                                                                                                                                                                            property name

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

                                                                                                                                                                                                                                                            property pattern

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

                                                                                                                                                                                                                                                            property placeholder

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

                                                                                                                                                                                                                                                            property type

                                                                                                                                                                                                                                                            type?: 'text' | 'search' | 'url' | 'tel' | 'email' | 'password' | string;
                                                                                                                                                                                                                                                            • The type of input to render. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype).

                                                                                                                                                                                                                                                            interface TextItem

                                                                                                                                                                                                                                                            interface TextItem {}

                                                                                                                                                                                                                                                              property kind

                                                                                                                                                                                                                                                              kind: 'text';

                                                                                                                                                                                                                                                                property types

                                                                                                                                                                                                                                                                types: Set<string>;

                                                                                                                                                                                                                                                                  method getText

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

                                                                                                                                                                                                                                                                    interface Validation

                                                                                                                                                                                                                                                                    interface Validation {}

                                                                                                                                                                                                                                                                      property isRequired

                                                                                                                                                                                                                                                                      isRequired?: boolean;
                                                                                                                                                                                                                                                                      • Whether user input is required on the input before form submission. Often paired with the necessityIndicator prop to add a visual indicator to the input.

                                                                                                                                                                                                                                                                      property validationState

                                                                                                                                                                                                                                                                      validationState?: ValidationState;
                                                                                                                                                                                                                                                                      • Whether the input should display its "valid" or "invalid" visual styling.

                                                                                                                                                                                                                                                                      interface ValueBase

                                                                                                                                                                                                                                                                      interface ValueBase<T, C = T> {}

                                                                                                                                                                                                                                                                        property defaultValue

                                                                                                                                                                                                                                                                        defaultValue?: T;
                                                                                                                                                                                                                                                                        • The default value (uncontrolled).

                                                                                                                                                                                                                                                                        property onChange

                                                                                                                                                                                                                                                                        onChange?: (value: C) => void;
                                                                                                                                                                                                                                                                        • Handler that is called when the value changes.

                                                                                                                                                                                                                                                                        property value

                                                                                                                                                                                                                                                                        value?: T;
                                                                                                                                                                                                                                                                        • The current value (controlled).

                                                                                                                                                                                                                                                                        interface ViewStyleProps

                                                                                                                                                                                                                                                                        interface ViewStyleProps extends StyleProps {}

                                                                                                                                                                                                                                                                          property backgroundColor

                                                                                                                                                                                                                                                                          backgroundColor?: Responsive<BackgroundColorValue>;
                                                                                                                                                                                                                                                                          • The background color for the element.

                                                                                                                                                                                                                                                                          property borderBottomColor

                                                                                                                                                                                                                                                                          borderBottomColor?: Responsive<BorderColorValue>;
                                                                                                                                                                                                                                                                          • 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<BorderColorValue>;
                                                                                                                                                                                                                                                                          • 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<BorderColorValue>;
                                                                                                                                                                                                                                                                          • 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<BorderColorValue>;
                                                                                                                                                                                                                                                                          • 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<BorderColorValue>;
                                                                                                                                                                                                                                                                          • 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<BorderColorValue>;
                                                                                                                                                                                                                                                                          • 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<BorderColorValue>;
                                                                                                                                                                                                                                                                          • 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 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 BackgroundColorValue

                                                                                                                                                                                                                                                                            type BackgroundColorValue = 'default' | 'transparent' | 'label-gray' | ColorValue;

                                                                                                                                                                                                                                                                              type BaseEvent

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

                                                                                                                                                                                                                                                                                type BorderColorValue

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

                                                                                                                                                                                                                                                                                  type BorderRadiusValue

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

                                                                                                                                                                                                                                                                                    type BorderSizeValue

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

                                                                                                                                                                                                                                                                                      type CollectionChildren

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

                                                                                                                                                                                                                                                                                        type CollectionElement

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

                                                                                                                                                                                                                                                                                          type ColorValue

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

                                                                                                                                                                                                                                                                                            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-300'
                                                                                                                                                                                                                                                                                            | 'size-350'
                                                                                                                                                                                                                                                                                            | 'size-400'
                                                                                                                                                                                                                                                                                            | 'size-450'
                                                                                                                                                                                                                                                                                            | 'size-500'
                                                                                                                                                                                                                                                                                            | 'size-550'
                                                                                                                                                                                                                                                                                            | 'size-600'
                                                                                                                                                                                                                                                                                            | 'size-675'
                                                                                                                                                                                                                                                                                            | 'size-700'
                                                                                                                                                                                                                                                                                            | 'size-800'
                                                                                                                                                                                                                                                                                            | 'size-900'
                                                                                                                                                                                                                                                                                            | 'size-1000'
                                                                                                                                                                                                                                                                                            | 'size-1200'
                                                                                                                                                                                                                                                                                            | 'size-1250'
                                                                                                                                                                                                                                                                                            | 'size-1600'
                                                                                                                                                                                                                                                                                            | 'size-1700'
                                                                                                                                                                                                                                                                                            | 'size-2000'
                                                                                                                                                                                                                                                                                            | 'size-2400'
                                                                                                                                                                                                                                                                                            | 'size-3000'
                                                                                                                                                                                                                                                                                            | 'size-3400'
                                                                                                                                                                                                                                                                                            | 'size-3600'
                                                                                                                                                                                                                                                                                            | 'size-4600'
                                                                                                                                                                                                                                                                                            | 'size-5000'
                                                                                                                                                                                                                                                                                            | 'size-6000'
                                                                                                                                                                                                                                                                                            | 'static-size-0'
                                                                                                                                                                                                                                                                                            | 'static-size-10'
                                                                                                                                                                                                                                                                                            | 'static-size-25'
                                                                                                                                                                                                                                                                                            | 'static-size-50'
                                                                                                                                                                                                                                                                                            | 'static-size-40'
                                                                                                                                                                                                                                                                                            | 'static-size-65'
                                                                                                                                                                                                                                                                                            | 'static-size-100'
                                                                                                                                                                                                                                                                                            | 'static-size-115'
                                                                                                                                                                                                                                                                                            | 'static-size-125'
                                                                                                                                                                                                                                                                                            | 'static-size-130'
                                                                                                                                                                                                                                                                                            | 'static-size-150'
                                                                                                                                                                                                                                                                                            | 'static-size-160'
                                                                                                                                                                                                                                                                                            | 'static-size-175'
                                                                                                                                                                                                                                                                                            | 'static-size-200'
                                                                                                                                                                                                                                                                                            | 'static-size-225'
                                                                                                                                                                                                                                                                                            | 'static-size-250'
                                                                                                                                                                                                                                                                                            | 'static-size-300'
                                                                                                                                                                                                                                                                                            | 'static-size-400'
                                                                                                                                                                                                                                                                                            | 'static-size-450'
                                                                                                                                                                                                                                                                                            | 'static-size-500'
                                                                                                                                                                                                                                                                                            | 'static-size-550'
                                                                                                                                                                                                                                                                                            | 'static-size-600'
                                                                                                                                                                                                                                                                                            | 'static-size-700'
                                                                                                                                                                                                                                                                                            | 'static-size-800'
                                                                                                                                                                                                                                                                                            | 'static-size-900'
                                                                                                                                                                                                                                                                                            | 'static-size-1000'
                                                                                                                                                                                                                                                                                            | 'static-size-1200'
                                                                                                                                                                                                                                                                                            | 'static-size-1700'
                                                                                                                                                                                                                                                                                            | 'static-size-2400'
                                                                                                                                                                                                                                                                                            | 'static-size-2600'
                                                                                                                                                                                                                                                                                            | 'static-size-3400'
                                                                                                                                                                                                                                                                                            | 'static-size-3600'
                                                                                                                                                                                                                                                                                            | 'static-size-4600'
                                                                                                                                                                                                                                                                                            | 'static-size-5000'
                                                                                                                                                                                                                                                                                            | 'static-size-6000'
                                                                                                                                                                                                                                                                                            | 'single-line-height'
                                                                                                                                                                                                                                                                                            | 'single-line-width'
                                                                                                                                                                                                                                                                                            // This allows autocomplete to work properly and not collapse the above options into just `string`.
                                                                                                                                                                                                                                                                                            // See https://github.com/microsoft/TypeScript/issues/29729.
                                                                                                                                                                                                                                                                                            | (string & {})
                                                                                                                                                                                                                                                                                            | number;
                                                                                                                                                                                                                                                                                            • See the [Styling docs](styling.html#dimension-values) for a visualization of these values.

                                                                                                                                                                                                                                                                                            type Direction

                                                                                                                                                                                                                                                                                            type Direction = 'ltr' | 'rtl';

                                                                                                                                                                                                                                                                                              type DisabledBehavior

                                                                                                                                                                                                                                                                                              type DisabledBehavior = 'selection' | 'all';

                                                                                                                                                                                                                                                                                                type DOMRef

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

                                                                                                                                                                                                                                                                                                  type DragPreviewRenderer

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

                                                                                                                                                                                                                                                                                                    type DropItem

                                                                                                                                                                                                                                                                                                    type DropItem = TextItem | FileItem | DirectoryItem;

                                                                                                                                                                                                                                                                                                      type DropOperation

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

                                                                                                                                                                                                                                                                                                        type DropPosition

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

                                                                                                                                                                                                                                                                                                          type DropTarget

                                                                                                                                                                                                                                                                                                          type DropTarget = RootDropTarget | ItemDropTarget;

                                                                                                                                                                                                                                                                                                            type FocusableRef

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

                                                                                                                                                                                                                                                                                                              type FocusStrategy

                                                                                                                                                                                                                                                                                                              type FocusStrategy = 'first' | 'last';

                                                                                                                                                                                                                                                                                                                type IconColorValue

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

                                                                                                                                                                                                                                                                                                                  type ItemElement

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

                                                                                                                                                                                                                                                                                                                    type ItemRenderer

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

                                                                                                                                                                                                                                                                                                                      type KeyboardEvent

                                                                                                                                                                                                                                                                                                                      type KeyboardEvent = BaseEvent<ReactKeyboardEvent<any>>;

                                                                                                                                                                                                                                                                                                                        type LabelPosition

                                                                                                                                                                                                                                                                                                                        type LabelPosition = 'top' | 'side';

                                                                                                                                                                                                                                                                                                                          type LoadingState

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

                                                                                                                                                                                                                                                                                                                            type MoveEvent

                                                                                                                                                                                                                                                                                                                            type MoveEvent = MoveStartEvent | MoveMoveEvent | MoveEndEvent;

                                                                                                                                                                                                                                                                                                                              type NecessityIndicator

                                                                                                                                                                                                                                                                                                                              type NecessityIndicator = 'icon' | 'label';

                                                                                                                                                                                                                                                                                                                                type Orientation

                                                                                                                                                                                                                                                                                                                                type Orientation = 'horizontal' | 'vertical';

                                                                                                                                                                                                                                                                                                                                  type PointerType

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

                                                                                                                                                                                                                                                                                                                                    type Responsive

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

                                                                                                                                                                                                                                                                                                                                      type ResponsiveProp

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

                                                                                                                                                                                                                                                                                                                                        type SectionElement

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

                                                                                                                                                                                                                                                                                                                                          type Selection

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

                                                                                                                                                                                                                                                                                                                                            type SelectionBehavior

                                                                                                                                                                                                                                                                                                                                            type SelectionBehavior = 'toggle' | 'replace';

                                                                                                                                                                                                                                                                                                                                              type SelectionMode

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

                                                                                                                                                                                                                                                                                                                                                type SortDirection

                                                                                                                                                                                                                                                                                                                                                type SortDirection = 'ascending' | 'descending';

                                                                                                                                                                                                                                                                                                                                                  type ValidationState

                                                                                                                                                                                                                                                                                                                                                  type ValidationState = 'valid' | 'invalid';

                                                                                                                                                                                                                                                                                                                                                    Package Files (14)

                                                                                                                                                                                                                                                                                                                                                    Dependencies (0)

                                                                                                                                                                                                                                                                                                                                                    No dependencies.

                                                                                                                                                                                                                                                                                                                                                    Dev Dependencies (0)

                                                                                                                                                                                                                                                                                                                                                    No dev dependencies.

                                                                                                                                                                                                                                                                                                                                                    Peer Dependencies (1)

                                                                                                                                                                                                                                                                                                                                                    Badge

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

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

                                                                                                                                                                                                                                                                                                                                                    • Markdown
                                                                                                                                                                                                                                                                                                                                                      [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@react-types/shared)
                                                                                                                                                                                                                                                                                                                                                    • HTML
                                                                                                                                                                                                                                                                                                                                                      <a href="https://www.jsdocs.io/package/@react-types/shared"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>