react-aria-components/dist/types.d.ts

A library of styleable components built using React Aria

import { AriaLabelingProps, RefObject, DOMProps as _DOMProps1, ValidationResult, HoverEvents as _HoverEvents1, InputDOMProps, CollectionBase, DropTargetDelegate, ItemDropTarget, Key, LayoutDelegate, DraggableCollectionProps, DroppableCollectionProps, LinkDOMProps, ValueBase, MultipleSelection, Node as _Node1, Orientation as _Orientation2, DisabledBehavior as _DisabledBehavior1, Expandable, SelectionMode as _SelectionMode1 } from "@react-types/shared";
import React, { Context, CSSProperties, ForwardedRef, JSX, ReactNode, UIEvent, HTMLAttributes, LabelHTMLAttributes, InputHTMLAttributes, OutputHTMLAttributes, TextareaHTMLAttributes, ReactElement } from "react";
import { FormProps as _FormProps1 } from "@react-types/form";
import { AriaCheckboxGroupProps, AriaCheckboxProps, HoverEvents, AriaColorAreaProps, AriaColorFieldProps, AriaSliderProps, AriaSliderThumbProps, Orientation, AriaColorSliderProps, AriaColorWheelOptions, AriaProgressBarProps, AriaButtonProps, HoverProps, AriaSearchFieldProps, AriaTextFieldProps, AriaLinkOptions, AriaBreadcrumbsProps, AriaCalendarProps, AriaRangeCalendarProps, DateValue, AriaColorSwatchProps, DropIndicatorProps as _DropIndicatorProps1, DraggableCollectionOptions, DraggableItemProps, DraggableItemResult, DragItem, DragPreview, DropIndicatorAria, DroppableCollectionOptions, DroppableCollectionResult, DroppableItemOptions, DroppableItemResult, DropTarget, DropTargetDelegate as _DropTargetDelegate1, ListDropTargetDelegate, SeparatorProps as _SeparatorProps1, AriaListBoxProps, PlacementAxis, AriaPopoverProps, PositionProps, AriaMenuProps, AriaDialogProps, AriaComboBoxProps, AriaDateFieldProps, AriaTimeFieldProps, TimeValue, AriaDatePickerProps, AriaDateRangePickerProps, AriaDisclosureProps, DropOptions, AriaGridListProps, AriaMeterProps, AriaModalOverlayProps, AriaNumberFieldProps, AriaRadioGroupProps, AriaRadioProps, AriaSelectProps, AriaSwitchProps, AriaTabListProps, AriaTabPanelProps, AriaTagGroupProps, AriaToastProps, AriaToastRegionProps, AriaToggleButtonGroupProps, AriaToggleButtonProps, AriaPositionProps, Placement, AriaTreeItemOptions, AriaTreeProps } from "react-aria";
import { CheckboxGroupState, Color, ColorAreaState, ColorChannel, ColorFieldState, ColorSpace, SliderState, ColorSliderState, ColorWheelState, SearchFieldState, Collection, Node, SelectionBehavior, SelectionMode, SectionProps as _SectionProps1, CalendarState, RangeCalendarState, DraggableCollectionState, DraggableCollectionStateOptions, DroppableCollectionState, DroppableCollectionStateOptions, ListState, Orientation as _Orientation1, ColorPickerState, ColorPickerProps as _ColorPickerProps1, OverlayTriggerProps, MenuTriggerProps as _MenuTriggerProps1, RootMenuTriggerState, TreeState, OverlayTriggerState, ComboBoxState, DateFieldState, DateSegmentType, DateSegment as _DateSegment1, TimeFieldState, DatePickerState, DatePickerStateOptions, DateRangePickerState, DateRangePickerStateOptions, DisclosureGroupState, DisclosureState, DisclosureGroupProps as _DisclosureGroupProps1, NumberFieldState, RadioGroupState, SelectState, ToggleState, DisabledBehavior, SortDirection, TableState, TabListState, QueuedToast, ToastQueue, ToastState, ToggleGroupState, TooltipTriggerProps, TooltipTriggerState } from "react-stately";
import { AriaAutocompleteProps } from "@react-aria/autocomplete";
import { AutocompleteState } from "@react-stately/autocomplete";
import { CalendarDate, CalendarIdentifier, DateDuration, Calendar as _Calendar1 } from "@internationalized/date";
import { LoadMoreSentinelProps } from "@react-aria/utils";
import { TableColumnResizeState } from "@react-stately/table";
import { ColumnSize, ColumnStaticSize, TableProps as _TableProps1 } from "@react-types/table";
import { Layout } from "@react-stately/virtualizer";
import { TableLayout as _TableLayout1, TableLayoutProps } from "@react-stately/layout";
import { AriaToolbarProps } from "@react-aria/toolbar";
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> = 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;
}
export 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 | undefined);
}
export 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);
}
interface RenderPropsHookOptions<T> extends RenderProps<T>, _DOMProps1, AriaLabelingProps {
    values: T;
    defaultChildren?: ReactNode;
    defaultClassName?: string;
    defaultStyle?: CSSProperties;
}
interface RenderPropsHookRetVal {
    className?: string;
    style?: CSSProperties;
    children?: ReactNode;
    'data-rac': string;
}
export function useRenderProps<T>(props: RenderPropsHookOptions<T>): RenderPropsHookRetVal;
/**
 * 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 | null>;
export interface FieldErrorRenderProps extends ValidationResult {
}
export interface FieldErrorProps extends RenderProps<FieldErrorRenderProps>, _DOMProps1 {
}
/**
 * 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?: RefObject<HTMLInputElement | null>;
}
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 | 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;
/**
 * 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;
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 | null>;
/**
 * 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 | null>;
/**
 * 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 | null>;
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 | null>;
/**
 * 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 | null>;
/**
 * 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>>;
export interface ProgressBarProps extends Omit<AriaProgressBarProps, 'label'>, RenderProps<ProgressBarRenderProps>, SlotProps {
}
export interface ProgressBarRenderProps {
    /**
     * The value as a percentage between the minimum and maximum.
     */
    percentage?: number;
    /**
     * A formatted version of the value.
     * @selector [aria-valuetext]
     */
    valueText: string | undefined;
    /**
     * Whether the progress bar is indeterminate.
     * @selector :not([aria-valuenow])
     */
    isIndeterminate: boolean;
}
export const ProgressBarContext: React.Context<ContextValue<ProgressBarProps, HTMLDivElement>>;
/**
 * Progress bars show either determinate or indeterminate progress of an operation
 * over time.
 */
export const ProgressBar: React.ForwardRefExoticComponent<ProgressBarProps & React.RefAttributes<HTMLDivElement>>;
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;
    /**
     * Whether the button is currently in a pending state.
     * @selector [data-pending]
     */
    isPending: 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;
    /**
     * Whether the button is in a pending state. This disables press and hover events
     * while retaining focusability, and announces the pending state to screen readers.
     */
    isPending?: boolean;
}
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 GroupRenderProps {
    /**
     * Whether the group is currently hovered with a mouse.
     * @selector [data-hovered]
     */
    isHovered: boolean;
    /**
     * Whether an element within the group is focused, either via a mouse or keyboard.
     * @selector [data-focus-within]
     */
    isFocusWithin: boolean;
    /**
     * Whether an element within the group is keyboard focused.
     * @selector [data-focus-visible]
     */
    isFocusVisible: boolean;
    /**
     * Whether the group is disabled.
     * @selector [data-disabled]
     */
    isDisabled: boolean;
    /**
     * Whether the group is invalid.
     * @selector [data-invalid]
     */
    isInvalid: boolean;
}
export interface GroupProps extends AriaLabelingProps, Omit<HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style' | 'role' | 'slot'>, _DOMProps1, HoverProps, RenderProps<GroupRenderProps>, SlotProps {
    /** Whether the group is disabled. */
    isDisabled?: boolean;
    /** Whether the group is invalid. */
    isInvalid?: boolean;
    /**
     * An accessibility role for the group. By default, this is set to `'group'`.
     * Use `'region'` when the contents of the group is important enough to be
     * included in the page table of contents. Use `'presentation'` if the group
     * is visual only and does not represent a semantic grouping of controls.
     * @default 'group'
     */
    role?: 'group' | 'region' | 'presentation';
}
export const GroupContext: React.Context<ContextValue<GroupProps, HTMLDivElement>>;
/**
 * A group represents a set of related UI controls, and supports interactive states for styling.
 */
export const Group: (props: GroupProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
export interface SearchFieldRenderProps {
    /**
     * Whether the search field is empty.
     * @selector [data-empty]
     */
    isEmpty: boolean;
    /**
     * Whether the search field is disabled.
     * @selector [data-disabled]
     */
    isDisabled: boolean;
    /**
     * Whether the search field is invalid.
     * @selector [data-invalid]
     */
    isInvalid: boolean;
    /**
     * State of the search field.
     */
    state: SearchFieldState;
}
export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'label' | 'placeholder' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<SearchFieldRenderProps>, SlotProps {
}
export const SearchFieldContext: React.Context<ContextValue<SearchFieldProps, HTMLDivElement>>;
/**
 * A search field allows a user to enter and clear a search query.
 */
export const SearchField: (props: SearchFieldProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
export interface TextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'className' | 'style'>, HoverEvents, StyleRenderProps<InputRenderProps> {
}
export const TextAreaContext: React.Context<ContextValue<TextAreaProps, HTMLTextAreaElement>>;
/**
 * A textarea allows a user to input mult-line text.
 */
export const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
export interface TextFieldRenderProps {
    /**
     * Whether the text field is disabled.
     * @selector [data-disabled]
     */
    isDisabled: boolean;
    /**
     * Whether the value is invalid.
     * @selector [data-invalid]
     */
    isInvalid: boolean;
    /**
     * Whether the text field is read only.
     * @selector [data-readonly]
     */
    isReadOnly: boolean;
    /**
     * Whether the text field is required.
     * @selector [data-required]
     */
    isRequired: boolean;
}
export interface TextFieldProps extends Omit<AriaTextFieldProps, 'label' | 'placeholder' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, Omit<DOMProps, 'style' | 'className' | 'children'>, SlotProps, RenderProps<TextFieldRenderProps> {
    /** Whether the value is invalid. */
    isInvalid?: boolean;
}
export const TextFieldContext: React.Context<ContextValue<TextFieldProps, HTMLDivElement>>;
/**
 * A text field allows a user to enter a plain text value with a keyboard.
 */
export const TextField: (props: TextFieldProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
export interface AutocompleteProps extends AriaAutocompleteProps, SlotProps {
}
export const AutocompleteContext: React.Context<SlottedContextValue<Partial<AutocompleteProps>>>;
export const AutocompleteStateContext: React.Context<AutocompleteState | null>;
/**
 * An autocomplete combines a TextField or SearchField with a Menu or ListBox, allowing users to search or filter a list of suggestions.
 */
export function Autocomplete(props: AutocompleteProps): JSX.Element;
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?: ReadonlyArray<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?: ReadonlyArray<any>;
}
/** @deprecated */
export const Section: <T extends object>(props: SectionProps<T> & React.RefAttributes<HTMLElement>) => 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 DefaultCollectionRenderer: CollectionRenderer;
export const 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;
    /**
     * Whether the breadcrumb is disabled.
     * @selector [data-disabled]
     */
    isDisabled: 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;
}
/**
 * A Breadcrumb represents an individual item in a `<Breadcrumbs>` list.
 */
export const Breadcrumb: (props: BreadcrumbProps & React.RefAttributes<object>) => 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<AriaCalendarProps<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;
    /**
     * A function to create a new [Calendar](https://react-spectrum.adobe.com/internationalized/date/Calendar.html)
     * object for a given calendar identifier. If not provided, the `createCalendar` function
     * from `@internationalized/date` will be used.
     */
    createCalendar?: (identifier: CalendarIdentifier) => _Calendar1;
}
export interface RangeCalendarProps<T extends DateValue> extends Omit<AriaRangeCalendarProps<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;
    /**
     * A function to create a new [Calendar](https://react-spectrum.adobe.com/internationalized/date/Calendar.html)
     * object for a given calendar identifier. If not provided, the `createCalendar` function
     * from `@internationalized/date` will be used.
     */
    createCalendar?: (identifier: CalendarIdentifier) => _Calendar1;
}
export const CalendarContext: React.Context<ContextValue<CalendarProps<any>, HTMLDivElement>>;
export const RangeCalendarContext: React.Context<ContextValue<RangeCalendarProps<any>, HTMLDivElement>>;
export const CalendarStateContext: React.Context<CalendarState | null>;
export const RangeCalendarStateContext: React.Context<RangeCalendarState | null>;
/**
 * 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>) => 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>) => 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>) => 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>) => 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>) => 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>) => 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>) =>