@primer/react/dist/NavList/NavList.d.ts

An implementation of GitHub's Primer Design System using React

import { FCWithSlotMarker } from "../utils/types/Slots.js";
import { ForwardRefComponent } from "../utils/polymorphic.js";
import { DistributiveOmit, PolymorphicProps } from "../utils/modern-polymorphic.js";
import { ActionListTrailingActionProps } from "../ActionList/TrailingAction.js";
import { ActionListGroupHeadingProps } from "../ActionList/Group.js";
import { ActionListDividerProps } from "../ActionList/Divider.js";
import { ActionListDescriptionProps } from "../ActionList/Description.js";
import { ActionListLeadingVisualProps, ActionListTrailingVisualProps, VisualProps } from "../ActionList/Visuals.js";
import React from "react";
import { Icon } from "@primer/octicons-react";

//#region src/NavList/NavList.d.ts
type NavListHeadingLevels = 'h2' | 'h3';
type NavListProps = {
  children: React.ReactNode;
} & React.ComponentProps<'nav'>;
type NavListHeadingProps = {
  /** Semantic heading level for the NavList. Also sets the default level for child group headings, which render one level deeper. */as?: NavListHeadingLevels; /** Visually hide the heading while keeping it available to assistive technology. */
  visuallyHidden?: boolean;
} & React.ComponentPropsWithoutRef<'h2'>;
type NavListItemProps<As extends React.ElementType = React.ElementType> = PolymorphicProps<As, 'a', {
  children: React.ReactNode;
  defaultOpen?: boolean;
  href?: string;
  'aria-current'?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' | boolean;
  inactiveText?: string;
}>;
type NavListSubNavProps = {
  children: React.ReactNode;
};
type NavListLeadingVisualProps = ActionListLeadingVisualProps;
type NavListTrailingVisualProps = ActionListTrailingVisualProps;
type NavListDividerProps = ActionListDividerProps;
type NavListGroupProps = React.HTMLAttributes<HTMLLIElement> & {
  children: React.ReactNode;
  title?: string;
};
type GroupItem = {
  text: string;
  trailingVisual?: Icon | string;
  leadingVisual?: Icon;
  trailingAction?: ActionListTrailingActionProps;
  'data-expand-focus-target'?: string;
} & Omit<NavListItemProps, 'children'>;
type NavListGroupExpandProps = {
  label?: string;
  pages?: number;
  items: GroupItem[];
  renderItem?: (item: GroupItem) => React.ReactNode;
};
type NavListGroupHeadingProps = ActionListGroupHeadingProps;
declare const NavList: React.ForwardRefExoticComponent<Omit<NavListProps, "ref"> & React.RefAttributes<HTMLElement>> & {
  Description: FCWithSlotMarker<React.PropsWithChildren<ActionListDescriptionProps>>;
  Heading: FCWithSlotMarker<NavListHeadingProps>;
  Item: (<As extends React.ElementType = "a">(props: DistributiveOmit<React.ComponentPropsWithRef<React.ElementType extends As ? "a" : As> & {
    children: React.ReactNode;
    defaultOpen?: boolean;
    href?: string;
    'aria-current'?: "page" | "step" | "location" | "date" | "time" | "true" | "false" | boolean;
    inactiveText?: string;
  }, "as"> & {
    as?: As | undefined;
  } & React.RefAttributes<unknown>) => React.ReactNode) & {
    displayName: string;
  };
  SubNav: ForwardRefComponent<"ul", NavListSubNavProps>;
  LeadingVisual: FCWithSlotMarker<React.PropsWithChildren<VisualProps>>;
  TrailingVisual: FCWithSlotMarker<React.PropsWithChildren<VisualProps>>;
  TrailingAction: ForwardRefComponent<"a" | "button", ActionListTrailingActionProps>;
  Divider: FCWithSlotMarker<React.PropsWithChildren<ActionListDividerProps>>;
  Group: React.FC<NavListGroupProps>;
  GroupExpand: React.ForwardRefExoticComponent<NavListGroupExpandProps & React.RefAttributes<HTMLButtonElement>>;
  GroupHeading: React.FC<ActionListGroupHeadingProps>;
};
//#endregion
export { NavList, NavListDividerProps, NavListGroupExpandProps, NavListGroupHeadingProps, NavListGroupProps, NavListHeadingProps, NavListItemProps, NavListLeadingVisualProps, NavListProps, NavListSubNavProps, NavListTrailingVisualProps };