@datalayer/core/lib/components/subnav/SubNav.d.ts

[](https://datalayer.io)

import React, { type PropsWithChildren, type ReactNode, type RefObject } from 'react';
import { ButtonSizes, ButtonVariants, TextProps } from '@primer/react-brand';
import { BaseProps } from '@datalayer/primer-addons';
/**
 * 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>;
};
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<HTMLElement>>;
type SubNavHeadingProps = {
    href: string;
    'data-testid'?: string;
} & PropsWithChildren<React.HTMLProps<HTMLAnchorElement>> & BaseProps<HTMLAnchorElement>;
type SubNavLinkProps = {
    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 SubMenu({ 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 _SubNavAction({ 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<{
    hasShadow?: boolean;
    /**
     * Allows the SubNav to be used at full width,
     * removing any internal padding and guttering.
     */
    fullWidth?: boolean;
    'data-testid'?: string;
} & BaseProps<HTMLElement> & {
    children?: ReactNode | undefined;
}> & {
    readonly type: ({ id, children, className, "data-testid": testId, fullWidth, hasShadow, }: SubNavProps) => import("react/jsx-runtime").JSX.Element;
} & {
    Heading: ({ href, children, className, "data-testid": testID, ...props }: SubNavHeadingProps) => import("react/jsx-runtime").JSX.Element;
    Link: React.ForwardRefExoticComponent<Omit<SubNavLinkProps, "ref"> & React.RefAttributes<HTMLDivElement | HTMLAnchorElement>>;
    Action: typeof _SubNavAction;
    SubMenu: typeof SubMenu;
    testIds: {
        root: string;
        readonly button: string;
        readonly overlay: string;
        readonly link: string;
        readonly heading: string;
        readonly action: string;
        readonly subMenu: string;
    };
};
export {};