@primer/react-brand/lib/SubNav/SubNav.d.ts

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

import React, { type PropsWithChildren, type RefObject } from 'react';
import { ButtonSizes, ButtonVariants, TextProps } from '..';
import type { BaseProps } from '../component-helpers';
/**
 * Design tokens
 */
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/sub-nav/base.css';
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/sub-nav/colors-with-modes.css';
export declare const SubNavSubMenuVariants: readonly ["dropdown", "anchor"];
type SubMenuVariants = (typeof SubNavSubMenuVariants)[number];
type SubNavContextType = {
    portalRef: RefObject<HTMLDivElement | null>;
};
export declare const useSubNavContext: () => SubNavContextType;
export type SubNavProps = {
    hasShadow?: boolean;
    /**
     * Allows the SubNav to be used at full width,
     * removing any internal padding and guttering.
     */
    fullWidth?: boolean;
    'data-testid'?: string;
} & PropsWithChildren<BaseProps<HTMLDivElement>>;
type HeadingBaseProps = {
    href: string;
    'data-testid'?: string;
} & PropsWithChildren<React.HTMLProps<HTMLAnchorElement>> & BaseProps<HTMLAnchorElement>;
type SubHeadingBaseProps = {
    href: string;
    'data-testid'?: string;
} & PropsWithChildren<React.HTMLProps<HTMLAnchorElement>> & BaseProps<HTMLAnchorElement>;
type LinkBaseProps = {
    href: string;
    'data-testid'?: string;
    variant?: TextProps['variant'];
    _subMenuVariant?: SubMenuVariants;
} & PropsWithChildren<React.HTMLProps<HTMLAnchorElement>> & BaseProps<HTMLAnchorElement>;
type SubMenuProps = {
    variant?: SubMenuVariants;
} & React.HTMLAttributes<HTMLUListElement> & BaseProps<HTMLUListElement>;
declare function SubMenuBase({ children, className, variant, ...props }: SubMenuProps): import("react/jsx-runtime").JSX.Element;
type SubNavActionProps = {
    /**
     * Required path or location for the action button to link to.
     */
    href: string;
    /**
     * Optional sizes for the button.
     */
    size?: (typeof ButtonSizes)[number];
    /**
     * Optional sizes for the button.
     */
    variant?: (typeof ButtonVariants)[number];
} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>;
declare function ActionBase({ children, href, variant, size, ...rest }: SubNavActionProps): import("react/jsx-runtime").JSX.Element;
/**
 * Use SubNav to display a secondary navigation beneath a primary header.
 * @see https://primer.style/brand/components/SubNav
 */
export declare const SubNav: React.NamedExoticComponent<Omit<SubNavProps, "ref"> & React.RefAttributes<HTMLDivElement>> & {
    Heading: ({ href, children, className, "data-testid": testID, ...props }: HeadingBaseProps) => import("react/jsx-runtime").JSX.Element;
    SubHeading: ({ href, children, className, "data-testid": testID, ...props }: SubHeadingBaseProps) => import("react/jsx-runtime").JSX.Element;
    Link: React.ForwardRefExoticComponent<Omit<LinkBaseProps, "ref"> & React.RefAttributes<HTMLDivElement | HTMLAnchorElement>>;
    Action: typeof ActionBase;
    SubMenu: typeof SubMenuBase;
    testIds: {
        root: string;
        readonly button: string;
        readonly overlay: string;
        readonly link: string;
        readonly heading: string;
        readonly action: string;
        readonly subMenu: string;
    };
};
export {};