@atlaskit/page-layout 1.6.5 → 1.7.0

package/dist/esm/controllers/sidebar-resize-controller.js

@@ -3,13 +3,14 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { bind } from 'bind-event-listener';
 import noop from '@atlaskit/ds-lib/noop';
 import { isReducedMotion } from '@atlaskit/motion';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/responsive';
 import { COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_WIDTH, IS_SIDEBAR_COLLAPSING } from '../common/constants';
 import { getPageLayoutSlotCSSSelector } from '../common/utils';
 import { SidebarResizeContext } from './sidebar-resize-context';
 var handleDataAttributesAndCb = function handleDataAttributesAndCb() {
   var callback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : noop;
-  var isLeftSidebarCollapsed = arguments.length > 1 ? arguments[1] : undefined;
-  var leftSidebarState = arguments.length > 2 ? arguments[2] : undefined;
+  var leftSidebarState = arguments.length > 1 ? arguments[1] : undefined;
   document.documentElement.removeAttribute(IS_SIDEBAR_COLLAPSING);
   callback(leftSidebarState);
 };
@@ -31,7 +32,13 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     leftSidebarState = _useState2[0],
     setLeftSidebarState = _useState2[1];
-  var isLeftSidebarCollapsed = leftSidebarState.isLeftSidebarCollapsed;
+  var leftSidebarWidth = leftSidebarState.leftSidebarWidth,
+    lastLeftSidebarWidth = leftSidebarState.lastLeftSidebarWidth,
+    isResizing = leftSidebarState.isResizing,
+    flyoutLockCount = leftSidebarState.flyoutLockCount,
+    isFixed = leftSidebarState.isFixed,
+    isLeftSidebarCollapsed = leftSidebarState.isLeftSidebarCollapsed,
+    isFlyoutOpen = leftSidebarState.isFlyoutOpen;
 
   // We put the latest callbacks into a ref so we can always have the latest
   // functions in our transitionend listeners
@@ -44,23 +51,46 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
       onExpand: onExpand,
       onCollapse: onCollapse
     };
-  });
+  }, [onExpand, onCollapse]);
   var transition = useRef(null);
+  var mobileMediaQuery = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks -- With the feature flag, this does not apply as it should be static.
+  useMediaQuery('below.md') : null;
+  var isOpen = mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches ? isFlyoutOpen : !isLeftSidebarCollapsed;
   var expandLeftSidebar = useCallback(function () {
-    var _transition$current, _transition$current2;
-    var lastLeftSidebarWidth = leftSidebarState.lastLeftSidebarWidth,
-      isResizing = leftSidebarState.isResizing,
-      flyoutLockCount = leftSidebarState.flyoutLockCount,
-      isFixed = leftSidebarState.isFixed,
-      isLeftSidebarCollapsed = leftSidebarState.isLeftSidebarCollapsed;
+    var _transition$current2, _transition$current3;
+    if (isOpen) {
+      return;
+    }
+
+    // If the user is at a mobile viewport when this runs, we handle it differently
+    // We don't expand at mobile widths; instead we use a flyout which is treated the same otherwise
+    if (mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches) {
+      var _transition$current;
+      var flyoutOpenSidebarState = {
+        isResizing: false,
+        isLeftSidebarCollapsed: true,
+        leftSidebarWidth: COLLAPSED_LEFT_SIDEBAR_WIDTH,
+        lastLeftSidebarWidth: leftSidebarWidth,
+        isFlyoutOpen: true,
+        flyoutLockCount: 0,
+        isFixed: isFixed
+      };
+      setLeftSidebarState(flyoutOpenSidebarState);
+
+      // Flush the desktop transitions, cleanup, and call the `onExpand` still
+      (_transition$current = transition.current) === null || _transition$current === void 0 ? void 0 : _transition$current.complete();
+      handleDataAttributesAndCb(stableRef.current.onExpand, flyoutOpenSidebarState);
+      return;
+    }
     if (isResizing || !isLeftSidebarCollapsed ||
     // already expanding
-    ((_transition$current = transition.current) === null || _transition$current === void 0 ? void 0 : _transition$current.action) === 'expand') {
+    ((_transition$current2 = transition.current) === null || _transition$current2 === void 0 ? void 0 : _transition$current2.action) === 'expand') {
       return;
     }
 
     // flush existing transition
-    (_transition$current2 = transition.current) === null || _transition$current2 === void 0 ? void 0 : _transition$current2.complete();
+    (_transition$current3 = transition.current) === null || _transition$current3 === void 0 ? void 0 : _transition$current3.complete();
     var width = Math.max(lastLeftSidebarWidth, DEFAULT_LEFT_SIDEBAR_WIDTH);
     var updatedLeftSidebarState = {
       isLeftSidebarCollapsed: false,
@@ -73,9 +103,7 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
     };
     setLeftSidebarState(updatedLeftSidebarState);
     function finish() {
-      handleDataAttributesAndCb(stableRef.current.onExpand, false,
-      // isCollapsed
-      updatedLeftSidebarState);
+      handleDataAttributesAndCb(stableRef.current.onExpand, updatedLeftSidebarState);
     }
     var sidebar = document.querySelector(leftSidebarSelector);
     // onTransitionEnd isn't triggered when a user prefers reduced motion
@@ -87,8 +115,8 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
       type: 'transitionend',
       listener: function listener(event) {
         if (event.target === sidebar && event.propertyName === 'width') {
-          var _transition$current3;
-          (_transition$current3 = transition.current) === null || _transition$current3 === void 0 ? void 0 : _transition$current3.complete();
+          var _transition$current4;
+          (_transition$current4 = transition.current) === null || _transition$current4 === void 0 ? void 0 : _transition$current4.complete();
         }
       }
     });
@@ -104,22 +132,41 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
       }
     };
     transition.current = value;
-  }, [leftSidebarState]);
+  }, [isOpen, mobileMediaQuery, isResizing, isLeftSidebarCollapsed, lastLeftSidebarWidth, flyoutLockCount, isFixed, leftSidebarWidth]);
   var collapseLeftSidebar = useCallback(function (event, collapseWithoutTransition) {
-    var _transition$current4, _transition$current5;
-    var leftSidebarWidth = leftSidebarState.leftSidebarWidth,
-      isResizing = leftSidebarState.isResizing,
-      flyoutLockCount = leftSidebarState.flyoutLockCount,
-      isFixed = leftSidebarState.isFixed,
-      isLeftSidebarCollapsed = leftSidebarState.isLeftSidebarCollapsed;
+    var _transition$current6, _transition$current7;
+    if (!isOpen) {
+      return;
+    }
+
+    // If the user is at a mobile viewport when this runs, we handle it differently
+    // We don't collapse at mobile widths; instead we close the flyout.
+    if (mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches) {
+      var _transition$current5;
+      var flyoutCloseSidebarState = {
+        isResizing: false,
+        isLeftSidebarCollapsed: true,
+        leftSidebarWidth: COLLAPSED_LEFT_SIDEBAR_WIDTH,
+        lastLeftSidebarWidth: lastLeftSidebarWidth,
+        isFlyoutOpen: false,
+        flyoutLockCount: 0,
+        isFixed: isFixed
+      };
+      setLeftSidebarState(flyoutCloseSidebarState);
+
+      // Flush the desktop transitions, cleanup, and call the `onCollapse` still
+      (_transition$current5 = transition.current) === null || _transition$current5 === void 0 ? void 0 : _transition$current5.complete();
+      handleDataAttributesAndCb(stableRef.current.onCollapse, flyoutCloseSidebarState);
+      return;
+    }
     if (isResizing || isLeftSidebarCollapsed ||
     // already collapsing
-    ((_transition$current4 = transition.current) === null || _transition$current4 === void 0 ? void 0 : _transition$current4.action) === 'collapse') {
+    ((_transition$current6 = transition.current) === null || _transition$current6 === void 0 ? void 0 : _transition$current6.action) === 'collapse') {
       return;
     }
 
     // flush existing transition
-    (_transition$current5 = transition.current) === null || _transition$current5 === void 0 ? void 0 : _transition$current5.complete();
+    (_transition$current7 = transition.current) === null || _transition$current7 === void 0 ? void 0 : _transition$current7.complete();
 
     // data-attribute is used as a CSS selector to sync the hiding/showing
     // of the nav contents with expand/collapse animation
@@ -135,7 +182,7 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
     };
     setLeftSidebarState(updatedLeftSidebarState);
     function finish() {
-      handleDataAttributesAndCb(stableRef.current.onCollapse, true, updatedLeftSidebarState);
+      handleDataAttributesAndCb(stableRef.current.onCollapse, updatedLeftSidebarState);
     }
     var sidebar = document.querySelector(leftSidebarSelector);
 
@@ -148,8 +195,8 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
       type: 'transitionend',
       listener: function listener(event) {
         if (sidebar === event.target && event.propertyName === 'width') {
-          var _transition$current6;
-          (_transition$current6 = transition.current) === null || _transition$current6 === void 0 ? void 0 : _transition$current6.complete();
+          var _transition$current8;
+          (_transition$current8 = transition.current) === null || _transition$current8 === void 0 ? void 0 : _transition$current8.complete();
         }
       }
     });
@@ -165,24 +212,38 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
       }
     };
     transition.current = value;
-  }, [leftSidebarState]);
+  }, [isOpen, mobileMediaQuery, isResizing, isLeftSidebarCollapsed, leftSidebarWidth, flyoutLockCount, isFixed, lastLeftSidebarWidth]);
+
+  /**
+   * Conditionally toggle the expanding or collapsing the sidebars.
+   * This supports our mobile flyout mode as well.
+   */
+  var toggleLeftSidebar = useCallback(function (event, collapseWithoutTransition) {
+    if (isOpen) {
+      collapseLeftSidebar(event, collapseWithoutTransition);
+    } else {
+      expandLeftSidebar();
+    }
+  }, [isOpen, expandLeftSidebar, collapseLeftSidebar]);
 
   // Make sure we finish any lingering transitions when unmounting
   useEffect(function mount() {
     return function unmount() {
-      var _transition$current7;
-      (_transition$current7 = transition.current) === null || _transition$current7 === void 0 ? void 0 : _transition$current7.abort();
+      var _transition$current9;
+      (_transition$current9 = transition.current) === null || _transition$current9 === void 0 ? void 0 : _transition$current9.abort();
     };
   }, []);
   var context = useMemo(function () {
     return {
-      isLeftSidebarCollapsed: isLeftSidebarCollapsed,
+      isLeftSidebarCollapsed: !isOpen,
+      // Technically this isn't quite true, but with mobile it's a bit safer if products are using this to roll their own collapse/expand
       expandLeftSidebar: expandLeftSidebar,
       collapseLeftSidebar: collapseLeftSidebar,
       leftSidebarState: leftSidebarState,
-      setLeftSidebarState: setLeftSidebarState
+      setLeftSidebarState: setLeftSidebarState,
+      toggleLeftSidebar: toggleLeftSidebar
     };
-  }, [isLeftSidebarCollapsed, expandLeftSidebar, collapseLeftSidebar, leftSidebarState]);
+  }, [isOpen, expandLeftSidebar, collapseLeftSidebar, leftSidebarState, toggleLeftSidebar]);
   return /*#__PURE__*/React.createElement(SidebarResizeContext.Provider, {
     value: context
   }, children);

package/dist/esm/version.json

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

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

@@ -21,9 +21,11 @@ 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 MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH = 16;
 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 MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH = 350;
 export declare const TRANSITION_DURATION = 300;
 export declare const FLYOUT_DELAY = 200;
 export declare const LEFT_SIDEBAR_EXPANDED_WIDTH = "expandedLeftSidebarWidth";

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

@@ -20,6 +20,4 @@ export type ResizeControlProps = {
     onResizeEnd?: (leftSidebarState: LeftSidebarState) => void;
     onFlyoutCollapse?: () => void;
     onFlyoutExpand?: () => void;
-    leftSidebarState: LeftSidebarState;
-    setLeftSidebarState: (leftSidebarState: LeftSidebarState) => void;
 };

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

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

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

@@ -5,6 +5,12 @@ import { LeftSidebarProps } from '../../common/types';
  *
  * Provides a slot for a left sidebar within the PageLayout.
  *
+ * [Behind a feature-flag 'platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g']:
+ * On smaller viewports, the left sidebar can no longer be expanded.  Instead, expanding it will
+ * put it into our "flyout mode" to lay overtop (which in desktop is explicitly a hover state).
+ * This ensures the contents behind do not reflow oddly and allows for a better experience
+ * resizing between mobile and desktop.
+ *
  * - [Examples](https://atlassian.design/components/page-layout/examples)
  * - [Code](https://atlassian.design/components/page-layout/code)
  */

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

@@ -2,6 +2,7 @@
 interface SlotDimensionsProps {
     variableName: string;
     value?: number;
+    mobileValue?: number;
 }
-declare const _default: ({ variableName, value }: SlotDimensionsProps) => JSX.Element;
+declare const _default: ({ variableName, value, mobileValue }: SlotDimensionsProps) => JSX.Element;
 export default _default;

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

@@ -12,6 +12,11 @@ export type SidebarResizeContextValue = {
     isLeftSidebarCollapsed: boolean;
     expandLeftSidebar: () => void;
     collapseLeftSidebar: (event?: MouseEvent | KeyboardEvent, collapseWithoutTransition?: boolean) => void;
+    /**
+     * Conditionally expands or collapses the left sidebar based on the current state.
+     * This is aware of our flyout mode in mobile as well.
+     */
+    toggleLeftSidebar: (event?: MouseEvent | KeyboardEvent, collapseWithoutTransition?: boolean) => void;
     leftSidebarState: LeftSidebarState;
     setLeftSidebarState: (value: LeftSidebarState | ((prevState: LeftSidebarState) => LeftSidebarState)) => void;
 };
@@ -20,6 +25,11 @@ export declare const usePageLayoutResize: () => {
     isLeftSidebarCollapsed: boolean;
     expandLeftSidebar: () => void;
     collapseLeftSidebar: (event?: MouseEvent | KeyboardEvent, collapseWithoutTransition?: boolean) => void;
+    /**
+     * Conditionally expands or collapses the left sidebar based on the current state.
+     * This is aware of our flyout mode in mobile as well.
+     */
+    toggleLeftSidebar: (event?: MouseEvent | KeyboardEvent, collapseWithoutTransition?: boolean) => void;
     leftSidebarState: LeftSidebarState;
 };
 /**

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

@@ -21,9 +21,11 @@ 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 MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH = 16;
 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 MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH = 350;
 export declare const TRANSITION_DURATION = 300;
 export declare const FLYOUT_DELAY = 200;
 export declare const LEFT_SIDEBAR_EXPANDED_WIDTH = "expandedLeftSidebarWidth";

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

@@ -20,6 +20,4 @@ export type ResizeControlProps = {
     onResizeEnd?: (leftSidebarState: LeftSidebarState) => void;
     onFlyoutCollapse?: () => void;
     onFlyoutExpand?: () => void;
-    leftSidebarState: LeftSidebarState;
-    setLeftSidebarState: (leftSidebarState: LeftSidebarState) => void;
 };

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

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

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

@@ -5,6 +5,12 @@ import { LeftSidebarProps } from '../../common/types';
  *
  * Provides a slot for a left sidebar within the PageLayout.
  *
+ * [Behind a feature-flag 'platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g']:
+ * On smaller viewports, the left sidebar can no longer be expanded.  Instead, expanding it will
+ * put it into our "flyout mode" to lay overtop (which in desktop is explicitly a hover state).
+ * This ensures the contents behind do not reflow oddly and allows for a better experience
+ * resizing between mobile and desktop.
+ *
  * - [Examples](https://atlassian.design/components/page-layout/examples)
  * - [Code](https://atlassian.design/components/page-layout/code)
  */

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

@@ -2,6 +2,7 @@
 interface SlotDimensionsProps {
     variableName: string;
     value?: number;
+    mobileValue?: number;
 }
-declare const _default: ({ variableName, value }: SlotDimensionsProps) => JSX.Element;
+declare const _default: ({ variableName, value, mobileValue }: SlotDimensionsProps) => JSX.Element;
 export default _default;

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

@@ -12,6 +12,11 @@ export type SidebarResizeContextValue = {
     isLeftSidebarCollapsed: boolean;
     expandLeftSidebar: () => void;
     collapseLeftSidebar: (event?: MouseEvent | KeyboardEvent, collapseWithoutTransition?: boolean) => void;
+    /**
+     * Conditionally expands or collapses the left sidebar based on the current state.
+     * This is aware of our flyout mode in mobile as well.
+     */
+    toggleLeftSidebar: (event?: MouseEvent | KeyboardEvent, collapseWithoutTransition?: boolean) => void;
     leftSidebarState: LeftSidebarState;
     setLeftSidebarState: (value: LeftSidebarState | ((prevState: LeftSidebarState) => LeftSidebarState)) => void;
 };
@@ -20,6 +25,11 @@ export declare const usePageLayoutResize: () => {
     isLeftSidebarCollapsed: boolean;
     expandLeftSidebar: () => void;
     collapseLeftSidebar: (event?: MouseEvent | KeyboardEvent, collapseWithoutTransition?: boolean) => void;
+    /**
+     * Conditionally expands or collapses the left sidebar based on the current state.
+     * This is aware of our flyout mode in mobile as well.
+     */
+    toggleLeftSidebar: (event?: MouseEvent | KeyboardEvent, collapseWithoutTransition?: boolean) => void;
     leftSidebarState: LeftSidebarState;
 };
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/page-layout",
-  "version": "1.6.5",
+  "version": "1.7.0",
   "description": "A collection of components which let you compose an application's page layout.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -25,7 +25,7 @@
   "atlassian": {
     "team": "Design System Team",
     "deprecatedAutoEntryPoints": true,
-    "releaseModel": "scheduled",
+    "releaseModel": "continuous",
     "website": {
       "name": "Page layout",
       "category": "Components"
@@ -36,8 +36,10 @@
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/motion": "^1.4.0",
+    "@atlaskit/platform-feature-flags": "^0.2.0",
+    "@atlaskit/primitives": "^0.12.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.5.0",
+    "@atlaskit/tokens": "^1.6.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
@@ -58,8 +60,7 @@
     "@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/popup": "^1.7.0",
     "@atlaskit/section-message": "^6.4.0",
     "@atlaskit/side-navigation": "^1.8.0",
     "@atlaskit/ssr": "*",
@@ -108,5 +109,10 @@
       ]
     }
   },
-  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
+  "platform-feature-flags": {
+    "platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g": {
+      "type": "boolean"
+    }
+  }
 }

package/report.api.md

@@ -116,7 +116,6 @@ export const PageLayout: ({
 
 // @public (undocumented)
 interface PageLayoutProps extends SidebarResizeControllerProps {
-  children: ReactNode;
   // (undocumented)
   skipLinksLabel?: string;
   testId?: string;
@@ -143,6 +142,7 @@ export const RightSidebar: (props: SlotWidthProps) => jsx.JSX.Element;
 
 // @public (undocumented)
 type SidebarResizeControllerProps = {
+  children: ReactNode;
   onLeftSidebarExpand?: (leftSidebarState: LeftSidebarState) => void;
   onLeftSidebarCollapse?: (leftSidebarState: LeftSidebarState) => void;
 };
@@ -198,11 +198,12 @@ export const usePageLayoutResize: () => {
   isLeftSidebarCollapsed: boolean;
   expandLeftSidebar: () => void;
   collapseLeftSidebar: (
-    event?:
-      | KeyboardEvent_2<Element>
-      | MouseEvent_2<Element, globalThis.MouseEvent>
-      | undefined,
-    collapseWithoutTransition?: boolean | undefined,
+    event?: KeyboardEvent_2 | MouseEvent_2,
+    collapseWithoutTransition?: boolean,
+  ) => void;
+  toggleLeftSidebar: (
+    event?: KeyboardEvent_2 | MouseEvent_2,
+    collapseWithoutTransition?: boolean,
   ) => void;
   leftSidebarState: LeftSidebarState;
 };

package/tmp/api-report-tmp.d.ts

@@ -0,0 +1,174 @@
+## 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
+
+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;
+    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)
+
+```