import { AriaGridListProps } from 'react-aria/useGridList'; import { ClassNameOrFunction, ContextValue, DOMProps, DOMRenderProps, RenderProps, SlotProps, StyleProps, StyleRenderProps } from './utils'; import { CollectionProps, ItemRenderProps, SectionProps } from './Collection'; import { DragAndDropHooks } from './useDragAndDrop'; import { GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps, Orientation, PressEvents } from '@react-types/shared'; import { SelectionBehavior } from '@react-types/shared'; import { ListState } from 'react-stately/useListState'; import { LoadMoreSentinelProps } from 'react-aria/private/utils/useLoadMoreSentinel'; import React, { HTMLAttributes, ReactNode } from 'react'; export interface GridListRenderProps { /** * Whether the list has no items and should display its empty state. * @selector [data-empty] */ isEmpty: boolean; /** * Whether the grid list is currently focused. * @selector [data-focused] */ isFocused: boolean; /** * Whether the grid list is currently keyboard focused. * @selector [data-focus-visible] */ isFocusVisible: boolean; /** * Whether the grid list 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'; /** * The primary orientation of the items. * @selector [data-orientation="vertical | horizontal"] */ orientation: Orientation; /** * State of the grid list. */ state: ListState; } export interface GridListProps extends Omit, 'children'>, CollectionProps, StyleRenderProps, SlotProps, GlobalDOMAttributes { /** * 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. * @default 'react-aria-GridList' */ className?: ClassNameOrFunction; /** * Whether typeahead navigation is disabled. * @default false */ disallowTypeAhead?: boolean; /** * How multiple selection should behave in the collection. * @default "toggle" */ selectionBehavior?: SelectionBehavior; /** The drag and drop hooks returned by `useDragAndDrop` used to enable drag and drop behavior for the GridList. */ dragAndDropHooks?: DragAndDropHooks>; /** Provides content to display when there are no items in the list. */ renderEmptyState?: (props: GridListRenderProps) => 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?: Orientation; } export declare const GridListContext: React.Context, HTMLDivElement>>; /** * A grid list displays a list of interactive items, with support for keyboard navigation, * single or multiple selection, and row actions. */ export declare const GridList: (props: GridListProps & React.RefAttributes) => React.ReactElement> | null; export interface GridListItemRenderProps extends ItemRenderProps { /** The unique id of the item. */ id?: Key; /** * State of the grid list. */ state: ListState; } export interface GridListItemProps extends RenderProps, LinkDOMProps, HoverEvents, PressEvents, Omit, 'onClick'> { /** * 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. * @default 'react-aria-GridListItem' */ className?: ClassNameOrFunction; /** 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; /** 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 GridListItem represents an individual item in a GridList. */ export declare const GridListItem: (props: GridListItemProps & React.RefAttributes) => React.ReactElement> | null; export interface GridListLoadMoreItemProps extends Omit, StyleProps, DOMRenderProps<'div', undefined>, GlobalDOMAttributes { /** * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. * @default 'react-aria-GridListLoadMoreItem' */ className?: string; /** * The load more spinner to render when loading additional items. */ children?: ReactNode; /** * Whether or not the loading spinner should be rendered or not. */ isLoading?: boolean; } export declare const GridListLoadMoreItem: (props: GridListLoadMoreItemProps & React.RefAttributes) => React.ReactElement> | null; export interface GridListSectionProps extends SectionProps, DOMRenderProps<'div', undefined> { /** * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. * @default 'react-aria-GridListSection' */ className?: string; } /** * A GridListSection represents a section within a GridList. */ export declare const GridListSection: (props: GridListSectionProps & React.RefAttributes) => React.ReactElement> | null; export interface GridListHeaderProps extends DOMRenderProps<'div', undefined>, DOMProps, GlobalDOMAttributes { } export declare const GridListHeaderContext: React.Context>; export declare const GridListHeaderInnerContext: React.Context | null>; export declare const GridListHeader: (props: GridListHeaderProps & React.RefAttributes) => React.ReactElement> | null;