@atlaskit/page-layout 1.2.6 → 1.3.0

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

@@ -1,10 +1,11 @@
 /** @jsx jsx */
 import { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
 import { SkipLinkWrapperProps } from './types';
-export declare const SkipLinkWrapper: ({ skipLinksLabel }: SkipLinkWrapperProps) => JSX.Element | null;
+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.Element;
+}) => jsx.JSX.Element;

package/dist/types/components/slots/banner.d.ts

@@ -1,4 +1,12 @@
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 import { SlotHeightProps } from '../../common/types';
-declare const Banner: (props: SlotHeightProps) => JSX.Element;
+/**
+ * __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/components/slots/content.d.ts

@@ -1,12 +1,23 @@
 /** @jsx jsx */
 import { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
 interface ContentProps {
-    /** React children! */
+    /**
+     * 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;
 }
-declare const Content: (props: ContentProps) => JSX.Element;
+/**
+ * __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/components/slots/internal/left-sidebar-inner.d.ts

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

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

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

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

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import type { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
 declare type SlotFocusRingProps = {
     children: (props: {
         className: string;
@@ -15,5 +16,5 @@ declare type SlotFocusRingProps = {
  * 2. We cannot wrap `children` in `FocusRing`,
  *    because there's no guarantee the passed child takes `className`.
  */
-declare const SlotFocusRing: ({ children, isSidebar }: SlotFocusRingProps) => JSX.Element;
+declare const SlotFocusRing: ({ children, isSidebar }: SlotFocusRingProps) => jsx.JSX.Element;
 export default SlotFocusRing;

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

@@ -1,4 +1,12 @@
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 import { SlotWidthProps } from '../../common/types';
-declare const LeftPanel: (props: SlotWidthProps) => JSX.Element;
+/**
+ * __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/components/slots/left-sidebar-without-resize.d.ts

@@ -1,4 +1,12 @@
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 import { SlotWidthProps } from '../../common/types';
-declare const LeftSidebarWithoutResize: (props: SlotWidthProps) => JSX.Element;
+/**
+ * __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/components/slots/left-sidebar.d.ts

@@ -1,4 +1,12 @@
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 import { LeftSidebarProps } from '../../common/types';
-declare const LeftSidebar: (props: LeftSidebarProps) => JSX.Element;
+/**
+ * __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/components/slots/main.d.ts

@@ -1,4 +1,12 @@
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 import { SlotWidthProps } from '../../common/types';
-declare const Main: (props: SlotWidthProps) => JSX.Element;
+/**
+ * __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/components/slots/page-layout.d.ts

@@ -1,4 +1,12 @@
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 import { PageLayoutProps } from '../../common/types';
-declare const PageLayout: ({ skipLinksLabel, children, testId, onLeftSidebarExpand, onLeftSidebarCollapse, }: PageLayoutProps) => JSX.Element;
+/**
+ * __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/components/slots/right-panel.d.ts

@@ -1,4 +1,12 @@
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 import { SlotWidthProps } from '../../common/types';
-declare const RightPanel: (props: SlotWidthProps) => JSX.Element;
+/**
+ * __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/components/slots/right-sidebar.d.ts

@@ -1,4 +1,12 @@
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 import { SlotWidthProps } from '../../common/types';
-declare const RightSidebar: (props: SlotWidthProps) => JSX.Element;
+/**
+ * __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/components/slots/top-navigation.d.ts

@@ -1,4 +1,12 @@
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 import { SlotHeightProps } from '../../common/types';
-declare const TopNavigation: (props: SlotHeightProps) => JSX.Element;
+/**
+ * __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/controllers/sidebar-resize-context.d.ts

@@ -23,7 +23,7 @@ export declare const usePageLayoutResize: () => {
     leftSidebarState: LeftSidebarState;
 };
 /**
- * **WARNING:** This hook is intended as a temporary solution and
+ * _**WARNING:**_ This hook is intended as a temporary solution and
  * is likely to be removed in a future version of page-layout.
  *
  * ---

package/dist/types/controllers/types.d.ts

@@ -4,11 +4,17 @@ export declare type SkipLinkContextProps = {
     unregisterSkipLink: (id: string | undefined) => void;
 };
 export declare type SkipLinkData = {
-    /** id for the element that will be skipped to */
+    /**
+     * id for the element that will be skipped to
+     */
     id: string;
-    /** Text for the link that will appear in the skip link menu */
+    /**
+     * Text for the link that will appear in the skip link menu
+     */
     skipLinkTitle: string;
-    /** Desired position in the skip link menu */
+    /**
+     * Desired position in the skip link menu
+     */
     listIndex?: number;
 };
 export declare type SkipLinkI18n = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/page-layout",
-  "version": "1.2.6",
+  "version": "1.3.0",
   "description": "A collection of components which let you compose an application's page layout.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -13,7 +13,7 @@
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
   "sideEffects": false,
-  "atlaskit:src": "src/index.ts",
+  "atlaskit:src": "src/index.tsx",
   "atlassian": {
     "team": "Design System Team",
     "deprecatedAutoEntryPoints": true,
@@ -25,12 +25,13 @@
   },
   "homepage": "https://atlassian.design/components/page-layout/",
   "dependencies": {
+    "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/motion": "^1.1.0",
-    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/motion": "^1.2.0",
+    "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/core": "^10.0.9",
+    "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
     "raf-schd": "^4.0.3"
   },
@@ -43,15 +44,15 @@
     "@atlaskit/atlassian-notifications": "^0.3.0",
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/drawer": "^7.1.0",
+    "@atlaskit/drawer": "^7.2.0",
     "@atlaskit/icon": "*",
-    "@atlaskit/logo": "^13.7.0",
+    "@atlaskit/logo": "^13.9.0",
     "@atlaskit/menu": "^1.3.0",
     "@atlaskit/notification-indicator": "^9.0.0",
     "@atlaskit/notification-log-client": "^6.0.0",
-    "@atlaskit/onboarding": "^10.4.0",
-    "@atlaskit/popup": "^1.3.0",
-    "@atlaskit/section-message": "^6.0.0",
+    "@atlaskit/onboarding": "^10.5.0",
+    "@atlaskit/popup": "^1.4.0",
+    "@atlaskit/section-message": "^6.2.0",
     "@atlaskit/side-navigation": "^1.2.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/tooltip": "*",
@@ -65,7 +66,7 @@
     "jest-emotion": "^10.0.32",
     "raf-stub": "^2.0.1",
     "storybook-addon-performance": "^0.16.0",
-    "typescript": "4.2.4"
+    "typescript": "4.3.5"
   },
   "keywords": [
     "atlaskit",
@@ -78,6 +79,7 @@
     },
     "@repo/internal": {
       "dom-events": "use-bind-event-listener",
+      "design-system": "v1",
       "ui-components": [
         "lite-mode"
       ],

package/report.api.md

@@ -0,0 +1,219 @@
+## API Report File for "@atlaskit/page-layout"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+/// <reference types="react" />
+
+import { ButtonHTMLAttributes } from 'react';
+import { ElementType } from 'react';
+import { KeyboardEvent as KeyboardEvent_2 } from 'react';
+import { MouseEvent as MouseEvent_2 } from 'react';
+import { ReactElement } from 'react';
+import { ReactNode } from 'react';
+
+export declare const Banner: (props: SlotHeightProps) => JSX.Element;
+
+export declare const BANNER_HEIGHT: string;
+
+export declare const Content: (props: ContentProps) => JSX.Element;
+
+declare 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;
+}
+
+declare type DimensionNames =
+  | 'leftPanelWidth'
+  | 'bannerHeight'
+  | 'topNavigationHeight'
+  | 'leftSidebarWidth'
+  | 'leftSidebarFlyoutWidth'
+  | 'rightSidebarWidth'
+  | 'rightPanelWidth';
+
+export declare type Dimensions = Partial<Record<DimensionNames, number>>;
+
+export declare const LEFT_PANEL_WIDTH: string;
+
+export declare const LEFT_SIDEBAR_WIDTH: string;
+
+export declare const LeftPanel: (props: SlotWidthProps) => JSX.Element;
+
+export declare const LeftSidebar: (props: LeftSidebarProps) => JSX.Element;
+
+declare 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 declare type LeftSidebarState = {
+  isFlyoutOpen: boolean;
+  isResizing: boolean;
+  isLeftSidebarCollapsed: boolean;
+  leftSidebarWidth: number;
+  lastLeftSidebarWidth: number;
+  flyoutLockCount: number;
+  isFixed: boolean;
+};
+
+export declare const LeftSidebarWithoutResize: (
+  props: SlotWidthProps,
+) => JSX.Element;
+
+export declare const Main: (props: SlotWidthProps) => JSX.Element;
+
+export declare const PageLayout: ({
+  skipLinksLabel,
+  children,
+  testId,
+  onLeftSidebarExpand,
+  onLeftSidebarCollapse,
+}: PageLayoutProps) => JSX.Element;
+
+declare interface PageLayoutProps extends SidebarResizeControllerProps {
+  /** React children! */
+  children: ReactNode;
+  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;
+}
+
+declare type ResizeButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  isLeftSidebarCollapsed: boolean;
+  label: string;
+  testId?: string;
+};
+
+export declare const RIGHT_PANEL_WIDTH: string;
+
+export declare const RIGHT_SIDEBAR_WIDTH: string;
+
+export declare const RightPanel: (props: SlotWidthProps) => JSX.Element;
+
+export declare const RightSidebar: (props: SlotWidthProps) => JSX.Element;
+
+declare type SidebarResizeControllerProps = {
+  /** Called when left-sidebar expanded. */
+  onLeftSidebarExpand?: (leftSidebarState: LeftSidebarState) => void;
+  /** Called when left-sidebar collapsed. */
+  onLeftSidebarCollapse?: (leftSidebarState: LeftSidebarState) => void;
+};
+
+declare 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 declare interface SlotHeightProps extends SlotProps {
+  /** It save height in local storage. */
+  shouldPersistHeight?: boolean;
+  /** Height! */
+  height?: number;
+}
+
+declare 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 declare interface SlotWidthProps extends SlotProps {
+  /** It save width in local storage. */
+  shouldPersistWidth?: boolean;
+  /** Width! */
+  width?: number;
+}
+
+export declare const TOP_NAVIGATION_HEIGHT: string;
+
+export declare const TopNavigation: (props: SlotHeightProps) => JSX.Element;
+
+export declare const useCustomSkipLink: (
+  id: SkipLinkData['id'],
+  skipLinkTitle: SkipLinkData['skipLinkTitle'],
+  listIndex?: SkipLinkData['listIndex'],
+) => void;
+
+/**
+ * **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;
+
+export declare const usePageLayoutResize: () => {
+  isLeftSidebarCollapsed: boolean;
+  expandLeftSidebar: () => void;
+  collapseLeftSidebar: (
+    event?:
+      | MouseEvent_2<Element, globalThis.MouseEvent>
+      | KeyboardEvent_2<Element>
+      | undefined,
+    collapseWithoutTransition?: boolean | undefined,
+  ) => void;
+  leftSidebarState: LeftSidebarState;
+};
+
+export {};
+```