@atlaskit/page-layout 1.2.6 → 1.2.7

package/dist/types/common/types.d.ts

@@ -2,27 +2,39 @@ 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. */
+    /**
+     * 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! */
+    /**
+     * React Children!
+     */
     children: ReactNode;
     id?: string;
     skipLinkTitle?: string;
 }
 export interface SlotHeightProps extends SlotProps {
-    /** It save height in local storage. */
+    /**
+     * It save height in local storage.
+     */
     shouldPersistHeight?: boolean;
-    /** Height! */
+    /**
+     * Height!
+     */
     height?: number;
 }
 export interface SlotWidthProps extends SlotProps {
-    /** It save width in local storage. */
+    /**
+     * It save width in local storage.
+     */
     shouldPersistWidth?: boolean;
-    /** Width! */
+    /**
+     * Width!
+     */
     width?: number;
 }
 export interface LeftSidebarProps extends SlotWidthProps {
@@ -30,48 +42,76 @@ 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). */
+    /**
+     * 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 */
+    /**
+     * 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. */
+    /**
+     * Display label for resize button.
+     */
     resizeButtonLabel?: string;
-    /** Called when left-sidebar is collapsed. */
+    /**
+     * Called when left-sidebar is collapsed.
+     */
     onCollapse?: () => void;
-    /** Called when left-sidebar is expanded. */
+    /**
+     * Called when left-sidebar is expanded.
+     */
     onExpand?: () => void;
-    /** Called when left-sidebar resize starts using mouse or touch. */
+    /**
+     * Called when left-sidebar resize starts using mouse or touch.
+     */
     onResizeStart?: (leftSidebarState: LeftSidebarState) => void;
-    /** Called when left-sidebar resize ends using mouse or touch. */
+    /**
+     * 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. */
+    /**
+     * 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. */
+    /**
+     * 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 */
+    /**
+     * 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 */
+    /**
+     * Controls the width when LeftSidebar mounts, this will override the setting in localStorage
+     */
     width?: number;
 }
 export declare type SidebarResizeControllerProps = {
-    /** Called when left-sidebar expanded. */
+    /**
+     * Called when left-sidebar expanded.
+     */
     onLeftSidebarExpand?: (leftSidebarState: LeftSidebarState) => void;
-    /** Called when left-sidebar collapsed. */
+    /**
+     * Called when left-sidebar collapsed.
+     */
     onLeftSidebarCollapse?: (leftSidebarState: LeftSidebarState) => void;
 };
 export declare type DimensionNames = 'leftPanelWidth' | 'bannerHeight' | 'topNavigationHeight' | 'leftSidebarWidth' | 'leftSidebarFlyoutWidth' | 'rightSidebarWidth' | 'rightPanelWidth';
 export declare type Dimensions = Partial<Record<DimensionNames, number>>;
 export interface PageLayoutProps extends SidebarResizeControllerProps {
-    /** React children! */
+    /**
+     * 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;
 }
 export type { LeftSidebarState } from '../controllers/sidebar-resize-context';

package/dist/types/common/utils.d.ts

@@ -1,4 +1,4 @@
-import { DimensionNames, Dimensions } from '../common/types';
+import { DimensionNames, Dimensions } from './types';
 declare const emptyGridState: Dimensions;
 declare const mergeGridStateIntoStorage: (key: string, value: any) => void;
 declare const getGridStateFromStorage: (key: string) => any;

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

@@ -1,4 +1,12 @@
 /// <reference types="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.Element;
 export default Banner;

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

@@ -1,12 +1,22 @@
 /** @jsx jsx */
 import { ReactNode } from '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;
 }
+/**
+ * __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.Element;
 export default Content;

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

@@ -1,4 +1,12 @@
 /// <reference types="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.Element;
 export default LeftPanel;

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

@@ -1,4 +1,12 @@
 /// <reference types="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.Element;
 export default LeftSidebarWithoutResize;

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

@@ -1,4 +1,12 @@
 /// <reference types="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.Element;
 export default LeftSidebar;

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

@@ -1,4 +1,12 @@
 /// <reference types="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.Element;
 export default Main;

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

@@ -1,4 +1,12 @@
 /// <reference types="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.Element;
 export default PageLayout;

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

@@ -1,4 +1,12 @@
 /// <reference types="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.Element;
 export default RightPanel;

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

@@ -1,4 +1,12 @@
 /// <reference types="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.Element;
 export default RightSidebar;

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

@@ -1,4 +1,12 @@
 /// <reference types="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.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.2.7",
   "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,8 +25,9 @@
   },
   "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/motion": "^1.2.0",
     "@atlaskit/theme": "^12.1.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
@@ -45,12 +46,12 @@
     "@atlaskit/docs": "*",
     "@atlaskit/drawer": "^7.1.0",
     "@atlaskit/icon": "*",
-    "@atlaskit/logo": "^13.7.0",
+    "@atlaskit/logo": "^13.8.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/onboarding": "^10.5.0",
+    "@atlaskit/popup": "^1.4.0",
     "@atlaskit/section-message": "^6.0.0",
     "@atlaskit/side-navigation": "^1.2.0",
     "@atlaskit/ssr": "*",
@@ -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 {};
+```