@atlaskit/page-layout 1.6.1 → 1.6.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/page-layout
 
+## 1.6.2
+
+### Patch Changes
+
+- [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
+
 ## 1.6.1
 
 ### Patch Changes

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/page-layout",
-	"version": "1.6.1",
+	"version": "1.6.2",
 	"sideEffects": false
 }

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/page-layout",
-	"version": "1.6.1",
+	"version": "1.6.2",
 	"sideEffects": false
 }

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/page-layout",
-	"version": "1.6.1",
+	"version": "1.6.2",
 	"sideEffects": false
 }

package/dist/types-ts4.5/common/constants.d.ts

@@ -0,0 +1,47 @@
+export declare const VAR_LEFT_PANEL_WIDTH = "leftPanelWidth";
+export declare const VAR_LEFT_SIDEBAR_WIDTH = "leftSidebarWidth";
+export declare const VAR_RIGHT_SIDEBAR_WIDTH = "rightSidebarWidth";
+export declare const VAR_RIGHT_PANEL_WIDTH = "rightPanelWidth";
+export declare const VAR_TOP_NAVIGATION_HEIGHT = "topNavigationHeight";
+export declare const VAR_BANNER_HEIGHT = "bannerHeight";
+export declare const VAR_LEFT_SIDEBAR_FLYOUT = "leftSidebarFlyoutWidth";
+export declare const DIMENSIONS: string[];
+export declare const LEFT_PANEL = "left-panel";
+export declare const RIGHT_PANEL = "right-panel";
+export declare const BANNER = "banner";
+export declare const TOP_NAVIGATION = "top-navigation";
+export declare const CONTENT = "content";
+export declare const MAIN = "main";
+export declare const LEFT_SIDEBAR = "left-sidebar";
+export declare const RIGHT_SIDEBAR = "right-sidebar";
+export declare const DEFAULT_BANNER_HEIGHT = 56;
+export declare const DEFAULT_TOP_NAVIGATION_HEIGHT = 56;
+export declare const DEFAULT_LEFT_SIDEBAR_WIDTH = 240;
+export declare const DEFAULT_RIGHT_SIDEBAR_WIDTH = 280;
+export declare const DEFAULT_RIGHT_PANEL_WIDTH = 368;
+export declare const DEFAULT_LEFT_PANEL_WIDTH = 368;
+export declare const COLLAPSED_LEFT_SIDEBAR_WIDTH = 20;
+export declare const MIN_LEFT_SIDEBAR_WIDTH = 80;
+export declare const DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH = 240;
+export declare const MIN_LEFT_SIDEBAR_DRAG_THRESHOLD = 200;
+export declare const TRANSITION_DURATION = 300;
+export declare const FLYOUT_DELAY = 200;
+export declare const LEFT_SIDEBAR_EXPANDED_WIDTH = "expandedLeftSidebarWidth";
+export declare const PAGE_LAYOUT_LS_KEY = "DS_PAGE_LAYOUT_UI_STATE";
+export declare const IS_SIDEBAR_DRAGGING = "data-is-sidebar-dragging";
+export declare const IS_SIDEBAR_COLLAPSING = "data-is-sidebar-collapsing";
+export declare const IS_FLYOUT_OPEN = "data-is-flyout-open";
+export declare const GRAB_AREA_LINE_SELECTOR = "data-grab-area-line";
+export declare const GRAB_AREA_SELECTOR = "data-grab-area";
+export declare const RESIZE_BUTTON_SELECTOR = "data-resize-button";
+export declare const RESIZE_CONTROL_SELECTOR = "data-resize-control";
+export declare const PAGE_LAYOUT_SLOT_SELECTOR = "data-ds--page-layout--slot";
+export declare const DEFAULT_I18N_PROPS_SKIP_LINKS = "Skip to:";
+export declare const PAGE_LAYOUT_CONTAINER_SELECTOR = "data-layout-container";
+export declare const LEFT_PANEL_WIDTH: string;
+export declare const RIGHT_PANEL_WIDTH: string;
+export declare const LEFT_SIDEBAR_WIDTH: string;
+export declare const RIGHT_SIDEBAR_WIDTH: string;
+export declare const TOP_NAVIGATION_HEIGHT: string;
+export declare const BANNER_HEIGHT: string;
+export declare const LEFT_SIDEBAR_FLYOUT_WIDTH: string;

package/dist/types-ts4.5/common/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { default as useIsSidebarCollapsing } from './use-is-sidebar-collapsing';
+export { default as useIsSidebarDragging } from './use-is-sidebar-dragging';

package/dist/types-ts4.5/common/hooks/use-is-sidebar-collapsing.d.ts

@@ -0,0 +1,2 @@
+declare const useIsSidebarCollapsing: () => boolean;
+export default useIsSidebarCollapsing;

package/dist/types-ts4.5/common/hooks/use-is-sidebar-dragging.d.ts

@@ -0,0 +1,2 @@
+declare const useIsSidebarDragging: () => boolean;
+export default useIsSidebarDragging;

package/dist/types-ts4.5/common/safe-local-storage.d.ts

@@ -0,0 +1,2 @@
+declare const safeLocalStorage: () => Storage;
+export default safeLocalStorage;

package/dist/types-ts4.5/common/types.d.ts

@@ -0,0 +1,117 @@
+import { ElementType, ReactElement, ReactNode } from 'react';
+import { ResizeButtonProps } from '../components/resize-control/types';
+import { LeftSidebarState } from '../controllers/sidebar-resize-context';
+interface SlotProps {
+    /**
+     * Sets positon to fixed.
+     */
+    isFixed?: boolean;
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests .
+     */
+    testId?: string;
+    /**
+     * React Children!
+     */
+    children: ReactNode;
+    id?: string;
+    skipLinkTitle?: string;
+}
+export interface SlotHeightProps extends SlotProps {
+    /**
+     * It save height in local storage.
+     */
+    shouldPersistHeight?: boolean;
+    /**
+     * Height!
+     */
+    height?: number;
+}
+export interface SlotWidthProps extends SlotProps {
+    /**
+     * It save width in local storage.
+     */
+    shouldPersistWidth?: boolean;
+    /**
+     * Width!
+     */
+    width?: number;
+}
+export interface LeftSidebarProps extends SlotWidthProps {
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
+     */
+    testId?: string;
+    /**
+     * You can override prop(s) for the mentioned component(s).
+     */
+    overrides?: {
+        ResizeButton?: {
+            render?: (Component: ElementType<ResizeButtonProps>, props: ResizeButtonProps) => ReactElement;
+        };
+    };
+    /**
+     * Display label for grab area. This will be announced to the screenreaders when the grab area receives focus
+     */
+    resizeGrabAreaLabel?: string;
+    /**
+     * Display label for resize button.
+     */
+    resizeButtonLabel?: string;
+    /**
+     * Called when left-sidebar is collapsed.
+     */
+    onCollapse?: () => void;
+    /**
+     * Called when left-sidebar is expanded.
+     */
+    onExpand?: () => void;
+    /**
+     * Called when left-sidebar resize starts using mouse or touch.
+     */
+    onResizeStart?: (leftSidebarState: LeftSidebarState) => void;
+    /**
+     * Called when left-sidebar resize ends using mouse or touch.
+     */
+    onResizeEnd?: (leftSidebarState: LeftSidebarState) => void;
+    /**
+     * Called when left-sidebar is collapsed and mouse leaves the area.
+     */
+    onFlyoutCollapse?: () => void;
+    /**
+     * Called after flyout delay when left-sidebar is collapsed and mouse enters the area.
+     */
+    onFlyoutExpand?: () => void;
+    /**
+     * Controls whether the LeftSidebar mounts in a collapsed state, this will override the setting in localStorage
+     */
+    collapsedState?: 'collapsed' | 'expanded';
+    /**
+     * Controls the width when LeftSidebar mounts, this will override the setting in localStorage
+     */
+    width?: number;
+}
+export type SidebarResizeControllerProps = {
+    /**
+     * React children!
+     */
+    children: ReactNode;
+    /**
+     * Called when left-sidebar expanded.
+     */
+    onLeftSidebarExpand?: (leftSidebarState: LeftSidebarState) => void;
+    /**
+     * Called when left-sidebar collapsed.
+     */
+    onLeftSidebarCollapse?: (leftSidebarState: LeftSidebarState) => void;
+};
+export type DimensionNames = 'leftPanelWidth' | 'bannerHeight' | 'topNavigationHeight' | 'leftSidebarWidth' | 'leftSidebarFlyoutWidth' | 'rightSidebarWidth' | 'rightPanelWidth';
+export type Dimensions = Partial<Record<DimensionNames, number>>;
+export interface PageLayoutProps extends SidebarResizeControllerProps {
+    skipLinksLabel?: string;
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
+     */
+    testId?: string;
+}
+export type { LeftSidebarState } from '../controllers/sidebar-resize-context';

package/dist/types-ts4.5/common/utils.d.ts

@@ -0,0 +1,13 @@
+import { DimensionNames, Dimensions } from './types';
+declare const emptyGridState: Dimensions;
+declare const mergeGridStateIntoStorage: (key: string, value: any) => void;
+declare const getGridStateFromStorage: (key: string) => any;
+declare const removeFromGridStateInStorage: (key: string, secondKey?: string) => void;
+declare const resolveDimension: (key: DimensionNames, dimension?: number, shouldPersist?: boolean) => any;
+declare const getLeftPanelWidth: () => number;
+declare const getLeftSidebarPercentage: (currentWidth: number, maxWidth: number) => number;
+declare const getPageLayoutSlotSelector: (slotName: string) => {
+    "data-ds--page-layout--slot": string;
+};
+declare const getPageLayoutSlotCSSSelector: (slotName: string) => string;
+export { emptyGridState, mergeGridStateIntoStorage, getGridStateFromStorage, removeFromGridStateInStorage, resolveDimension, getLeftPanelWidth, getLeftSidebarPercentage, getPageLayoutSlotSelector, getPageLayoutSlotCSSSelector, };

package/dist/types-ts4.5/components/index.d.ts

@@ -0,0 +1,12 @@
+export { default as PageLayout } from './slots/page-layout';
+export { default as Main } from './slots/main';
+export { default as RightPanel } from './slots/right-panel';
+export { default as LeftPanel } from './slots/left-panel';
+export { default as RightSidebar } from './slots/right-sidebar';
+export { default as LeftSidebar } from './slots/left-sidebar';
+export { default as LeftSidebarWithoutResize } from './slots/left-sidebar-without-resize';
+export { default as Banner } from './slots/banner-slot';
+export { default as TopNavigation } from './slots/top-navigation';
+export { default as Content } from './slots/content';
+export { default as ResizeControl } from './resize-control';
+export { useCustomSkipLink } from './skip-links';

package/dist/types-ts4.5/components/resize-control/grab-area.d.ts

@@ -0,0 +1,9 @@
+/** @jsx jsx */
+import { ComponentProps } from 'react';
+import { jsx } from '@emotion/react';
+export type GrabAreaProps = {
+    testId?: string;
+    isLeftSidebarCollapsed: boolean;
+} & ComponentProps<'button'>;
+declare const GrabArea: ({ testId, isLeftSidebarCollapsed, ...rest }: GrabAreaProps) => jsx.JSX.Element;
+export default GrabArea;

package/dist/types-ts4.5/components/resize-control/index.d.ts

@@ -0,0 +1,4 @@
+import { jsx } from '@emotion/react';
+import { ResizeControlProps } from './types';
+declare const ResizeControl: ({ testId, overrides, resizeButtonLabel, resizeGrabAreaLabel, onResizeStart, onResizeEnd, }: ResizeControlProps) => jsx.JSX.Element;
+export default ResizeControl;

package/dist/types-ts4.5/components/resize-control/resize-button.d.ts

@@ -0,0 +1,4 @@
+import { jsx } from '@emotion/react';
+import { ResizeButtonProps } from './types';
+declare const ResizeButton: ({ isLeftSidebarCollapsed, label, testId, ...props }: ResizeButtonProps) => jsx.JSX.Element;
+export default ResizeButton;

package/dist/types-ts4.5/components/resize-control/shadow.d.ts

@@ -0,0 +1,6 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+declare const Shadow: ({ testId }: {
+    testId?: string | undefined;
+}) => jsx.JSX.Element;
+export default Shadow;

package/dist/types-ts4.5/components/resize-control/types.d.ts

@@ -0,0 +1,25 @@
+import { ButtonHTMLAttributes, ElementType, ReactElement } from 'react';
+import { LeftSidebarState } from '../../controllers/sidebar-resize-context';
+export type ResizeButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    isLeftSidebarCollapsed: boolean;
+    label: string;
+    testId?: string;
+};
+export type ResizeControlProps = {
+    testId?: string;
+    overrides?: {
+        ResizeButton?: {
+            render?: (Component: ElementType<ResizeButtonProps>, props: ResizeButtonProps) => ReactElement;
+        };
+    };
+    resizeGrabAreaLabel?: string;
+    resizeButtonLabel?: string;
+    onCollapse?: (leftSidebarState: LeftSidebarState) => void;
+    onExpand?: (leftSidebarState: LeftSidebarState) => void;
+    onResizeStart?: (leftSidebarState: LeftSidebarState) => void;
+    onResizeEnd?: (leftSidebarState: LeftSidebarState) => void;
+    onFlyoutCollapse?: () => void;
+    onFlyoutExpand?: () => void;
+    leftSidebarState: LeftSidebarState;
+    setLeftSidebarState: (leftSidebarState: LeftSidebarState) => void;
+};

package/dist/types-ts4.5/components/skip-links/index.d.ts

@@ -0,0 +1,2 @@
+export { SkipLinkWrapper, SkipLink } from './skip-link-components';
+export { useCustomSkipLink } from './use-custom-skip-link';

package/dist/types-ts4.5/components/skip-links/skip-link-components.d.ts

@@ -0,0 +1,18 @@
+/** @jsx jsx */
+import { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
+import { SkipLinkWrapperProps } from './types';
+/**
+ * The default label will be used when the `skipLinksLabel` attribute is not
+ * provided or the attribute is an empty string. If a string comprised only of
+ * spaces is provided, the skip link heading element will be removed, but the
+ * default label will still be used in `title` attribute of the skip links
+ * themselves.
+ */
+export declare const SkipLinkWrapper: ({ skipLinksLabel }: SkipLinkWrapperProps) => jsx.JSX.Element | null;
+export declare const SkipLink: ({ href, children, isFocusable, title, }: {
+    href: string;
+    children: ReactNode;
+    isFocusable: boolean;
+    title: string;
+}) => jsx.JSX.Element;

package/dist/types-ts4.5/components/skip-links/types.d.ts

@@ -0,0 +1,8 @@
+export type SkipLinkData = {
+    id: string;
+    name: string;
+    ref?: undefined;
+};
+export type SkipLinkWrapperProps = {
+    skipLinksLabel?: string;
+};

package/dist/types-ts4.5/components/skip-links/use-custom-skip-link.d.ts

@@ -0,0 +1,2 @@
+import { SkipLinkData } from '../../controllers';
+export declare const useCustomSkipLink: (id: SkipLinkData['id'], skipLinkTitle: SkipLinkData['skipLinkTitle'], listIndex?: SkipLinkData['listIndex']) => void;

package/dist/types-ts4.5/components/slots/banner-slot.d.ts

@@ -0,0 +1,12 @@
+import { jsx } from '@emotion/react';
+import { SlotHeightProps } from '../../common/types';
+/**
+ * __Banner__
+ *
+ * Provides a slot for a Banner within the PageLayout.
+ *
+ * - [Examples](https://atlassian.design/components/page-layout/examples)
+ * - [Code](https://atlassian.design/components/page-layout/code)
+ */
+declare const Banner: (props: SlotHeightProps) => jsx.JSX.Element;
+export default Banner;

package/dist/types-ts4.5/components/slots/content.d.ts

@@ -0,0 +1,23 @@
+/** @jsx jsx */
+import { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
+interface ContentProps {
+    /**
+     * React children
+     */
+    children: ReactNode;
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
+     */
+    testId?: string;
+}
+/**
+ * __Content__
+ *
+ * Provides a slot for your application content within the PageLayout.
+ *
+ * - [Examples](https://atlassian.design/components/page-layout/examples)
+ * - [Code](https://atlassian.design/components/page-layout/code)
+ */
+declare const Content: (props: ContentProps) => jsx.JSX.Element;
+export default Content;

package/dist/types-ts4.5/components/slots/internal/left-sidebar-inner.d.ts

@@ -0,0 +1,10 @@
+/** @jsx jsx */
+import type { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
+type LeftSidebarInnerProps = {
+    children: ReactNode;
+    isFixed?: boolean;
+    isFlyoutOpen?: boolean;
+};
+declare const LeftSidebarInner: ({ children, isFixed, isFlyoutOpen, }: LeftSidebarInnerProps) => jsx.JSX.Element;
+export default LeftSidebarInner;

package/dist/types-ts4.5/components/slots/internal/left-sidebar-outer.d.ts

@@ -0,0 +1,13 @@
+/** @jsx jsx */
+import { MouseEventHandler, ReactNode } from 'react';
+type LeftSidebarOuterProps = {
+    children: ReactNode;
+    isFixed?: boolean;
+    isFlyoutOpen?: boolean;
+    testId?: string;
+    id?: string;
+    onMouseOver?: MouseEventHandler;
+    onMouseLeave?: MouseEventHandler;
+};
+declare const _default: import("react").ForwardRefExoticComponent<LeftSidebarOuterProps & import("react").RefAttributes<HTMLDivElement>>;
+export default _default;

package/dist/types-ts4.5/components/slots/internal/resizable-children-wrapper.d.ts

@@ -0,0 +1,11 @@
+/** @jsx jsx */
+import type { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
+type ResizableChildrenWrapperProps = {
+    children: ReactNode;
+    isFlyoutOpen?: boolean;
+    isLeftSidebarCollapsed?: boolean;
+    hasCollapsedState?: boolean;
+};
+declare const ResizableChildrenWrapper: ({ children, isLeftSidebarCollapsed, hasCollapsedState, isFlyoutOpen, }: ResizableChildrenWrapperProps) => jsx.JSX.Element;
+export default ResizableChildrenWrapper;

package/dist/types-ts4.5/components/slots/internal/slot-focus-ring.d.ts

@@ -0,0 +1,20 @@
+/** @jsx jsx */
+import type { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
+type SlotFocusRingProps = {
+    children: (props: {
+        className: string;
+    }) => ReactNode;
+    isSidebar?: boolean;
+};
+/**
+ * We don't use `@atlaskit/focus-ring` here,
+ * because we need inset focus styles and:
+ *
+ * 1. If we set them directly to the layout element,
+ *    then any child element's background will cover the shadow.
+ * 2. We cannot wrap `children` in `FocusRing`,
+ *    because there's no guarantee the passed child takes `className`.
+ */
+declare const SlotFocusRing: ({ children, isSidebar }: SlotFocusRingProps) => jsx.JSX.Element;
+export default SlotFocusRing;

package/dist/types-ts4.5/components/slots/left-panel.d.ts

@@ -0,0 +1,12 @@
+import { jsx } from '@emotion/react';
+import { SlotWidthProps } from '../../common/types';
+/**
+ * __Left panel__
+ *
+ * Provides a slot for a left panel within the PageLayout.
+ *
+ * - [Examples](https://atlassian.design/components/page-layout/examples)
+ * - [Code](https://atlassian.design/components/page-layout/code)
+ */
+declare const LeftPanel: (props: SlotWidthProps) => jsx.JSX.Element;
+export default LeftPanel;

package/dist/types-ts4.5/components/slots/left-sidebar-without-resize.d.ts

@@ -0,0 +1,12 @@
+import { jsx } from '@emotion/react';
+import { SlotWidthProps } from '../../common/types';
+/**
+ * __Left sidebar without resize__
+ *
+ * Provides a slot for a left sidebar without resize within the PageLayout.
+ *
+ * - [Examples](https://atlassian.design/components/page-layout/examples)
+ * - [Code](https://atlassian.design/components/page-layout/code)
+ */
+declare const LeftSidebarWithoutResize: (props: SlotWidthProps) => jsx.JSX.Element;
+export default LeftSidebarWithoutResize;

package/dist/types-ts4.5/components/slots/left-sidebar.d.ts

@@ -0,0 +1,12 @@
+import { jsx } from '@emotion/react';
+import { LeftSidebarProps } from '../../common/types';
+/**
+ * __Left sidebar__
+ *
+ * Provides a slot for a left sidebar within the PageLayout.
+ *
+ * - [Examples](https://atlassian.design/components/page-layout/examples)
+ * - [Code](https://atlassian.design/components/page-layout/code)
+ */
+declare const LeftSidebar: (props: LeftSidebarProps) => jsx.JSX.Element;
+export default LeftSidebar;

package/dist/types-ts4.5/components/slots/main.d.ts

@@ -0,0 +1,12 @@
+import { jsx } from '@emotion/react';
+import { SlotWidthProps } from '../../common/types';
+/**
+ * __Main__
+ *
+ * Provides a slot for main content within the PageLayout.
+ *
+ * - [Examples](https://atlassian.design/components/page-layout/examples)
+ * - [Code](https://atlassian.design/components/page-layout/code)
+ */
+declare const Main: (props: SlotWidthProps) => jsx.JSX.Element;
+export default Main;

package/dist/types-ts4.5/components/slots/page-layout.d.ts

@@ -0,0 +1,12 @@
+import { jsx } from '@emotion/react';
+import { PageLayoutProps } from '../../common/types';
+/**
+ * __Page layout__
+ *
+ * A collection of components which let you compose an application's page layout.
+ *
+ * - [Examples](https://atlassian.design/components/page-layout/examples)
+ * - [Code](https://atlassian.design/components/page-layout/code)
+ */
+declare const PageLayout: ({ skipLinksLabel, children, testId, onLeftSidebarExpand, onLeftSidebarCollapse, }: PageLayoutProps) => jsx.JSX.Element;
+export default PageLayout;

package/dist/types-ts4.5/components/slots/right-panel.d.ts

@@ -0,0 +1,12 @@
+import { jsx } from '@emotion/react';
+import { SlotWidthProps } from '../../common/types';
+/**
+ * __Right panel__
+ *
+ * Provides a slot for a right panel within the PageLayout.
+ *
+ * - [Examples](https://atlassian.design/components/page-layout/examples)
+ * - [Code](https://atlassian.design/components/page-layout/code)
+ */
+declare const RightPanel: (props: SlotWidthProps) => jsx.JSX.Element;
+export default RightPanel;

package/dist/types-ts4.5/components/slots/right-sidebar.d.ts

@@ -0,0 +1,12 @@
+import { jsx } from '@emotion/react';
+import { SlotWidthProps } from '../../common/types';
+/**
+ * __Right sidebar__
+ *
+ * Provides a slot for a right sidebar within the PageLayout.
+ *
+ * - [Examples](https://atlassian.design/components/page-layout/examples)
+ * - [Code](https://atlassian.design/components/page-layout/code)
+ */
+declare const RightSidebar: (props: SlotWidthProps) => jsx.JSX.Element;
+export default RightSidebar;

package/dist/types-ts4.5/components/slots/slot-dimensions.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface SlotDimensionsProps {
+    variableName: string;
+    value?: number;
+}
+declare const _default: ({ variableName, value }: SlotDimensionsProps) => JSX.Element;
+export default _default;

package/dist/types-ts4.5/components/slots/top-navigation.d.ts

@@ -0,0 +1,12 @@
+import { jsx } from '@emotion/react';
+import { SlotHeightProps } from '../../common/types';
+/**
+ * __Top navigation__
+ *
+ * Provides a slot for top navigation within the PageLayout.
+ *
+ * - [Examples](https://atlassian.design/components/page-layout/examples)
+ * - [Code](https://atlassian.design/components/page-layout/code)
+ */
+declare const TopNavigation: (props: SlotHeightProps) => jsx.JSX.Element;
+export default TopNavigation;

package/dist/types-ts4.5/controllers/index.d.ts

@@ -0,0 +1,6 @@
+export type { SkipLinkData } from './types';
+export { default as publishGridState } from './use-page-layout-grid';
+export { SidebarResizeContext, usePageLayoutResize, useLeftSidebarFlyoutLock, } from './sidebar-resize-context';
+export { SidebarResizeController } from './sidebar-resize-controller';
+export { useSkipLinks, useSkipLink } from './skip-link-context';
+export { SkipLinksController } from './skip-link-controller';

package/dist/types-ts4.5/controllers/sidebar-resize-context.d.ts

@@ -0,0 +1,42 @@
+import { KeyboardEvent, MouseEvent } from 'react';
+export type LeftSidebarState = {
+    isFlyoutOpen: boolean;
+    isResizing: boolean;
+    isLeftSidebarCollapsed: boolean;
+    leftSidebarWidth: number;
+    lastLeftSidebarWidth: number;
+    flyoutLockCount: number;
+    isFixed: boolean;
+};
+export type SidebarResizeContextValue = {
+    isLeftSidebarCollapsed: boolean;
+    expandLeftSidebar: () => void;
+    collapseLeftSidebar: (event?: MouseEvent | KeyboardEvent, collapseWithoutTransition?: boolean) => void;
+    leftSidebarState: LeftSidebarState;
+    setLeftSidebarState: (value: LeftSidebarState | ((prevState: LeftSidebarState) => LeftSidebarState)) => void;
+};
+export declare const SidebarResizeContext: import("react").Context<SidebarResizeContextValue>;
+export declare const usePageLayoutResize: () => {
+    isLeftSidebarCollapsed: boolean;
+    expandLeftSidebar: () => void;
+    collapseLeftSidebar: (event?: MouseEvent | KeyboardEvent, collapseWithoutTransition?: boolean) => void;
+    leftSidebarState: LeftSidebarState;
+};
+/**
+ * _**WARNING:**_ This hook is intended as a temporary solution and
+ * is likely to be removed in a future version of page-layout.
+ *
+ * ---
+ *
+ * This hook will prevent the left sidebar from automatically collapsing
+ * when it is in a flyout state.
+ *
+ * The intended use case for this hook is to allow popup menus in the
+ * left sidebar to be usable while it is in a flyout state.
+ *
+ * ## Usage
+ * The intended usage is to use this hook within the popup component
+ * you are rendering. This way the left sidebar will be locked for
+ * as long as the popup is open.
+ */
+export declare const useLeftSidebarFlyoutLock: () => void;

package/dist/types-ts4.5/controllers/sidebar-resize-controller.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { SidebarResizeControllerProps } from '../common/types';
+export declare const SidebarResizeController: FC<SidebarResizeControllerProps>;

package/dist/types-ts4.5/controllers/skip-link-context.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { SkipLinkContextProps, SkipLinkData } from './types';
+export declare const SkipLinksContext: import("react").Context<SkipLinkContextProps>;
+export declare const useSkipLinks: () => SkipLinkContextProps;
+export declare const useSkipLink: (id?: SkipLinkData['id'], skipLinkTitle?: SkipLinkData['skipLinkTitle']) => void;

package/dist/types-ts4.5/controllers/skip-link-controller.d.ts

@@ -0,0 +1,4 @@
+import { FC, ReactNode } from 'react';
+export declare const SkipLinksController: FC<{
+    children: ReactNode;
+}>;

package/dist/types-ts4.5/controllers/types.d.ts

@@ -0,0 +1,22 @@
+export type SkipLinkContextProps = {
+    skipLinksData: SkipLinkData[];
+    registerSkipLink: (skipLinkDate: SkipLinkData) => void;
+    unregisterSkipLink: (id: string | undefined) => void;
+};
+export type SkipLinkData = {
+    /**
+     * id for the element that will be skipped to
+     */
+    id: string;
+    /**
+     * Text for the link that will appear in the skip link menu
+     */
+    skipLinkTitle: string;
+    /**
+     * Desired position in the skip link menu
+     */
+    listIndex?: number;
+};
+export type SkipLinkI18n = {
+    title: string;
+};

package/dist/types-ts4.5/controllers/use-page-layout-grid.d.ts

@@ -0,0 +1,3 @@
+import { Dimensions } from '../common/types';
+declare const publishGridState: (gridState: Dimensions) => void;
+export default publishGridState;

package/dist/types-ts4.5/controllers/use-update-css-vars.d.ts

@@ -0,0 +1,2 @@
+declare function useUpdateCssVar(cssVar: string, value: number | string): void;
+export default useUpdateCssVar;

package/dist/types-ts4.5/index.d.ts

@@ -0,0 +1,4 @@
+export { PageLayout, Main, Content, RightSidebar, LeftSidebar, LeftSidebarWithoutResize, RightPanel, LeftPanel, Banner, TopNavigation, useCustomSkipLink, } from './components';
+export { LEFT_PANEL_WIDTH, RIGHT_PANEL_WIDTH, BANNER_HEIGHT, TOP_NAVIGATION_HEIGHT, LEFT_SIDEBAR_WIDTH, RIGHT_SIDEBAR_WIDTH, } from './common/constants';
+export { usePageLayoutResize, useLeftSidebarFlyoutLock } from './controllers';
+export type { SlotHeightProps, SlotWidthProps, Dimensions, LeftSidebarState, } from './common/types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/page-layout",
-  "version": "1.6.1",
+  "version": "1.6.2",
   "description": "A collection of components which let you compose an application's page layout.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -55,13 +55,13 @@
     "@atlaskit/drawer": "^7.5.0",
     "@atlaskit/icon": "*",
     "@atlaskit/logo": "^13.14.0",
-    "@atlaskit/menu": "^1.6.0",
+    "@atlaskit/menu": "^1.7.0",
     "@atlaskit/notification-indicator": "^9.1.0",
     "@atlaskit/notification-log-client": "^6.1.0",
     "@atlaskit/onboarding": "^10.8.0",
     "@atlaskit/popup": "^1.6.0",
     "@atlaskit/section-message": "^6.4.0",
-    "@atlaskit/side-navigation": "^1.7.0",
+    "@atlaskit/side-navigation": "^1.8.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/tooltip": "*",
     "@atlaskit/visual-regression": "*",