@primer/react-brand/esm/NavList/NavList.d.ts

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

import React, { type PropsWithChildren, type ReactElement, type ReactNode, type Ref } from 'react';
import { type Icon } from '@primer/octicons-react';
import type { BaseProps } from '../component-helpers';
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/nav-list/colors-with-modes.css';
export type NavListRootProps = {
    /**
     * Accessible label for the navigation landmark.
     */
    'aria-label': string;
    /**
     * ID of an element that labels the navigation landmark.
     */
    'aria-labelledby'?: string;
    children: ReactNode;
    'data-testid'?: string;
} & BaseProps<HTMLElement> & Omit<React.HTMLAttributes<HTMLElement>, 'aria-label' | 'aria-labelledby'>;
type Visual = ReactElement | React.ElementType | Icon;
type NavListItemAs = 'a' | 'button';
type NavListItemBaseProps = {
    /**
     * Leading visual rendered before the item label.
     */
    leadingVisual?: Visual;
    /**
     * Trailing visual rendered after the item label.
     */
    trailingVisual?: Visual;
    /**
     * Whether nested items should be expanded by default.
     */
    defaultExpanded?: boolean;
    /**
     * Controls the nested item expanded state.
     */
    expanded?: boolean;
    /**
     * Called when a nested item is expanded or collapsed.
     */
    onExpandedChange?: (expanded: boolean) => void;
    /**
     * Marks the item as disabled. Disabled link items receive `aria-disabled`.
     */
    disabled?: boolean;
    'data-testid'?: string;
};
export type NavListItemProps<C extends NavListItemAs = 'a'> = {
    as?: C;
} & NavListItemBaseProps & PropsWithChildren<BaseProps<HTMLElement>> & Omit<React.ComponentPropsWithoutRef<C>, keyof NavListItemBaseProps | keyof BaseProps<HTMLElement> | 'as' | 'children'>;
export type NavListSubNavProps = {
    children: ReactNode;
    'data-testid'?: string;
} & BaseProps<HTMLUListElement> & React.HTMLAttributes<HTMLUListElement>;
export type NavListGroupProps = {
    /**
     * Heading text for the group.
     */
    title?: ReactNode;
    children: ReactNode;
    'data-testid'?: string;
} & BaseProps<HTMLLIElement> & Omit<React.LiHTMLAttributes<HTMLLIElement>, 'title'>;
/**
 * Use NavList to render vertical navigation links with groups and expandable nested lists.
 * @see https://primer.style/brand/components/NavList
 */
export declare const NavList: React.ForwardRefExoticComponent<Omit<NavListRootProps, "ref"> & React.RefAttributes<HTMLElement>> & {
    Item: <C extends NavListItemAs = "a">(props: NavListItemProps<C> & {
        ref?: Ref<HTMLElement>;
    }) => ReactElement | null;
    SubNav: React.ForwardRefExoticComponent<Omit<NavListSubNavProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
    Group: React.ForwardRefExoticComponent<Omit<NavListGroupProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
    testIds: {
        root: string;
        readonly list: string;
        readonly item: string;
        readonly link: string;
        readonly leadingVisual: string;
        readonly trailingVisual: string;
        readonly subNav: string;
        readonly group: string;
        readonly groupTitle: string;
        readonly groupList: string;
        readonly toggle: string;
    };
};
export {};
//# sourceMappingURL=NavList.d.ts.map