@payfit/unity-components
Version:
103 lines (102 loc) • 4.77 kB
TypeScript
import { JSX, ReactNode, Ref } from 'react';
import { ListBoxItemProps } from 'react-aria-components/ListBox';
export declare const listViewItem: import('tailwind-variants').TVReturnType<{
[key: string]: {
[key: string]: import('tailwind-merge').ClassNameValue | {
content?: import('tailwind-merge').ClassNameValue;
prefix?: import('tailwind-merge').ClassNameValue;
suffix?: import('tailwind-merge').ClassNameValue;
root?: import('tailwind-merge').ClassNameValue;
wrapper?: import('tailwind-merge').ClassNameValue;
};
};
} | {
[x: string]: {
[x: string]: import('tailwind-merge').ClassNameValue | {
content?: import('tailwind-merge').ClassNameValue;
prefix?: import('tailwind-merge').ClassNameValue;
suffix?: import('tailwind-merge').ClassNameValue;
root?: import('tailwind-merge').ClassNameValue;
wrapper?: import('tailwind-merge').ClassNameValue;
};
};
} | {}, {
root: string[];
wrapper: string[];
prefix: string[];
content: string[];
suffix: string[];
}, undefined, {
[key: string]: {
[key: string]: import('tailwind-merge').ClassNameValue | {
content?: import('tailwind-merge').ClassNameValue;
prefix?: import('tailwind-merge').ClassNameValue;
suffix?: import('tailwind-merge').ClassNameValue;
root?: import('tailwind-merge').ClassNameValue;
wrapper?: import('tailwind-merge').ClassNameValue;
};
};
} | {}, {
root: string[];
wrapper: string[];
prefix: string[];
content: string[];
suffix: string[];
}, import('tailwind-variants').TVReturnType<unknown, {
root: string[];
wrapper: string[];
prefix: string[];
content: string[];
suffix: string[];
}, undefined, unknown, unknown, undefined>>;
export type RawListViewItemProps<TItem extends object> = Omit<ListBoxItemProps<TItem>, 'ref' | 'children' | 'className' | 'style'> & {
prefix?: JSX.Element;
suffix?: JSX.Element;
hideDisclosureIndicator?: boolean;
children: ReactNode;
};
type RawListViewItemComponentType = {
<TItem extends object>(props: RawListViewItemProps<TItem> & {
ref?: Ref<HTMLDivElement>;
}): JSX.Element;
displayName: string;
};
/**
* The RawListViewItem component represents an individual item within a ListView, providing a flexible layout structure with prefix, content, and suffix slots.
*
* RawListViewItem handles interactive states (hover, focus, pressed, disabled) and automatically displays a disclosure indicator for navigation affordance unless explicitly hidden. When an `href` prop is provided, the item renders as a semantic link element. This component serves as the building block for all list item content within ListView, managing the layout and interaction patterns consistently.
* @param {RawListViewItemProps} props - The props for the RawListViewItem component, including all ListBoxItem props plus `prefix`, `suffix`, and `hideDisclosureIndicator`
* @example
* ```tsx
* import { ListView, RawListViewItem, ListViewItemLabel } from '@payfit/unity-components'
*
* function Example() {
* return (
* <ListView aria-label="Users">
* <RawListViewItem
* href="/users/1"
* prefix={<Icon src="UserFilled" />}
* suffix={<Badge>New</Badge>}
* >
* <ListViewItemLabel>John Doe</ListViewItemLabel>
* </RawListViewItem>
* </ListView>
* )
* }
* ```
* @remarks
* - Always include a `ListViewItemLabel`, `aria-label`, or `textValue` prop for accessibility
* - Use the `prefix` prop for leading icons, avatars, or indicators
* - Use the `suffix` prop for trailing metadata, badges, or values
* - Set `hideDisclosureIndicator` to `true` when the item doesn't navigate to additional content
* - Set `isDisabled` to `true` to prevent interaction with the item
* - Provide an `href` prop to render the item as a semantic link for navigation
* - The component automatically manages hover, focus, and pressed states
* @see {@link RawListViewItemProps} 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/parts GitHub}
* @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library 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-rawlistviewitem--docs unity-components.payfit.io}
*/
declare const RawListViewItem: RawListViewItemComponentType;
export { RawListViewItem };