@atlaskit/page-layout 1.6.4 → 1.7.0

package/dist/esm/components/resize-control/resize-button.js

@@ -8,6 +8,8 @@ import { css, jsx } from '@emotion/react';
 import ChevronRight from '@atlaskit/icon/glyph/chevron-right';
 import { easeOut } from '@atlaskit/motion/curves';
 import { mediumDurationMs, smallDurationMs } from '@atlaskit/motion/durations';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { UNSAFE_media as media } from '@atlaskit/primitives/responsive';
 import { B100, B200, N0, N200, N30A } from '@atlaskit/theme/colors';
 import { RESIZE_BUTTON_SELECTOR } from '../../common/constants';
 var increaseHitAreaStyles = css({
@@ -17,10 +19,15 @@ var increaseHitAreaStyles = css({
   bottom: "calc(-1 * ".concat("var(--ds-space-100, 8px)", ")"),
   left: "calc(-1 * ".concat("var(--ds-space-100, 8px)", ")")
 });
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
+var mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, media.below.md, {
+  opacity: 1
+})) : undefined;
 var resizeIconButtonStyles = css({
   width: 24,
   height: 24,
-  padding: 0,
+  padding: "var(--ds-space-0, 0px)",
   position: 'absolute',
   top: "var(--ds-space-400, 32px)",
   left: 0,
@@ -73,10 +80,9 @@ var ResizeButton = function ResizeButton(_ref) {
     "aria-expanded": !isLeftSidebarCollapsed,
     "aria-label": label,
     type: "button",
-    css: [resizeIconButtonStyles, !isLeftSidebarCollapsed && resizeIconButtonExpandedStyles],
+    css: [resizeIconButtonStyles, mobileStyles, !isLeftSidebarCollapsed && resizeIconButtonExpandedStyles],
     "data-testid": testId
-    // Prevents focus staying attached to the button
-    // when pressed
+    // Prevents focus staying attached to the button when pressed
     ,
     onMouseDown: preventDefault
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props

package/dist/esm/components/skip-links/skip-link-components.js

@@ -10,7 +10,7 @@ import { easeOut, prefersReducedMotion } from '@atlaskit/motion';
 import { N30A, N60A } from '@atlaskit/theme/colors';
 import { DEFAULT_I18N_PROPS_SKIP_LINKS, PAGE_LAYOUT_CONTAINER_SELECTOR } from '../../common/constants';
 import { useSkipLinks } from '../../controllers';
-// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var prefersReducedMotionStyles = css(prefersReducedMotion());
 var skipLinkStyles = css({
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing

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

@@ -1,12 +1,34 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @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 { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { UNSAFE_media as media } from '@atlaskit/primitives/responsive';
+import { BANNER_HEIGHT, LEFT_PANEL_WIDTH, LEFT_SIDEBAR_FLYOUT_WIDTH, LEFT_SIDEBAR_WIDTH, MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH, MOBILE_COLLAPSED_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
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var prefersReducedMotionStyles = css(prefersReducedMotion());
 
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
+var mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, media.below.md, {
+  width: "".concat(MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH, "px"),
+  position: 'fixed',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  top: "calc(".concat(BANNER_HEIGHT, " + ").concat(TOP_NAVIGATION_HEIGHT, ")"),
+  bottom: 0,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  left: "".concat(LEFT_PANEL_WIDTH),
+  transition: "width ".concat(TRANSITION_DURATION, "ms ").concat(easeOut, " 0s")
+})) : undefined;
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
+var mobileInnerFlyoutStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, media.below.md, {
+  width: "min(90vw, ".concat(MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH, "px)"),
+  maxWidth: MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH,
+  transition: "width ".concat(TRANSITION_DURATION, "ms ").concat(easeOut, " 0s, box-shadow ").concat(TRANSITION_DURATION, "ms ").concat(easeOut, " 0s")
+})) : undefined;
+
 /**
  * This inner wrapper is required to allow the sidebar to be `position: fixed`.
  *
@@ -48,7 +70,11 @@ var LeftSidebarInner = function LeftSidebarInner(_ref) {
     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]
+    css: [
+    // mobile breakpoint styles
+    mobileStyles, isFlyoutOpen && mobileInnerFlyoutStyles,
+    // generic styles
+    !isFixed && staticInnerStyles, isFixed && fixedInnerStyles, isFixed && isFlyoutOpen && fixedInnerFlyoutStyles, isDragging && draggingStyles, prefersReducedMotionStyles]
   }, children);
 };
 

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

@@ -1,17 +1,39 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
-import { forwardRef } from 'react';
+import { forwardRef, useContext } from 'react';
 import { css, jsx } from '@emotion/react';
 import { easeOut, prefersReducedMotion } from '@atlaskit/motion';
-import { COLLAPSED_LEFT_SIDEBAR_WIDTH, LEFT_SIDEBAR_FLYOUT_WIDTH, LEFT_SIDEBAR_WIDTH, TRANSITION_DURATION } from '../../../common/constants';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { UNSAFE_media as media } from '@atlaskit/primitives/responsive';
+import { COLLAPSED_LEFT_SIDEBAR_WIDTH, LEFT_SIDEBAR_FLYOUT_WIDTH, LEFT_SIDEBAR_WIDTH, MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH, MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH, TRANSITION_DURATION } from '../../../common/constants';
 import { useIsSidebarDragging } from '../../../common/hooks';
 import { getPageLayoutSlotSelector } from '../../../common/utils';
+import { SidebarResizeContext } from '../../../controllers';
 import SlotFocusRing from './slot-focus-ring';
-// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var prefersReducedMotionStyles = css(prefersReducedMotion());
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
+var mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, media.below.md, {
+  width: MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH,
+  cursor: 'pointer',
+  opacity: 1,
+  transition: "width ".concat(TRANSITION_DURATION, "ms ").concat(easeOut, " 0s"),
+  '&::after': {
+    display: 'inline-block',
+    maxWidth: MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH,
+    content: "''"
+  }
+})) : undefined;
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
+var mobileFlyoutStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, media.below.md, {
+  cursor: 'revert'
+})) : undefined;
 var outerStyles = css({
   width: LEFT_SIDEBAR_WIDTH,
-  marginLeft: 0,
+  marginLeft: "var(--ds-space-0, 0px)",
   position: 'relative',
   zIndex: 1,
   transition: "width ".concat(TRANSITION_DURATION, "ms ").concat(easeOut, " 0s"),
@@ -48,30 +70,41 @@ 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,
+    onClick = _ref.onClick,
     id = _ref.id;
   var isDragging = useIsSidebarDragging();
+  var _useContext = useContext(SidebarResizeContext),
+    isFlyoutOpen = _useContext.leftSidebarState.isFlyoutOpen;
   return jsx(SlotFocusRing, {
     isSidebar: true
   }, function (_ref2) {
     var className = _ref2.className;
     return (
       /**
-       * The mouse handlers control flyout behavior, a mouse-only experience.
+       * On desktop, the `onMouseOver|onMouseLeave` handlers controls the temporary flyout behavior.
+       * This is an intentionally mouse-only experience, it may even be disruptive with keyboard navigation.
+       *
+       * On mobile, the `onClick` handler controls the toggled flyout behaviour.
+       * This is not intended to be how you use this with a keyboard, there is a ResizeButton for this intentionally instead.
        */
       // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
       jsx("div", _extends({
-        css: [outerStyles, isFixed && fixedStyles, isFlyoutOpen && flyoutStyles, isFlyoutOpen && isFixed && flyoutFixedStyles, isDragging && draggingStyles, prefersReducedMotionStyles],
+        css: [
+        // mobile breakpoint styles
+        mobileStyles, isFlyoutOpen && mobileFlyoutStyles,
+        // generic styles
+        outerStyles, isFixed && fixedStyles, isFlyoutOpen && flyoutStyles, isFlyoutOpen && isFixed && flyoutFixedStyles, isDragging && draggingStyles, prefersReducedMotionStyles],
         className: className,
         "data-testid": testId,
         id: id,
         onMouseOver: onMouseOver,
         onMouseLeave: onMouseLeave,
-        ref: ref
+        onClick: onClick,
+        ref: ref,
+        "aria-hidden": "true"
       }, selector), children)
     );
   });

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

@@ -4,7 +4,7 @@ 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
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var prefersReducedMotionStyles = css(prefersReducedMotion());
 
 /**

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

@@ -3,9 +3,14 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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';
-import { COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_WIDTH, FLYOUT_DELAY, RESIZE_BUTTON_SELECTOR, VAR_LEFT_SIDEBAR_FLYOUT, VAR_LEFT_SIDEBAR_WIDTH } from '../../common/constants';
+import { Fragment, useCallback, useContext, useEffect, useRef } from 'react';
+import { css, jsx } from '@emotion/react';
+import useCloseOnEscapePress from '@atlaskit/ds-lib/use-close-on-escape-press';
+import { easeOut } from '@atlaskit/motion';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/responsive';
+import { N100A } from '@atlaskit/theme/colors';
+import { COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_WIDTH, FLYOUT_DELAY, MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH, RESIZE_BUTTON_SELECTOR, TRANSITION_DURATION, VAR_LEFT_SIDEBAR_FLYOUT, VAR_LEFT_SIDEBAR_WIDTH } from '../../common/constants';
 import { getGridStateFromStorage, mergeGridStateIntoStorage, resolveDimension } from '../../common/utils';
 import { publishGridState, SidebarResizeContext, useSkipLink } from '../../controllers';
 import ResizeControl from '../resize-control';
@@ -14,11 +19,32 @@ import LeftSidebarOuter from './internal/left-sidebar-outer';
 import ResizableChildrenWrapper from './internal/resizable-children-wrapper';
 import SlotDimensions from './slot-dimensions';
 
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
+var openBackdropStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css({
+  width: '100%',
+  height: '100%',
+  position: 'absolute',
+  background: "var(--ds-blanket, ".concat(N100A, ")"),
+  opacity: 1
+}) : undefined;
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
+var hiddenBackdropStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css({
+  opacity: 0,
+  transition: "opacity ".concat(TRANSITION_DURATION, "ms ").concat(easeOut, " 0s")
+}) : undefined;
+
 /**
  * __Left sidebar__
  *
  * 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)
  */
@@ -74,9 +100,11 @@ var LeftSidebar = function LeftSidebar(props) {
     }
     if (!isLocked && handlerRef.current) {
       if (mouseXRef.current >= lastLeftSidebarWidth) {
-        setLeftSidebarState(_objectSpread(_objectSpread({}, leftSidebarState), {}, {
-          isFlyoutOpen: false
-        }));
+        setLeftSidebarState(function (current) {
+          return _objectSpread(_objectSpread({}, current), {}, {
+            isFlyoutOpen: false
+          });
+        });
       }
       document.removeEventListener('mousemove', handlerRef.current);
       handlerRef.current = null;
@@ -86,7 +114,7 @@ var LeftSidebar = function LeftSidebar(props) {
         document.removeEventListener('mousemove', handlerRef.current);
       }
     };
-  }, [isLocked, lastLeftSidebarWidth, leftSidebarState, setLeftSidebarState]);
+  }, [isLocked, lastLeftSidebarWidth, setLeftSidebarState]);
   var _width = Math.max(width || 0, DEFAULT_LEFT_SIDEBAR_WIDTH);
   var collapsedStateOverrideOpen = collapsedState === 'expanded';
   var leftSidebarWidthOnMount;
@@ -195,40 +223,110 @@ var LeftSidebar = function LeftSidebar(props) {
       });
     }, FLYOUT_DELAY);
   };
-  return (
-    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-    jsx(LeftSidebarOuter, {
-      ref: leftSideBarRef,
-      testId: testId,
-      onMouseOver: onMouseOver,
-      onMouseLeave: onMouseLeave,
-      id: id,
-      isFixed: isFixed,
-      isFlyoutOpen: isFlyoutOpen
-    }, jsx(SlotDimensions, {
-      variableName: VAR_LEFT_SIDEBAR_WIDTH,
-      value: notFirstRun.current ? leftSidebarWidth : leftSidebarWidthOnMount
-    }), jsx(LeftSidebarInner, {
-      isFixed: isFixed,
-      isFlyoutOpen: isFlyoutOpen
-    }, jsx(ResizableChildrenWrapper, {
-      isFlyoutOpen: isFlyoutOpen,
-      isLeftSidebarCollapsed: isLeftSidebarCollapsed,
-      hasCollapsedState: !notFirstRun.current && collapsedState === 'collapsed'
-    }, children), jsx(ResizeControl, {
-      testId: testId,
-      resizeGrabAreaLabel: resizeGrabAreaLabel,
-      resizeButtonLabel: resizeButtonLabel
-      // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
-      ,
-      overrides: overrides,
-      onCollapse: onCollapse,
-      onExpand: onExpand,
-      onResizeStart: onResizeStart,
-      onResizeEnd: onResizeEnd,
-      leftSidebarState: leftSidebarState,
-      setLeftSidebarState: setLeftSidebarState
-    })))
-  );
+  var mobileMediaQuery = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks -- Does not apply to being feature flagged.
+  useMediaQuery('below.md') : null;
+  var openMobileFlyout = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks -- Does not apply to being feature flagged.
+  useCallback(function () {
+    if (!(mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches)) {
+      return;
+    }
+    setLeftSidebarState(function (current) {
+      if (current.isFlyoutOpen) {
+        return current;
+      }
+      onExpand === null || onExpand === void 0 ? void 0 : onExpand();
+      return _objectSpread(_objectSpread({}, current), {}, {
+        isFlyoutOpen: true
+      });
+    });
+  }, [setLeftSidebarState, onExpand, mobileMediaQuery]) : undefined;
+  var closeMobileFlyout = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks -- Does not apply to being feature flagged.
+  useCallback(function () {
+    if (!(mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches)) {
+      return;
+    }
+    setLeftSidebarState(function (current) {
+      if (!current.isFlyoutOpen) {
+        return current;
+      }
+      onCollapse === null || onCollapse === void 0 ? void 0 : onCollapse();
+      return _objectSpread(_objectSpread({}, current), {}, {
+        isFlyoutOpen: false
+      });
+    });
+  }, [setLeftSidebarState, onCollapse, mobileMediaQuery]) : undefined;
+  if (getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g')) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks -- Does not apply to being feature flagged.
+    useMediaQuery('below.md', function (event) {
+      setLeftSidebarState(function (current) {
+        if (event.matches && !current.isLeftSidebarCollapsed) {
+          // Sidebar was previously open when resizing downwards, convert the sidebar being open to a flyout being open
+          return _objectSpread(_objectSpread({}, current), {}, {
+            isResizing: false,
+            isLeftSidebarCollapsed: true,
+            leftSidebarWidth: COLLAPSED_LEFT_SIDEBAR_WIDTH,
+            lastLeftSidebarWidth: current.leftSidebarWidth,
+            isFlyoutOpen: true
+          });
+        } else if (!event.matches && current.isFlyoutOpen) {
+          // The user is resizing "upwards", eg. going from mobile to desktop.
+          // Flyout was previously open, let's keep it open by moving to the un-collapsed sidebar instead
+
+          return _objectSpread(_objectSpread({}, current), {}, {
+            isResizing: false,
+            isLeftSidebarCollapsed: false,
+            leftSidebarWidth: Math.max(current.lastLeftSidebarWidth, DEFAULT_LEFT_SIDEBAR_WIDTH),
+            isFlyoutOpen: false
+          });
+        }
+        return current;
+      });
+    });
+
+    // Close the flyout when the "escape" key is pressed.
+    // eslint-disable-next-line react-hooks/rules-of-hooks -- Does not apply to being feature flagged.
+    useCloseOnEscapePress({
+      onClose: closeMobileFlyout,
+      isDisabled: !isFlyoutOpen
+    });
+  }
+  return jsx(Fragment, null, (mobileMediaQuery === null || mobileMediaQuery === void 0 ? void 0 : mobileMediaQuery.matches) && getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && jsx("div", {
+    "aria-hidden": "true",
+    css: [hiddenBackdropStyles, isFlyoutOpen && openBackdropStyles],
+    onClick: closeMobileFlyout
+  }), jsx(LeftSidebarOuter, {
+    ref: leftSideBarRef,
+    testId: testId,
+    onMouseOver: !(mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches) ? onMouseOver : undefined,
+    onMouseLeave: !(mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches) ? onMouseLeave : undefined,
+    onClick: mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches ? openMobileFlyout : undefined,
+    id: id,
+    isFixed: isFixed
+  }, jsx(SlotDimensions, {
+    variableName: VAR_LEFT_SIDEBAR_WIDTH,
+    value: notFirstRun.current ? leftSidebarWidth : leftSidebarWidthOnMount,
+    mobileValue: MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH
+  }), jsx(LeftSidebarInner, {
+    isFixed: isFixed,
+    isFlyoutOpen: isFlyoutOpen
+  }, jsx(ResizableChildrenWrapper, {
+    isFlyoutOpen: isFlyoutOpen,
+    isLeftSidebarCollapsed: isLeftSidebarCollapsed,
+    hasCollapsedState: !notFirstRun.current && collapsedState === 'collapsed'
+  }, children), jsx(ResizeControl, {
+    testId: testId,
+    resizeGrabAreaLabel: resizeGrabAreaLabel,
+    resizeButtonLabel: resizeButtonLabel
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+    ,
+    overrides: overrides,
+    onCollapse: onCollapse,
+    onExpand: onExpand,
+    onResizeStart: onResizeStart,
+    onResizeEnd: onResizeEnd
+  }))));
 };
 export default LeftSidebar;

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

@@ -10,7 +10,7 @@ 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
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var prefersReducedMotionStyles = css(prefersReducedMotion());
 var mainStyles = css({
   minWidth: 0,

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

@@ -3,10 +3,13 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 import { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { UNSAFE_media as media } from '@atlaskit/primitives/responsive';
 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 gridTemplateAreasMobile = "\n  \"".concat(LEFT_PANEL, " ").concat(BANNER, "\"\n  \"").concat(LEFT_PANEL, " ").concat(TOP_NAVIGATION, "\"\n  \"").concat(LEFT_PANEL, " ").concat(CONTENT, "\"\n ");
 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',
@@ -17,6 +20,12 @@ var gridStyles = css({
   outline: 'none'
 });
 
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
+var gridStylesMobile = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css(_defineProperty({}, media.below.md, {
+  gridTemplateAreas: gridTemplateAreasMobile,
+  gridTemplateColumns: "".concat(LEFT_PANEL_WIDTH, " minmax(0, 1fr)")
+})) : undefined;
+
 /**
  * __Page layout__
  *
@@ -36,7 +45,7 @@ var PageLayout = function PageLayout(_ref) {
     skipLinksLabel: skipLinksLabel
   }), jsx("div", _extends({}, pageLayoutSelector, {
     "data-testid": testId,
-    css: gridStyles,
+    css: [gridStyles, gridStylesMobile],
     tabIndex: -1
   }), jsx(SidebarResizeController, {
     onLeftSidebarCollapse: onLeftSidebarCollapse,

package/dist/esm/components/slots/slot-dimensions.js

@@ -1,6 +1,9 @@
 import React from 'react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { UNSAFE_media as media } from '@atlaskit/primitives/responsive';
 export default (function (_ref) {
   var variableName = _ref.variableName,
-    value = _ref.value;
-  return /*#__PURE__*/React.createElement("style", null, ":root{--".concat(variableName, ":").concat(value, "px;}"));
+    value = _ref.value,
+    mobileValue = _ref.mobileValue;
+  return /*#__PURE__*/React.createElement("style", null, ":root{--".concat(variableName, ":").concat(value, "px;}"), getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && mobileValue && "".concat(media.below.md, " { :root{--").concat(variableName, ":").concat(mobileValue, "px;} }"));
 });

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

@@ -20,7 +20,8 @@ export var SidebarResizeContext = /*#__PURE__*/createContext({
   expandLeftSidebar: noop,
   collapseLeftSidebar: noop,
   leftSidebarState: leftSidebarState,
-  setLeftSidebarState: noop
+  setLeftSidebarState: noop,
+  toggleLeftSidebar: noop
 });
 export var usePageLayoutResize = function usePageLayoutResize() {
   var _useContext = useContext(SidebarResizeContext),