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

A horizontal navigation component for Atlassian apps.

<!-- 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: ButtonCSSProperties;
	active: ButtonCSSProperties;
	selected: ButtonCSSProperties;
	selectedHover?: ButtonCSSProperties;
};

// @public (undocumented)
type ButtonCSSProperties = CSSProperties & {
	boxShadow: 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 PrimarySplitButton: ({
	children,
	isHighlighted,
}: PrimarySplitButtonProps) => jsx.JSX.Element;

// @public (undocumented)
type PrimarySplitButtonProps = {
	children: ReactNode;
	isHighlighted?: boolean;
};

// @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-->