@atlaskit/page-layout 1.6.4 → 1.7.0

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

@@ -9,12 +9,15 @@ 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 _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _responsive = require("@atlaskit/primitives/responsive");
 var _constants = require("../../common/constants");
 var _controllers = require("../../controllers");
 var _skipLinks = require("../skip-links");
 /** @jsx jsx */
 
 var pageLayoutSelector = (0, _defineProperty2.default)({}, _constants.PAGE_LAYOUT_CONTAINER_SELECTOR, true);
+var gridTemplateAreasMobile = "\n  \"".concat(_constants.LEFT_PANEL, " ").concat(_constants.BANNER, "\"\n  \"").concat(_constants.LEFT_PANEL, " ").concat(_constants.TOP_NAVIGATION, "\"\n  \"").concat(_constants.LEFT_PANEL, " ").concat(_constants.CONTENT, "\"\n ");
 var gridTemplateAreas = "\n  \"".concat(_constants.LEFT_PANEL, " ").concat(_constants.BANNER, " ").concat(_constants.RIGHT_PANEL, "\"\n  \"").concat(_constants.LEFT_PANEL, " ").concat(_constants.TOP_NAVIGATION, " ").concat(_constants.RIGHT_PANEL, "\"\n  \"").concat(_constants.LEFT_PANEL, " ").concat(_constants.CONTENT, " ").concat(_constants.RIGHT_PANEL, "\"\n ");
 var gridStyles = (0, _react2.css)({
   display: 'grid',
@@ -25,6 +28,12 @@ var gridStyles = (0, _react2.css)({
   outline: 'none'
 });
 
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
+var gridStylesMobile = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? (0, _react2.css)((0, _defineProperty2.default)({}, _responsive.UNSAFE_media.below.md, {
+  gridTemplateAreas: gridTemplateAreasMobile,
+  gridTemplateColumns: "".concat(_constants.LEFT_PANEL_WIDTH, " minmax(0, 1fr)")
+})) : undefined;
+
 /**
  * __Page layout__
  *
@@ -44,7 +53,7 @@ var PageLayout = function PageLayout(_ref) {
     skipLinksLabel: skipLinksLabel
   }), (0, _react2.jsx)("div", (0, _extends2.default)({}, pageLayoutSelector, {
     "data-testid": testId,
-    css: gridStyles,
+    css: [gridStyles, gridStylesMobile],
     tabIndex: -1
   }), (0, _react2.jsx)(_controllers.SidebarResizeController, {
     onLeftSidebarCollapse: onLeftSidebarCollapse,

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

@@ -6,9 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _responsive = require("@atlaskit/primitives/responsive");
 var _default = function _default(_ref) {
   var variableName = _ref.variableName,
-    value = _ref.value;
-  return /*#__PURE__*/_react.default.createElement("style", null, ":root{--".concat(variableName, ":").concat(value, "px;}"));
+    value = _ref.value,
+    mobileValue = _ref.mobileValue;
+  return /*#__PURE__*/_react.default.createElement("style", null, ":root{--".concat(variableName, ":").concat(value, "px;}"), (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && mobileValue && "".concat(_responsive.UNSAFE_media.below.md, " { :root{--").concat(variableName, ":").concat(mobileValue, "px;} }"));
 };
 exports.default = _default;

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

@@ -27,7 +27,8 @@ var SidebarResizeContext = /*#__PURE__*/(0, _react.createContext)({
   expandLeftSidebar: _noop.default,
   collapseLeftSidebar: _noop.default,
   leftSidebarState: leftSidebarState,
-  setLeftSidebarState: _noop.default
+  setLeftSidebarState: _noop.default,
+  toggleLeftSidebar: _noop.default
 });
 exports.SidebarResizeContext = SidebarResizeContext;
 var usePageLayoutResize = function usePageLayoutResize() {

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

@@ -11,6 +11,8 @@ var _react = _interopRequireWildcard(require("react"));
 var _bindEventListener = require("bind-event-listener");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _motion = require("@atlaskit/motion");
+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("./sidebar-resize-context");
@@ -18,8 +20,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var handleDataAttributesAndCb = function handleDataAttributesAndCb() {
   var callback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _noop.default;
-  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(_constants.IS_SIDEBAR_COLLAPSING);
   callback(leftSidebarState);
 };
@@ -41,7 +42,13 @@ var SidebarResizeController = function SidebarResizeController(_ref) {
     _useState2 = (0, _slicedToArray2.default)(_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
@@ -54,23 +61,46 @@ var SidebarResizeController = function SidebarResizeController(_ref) {
       onExpand: onExpand,
       onCollapse: onCollapse
     };
-  });
+  }, [onExpand, onCollapse]);
   var transition = (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;
+  var isOpen = mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches ? isFlyoutOpen : !isLeftSidebarCollapsed;
   var expandLeftSidebar = (0, _react.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: _constants.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, _constants.DEFAULT_LEFT_SIDEBAR_WIDTH);
     var updatedLeftSidebarState = {
       isLeftSidebarCollapsed: false,
@@ -83,9 +113,7 @@ 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
@@ -97,8 +125,8 @@ 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();
         }
       }
     });
@@ -114,22 +142,41 @@ var SidebarResizeController = function SidebarResizeController(_ref) {
       }
     };
     transition.current = value;
-  }, [leftSidebarState]);
+  }, [isOpen, mobileMediaQuery, isResizing, isLeftSidebarCollapsed, lastLeftSidebarWidth, flyoutLockCount, isFixed, leftSidebarWidth]);
   var collapseLeftSidebar = (0, _react.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: _constants.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
@@ -145,7 +192,7 @@ 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);
 
@@ -158,8 +205,8 @@ 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();
         }
       }
     });
@@ -175,24 +222,38 @@ 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 = (0, _react.useCallback)(function (event, collapseWithoutTransition) {
+    if (isOpen) {
+      collapseLeftSidebar(event, collapseWithoutTransition);
+    } else {
+      expandLeftSidebar();
+    }
+  }, [isOpen, expandLeftSidebar, collapseLeftSidebar]);
 
   // Make sure we finish any lingering transitions when unmounting
   (0, _react.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 = (0, _react.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.default.createElement(_sidebarResizeContext.SidebarResizeContext.Provider, {
     value: context
   }, children);

package/dist/cjs/version.json

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

package/dist/es2019/common/constants.js

@@ -28,9 +28,11 @@ export const DEFAULT_LEFT_PANEL_WIDTH = 368;
 
 // Other constants
 export const COLLAPSED_LEFT_SIDEBAR_WIDTH = 20;
+export const MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH = 16;
 export const MIN_LEFT_SIDEBAR_WIDTH = 80;
 export const DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH = 240;
 export const MIN_LEFT_SIDEBAR_DRAG_THRESHOLD = 200;
+export const MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH = 350;
 export const TRANSITION_DURATION = 300;
 export const FLYOUT_DELAY = 200;
 export const LEFT_SIDEBAR_EXPANDED_WIDTH = 'expandedLeftSidebarWidth';

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

@@ -4,7 +4,9 @@ import { Fragment, useCallback, useContext, useEffect, useMemo, useRef, useState
 import { css, Global, jsx } from '@emotion/react';
 import { bindAll } from 'bind-event-listener';
 import rafSchd from 'raf-schd';
-import { COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_WIDTH, IS_SIDEBAR_DRAGGING, MIN_LEFT_SIDEBAR_DRAG_THRESHOLD, RESIZE_BUTTON_SELECTOR, RESIZE_CONTROL_SELECTOR, VAR_LEFT_SIDEBAR_WIDTH } from '../../common/constants';
+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_DRAGGING, MIN_LEFT_SIDEBAR_DRAG_THRESHOLD, RESIZE_CONTROL_SELECTOR, VAR_LEFT_SIDEBAR_WIDTH } from '../../common/constants';
 import { getLeftPanelWidth, getLeftSidebarPercentage } from '../../common/utils';
 import { SidebarResizeContext } from '../../controllers/sidebar-resize-context';
 /* import useUpdateCssVar from '../../controllers/use-update-css-vars'; */
@@ -62,14 +64,13 @@ const ResizeControl = ({
   onResizeEnd
 }) => {
   const {
-    expandLeftSidebar,
+    toggleLeftSidebar,
     collapseLeftSidebar,
     leftSidebarState,
     setLeftSidebarState
   } = useContext(SidebarResizeContext);
   const {
-    isLeftSidebarCollapsed,
-    isResizing
+    isLeftSidebarCollapsed
   } = leftSidebarState;
   const sidebarWidth = useRef(leftSidebarState[VAR_LEFT_SIDEBAR_WIDTH]);
   // Distance of mouse from left sidebar onMouseDown
@@ -77,6 +78,9 @@ const ResizeControl = ({
   const keyboardEventTimeout = useRef();
   const [isGrabAreaFocused, setIsGrabAreaFocused] = useState(false);
   const unbindEvents = useRef(null);
+  const 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;
 
   // Used in some cases to ensure function references don't have to change
   // TODO: more functions could use `stableSidebarState` rather than `leftSidebarState`
@@ -84,23 +88,11 @@ const ResizeControl = ({
   useEffect(() => {
     stableSidebarState.current = leftSidebarState;
   }, [leftSidebarState]);
-  const 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) {
-      const resizeButton = document.querySelector(`[${RESIZE_BUTTON_SELECTOR}]`);
-      resizeButton && resizeButton.focus();
-    }
-  };
+  const toggleSideBar = useCallback(event => {
+    // don't cascade down to the LeftSidebarOuter
+    event === null || event === void 0 ? void 0 : event.stopPropagation();
+    toggleLeftSidebar();
+  }, [toggleLeftSidebar]);
   const onMouseDown = event => {
     if (isLeftSidebarCollapsed) {
       return;
@@ -340,7 +332,7 @@ const ResizeControl = ({
     css: [resizeControlStyles, (isGrabAreaFocused || isLeftSidebarCollapsed) && showResizeButtonStyles]
   }), jsx(Shadow, {
     testId: testId && `${testId}-shadow`
-  }), jsx(GrabArea, {
+  }), !(mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches) && jsx(GrabArea, {
     role: "separator",
     "aria-label": resizeGrabAreaLabel,
     "aria-valuenow": leftSidebarPercentageExpanded,
@@ -355,7 +347,7 @@ const ResizeControl = ({
     isLeftSidebarCollapsed: isLeftSidebarCollapsed,
     disabled: isLeftSidebarCollapsed
   }), resizeButton.render(ResizeButton, {
-    isLeftSidebarCollapsed,
+    isLeftSidebarCollapsed: mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches ? !leftSidebarState.isFlyoutOpen : isLeftSidebarCollapsed,
     label: resizeButtonLabel,
     onClick: toggleSideBar,
     testId: testId && `${testId}-resize-button`

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

@@ -5,6 +5,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';
 const increaseHitAreaStyles = css({
@@ -14,10 +16,18 @@ const increaseHitAreaStyles = css({
   bottom: `calc(-1 * ${"var(--ds-space-100, 8px)"})`,
   left: `calc(-1 * ${"var(--ds-space-100, 8px)"})`
 });
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
+const mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css({
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  [media.below.md]: {
+    opacity: 1
+  }
+}) : undefined;
 const resizeIconButtonStyles = css({
   width: 24,
   height: 24,
-  padding: 0,
+  padding: "var(--ds-space-0, 0px)",
   position: 'absolute',
   top: "var(--ds-space-400, 32px)",
   left: 0,
@@ -74,10 +84,9 @@ const ResizeButton = ({
   "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/es2019/components/skip-links/skip-link-components.js

@@ -6,7 +6,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
 const prefersReducedMotionStyles = css(prefersReducedMotion());
 const skipLinkStyles = css({
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing

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

@@ -2,11 +2,38 @@
 
 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
 const prefersReducedMotionStyles = css(prefersReducedMotion());
 
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
+const mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css({
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  [media.below.md]: {
+    width: `${MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH}px`,
+    position: 'fixed',
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+    top: `calc(${BANNER_HEIGHT} + ${TOP_NAVIGATION_HEIGHT})`,
+    bottom: 0,
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+    left: `${LEFT_PANEL_WIDTH}`,
+    transition: `width ${TRANSITION_DURATION}ms ${easeOut} 0s`
+  }
+}) : undefined;
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
+const mobileInnerFlyoutStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css({
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  [media.below.md]: {
+    width: `min(90vw, ${MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH}px)`,
+    maxWidth: MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH,
+    transition: `width ${TRANSITION_DURATION}ms ${easeOut} 0s, box-shadow ${TRANSITION_DURATION}ms ${easeOut} 0s`
+  }
+}) : undefined;
+
 /**
  * This inner wrapper is required to allow the sidebar to be `position: fixed`.
  *
@@ -47,7 +74,11 @@ const LeftSidebarInner = ({
 }) => {
   const 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/es2019/components/slots/internal/left-sidebar-outer.js

@@ -1,17 +1,44 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @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
 const prefersReducedMotionStyles = css(prefersReducedMotion());
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
+const mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css({
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  [media.below.md]: {
+    width: MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH,
+    cursor: 'pointer',
+    opacity: 1,
+    transition: `width ${TRANSITION_DURATION}ms ${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
+const mobileFlyoutStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css({
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  [media.below.md]: {
+    cursor: 'revert'
+  }
+}) : undefined;
 const outerStyles = css({
   width: LEFT_SIDEBAR_WIDTH,
-  marginLeft: 0,
+  marginLeft: "var(--ds-space-0, 0px)",
   position: 'relative',
   zIndex: 1,
   transition: `width ${TRANSITION_DURATION}ms ${easeOut} 0s`,
@@ -47,30 +74,46 @@ const selector = getPageLayoutSlotSelector('left-sidebar');
 const LeftSidebarOuter = ({
   children,
   isFixed = false,
-  isFlyoutOpen = false,
+  // NOTE: We explicitly require this via props because of `LeftSidebarWithoutResize`
   testId,
   onMouseLeave,
   onMouseOver,
+  onClick,
   id
 }, ref) => {
   const isDragging = useIsSidebarDragging();
+  const {
+    leftSidebarState: {
+      isFlyoutOpen
+    }
+  } = useContext(SidebarResizeContext);
   return jsx(SlotFocusRing, {
     isSidebar: true
   }, ({
     className
   }) =>
   /**
-   * 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));
 };
 export default /*#__PURE__*/forwardRef(LeftSidebarOuter);

package/dist/es2019/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
 const prefersReducedMotionStyles = css(prefersReducedMotion());
 
 /**