@atlaskit/page-layout 1.3.7 → 1.3.9

package/dist/esm/components/slots/internal/left-sidebar-inner.js

@@ -1,17 +1,18 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import { easeOut, prefersReducedMotion } from '@atlaskit/motion';
 import { BANNER_HEIGHT, LEFT_PANEL_WIDTH, LEFT_SIDEBAR_FLYOUT_WIDTH, LEFT_SIDEBAR_WIDTH, TOP_NAVIGATION_HEIGHT, TRANSITION_DURATION } from '../../../common/constants';
 import { useIsSidebarDragging } from '../../../common/hooks';
 // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 var prefersReducedMotionStyles = css(prefersReducedMotion());
+
 /**
  * This inner wrapper is required to allow the sidebar to be `position: fixed`.
  *
  * If we were to apply `position: fixed` to the outer wrapper, it will be popped
  * out of its flex container and Main would stretch to occupy all the space.
  */
-
 var fixedInnerStyles = css({
   width: "".concat(LEFT_SIDEBAR_WIDTH),
   position: 'fixed',
@@ -23,12 +24,12 @@ var fixedInnerStyles = css({
 var fixedInnerFlyoutStyles = css({
   width: LEFT_SIDEBAR_FLYOUT_WIDTH
 });
+
 /**
  * Static in the sense of `position: static`.
  *
  * It will expand the page height to fit its content.
  */
-
 var staticInnerStyles = css({
   height: '100%'
 });
@@ -37,18 +38,17 @@ var draggingStyles = css({
   // Make sure drag to resize does not animate as the user drags
   transition: 'none'
 });
-
 var LeftSidebarInner = function LeftSidebarInner(_ref) {
   var children = _ref.children,
-      _ref$isFixed = _ref.isFixed,
-      isFixed = _ref$isFixed === void 0 ? false : _ref$isFixed,
-      _ref$isFlyoutOpen = _ref.isFlyoutOpen,
-      isFlyoutOpen = _ref$isFlyoutOpen === void 0 ? false : _ref$isFlyoutOpen;
+    _ref$isFixed = _ref.isFixed,
+    isFixed = _ref$isFixed === void 0 ? false : _ref$isFixed,
+    _ref$isFlyoutOpen = _ref.isFlyoutOpen,
+    isFlyoutOpen = _ref$isFlyoutOpen === void 0 ? false : _ref$isFlyoutOpen;
   var isDragging = useIsSidebarDragging();
   return jsx("div", {
     css: [!isFixed && staticInnerStyles, isFixed && fixedInnerStyles, isFixed && isFlyoutOpen && fixedInnerFlyoutStyles, isDragging && draggingStyles, prefersReducedMotionStyles]
   }, children);
-}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
-
+};
 
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default LeftSidebarInner;

package/dist/esm/components/slots/internal/left-sidebar-outer.js

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -25,12 +24,12 @@ var draggingStyles = css({
   // Make sure drag to resize does not animate as the user drags
   transition: 'none'
 });
+
 /**
  * In fixed mode this element's child is taken out of the document flow.
  * It doesn't take up the width as expected,
  * so the pseudo element forces it to take up the necessary width.
  */
-
 var fixedStyles = css({
   '::after': {
     display: 'inline-block',
@@ -45,17 +44,16 @@ var flyoutFixedStyles = css({
   width: COLLAPSED_LEFT_SIDEBAR_WIDTH
 });
 var selector = getPageLayoutSlotSelector('left-sidebar');
-
 var LeftSidebarOuter = function LeftSidebarOuter(_ref, ref) {
   var children = _ref.children,
-      _ref$isFixed = _ref.isFixed,
-      isFixed = _ref$isFixed === void 0 ? false : _ref$isFixed,
-      _ref$isFlyoutOpen = _ref.isFlyoutOpen,
-      isFlyoutOpen = _ref$isFlyoutOpen === void 0 ? false : _ref$isFlyoutOpen,
-      testId = _ref.testId,
-      onMouseLeave = _ref.onMouseLeave,
-      onMouseOver = _ref.onMouseOver,
-      id = _ref.id;
+    _ref$isFixed = _ref.isFixed,
+    isFixed = _ref$isFixed === void 0 ? false : _ref$isFixed,
+    _ref$isFlyoutOpen = _ref.isFlyoutOpen,
+    isFlyoutOpen = _ref$isFlyoutOpen === void 0 ? false : _ref$isFlyoutOpen,
+    testId = _ref.testId,
+    onMouseLeave = _ref.onMouseLeave,
+    onMouseOver = _ref.onMouseOver,
+    id = _ref.id;
   var isDragging = useIsSidebarDragging();
   return jsx(SlotFocusRing, {
     isSidebar: true
@@ -78,5 +76,4 @@ var LeftSidebarOuter = function LeftSidebarOuter(_ref, ref) {
     );
   });
 };
-
 export default /*#__PURE__*/forwardRef(LeftSidebarOuter);

package/dist/esm/components/slots/internal/resizable-children-wrapper.js

@@ -1,17 +1,18 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import { prefersReducedMotion } from '@atlaskit/motion';
 import { TRANSITION_DURATION } from '../../../common/constants';
 import { useIsSidebarCollapsing } from '../../../common/hooks';
 // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 var prefersReducedMotionStyles = css(prefersReducedMotion());
+
 /**
  * The transition duration is intentionally set to 0ms.
  *
  * A transition is being used here to delay the setting of
  * opacity and visibility so that it syncs collapsing sidebar.
  */
-
 var hideLeftSidebarContentsStyles = css({
   opacity: 0,
   transition: "opacity 0ms linear, visibility 0ms linear",
@@ -29,15 +30,14 @@ var fixedChildrenWrapperStyles = css({
   minWidth: 240,
   height: '100%'
 });
-
 var ResizableChildrenWrapper = function ResizableChildrenWrapper(_ref) {
   var children = _ref.children,
-      _ref$isLeftSidebarCol = _ref.isLeftSidebarCollapsed,
-      isLeftSidebarCollapsed = _ref$isLeftSidebarCol === void 0 ? false : _ref$isLeftSidebarCol,
-      _ref$hasCollapsedStat = _ref.hasCollapsedState,
-      hasCollapsedState = _ref$hasCollapsedStat === void 0 ? false : _ref$hasCollapsedStat,
-      _ref$isFlyoutOpen = _ref.isFlyoutOpen,
-      isFlyoutOpen = _ref$isFlyoutOpen === void 0 ? false : _ref$isFlyoutOpen;
+    _ref$isLeftSidebarCol = _ref.isLeftSidebarCollapsed,
+    isLeftSidebarCollapsed = _ref$isLeftSidebarCol === void 0 ? false : _ref$isLeftSidebarCol,
+    _ref$hasCollapsedStat = _ref.hasCollapsedState,
+    hasCollapsedState = _ref$hasCollapsedStat === void 0 ? false : _ref$hasCollapsedStat,
+    _ref$isFlyoutOpen = _ref.isFlyoutOpen,
+    isFlyoutOpen = _ref$isFlyoutOpen === void 0 ? false : _ref$isFlyoutOpen;
   var isCollapsing = useIsSidebarCollapsing();
   var isCollapsed = isLeftSidebarCollapsed || hasCollapsedState;
   var isHidden = isCollapsing || isCollapsed && !isFlyoutOpen;
@@ -46,7 +46,7 @@ var ResizableChildrenWrapper = function ResizableChildrenWrapper(_ref) {
   }, jsx("div", {
     css: fixedChildrenWrapperStyles
   }, children));
-}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
-
+};
 
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default ResizableChildrenWrapper;

package/dist/esm/components/slots/internal/slot-focus-ring.js

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+
 import { ClassNames, css, jsx } from '@emotion/react';
 import { B100 } from '@atlaskit/theme/colors';
 var focusStyles = css({
@@ -11,11 +12,11 @@ var focusStyles = css({
     }
   }
 });
+
 /**
  * Sidebars have an outer and inner component,
  * so the nested selector needs to target an extra level deeper.
  */
-
 var sidebarFocusStyles = css({
   ':focus': {
     outline: 'none',
@@ -26,6 +27,7 @@ var sidebarFocusStyles = css({
     }
   }
 });
+
 /**
  * We don't use `@atlaskit/focus-ring` here,
  * because we need inset focus styles and:
@@ -35,11 +37,10 @@ var sidebarFocusStyles = css({
  * 2. We cannot wrap `children` in `FocusRing`,
  *    because there's no guarantee the passed child takes `className`.
  */
-
 var SlotFocusRing = function SlotFocusRing(_ref) {
   var children = _ref.children,
-      _ref$isSidebar = _ref.isSidebar,
-      isSidebar = _ref$isSidebar === void 0 ? false : _ref$isSidebar;
+    _ref$isSidebar = _ref.isSidebar,
+    isSidebar = _ref$isSidebar === void 0 ? false : _ref$isSidebar;
   return jsx(ClassNames, null, function (_ref2) {
     var css = _ref2.css;
     return children({
@@ -47,5 +48,4 @@ var SlotFocusRing = function SlotFocusRing(_ref) {
     });
   });
 };
-
 export default SlotFocusRing;

package/dist/esm/components/slots/left-panel.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /** @jsx jsx */
 import { useEffect } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -19,6 +18,7 @@ var leftPanelFixedStyles = css({
   bottom: 0,
   left: 0
 });
+
 /**
  * __Left panel__
  *
@@ -27,16 +27,15 @@ var leftPanelFixedStyles = css({
  * - [Examples](https://atlassian.design/components/page-layout/examples)
  * - [Code](https://atlassian.design/components/page-layout/code)
  */
-
 var LeftPanel = function LeftPanel(props) {
   var children = props.children,
-      isFixed = props.isFixed,
-      _props$width = props.width,
-      width = _props$width === void 0 ? DEFAULT_LEFT_PANEL_WIDTH : _props$width,
-      shouldPersistWidth = props.shouldPersistWidth,
-      testId = props.testId,
-      id = props.id,
-      skipLinkTitle = props.skipLinkTitle;
+    isFixed = props.isFixed,
+    _props$width = props.width,
+    width = _props$width === void 0 ? DEFAULT_LEFT_PANEL_WIDTH : _props$width,
+    shouldPersistWidth = props.shouldPersistWidth,
+    testId = props.testId,
+    id = props.id,
+    skipLinkTitle = props.skipLinkTitle;
   var leftPanelWidth = resolveDimension(VAR_LEFT_PANEL_WIDTH, width, shouldPersistWidth);
   useEffect(function () {
     publishGridState(_defineProperty({}, VAR_LEFT_PANEL_WIDTH, leftPanelWidth));
@@ -58,5 +57,4 @@ var LeftPanel = function LeftPanel(props) {
     }), children);
   });
 };
-
 export default LeftPanel;

package/dist/esm/components/slots/left-sidebar-without-resize.js

@@ -1,5 +1,4 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /** @jsx jsx */
 import { useEffect } from 'react';
 import { jsx } from '@emotion/react';
@@ -9,6 +8,7 @@ import { publishGridState, useSkipLink } from '../../controllers';
 import LeftSidebarInner from './internal/left-sidebar-inner';
 import LeftSidebarOuter from './internal/left-sidebar-outer';
 import SlotDimensions from './slot-dimensions';
+
 /**
  * __Left sidebar without resize__
  *
@@ -17,15 +17,14 @@ import SlotDimensions from './slot-dimensions';
  * - [Examples](https://atlassian.design/components/page-layout/examples)
  * - [Code](https://atlassian.design/components/page-layout/code)
  */
-
 var LeftSidebarWithoutResize = function LeftSidebarWithoutResize(props) {
   var children = props.children,
-      id = props.id,
-      width = props.width,
-      isFixed = props.isFixed,
-      shouldPersistWidth = props.shouldPersistWidth,
-      testId = props.testId,
-      skipLinkTitle = props.skipLinkTitle;
+    id = props.id,
+    width = props.width,
+    isFixed = props.isFixed,
+    shouldPersistWidth = props.shouldPersistWidth,
+    testId = props.testId,
+    skipLinkTitle = props.skipLinkTitle;
   var leftSidebarWidth = resolveDimension(VAR_LEFT_SIDEBAR_WIDTH, width, shouldPersistWidth);
   useEffect(function () {
     publishGridState(_defineProperty({}, VAR_LEFT_SIDEBAR_WIDTH, leftSidebarWidth));
@@ -45,5 +44,4 @@ var LeftSidebarWithoutResize = function LeftSidebarWithoutResize(props) {
     isFixed: isFixed
   }, children));
 };
-
 export default LeftSidebarWithoutResize;

package/dist/esm/components/slots/left-sidebar.js

@@ -1,11 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 /* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
-
 /** @jsx jsx */
 import { useContext, useEffect, useRef } from 'react';
 import { jsx } from '@emotion/react';
@@ -17,6 +13,7 @@ import LeftSidebarInner from './internal/left-sidebar-inner';
 import LeftSidebarOuter from './internal/left-sidebar-outer';
 import ResizableChildrenWrapper from './internal/resizable-children-wrapper';
 import SlotDimensions from './slot-dimensions';
+
 /**
  * __Left sidebar__
  *
@@ -25,45 +22,44 @@ import SlotDimensions from './slot-dimensions';
  * - [Examples](https://atlassian.design/components/page-layout/examples)
  * - [Code](https://atlassian.design/components/page-layout/code)
  */
-
 var LeftSidebar = function LeftSidebar(props) {
   var children = props.children,
-      width = props.width,
-      _props$isFixed = props.isFixed,
-      isFixed = _props$isFixed === void 0 ? true : _props$isFixed,
-      resizeButtonLabel = props.resizeButtonLabel,
-      resizeGrabAreaLabel = props.resizeGrabAreaLabel,
-      overrides = props.overrides,
-      onExpand = props.onExpand,
-      onCollapse = props.onCollapse,
-      onResizeStart = props.onResizeStart,
-      onResizeEnd = props.onResizeEnd,
-      onFlyoutExpand = props.onFlyoutExpand,
-      onFlyoutCollapse = props.onFlyoutCollapse,
-      testId = props.testId,
-      id = props.id,
-      skipLinkTitle = props.skipLinkTitle,
-      collapsedState = props.collapsedState;
+    width = props.width,
+    _props$isFixed = props.isFixed,
+    isFixed = _props$isFixed === void 0 ? true : _props$isFixed,
+    resizeButtonLabel = props.resizeButtonLabel,
+    resizeGrabAreaLabel = props.resizeGrabAreaLabel,
+    overrides = props.overrides,
+    onExpand = props.onExpand,
+    onCollapse = props.onCollapse,
+    onResizeStart = props.onResizeStart,
+    onResizeEnd = props.onResizeEnd,
+    onFlyoutExpand = props.onFlyoutExpand,
+    onFlyoutCollapse = props.onFlyoutCollapse,
+    testId = props.testId,
+    id = props.id,
+    skipLinkTitle = props.skipLinkTitle,
+    collapsedState = props.collapsedState;
   var flyoutTimerRef = useRef();
   var mouseOverEventRef = useRef();
   var leftSideBarRef = useRef(null);
-
   var _useContext = useContext(SidebarResizeContext),
-      leftSidebarState = _useContext.leftSidebarState,
-      setLeftSidebarState = _useContext.setLeftSidebarState;
-
+    leftSidebarState = _useContext.leftSidebarState,
+    setLeftSidebarState = _useContext.setLeftSidebarState;
   var isFlyoutOpen = leftSidebarState.isFlyoutOpen,
-      isResizing = leftSidebarState.isResizing,
-      flyoutLockCount = leftSidebarState.flyoutLockCount,
-      isLeftSidebarCollapsed = leftSidebarState.isLeftSidebarCollapsed,
-      leftSidebarWidth = leftSidebarState.leftSidebarWidth,
-      lastLeftSidebarWidth = leftSidebarState.lastLeftSidebarWidth;
+    isResizing = leftSidebarState.isResizing,
+    flyoutLockCount = leftSidebarState.flyoutLockCount,
+    isLeftSidebarCollapsed = leftSidebarState.isLeftSidebarCollapsed,
+    leftSidebarWidth = leftSidebarState.leftSidebarWidth,
+    lastLeftSidebarWidth = leftSidebarState.lastLeftSidebarWidth;
   var isLocked = flyoutLockCount > 0;
   var isLockedRef = useRef(isLocked);
   var mouseXRef = useRef(0);
   var handlerRef = useRef(null);
   useEffect(function () {
-    isLockedRef.current = isLocked; // I tried a one-time `mousemove` handler that gets attached
+    isLockedRef.current = isLocked;
+
+    // I tried a one-time `mousemove` handler that gets attached
     // when the lock releases. This is not robust because
     // the mouse can stay still after release (e.g. using keyboard)
     // and the sidebar will erroneously stay open.
@@ -74,52 +70,43 @@ var LeftSidebar = function LeftSidebar(props) {
       handlerRef.current = function (event) {
         mouseXRef.current = event.clientX;
       };
-
       document.addEventListener('mousemove', handlerRef.current);
     }
-
     if (!isLocked && handlerRef.current) {
       if (mouseXRef.current >= lastLeftSidebarWidth) {
         setLeftSidebarState(_objectSpread(_objectSpread({}, leftSidebarState), {}, {
           isFlyoutOpen: false
         }));
       }
-
       document.removeEventListener('mousemove', handlerRef.current);
       handlerRef.current = null;
     }
-
     return function () {
       if (handlerRef.current) {
         document.removeEventListener('mousemove', handlerRef.current);
       }
     };
   }, [isLocked, lastLeftSidebarWidth, leftSidebarState, setLeftSidebarState]);
-
   var _width = Math.max(width || 0, DEFAULT_LEFT_SIDEBAR_WIDTH);
-
   var collapsedStateOverrideOpen = collapsedState === 'expanded';
   var leftSidebarWidthOnMount;
-
   if (collapsedStateOverrideOpen) {
     leftSidebarWidthOnMount = resolveDimension(VAR_LEFT_SIDEBAR_FLYOUT, _width, !width);
   } else if (isLeftSidebarCollapsed || collapsedState === 'collapsed') {
     leftSidebarWidthOnMount = COLLAPSED_LEFT_SIDEBAR_WIDTH;
   } else {
     leftSidebarWidthOnMount = resolveDimension(VAR_LEFT_SIDEBAR_WIDTH, _width, !width || !collapsedStateOverrideOpen && getGridStateFromStorage('isLeftSidebarCollapsed'));
-  } // Update state from cache on mount
-
+  }
 
+  // Update state from cache on mount
   useEffect(function () {
     var cachedCollapsedState = !collapsedStateOverrideOpen && (collapsedState === 'collapsed' || getGridStateFromStorage('isLeftSidebarCollapsed') || false);
     var cachedGridState = getGridStateFromStorage('gridState') || {};
     var leftSidebarWidth = !width && cachedGridState[VAR_LEFT_SIDEBAR_FLYOUT] ? Math.max(cachedGridState[VAR_LEFT_SIDEBAR_FLYOUT], DEFAULT_LEFT_SIDEBAR_WIDTH) : _width;
     var lastLeftSidebarWidth = !width && cachedGridState[VAR_LEFT_SIDEBAR_FLYOUT] ? Math.max(cachedGridState[VAR_LEFT_SIDEBAR_FLYOUT], DEFAULT_LEFT_SIDEBAR_WIDTH) : _width;
-
     if (cachedCollapsedState) {
       leftSidebarWidth = COLLAPSED_LEFT_SIDEBAR_WIDTH;
     }
-
     setLeftSidebarState({
       isFlyoutOpen: false,
       isResizing: isResizing,
@@ -128,46 +115,40 @@ var LeftSidebar = function LeftSidebar(props) {
       lastLeftSidebarWidth: lastLeftSidebarWidth,
       flyoutLockCount: 0,
       isFixed: isFixed
-    }); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []); // Every time other than mount,
-  // update the local storage and css variables.
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
+  // Every time other than mount,
+  // update the local storage and css variables.
   var notFirstRun = useRef(false);
   useEffect(function () {
     if (notFirstRun.current) {
       var _publishGridState;
-
       publishGridState((_publishGridState = {}, _defineProperty(_publishGridState, VAR_LEFT_SIDEBAR_WIDTH, leftSidebarWidth || leftSidebarWidthOnMount), _defineProperty(_publishGridState, VAR_LEFT_SIDEBAR_FLYOUT, lastLeftSidebarWidth), _publishGridState));
       mergeGridStateIntoStorage('isLeftSidebarCollapsed', isLeftSidebarCollapsed);
     }
-
     if (!notFirstRun.current) {
       notFirstRun.current = true;
     }
-
     return function () {
       removeMouseOverListener();
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isLeftSidebarCollapsed, leftSidebarWidth, id]);
-
   var onMouseOver = function onMouseOver(event) {
     var isMouseOnResizeButton = event.target.matches("[".concat(RESIZE_BUTTON_SELECTOR, "]")) || event.target.matches("[".concat(RESIZE_BUTTON_SELECTOR, "] *"));
-
     if (isFlyoutOpen || isMouseOnResizeButton || !isLeftSidebarCollapsed) {
       return;
     }
-
     event.persist();
     flyoutTimerRef.current && clearTimeout(flyoutTimerRef.current);
-
     if (!mouseOverEventRef.current) {
       mouseOverEventRef.current = function (event) {
         var leftSidebar = leftSideBarRef.current;
-
         if (leftSidebar === null || isLockedRef.current) {
           return;
         }
-
         if (!leftSidebar.contains(event.target)) {
           flyoutTimerRef.current && clearTimeout(flyoutTimerRef.current);
           onFlyoutCollapse && onFlyoutCollapse();
@@ -180,7 +161,6 @@ var LeftSidebar = function LeftSidebar(props) {
         }
       };
     }
-
     document.addEventListener('mouseover', mouseOverEventRef.current, {
       capture: true,
       passive: true
@@ -194,23 +174,18 @@ var LeftSidebar = function LeftSidebar(props) {
       onFlyoutExpand && onFlyoutExpand();
     }, FLYOUT_DELAY);
   };
-
   var removeMouseOverListener = function removeMouseOverListener() {
     mouseOverEventRef.current && document.removeEventListener('mouseover', mouseOverEventRef.current, {
       capture: true,
       passive: true
     });
   };
-
   useSkipLink(id, skipLinkTitle);
-
   var onMouseLeave = function onMouseLeave(event) {
     var isMouseOnResizeButton = event.target.matches("[".concat(RESIZE_BUTTON_SELECTOR, "]")) || event.target.matches("[".concat(RESIZE_BUTTON_SELECTOR, "] *"));
-
     if (isMouseOnResizeButton || !isLeftSidebarCollapsed || flyoutLockCount > 0) {
       return;
     }
-
     onFlyoutCollapse && onFlyoutCollapse();
     setTimeout(function () {
       setLeftSidebarState(function (current) {
@@ -220,8 +195,8 @@ var LeftSidebar = function LeftSidebar(props) {
       });
     }, FLYOUT_DELAY);
   };
-
-  return (// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+  return (
+    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
     jsx(LeftSidebarOuter, {
       ref: leftSideBarRef,
       testId: testId,
@@ -243,7 +218,8 @@ var LeftSidebar = function LeftSidebar(props) {
     }, children), jsx(ResizeControl, {
       testId: testId,
       resizeGrabAreaLabel: resizeGrabAreaLabel,
-      resizeButtonLabel: resizeButtonLabel // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+      resizeButtonLabel: resizeButtonLabel
+      // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
       ,
       overrides: overrides,
       onCollapse: onCollapse,
@@ -255,5 +231,4 @@ var LeftSidebar = function LeftSidebar(props) {
     })))
   );
 };
-
 export default LeftSidebar;

package/dist/esm/components/slots/main.js

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import { useContext } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -9,8 +8,9 @@ import { COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH, TRANSI
 import { useIsSidebarDragging } from '../../common/hooks';
 import { getPageLayoutSlotSelector } from '../../common/utils';
 import { SidebarResizeContext, useSkipLink } from '../../controllers';
-import SlotFocusRing from './internal/slot-focus-ring'; // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+import SlotFocusRing from './internal/slot-focus-ring';
 
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 var prefersReducedMotionStyles = css(prefersReducedMotion());
 var mainStyles = css({
   minWidth: 0,
@@ -25,16 +25,17 @@ var draggingStyles = css({
   // Make sure drag to resize remains snappy.
   transition: 'none'
 });
+
 /**
  * Adds a negative left margin to main,
  * which transitions at the same speed as the left sidebar's width increase.
  * This give an illusion that the flyout is appearing on top of the main content,
  * while main remains in place.
  */
-
 var flyoutStyles = css({
   marginLeft: "calc(-1 * var(--".concat(VAR_LEFT_SIDEBAR_FLYOUT, ", ").concat(DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH, "px) + ").concat(COLLAPSED_LEFT_SIDEBAR_WIDTH, "px)")
 });
+
 /**
  * __Main__
  *
@@ -43,20 +44,17 @@ var flyoutStyles = css({
  * - [Examples](https://atlassian.design/components/page-layout/examples)
  * - [Code](https://atlassian.design/components/page-layout/code)
  */
-
 var Main = function Main(props) {
   var children = props.children,
-      testId = props.testId,
-      id = props.id,
-      skipLinkTitle = props.skipLinkTitle;
+    testId = props.testId,
+    id = props.id,
+    skipLinkTitle = props.skipLinkTitle;
   useSkipLink(id, skipLinkTitle);
   var isDragging = useIsSidebarDragging();
-
   var _useContext = useContext(SidebarResizeContext),
-      _useContext$leftSideb = _useContext.leftSidebarState,
-      isFlyoutOpen = _useContext$leftSideb.isFlyoutOpen,
-      isFixed = _useContext$leftSideb.isFixed;
-
+    _useContext$leftSideb = _useContext.leftSidebarState,
+    isFlyoutOpen = _useContext$leftSideb.isFlyoutOpen,
+    isFixed = _useContext$leftSideb.isFixed;
   return jsx(SlotFocusRing, null, function (_ref) {
     var className = _ref.className;
     return jsx("div", _extends({
@@ -67,5 +65,4 @@ var Main = function Main(props) {
     }, getPageLayoutSlotSelector('main')), children);
   });
 };
-
 export default Main;

package/dist/esm/components/slots/page-layout.js

@@ -1,15 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /** @jsx jsx */
 import { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
 import { BANNER, BANNER_HEIGHT, CONTENT, DEFAULT_I18N_PROPS_SKIP_LINKS, LEFT_PANEL, LEFT_PANEL_WIDTH, PAGE_LAYOUT_CONTAINER_SELECTOR, RIGHT_PANEL, RIGHT_PANEL_WIDTH, TOP_NAVIGATION, TOP_NAVIGATION_HEIGHT } from '../../common/constants';
 import { SidebarResizeController, SkipLinksController } from '../../controllers';
 import { SkipLinkWrapper } from '../skip-links';
-
 var pageLayoutSelector = _defineProperty({}, PAGE_LAYOUT_CONTAINER_SELECTOR, true);
-
 var gridTemplateAreas = "\n  \"".concat(LEFT_PANEL, " ").concat(BANNER, " ").concat(RIGHT_PANEL, "\"\n  \"").concat(LEFT_PANEL, " ").concat(TOP_NAVIGATION, " ").concat(RIGHT_PANEL, "\"\n  \"").concat(LEFT_PANEL, " ").concat(CONTENT, " ").concat(RIGHT_PANEL, "\"\n ");
 var gridStyles = css({
   display: 'grid',
@@ -19,6 +16,7 @@ var gridStyles = css({
   gridTemplateRows: "".concat(BANNER_HEIGHT, " ").concat(TOP_NAVIGATION_HEIGHT, " auto"),
   outline: 'none'
 });
+
 /**
  * __Page layout__
  *
@@ -27,14 +25,13 @@ var gridStyles = css({
  * - [Examples](https://atlassian.design/components/page-layout/examples)
  * - [Code](https://atlassian.design/components/page-layout/code)
  */
-
 var PageLayout = function PageLayout(_ref) {
   var _ref$skipLinksLabel = _ref.skipLinksLabel,
-      skipLinksLabel = _ref$skipLinksLabel === void 0 ? DEFAULT_I18N_PROPS_SKIP_LINKS : _ref$skipLinksLabel,
-      children = _ref.children,
-      testId = _ref.testId,
-      onLeftSidebarExpand = _ref.onLeftSidebarExpand,
-      onLeftSidebarCollapse = _ref.onLeftSidebarCollapse;
+    skipLinksLabel = _ref$skipLinksLabel === void 0 ? DEFAULT_I18N_PROPS_SKIP_LINKS : _ref$skipLinksLabel,
+    children = _ref.children,
+    testId = _ref.testId,
+    onLeftSidebarExpand = _ref.onLeftSidebarExpand,
+    onLeftSidebarCollapse = _ref.onLeftSidebarCollapse;
   return jsx(Fragment, null, jsx(SkipLinksController, null, jsx(SkipLinkWrapper, {
     skipLinksLabel: skipLinksLabel
   }), jsx("div", _extends({}, pageLayoutSelector, {
@@ -46,5 +43,4 @@ var PageLayout = function PageLayout(_ref) {
     onLeftSidebarExpand: onLeftSidebarExpand
   }, children))));
 };
-
 export default PageLayout;