@atlaskit/page-layout 1.6.4 → 1.7.0

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

@@ -1,8 +1,13 @@
 /* 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';
@@ -11,11 +16,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
+const openBackdropStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css({
+  width: '100%',
+  height: '100%',
+  position: 'absolute',
+  background: `var(--ds-blanket, ${N100A})`,
+  opacity: 1
+}) : undefined;
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
+const hiddenBackdropStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css({
+  opacity: 0,
+  transition: `opacity ${TRANSITION_DURATION}ms ${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)
  */
@@ -75,10 +101,10 @@ const LeftSidebar = props => {
     }
     if (!isLocked && handlerRef.current) {
       if (mouseXRef.current >= lastLeftSidebarWidth) {
-        setLeftSidebarState({
-          ...leftSidebarState,
+        setLeftSidebarState(current => ({
+          ...current,
           isFlyoutOpen: false
-        });
+        }));
       }
       document.removeEventListener('mousemove', handlerRef.current);
       handlerRef.current = null;
@@ -88,7 +114,7 @@ const LeftSidebar = props => {
         document.removeEventListener('mousemove', handlerRef.current);
       }
     };
-  }, [isLocked, lastLeftSidebarWidth, leftSidebarState, setLeftSidebarState]);
+  }, [isLocked, lastLeftSidebarWidth, setLeftSidebarState]);
   const _width = Math.max(width || 0, DEFAULT_LEFT_SIDEBAR_WIDTH);
   const collapsedStateOverrideOpen = collapsedState === 'expanded';
   let leftSidebarWidthOnMount;
@@ -196,40 +222,114 @@ const 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
-    })))
-  );
+  const 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;
+  const 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(() => {
+    if (!(mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches)) {
+      return;
+    }
+    setLeftSidebarState(current => {
+      if (current.isFlyoutOpen) {
+        return current;
+      }
+      onExpand === null || onExpand === void 0 ? void 0 : onExpand();
+      return {
+        ...current,
+        isFlyoutOpen: true
+      };
+    });
+  }, [setLeftSidebarState, onExpand, mobileMediaQuery]) : undefined;
+  const 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(() => {
+    if (!(mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches)) {
+      return;
+    }
+    setLeftSidebarState(current => {
+      if (!current.isFlyoutOpen) {
+        return current;
+      }
+      onCollapse === null || onCollapse === void 0 ? void 0 : onCollapse();
+      return {
+        ...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', event => {
+      setLeftSidebarState(current => {
+        if (event.matches && !current.isLeftSidebarCollapsed) {
+          // Sidebar was previously open when resizing downwards, convert the sidebar being open to a flyout being open
+          return {
+            ...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 {
+            ...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/es2019/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
 const prefersReducedMotionStyles = css(prefersReducedMotion());
 const mainStyles = css({
   minWidth: 0,

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

@@ -2,12 +2,19 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @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';
 const pageLayoutSelector = {
   [PAGE_LAYOUT_CONTAINER_SELECTOR]: true
 };
+const gridTemplateAreasMobile = `
+  "${LEFT_PANEL} ${BANNER}"
+  "${LEFT_PANEL} ${TOP_NAVIGATION}"
+  "${LEFT_PANEL} ${CONTENT}"
+ `;
 const gridTemplateAreas = `
   "${LEFT_PANEL} ${BANNER} ${RIGHT_PANEL}"
   "${LEFT_PANEL} ${TOP_NAVIGATION} ${RIGHT_PANEL}"
@@ -22,6 +29,15 @@ const gridStyles = css({
   outline: 'none'
 });
 
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
+const gridStylesMobile = 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]: {
+    gridTemplateAreas: gridTemplateAreasMobile,
+    gridTemplateColumns: `${LEFT_PANEL_WIDTH} minmax(0, 1fr)`
+  }
+}) : undefined;
+
 /**
  * __Page layout__
  *
@@ -41,7 +57,7 @@ const PageLayout = ({
     skipLinksLabel: skipLinksLabel
   }), jsx("div", _extends({}, pageLayoutSelector, {
     "data-testid": testId,
-    css: gridStyles,
+    css: [gridStyles, gridStylesMobile],
     tabIndex: -1
   }), jsx(SidebarResizeController, {
     onLeftSidebarCollapse: onLeftSidebarCollapse,

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

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

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

@@ -15,7 +15,8 @@ export const SidebarResizeContext = /*#__PURE__*/createContext({
   expandLeftSidebar: noop,
   collapseLeftSidebar: noop,
   leftSidebarState,
-  setLeftSidebarState: noop
+  setLeftSidebarState: noop,
+  toggleLeftSidebar: noop
 });
 export const usePageLayoutResize = () => {
   const {

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

@@ -2,10 +2,12 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { bind } from 'bind-event-listener';
 import noop from '@atlaskit/ds-lib/noop';
 import { isReducedMotion } from '@atlaskit/motion';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/responsive';
 import { COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_WIDTH, IS_SIDEBAR_COLLAPSING } from '../common/constants';
 import { getPageLayoutSlotCSSSelector } from '../common/utils';
 import { SidebarResizeContext } from './sidebar-resize-context';
-const handleDataAttributesAndCb = (callback = noop, isLeftSidebarCollapsed, leftSidebarState) => {
+const handleDataAttributesAndCb = (callback = noop, leftSidebarState) => {
   document.documentElement.removeAttribute(IS_SIDEBAR_COLLAPSING);
   callback(leftSidebarState);
 };
@@ -26,7 +28,13 @@ export const SidebarResizeController = ({
     isFixed: true
   });
   const {
-    isLeftSidebarCollapsed
+    leftSidebarWidth,
+    lastLeftSidebarWidth,
+    isResizing,
+    flyoutLockCount,
+    isFixed,
+    isLeftSidebarCollapsed,
+    isFlyoutOpen
   } = leftSidebarState;
 
   // We put the latest callbacks into a ref so we can always have the latest
@@ -40,25 +48,46 @@ export const SidebarResizeController = ({
       onExpand,
       onCollapse
     };
-  });
+  }, [onExpand, onCollapse]);
   const transition = 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;
+  const isOpen = mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches ? isFlyoutOpen : !isLeftSidebarCollapsed;
   const expandLeftSidebar = useCallback(() => {
-    var _transition$current, _transition$current2;
-    const {
-      lastLeftSidebarWidth,
-      isResizing,
-      flyoutLockCount,
-      isFixed,
-      isLeftSidebarCollapsed
-    } = leftSidebarState;
+    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;
+      const flyoutOpenSidebarState = {
+        isResizing: false,
+        isLeftSidebarCollapsed: true,
+        leftSidebarWidth: COLLAPSED_LEFT_SIDEBAR_WIDTH,
+        lastLeftSidebarWidth: leftSidebarWidth,
+        isFlyoutOpen: true,
+        flyoutLockCount: 0,
+        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();
     const width = Math.max(lastLeftSidebarWidth, DEFAULT_LEFT_SIDEBAR_WIDTH);
     const updatedLeftSidebarState = {
       isLeftSidebarCollapsed: false,
@@ -71,9 +100,7 @@ export const SidebarResizeController = ({
     };
     setLeftSidebarState(updatedLeftSidebarState);
     function finish() {
-      handleDataAttributesAndCb(stableRef.current.onExpand, false,
-      // isCollapsed
-      updatedLeftSidebarState);
+      handleDataAttributesAndCb(stableRef.current.onExpand, updatedLeftSidebarState);
     }
     const sidebar = document.querySelector(leftSidebarSelector);
     // onTransitionEnd isn't triggered when a user prefers reduced motion
@@ -85,8 +112,8 @@ export const SidebarResizeController = ({
       type: 'transitionend',
       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();
         }
       }
     });
@@ -102,24 +129,41 @@ export const SidebarResizeController = ({
       }
     };
     transition.current = value;
-  }, [leftSidebarState]);
+  }, [isOpen, mobileMediaQuery, isResizing, isLeftSidebarCollapsed, lastLeftSidebarWidth, flyoutLockCount, isFixed, leftSidebarWidth]);
   const collapseLeftSidebar = useCallback((event, collapseWithoutTransition) => {
-    var _transition$current4, _transition$current5;
-    const {
-      leftSidebarWidth,
-      isResizing,
-      flyoutLockCount,
-      isFixed,
-      isLeftSidebarCollapsed
-    } = leftSidebarState;
+    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;
+      const flyoutCloseSidebarState = {
+        isResizing: false,
+        isLeftSidebarCollapsed: true,
+        leftSidebarWidth: COLLAPSED_LEFT_SIDEBAR_WIDTH,
+        lastLeftSidebarWidth,
+        isFlyoutOpen: false,
+        flyoutLockCount: 0,
+        isFixed
+      };
+      setLeftSidebarState(flyoutCloseSidebarState);
+
+      // Flush the desktop transitions, cleanup, and call the `onCollapse` still
+      (_transition$current5 = transition.current) === null || _transition$current5 === void 0 ? void 0 : _transition$current5.complete();
+      handleDataAttributesAndCb(stableRef.current.onCollapse, flyoutCloseSidebarState);
+      return;
+    }
     if (isResizing || isLeftSidebarCollapsed ||
     // already collapsing
-    ((_transition$current4 = transition.current) === null || _transition$current4 === void 0 ? void 0 : _transition$current4.action) === 'collapse') {
+    ((_transition$current6 = transition.current) === null || _transition$current6 === void 0 ? void 0 : _transition$current6.action) === 'collapse') {
       return;
     }
 
     // flush existing transition
-    (_transition$current5 = transition.current) === null || _transition$current5 === void 0 ? void 0 : _transition$current5.complete();
+    (_transition$current7 = transition.current) === null || _transition$current7 === void 0 ? void 0 : _transition$current7.complete();
 
     // data-attribute is used as a CSS selector to sync the hiding/showing
     // of the nav contents with expand/collapse animation
@@ -135,7 +179,7 @@ export const SidebarResizeController = ({
     };
     setLeftSidebarState(updatedLeftSidebarState);
     function finish() {
-      handleDataAttributesAndCb(stableRef.current.onCollapse, true, updatedLeftSidebarState);
+      handleDataAttributesAndCb(stableRef.current.onCollapse, updatedLeftSidebarState);
     }
     const sidebar = document.querySelector(leftSidebarSelector);
 
@@ -148,8 +192,8 @@ export const SidebarResizeController = ({
       type: 'transitionend',
       listener(event) {
         if (sidebar === event.target && event.propertyName === 'width') {
-          var _transition$current6;
-          (_transition$current6 = transition.current) === null || _transition$current6 === void 0 ? void 0 : _transition$current6.complete();
+          var _transition$current8;
+          (_transition$current8 = transition.current) === null || _transition$current8 === void 0 ? void 0 : _transition$current8.complete();
         }
       }
     });
@@ -165,22 +209,36 @@ export const SidebarResizeController = ({
       }
     };
     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.
+   */
+  const toggleLeftSidebar = useCallback((event, collapseWithoutTransition) => {
+    if (isOpen) {
+      collapseLeftSidebar(event, collapseWithoutTransition);
+    } else {
+      expandLeftSidebar();
+    }
+  }, [isOpen, expandLeftSidebar, collapseLeftSidebar]);
 
   // Make sure we finish any lingering transitions when unmounting
   useEffect(function mount() {
     return function unmount() {
-      var _transition$current7;
-      (_transition$current7 = transition.current) === null || _transition$current7 === void 0 ? void 0 : _transition$current7.abort();
+      var _transition$current9;
+      (_transition$current9 = transition.current) === null || _transition$current9 === void 0 ? void 0 : _transition$current9.abort();
     };
   }, []);
   const context = useMemo(() => ({
-    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,
     collapseLeftSidebar,
     leftSidebarState,
-    setLeftSidebarState
-  }), [isLeftSidebarCollapsed, expandLeftSidebar, collapseLeftSidebar, leftSidebarState]);
+    setLeftSidebarState,
+    toggleLeftSidebar
+  }), [isOpen, expandLeftSidebar, collapseLeftSidebar, leftSidebarState, toggleLeftSidebar]);
   return /*#__PURE__*/React.createElement(SidebarResizeContext.Provider, {
     value: context
   }, children);

package/dist/es2019/version.json

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

package/dist/esm/common/constants.js

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

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

@@ -8,7 +8,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'; */
@@ -65,12 +67,11 @@ var ResizeControl = function ResizeControl(_ref) {
     onResizeStart = _ref.onResizeStart,
     onResizeEnd = _ref.onResizeEnd;
   var _useContext = useContext(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 = useRef(leftSidebarState[VAR_LEFT_SIDEBAR_WIDTH]);
   // Distance of mouse from left sidebar onMouseDown
   var offset = useRef(0);
@@ -80,6 +81,9 @@ var ResizeControl = function ResizeControl(_ref) {
     isGrabAreaFocused = _useState2[0],
     setIsGrabAreaFocused = _useState2[1];
   var unbindEvents = useRef(null);
+  var mobileMediaQuery = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks -- With the feature flag, this does not apply as it should be static.
+  useMediaQuery('below.md') : null;
 
   // Used in some cases to ensure function references don't have to change
   // TODO: more functions could use `stableSidebarState` rather than `leftSidebarState`
@@ -87,23 +91,11 @@ var ResizeControl = function ResizeControl(_ref) {
   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(RESIZE_BUTTON_SELECTOR, "]"));
-      _resizeButton && _resizeButton.focus();
-    }
-  };
+  var toggleSideBar = 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;
@@ -335,7 +327,7 @@ var ResizeControl = function ResizeControl(_ref) {
     css: [resizeControlStyles, (isGrabAreaFocused || isLeftSidebarCollapsed) && showResizeButtonStyles]
   }), jsx(Shadow, {
     testId: testId && "".concat(testId, "-shadow")
-  }), jsx(GrabArea, {
+  }), !(mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches) && jsx(GrabArea, {
     role: "separator",
     "aria-label": resizeGrabAreaLabel,
     "aria-valuenow": leftSidebarPercentageExpanded,
@@ -350,7 +342,7 @@ var ResizeControl = function ResizeControl(_ref) {
     isLeftSidebarCollapsed: isLeftSidebarCollapsed,
     disabled: isLeftSidebarCollapsed
   }), resizeButton.render(ResizeButton, {
-    isLeftSidebarCollapsed: isLeftSidebarCollapsed,
+    isLeftSidebarCollapsed: mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches ? !leftSidebarState.isFlyoutOpen : isLeftSidebarCollapsed,
     label: resizeButtonLabel,
     onClick: toggleSideBar,
     testId: testId && "".concat(testId, "-resize-button")