@payfit/unity-components/dist/esm/components/list-view/ListView.d.ts

import { JSX, Ref } from 'react';
import { ListBoxProps } from 'react-aria-components/ListBox';
export type ListViewProps<TItem extends object> = Omit<ListBoxProps<TItem>, 'layout' | 'selectionBehavior' | 'selectionMode' | 'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange' | 'shouldSelectOnPressUp' | 'disallowEmptySelection' | 'escapeKeyBehavior' | 'className'> & {
    /**
     * Controls whether to enable virtualization for the list.
     * @default false
     */
    enableVirtualization?: boolean;
    /**
     * Additional CSS classes to apply to the list container. Use this to customize height or other container styles.
     */
    className?: string;
};
type ListViewComponentType = {
    <TItem extends object>(props: ListViewProps<TItem> & {
        ref?: Ref<HTMLDivElement>;
    }): JSX.Element;
    displayName: string;
};
/**
 * The ListView component displays a vertically scrollable list of interactive items, allowing users to browse and navigate content in an organized manner.
 *
 * ListView supports both static and dynamic content rendering, sectioned layouts, keyboard navigation, disabled items, custom empty states, and virtualization for optimal performance with large datasets. Primarily designed for navigation-first mobile experiences like iOS mail apps and settings lists.
 * @param {ListViewProps} props - The props for the ListView component, including all ListBox props from React Aria Components plus `enableVirtualization`
 * @example
 * ```tsx
 * import { ListView, RawListViewItem, ListViewItemLabel } from '@payfit/unity-components'
 *
 * function Example() {
 *   return (
 *     <ListView aria-label="My list">
 *       <RawListViewItem id="1" href="/items/1">
 *         <ListViewItemLabel>Item 1</ListViewItemLabel>
 *       </RawListViewItem>
 *       <RawListViewItem id="2" href="/items/2">
 *         <ListViewItemLabel>Item 2</ListViewItemLabel>
 *       </RawListViewItem>
 *     </ListView>
 *   )
 * }
 * ```
 * @remarks
 * - Items can include an `href` prop to render as semantic links for navigation
 * - Set `enableVirtualization` to `true` when working with large datasets (hundreds or thousands of items)
 * - Combine with `ListViewSection` to organize items into labeled groups
 * - Use `disabledKeys` to disable specific items by their ID
 * - Provide `renderEmptyState` to display custom content when the list is empty
 * - Always provide an accessible label using `aria-label` or `aria-labelledby`
 * @see {@link ListViewProps} for all available props
 * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/list-view GitHub}
 * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=15306-115&m=dev Figma}
 * @see Design docs in {@link https://www.payfit.design/ Payfit.design}
 * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/component-reference-listview--docs unity-components.payfit.io}
 */
declare const ListView: ListViewComponentType;
export { ListView };