## 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
```ts
///
///
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
>;
// @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;
onClick?: (event: React.MouseEvent, analyticsEvent: any) => void;
onFocus?: React.FocusEventHandler;
onMouseDown?: React.MouseEventHandler;
onMouseEnter?: React.MouseEventHandler;
onMouseLeave?: React.MouseEventHandler;
onMouseUp?: React.MouseEventHandler;
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, 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) => void;
onMouseDown?: (event: MouseEvent_2) => 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
>;
// @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
>;
// @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
>;
// @public (undocumented)
export type NotificationsProps = BaseIconButtonProps & {
badge: ComponentType<{}>;
};
// @public
export const PrimaryButton: ForwardRefExoticComponent<
Omit & {
component?: ComponentType> | ElementType | undefined;
isHighlighted?: boolean | undefined;
testId?: string | undefined;
tooltip?: ReactNode;
onClick?:
| ((event: MouseEvent_2, analyticsEvent: any) => void)
| undefined;
} & RefAttributes
>;
// @public (undocumented)
export type PrimaryButtonCSS = ButtonCSSContext;
// @public (undocumented)
export type PrimaryButtonProps = Omit & {
component?: ComponentType> | ElementType;
isHighlighted?: boolean;
testId?: string;
tooltip?: React.ReactNode;
onClick?: (event: React.MouseEvent, analyticsEvent: any) => void;
};
// @public
export const PrimaryDropdownButton: ForwardRefExoticComponent<
Omit & {
isHighlighted?: boolean | undefined;
testId?: string | undefined;
tooltip?: ReactNode;
} & RefAttributes
>;
// @public (undocumented)
export type PrimaryDropdownButtonProps = Omit & {
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>;
logo: ComponentType>;
logoMaxWidth?: number;
onClick?: (event: MouseEvent_2) => void;
onMouseDown?: (event: MouseEvent_2) => 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
>;
// @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
>;
// @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;
// @public
export const useOverflowStatus: () => {
isVisible: boolean;
openOverflowMenu: typeof noop;
closeOverflowMenu: typeof noop;
};
// (No @packageDocumentation comment for this package)
```
### Peer Dependencies
```json
{
"react": "^16.8.0"
}
```