@atlaskit/page-layout/report.api.md

A collection of components which let you compose an application's page layout.

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

## API Report File for "@atlaskit/page-layout"

> 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
import { ButtonHTMLAttributes } from 'react';
import { ElementType } from 'react';
import { jsx } from '@emotion/react';
import { KeyboardEvent as KeyboardEvent_2 } from 'react';
import { MouseEvent as MouseEvent_2 } from 'react';
import { ReactElement } from 'react';
import { ReactNode } from 'react';

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

// @public (undocumented)
export const BANNER_HEIGHT: string;

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

// @public (undocumented)
interface ContentProps {
	children: ReactNode;
	testId?: string;
}

// @public (undocumented)
type DimensionNames =
	| 'bannerHeight'
	| 'leftPanelWidth'
	| 'leftSidebarFlyoutWidth'
	| 'leftSidebarWidth'
	| 'rightPanelWidth'
	| 'rightSidebarWidth'
	| 'topNavigationHeight';

// @public (undocumented)
export type Dimensions = Partial<Record<DimensionNames, number>>;

// @public (undocumented)
export const LEFT_PANEL_WIDTH: string;

// @public (undocumented)
export const LEFT_SIDEBAR_WIDTH: string;

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

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

// @public (undocumented)
interface LeftSidebarProps extends SlotWidthProps {
	collapsedState?: 'collapsed' | 'expanded';
	onCollapse?: () => void;
	onExpand?: () => void;
	onFlyoutCollapse?: () => void;
	onFlyoutExpand?: () => void;
	onResizeEnd?: (leftSidebarState: LeftSidebarState) => void;
	onResizeStart?: (leftSidebarState: LeftSidebarState) => void;
	overrides?: {
		ResizeButton?: {
			render?: (
				Component: ElementType<ResizeButtonProps>,
				props: ResizeButtonProps,
			) => ReactElement;
		};
	};
	resizeButtonLabel?: string;
	resizeGrabAreaLabel?: string;
	testId?: string;
	valueTextLabel?: string;
	width?: number;
}

// @public (undocumented)
export type LeftSidebarState = {
	isFlyoutOpen: boolean;
	isResizing: boolean;
	isLeftSidebarCollapsed: boolean;
	leftSidebarWidth: number;
	lastLeftSidebarWidth: number;
	flyoutLockCount: number;
	isFixed: boolean;
};

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

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

// @public
export const PageLayout: ({
	skipLinksLabel,
	children,
	testId,
	onLeftSidebarExpand,
	onLeftSidebarCollapse,
}: PageLayoutProps) => jsx.JSX.Element;

// @public (undocumented)
interface PageLayoutProps extends SidebarResizeControllerProps {
	// (undocumented)
	skipLinksLabel?: string;
	testId?: string;
}

// @public (undocumented)
type ResizeButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
	isLeftSidebarCollapsed: boolean;
	label: string;
	testId?: string;
};

// @public (undocumented)
export const RIGHT_PANEL_WIDTH: string;

// @public (undocumented)
export const RIGHT_SIDEBAR_WIDTH: string;

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

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

// @public (undocumented)
type SidebarResizeControllerProps = {
	children: ReactNode;
	onLeftSidebarExpand?: (leftSidebarState: LeftSidebarState) => void;
	onLeftSidebarCollapse?: (leftSidebarState: LeftSidebarState) => void;
};

// @public (undocumented)
type SkipLinkData = {
	id: string;
	skipLinkTitle: string;
	listIndex?: number;
};

// @public (undocumented)
export interface SlotHeightProps extends SlotProps {
	height?: number;
	shouldPersistHeight?: boolean;
}

// @public (undocumented)
interface SlotProps {
	children: ReactNode;
	// (undocumented)
	id?: string;
	isFixed?: boolean;
	// (undocumented)
	skipLinkTitle?: string;
	testId?: string;
}

// @public (undocumented)
export interface SlotWidthProps extends SlotProps {
	shouldPersistWidth?: boolean;
	width?: number;
}

// @public (undocumented)
export const TOP_NAVIGATION_HEIGHT: string;

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

// @public (undocumented)
export const useCustomSkipLink: (
	id: SkipLinkData['id'],
	skipLinkTitle: SkipLinkData['skipLinkTitle'],
	listIndex?: SkipLinkData['listIndex'],
) => void;

// @public
export const useLeftSidebarFlyoutLock: () => void;

// @public (undocumented)
export const usePageLayoutResize: () => {
	isLeftSidebarCollapsed: boolean;
	expandLeftSidebar: () => void;
	collapseLeftSidebar: (
		event?: KeyboardEvent_2 | MouseEvent_2,
		collapseWithoutTransition?: boolean,
	) => void;
	toggleLeftSidebar: (
		event?: KeyboardEvent_2 | MouseEvent_2,
		collapseWithoutTransition?: boolean,
	) => void;
	leftSidebarState: LeftSidebarState;
};

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

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

### Peer Dependencies

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

```json
{
	"react": "^16.8.0",
	"react-dom": "^16.8.0"
}
```

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