@atlaskit/atlassian-navigation/report.api.md

A horizontal navigation component for Atlassian products.

<!-- API Report Version: 2.3 -->

## API Report File for "@atlaskit/atlassian-navigation"

> Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)

### Table of contents

- [Main Entry Types](#main-entry-types)
- [Peer Dependencies](#peer-dependencies)

### Main Entry Types

<!--SECTION START: Main Entry Types-->

```ts
/// <reference types="lodash" />
/// <reference types="react" />

import { AllHTMLAttributes } from 'react';
import { ComponentType } from 'react';
import { CSSObject } from '@emotion/react';
import { CustomThemeButtonProps } from '@atlaskit/button/types';
import { CustomThemeButtonProps as CustomThemeButtonProps_2 } from '@atlaskit/button/custom-theme-button';
import { ElementType } from 'react';
import { ForwardRefExoticComponent } from 'react';
import { jsx } from '@emotion/react';
import { LogoProps } from '@atlaskit/logo';
import { MouseEvent as MouseEvent_2 } from 'react';
import noop from '@atlaskit/ds-lib/noop';
import { Provider } from 'react';
import { default as React_2 } from 'react';
import { ReactChild } from 'react';
import { ReactNode } from 'react';
import { ReactNodeArray } from 'react';
import { RefAttributes } from 'react';
import { ThemeProps } from '@atlaskit/button/custom-theme-button';
import { ThemeProps as ThemeProps_2 } from '@atlaskit/button';
import { ThemeTokens } from '@atlaskit/button/custom-theme-button';
import { ThemeTokens as ThemeTokens_2 } from '@atlaskit/button';

// @public
export const AppSwitcher: React_2.ForwardRefExoticComponent<
  BaseIconButtonProps & React_2.RefAttributes<any>
>;

// @public (undocumented)
export type AppSwitcherProps = BaseIconButtonProps;

// @public
export const AtlassianNavigation: (
  props: AtlassianNavigationProps,
) => jsx.JSX.Element;

// @public (undocumented)
export interface AtlassianNavigationProps {
  label: string;
  moreLabel?: ReactNode;
  primaryItems: ReactNodeArray;
  renderAppSwitcher?: React_2.ComponentType<{}>;
  renderCreate?: React_2.ComponentType<{}>;
  renderHelp?: React_2.ComponentType<{}>;
  renderNotifications?: React_2.ComponentType<{}>;
  renderProductHome: React_2.ComponentType<{}>;
  renderProfile?: React_2.ComponentType<{}>;
  renderSearch?: React_2.ComponentType<{}>;
  renderSettings?: React_2.ComponentType<{}>;
  renderSignIn?: React_2.ComponentType<{}>;
  testId?: string;
  theme?: NavigationTheme;
}

// @public (undocumented)
export const atlassianTheme: NavigationTheme;

// @public
interface BaseIconButtonProps {
  component?: CustomThemeButtonProps['component'];
  href?: string;
  id?: string;
  isDisabled?: boolean;
  isSelected?: boolean;
  onBlur?: React.FocusEventHandler<HTMLElement>;
  onClick?: (event: React.MouseEvent<HTMLElement>, analyticsEvent: any) => void;
  onFocus?: React.FocusEventHandler<HTMLElement>;
  onMouseDown?: React.MouseEventHandler<HTMLElement>;
  onMouseEnter?: React.MouseEventHandler<HTMLElement>;
  onMouseLeave?: React.MouseEventHandler<HTMLElement>;
  onMouseUp?: React.MouseEventHandler<HTMLElement>;
  target?: string;
  testId?: string;
  tooltip: React.ReactNode;
}

// @public (undocumented)
type ButtonCSSContext = {
  default: ButtonCSSProperties;
  hover: ButtonCSSProperties;
  focus: ButtonFocusCSSProperties;
  active: ButtonCSSProperties;
  selected: ButtonCSSProperties;
  selectedHover?: ButtonCSSProperties;
};

// @public (undocumented)
type ButtonCSSProperties = CSSProperties & {
  boxShadow: string;
};

// @public (undocumented)
type ButtonFocusCSSProperties = {
  boxShadow: string;
  color: string;
  backgroundColor: string;
};

// @public (undocumented)
export type Colors = {
  backgroundColor: string;
  color: string;
};

// @public
export const Create: ({
  onClick,
  href,
  text,
  buttonTooltip,
  iconButtonTooltip,
  testId,
}: CreateProps) => jsx.JSX.Element;

// @public (undocumented)
export type CreateCSS = ButtonCSSContext;

// @public (undocumented)
export interface CreateProps {
  buttonTooltip?: React_2.ReactNode;
  href?: string;
  iconButtonTooltip?: React_2.ReactNode;
  onClick?: (e: React_2.MouseEvent<HTMLElement>, analyticsEvent: any) => void;
  testId?: string;
  text: string;
}

// @public (undocumented)
type CSSProperties = CSSObject & {
  backgroundColor: string;
  color: string;
};

// @public
export const CustomProductHome: (
  props: CustomProductHomeProps,
) => jsx.JSX.Element;

// @public (undocumented)
export interface CustomProductHomeProps {
  href?: string;
  iconAlt: string;
  iconUrl: string;
  logoAlt: string;
  logoMaxWidth?: number;
  logoUrl: string;
  onClick?: (event: MouseEvent_2<HTMLElement>) => void;
  onMouseDown?: (event: MouseEvent_2<HTMLElement>) => void;
  siteTitle?: string;
  testId?: string;
}

// @public (undocumented)
export const generateTheme: (themeColors: GenerateThemeArgs) => NavigationTheme;

// @public (undocumented)
export type GenerateThemeArgs = {
  name?: string;
  backgroundColor: string;
  highlightColor: string;
};

// @public
export const Help: React_2.ForwardRefExoticComponent<
  BaseIconButtonProps & {
    badge?: React_2.ComponentType<{}> | undefined;
  } & React_2.RefAttributes<any>
>;

// @public (undocumented)
export type HelpProps = BaseIconButtonProps & {
  badge?: ComponentType<{}>;
};

// @public (undocumented)
export const HORIZONTAL_GLOBAL_NAV_HEIGHT = 56;

// @public
export const IconButton: React_2.ForwardRefExoticComponent<
  BaseIconButtonProps & {
    icon: React_2.ReactChild | undefined;
    theme?:
      | ((
          current: (props: ThemeProps) => ThemeTokens,
          props: ThemeProps,
        ) => ThemeTokens)
      | undefined;
  } & React_2.RefAttributes<HTMLElement>
>;

// @public (undocumented)
export type IconButtonCSS = ButtonCSSContext;

// @public (undocumented)
export type IconButtonProps = BaseIconButtonProps & {
  icon: CustomThemeButtonProps['iconBefore'];
  theme?: CustomThemeButtonProps['theme'];
};

// @public (undocumented)
type LogoStyleProps = {
  iconGradientStart?: string;
  iconGradientStop?: string;
  iconColor?: string;
  textColor?: string;
};

// @public (undocumented)
export type Mode = {
  create: CreateCSS;
  iconButton: IconButtonCSS;
  navigation: NavigationCSS;
  primaryButton: PrimaryButtonCSS;
  productHome: ProductHomeCSS;
  search: SearchCSS;
  skeleton: SkeletonCSS;
};

// @public (undocumented)
export type NavigationCSS = CSSProperties;

// @public (undocumented)
export type NavigationTheme = {
  mode: Mode;
};

// @public
export const Notifications: React_2.ForwardRefExoticComponent<
  BaseIconButtonProps & {
    badge: React_2.ComponentType<{}>;
  } & React_2.RefAttributes<any>
>;

// @public (undocumented)
export type NotificationsProps = BaseIconButtonProps & {
  badge: ComponentType<{}>;
};

// @public
export const PrimaryButton: ForwardRefExoticComponent<
  Omit<CustomThemeButtonProps_2, 'appearance' | 'onClick'> & {
    component?:
      | ComponentType<AllHTMLAttributes<HTMLElement>>
      | ElementType<any>
      | undefined;
    isHighlighted?: boolean | undefined;
    testId?: string | undefined;
    tooltip?: ReactNode;
    onClick?:
      | ((
          event: MouseEvent_2<HTMLElement, MouseEvent>,
          analyticsEvent: any,
        ) => void)
      | undefined;
  } & RefAttributes<HTMLElement>
>;

// @public (undocumented)
export type PrimaryButtonCSS = ButtonCSSContext;

// @public (undocumented)
export type PrimaryButtonProps = Omit<
  CustomThemeButtonProps,
  'appearance' | 'onClick'
> & {
  component?: ComponentType<AllHTMLAttributes<HTMLElement>> | ElementType<any>;
  isHighlighted?: boolean;
  testId?: string;
  tooltip?: React.ReactNode;
  onClick?: (event: React.MouseEvent<HTMLElement>, analyticsEvent: any) => void;
};

// @public
export const PrimaryDropdownButton: ForwardRefExoticComponent<
  Omit<PrimaryButtonProps, 'iconAfter'> & {
    isHighlighted?: boolean | undefined;
    testId?: string | undefined;
    tooltip?: ReactNode;
  } & RefAttributes<HTMLElement>
>;

// @public (undocumented)
export type PrimaryDropdownButtonProps = Omit<
  PrimaryButtonProps,
  'iconAfter'
> & {
  isHighlighted?: boolean;
  testId?: string;
  tooltip?: React.ReactNode;
};

// @public
export const ProductHome: ({
  icon: Icon,
  logo: Logo,
  siteTitle,
  onClick,
  href,
  onMouseDown,
  testId,
  logoMaxWidth,
  ...rest
}: ProductHomeProps) => jsx.JSX.Element;

// @public (undocumented)
type ProductHomeCSS = CSSProperties & LogoStyleProps;

// @public (undocumented)
export interface ProductHomeProps {
  href?: string;
  icon: ComponentType<Partial<LogoProps>>;
  logo: ComponentType<Partial<LogoProps>>;
  logoMaxWidth?: number;
  onClick?: (event: MouseEvent_2<HTMLElement>) => void;
  onMouseDown?: (event: MouseEvent_2<HTMLElement>) => void;
  siteTitle?: string;
  testId?: string;
}

// @public
export const Profile: ForwardRefExoticComponent<
  BaseIconButtonProps & {
    icon: ReactChild | undefined;
    theme?:
      | ((
          current: (props: ThemeProps_2) => ThemeTokens_2,
          props: ThemeProps_2,
        ) => ThemeTokens_2)
      | undefined;
  } & RefAttributes<HTMLElement>
>;

// @public (undocumented)
export type ProfileProps = IconButtonProps;

// @public
export const Search: (props: SearchProps) => jsx.JSX.Element;

// @public (undocumented)
export type SearchCSS = {
  default: CSSProperties;
  focus: CSSObject;
  hover: CSSObject;
};

// @public (undocumented)
export type SearchProps = BaseIconButtonProps & {
  placeholder: string;
  label: string;
  value?: string;
};

// @public
export const Settings: React_2.ForwardRefExoticComponent<
  BaseIconButtonProps & React_2.RefAttributes<any>
>;

// @public (undocumented)
export type SettingsProps = BaseIconButtonProps;

// @public
export const SignIn: (props: SignInProps) => JSX.Element;

// @public (undocumented)
export type SignInProps = BaseIconButtonProps;

// @public (undocumented)
export type SkeletonCSS = CSSObject & {
  backgroundColor: string;
  opacity: number;
};

// @public
export const ThemeProvider: Provider<NavigationTheme>;

// @public
export const useOverflowStatus: () => {
  isVisible: boolean;
  openOverflowMenu: typeof noop;
  closeOverflowMenu: typeof noop;
};

// (No @packageDocumentation comment for this package)
```

<!--SECTION END: Main Entry Types-->

### Peer Dependencies

<!--SECTION START: Peer Dependencies-->

```json
{
  "react": "^16.8.0"
}
```

<!--SECTION END: Peer Dependencies-->