Whether single or multiple selection is enabled.
readonly selectionMode: M;Whether the calendar is disabled.
readonly isDisabled: boolean;Whether the calendar is in a read only state.
readonly isReadOnly: boolean;The visible duration in the calendar.
readonly visibleDuration: DateDuration;The date range that is currently visible in the calendar.
readonly visibleRange: import("@react-types/shared").RangeValue<CalendarDate>;The time zone of the dates currently being displayed.
readonly timeZone: string;The current validation state of the selected value.
@deprecated — Use isValueInvalid instead.
Whether the calendar is invalid.
readonly isValueInvalid: boolean;The currently focused date.
readonly focusedDate: CalendarDate;Sets the focused date.
setFocusedDate(value: CalendarDate): void;Moves focus to the next calendar date.
focusNextDay(): void;Moves focus to the previous calendar date.
focusPreviousDay(): void;Moves focus to the next row of dates, e.g. the next week.
focusNextRow(): void;Moves focus to the previous row of dates, e.g. the previous work.
focusPreviousRow(): void;Moves focus to the next page of dates, e.g. the next month if one month is visible.
focusNextPage(): void;Moves focus to the previous page of dates, e.g. the previous month if one month is visible.
focusPreviousPage(): void;Moves focus to the start of the current section of dates, e.g. the start of the current month.
focusSectionStart(): void;Moves focus to the end of the current section of dates, e.g. the end of the current month month.
focusSectionEnd(): void;Moves focus to the next section of dates based on what is currently displayed.
By default, focus is moved by one of the currently displayed unit. For example, if
one or more months are displayed, then focus is moved forward by one month.
If the larger option is true, the focus is moved by the next larger unit than
the one displayed. For example, if months are displayed, then focus moves to the next year.
Moves focus to the previous section of dates based on what is currently displayed.
By default, focus is moved by one of the currently displayed unit. For example, if
one or more months are displayed, then focus is moved backward by one month.
If the larger option is true, the focus is moved by the next larger unit than
the one displayed. For example, if months are displayed, then focus moves to the previous year.
Selects the currently focused date.
selectFocusedDate(): void;Selects the given date.
selectDate(date: CalendarDate): void;Whether focus is currently within the calendar.
readonly isFocused: boolean;Sets whether focus is currently within the calendar.
setFocused(value: boolean): void;Returns whether the given date is invalid according to the minValue and maxValue props.
Returns whether the given date is currently selected.
isSelected(date: CalendarDate): boolean;Returns whether the given date is currently focused.
isCellFocused(date: CalendarDate): boolean;Returns whether the given date is disabled according to the minValue, maxValue, and isDisabled` props.
Returns whether the given date is unavailable according to the isDateUnavailable prop.
Returns whether the previous visible date range is allowed to be selected according to the
minValue prop.
Returns whether the next visible date range is allowed to be selected according to the
maxValue prop.
Returns an array of dates in the week index counted from the provided start date, or the first visible date if not given. The returned array always has 7 elements, but may include null if the date does not exist according to the calendar system.
getDatesInWeek(weekIndex: number, startDate?: CalendarDate): CalendarDate | null[];Returns the number of weeks in a month.
getWeeksInMonth(startDate?: CalendarDate): number;The currently selected date range.
readonly value: import("@react-types/shared").RangeValue<T> | null;Sets the currently selected date range.
setValue(value: import("@react-types/shared").RangeValue<T> | null): void;Highlights the given date during selection, e.g. by hovering or dragging.
highlightDate(date: CalendarDate): void;The current anchor date that the user clicked on to begin range selection.
readonly anchorDate: CalendarDate | null;Sets the anchor date that the user clicked on to begin range selection.
setAnchorDate(date: CalendarDate | null): void;The currently highlighted date range.
readonly highlightedRange: import("@react-types/shared").RangeValue<CalendarDate> | null;Whether the user is currently dragging over the calendar.
readonly isDragging: boolean;Sets whether the user is dragging over the calendar.
setDragging(isDragging: boolean): void;Clears the current selection.
clearSelection(): void;Commits the current selection.
commitSelection(): void;Focuses the next available day before or after the anchor date.
focusNearestAvailableDate(anchorDate: CalendarDate): void;The locale to display and edit the value according to.
locale: string;A function that creates a Calendar
object for a given calendar identifier. Such a function may be imported from the
@internationalized/date package, or manually implemented to include support for
only certain calendars.
The amount of days that will be displayed at once. This affects how pagination works.
@default — { months: 1 }
Determines the alignment of the visible months on initial render based on the current selection or current date if there is no selection.
@default — 'center'
Whether single or multiple selection is enabled.
@default — 'single'
Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.
isDateUnavailable?: (date: DateValue) => boolean;Whether the calendar is disabled.
@default — false
Whether the calendar value is immutable.
@default — false
Whether to automatically focus the calendar when it mounts.
@default — false
The date that is focused when the calendar first mounts (uncontrolled).
defaultFocusedValue?: DateValue | null;Handler that is called when the focused date changes.
onFocusChange?: (date: CalendarDate) => void;Whether the current selection is valid or invalid according to application logic.
@deprecated — Use isInvalid instead.
Whether the current selection is invalid according to application logic.
isInvalid?: boolean;An error message to display when the selected value is invalid.
errorMessage?: ReactNode;Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.
@default — visible
The day that starts the week.
firstDayOfWeek?: "sun" | "mon" | "tue" | "wed" | "thu" | "fri" | "sat";Determines the alignment of the visible months on initial render based on the current selection or current date if there is no selection.
@default — 'center'
The number of weeks in a month. This overrides the default set by the locale.
weeksInMonth?: number;The locale to display and edit the value according to.
locale: string;A function that creates a Calendar
object for a given calendar identifier. Such a function may be imported from the
@internationalized/date package, or manually implemented to include support for
only certain calendars.
The amount of days that will be displayed at once. This affects how pagination works.
@default — { months: 1 }
Determines the alignment of the visible months on initial render based on the current selection or current date if there is no selection.
@default — 'center'
When combined with isDateUnavailable, determines whether non-contiguous ranges,
i.e. ranges containing unavailable dates, may be selected.
Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. The second argument provides the current selection anchor date, if any. This can be used to adjust the available dates based on the user's first selected date.
isDateUnavailable?: (date: DateValue, anchorDate: CalendarDate | null) => boolean;Current selected values.
readonly value: readonly string[];Default selected values.
readonly defaultValue: readonly string[];Whether the checkbox group is disabled.
readonly isDisabled: boolean;Whether the checkbox group is read only.
readonly isReadOnly: boolean;The current validation state of the checkbox group.
@deprecated — Use isInvalid instead.
Whether the checkbox group is invalid.
readonly isInvalid: boolean;Whether the checkboxes in the group are required. This changes to false once at least one item is selected.
readonly isRequired: boolean;Returns whether the given value is selected.
isSelected(value: string): boolean;Sets the selected values.
setValue(value: string[]): void;Adds a value to the set of selected values.
addValue(value: string): void;Removes a value from the set of selected values.
removeValue(value: string): void;Toggles a value in the set of selected values.
toggleValue(value: string): void;Sets whether one of the checkboxes is invalid.
setInvalid(value: string, validation: import("@react-types/shared").ValidationResult): void;Realtime validation results, updated as the user edits the value.
realtimeValidation: import("@react-types/shared").ValidationResult;Currently displayed validation results, updated when the user commits their changes.
displayValidation: import("@react-types/shared").ValidationResult;Updates the current validation result. Not displayed to the user until commitValidation is
called.
Resets the displayed validation state to valid when the user resets the form.
resetValidation(): void;Commits the realtime validation so it is displayed to the user.
commitValidation(): void;Represents a color value.
export interface Color {Converts the color to the given color format, and returns a new Color object.
toFormat(format: ColorFormat): Color;Converts the color to hex, and returns an integer representation.
toHexInt(): number;Returns the numeric value for a given channel. Throws an error if the channel is unsupported in the current color format.
getChannelValue(channel: ColorChannel): number;Sets the numeric value for a given channel, and returns a new Color object. Throws an error if the channel is unsupported in the current color format.
withChannelValue(channel: ColorChannel, value: number): Color;Returns the minimum, maximum, and step values for a given channel.
getChannelRange(channel: ColorChannel): ColorChannelRange;Returns a localized color channel name for a given channel and locale, for use in visual or accessibility labels.
getChannelName(channel: ColorChannel, locale: string): string;Returns the number formatting options for the given channel.
getChannelFormatOptions(channel: ColorChannel): NumberFormatOptions;Formats the numeric value for a given channel for display according to the provided locale.
formatChannelValue(channel: ColorChannel, locale: string): string;Returns the color space axes, xChannel, yChannel, zChannel.
getColorSpaceAxes(xyChannels: { }): ColorAxes;Returns an array of the color channels within the current color space space.
getColorChannels(): [ColorChannel, ColorChannel, ColorChannel];Returns a localized name for the color, for use in visual or accessibility labels.
getColorName(locale: string): string;Returns a localized name for the hue, for use in visual or accessibility labels.
getHueName(locale: string): string;A list of color channels.
export type ColorChannel = "hue" | "saturation" | "brightness" | "lightness" | "red" | "green" | "blue" | "alpha"A list of supported color formats.
export type ColorFormat = "hex" | "hexa" | "rgb" | "rgba" | "hsl" | "hsla" | "hsb" | "hsba"The minimum value of the color channel.
minValue: number;The maximum value of the color channel.
maxValue: number;The step value of the color channel, used when incrementing and decrementing.
step: number;The page step value of the color channel, used when incrementing and decrementing.
pageSize: number;The color space that the color area operates in. The xChannel and yChannel must be in this
color space. If not provided, this defaults to the color space of the color or defaultColor
value.
Whether the ColorArea is disabled.
isDisabled?: boolean;Sets the current color value. If a string is passed, it will be parsed to a Color.
setValue(value: string | Color): void;The current value of the horizontal axis channel displayed by the color area.
xValue: number;Sets the value for the horizontal axis channel displayed by the color area, and triggers
onChange.
The current value of the vertical axis channel displayed by the color area.
yValue: number;Sets the value for the vertical axis channel displayed by the color area, and triggers
onChange.
Sets the x and y channels of the current color value based on a percentage of the width and
height of the color area, and triggers onChange.
Returns the coordinates of the thumb relative to the upper left corner of the color area as a percentage.
getThumbPosition(): {Increments the value of the horizontal axis channel by the channel step or page amount.
incrementX(stepSize?: number): void;Decrements the value of the horizontal axis channel by the channel step or page amount.
decrementX(stepSize?: number): void;Increments the value of the vertical axis channel by the channel step or page amount.
incrementY(stepSize?: number): void;Decrements the value of the vertical axis channel by the channel step or page amount.
decrementY(stepSize?: number): void;Whether the color area is currently being dragged.
readonly isDragging: boolean;Sets whether the color area is being dragged.
setDragging(value: boolean): void;Returns the xChannel, yChannel and zChannel names based on the color value.
channels: { };The step value of the xChannel, used when incrementing and decrementing.
xChannelStep: number;The step value of the yChannel, used when incrementing and decrementing.
yChannelStep: number;The page step value of the xChannel, used when incrementing and decrementing.
xChannelPageStep: number;The page step value of the yChannel, used when incrementing and decrementing.
yChannelPageStep: number;Returns the color that should be displayed in the color area thumb instead of value.
The current text value of the input. Updated as the user types,
and formatted according to formatOptions on blur.
The currently parsed color value, or null if the field is empty.
Updated based on the inputValue as the user types.
Sets the current text value of the input.
setInputValue(value: string): void;Updates the input value based on the currently parsed color value. Typically this is called when the field is blurred.
commit(): void;Increments the current input value to the next step boundary, and fires onChange.
Decrements the current input value to the next step boundary, and fires onChange.
Sets the current value to the maximum color value, and fires onChange.
Sets the current value to the minimum color value, and fires onChange.
Validates a user input string. Values can be partially entered, and may be valid even if they cannot currently be parsed to a color. Can be used to implement validation as a user types.
validate(value: string): boolean;Sets the current color value. If a string is passed, it will be parsed to a Color.
setValue(value: string | Color): void;Returns the color that should be displayed in the slider instead of value or the optional
parameter.
Whether the color slider is currently being dragged.
readonly isDragging: boolean;The locale to use for formatting the color channel value.
locale: string;The color space that the slider operates in. The channel must be in this color space.
If not provided, this defaults to the color space of the color or defaultColor value.
Whether the ColorWheel is disabled.
isDisabled?: boolean;The default value (uncontrolled).
@default — 'hsl(0, 100%, 50%)'
Sets the color value represented by the color wheel, and triggers onChange.
The current value of the hue channel displayed by the color wheel.
readonly hue: number;Sets the hue channel of the current color value and triggers onChange.
Sets the hue channel of the current color value based on the given coordinates and radius of
the color wheel, and triggers onChange.
Returns the coordinates of the thumb relative to the center point of the color wheel.
getThumbPosition(radius: number): {Increments the hue by the given amount (defaults to 1).
increment(stepSize?: number): void;Decrements the hue by the given amount (defaults to 1).
decrement(stepSize?: number): void;Whether the color wheel is currently being dragged.
readonly isDragging: boolean;Sets whether the color wheel is being dragged.
setDragging(value: boolean): void;Returns the color that should be displayed in the color wheel instead of value.
The step value of the hue channel, used when incrementing and decrementing.
step: number;The page step value of the hue channel, used when incrementing and decrementing.
pageStep: number;Whether the color wheel is disabled.
readonly isDisabled: boolean;The key for the first selected item.
@deprecated —
The default selected key.
@deprecated —
Sets the selected key.
@deprecated —
Sets the combobox value.
setValue(value: import("@react-types/shared").Key | readonly import("@react-types/shared").Key[] | null): void;The value of the first selected item.
@deprecated —
The current value of the combo box input.
inputValue: string;The default value of the combo box input.
defaultInputValue: string;Sets the value of the combo box input.
setInputValue(value: string): void;Selects the currently focused item and updates the input value.
commit(): void;Controls which item will be auto focused when the menu opens.
readonly focusStrategy: import("@react-types/shared").FocusStrategy | null;Whether the select is currently focused.
readonly isFocused: boolean;Sets whether the select is focused.
setFocused(isFocused: boolean): void;Opens the menu.
open(focusStrategy?: import("@react-types/shared").FocusStrategy | null, trigger?: MenuTriggerAction): void;Toggles the menu.
toggle(focusStrategy?: import("@react-types/shared").FocusStrategy | null, trigger?: MenuTriggerAction): void;Resets the input value to the previously selected item's text if any and closes the menu.
revert(): void;The filter function used to determine if a option should be included in the combo box list.
defaultFilter?: FilterFn;Whether the combo box allows the menu to be open when the collection is empty.
allowsEmptyCollection?: boolean;Whether the combo box menu should close on blur.
shouldCloseOnBlur?: boolean;Method that is called when the open state of the menu changes. Returns the new open state and the action that caused the opening of the menu.
onOpenChange?: (isOpen: boolean, menuTrigger?: MenuTriggerAction) => void;Whether single or multiple selection is enabled.
@default — 'single'
The currently selected key in the collection (controlled).
@deprecated —
The initial selected key in the collection (uncontrolled).
@deprecated —
Handler that is called when the selection changes.
@deprecated —
The value of the ComboBox input (controlled).
inputValue?: string;The default value of the ComboBox input (uncontrolled).
defaultInputValue?: string;Handler that is called when the ComboBox input value changes.
onInputChange?: (value: string) => void;Whether the ComboBox allows a non-item matching input value to be set.
allowsCustomValue?: boolean;The interaction required to display the ComboBox menu.
@default — 'input'
The selected key in the ComboBox.
@deprecated —
The value of the ComboBox input.
inputValue: string;The current value, converted to a native JavaScript Date object.
The calendar system currently in use.
calendar: Calendar;A date formatter configured for the current locale and format.
dateFormatter: DateFormatter;The current validation state of the date field, based on the validationState, minValue, and
maxValue props.
@deprecated — Use isInvalid instead.
Whether the date field is invalid, based on the isInvalid, minValue, and maxValue props.
The granularity for the field, based on the granularity prop and current value.
The maximum date or time unit that is displayed in the field.
maxGranularity: "year" | "month" | Granularity;Whether the field is disabled.
isDisabled: boolean;Whether the field is read only.
isReadOnly: boolean;Whether the field is required.
isRequired: boolean;Increments the given segment. Upon reaching the minimum or maximum value, the value wraps around to the opposite limit.
increment(type: DateSegmentType): void;Decrements the given segment. Upon reaching the minimum or maximum value, the value wraps around to the opposite limit.
decrement(type: DateSegmentType): void;Increments the given segment by a larger amount, rounding it to the nearest increment. The amount to increment by depends on the field, for example 15 minutes, 7 days, and 5 years. Upon reaching the minimum or maximum value, the value wraps around to the opposite limit.
incrementPage(type: DateSegmentType): void;Decrements the given segment by a larger amount, rounding it to the nearest increment. The amount to decrement by depends on the field, for example 15 minutes, 7 days, and 5 years. Upon reaching the minimum or maximum value, the value wraps around to the opposite limit.
decrementPage(type: DateSegmentType): void;Sets the value of the given segment.
setSegment(type: "era", value: string): void;Updates the remaining unfilled segments with the placeholder value.
confirmPlaceholder(): void;Clears the value of the given segment, reverting it to the placeholder.
clearSegment(type: DateSegmentType): void;Formats the current date value using the given options.
formatValue(fieldOptions: FieldOptions): string;Gets a formatter based on state's props.
getDateFormatter(locale: string, formatOptions: FormatterOptions): DateFormatter;The maximum unit to display in the date field.
@default — 'year'
The locale to display and edit the value according to.
locale: string;A function that creates a Calendar
object for a given calendar identifier. Such a function may be imported from the
@internationalized/date package, or manually implemented to include support for
only certain calendars.
The formatted text for the segment.
text: string;The numeric value for the segment, if applicable.
value?: number | null;The minimum numeric value for the segment, if applicable.
minValue?: number;The maximum numeric value for the segment, if applicable.
maxValue?: number;Whether the value is a placeholder.
isPlaceholder: boolean;A placeholder string for the segment.
placeholder: string;Whether the segment is editable.
isEditable: boolean;The date portion of the value. This may be set prior to value if the user has
selected a date but has not yet selected a time.
The time portion of the value. This may be set prior to value if the user has
selected a time but has not yet selected a date.
The granularity for the field, based on the granularity prop and current value.
Whether the date picker supports selecting a time, according to the granularity prop and
current value.
Whether the calendar popover is currently open.
isOpen: boolean;Sets whether the calendar popover is open.
setOpen(isOpen: boolean): void;The current validation state of the date picker, based on the validationState, minValue,
and maxValue props.
@deprecated — Use isInvalid instead.
Whether the date picker is invalid, based on the isInvalid, minValue, and maxValue props.
Formats the selected value using the given options.
formatValue(locale: string, fieldOptions: FieldOptions): string;Gets a formatter based on state's props.
getDateFormatter(locale: string, formatOptions: FormatterOptions): DateFormatter;Determines whether the date picker popover should close automatically when a date is selected.
@default — true
The currently selected date range.
value: import("@react-types/shared").RangeValue<DateValue | null>;The date portion of the selected range. This may be set prior to value if the user has
selected a date range but has not yet selected a time range.
The time portion of the selected range. This may be set prior to value if the user has
selected a time range but has not yet selected a date range.
Sets the date portion of either the start or end of the selected range.
setDate(part: "start" | "end", value: DateValue | null): void;Sets the time portion of either the start or end of the selected range.
setTime(part: "start" | "end", value: TimeValue | null): void;Sets the date and time of either the start or end of the selected range.
setDateTime(part: "start" | "end", value: DateValue | null): void;The granularity for the field, based on the granularity prop and current value.
Whether the date range picker supports selecting times, according to the granularity prop and
current value.
Whether the calendar popover is currently open.
isOpen: boolean;Sets whether the calendar popover is open.
setOpen(isOpen: boolean): void;The current validation state of the date range picker, based on the validationState,
minValue, and maxValue props.
@deprecated — Use isInvalid instead.
Whether the date range picker is invalid, based on the isInvalid, minValue, and maxValue
props.
Formats the selected range using the given options.
formatValue(locale: string, fieldOptions: FieldOptions): {Gets a formatter based on state's props.
getDateFormatter(locale: string, formatOptions: FormatterOptions): DateFormatter;Determines whether the date picker popover should close automatically when a date is selected.
@default — true
The locale to display and edit the value according to.
locale: string;Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.
isDateUnavailable?: (date: DateValue) => boolean;A placeholder date that influences the format of the placeholder shown when no value is selected. Defaults to today's date at midnight.
placeholderValue?: T | null;Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale.
hourCycle?: 12 | 24;Determines the smallest unit that is displayed in the date picker. By default, this is "day"
for dates, and "minute" for times.
Whether to hide the time zone abbreviation.
@default — false
Whether to always show leading zeros in the month, day, and hour fields. By default, this is determined by the user's locale.
shouldForceLeadingZeros?: boolean;Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.
@default — visible
The day that starts the week.
firstDayOfWeek?: "sun" | "mon" | "tue" | "wed" | "thu" | "fri" | "sat";When combined with isDateUnavailable, determines whether non-contiguous ranges,
i.e. ranges containing unavailable dates, may be selected.
Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.
isDateUnavailable?: (date: DateValue, anchorDate: CalendarDate | null) => boolean;The name of the start date input element, used when submitting an HTML form. See MDN.
startName?: string;The name of the end date input element, used when submitting an HTML form. See MDN.
endName?: string;Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale.
hourCycle?: 12 | 24;Determines the smallest unit that is displayed in the time picker.
@default — 'minute'
Whether to hide the time zone abbreviation.
hideTimeZone?: boolean;Whether to always show leading zeros in the hour field. By default, this is determined by the user's locale.
shouldForceLeadingZeros?: boolean;A placeholder time that influences the format of the placeholder shown when no value is selected. Defaults to 12:00 AM or 00:00 depending on the hour cycle.
placeholderValue?: T;Whether the disclosure is currently expanded.
readonly isExpanded: boolean;Sets whether the disclosure is expanded.
setExpanded(isExpanded: boolean): void;Expand the disclosure.
expand(): void;Collapse the disclosure.
collapse(): void;Toggles the disclosure's visibility.
toggle(): void;Whether the disclosure is expanded (controlled).
isExpanded?: boolean;Whether the disclosure is expanded by default (uncontrolled).
defaultExpanded?: boolean;Handler that is called when the disclosure expanded state changes.
onExpandedChange?: (isExpanded: boolean) => void;Whether multiple items can be expanded at the same time.
readonly allowsMultipleExpanded: boolean;Whether all items are disabled.
readonly isDisabled: boolean;A set of keys for items that are expanded.
readonly expandedKeys: Set<import("@react-types/shared").Key>;Toggles the expanded state for an item by its key.
toggleKey(key: import("@react-types/shared").Key): void;Replaces the set of expanded keys.
setExpandedKeys(keys: Set<import("@react-types/shared").Key>): void;Whether multiple items can be expanded at the same time.
allowsMultipleExpanded?: boolean;Whether all items are disabled.
isDisabled?: boolean;The currently expanded keys in the group (controlled).
expandedKeys?: Iterable<import("@react-types/shared").Key>;The initial expanded keys in the group (uncontrolled).
defaultExpandedKeys?: Iterable<import("@react-types/shared").Key>;Handler that is called when items are expanded or collapsed.
onExpandedChange?: (keys: Set<import("@react-types/shared").Key>) => any;A collection of items.
collection: import("@react-types/shared").Collection<import("@react-types/shared").Node<unknown>>;An interface for reading and updating multiple selection state.
selectionManager: MultipleSelectionManager;Whether the drag events should be disabled.
isDisabled?: boolean;A collection of items.
collection: import("@react-types/shared").Collection<import("@react-types/shared").Node<unknown>>;An interface for reading and updating multiple selection state.
selectionManager: MultipleSelectionManager;The keys of the items that are currently being dragged.
draggingKeys: Set<import("@react-types/shared").Key>;Whether drag events are disabled.
isDisabled?: boolean;Returns whether the given key is currently being dragged.
isDragging(key: import("@react-types/shared").Key): boolean;Returns the keys of the items that will be dragged with the given key (e.g. selected items).
getKeysForDrag(key: import("@react-types/shared").Key): Set<import("@react-types/shared").Key>;Returns the items to drag for the given key.
getItems(key: import("@react-types/shared").Key): import("@react-types/shared").DragItem[];The ref of the element that will be rendered as the drag preview while dragging.
preview?: import("@react-types/shared").RefObject<import("@react-types/shared").DragPreviewRenderer | null>;Function that returns the drop operations that are allowed for the dragged items. If not provided, all drop operations are allowed.
getAllowedDropOperations?: () => import("@react-types/shared").DropOperation[];Begins a drag for the given key. This triggers the onDragStart event.
startDrag(key: import("@react-types/shared").Key, event: import("@react-types/shared").DragStartEvent): void;Ends the current drag, and emits an onDragEnd event.
endDrag(event: import("@react-types/shared").DraggableCollectionEndEvent): void;A collection of items.
collection: import("@react-types/shared").Collection<import("@react-types/shared").Node<unknown>>;An interface for reading and updating multiple selection state.
selectionManager: MultipleSelectionManager;Whether the drop events should be disabled.
isDisabled?: boolean;A collection of items.
collection: import("@react-types/shared").Collection<import("@react-types/shared").Node<unknown>>;An interface for reading and updating multiple selection state.
selectionManager: MultipleSelectionManager;Whether drop events are disabled.
isDisabled?: boolean;Sets the current drop target.
setTarget(target: import("@react-types/shared").DropTarget | null): void;Returns whether the given target is equivalent to the current drop target.
isDropTarget(target: import("@react-types/shared").DropTarget | null): boolean;Returns the drop operation for the given parameters.
getDropOperation(e: DropOperationEvent): import("@react-types/shared").DropOperation;The keys for the initially selected items.
initialSelectedKeys?: Iterable<import("@react-types/shared").Key>;The initial filter text.
initialFilterText?: string;A function that returns a unique key for an item object.
getKey?: (item: T) => import("@react-types/shared").Key;An optional function that performs sorting. If not provided,
then sortDescriptor is passed to the load function.
Whether data is currently being loaded.
isLoading: boolean;If loading data failed, then this contains the error that occurred.
error?: Error;The current sort descriptor for the list.
sortDescriptor?: import("@react-types/shared").SortDescriptor;Reloads the data in the list.
reload(): void;Loads the next page of data in the list.
loadMore(): void;The items currently in the list.
items: T[];The keys of the currently selected items in the list.
selectedKeys: import("@react-types/shared").Selection;The current sort descriptor for the list.
sortDescriptor?: import("@react-types/shared").SortDescriptor;An abort signal used to notify the load function that the request has been aborted.
signal: AbortSignal;The pagination cursor returned from the last page load.
cursor?: C;The current filter text used to perform server side filtering.
filterText?: string;The pagination cursor to be used for the next page load.
cursor?: C;The updated filter text for the list.
filterText?: string;The items in the list.
items: T[];The keys of the currently selected items in the list.
selectedKeys: import("@react-types/shared").Selection;Adds the given keys to the current selected keys.
addKeysToSelection(keys: import("@react-types/shared").Selection): void;Removes the given keys from the current selected keys.
removeKeysFromSelection(keys: import("@react-types/shared").Selection): void;The current filter text.
filterText: string;Sets the filter text.
setFilterText(filterText: string): void;Gets an item from the list by key.
@param — - The key of the item to retrieve.
Inserts items into the list at the given index.
@param — - The index to insert into.
@param — - The values to insert.
Inserts items into the list before the item at the given key.
@param — - The key of the item to insert before.
@param — - The values to insert.
Inserts items into the list after the item at the given key.
@param — - The key of the item to insert after.
@param — - The values to insert.
Appends items to the list.
@param — - The values to insert.
Prepends items to the list.
@param — - The value to insert.
Removes items from the list by their keys.
@param — - The keys of the item to remove.
Removes all items from the list that are currently in the set of selected items.
removeSelectedItems(): void;Moves an item within the list.
@param — - The key of the item to move.
@param — - The index to move the item to.
Moves one or more items before a given key.
@param — - The key of the item to move the items before.
@param — - The keys of the items to move.
Moves one or more items after a given key.
@param — - The key of the item to move the items after.
@param — - The keys of the items to move.
Updates an item in the list.
@param — - The key of the item to update.
@param — - The new value for the item, or a function that returns the new value based on the previous value.
Initial items in the list.
initialItems?: T[];The keys for the initially selected items.
initialSelectedKeys?: "all" | Iterable<import("@react-types/shared").Key>;The initial text to filter the list by.
initialFilterText?: string;A function that returns a unique key for an item object.
getKey?: (item: T) => import("@react-types/shared").Key;A function that returns whether a item matches the current filter text.
filter?: (item: T, filterText: string) => boolean;The keys of the currently selected items in the tree.
selectedKeys: Set<import("@react-types/shared").Key>;Gets a node from the tree by key.
@param — - The key of the item to retrieve.
Inserts an item into a parent node as a child.
@param — - The key of the parent item to insert into. null for the root.
@param — - The index within the parent to insert into.
@param — - The value to insert.
Inserts items into the list before the item at the given key.
@param — - The key of the item to insert before.
@param — - The values to insert.
Inserts items into the list after the item at the given key.
@param — - The key of the item to insert after.
@param — - The values to insert.
Appends an item into a parent node as a child.
@param — - The key of the parent item to insert into. null for the root.
@param — - The value to insert.
Prepends an item into a parent node as a child.
@param — - The key of the parent item to insert into. null for the root.
@param — - The value to insert.
Removes an item from the tree by its key.
@param — - The key of the item to remove.
Removes all items from the tree that are currently in the set of selected items.
removeSelectedItems(): void;Moves an item within the tree.
@param — - The key of the item to move.
@param — - The key of the new parent to insert into. null for the root.
@param — - The index within the new parent to insert at.
Moves one or more items before a given key.
@param — - The key of the item to move the items before.
@param — - The keys of the items to move.
Moves one or more items after a given key.
@param — - The key of the item to move the items after.
@param — - The keys of the items to move.
Updates an item in the tree.
@param — - The key of the item to update.
@param — - The new value for the item.
The value object for the tree node.
value: T;Initial root items in the tree.
initialItems?: T[];The keys for the initially selected items.
initialSelectedKeys?: Iterable<import("@react-types/shared").Key>;A function that returns a unique key for an item object.
getKey?: (item: T) => import("@react-types/shared").Key;A function that returns the children for an item object.
getChildren?: (item: T) => T[];Filter function to generate a filtered list of nodes.
filter?: (nodes: Iterable<import("@react-types/shared").Node<T>>) => Iterable<import("@react-types/shared").Node<T>>;@private —
suppressTextValueWarning?: boolean;A delegate object that provides layout information for items in the collection. This can be used to override the behavior of shift selection.
layoutDelegate?: import("@react-types/shared").LayoutDelegate;A collection of items in the list.
collection: import("@react-types/shared").Collection<import("@react-types/shared").Node<T>>;An interface for reading and updating multiple selection state.
class SelectionManager implements MultipleSelectionManager {Sets the selection behavior for the collection.
setSelectionBehavior(selectionBehavior: import("@react-types/shared").SelectionBehavior): void;Sets whether the collection is focused.
setFocused(isFocused: boolean): void;Sets the focused key.
setFocusedKey(key: import("@react-types/shared").Key | null, childFocusStrategy?: import("@react-types/shared").FocusStrategy): void;Extends the selection to the given key.
extendSelection(toKey: import("@react-types/shared").Key): void;Toggles whether the given key is selected.
toggleSelection(key: import("@react-types/shared").Key): void;Replaces the selection with only the given key.
replaceSelection(key: import("@react-types/shared").Key): void;Replaces the selection with the given keys.
setSelectedKeys(keys: Iterable<import("@react-types/shared").Key>): void;Selects all items in the collection.
selectAll(): void;Removes all keys from the selection.
clearSelection(): void;Toggles between select all and an empty selection.
toggleSelectAll(): void;Returns whether the current selection is equal to the given selection.
isSelectionEqual(selection: Set<import("@react-types/shared").Key>): boolean;Filter function to generate a filtered list of nodes.
filter?: (nodes: Iterable<import("@react-types/shared").Node<T>>) => Iterable<import("@react-types/shared").Node<T>>;@private —
suppressTextValueWarning?: boolean;The key for the currently selected item.
readonly selectedKey: import("@react-types/shared").Key | null;The value of the currently selected item.
readonly selectedItem: import("@react-types/shared").Node<T> | null;Controls which item will be auto focused when the menu opens.
readonly focusStrategy: import("@react-types/shared").FocusStrategy | null;Opens a specific submenu tied to a specific menu item at a specific level.
openSubmenu: (triggerKey: import("@react-types/shared").Key, level: number) => void;Closes a specific submenu tied to a specific menu item at a specific level.
closeSubmenu: (triggerKey: import("@react-types/shared").Key, level: number) => void;An array of open submenu trigger keys within the menu tree. The index of key within array matches the submenu level in the tree.
expandedKeysStack: import("@react-types/shared").Key[];Closes the menu and all submenus in the menu tree.
close: () => void;Whether the submenu is currently open.
isOpen: boolean;Controls which item will be auto focused when the submenu opens.
focusStrategy: import("@react-types/shared").FocusStrategy | null;Opens the submenu.
open: (focusStrategy?: import("@react-types/shared").FocusStrategy | null) => void;Closes the submenu.
close: () => void;Closes all menus and submenus in the menu tree.
closeAll: () => void;The level of the submenu.
submenuLevel: number;Toggles the submenu.
toggle: (focusStrategy?: import("@react-types/shared").FocusStrategy | null) => void;@private —
setOpen: () => void;Whether the overlay is open by default (controlled).
isOpen?: boolean;Whether the overlay is open by default (uncontrolled).
defaultOpen?: boolean;Handler that is called when the overlay's open state changes.
onOpenChange?: (isOpen: boolean) => void;Whether the overlay is currently open.
readonly isOpen: boolean;Sets whether the overlay is open.
setOpen(isOpen: boolean): void;Opens the overlay.
open(): void;Closes the overlay.
close(): void;Toggles the overlay's visibility.
toggle(): void;The axis the Radio Button(s) should align with.
@default — 'vertical'
The name for the group, used for native form submission.
@private —
@deprecated —
Whether the radio group is disabled.
readonly isDisabled: boolean;Whether the radio group is read only.
readonly isReadOnly: boolean;Whether the radio group is required.
readonly isRequired: boolean;Whether the radio group is valid or invalid.
@deprecated — Use isInvalid instead.
Whether the radio group is invalid.
readonly isInvalid: boolean;The currently selected value.
readonly selectedValue: string | null;The default selected value.
readonly defaultSelectedValue: string | null;Sets the selected value.
setSelectedValue(value: string | null): void;The value of the last focused radio.
readonly lastFocusedValue: string | null;Sets the last focused value.
setLastFocusedValue(value: string | null): void;Handler that is called when the SearchField is submitted.
onSubmit?: (value: string) => void;Handler that is called when the clear button is pressed.
onClear?: () => void;The current value of the search field.
readonly value: string;Sets the value of the search field.
setValue(value: string): void;Whether single or multiple selection is enabled.
@default — 'single'
The currently selected key in the collection (controlled).
@deprecated —
The initial selected key in the collection (uncontrolled).
@deprecated —
Handler that is called when the selection changes.
@deprecated —
Sets the open state of the menu.
isOpen?: boolean;Sets the default open state of the menu.
defaultOpen?: boolean;Method that is called when the open state of the menu changes.
onOpenChange?: (isOpen: boolean) => void;Whether the Select should close when an item is selected. Defaults to true if selectionMode is single, false otherwise.
shouldCloseOnSelect?: boolean;Whether the select should be allowed to be open when the collection is empty.
allowsEmptyCollection?: boolean;The key for the first selected item.
@deprecated —
The default selected key.
@deprecated —
Sets the selected key.
@deprecated —
Sets the select value.
setValue(value: import("@react-types/shared").Key | readonly import("@react-types/shared").Key[] | null): void;The value of the first selected item.
@deprecated —
Whether the select is currently focused.
readonly isFocused: boolean;Sets whether the select is focused.
setFocused(isFocused: boolean): void;Controls which item will be auto focused when the menu opens.
readonly focusStrategy: import("@react-types/shared").FocusStrategy | null;Values managed by the slider by thumb index.
readonly values: number[];The default values for each thumb.
readonly defaultValues: number[];Get the value for the specified thumb.
@param —
Sets the value for the specified thumb. The actual value set will be clamped and rounded according to min/max/step.
@param —
@param —
Sets value for the specified thumb by percent offset (between 0 and 1).
@param —
@param —
Whether the specific thumb is being dragged.
@param —
Set is dragging on the specified thumb.
@param —
@param —
Currently-focused thumb index.
readonly focusedThumb: number | undefined;Set focused true on specified thumb. This will remove focus from any thumb that had it before.
@param —
Returns the specified thumb's value as a percentage from 0 to 1.
@param —
Returns the value as a percent between the min and max of the slider.
@param —
Returns the string label for the specified thumb's value, per props.formatOptions.
@param —
Returns the string label for the value, per props.formatOptions.
@param —
Returns the min allowed value for the specified thumb.
@param —
Returns the max allowed value for the specified thumb.
@param —
Converts a percent along track (between 0 and 1) to the corresponding value.
@param —
Returns if the specified thumb is editable.
@param —
Set the specified thumb's editable state.
@param —
@param —
Increments the value of the thumb by the step or page amount.
incrementThumb(index: number, stepSize?: number): void;Decrements the value of the thumb by the step or page amount.
decrementThumb(index: number, stepSize?: number): void;The step amount for the slider.
readonly step: number;The page size for the slider, used to do a bigger step.
readonly pageSize: number;Whether the slider is disabled.
readonly isDisabled: boolean;The orientation of the Slider.
@default — 'horizontal'
Whether the whole Slider is disabled.
isDisabled?: boolean;Fired when the slider stops moving, due to being let go.
onChangeEnd?: (value: T) => void;The slider's minimum value.
@default — 0
The slider's maximum value.
@default — 100
The slider's step value.
@default — 1
The type of selection that is allowed in the collection.
readonly selectionMode: import("@react-types/shared").SelectionMode;The selection behavior for the collection.
readonly selectionBehavior: import("@react-types/shared").SelectionBehavior;Whether the collection allows empty selection.
readonly disallowEmptySelection?: boolean;The currently selected keys in the collection.
readonly selectedKeys: Set<import("@react-types/shared").Key>;Whether the selection is empty.
readonly isEmpty: boolean;Whether all items in the collection are selected.
readonly isSelectAll: boolean;The first selected key in the collection.
readonly firstSelectedKey: import("@react-types/shared").Key | null;The last selected key in the collection.
readonly lastSelectedKey: import("@react-types/shared").Key | null;The currently disabled keys in the collection.
readonly disabledKeys: Set<import("@react-types/shared").Key>;Whether disabledKeys applies to selection, actions, or both.
Returns whether the current selection is equal to the given selection.
isSelectionEqual(selection: Set<import("@react-types/shared").Key>): boolean;Extends the selection to the given key.
extendSelection(toKey: import("@react-types/shared").Key): void;Toggles whether the given key is selected.
toggleSelection(key: import("@react-types/shared").Key): void;Replaces the selection with only the given key.
replaceSelection(key: import("@react-types/shared").Key): void;Replaces the selection with the given keys.
setSelectedKeys(keys: Iterable<import("@react-types/shared").Key>): void;Selects all items in the collection.
selectAll(): void;Removes all keys from the selection.
clearSelection(): void;Toggles between select all and an empty selection.
toggleSelectAll(): void;Toggles, replaces, or extends selection to the given key depending on the pointer event and collection's selection mode.
select(key: import("@react-types/shared").Key, e?: import("@react-types/shared").PressEvent | import("@react-types/shared").LongPressEvent | PointerEvent): void;Returns whether the given key can be selected.
canSelectItem(key: import("@react-types/shared").Key): boolean;Returns whether the given key is non-interactive, i.e. both selection and actions are disabled.
isDisabled(key: import("@react-types/shared").Key): boolean;Sets the selection behavior for the collection.
setSelectionBehavior(selectionBehavior: import("@react-types/shared").SelectionBehavior): void;Returns whether the given key is a hyperlink.
isLink(key: import("@react-types/shared").Key): boolean;The collection of nodes that the selection manager handles.
collection: import("@react-types/shared").Collection<import("@react-types/shared").Node<unknown>>;The type of selection that is allowed in the collection.
readonly selectionMode: import("@react-types/shared").SelectionMode;The selection behavior for the collection.
readonly selectionBehavior: import("@react-types/shared").SelectionBehavior;Sets the selection behavior for the collection.
setSelectionBehavior(selectionBehavior: import("@react-types/shared").SelectionBehavior): void;Whether the collection allows empty selection.
readonly disallowEmptySelection: boolean;The currently selected keys in the collection.
readonly selectedKeys: import("@react-types/shared").Selection;Sets the selected keys in the collection.
setSelectedKeys(keys: import("@react-types/shared").Selection): void;The currently disabled keys in the collection.
readonly disabledKeys: Set<import("@react-types/shared").Key>;Whether disabledKeys applies to selection, actions, or both.
Whether the collection allows empty selection.
readonly disallowEmptySelection?: boolean;The currently selected key in the collection.
readonly selectedKey: import("@react-types/shared").Key;Sets the selected key in the collection.
setSelectedKey(key: import("@react-types/shared").Key | null): void;Whether the collection is currently focused.
readonly isFocused: boolean;Sets whether the collection is focused.
setFocused(isFocused: boolean): void;The current focused key in the collection.
readonly focusedKey: import("@react-types/shared").Key | null;Whether the first or last child of the focused key should receive focus.
readonly childFocusStrategy: import("@react-types/shared").FocusStrategy | null;Sets the focused key, and optionally, whether the first or last child of that key should receive focus.
setFocusedKey(key: import("@react-types/shared").Key | null, child?: import("@react-types/shared").FocusStrategy): void;How multiple selection should behave in the collection.
@default — 'toggle'
Whether onSelectionChange should fire even if the new set of keys is the same as the last.
allowDuplicateSelectionEvents?: boolean;Whether disabledKeys applies to all interactions, or only selection.
@default — 'all'
The current text value of the input. Updated as the user types,
and formatted according to formatOptions on blur.
The currently parsed number value, or NaN if a valid number could not be parsed.
Updated based on the inputValue as the user types.
The default value of the input.
defaultNumberValue: number;The minimum value of the number field.
minValue?: number;The maximum value of the number field.
maxValue?: number;Whether the current value can be incremented according to the maximum value and step.
canIncrement: boolean;Whether the current value can be decremented according to the minimum value and step.
canDecrement: boolean;Validates a user input string according to the current locale and format options. Values can be partially entered, and may be valid even if they cannot currently be parsed to a number. Can be used to implement validation as a user types.
validate(value: string): boolean;Sets the current text value of the input.
setInputValue(val: string): void;Sets the number value.
setNumberValue(val: number): void;Commits the current input value. The value is parsed to a number, clamped according to the
minimum and maximum values of the field, and snapped to the nearest step value. This will fire
the onChange prop with the new value, and if uncontrolled, update the numberValue.
Typically this is called when the field is blurred.
@param — - The value to commit. If not provided, the current input value is used.
Increments the current input value to the next step boundary, and fires onChange.
Decrements the current input value to the next step boundary, and fires onChange.
Sets the current value to the maxValue if any, and fires onChange.
Sets the current value to the minValue if any, and fires onChange.
The locale that should be used for parsing.
@default — 'en-US'
Formatting options for the value displayed in the number field. This also affects what characters are allowed to be typed by the user.
formatOptions?: NumberFormatOptions;Controls the behavior of the number field when the user blurs the field after editing. 'snap' will clamp the value to the min/max values, and snap to the nearest step value. 'validate' will not clamp the value, and will validate that the value is within the min/max range and on a valid step.
@default — 'snap'
The elements that make up the table. Includes the TableHeader, TableBody, Columns, and Rows.
children: [ReactElement<TableHeaderProps<T>>, ReactElement<TableBodyProps<T>>];Whether pressing the escape key should clear selection in the table or not.
Most experiences should not modify this option as it eliminates a keyboard user's ability to easily clear selection. Only use if the escape key is being handled externally or should not trigger selection clearing contextually.
@default — 'clearSelection'
Whether selection should occur on press up instead of press down.
shouldSelectOnPressUp?: boolean;The id of the column that displays hierarchical data.
treeColumn?: import("@react-types/shared").Key;Whether the row selection checkboxes should be displayed.
showSelectionCheckboxes: boolean;The current sorted column and direction.
sortDescriptor: import("@react-types/shared").SortDescriptor | null;Calls the provided onSortChange handler with the provided column key and sort direction.
sort(columnKey: import("@react-types/shared").Key, direction?: "ascending" | "descending"): void;Whether keyboard navigation is disabled, such as when the arrow keys should be handled by a component within a cell.
isKeyboardNavigationDisabled: boolean;Set whether keyboard navigation is disabled, such as when the arrow keys should be handled by a component within a cell.
setKeyboardNavigationDisabled: (val: boolean) => void;Toggles the expanded state for a row by its key.
toggleKey(key: import("@react-types/shared").Key): void;The id of the column that displays hierarchical data.
treeColumn: import("@react-types/shared").Key | null;Whether keyboard navigation is disabled, such as when the arrow keys should be handled by a component within a cell.
isKeyboardNavigationDisabled: boolean;The elements that make up the table. Includes the TableHeader, TableBody, Columns, and Rows.
children?: [ReactElement<TableHeaderProps<T>>, ReactElement<TableBodyProps<T>>];A pre-constructed collection to use instead of building one from items and children.
collection?: ITableCollection<T>;Whether the row selection checkboxes should be displayed.
showSelectionCheckboxes?: boolean;Whether the row drag button should be displayed.
@private —
@private — - Do not use unless you know what you're doing.
UNSAFE_selectionState?: MultipleSelectionState;The id of the column that displays hierarchical data.
treeColumn?: import("@react-types/shared").Key;A list of table columns.
columns?: readonly T[];A list of Column(s) or a function. If the latter, a list of columns must be provided using
the columns prop.
The contents of the table body. Supports static items or a function for dynamic rendering.
children: RowElement<T> | RowElement<T>[] | ((item: T) => RowElement<T>);Rendered contents of the column if children contains child columns.
Static child columns or content to render as the column header.
children: ReactNode | ColumnElement<T> | ColumnElement<T>[];A list of child columns used when dynamically rendering nested child columns.
childColumns?: T[];Whether the column allows resizing.
allowsResizing?: boolean;Whether the column allows sorting.
allowsSorting?: boolean;Whether a column is a row header and should be announced by assistive technology during row navigation.
isRowHeader?: boolean;A string representation of the column's contents, used for accessibility announcements.
textValue?: string;All possible sizes a column can be assigned.
export type ColumnSize = ColumnStaticSize | ColumnDynamicSizeWidths that result in a constant pixel value for the same Table width.
export type ColumnStaticSize = number | `${number}` | `${number}%`Widths that change size in relation to the remaining space and in ratio to other dynamic columns. All numbers must be integers and greater than 0. FR units take up remaining, if any, space in the table.
export type ColumnDynamicSize = `${number}fr`A list of child item objects used when dynamically rendering row children. Requires the feature flag to be enabled along with UNSTABLE_allowsExpandableRows, see https://react-spectrum.adobe.com/react-spectrum/TableView.html#expandable-rows.
@private —
@version — alpha
Rendered contents of the row or row child items.
children: CellElement | CellElement[] | CellRenderer;A string representation of the row's contents, used for features like typeahead.
textValue?: string;The contents of the cell.
children: ReactNode;A string representation of the cell's contents, used for features like typeahead.
textValue?: string;Indicates how many columns the data cell spans.
colSpan?: number;Called to update the state that a resize event has occurred. Returns the new widths for all columns based on the resized column.
updateResizedColumns: (key: import("@react-types/shared").Key, width: number) => Map<import("@react-types/shared").Key, ColumnSize>;Callback for when onColumnResize has started.
startResize: (key: import("@react-types/shared").Key) => void;Callback for when onColumnResize has ended.
endResize: () => void;Gets the current width for the specified column.
getColumnWidth: (key: import("@react-types/shared").Key) => number;Gets the current minWidth for the specified column.
getColumnMinWidth: (key: import("@react-types/shared").Key) => number;Gets the current maxWidth for the specified column.
getColumnMaxWidth: (key: import("@react-types/shared").Key) => number;Current width of the table or table viewport that the columns should be calculated against.
tableWidth: number;A function that is called to find the default width for a given column.
getDefaultWidth?: (node: GridNode<T>) => ColumnSize | null | undefined;A function that is called to find the default minWidth for a given column.
getDefaultMinWidth?: (node: GridNode<T>) => ColumnSize | null | undefined;The number of columns spanned by this cell. Use colSpan instead.
@deprecated —
The number of columns spanned by this cell.
colSpan?: number | null;The column index of this cell, accounting for any colSpans.
colIndex?: number | null;The index of this node within its parent, ignoring sibling nodes that aren't of the same type.
indexOfType?: number;A set of column keys that serve as the row header.
rowHeaderColumnKeys: Set<import("@react-types/shared").Key>;The number of columns in the grid.
columnCount: number;Whether the TabList is disabled. Shows that a selection exists, but is not available in that circumstance.
isDisabled?: boolean;The currently selected key in the collection (controlled).
selectedKey?: import("@react-types/shared").Key;The initial selected keys in the collection (uncontrolled).
defaultSelectedKey?: import("@react-types/shared").Key;Handler that is called when the selection changes.
onSelectionChange?: (key: import("@react-types/shared").Key) => void;Whether the tab list is disabled.
isDisabled: boolean;Closes a toast.
close(key: string): void;Pauses the timers for all visible toasts.
pauseAll(): void;Resumes the timers for all visible toasts.
resumeAll(): void;The content of the toast.
content: T;A unique key for the toast.
key: string;The maximum number of toasts to display at a time.
maxVisibleToasts?: number;Function to wrap updates in (i.e. document.startViewTransition()).
wrapUpdate?: (fn: () => void, action: ToastAction) => void;Handler that is called when the toast is closed, either by the user or after a timeout.
onClose?: () => void;A timeout to automatically close the toast after, in milliseconds.
timeout?: number;The label for the element.
children?: ReactNode;Whether the toggle is selected.
readonly isSelected: boolean;Whether the toggle is selected by default.
readonly defaultSelected: boolean;Updates selection state.
setSelected(isSelected: boolean): void;Toggle the selection state.
toggle(): void;Whether the element should be selected (uncontrolled).
defaultSelected?: boolean;Whether the element should be selected (controlled).
isSelected?: boolean;Handler that is called when the element's selection state changes.
onChange?: (isSelected: boolean) => void;Whether single or multiple selection is enabled.
@default — 'single'
Whether the collection allows empty selection.
disallowEmptySelection?: boolean;The currently selected keys in the collection (controlled).
selectedKeys?: Iterable<import("@react-types/shared").Key>;The initial selected keys in the collection (uncontrolled).
defaultSelectedKeys?: Iterable<import("@react-types/shared").Key>;Handler that is called when the selection changes.
onSelectionChange?: (keys: Set<import("@react-types/shared").Key>) => void;Whether all items are disabled.
isDisabled?: boolean;Whether single or multiple selection is enabled.
readonly selectionMode: "single" | "multiple";Whether all items are disabled.
readonly isDisabled: boolean;A set of keys for items that are selected.
readonly selectedKeys: Set<import("@react-types/shared").Key>;Toggles the selected state for an item by its key.
toggleKey(key: import("@react-types/shared").Key): void;Sets whether the given key is selected.
setSelected(key: import("@react-types/shared").Key, isSelected: boolean): void;Replaces the set of selected keys.
setSelectedKeys(keys: Set<import("@react-types/shared").Key>): void;Whether the tooltip should be disabled, independent from the trigger.
isDisabled?: boolean;By default, opens for both focus and hover. Can be made to open only for focus.
@default — 'hover'
Whether the tooltip should close when the trigger is pressed.
@default — true
Whether the tooltip is currently showing.
isOpen: boolean;Shows the tooltip. By default, the tooltip becomes visible after a delay
depending on a global warmup timer. The immediate option shows the
tooltip immediately instead.
Hides the tooltip.
close(immediate?: boolean): void;Whether disabledKeys applies to all interactions, or only selection.
A collection of items in the tree.
readonly collection: import("@react-types/shared").Collection<import("@react-types/shared").Node<T>>;A set of keys for items that are disabled.
readonly disabledKeys: Set<import("@react-types/shared").Key>;A set of keys for items that are expanded.
readonly expandedKeys: Set<import("@react-types/shared").Key>;Toggles the expanded state for an item by its key.
toggleKey(key: import("@react-types/shared").Key): void;Replaces the set of expanded keys.
setExpandedKeys(keys: Set<import("@react-types/shared").Key>): void;A selection manager to read and update multiple selection state.
readonly selectionManager: SelectionManager;Whether to preserve the aspect ratio of the minItemSize.
By default, grid rows may have variable heights. When preserveAspectRatio
is true, all rows will have equal heights.
@default — false
The maximum allowed horizontal space between items.
@default — Infinity
The maximum number of columns.
@default — Infinity
The thickness of the drop indicator.
@default — 2
The fixed height of a loader element in px. This loader is specifically for "load more" elements rendered when loading more rows at the root level or inside nested row/sections.
@default — 48
The layout direction. When 'rtl', drop target positions ('before'/'after')
are computed correctly for right-to-left locales in multi-column grids.
@default — 'ltr'
The primary orientation of the items. Usually this is the direction that the collection scrolls.
@default — 'vertical'
The fixed size of a row in px with respect to the applied orientation.
@default — 48
The estimated size of a row in px with respect to the applied orientation, when row sizes are variable.
estimatedRowSize?: number;The fixed size of a section header in px with respect to the applied orientation.
@default — 48
The estimated size of a section header in px with respect to the applied orientation, when heading sizes are variable.
estimatedHeadingSize?: number;The fixed size of a loader element in px with respect to the applied orientation. This loader is specifically for "load more" elements rendered when loading more rows at the root level or inside nested row/sections.
@default — 48
The thickness of the drop indicator.
@default — 2
The gap between items.
@default — 0
The padding around the list.
@default — 0
The fixed height of a row in px.
@deprecated — Use rowSize instead.
@default — 48
The estimated height of a row, when row heights are variable.
@deprecated — Use estimatedRowSize instead.
The fixed height of a section header in px.
@deprecated — Use headingSize instead.
@default — 48
The estimated height of a section header, when the height is variable.
@deprecated — Use estimatedHeadingSize instead.
The fixed height of a loader element in px. This loader is specifically for "load more" elements rendered when loading more rows at the root level or inside nested row/sections.
@deprecated — Use loaderSize instead.
@default — 48
The fixed height of a row in px.
@default — 48
The estimated height of a row, when row heights are variable.
estimatedRowHeight?: number;The fixed height of a section header in px.
@default — 48
The estimated height of a section header, when the height is variable.
estimatedHeadingHeight?: number;The fixed height of a loader element in px. This loader is specifically for "load more" elements rendered when loading more rows at the root level or inside nested row/sections.
@default — 48
The maximum allowed horizontal space between items.
@default — Infinity
The maximum number of columns.
@default — Infinity
The thickness of the drop indicator.
@default — 2
The fixed height of a loader element in px. This loader is specifically for "load more" elements rendered when loading more rows at the root level or inside nested row/sections.
@default — 48
The Virtualizer class renders a scrollable collection of data using customizable layouts. It supports very large collections by only rendering visible views to the DOM, reusing them as you scroll. Virtualizer can present any type of view, including non-item views such as section headers and footers.
Virtualizer uses Layout objects to compute what views should be visible, and how
to position and style them. This means that virtualizer can have its items arranged in
a stack, a grid, a circle, or any other layout you can think of. The layout can be changed
dynamically at runtime as well.
Layouts produce information on what views should appear in the virtualizer, but do not create the
views themselves directly. It is the responsibility of the VirtualizerDelegate object to render
elements for each layout info. The virtualizer manages a set of ReusableView objects, which are
reused as the user scrolls by swapping their content with cached elements returned by the
delegate.
The virtualizer delegate. The delegate is used by the virtualizer to create and configure views.
delegate: VirtualizerDelegate<T, V>;The current content of the virtualizer.
readonly collection: import("@react-types/shared").Collection<T>;The set of persisted keys that are always present in the DOM, even if not currently in view.
readonly persistedKeys: Set<import("@react-types/shared").Key>;Returns whether the given key, or an ancestor, is persisted.
isPersistedKey(key: import("@react-types/shared").Key): boolean;Returns the key for the item view currently at the given point.
keyAtPoint(point: Point): import("@react-types/shared").Key | null;Performs layout and updates visible views as needed.
render(opts: VirtualizerRenderOptions<T>): ReusableView<T, V>[];Provides state management for a calendar component. A calendar displays one or more date grids and allows users to select a single date.
export function useCalendarState<T extends DateValue = DateValue, M extends CalendarSelectionMode = "single">(props: CalendarStateOptions<T, M>): CalendarState<M>Provides state management for a range calendar component. A range calendar displays one or more date grids and allows users to select a contiguous range of dates.
export function useRangeCalendarState<T extends DateValue = DateValue>(props: RangeCalendarStateOptions<T>): RangeCalendarState<T>Provides state management for a checkbox group component. Provides a name for the group, and manages selection and focus state.
export function useCheckboxGroupState(props?: CheckboxGroupProps): CheckboxGroupStateReturns a list of color channels for a given color space.
export function getColorChannels(colorSpace: ColorSpace): [ColorChannel, ColorChannel, ColorChannel]Parses a color from a string value. Throws an error if the string could not be parsed.
export function parseColor(value: string): ColorProvides state management for a color area component. Color area allows users to adjust two channels of an HSL, HSB or RGB color value against a two-dimensional gradient background.
export function useColorAreaState(props: ColorAreaProps): ColorAreaStateProvides state management for a color channel field, allowing users to edit the value of an individual color channel.
export function useColorChannelFieldState(props: ColorChannelFieldStateOptions): ColorChannelFieldStateProvides state management for a color field component. Color fields allow users to enter and adjust a hex color value.
export function useColorFieldState(props: ColorFieldProps): ColorFieldStateProvides state management for a color slider component. Color sliders allow users to adjust an individual channel of a color value.
export function useColorSliderState(props: ColorSliderStateOptions): ColorSliderStateProvides state management for a color wheel component. Color wheels allow users to adjust the hue of an HSL or HSB color value on a circular track.
export function useColorWheelState(props: ColorWheelProps): ColorWheelStateProvides state management for a combo box component. Handles building a collection of items from props and manages the option selection state of the combo box. In addition, it tracks the input value, focus state, and other properties of the combo box.
export function useComboBoxState<T, M extends SelectionMode = "single">(props: ComboBoxStateOptions<T, M>): ComboBoxState<T, M>Provides state management for a date field component. A date field allows users to enter and edit date and time values using a keyboard. Each part of a date value is displayed in an individually editable segment.
export function useDateFieldState<T extends DateValue = DateValue>(props: DateFieldStateOptions<T>): DateFieldStateProvides state management for a date picker component. A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value.
export function useDatePickerState<T extends DateValue = DateValue>(props: DatePickerStateOptions<T>): DatePickerStateProvides state management for a date range picker component. A date range picker combines two DateFields and a RangeCalendar popover to allow users to enter or select a date and time range.
export function useDateRangePickerState<T extends DateValue = DateValue>(props: DateRangePickerStateOptions<T>): DateRangePickerStateProvides state management for a time field component. A time field allows users to enter and edit time values using a keyboard. Each part of a time value is displayed in an individually editable segment.
export function useTimeFieldState<T extends TimeValue = TimeValue>(props: TimeFieldStateOptions<T>): TimeFieldStateManages state for a disclosure widget. Tracks whether the disclosure is expanded, and provides methods to toggle this state.
export function useDisclosureState(props: DisclosureProps): DisclosureStateManages state for a group of disclosures, e.g. an accordion. It supports both single and multiple expanded items.
export function useDisclosureGroupState(props: DisclosureGroupProps): DisclosureGroupStateManages state for a draggable collection.
export function useDraggableCollectionState<T = object>(props: DraggableCollectionStateOptions<T>): DraggableCollectionStateManages state for a droppable collection.
export function useDroppableCollectionState(props: DroppableCollectionStateOptions): DroppableCollectionStateManages state for an immutable async loaded list data structure, and provides convenience methods to update the data over time. Manages loading and error states, pagination, and sorting.
export function useAsyncList<T, C = string>(options: AsyncListOptions<T, C>): AsyncListData<T>Manages state for an immutable list data structure, and provides convenience methods to update the data over time.
export function useListData<T>(options: ListOptions<T>): ListData<T>Manages state for an immutable tree data structure, and provides convenience methods to update the data over time.
export function useTreeData<T extends object>(options: TreeOptions<T>): TreeData<T>Filters a collection using the provided filter function and returns a new ListState.
export function UNSTABLE_useFilteredListState<T>(state: ListState<T>, filterFn: ((nodeValue: string, node: import("@react-types/shared").Node<T>) => boolean) | null | undefined): ListState<T>Provides state management for list-like components with single selection. Handles building a collection of items from props, and manages selection state.
export function useSingleSelectListState<T extends object>(props: SingleSelectListProps<T>): SingleSelectListState<T>Manages state for a menu trigger. Tracks whether the menu is currently open, and controls which item will receive focus when it opens. Also tracks the open submenus within the menu tree via their trigger keys.
export function useMenuTriggerState(props: MenuTriggerProps): RootMenuTriggerStateManages state for a submenu trigger. Tracks whether the submenu is currently open, the level of the submenu, and controls which item will receive focus when it opens.
export function useSubmenuTriggerState(props: SubmenuTriggerProps, state: RootMenuTriggerState): SubmenuTriggerStateProvides state management for a number field component. Number fields allow users to enter a number, and increment or decrement the value using stepper buttons.
export function useNumberFieldState(props: NumberFieldStateOptions): NumberFieldStateManages state for an overlay trigger. Tracks whether the overlay is open, and provides methods to toggle this state.
export function useOverlayTriggerState(props: OverlayTriggerProps): OverlayTriggerStateProvides state management for a radio group component. Provides a name for the group, and manages selection and focus state.
export function useRadioGroupState(props: RadioGroupProps): RadioGroupStateProvides state management for a search field.
export function useSearchFieldState(props: SearchFieldProps): SearchFieldStateProvides state management for a select component. Handles building a collection of items from props, handles the open state for the popup menu, and manages multiple selection state.
export function useSelectState<T, M extends SelectionMode = "single">(props: SelectStateOptions<T, M>): SelectState<T, M>Provides state management for a slider component. Stores values for all thumbs, formats values for localization, and provides methods to update the position of any thumbs.
@param —
Manages state for multiple selection and focus in a collection.
export function useMultipleSelectionState(props: MultipleSelectionStateProps): MultipleSelectionStateProvides state management for a table component. Handles building a collection of columns and rows from props. In addition, it tracks row selection and manages sort order changes.
export function useTableState<T extends object>(props: TableStateProps<T>): TableState<T>Filters a collection using the provided filter function and returns a new TableState.
export function UNSTABLE_useFilteredTableState<T extends object>(state: TableState<T>, filterFn: ((nodeValue: string, node: import("@react-types/shared").Node<T>) => boolean) | null | undefined): TableState<T>A TableHeader is a container for the Column elements in a Table. Columns can be statically
defined as children, or generated dynamically using a function based on the data passed to the
columns prop.
A TableBody is a container for the Row elements of a Table. Rows can be statically defined as
children, or generated dynamically using a function based on the data passed to the items
prop.
A Column represents a field of each item within a Table. Columns may also contain nested
Column elements to represent column groups. Nested columns can be statically defined as
children, or dynamically generated using a function based on the childColumns prop.
A Row represents a single item in a Table and contains Cell elements for each column. Cells can be statically defined as children, or generated dynamically using a function based on the columns defined in the TableHeader.
export let Row: <T>(props: RowProps<T>) => Element = ...A Cell represents the value of a single Column within a Table Row.
export let Cell: (props: CellProps) => Element = ...Provides column width state management for a table component with column resizing support. Handles building a map of column widths calculated from the table's width and any provided column width information from the collection. In addition, it tracks the currently resizing column and provides callbacks for updating the widths upon resize operations.
@param — - Props for the table.
@param — - State for the table, as returned by useTableState.
Provides state management for a Tabs component. Tabs include a TabList which tracks which tab is currently selected and displays the content associated with that Tab in a TabPanel.
export function useTabListState<T extends object>(props: TabListStateOptions<T>): TabListState<T>Provides state management for a toast queue. Toasts display brief, temporary notifications of actions, errors, or other events in an application.
export function useToastState<T>(props?: ToastStateProps): ToastState<T>A ToastQueue manages the order of toasts.
export class ToastQueue<T> {Subscribes to updates to the visible toasts.
subscribe(fn: () => void): () => void;Closes a toast.
close(key: string): void;Pauses the timers for all visible toasts.
pauseAll(): void;Resumes the timers for all visible toasts.
resumeAll(): void;Subscribes to a provided toast queue and provides methods to update it.
export function useToastQueue<T>(queue: ToastQueue<T>): ToastState<T>Provides state management for toggle components like checkboxes and switches.
export function useToggleState(props?: ToggleStateOptions): ToggleStateManages state for a group of toggles. It supports both single and multiple selected items.
export function useToggleGroupState(props: ToggleGroupProps): ToggleGroupStateManages state for a tooltip trigger. Tracks whether the tooltip is open, and provides methods to toggle this state. Ensures only one tooltip is open at a time and controls the delay for showing a tooltip.
export function useTooltipTriggerState(props?: TooltipTriggerProps): TooltipTriggerStateVirtualizer supports arbitrary layout objects, which compute what items are visible, and how to position and style them. However, layouts do not render items directly. Instead, layouts produce lightweight LayoutInfo objects which describe various properties of an item, such as its position and size. The Virtualizer is then responsible for creating the actual views as needed, based on this layout information.
Every layout extends from the Layout abstract base class. Layouts must implement the
getVisibleLayoutInfos, getLayoutInfo, and getContentSize methods. All other methods can be
optionally overridden to implement custom behavior.
Returns an array of LayoutInfo objects which are inside the given rectangle.
Should be implemented by subclasses.
@param — The rectangle that should contain the returned LayoutInfo objects.
Returns a LayoutInfo for the given key.
Should be implemented by subclasses.
@param — The key of the LayoutInfo to retrieve.
Returns whether the layout should invalidate in response to visible rectangle changes. By default, it only invalidates when the virtualizer's size changes. Return true always to make the layout invalidate while scrolling (e.g. sticky headers).
shouldInvalidate(newRect: Rect, oldRect: Rect): boolean;Returns whether the layout should invalidate when the layout options change. By default it invalidates when the object identity changes. Override this method to optimize layout updates based on specific option changes.
shouldInvalidateLayoutOptions(newOptions: O, oldOptions: O): boolean;This method allows the layout to perform any pre-computation
it needs to in order to prepare LayoutInfos for retrieval.
Called by the virtualizer before getVisibleLayoutInfos
or getLayoutInfo are called.
Updates the size of the given item.
updateItemSize(key: import("@react-types/shared").Key, size: Size): boolean;Returns a LayoutInfo for the given drop target.
Instances of this lightweight class are created by Layout subclasses
to represent each item in the Virtualizer. LayoutInfo objects describe
various properties of an item, such as its position and size, and style information.
The virtualizer uses this information when creating actual DOM elements to display.
@param — The type of element represented by this LayoutInfo. Should match the type of the
corresponding collection node.
@param — A unique key for this LayoutInfo. Should match the key of the corresponding
collection node.
@param — The rectangle describing the size and position of this element.
The type of element represented by this LayoutInfo. Should match the type of the
corresponding collection node.
A unique key for this LayoutInfo. Should match the key of the corresponding collection node.
Content for this item if it was generated by the layout rather than coming from the Collection.
content: any | null;Whether the size is estimated. false by default.
Items with estimated sizes will be measured the first time they are added to the DOM.
The estimated size is used to calculate the size and position of the scrollbar.
@default — false
Whether the layout info sticks to the viewport when scrolling.
@default — false
The element's opacity.
@default — 1
A CSS transform string to apply to the element. null by default.
The z-index of the element. 0 by default.
zIndex: number;Whether the element allows its contents to overflow its container.
@default — false
The x-coordinate of the point.
x: number;The y-coordinate of the point.
y: number;Returns true if this point is the origin.
isOrigin(): boolean;Represents a rectangle.
export class Rect {The x-coordinate of the rectangle.
x: number;The y-coordinate of the rectangle.
y: number;The width of the rectangle.
width: number;The height of the rectangle.
height: number;Returns whether this rectangle intersects another rectangle.
@param — - The rectangle to check.
Returns whether this rectangle fully contains another rectangle.
@param — - The rectangle to check.
Returns whether the rectangle contains the given point.
@param — - The point to check.
Returns the first corner of this rectangle (from top to bottom, left to right) that is contained in the given rectangle, or null of the rectangles do not intersect.
@param — - The rectangle to check.
Returns the intersection of this Rect with another. If the rectangles do not intersect, an all zero Rect is returned.
intersection(other: Rect): Rect;Virtualizer creates instances of the ReusableView class to
represent views currently being displayed.
The content currently being displayed by this view, set by the virtualizer.
content: T | null;Prepares the view for reuse. Called just before the view is removed from the DOM.
prepareForReuse(): void;GridLayout is a virtualizer Layout implementation that arranges its items in a grid. The items are sized between a minimum and maximum size depending on the width of the container.
export class GridLayout<T, O extends GridLayoutOptions = GridLayoutOptions> extends Layout<import("@react-types/shared").Node<T>, O> implements import("@react-types/shared").DropTargetDelegate {ListLayout is a virtualizer Layout implementation that arranges its items in a stack along its applied orientation. It supports both fixed and variable size items.
export class ListLayout<T, O extends ListLayoutOptions = ListLayoutOptions> extends Layout<import("@react-types/shared").Node<T>, O> implements import("@react-types/shared").DropTargetDelegate {Creates a new ListLayout with options. See the list of properties below for a description of the options that can be provided.
constructor(options?: ListLayoutOptions)TableLayout is a virtualizer Layout implementation that arranges items in rows and columns.
export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> extends ListLayout<T, O> {