@atlaskit/page-layout 1.6.4 → 1.7.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/page-layout
 
+## 1.7.0
+
+### Minor Changes
+
+- [`7be6f82bb0d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7be6f82bb0d) - [ux] Behind tested behind a feature flag, we're testing new mobile functionality to keep our left sidebar in a "flyout" mode in mobile so navigation or content sits ontop of the main page content rather than crushing it.
+
+  This is designed to be SSR-compatible as it's primarily CSS-based with some user-event driven logic around mobile breakpoints that should not be inmpacted by SSR rendering (and should return the default desktop experience if such a state is achieved).
+
+## 1.6.5
+
+### Patch Changes
+
+- [`e7ea6832ad2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e7ea6832ad2) - Bans the use of React.FC/React.FunctionComponent type in ADS components as part of the React 18 migration work. The change is internal only and should not introduce any changes for the component consumers.
+
 ## 1.6.4
 
 ### Patch Changes

package/__perf__/utils/product-integration/sample-footer.tsx

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import React, { Fragment } from 'react';
+import { Fragment } from 'react';
 
 import { css, jsx } from '@emotion/react';
 
@@ -8,7 +8,7 @@ import { Footer } from '@atlaskit/side-navigation';
 import { B400, N200 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 
-const Container: React.FC<CustomItemComponentProps> = (props) => {
+const Container = (props: CustomItemComponentProps) => {
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   return <div {...props} />;
 };

package/__perf__/utils/product-integration/sample-header.tsx

@@ -1,13 +1,11 @@
 /** @jsx jsx */
-import React from 'react';
-
 import { jsx } from '@emotion/react';
 
 import Icon from '@atlaskit/icon';
 import { CustomItemComponentProps } from '@atlaskit/menu';
 import { Header } from '@atlaskit/side-navigation';
 
-const Container: React.FC<CustomItemComponentProps> = (props) => {
+const Container = (props: CustomItemComponentProps) => {
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   return <div {...props} />;
 };

package/dist/cjs/common/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VAR_TOP_NAVIGATION_HEIGHT = exports.VAR_RIGHT_SIDEBAR_WIDTH = exports.VAR_RIGHT_PANEL_WIDTH = exports.VAR_LEFT_SIDEBAR_WIDTH = exports.VAR_LEFT_SIDEBAR_FLYOUT = exports.VAR_LEFT_PANEL_WIDTH = exports.VAR_BANNER_HEIGHT = exports.TRANSITION_DURATION = exports.TOP_NAVIGATION_HEIGHT = exports.TOP_NAVIGATION = exports.RIGHT_SIDEBAR_WIDTH = exports.RIGHT_SIDEBAR = exports.RIGHT_PANEL_WIDTH = exports.RIGHT_PANEL = exports.RESIZE_CONTROL_SELECTOR = exports.RESIZE_BUTTON_SELECTOR = exports.PAGE_LAYOUT_SLOT_SELECTOR = exports.PAGE_LAYOUT_LS_KEY = exports.PAGE_LAYOUT_CONTAINER_SELECTOR = exports.MIN_LEFT_SIDEBAR_WIDTH = exports.MIN_LEFT_SIDEBAR_DRAG_THRESHOLD = exports.MAIN = exports.LEFT_SIDEBAR_WIDTH = exports.LEFT_SIDEBAR_FLYOUT_WIDTH = exports.LEFT_SIDEBAR_EXPANDED_WIDTH = exports.LEFT_SIDEBAR = exports.LEFT_PANEL_WIDTH = exports.LEFT_PANEL = exports.IS_SIDEBAR_DRAGGING = exports.IS_SIDEBAR_COLLAPSING = exports.IS_FLYOUT_OPEN = exports.GRAB_AREA_SELECTOR = exports.GRAB_AREA_LINE_SELECTOR = exports.FLYOUT_DELAY = exports.DIMENSIONS = exports.DEFAULT_TOP_NAVIGATION_HEIGHT = exports.DEFAULT_RIGHT_SIDEBAR_WIDTH = exports.DEFAULT_RIGHT_PANEL_WIDTH = exports.DEFAULT_LEFT_SIDEBAR_WIDTH = exports.DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH = exports.DEFAULT_LEFT_PANEL_WIDTH = exports.DEFAULT_I18N_PROPS_SKIP_LINKS = exports.DEFAULT_BANNER_HEIGHT = exports.CONTENT = exports.COLLAPSED_LEFT_SIDEBAR_WIDTH = exports.BANNER_HEIGHT = exports.BANNER = void 0;
+exports.VAR_TOP_NAVIGATION_HEIGHT = exports.VAR_RIGHT_SIDEBAR_WIDTH = exports.VAR_RIGHT_PANEL_WIDTH = exports.VAR_LEFT_SIDEBAR_WIDTH = exports.VAR_LEFT_SIDEBAR_FLYOUT = exports.VAR_LEFT_PANEL_WIDTH = exports.VAR_BANNER_HEIGHT = exports.TRANSITION_DURATION = exports.TOP_NAVIGATION_HEIGHT = exports.TOP_NAVIGATION = exports.RIGHT_SIDEBAR_WIDTH = exports.RIGHT_SIDEBAR = exports.RIGHT_PANEL_WIDTH = exports.RIGHT_PANEL = exports.RESIZE_CONTROL_SELECTOR = exports.RESIZE_BUTTON_SELECTOR = exports.PAGE_LAYOUT_SLOT_SELECTOR = exports.PAGE_LAYOUT_LS_KEY = exports.PAGE_LAYOUT_CONTAINER_SELECTOR = exports.MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH = exports.MIN_LEFT_SIDEBAR_WIDTH = exports.MIN_LEFT_SIDEBAR_DRAG_THRESHOLD = exports.MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH = exports.MAIN = exports.LEFT_SIDEBAR_WIDTH = exports.LEFT_SIDEBAR_FLYOUT_WIDTH = exports.LEFT_SIDEBAR_EXPANDED_WIDTH = exports.LEFT_SIDEBAR = exports.LEFT_PANEL_WIDTH = exports.LEFT_PANEL = exports.IS_SIDEBAR_DRAGGING = exports.IS_SIDEBAR_COLLAPSING = exports.IS_FLYOUT_OPEN = exports.GRAB_AREA_SELECTOR = exports.GRAB_AREA_LINE_SELECTOR = exports.FLYOUT_DELAY = exports.DIMENSIONS = exports.DEFAULT_TOP_NAVIGATION_HEIGHT = exports.DEFAULT_RIGHT_SIDEBAR_WIDTH = exports.DEFAULT_RIGHT_PANEL_WIDTH = exports.DEFAULT_LEFT_SIDEBAR_WIDTH = exports.DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH = exports.DEFAULT_LEFT_PANEL_WIDTH = exports.DEFAULT_I18N_PROPS_SKIP_LINKS = exports.DEFAULT_BANNER_HEIGHT = exports.CONTENT = exports.COLLAPSED_LEFT_SIDEBAR_WIDTH = exports.BANNER_HEIGHT = exports.BANNER = void 0;
 // dimension vars
 var VAR_LEFT_PANEL_WIDTH = 'leftPanelWidth';
 exports.VAR_LEFT_PANEL_WIDTH = VAR_LEFT_PANEL_WIDTH;
@@ -57,12 +57,16 @@ var DEFAULT_LEFT_PANEL_WIDTH = 368;
 exports.DEFAULT_LEFT_PANEL_WIDTH = DEFAULT_LEFT_PANEL_WIDTH;
 var COLLAPSED_LEFT_SIDEBAR_WIDTH = 20;
 exports.COLLAPSED_LEFT_SIDEBAR_WIDTH = COLLAPSED_LEFT_SIDEBAR_WIDTH;
+var MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH = 16;
+exports.MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH = MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH;
 var MIN_LEFT_SIDEBAR_WIDTH = 80;
 exports.MIN_LEFT_SIDEBAR_WIDTH = MIN_LEFT_SIDEBAR_WIDTH;
 var DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH = 240;
 exports.DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH = DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH;
 var MIN_LEFT_SIDEBAR_DRAG_THRESHOLD = 200;
 exports.MIN_LEFT_SIDEBAR_DRAG_THRESHOLD = MIN_LEFT_SIDEBAR_DRAG_THRESHOLD;
+var MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH = 350;
+exports.MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH = MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH;
 var TRANSITION_DURATION = 300;
 exports.TRANSITION_DURATION = TRANSITION_DURATION;
 var FLYOUT_DELAY = 200;

package/dist/cjs/components/resize-control/index.js

@@ -12,11 +12,13 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _bindEventListener = require("bind-event-listener");
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _responsive = require("@atlaskit/primitives/responsive");
 var _constants = require("../../common/constants");
 var _utils = require("../../common/utils");
 var _sidebarResizeContext = require("../../controllers/sidebar-resize-context");
 var _grabArea = _interopRequireDefault(require("./grab-area"));
-var _resizeButton2 = _interopRequireDefault(require("./resize-button"));
+var _resizeButton = _interopRequireDefault(require("./resize-button"));
 var _shadow = _interopRequireDefault(require("./shadow"));
 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) { (0, _defineProperty2.default)(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; } /** @jsx jsx */ /* import useUpdateCssVar from '../../controllers/use-update-css-vars'; */
@@ -69,12 +71,11 @@ var ResizeControl = function ResizeControl(_ref) {
     onResizeStart = _ref.onResizeStart,
     onResizeEnd = _ref.onResizeEnd;
   var _useContext = (0, _react.useContext)(_sidebarResizeContext.SidebarResizeContext),
-    expandLeftSidebar = _useContext.expandLeftSidebar,
+    toggleLeftSidebar = _useContext.toggleLeftSidebar,
     collapseLeftSidebar = _useContext.collapseLeftSidebar,
     leftSidebarState = _useContext.leftSidebarState,
     setLeftSidebarState = _useContext.setLeftSidebarState;
-  var isLeftSidebarCollapsed = leftSidebarState.isLeftSidebarCollapsed,
-    isResizing = leftSidebarState.isResizing;
+  var isLeftSidebarCollapsed = leftSidebarState.isLeftSidebarCollapsed;
   var sidebarWidth = (0, _react.useRef)(leftSidebarState[_constants.VAR_LEFT_SIDEBAR_WIDTH]);
   // Distance of mouse from left sidebar onMouseDown
   var offset = (0, _react.useRef)(0);
@@ -84,6 +85,9 @@ var ResizeControl = function ResizeControl(_ref) {
     isGrabAreaFocused = _useState2[0],
     setIsGrabAreaFocused = _useState2[1];
   var unbindEvents = (0, _react.useRef)(null);
+  var mobileMediaQuery = (0, _platformFeatureFlags.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.
+  (0, _responsive.UNSAFE_useMediaQuery)('below.md') : null;
 
   // Used in some cases to ensure function references don't have to change
   // TODO: more functions could use `stableSidebarState` rather than `leftSidebarState`
@@ -91,23 +95,11 @@ var ResizeControl = function ResizeControl(_ref) {
   (0, _react.useEffect)(function () {
     stableSidebarState.current = leftSidebarState;
   }, [leftSidebarState]);
-  var toggleSideBar = function toggleSideBar(e) {
-    if (isResizing) {
-      return;
-    }
-    if (isLeftSidebarCollapsed) {
-      expandLeftSidebar();
-    } else {
-      collapseLeftSidebar();
-    }
-
-    // Bring focus to the resize button if the grab area is
-    // "clicked" using enter/space on keyboard.
-    if (e && e.nativeEvent.detail === 0) {
-      var _resizeButton = document.querySelector("[".concat(_constants.RESIZE_BUTTON_SELECTOR, "]"));
-      _resizeButton && _resizeButton.focus();
-    }
-  };
+  var toggleSideBar = (0, _react.useCallback)(function (event) {
+    // don't cascade down to the LeftSidebarOuter
+    event === null || event === void 0 ? void 0 : event.stopPropagation();
+    toggleLeftSidebar();
+  }, [toggleLeftSidebar]);
   var onMouseDown = function onMouseDown(event) {
     if (isLeftSidebarCollapsed) {
       return;
@@ -339,7 +331,7 @@ var ResizeControl = function ResizeControl(_ref) {
     css: [resizeControlStyles, (isGrabAreaFocused || isLeftSidebarCollapsed) && showResizeButtonStyles]
   }), (0, _react2.jsx)(_shadow.default, {
     testId: testId && "".concat(testId, "-shadow")
-  }), (0, _react2.jsx)(_grabArea.default, {
+  }), !(mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches) && (0, _react2.jsx)(_grabArea.default, {
     role: "separator",
     "aria-label": resizeGrabAreaLabel,
     "aria-valuenow": leftSidebarPercentageExpanded,
@@ -353,8 +345,8 @@ var ResizeControl = function ResizeControl(_ref) {
     testId: testId && "".concat(testId, "-grab-area"),
     isLeftSidebarCollapsed: isLeftSidebarCollapsed,
     disabled: isLeftSidebarCollapsed
-  }), resizeButton.render(_resizeButton2.default, {
-    isLeftSidebarCollapsed: isLeftSidebarCollapsed,
+  }), resizeButton.render(_resizeButton.default, {
+    isLeftSidebarCollapsed: mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches ? !leftSidebarState.isFlyoutOpen : isLeftSidebarCollapsed,
     label: resizeButtonLabel,
     onClick: toggleSideBar,
     testId: testId && "".concat(testId, "-resize-button")

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

@@ -12,6 +12,8 @@ var _react = require("@emotion/react");
 var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-right"));
 var _curves = require("@atlaskit/motion/curves");
 var _durations = require("@atlaskit/motion/durations");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _responsive = require("@atlaskit/primitives/responsive");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("../../common/constants");
 var _excluded = ["isLeftSidebarCollapsed", "label", "testId"];
@@ -23,10 +25,15 @@ var increaseHitAreaStyles = (0, _react.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 = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? (0, _react.css)((0, _defineProperty2.default)({}, _responsive.UNSAFE_media.below.md, {
+  opacity: 1
+})) : undefined;
 var resizeIconButtonStyles = (0, _react.css)({
   width: 24,
   height: 24,
-  padding: 0,
+  padding: "var(--ds-space-0, 0px)",
   position: 'absolute',
   top: "var(--ds-space-400, 32px)",
   left: 0,
@@ -79,10 +86,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/cjs/components/skip-links/skip-link-components.js

@@ -14,7 +14,7 @@ var _constants = require("../../common/constants");
 var _controllers = require("../../controllers");
 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) { (0, _defineProperty2.default)(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 */
-// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var prefersReducedMotionStyles = (0, _react.css)((0, _motion.prefersReducedMotion)());
 var skipLinkStyles = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing

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

@@ -1,18 +1,41 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _motion = require("@atlaskit/motion");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _responsive = require("@atlaskit/primitives/responsive");
 var _constants = require("../../../common/constants");
 var _hooks = require("../../../common/hooks");
 /** @jsx jsx */
 
-// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var prefersReducedMotionStyles = (0, _react.css)((0, _motion.prefersReducedMotion)());
 
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
+var mobileStyles = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? (0, _react.css)((0, _defineProperty2.default)({}, _responsive.UNSAFE_media.below.md, {
+  width: "".concat(_constants.MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH, "px"),
+  position: 'fixed',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  top: "calc(".concat(_constants.BANNER_HEIGHT, " + ").concat(_constants.TOP_NAVIGATION_HEIGHT, ")"),
+  bottom: 0,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  left: "".concat(_constants.LEFT_PANEL_WIDTH),
+  transition: "width ".concat(_constants.TRANSITION_DURATION, "ms ").concat(_motion.easeOut, " 0s")
+})) : undefined;
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
+var mobileInnerFlyoutStyles = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? (0, _react.css)((0, _defineProperty2.default)({}, _responsive.UNSAFE_media.below.md, {
+  width: "min(90vw, ".concat(_constants.MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH, "px)"),
+  maxWidth: _constants.MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH,
+  transition: "width ".concat(_constants.TRANSITION_DURATION, "ms ").concat(_motion.easeOut, " 0s, box-shadow ").concat(_constants.TRANSITION_DURATION, "ms ").concat(_motion.easeOut, " 0s")
+})) : undefined;
+
 /**
  * This inner wrapper is required to allow the sidebar to be `position: fixed`.
  *
@@ -54,7 +77,11 @@ var LeftSidebarInner = function LeftSidebarInner(_ref) {
     isFlyoutOpen = _ref$isFlyoutOpen === void 0 ? false : _ref$isFlyoutOpen;
   var isDragging = (0, _hooks.useIsSidebarDragging)();
   return (0, _react.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/cjs/components/slots/internal/left-sidebar-outer.js

@@ -6,20 +6,42 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _motion = require("@atlaskit/motion");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _responsive = require("@atlaskit/primitives/responsive");
 var _constants = require("../../../common/constants");
 var _hooks = require("../../../common/hooks");
 var _utils = require("../../../common/utils");
+var _controllers = require("../../../controllers");
 var _slotFocusRing = _interopRequireDefault(require("./slot-focus-ring"));
 /** @jsx jsx */
 
-// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var prefersReducedMotionStyles = (0, _react2.css)((0, _motion.prefersReducedMotion)());
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
+var mobileStyles = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? (0, _react2.css)((0, _defineProperty2.default)({}, _responsive.UNSAFE_media.below.md, {
+  width: _constants.MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH,
+  cursor: 'pointer',
+  opacity: 1,
+  transition: "width ".concat(_constants.TRANSITION_DURATION, "ms ").concat(_motion.easeOut, " 0s"),
+  '&::after': {
+    display: 'inline-block',
+    maxWidth: _constants.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 = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? (0, _react2.css)((0, _defineProperty2.default)({}, _responsive.UNSAFE_media.below.md, {
+  cursor: 'revert'
+})) : undefined;
 var outerStyles = (0, _react2.css)({
   width: _constants.LEFT_SIDEBAR_WIDTH,
-  marginLeft: 0,
+  marginLeft: "var(--ds-space-0, 0px)",
   position: 'relative',
   zIndex: 1,
   transition: "width ".concat(_constants.TRANSITION_DURATION, "ms ").concat(_motion.easeOut, " 0s"),
@@ -56,30 +78,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 = (0, _hooks.useIsSidebarDragging)();
+  var _useContext = (0, _react.useContext)(_controllers.SidebarResizeContext),
+    isFlyoutOpen = _useContext.leftSidebarState.isFlyoutOpen;
   return (0, _react2.jsx)(_slotFocusRing.default, {
     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
       (0, _react2.jsx)("div", (0, _extends2.default)({
-        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/cjs/components/slots/internal/resizable-children-wrapper.js

@@ -10,7 +10,7 @@ var _constants = require("../../../common/constants");
 var _hooks = require("../../../common/hooks");
 /** @jsx jsx */
 
-// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var prefersReducedMotionStyles = (0, _react.css)((0, _motion.prefersReducedMotion)());
 
 /**

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

@@ -8,6 +8,11 @@ exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
+var _useCloseOnEscapePress = _interopRequireDefault(require("@atlaskit/ds-lib/use-close-on-escape-press"));
+var _motion = require("@atlaskit/motion");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _responsive = require("@atlaskit/primitives/responsive");
+var _colors = require("@atlaskit/theme/colors");
 var _constants = require("../../common/constants");
 var _utils = require("../../common/utils");
 var _controllers = require("../../controllers");
@@ -18,11 +23,32 @@ var _resizableChildrenWrapper = _interopRequireDefault(require("./internal/resiz
 var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
 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) { (0, _defineProperty2.default)(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 */
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
+var openBackdropStyles = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? (0, _react2.css)({
+  width: '100%',
+  height: '100%',
+  position: 'absolute',
+  background: "var(--ds-blanket, ".concat(_colors.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 = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? (0, _react2.css)({
+  opacity: 0,
+  transition: "opacity ".concat(_constants.TRANSITION_DURATION, "ms ").concat(_motion.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)
  */
@@ -78,9 +104,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;
@@ -90,7 +118,7 @@ var LeftSidebar = function LeftSidebar(props) {
         document.removeEventListener('mousemove', handlerRef.current);
       }
     };
-  }, [isLocked, lastLeftSidebarWidth, leftSidebarState, setLeftSidebarState]);
+  }, [isLocked, lastLeftSidebarWidth, setLeftSidebarState]);
   var _width = Math.max(width || 0, _constants.DEFAULT_LEFT_SIDEBAR_WIDTH);
   var collapsedStateOverrideOpen = collapsedState === 'expanded';
   var leftSidebarWidthOnMount;
@@ -199,41 +227,111 @@ var LeftSidebar = function LeftSidebar(props) {
       });
     }, _constants.FLYOUT_DELAY);
   };
-  return (
-    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-    (0, _react2.jsx)(_leftSidebarOuter.default, {
-      ref: leftSideBarRef,
-      testId: testId,
-      onMouseOver: onMouseOver,
-      onMouseLeave: onMouseLeave,
-      id: id,
-      isFixed: isFixed,
-      isFlyoutOpen: isFlyoutOpen
-    }, (0, _react2.jsx)(_slotDimensions.default, {
-      variableName: _constants.VAR_LEFT_SIDEBAR_WIDTH,
-      value: notFirstRun.current ? leftSidebarWidth : leftSidebarWidthOnMount
-    }), (0, _react2.jsx)(_leftSidebarInner.default, {
-      isFixed: isFixed,
-      isFlyoutOpen: isFlyoutOpen
-    }, (0, _react2.jsx)(_resizableChildrenWrapper.default, {
-      isFlyoutOpen: isFlyoutOpen,
-      isLeftSidebarCollapsed: isLeftSidebarCollapsed,
-      hasCollapsedState: !notFirstRun.current && collapsedState === 'collapsed'
-    }, children), (0, _react2.jsx)(_resizeControl.default, {
-      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 = (0, _platformFeatureFlags.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.
+  (0, _responsive.UNSAFE_useMediaQuery)('below.md') : null;
+  var openMobileFlyout = (0, _platformFeatureFlags.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.
+  (0, _react.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 = (0, _platformFeatureFlags.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.
+  (0, _react.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 ((0, _platformFeatureFlags.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.
+    (0, _responsive.UNSAFE_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: _constants.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, _constants.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.
+    (0, _useCloseOnEscapePress.default)({
+      onClose: closeMobileFlyout,
+      isDisabled: !isFlyoutOpen
+    });
+  }
+  return (0, _react2.jsx)(_react.Fragment, null, (mobileMediaQuery === null || mobileMediaQuery === void 0 ? void 0 : mobileMediaQuery.matches) && (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && (0, _react2.jsx)("div", {
+    "aria-hidden": "true",
+    css: [hiddenBackdropStyles, isFlyoutOpen && openBackdropStyles],
+    onClick: closeMobileFlyout
+  }), (0, _react2.jsx)(_leftSidebarOuter.default, {
+    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
+  }, (0, _react2.jsx)(_slotDimensions.default, {
+    variableName: _constants.VAR_LEFT_SIDEBAR_WIDTH,
+    value: notFirstRun.current ? leftSidebarWidth : leftSidebarWidthOnMount,
+    mobileValue: _constants.MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH
+  }), (0, _react2.jsx)(_leftSidebarInner.default, {
+    isFixed: isFixed,
+    isFlyoutOpen: isFlyoutOpen
+  }, (0, _react2.jsx)(_resizableChildrenWrapper.default, {
+    isFlyoutOpen: isFlyoutOpen,
+    isLeftSidebarCollapsed: isLeftSidebarCollapsed,
+    hasCollapsedState: !notFirstRun.current && collapsedState === 'collapsed'
+  }, children), (0, _react2.jsx)(_resizeControl.default, {
+    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
+  }))));
 };
 var _default = LeftSidebar;
 exports.default = _default;

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

@@ -17,7 +17,7 @@ var _controllers = require("../../controllers");
 var _slotFocusRing = _interopRequireDefault(require("./internal/slot-focus-ring"));
 /** @jsx jsx */
 
-// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var prefersReducedMotionStyles = (0, _react2.css)((0, _accessibility.prefersReducedMotion)());
 var mainStyles = (0, _react2.css)({
   minWidth: 0,