@payfit/unity-components
Version:
35 lines (34 loc) • 1.82 kB
TypeScript
import { ListViewProps } from '../../../../components/list-view/ListView.js';
/**
* Unity's ListView that integrates with Tanstack Router for seamless client-side navigation.
* This component automatically configures the RouterProvider context needed for ListViewItem navigation.
* @example
* ```tsx
* import { ListView, ListViewItem } from '@payfit/unity-components/integrations/tanstack-router'
* import { ListViewItemLabel } from '@payfit/unity-components'
*
* function DocumentsList() {
* return (
* <ListView aria-label="Documents">
* <ListViewItem to="/documents/$id" params={{ id: '123' }}>
* <ListViewItemLabel>Document 123</ListViewItemLabel>
* </ListViewItem>
* </ListView>
* )
* }
* ```
* @remarks
* - Automatically provides the RouterProvider context needed for client-side navigation
* - Use this instead of the base ListView component when using ListViewItem with TanStack Router
* - All props from the base ListView component are supported
* - Items within this ListView will use client-side navigation instead of full page reloads
* @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/integrations/tanstack-router/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 function ListView<T extends object>(props: ListViewProps<T>): import("react/jsx-runtime").JSX.Element;
declare namespace ListView {
var displayName: string;
}
export { ListView };