react-aria-components
Version:
A library of styleable components built using React Aria
1,117 lines • 113 kB
TypeScript
import { RefObject, DOMProps as _DOMProps1, ValidationResult, HoverEvents as _HoverEvents1, InputDOMProps, CollectionBase, DropTargetDelegate, ItemDropTarget, Key, LayoutDelegate, DraggableCollectionProps, DroppableCollectionProps, LinkDOMProps, AriaLabelingProps, ValueBase, Node as _Node1, Orientation as _Orientation2, DisabledBehavior as _DisabledBehavior1, Expandable } from "@react-types/shared";
import React, { Context, CSSProperties, ForwardedRef, JSX, ReactNode, UIEvent, HTMLAttributes, LabelHTMLAttributes, MutableRefObject, InputHTMLAttributes, OutputHTMLAttributes, ReactElement, TextareaHTMLAttributes } from "react";
import { FormProps as _FormProps1 } from "@react-types/form";
import { AriaCheckboxGroupProps, AriaCheckboxProps, HoverEvents, AriaSliderProps, AriaSliderThumbProps, Orientation, AriaLinkOptions, AriaBreadcrumbsProps, AriaButtonProps, CalendarProps as _CalendarProps1, RangeCalendarProps as _RangeCalendarProps1, DateValue, DropIndicatorProps as _DropIndicatorProps1, DraggableCollectionOptions, DraggableItemProps, DraggableItemResult, DragItem, DragPreview, DropIndicatorAria, DroppableCollectionOptions, DroppableCollectionResult, DroppableItemOptions, DroppableItemResult, DropTarget, DropTargetDelegate as _DropTargetDelegate1, ListDropTargetDelegate, SeparatorProps as _SeparatorProps1, AriaListBoxProps, HoverProps, PlacementAxis, AriaPopoverProps, PositionProps, AriaDialogProps, AriaComboBoxProps, AriaDateFieldProps, AriaTimeFieldProps, TimeValue, AriaDatePickerProps, AriaDateRangePickerProps, DropOptions, AriaGridListProps, AriaMenuProps, AriaMeterProps, AriaModalOverlayProps, AriaNumberFieldProps, AriaProgressBarProps, AriaRadioGroupProps, AriaRadioProps, AriaSearchFieldProps, AriaSelectProps, AriaSwitchProps, Key as _Key1, AriaTabListProps, AriaTabPanelProps, AriaTagGroupProps, AriaTextFieldProps, AriaToggleButtonProps, AriaPositionProps, Placement } from "react-aria";
import { CheckboxGroupState, SliderState, Collection, Node, SelectionBehavior, SelectionMode, SectionProps as _SectionProps1, CalendarState, RangeCalendarState, DraggableCollectionState, DraggableCollectionStateOptions, DroppableCollectionState, DroppableCollectionStateOptions, ListState, Orientation as _Orientation1, OverlayTriggerProps, OverlayTriggerState, ComboBoxState, DateFieldState, DateSegmentType, DateSegment as _DateSegment1, TimeFieldState, DatePickerState, DatePickerStateOptions, DateRangePickerState, DateRangePickerStateOptions, MenuTriggerProps as _MenuTriggerProps1, TreeState, NumberFieldState, RadioGroupState, SearchFieldState, SelectState, ToggleState, DisabledBehavior, SortDirection, TableState, TabListState, TooltipTriggerProps, TooltipTriggerState } from "react-stately";
import { Color, AriaColorAreaProps, ColorChannel, ColorSpace, AriaColorSliderProps } from "@react-types/color";
import { ColorAreaState, ColorFieldState, ColorSliderState, ColorWheelState, Color as _Color1, ColorPickerState, ColorPickerProps as _ColorPickerProps1 } from "@react-stately/color";
import { AriaColorFieldProps, AriaColorWheelOptions, AriaColorSwatchProps } from "@react-aria/color";
import { CalendarDate, DateDuration } from "@internationalized/date";
import { RootMenuTriggerState } from "@react-stately/menu";
import { TableColumnResizeState } from "@react-stately/table";
import { ColumnSize, ColumnStaticSize, TableProps as _TableProps1 } from "@react-types/table";
import { Layout } from "@react-stately/virtualizer";
import { TableLayout, TableLayoutProps } from "@react-stately/layout";
import { AriaToolbarProps } from "@react-aria/toolbar";
import { AriaTreeGridListProps } from "@react-aria/tree";
export const DEFAULT_SLOT: unique symbol;
interface SlottedValue<T> {
slots?: Record<string | symbol, T>;
}
type SlottedContextValue<T> = SlottedValue<T> | T | null | undefined;
export type ContextValue<T, E extends Element> = SlottedContextValue<WithRef<T, E>>;
type ProviderValue<T> = [Context<T>, T];
type ProviderValues<A, B, C, D, E, F, G, H, I, J, K> = [ProviderValue<A>] | [ProviderValue<A>, ProviderValue<B>] | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>] | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>] | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>] | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>, ProviderValue<F>] | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>, ProviderValue<F>, ProviderValue<G>] | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>, ProviderValue<F>, ProviderValue<G>, ProviderValue<H>] | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>, ProviderValue<F>, ProviderValue<G>, ProviderValue<H>, ProviderValue<I>] | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>, ProviderValue<F>, ProviderValue<G>, ProviderValue<H>, ProviderValue<I>, ProviderValue<J>] | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>, ProviderValue<F>, ProviderValue<G>, ProviderValue<H>, ProviderValue<I>, ProviderValue<J>, ProviderValue<K>];
interface ProviderProps<A, B, C, D, E, F, G, H, I, J, K> {
values: ProviderValues<A, B, C, D, E, F, G, H, I, J, K>;
children: ReactNode;
}
export function Provider<A, B, C, D, E, F, G, H, I, J, K>({ values, children }: ProviderProps<A, B, C, D, E, F, G, H, I, J, K>): JSX.Element;
interface StyleProps {
/** The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. */
className?: string;
/** The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. */
style?: CSSProperties;
}
interface DOMProps extends StyleProps, _DOMProps1 {
/** The children of the component. */
children?: ReactNode;
}
interface ScrollableProps<T extends Element> {
/** Handler that is called when a user scrolls. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll_event). */
onScroll?: (e: UIEvent<T>) => void;
}
interface StyleRenderProps<T> {
/** The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. */
className?: string | ((values: T & {
defaultClassName: string | undefined;
}) => string);
/** The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. */
style?: CSSProperties | ((values: T & {
defaultStyle: CSSProperties;
}) => CSSProperties);
}
interface RenderProps<T> extends StyleRenderProps<T> {
/** The children of the component. A function may be provided to alter the children based on component state. */
children?: ReactNode | ((values: T & {
defaultChildren: ReactNode | undefined;
}) => ReactNode);
}
/**
* A helper function that accepts a user-provided render prop value (either a static value or a function),
* and combines it with another value to create a final result.
*/
export function composeRenderProps<T, U, V extends T>(value: T extends any ? (T | ((renderProps: U) => V)) : never, wrap: (prevValue: T, renderProps: U) => V): (renderProps: U) => V;
type WithRef<T, E> = T & {
ref?: ForwardedRef<E>;
};
export interface SlotProps {
/**
* A slot name for the component. Slots allow the component to receive props from a parent component.
* An explicit `null` value indicates that the local props completely override all props received from a parent.
*/
slot?: string | null;
}
export function useSlottedContext<T>(context: Context<SlottedContextValue<T>>, slot?: string | null): T | null | undefined;
export function useContextProps<T, U extends SlotProps, E extends Element>(props: T & SlotProps, ref: ForwardedRef<E>, context: Context<ContextValue<U, E>>): [T, RefObject<E | null>];
interface RACValidation {
/**
* Whether to use native HTML form validation to prevent form submission
* when the value is missing or invalid, or mark the field as required
* or invalid via ARIA.
* @default 'native'
*/
validationBehavior?: 'native' | 'aria';
}
export interface TextProps extends HTMLAttributes<HTMLElement> {
elementType?: string;
}
export const TextContext: React.Context<ContextValue<TextProps, HTMLElement>>;
export const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>>;
export const FieldErrorContext: React.Context<ValidationResult>;
export interface FieldErrorRenderProps extends ValidationResult {
}
export interface FieldErrorProps extends RenderProps<FieldErrorRenderProps> {
}
/**
* A FieldError displays validation errors for a form field.
*/
export const FieldError: React.ForwardRefExoticComponent<FieldErrorProps & React.RefAttributes<HTMLElement>>;
export interface FormProps extends _FormProps1, DOMProps {
/**
* Whether to use native HTML form validation to prevent form submission
* when a field value is missing or invalid, or mark fields as required
* or invalid via ARIA.
* @default 'native'
*/
validationBehavior?: 'aria' | 'native';
}
export const FormContext: React.Context<ContextValue<FormProps, HTMLFormElement>>;
/**
* A form is a group of inputs that allows users to submit data to a server,
* with support for providing field validation errors.
*/
export const Form: React.ForwardRefExoticComponent<FormProps & React.RefAttributes<HTMLFormElement>>;
export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
elementType?: string;
}
export const LabelContext: React.Context<ContextValue<LabelProps, HTMLLabelElement>>;
export const Label: (props: LabelProps & React.RefAttributes<HTMLLabelElement>) => React.ReactElement | null;
export interface CheckboxGroupProps extends Omit<AriaCheckboxGroupProps, 'children' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<CheckboxGroupRenderProps>, SlotProps {
}
export interface CheckboxProps extends Omit<AriaCheckboxProps, 'children' | 'validationState' | 'validationBehavior'>, HoverEvents, RACValidation, RenderProps<CheckboxRenderProps>, SlotProps {
/**
* A ref for the HTML input element.
*/
inputRef?: MutableRefObject<HTMLInputElement>;
}
export interface CheckboxGroupRenderProps {
/**
* Whether the checkbox group is disabled.
* @selector [data-disabled]
*/
isDisabled: boolean;
/**
* Whether the checkbox group is read only.
* @selector [data-readonly]
*/
isReadOnly: boolean;
/**
* Whether the checkbox group is required.
* @selector [data-required]
*/
isRequired: boolean;
/**
* Whether the checkbox group is invalid.
* @selector [data-invalid]
*/
isInvalid: boolean;
/**
* State of the checkbox group.
*/
state: CheckboxGroupState;
}
export interface CheckboxRenderProps {
/**
* Whether the checkbox is selected.
* @selector [data-selected]
*/
isSelected: boolean;
/**
* Whether the checkbox is indeterminate.
* @selector [data-indeterminate]
*/
isIndeterminate: boolean;
/**
* Whether the checkbox is currently hovered with a mouse.
* @selector [data-hovered]
*/
isHovered: boolean;
/**
* Whether the checkbox is currently in a pressed state.
* @selector [data-pressed]
*/
isPressed: boolean;
/**
* Whether the checkbox is focused, either via a mouse or keyboard.
* @selector [data-focused]
*/
isFocused: boolean;
/**
* Whether the checkbox is keyboard focused.
* @selector [data-focus-visible]
*/
isFocusVisible: boolean;
/**
* Whether the checkbox is disabled.
* @selector [data-disabled]
*/
isDisabled: boolean;
/**
* Whether the checkbox is read only.
* @selector [data-readonly]
*/
isReadOnly: boolean;
/**
* Whether the checkbox invalid.
* @selector [data-invalid]
*/
isInvalid: boolean;
/**
* Whether the checkbox is required.
* @selector [data-required]
*/
isRequired: boolean;
}
export const CheckboxGroupContext: React.Context<ContextValue<CheckboxGroupProps, HTMLDivElement>>;
export const CheckboxGroupStateContext: React.Context<CheckboxGroupState>;
/**
* A checkbox allows a user to select multiple items from a list of individual items, or
* to mark one individual item as selected.
*/
export const Checkbox: (props: CheckboxProps & React.RefAttributes<HTMLLabelElement>) => React.ReactElement | null;
/**
* A checkbox group allows a user to select multiple items from a list of options.
*/
export const CheckboxGroup: (props: CheckboxGroupProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
export interface ColorThumbRenderProps {
/**
* The selected color, excluding the alpha channel.
*/
color: Color;
/**
* Whether this thumb is currently being dragged.
* @selector [data-dragging]
*/
isDragging: boolean;
/**
* Whether the thumb is currently hovered with a mouse.
* @selector [data-hovered]
*/
isHovered: boolean;
/**
* Whether the thumb is currently focused.
* @selector [data-focused]
*/
isFocused: boolean;
/**
* Whether the thumb is keyboard focused.
* @selector [data-focus-visible]
*/
isFocusVisible: boolean;
/**
* Whether the thumb is disabled.
* @selector [data-disabled]
*/
isDisabled: boolean;
}
export interface ColorThumbProps extends _HoverEvents1, RenderProps<ColorThumbRenderProps> {
}
/**
* A color thumb appears within a ColorArea, ColorSlider, or ColorWheel and allows a user to drag to adjust the color value.
*/
export const ColorThumb: React.ForwardRefExoticComponent<ColorThumbProps & React.RefAttributes<HTMLDivElement>>;
export interface ColorAreaRenderProps {
/**
* Whether the color area is disabled.
* @selector [data-disabled]
*/
isDisabled: boolean;
/**
* State of the color area.
*/
state: ColorAreaState;
}
export interface ColorAreaProps extends AriaColorAreaProps, RenderProps<ColorAreaRenderProps>, SlotProps {
}
export const ColorAreaStateContext: React.Context<ColorAreaState>;
/**
* A color area allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.
*/
export const ColorArea: React.ForwardRefExoticComponent<ColorAreaProps & React.RefAttributes<HTMLDivElement>>;
export interface InputRenderProps {
/**
* Whether the input is currently hovered with a mouse.
* @selector [data-hovered]
*/
isHovered: boolean;
/**
* Whether the input is focused, either via a mouse or keyboard.
* @selector [data-focused]
*/
isFocused: boolean;
/**
* Whether the input is keyboard focused.
* @selector [data-focus-visible]
*/
isFocusVisible: boolean;
/**
* Whether the input is disabled.
* @selector [data-disabled]
*/
isDisabled: boolean;
/**
* Whether the input is invalid.
* @selector [data-invalid]
*/
isInvalid: boolean;
}
export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'>, HoverEvents, StyleRenderProps<InputRenderProps> {
}
export const InputContext: React.Context<ContextValue<InputProps, HTMLInputElement>>;
/**
* An input allows a user to input text.
*/
export const Input: (props: InputProps & React.RefAttributes<HTMLInputElement>) => React.ReactElement | null;
export interface ColorFieldRenderProps {
/**
* Whether the color field is disabled.
* @selector [data-disabled]
*/
isDisabled: boolean;
/**
* Whether the color field is invalid.
* @selector [data-invalid]
*/
isInvalid: boolean;
/**
* The color channel that this field edits, or "hex" if no `channel` prop is set.
* @selector [data-channel="hex | hue | saturation | ..."]
*/
channel: ColorChannel | 'hex';
/**
* State of the color field.
*/
state: ColorFieldState;
}
export interface ColorFieldProps extends Omit<AriaColorFieldProps, 'label' | 'placeholder' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, InputDOMProps, RenderProps<ColorFieldRenderProps>, SlotProps {
/**
* The color channel that this field edits. If not provided,
* the color is edited as a hex value.
*/
channel?: ColorChannel;
/**
* The color space that the color field operates in if a `channel` prop is provided.
* If no `channel` is provided, the color field always displays the color as an RGB hex value.
*/
colorSpace?: ColorSpace;
}
export const ColorFieldStateContext: React.Context<ColorFieldState>;
/**
* A color field allows users to edit a hex color or individual color channel value.
*/
export const ColorField: React.ForwardRefExoticComponent<ColorFieldProps & React.RefAttributes<HTMLDivElement>>;
export interface SliderProps<T = number | number[]> extends Omit<AriaSliderProps<T>, 'label'>, RenderProps<SliderRenderProps>, SlotProps {
/**
* The display format of the value label.
*/
formatOptions?: Intl.NumberFormatOptions;
}
export const SliderContext: React.Context<ContextValue<SliderProps<number | number[]>, HTMLDivElement>>;
export const SliderStateContext: React.Context<SliderState>;
export const SliderTrackContext: React.Context<ContextValue<SliderTrackContextValue, HTMLDivElement>>;
export const SliderOutputContext: React.Context<ContextValue<SliderOutputContextValue, HTMLOutputElement>>;
export interface SliderRenderProps {
/**
* The orientation of the slider.
* @selector [data-orientation="horizontal | vertical"]
*/
orientation: Orientation;
/**
* Whether the slider is disabled.
* @selector [data-disabled]
*/
isDisabled: boolean;
/**
* State of the slider.
*/
state: SliderState;
}
/**
* A slider allows a user to select one or more values within a range.
*/
export const Slider: <T extends number | number[]>(props: SliderProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
export interface SliderOutputProps extends RenderProps<SliderRenderProps> {
}
interface SliderOutputContextValue extends Omit<OutputHTMLAttributes<HTMLOutputElement>, 'children' | 'className' | 'style'>, SliderOutputProps {
}
/**
* A slider output displays the current value of a slider as text.
*/
export const SliderOutput: (props: SliderOutputProps & React.RefAttributes<HTMLOutputElement>) => React.ReactElement | null;
export interface SliderTrackRenderProps extends SliderRenderProps {
/**
* Whether the slider track is currently hovered with a mouse.
* @selector [data-hovered]
*/
isHovered: boolean;
}
export interface SliderTrackProps extends HoverEvents, RenderProps<SliderTrackRenderProps> {
}
interface SliderTrackContextValue extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style'>, SliderTrackProps {
}
/**
* A slider track is a container for one or more slider thumbs.
*/
export const SliderTrack: (props: SliderTrackProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
export interface SliderThumbRenderProps {
/**
* State of the slider.
*/
state: SliderState;
/**
* Whether this thumb is currently being dragged.
* @selector [data-dragging]
*/
isDragging: boolean;
/**
* Whether the thumb is currently hovered with a mouse.
* @selector [data-hovered]
*/
isHovered: boolean;
/**
* Whether the thumb is currently focused.
* @selector [data-focused]
*/
isFocused: boolean;
/**
* Whether the thumb is keyboard focused.
* @selector [data-focus-visible]
*/
isFocusVisible: boolean;
/**
* Whether the thumb is disabled.
* @selector [data-disabled]
*/
isDisabled: boolean;
}
export interface SliderThumbProps extends Omit<AriaSliderThumbProps, 'label' | 'validationState'>, HoverEvents, RenderProps<SliderThumbRenderProps> {
/**
* A ref for the HTML input element.
*/
inputRef?: RefObject<HTMLInputElement | null>;
}
/**
* A slider thumb represents an individual value that the user can adjust within a slider track.
*/
export const SliderThumb: (props: SliderThumbProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
export interface ColorSliderRenderProps {
/**
* The orientation of the color slider.
* @selector [data-orientation="horizontal | vertical"]
*/
orientation: Orientation;
/**
* Whether the color slider is disabled.
* @selector [data-disabled]
*/
isDisabled: boolean;
/**
* State of the color slider.
*/
state: ColorSliderState;
}
export interface ColorSliderProps extends Omit<AriaColorSliderProps, 'label'>, RenderProps<ColorSliderRenderProps>, SlotProps {
}
export const ColorSliderStateContext: React.Context<ColorSliderState>;
/**
* A color slider allows users to adjust an individual channel of a color value.
*/
export const ColorSlider: React.ForwardRefExoticComponent<ColorSliderProps & React.RefAttributes<HTMLDivElement>>;
export interface ColorWheelRenderProps {
/**
* Whether the color wheel is disabled.
* @selector [data-disabled]
*/
isDisabled: boolean;
/**
* State of the color color wheel.
*/
state: ColorWheelState;
}
export interface ColorWheelProps extends AriaColorWheelOptions, RenderProps<ColorWheelRenderProps>, SlotProps {
}
export const ColorWheelStateContext: React.Context<ColorWheelState>;
/**
* A color wheel allows users to adjust the hue of an HSL or HSB color value on a circular track.
*/
export const ColorWheel: React.ForwardRefExoticComponent<ColorWheelProps & React.RefAttributes<HTMLDivElement>>;
export interface ColorWheelTrackRenderProps extends ColorWheelRenderProps {
}
export interface ColorWheelTrackProps extends StyleRenderProps<ColorWheelTrackRenderProps> {
}
interface ColorWheelTrackContextValue extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style'>, ColorWheelTrackProps {
}
export const ColorWheelTrackContext: React.Context<ContextValue<ColorWheelTrackContextValue, HTMLDivElement>>;
/**
* A color wheel track renders a circular gradient track.
*/
export const ColorWheelTrack: React.ForwardRefExoticComponent<ColorWheelTrackProps & React.RefAttributes<HTMLDivElement>>;
export interface HeadingProps extends HTMLAttributes<HTMLElement> {
level?: number;
}
export const Heading: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLHeadingElement>>;
export const CheckboxContext: Context<ContextValue<CheckboxProps, HTMLLabelElement>>;
export const ColorAreaContext: Context<ContextValue<Partial<ColorAreaProps>, HTMLDivElement>>;
export const ColorFieldContext: Context<ContextValue<ColorFieldProps, HTMLDivElement>>;
export const ColorSliderContext: Context<ContextValue<Partial<ColorSliderProps>, HTMLDivElement>>;
export const ColorWheelContext: Context<ContextValue<Partial<ColorWheelProps>, HTMLDivElement>>;
export const HeadingContext: Context<ContextValue<HeadingProps, HTMLHeadingElement>>;
interface CollectionProps<T> extends Omit<CollectionBase<T>, 'children'> {
/** The contents of the collection. */
children?: ReactNode | ((item: T) => ReactNode);
/** Values that should invalidate the item cache when using dynamic collections. */
dependencies?: any[];
}
interface ItemRenderProps {
/**
* Whether the item is currently hovered with a mouse.
* @selector [data-hovered]
*/
isHovered: boolean;
/**
* Whether the item is currently in a pressed state.
* @selector [data-pressed]
*/
isPressed: boolean;
/**
* Whether the item is currently selected.
* @selector [data-selected]
*/
isSelected: boolean;
/**
* Whether the item is currently focused.
* @selector [data-focused]
*/
isFocused: boolean;
/**
* Whether the item is currently keyboard focused.
* @selector [data-focus-visible]
*/
isFocusVisible: boolean;
/**
* Whether the item is non-interactive, i.e. both selection and actions are disabled and the item may
* not be focused. Dependent on `disabledKeys` and `disabledBehavior`.
* @selector [data-disabled]
*/
isDisabled: boolean;
/**
* The type of selection that is allowed in the collection.
* @selector [data-selection-mode="single | multiple"]
*/
selectionMode: SelectionMode;
/** The selection behavior for the collection. */
selectionBehavior: SelectionBehavior;
/**
* Whether the item allows dragging.
* @note This property is only available in collection components that support drag and drop.
* @selector [data-allows-dragging]
*/
allowsDragging?: boolean;
/**
* Whether the item is currently being dragged.
* @note This property is only available in collection components that support drag and drop.
* @selector [data-dragging]
*/
isDragging?: boolean;
/**
* Whether the item is currently an active drop target.
* @note This property is only available in collection components that support drag and drop.
* @selector [data-drop-target]
*/
isDropTarget?: boolean;
}
export interface SectionProps<T> extends Omit<_SectionProps1<T>, 'children' | 'title'>, StyleProps {
/** The unique id of the section. */
id?: Key;
/** The object value that this section represents. When using dynamic collections, this is set automatically. */
value?: T;
/** Static child items or a function to render children. */
children?: ReactNode | ((item: T) => ReactElement);
/** Values that should invalidate the item cache when using dynamic collections. */
dependencies?: any[];
}
export const Section: <T extends object>(props: SectionProps<T> & React.RefAttributes<HTMLElement>) => React.ReactElement | null;
interface CollectionBranchProps {
/** The collection of items to render. */
collection: Collection<Node<unknown>>;
/** The parent node of the items to render. */
parent: Node<unknown>;
/** A function that renders a drop indicator between items. */
renderDropIndicator?: (target: ItemDropTarget) => ReactNode;
}
interface CollectionRootProps extends HTMLAttributes<HTMLElement> {
/** The collection of items to render. */
collection: Collection<Node<unknown>>;
/** A set of keys for items that should always be persisted in the DOM. */
persistedKeys?: Set<Key> | null;
/** A ref to the scroll container for the collection. */
scrollRef?: RefObject<HTMLElement | null>;
/** A function that renders a drop indicator between items. */
renderDropIndicator?: (target: ItemDropTarget) => ReactNode;
}
export interface CollectionRenderer {
/** Whether this is a virtualized collection. */
isVirtualized?: boolean;
/** A delegate object that provides layout information for items in the collection. */
layoutDelegate?: LayoutDelegate;
/** A delegate object that provides drop targets for pointer coordinates within the collection. */
dropTargetDelegate?: DropTargetDelegate;
/** A component that renders the root collection items. */
CollectionRoot: React.ComponentType<CollectionRootProps>;
/** A component that renders the child collection items. */
CollectionBranch: React.ComponentType<CollectionBranchProps>;
}
export const UNSTABLE_DefaultCollectionRenderer: CollectionRenderer;
export const UNSTABLE_CollectionRendererContext: React.Context<CollectionRenderer>;
export interface LinkProps extends Omit<AriaLinkOptions, 'elementType'>, HoverEvents, RenderProps<LinkRenderProps>, SlotProps {
}
export interface LinkRenderProps {
/**
* Whether the link is the current item within a list.
* @selector [data-current]
*/
isCurrent: boolean;
/**
* Whether the link is currently hovered with a mouse.
* @selector [data-hovered]
*/
isHovered: boolean;
/**
* Whether the link is currently in a pressed state.
* @selector [data-pressed]
*/
isPressed: boolean;
/**
* Whether the link is focused, either via a mouse or keyboard.
* @selector [data-focused]
*/
isFocused: boolean;
/**
* Whether the link is keyboard focused.
* @selector [data-focus-visible]
*/
isFocusVisible: boolean;
/**
* Whether the link is disabled.
* @selector [data-disabled]
*/
isDisabled: boolean;
}
export const LinkContext: React.Context<ContextValue<LinkProps, HTMLAnchorElement>>;
/**
* A link allows a user to navigate to another page or resource within a web page
* or application.
*/
export const Link: (props: LinkProps & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;
export interface BreadcrumbsProps<T> extends Omit<CollectionProps<T>, 'disabledKeys'>, AriaBreadcrumbsProps, StyleProps, SlotProps {
/** Whether the breadcrumbs are disabled. */
isDisabled?: boolean;
/** Handler that is called when a breadcrumb is clicked. */
onAction?: (key: Key) => void;
}
export const BreadcrumbsContext: React.Context<ContextValue<BreadcrumbsProps<any>, HTMLOListElement>>;
/**
* Breadcrumbs display a hierarchy of links to the current page or resource in an application.
*/
export const Breadcrumbs: <T extends object>(props: BreadcrumbsProps<T> & React.RefAttributes<HTMLOListElement>) => React.ReactElement | null;
export interface BreadcrumbRenderProps {
/**
* Whether the breadcrumb is for the current page.
* @selector [data-current]
*/
isCurrent: boolean;
}
export interface BreadcrumbProps extends RenderProps<BreadcrumbRenderProps> {
/** A unique id for the breadcrumb, which will be passed to `onAction` when the breadcrumb is pressed. */
id?: Key;
/** The children of the breadcrumb, typically a `<Link>`. */
children: ReactNode;
}
/**
* A Breadcrumb represents an individual item in a `<Breadcrumbs>` list.
*/
export const Breadcrumb: (props: BreadcrumbProps & React.RefAttributes<object>) => React.ReactElement | null;
export interface ButtonRenderProps {
/**
* Whether the button is currently hovered with a mouse.
* @selector [data-hovered]
*/
isHovered: boolean;
/**
* Whether the button is currently in a pressed state.
* @selector [data-pressed]
*/
isPressed: boolean;
/**
* Whether the button is focused, either via a mouse or keyboard.
* @selector [data-focused]
*/
isFocused: boolean;
/**
* Whether the button is keyboard focused.
* @selector [data-focus-visible]
*/
isFocusVisible: boolean;
/**
* Whether the button is disabled.
* @selector [data-disabled]
*/
isDisabled: boolean;
}
export interface ButtonProps extends Omit<AriaButtonProps, 'children' | 'href' | 'target' | 'rel' | 'elementType'>, HoverEvents, SlotProps, RenderProps<ButtonRenderProps> {
/**
* The `<form>` element to associate the button with.
* The value of this attribute must be the id of a `<form>` in the same document.
*/
form?: string;
/**
* The URL that processes the information submitted by the button.
* Overrides the action attribute of the button's form owner.
*/
formAction?: string;
/** Indicates how to encode the form data that is submitted. */
formEncType?: string;
/** Indicates the HTTP method used to submit the form. */
formMethod?: string;
/** Indicates that the form is not to be validated when it is submitted. */
formNoValidate?: boolean;
/** Overrides the target attribute of the button's form owner. */
formTarget?: string;
/** Submitted as a pair with the button's value as part of the form data. */
name?: string;
/** The value associated with the button's name when it's submitted with the form data. */
value?: string;
}
interface ButtonContextValue extends ButtonProps {
isPressed?: boolean;
}
export const ButtonContext: React.Context<ContextValue<ButtonContextValue, HTMLButtonElement>>;
/**
* A button allows a user to perform an action, with mouse, touch, and keyboard interactions.
*/
export const Button: (props: ButtonProps & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
export interface CalendarRenderProps {
/**
* Whether the calendar is disabled.
* @selector [data-disabled]
*/
isDisabled: boolean;
/**
* State of the calendar.
*/
state: CalendarState;
/**
* Whether the calendar is invalid.
* @selector [data-invalid]
*/
isInvalid: boolean;
}
export interface RangeCalendarRenderProps extends Omit<CalendarRenderProps, 'state'> {
/**
* State of the range calendar.
*/
state: RangeCalendarState;
}
export interface CalendarProps<T extends DateValue> extends Omit<_CalendarProps1<T>, 'errorMessage' | 'validationState'>, RenderProps<CalendarRenderProps>, SlotProps {
/**
* The amount of days that will be displayed at once. This affects how pagination works.
* @default {months: 1}
*/
visibleDuration?: DateDuration;
}
export interface RangeCalendarProps<T extends DateValue> extends Omit<_RangeCalendarProps1<T>, 'errorMessage' | 'validationState'>, RenderProps<RangeCalendarRenderProps>, SlotProps {
/**
* The amount of days that will be displayed at once. This affects how pagination works.
* @default {months: 1}
*/
visibleDuration?: DateDuration;
}
export const CalendarContext: React.Context<ContextValue<CalendarProps<any>, HTMLDivElement>>;
export const RangeCalendarContext: React.Context<ContextValue<RangeCalendarProps<any>, HTMLDivElement>>;
export const CalendarStateContext: React.Context<CalendarState>;
export const RangeCalendarStateContext: React.Context<RangeCalendarState>;
/**
* A calendar displays one or more date grids and allows users to select a single date.
*/
export const Calendar: <T extends DateValue>(props: CalendarProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
/**
* A range calendar displays one or more date grids and allows users to select a contiguous range of dates.
*/
export const RangeCalendar: <T extends DateValue>(props: RangeCalendarProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
export interface CalendarCellRenderProps {
/** The date that the cell represents. */
date: CalendarDate;
/** The day number formatted according to the current locale. */
formattedDate: string;
/**
* Whether the cell is currently hovered with a mouse.
* @selector [data-hovered]
*/
isHovered: boolean;
/**
* Whether the cell is currently being pressed.
* @selector [data-pressed]
*/
isPressed: boolean;
/**
* Whether the cell is selected.
* @selector [data-selected]
*/
isSelected: boolean;
/**
* Whether the cell is the first date in a range selection.
* @selector [data-selection-start]
*/
isSelectionStart: boolean;
/**
* Whether the cell is the last date in a range selection.
* @selector [data-selection-end]
*/
isSelectionEnd: boolean;
/**
* Whether the cell is focused.
* @selector [data-focused]
*/
isFocused: boolean;
/**
* Whether the cell is keyboard focused.
* @selector [data-focus-visible]
*/
isFocusVisible: boolean;
/**
* Whether the cell is disabled, according to the calendar's `minValue`, `maxValue`, and `isDisabled` props.
* Disabled dates are not focusable, and cannot be selected by the user. They are typically
* displayed with a dimmed appearance.
* @selector [data-disabled]
*/
isDisabled: boolean;
/**
* Whether the cell is outside the visible range of the calendar.
* For example, dates before the first day of a month in the same week.
* @selector [data-outside-visible-range]
*/
isOutsideVisibleRange: boolean;
/**
* Whether the cell is outside the current month.
* @selector [data-outside-month]
*/
isOutsideMonth: boolean;
/**
* Whether the cell is unavailable, according to the calendar's `isDateUnavailable` prop. Unavailable dates remain
* focusable, but cannot be selected by the user. They should be displayed with a visual affordance to indicate they
* are unavailable, such as a different color or a strikethrough.
*
* Note that because they are focusable, unavailable dates must meet a 4.5:1 color contrast ratio,
* [as defined by WCAG](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html).
*
* @selector [data-unavailable]
*/
isUnavailable: boolean;
/**
* Whether the cell is part of an invalid selection.
* @selector [data-invalid]
*/
isInvalid: boolean;
}
export interface CalendarGridProps extends StyleProps {
/**
* Either a function to render calendar cells for each date in the month,
* or children containing a `<CalendarGridHeader>`` and `<CalendarGridBody>`
* when additional customization is needed.
*/
children?: ReactElement | ReactElement[] | ((date: CalendarDate) => ReactElement);
/**
* An offset from the beginning of the visible date range that this
* CalendarGrid should display. Useful when displaying more than one
* month at a time.
*/
offset?: DateDuration;
/**
* The style of weekday names to display in the calendar grid header,
* e.g. single letter, abbreviation, or full day name.
* @default "narrow"
*/
weekdayStyle?: 'narrow' | 'short' | 'long';
}
/**
* A calendar grid displays a single grid of days within a calendar or range calendar which
* can be keyboard navigated and selected by the user.
*/
export const CalendarGrid: (props: CalendarGridProps & React.RefAttributes<HTMLTableElement>) => React.ReactElement | null;
export interface CalendarGridHeaderProps extends StyleProps {
/** A function to render a `<CalendarHeaderCell>` for a weekday name. */
children: (day: string) => ReactElement;
}
/**
* A calendar grid header displays a row of week day names at the top of a month.
*/
export const CalendarGridHeader: (props: CalendarGridHeaderProps & React.RefAttributes<HTMLTableSectionElement>) => React.ReactElement | null;
export interface CalendarHeaderCellProps extends DOMProps {
}
/**
* A calendar header cell displays a week day name at the top of a column within a calendar.
*/
export const CalendarHeaderCell: React.ForwardRefExoticComponent<CalendarHeaderCellProps & React.RefAttributes<HTMLTableCellElement>>;
export interface CalendarGridBodyProps extends StyleProps {
/** A function to render a `<CalendarCell>` for a given date. */
children: (date: CalendarDate) => ReactElement;
}
/**
* A calendar grid body displays a grid of calendar cells within a month.
*/
export const CalendarGridBody: (props: CalendarGridBodyProps & React.RefAttributes<HTMLTableSectionElement>) => React.ReactElement | null;
export interface CalendarCellProps extends RenderProps<CalendarCellRenderProps>, _HoverEvents1 {
/** The date to render in the cell. */
date: CalendarDate;
}
/**
* A calendar cell displays a date cell within a calendar grid which can be selected by the user.
*/
export const CalendarCell: (props: CalendarCellProps & React.RefAttributes<HTMLTableCellElement>) => React.ReactElement | null;
export interface ColorSwatchRenderProps {
/** The color of the swatch. */
color: Color;
}
export interface ColorSwatchProps extends AriaColorSwatchProps, StyleRenderProps<ColorSwatchRenderProps>, SlotProps {
}
export const ColorSwatchContext: React.Context<ContextValue<ColorSwatchProps, HTMLDivElement>>;
/**
* A ColorSwatch displays a preview of a selected color.
*/
export const ColorSwatch: React.ForwardRefExoticComponent<ColorSwatchProps & React.RefAttributes<HTMLDivElement>>;
interface DraggableCollectionStateOpts extends Omit<DraggableCollectionStateOptions, 'getItems'> {
}
interface DragHooks {
useDraggableCollectionState?: (props: DraggableCollectionStateOpts) => DraggableCollectionState;
useDraggableCollection?: (props: DraggableCollectionOptions, state: DraggableCollectionState, ref: RefObject<HTMLElement | null>) => void;
useDraggableItem?: (props: DraggableItemProps, state: DraggableCollectionState) => DraggableItemResult;
DragPreview?: typeof DragPreview;
renderDragPreview?: (items: DragItem[]) => JSX.Element;
isVirtualDragging?: () => boolean;
}
interface DropHooks {
useDroppableCollectionState?: (props: DroppableCollectionStateOptions) => DroppableCollectionState;
useDroppableCollection?: (props: DroppableCollectionOptions, state: DroppableCollectionState, ref: RefObject<HTMLElement | null>) => DroppableCollectionResult;
useDroppableItem?: (options: DroppableItemOptions, state: DroppableCollectionState, ref: RefObject<HTMLElement | null>) => DroppableItemResult;
useDropIndicator?: (props: _DropIndicatorProps1, state: DroppableCollectionState, ref: RefObject<HTMLElement | null>) => DropIndicatorAria;
renderDropIndicator?: (target: DropTarget) => JSX.Element;
dropTargetDelegate?: _DropTargetDelegate1;
ListDropTargetDelegate: typeof ListDropTargetDelegate;
}
export type DragAndDropHooks = DragHooks & DropHooks;
interface DragAndDrop {
/** Drag and drop hooks for the collection element. */
dragAndDropHooks: DragAndDropHooks;
}
export interface DragAndDropOptions extends Omit<DraggableCollectionProps, 'preview' | 'getItems'>, DroppableCollectionProps {
/**
* A function that returns the items being dragged. If not specified, we assume that the collection is not draggable.
* @default () => []
*/
getItems?: (keys: Set<Key>) => DragItem[];
/**
* A function that renders a drag preview, which is shown under the user's cursor while dragging.
* By default, a copy of the dragged element is rendered.
*/
renderDragPreview?: (items: DragItem[]) => JSX.Element;
/**
* A function that renders a drop indicator element between two items in a collection.
* This should render a `<DropIndicator>` element. If this function is not provided, a
* default DropIndicator is provided.
*/
renderDropIndicator?: (target: DropTarget) => JSX.Element;
/** A custom delegate object that provides drop targets for pointer coordinates within the collection. */
dropTargetDelegate?: _DropTargetDelegate1;
/** Whether the drag and drop events should be disabled. */
isDisabled?: boolean;
}
/**
* Provides the hooks required to enable drag and drop behavior for a drag and drop compatible collection component.
*/
export function useDragAndDrop(options: DragAndDropOptions): DragAndDrop;
interface DragAndDropContextValue {
dragAndDropHooks?: DragAndDropHooks;
dragState?: DraggableCollectionState;
dropState?: DroppableCollectionState;
}
export const DragAndDropContext: React.Context<DragAndDropContextValue>;
export const DropIndicatorContext: React.Context<DropIndicatorContextValue>;
interface DropIndicatorRenderProps {
/**
* Whether the drop indicator is currently the active drop target.
* @selector [data-drop-target]
*/
isDropTarget: boolean;
}
export interface DropIndicatorProps extends _DropIndicatorProps1, RenderProps<DropIndicatorRenderProps> {
}
interface DropIndicatorContextValue {
render: (props: DropIndicatorProps, ref: ForwardedRef<HTMLElement>) => ReactNode;
}
/**
* A DropIndicator is rendered between items in a collection to indicate where dropped data will be inserted.
*/
export const DropIndicator: React.ForwardRefExoticComponent<DropIndicatorProps & React.RefAttributes<HTMLElement>>;
export const HeaderContext: React.Context<ContextValue<React.HTMLAttributes<HTMLElement>, HTMLElement>>;
export const Header: (props: React.HTMLAttributes<HTMLElement> & React.RefAttributes<object>) => React.ReactElement | null;
export interface SeparatorProps extends _SeparatorProps1, StyleProps, SlotProps {
}
export const SeparatorContext: React.Context<ContextValue<SeparatorProps, HTMLElement>>;
export const Separator: (props: SeparatorProps & React.RefAttributes<object>) => React.ReactElement | null;
export interface ListBoxRenderProps {
/**
* Whether the listbox has no items and should display its empty state.
* @selector [data-empty]
*/
isEmpty: boolean;
/**
* Whether the listbox is currently focused.
* @selector [data-focused]
*/
isFocused: boolean;
/**
* Whether the listbox is currently keyboard focused.
* @selector [data-focus-visible]
*/
isFocusVisible: boolean;
/**
* Whether the listbox is currently the active drop target.
* @selector [data-drop-target]
*/
isDropTarget: boolean;
/**
* Whether the items are arranged in a stack or grid.
* @selector [data-layout="stack | grid"]
*/
layout: 'stack' | 'grid';
/**
* State of the listbox.
*/
state: ListState<unknown>;
}
export interface ListBoxProps<T> extends Omit<AriaListBoxProps<T>, 'children' | 'label'>, CollectionProps<T>, StyleRenderProps<ListBoxRenderProps>, SlotProps, ScrollableProps<HTMLDivElement> {
/** How multiple selection should behave in the collection. */
selectionBehavior?: SelectionBehavior;
/** The drag and drop hooks returned by `useDragAndDrop` used to enable drag and drop behavior for the ListBox. */
dragAndDropHooks?: DragAndDropHooks;
/** Provides content to display when there are no items in the list. */
renderEmptyState?: (props: ListBoxRenderProps) => ReactNode;
/**
* Whether the items are arranged in a stack or grid.
* @default 'stack'
*/
layout?: 'stack' | 'grid';
/**
* The primary orientation of the items. Usually this is the
* direction that the collection scrolls.
* @default 'vertical'
*/
orientation?: _Orientation1;
}
export const ListBoxContext: React.Context<ContextValue<ListBoxProps<any>, HTMLDivElement>>;
export const ListStateContext: React.Context<ListState<any>>;
/**
* A listbox displays a list of options and allows a user to select one or more of them.
*/
export const ListBox: <T extends object>(props: ListBoxProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
export interface ListBoxItemRenderProps extends ItemRenderProps {
}
export interface ListBoxItemProps<T = object> extends RenderProps<ListBoxItemRenderProps>, LinkDOMProps, _HoverEvents1 {
/** The unique id of the item. */
id?: Key;
/** The object value that this item represents. When using dynamic collections, this is set automatically. */
value?: T;
/** A string representation of the item's contents, used for features like typeahead. */
textValue?: string;
/** An accessibility label for this item. */
'aria-label'?: string;
/** Whether the item is disabled. */
isDisabled?: boolean;
/**
* Handler that is called when a user performs an action on the item. The exact user event depends on
* the collection's `selectionBehavior` prop and the interaction modality.
*/
onAction?: () => void;
}
/**
* A ListBoxItem represents an individual option in a ListBox.
*/
export const ListBoxItem: <T extends object>(props: ListBoxItemProps<T> & React.RefAttributes<T>) => React.ReactElement | null;
export interface ColorSwatchPickerRenderProps extends Omit<ListBoxRenderProps, 'isDropTarget'> {
}
export interface ColorSwatchPickerProps extends ValueBase<string | _Color1, _Color1>, AriaLabelingProps, StyleRenderProps<ColorSwatchPickerRenderProps> {
/** The children of the ColorSwatchPicker. */
children?: ReactNode;
/**
* Whether the items are arranged in a stack or grid.
* @default 'grid'
*/
layout?: 'grid' | 'stack';
}
export const ColorSwatchPickerContext: React.Context<ContextValue<ColorSwatchPickerProps, HTMLDivElement>>;
/**
* A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.
*/
export let ColorSwatchPicker: React.ForwardRefExoticComponent<ColorSwatchPickerProps & React.RefAttributes<HTMLDivElement>>;
export interface ColorSwatchPickerItemRenderProps extends Omit<ListBoxItemRenderProps, 'selectionMode' | 'selectionBehavior'> {
/** The color of the swatch. */
color: _Color1;
}
export interface ColorSwatchPickerItemProps extends RenderProps<ColorSwatchPickerItemRenderProps>, _HoverEvents1 {
/** The color of the swatch. */
color: string | _Color1;
/** Whether the color swatch is disabled. */
isDisabled?: boolean;
}
export let ColorSwatchPickerItem: React.ForwardRefExoticComponent<ColorSwatchPickerItemProps & React.RefAttributes<HTMLDivElement>>;
export interface ColorPickerRenderProps {
/** The currently selected color. */
color: Color;
}
export interface ColorPickerProps extends _ColorPickerProps1, SlotProps, Pick<RenderProps<ColorPickerRenderProps>, 'children'> {
}
export const ColorPickerContext: React.Context<SlottedContextValue<ColorPickerProps>>;
export const ColorPickerStateContext: React.Context<ColorPickerState>;
/**
* A ColorPicker synchronizes a color value between multiple React Aria color co