@atlaskit/page-layout 1.3.10 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @atlaskit/page-layout
 
+## 1.5.0
+
+### Minor Changes
+
+- [`2a9f6f800ef`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2a9f6f800ef) - **Fixes**
+
+  - `onLeftSidebarExpand` is no longer called when the sidebar is already open. `onLeftSidebarExpand` oculd previously be incorrectly called if a user resized an expanded sidebar to slightly smaller than the default sidebar width, or when the user cancelled a sidebar resizing operation with the `"Escape"` key
+  - the latest provided `onLeftSidebarCollapse` and `onLeftSidebarExpand` functions are now called when collapsing / expanding respectively. Previously, only the initial `onLeftSidebarCollapse` and `onLeftSidebarExpand` were called (due to a stale closure)
+  - `onLeftSidebarCollapse` and `onLeftSidebarExpand` are now called with the latest state values. Previously there were only ever called with the initial left sidebar state value (due to a stale closure)
+
+  **Improvements**
+
+  - no longer possible to trigger the collapse of the sidebar when it is already collapsed
+  - no longer possible to trigger an expand of the sidebar when it is already expanded
+  - triggering an expand while the sidebar is collapsing will now flush the pending `onLeftSidebarExpand`
+  - triggering an collapse while the sidebar is expanding will now flush the pending `onLeftSidebarCollapse`
+  - only adding the event listener for `"transitionend"` when the sidebar is expanding or collapsing.
+  - removing `"transitionend"` event listener when `<LeftSidebar />` is unmounted
+  - explicitly aborting pending collapse / expand actions when `<LeftSidebar />` is unmounted while collapsing / expanding.
+
+## 1.4.0
+
+### Minor Changes
+
+- [`955ee3ea8fe`](https://bitbucket.org/atlassian/atlassian-frontend/commits/955ee3ea8fe) - [ux] **fix**: if a `"mousedown"`, `"click"`, `"resize"` or `"visibilitychange"` event occurs while the sidebar is being resized, then the resizing operation will end
+
+  [ux] **new**: if a user presses the `"Escape"` key while the sidebar is being resized, then the resizing operation will end
+
 ## 1.3.10
 
 ### Patch Changes

package/dist/cjs/components/resize-control/grab-area.js

@@ -12,6 +12,7 @@ var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("../../common/constants");
 var _excluded = ["testId", "isLeftSidebarCollapsed"];
+/** @jsx jsx */
 /**
  * Determines the color of the grab line.
  *

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

@@ -19,7 +19,7 @@ var _grabArea = _interopRequireDefault(require("./grab-area"));
 var _resizeButton2 = _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; }
+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'; */
 var cssSelector = (0, _defineProperty2.default)({}, _constants.RESIZE_CONTROL_SELECTOR, true);
 var resizeControlStyles = (0, _react2.css)({
   position: 'absolute',
@@ -47,7 +47,7 @@ var ResizeControl = function ResizeControl(_ref) {
     setLeftSidebarState = _useContext.setLeftSidebarState;
   var isLeftSidebarCollapsed = leftSidebarState.isLeftSidebarCollapsed,
     isResizing = leftSidebarState.isResizing;
-  var x = (0, _react.useRef)(leftSidebarState[_constants.VAR_LEFT_SIDEBAR_WIDTH]);
+  var sidebarWidth = (0, _react.useRef)(leftSidebarState[_constants.VAR_LEFT_SIDEBAR_WIDTH]);
   // Distance of mouse from left sidebar onMouseDown
   var offset = (0, _react.useRef)(0);
   var keyboardEventTimeout = (0, _react.useRef)();
@@ -77,13 +77,67 @@ var ResizeControl = function ResizeControl(_ref) {
     if (isLeftSidebarCollapsed) {
       return;
     }
+
+    // TODO: should only a primary pointer be able to start a resize?
+    // Keeping as is for now, but worth considering
+
+    // It is possible for a mousedown to fire during a resize
+    // Example: the user presses another pointer button while dragging
+    if (leftSidebarState.isResizing) {
+      // the resize will be cancelled by our global event listeners
+      return;
+    }
     offset.current = event.clientX - leftSidebarState[_constants.VAR_LEFT_SIDEBAR_WIDTH] - (0, _utils.getLeftPanelWidth)();
-    unbindEvents.current = (0, _bindEventListener.bindAll)(document, [{
+    unbindEvents.current = (0, _bindEventListener.bindAll)(window, [{
       type: 'mousemove',
-      listener: onMouseMove
+      listener: onUpdateResize
     }, {
       type: 'mouseup',
-      listener: onMouseUp
+      listener: onFinishResizing
+    }, {
+      type: 'mousedown',
+      // this mousedown event listener is being added in the bubble phase
+      // on a higher event target than the resize handle.
+      // This means that the original mousedown event that triggers a resize
+      // can hit this mousedown handler. To get around that, we only call
+      // `onFinishResizing` after an animation frame so we don't pick up the original event
+      // Alternatives:
+      // 1. Add the window 'mousedown' event listener in the capture phase
+      // 👎 A 'mousedown' during a resize would trigger a new resize to start
+      // 2. Do 1. and call `event.preventDefault()`, then check for `event.defaultPrevented` inside
+      // the grab handle `onMouseDown`
+      // 👎 Not ideal to cancel events if we don't have to
+      listener: function () {
+        var hasFramePassed = false;
+        requestAnimationFrame(function () {
+          hasFramePassed = true;
+        });
+        return function listener() {
+          if (hasFramePassed) {
+            onFinishResizing();
+          }
+        };
+      }()
+    }, {
+      type: 'visibilitychange',
+      listener: onFinishResizing
+    },
+    // A 'click' event should never be hit as the 'mouseup' will come first and cause
+    // these event listeners to be unbound. I just added 'click' for extreme safety (paranoia)
+    {
+      type: 'click',
+      listener: onFinishResizing
+    }, {
+      type: 'keydown',
+      listener: function listener(event) {
+        // Can cancel resizing by pressing "Escape"
+        // Will return sidebar to the same size it was before the resizing started
+        if (event.key === 'Escape') {
+          sidebarWidth.current = Math.max(leftSidebarState.lastLeftSidebarWidth, _constants.COLLAPSED_LEFT_SIDEBAR_WIDTH);
+          document.documentElement.style.setProperty("--".concat(_constants.VAR_LEFT_SIDEBAR_WIDTH), "".concat(sidebarWidth.current, "px"));
+          onFinishResizing();
+        }
+      }
     }]);
     document.documentElement.setAttribute(_constants.IS_SIDEBAR_DRAGGING, 'true');
     var newLeftbarState = _objectSpread(_objectSpread({}, leftSidebarState), {}, {
@@ -92,37 +146,38 @@ var ResizeControl = function ResizeControl(_ref) {
     setLeftSidebarState(newLeftbarState);
     onResizeStart && onResizeStart(newLeftbarState);
   };
-  var cancelDrag = function cancelDrag(shouldCollapse) {
+  var onResizeOffLeftOfScreen = function onResizeOffLeftOfScreen() {
     var _unbindEvents$current;
-    onMouseMove.cancel();
+    onUpdateResize.cancel();
     (_unbindEvents$current = unbindEvents.current) === null || _unbindEvents$current === void 0 ? void 0 : _unbindEvents$current.call(unbindEvents);
     unbindEvents.current = null;
     document.documentElement.removeAttribute(_constants.IS_SIDEBAR_DRAGGING);
     offset.current = 0;
     collapseLeftSidebar(undefined, true);
   };
-  var onMouseMove = (0, _rafSchd.default)(function (event) {
+  var onUpdateResize = (0, _rafSchd.default)(function (event) {
     // Allow the sidebar to be 50% of the available page width
     var maxWidth = Math.round(window.innerWidth / 2);
     var leftPanelWidth = (0, _utils.getLeftPanelWidth)();
     var leftSidebarWidth = leftSidebarState.leftSidebarWidth;
-    var invalidDrag = event.clientX < 0;
-    if (invalidDrag) {
-      cancelDrag();
+    var hasResizedOffLeftOfScreen = event.clientX < 0;
+    if (hasResizedOffLeftOfScreen) {
+      onResizeOffLeftOfScreen();
+      return;
     }
     var delta = Math.max(Math.min(event.clientX - leftSidebarWidth - leftPanelWidth, maxWidth - leftSidebarWidth - leftPanelWidth), _constants.COLLAPSED_LEFT_SIDEBAR_WIDTH - leftSidebarWidth - leftPanelWidth);
-    x.current = Math.max(leftSidebarWidth + delta - offset.current, _constants.COLLAPSED_LEFT_SIDEBAR_WIDTH);
-    document.documentElement.style.setProperty("--".concat(_constants.VAR_LEFT_SIDEBAR_WIDTH), "".concat(x.current, "px"));
+    sidebarWidth.current = Math.max(leftSidebarWidth + delta - offset.current, _constants.COLLAPSED_LEFT_SIDEBAR_WIDTH);
+    document.documentElement.style.setProperty("--".concat(_constants.VAR_LEFT_SIDEBAR_WIDTH), "".concat(sidebarWidth.current, "px"));
   });
   var cleanupAfterResize = function cleanupAfterResize() {
     var _unbindEvents$current2;
-    x.current = 0;
+    sidebarWidth.current = 0;
     offset.current = 0;
     (_unbindEvents$current2 = unbindEvents.current) === null || _unbindEvents$current2 === void 0 ? void 0 : _unbindEvents$current2.call(unbindEvents);
     unbindEvents.current = null;
   };
   var updatedLeftSidebarState = {};
-  var onMouseUp = function onMouseUp(event) {
+  var onFinishResizing = function onFinishResizing() {
     if (isLeftSidebarCollapsed) {
       return;
     }
@@ -130,14 +185,14 @@ var ResizeControl = function ResizeControl(_ref) {
 
     // If it is dragged to below the threshold,
     // collapse the navigation
-    if (x.current < _constants.MIN_LEFT_SIDEBAR_DRAG_THRESHOLD) {
+    if (sidebarWidth.current < _constants.MIN_LEFT_SIDEBAR_DRAG_THRESHOLD) {
       document.documentElement.style.setProperty("--".concat(_constants.VAR_LEFT_SIDEBAR_WIDTH), "".concat(_constants.COLLAPSED_LEFT_SIDEBAR_WIDTH, "px"));
       collapseLeftSidebar(undefined, true);
     }
     // If it is dragged to position in between the
     // min threshold and default width
     // expand the nav to the default width
-    else if (x.current > _constants.MIN_LEFT_SIDEBAR_DRAG_THRESHOLD && x.current < _constants.DEFAULT_LEFT_SIDEBAR_WIDTH) {
+    else if (sidebarWidth.current > _constants.MIN_LEFT_SIDEBAR_DRAG_THRESHOLD && sidebarWidth.current < _constants.DEFAULT_LEFT_SIDEBAR_WIDTH) {
       var _objectSpread2;
       document.documentElement.style.setProperty("--".concat(_constants.VAR_LEFT_SIDEBAR_WIDTH), "".concat(_constants.DEFAULT_LEFT_SIDEBAR_WIDTH, "px"));
       updatedLeftSidebarState = _objectSpread(_objectSpread({}, leftSidebarState), {}, (_objectSpread2 = {
@@ -149,11 +204,11 @@ var ResizeControl = function ResizeControl(_ref) {
       // otherwise resize it to the desired width
       updatedLeftSidebarState = _objectSpread(_objectSpread({}, leftSidebarState), {}, (_objectSpread3 = {
         isResizing: false
-      }, (0, _defineProperty2.default)(_objectSpread3, _constants.VAR_LEFT_SIDEBAR_WIDTH, x.current), (0, _defineProperty2.default)(_objectSpread3, "lastLeftSidebarWidth", x.current), _objectSpread3));
+      }, (0, _defineProperty2.default)(_objectSpread3, _constants.VAR_LEFT_SIDEBAR_WIDTH, sidebarWidth.current), (0, _defineProperty2.default)(_objectSpread3, "lastLeftSidebarWidth", sidebarWidth.current), _objectSpread3));
       setLeftSidebarState(updatedLeftSidebarState);
     }
     requestAnimationFrame(function () {
-      onMouseMove.cancel();
+      onUpdateResize.cancel();
       setIsGrabAreaFocused(false);
       onResizeEnd && onResizeEnd(updatedLeftSidebarState);
       cleanupAfterResize();

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

@@ -15,6 +15,7 @@ var _durations = require("@atlaskit/motion/durations");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("../../common/constants");
 var _excluded = ["isLeftSidebarCollapsed", "label", "testId"];
+/** @jsx jsx */
 var increaseHitAreaStyles = (0, _react.css)({
   position: 'absolute',
   top: -8,

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

@@ -13,7 +13,7 @@ var _colors = require("@atlaskit/theme/colors");
 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; }
+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
 var prefersReducedMotionStyles = (0, _react.css)((0, _motion.prefersReducedMotion)());
 var skipLinkStyles = (0, _react.css)({

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

@@ -17,7 +17,7 @@ var _leftSidebarOuter = _interopRequireDefault(require("./internal/left-sidebar-
 var _resizableChildrenWrapper = _interopRequireDefault(require("./internal/resizable-children-wrapper"));
 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; }
+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 */
 /**
  * __Left sidebar__
  *

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

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.SidebarResizeController = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 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 _constants = require("../common/constants");
@@ -22,7 +23,7 @@ var handleDataAttributesAndCb = function handleDataAttributesAndCb() {
   document.documentElement.removeAttribute(_constants.IS_SIDEBAR_COLLAPSING);
   callback(leftSidebarState);
 };
-
+var leftSidebarSelector = (0, _utils.getPageLayoutSlotCSSSelector)('left-sidebar');
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 var SidebarResizeController = function SidebarResizeController(_ref) {
   var children = _ref.children,
@@ -41,34 +42,35 @@ var SidebarResizeController = function SidebarResizeController(_ref) {
     leftSidebarState = _useState2[0],
     setLeftSidebarState = _useState2[1];
   var isLeftSidebarCollapsed = leftSidebarState.isLeftSidebarCollapsed;
-  var leftSidebarSelector = (0, _utils.getPageLayoutSlotCSSSelector)('left-sidebar');
-  var transitionEventHandler = (0, _react.useCallback)(function (event) {
-    if (event.propertyName === 'width' && event.target && event.target.matches(leftSidebarSelector)) {
-      var $leftSidebarResizeController = document.querySelector("[".concat(_constants.GRAB_AREA_SELECTOR, "]"));
-      var isCollapsed = !!$leftSidebarResizeController && $leftSidebarResizeController.hasAttribute('disabled');
-      handleDataAttributesAndCb(isCollapsed ? onCollapse : onExpand, isCollapsed, leftSidebarState);
 
-      // Make sure multiple event handlers do not get attached
-      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
-      document.querySelector(leftSidebarSelector).removeEventListener('transitionend', transitionEventHandler);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  // We put the latest callbacks into a ref so we can always have the latest
+  // functions in our transitionend listeners
+  var stableRef = (0, _react.useRef)({
+    onExpand: onExpand,
+    onCollapse: onCollapse
+  });
   (0, _react.useEffect)(function () {
-    var $leftSidebar = document.querySelector(leftSidebarSelector);
-    if ($leftSidebar && !(0, _motion.isReducedMotion)()) {
-      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
-      $leftSidebar.addEventListener('transitionend', transitionEventHandler);
-    }
-  }, [isLeftSidebarCollapsed, leftSidebarSelector, leftSidebarState, onCollapse, onExpand, transitionEventHandler]);
+    stableRef.current = {
+      onExpand: onExpand,
+      onCollapse: onCollapse
+    };
+  });
+  var transition = (0, _react.useRef)(null);
   var expandLeftSidebar = (0, _react.useCallback)(function () {
+    var _transition$current, _transition$current2;
     var lastLeftSidebarWidth = leftSidebarState.lastLeftSidebarWidth,
       isResizing = leftSidebarState.isResizing,
       flyoutLockCount = leftSidebarState.flyoutLockCount,
-      isFixed = leftSidebarState.isFixed;
-    if (isResizing) {
+      isFixed = leftSidebarState.isFixed,
+      isLeftSidebarCollapsed = leftSidebarState.isLeftSidebarCollapsed;
+    if (isResizing || !isLeftSidebarCollapsed ||
+    // already expanding
+    ((_transition$current = transition.current) === null || _transition$current === void 0 ? void 0 : _transition$current.action) === 'expand') {
       return;
     }
+
+    // flush existing transition
+    (_transition$current2 = transition.current) === null || _transition$current2 === void 0 ? void 0 : _transition$current2.complete();
     var width = Math.max(lastLeftSidebarWidth, _constants.DEFAULT_LEFT_SIDEBAR_WIDTH);
     var updatedLeftSidebarState = {
       isLeftSidebarCollapsed: false,
@@ -80,22 +82,55 @@ var SidebarResizeController = function SidebarResizeController(_ref) {
       isFixed: isFixed
     };
     setLeftSidebarState(updatedLeftSidebarState);
-
+    function finish() {
+      handleDataAttributesAndCb(stableRef.current.onExpand, false,
+      // isCollapsed
+      updatedLeftSidebarState);
+    }
+    var sidebar = document.querySelector(leftSidebarSelector);
     // onTransitionEnd isn't triggered when a user prefers reduced motion
-    if ((0, _motion.isReducedMotion)()) {
-      handleDataAttributesAndCb(onExpand, false, updatedLeftSidebarState);
+    if ((0, _motion.isReducedMotion)() || !sidebar) {
+      finish();
+      return;
     }
-  }, [leftSidebarState, onExpand]);
+    var unbindEvent = (0, _bindEventListener.bind)(sidebar, {
+      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 value = {
+      action: 'expand',
+      complete: function complete() {
+        value.abort();
+        finish();
+      },
+      abort: function abort() {
+        unbindEvent();
+        transition.current = null;
+      }
+    };
+    transition.current = value;
+  }, [leftSidebarState]);
   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;
-    if (isResizing || isLeftSidebarCollapsed) {
+    if (isResizing || isLeftSidebarCollapsed ||
+    // already collapsing
+    ((_transition$current4 = transition.current) === null || _transition$current4 === void 0 ? void 0 : _transition$current4.action) === 'collapse') {
       return;
     }
 
+    // flush existing transition
+    (_transition$current5 = transition.current) === null || _transition$current5 === void 0 ? void 0 : _transition$current5.complete();
+
     // data-attribute is used as a CSS selector to sync the hiding/showing
     // of the nav contents with expand/collapse animation
     document.documentElement.setAttribute(_constants.IS_SIDEBAR_COLLAPSING, 'true');
@@ -109,12 +144,46 @@ var SidebarResizeController = function SidebarResizeController(_ref) {
       isFixed: isFixed
     };
     setLeftSidebarState(updatedLeftSidebarState);
+    function finish() {
+      handleDataAttributesAndCb(stableRef.current.onCollapse, true, updatedLeftSidebarState);
+    }
+    var sidebar = document.querySelector(leftSidebarSelector);
 
     // onTransitionEnd isn't triggered when a user prefers reduced motion
-    if (collapseWithoutTransition || (0, _motion.isReducedMotion)()) {
-      handleDataAttributesAndCb(onCollapse, true, updatedLeftSidebarState);
+    if (collapseWithoutTransition || (0, _motion.isReducedMotion)() || !sidebar) {
+      finish();
+      return;
     }
-  }, [leftSidebarState, onCollapse]);
+    var unbindEvent = (0, _bindEventListener.bind)(sidebar, {
+      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 value = {
+      action: 'collapse',
+      complete: function complete() {
+        value.abort();
+        finish();
+      },
+      abort: function abort() {
+        unbindEvent();
+        transition.current = null;
+      }
+    };
+    transition.current = value;
+  }, [leftSidebarState]);
+
+  // 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 context = (0, _react.useMemo)(function () {
     return {
       isLeftSidebarCollapsed: isLeftSidebarCollapsed,

package/dist/cjs/version.json

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

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

@@ -43,7 +43,7 @@ const ResizeControl = ({
     isLeftSidebarCollapsed,
     isResizing
   } = leftSidebarState;
-  const x = useRef(leftSidebarState[VAR_LEFT_SIDEBAR_WIDTH]);
+  const sidebarWidth = useRef(leftSidebarState[VAR_LEFT_SIDEBAR_WIDTH]);
   // Distance of mouse from left sidebar onMouseDown
   const offset = useRef(0);
   const keyboardEventTimeout = useRef();
@@ -70,13 +70,67 @@ const ResizeControl = ({
     if (isLeftSidebarCollapsed) {
       return;
     }
+
+    // TODO: should only a primary pointer be able to start a resize?
+    // Keeping as is for now, but worth considering
+
+    // It is possible for a mousedown to fire during a resize
+    // Example: the user presses another pointer button while dragging
+    if (leftSidebarState.isResizing) {
+      // the resize will be cancelled by our global event listeners
+      return;
+    }
     offset.current = event.clientX - leftSidebarState[VAR_LEFT_SIDEBAR_WIDTH] - getLeftPanelWidth();
-    unbindEvents.current = bindAll(document, [{
+    unbindEvents.current = bindAll(window, [{
       type: 'mousemove',
-      listener: onMouseMove
+      listener: onUpdateResize
     }, {
       type: 'mouseup',
-      listener: onMouseUp
+      listener: onFinishResizing
+    }, {
+      type: 'mousedown',
+      // this mousedown event listener is being added in the bubble phase
+      // on a higher event target than the resize handle.
+      // This means that the original mousedown event that triggers a resize
+      // can hit this mousedown handler. To get around that, we only call
+      // `onFinishResizing` after an animation frame so we don't pick up the original event
+      // Alternatives:
+      // 1. Add the window 'mousedown' event listener in the capture phase
+      // 👎 A 'mousedown' during a resize would trigger a new resize to start
+      // 2. Do 1. and call `event.preventDefault()`, then check for `event.defaultPrevented` inside
+      // the grab handle `onMouseDown`
+      // 👎 Not ideal to cancel events if we don't have to
+      listener: (() => {
+        let hasFramePassed = false;
+        requestAnimationFrame(() => {
+          hasFramePassed = true;
+        });
+        return function listener() {
+          if (hasFramePassed) {
+            onFinishResizing();
+          }
+        };
+      })()
+    }, {
+      type: 'visibilitychange',
+      listener: onFinishResizing
+    },
+    // A 'click' event should never be hit as the 'mouseup' will come first and cause
+    // these event listeners to be unbound. I just added 'click' for extreme safety (paranoia)
+    {
+      type: 'click',
+      listener: onFinishResizing
+    }, {
+      type: 'keydown',
+      listener: event => {
+        // Can cancel resizing by pressing "Escape"
+        // Will return sidebar to the same size it was before the resizing started
+        if (event.key === 'Escape') {
+          sidebarWidth.current = Math.max(leftSidebarState.lastLeftSidebarWidth, COLLAPSED_LEFT_SIDEBAR_WIDTH);
+          document.documentElement.style.setProperty(`--${VAR_LEFT_SIDEBAR_WIDTH}`, `${sidebarWidth.current}px`);
+          onFinishResizing();
+        }
+      }
     }]);
     document.documentElement.setAttribute(IS_SIDEBAR_DRAGGING, 'true');
     const newLeftbarState = {
@@ -86,39 +140,40 @@ const ResizeControl = ({
     setLeftSidebarState(newLeftbarState);
     onResizeStart && onResizeStart(newLeftbarState);
   };
-  const cancelDrag = shouldCollapse => {
+  const onResizeOffLeftOfScreen = () => {
     var _unbindEvents$current;
-    onMouseMove.cancel();
+    onUpdateResize.cancel();
     (_unbindEvents$current = unbindEvents.current) === null || _unbindEvents$current === void 0 ? void 0 : _unbindEvents$current.call(unbindEvents);
     unbindEvents.current = null;
     document.documentElement.removeAttribute(IS_SIDEBAR_DRAGGING);
     offset.current = 0;
     collapseLeftSidebar(undefined, true);
   };
-  const onMouseMove = rafSchd(event => {
+  const onUpdateResize = rafSchd(event => {
     // Allow the sidebar to be 50% of the available page width
     const maxWidth = Math.round(window.innerWidth / 2);
     const leftPanelWidth = getLeftPanelWidth();
     const {
       leftSidebarWidth
     } = leftSidebarState;
-    const invalidDrag = event.clientX < 0;
-    if (invalidDrag) {
-      cancelDrag();
+    const hasResizedOffLeftOfScreen = event.clientX < 0;
+    if (hasResizedOffLeftOfScreen) {
+      onResizeOffLeftOfScreen();
+      return;
     }
     const delta = Math.max(Math.min(event.clientX - leftSidebarWidth - leftPanelWidth, maxWidth - leftSidebarWidth - leftPanelWidth), COLLAPSED_LEFT_SIDEBAR_WIDTH - leftSidebarWidth - leftPanelWidth);
-    x.current = Math.max(leftSidebarWidth + delta - offset.current, COLLAPSED_LEFT_SIDEBAR_WIDTH);
-    document.documentElement.style.setProperty(`--${VAR_LEFT_SIDEBAR_WIDTH}`, `${x.current}px`);
+    sidebarWidth.current = Math.max(leftSidebarWidth + delta - offset.current, COLLAPSED_LEFT_SIDEBAR_WIDTH);
+    document.documentElement.style.setProperty(`--${VAR_LEFT_SIDEBAR_WIDTH}`, `${sidebarWidth.current}px`);
   });
   const cleanupAfterResize = () => {
     var _unbindEvents$current2;
-    x.current = 0;
+    sidebarWidth.current = 0;
     offset.current = 0;
     (_unbindEvents$current2 = unbindEvents.current) === null || _unbindEvents$current2 === void 0 ? void 0 : _unbindEvents$current2.call(unbindEvents);
     unbindEvents.current = null;
   };
   let updatedLeftSidebarState = {};
-  const onMouseUp = event => {
+  const onFinishResizing = () => {
     if (isLeftSidebarCollapsed) {
       return;
     }
@@ -126,14 +181,14 @@ const ResizeControl = ({
 
     // If it is dragged to below the threshold,
     // collapse the navigation
-    if (x.current < MIN_LEFT_SIDEBAR_DRAG_THRESHOLD) {
+    if (sidebarWidth.current < MIN_LEFT_SIDEBAR_DRAG_THRESHOLD) {
       document.documentElement.style.setProperty(`--${VAR_LEFT_SIDEBAR_WIDTH}`, `${COLLAPSED_LEFT_SIDEBAR_WIDTH}px`);
       collapseLeftSidebar(undefined, true);
     }
     // If it is dragged to position in between the
     // min threshold and default width
     // expand the nav to the default width
-    else if (x.current > MIN_LEFT_SIDEBAR_DRAG_THRESHOLD && x.current < DEFAULT_LEFT_SIDEBAR_WIDTH) {
+    else if (sidebarWidth.current > MIN_LEFT_SIDEBAR_DRAG_THRESHOLD && sidebarWidth.current < DEFAULT_LEFT_SIDEBAR_WIDTH) {
       document.documentElement.style.setProperty(`--${VAR_LEFT_SIDEBAR_WIDTH}`, `${DEFAULT_LEFT_SIDEBAR_WIDTH}px`);
       updatedLeftSidebarState = {
         ...leftSidebarState,
@@ -147,13 +202,13 @@ const ResizeControl = ({
       updatedLeftSidebarState = {
         ...leftSidebarState,
         isResizing: false,
-        [VAR_LEFT_SIDEBAR_WIDTH]: x.current,
-        lastLeftSidebarWidth: x.current
+        [VAR_LEFT_SIDEBAR_WIDTH]: sidebarWidth.current,
+        lastLeftSidebarWidth: sidebarWidth.current
       };
       setLeftSidebarState(updatedLeftSidebarState);
     }
     requestAnimationFrame(() => {
-      onMouseMove.cancel();
+      onUpdateResize.cancel();
       setIsGrabAreaFocused(false);
       onResizeEnd && onResizeEnd(updatedLeftSidebarState);
       cleanupAfterResize();

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

@@ -1,14 +1,15 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+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 { COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_WIDTH, GRAB_AREA_SELECTOR, IS_SIDEBAR_COLLAPSING } from '../common/constants';
+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) => {
   document.documentElement.removeAttribute(IS_SIDEBAR_COLLAPSING);
   callback(leftSidebarState);
 };
-
+const leftSidebarSelector = getPageLayoutSlotCSSSelector('left-sidebar');
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export const SidebarResizeController = ({
   children,
@@ -27,36 +28,37 @@ export const SidebarResizeController = ({
   const {
     isLeftSidebarCollapsed
   } = leftSidebarState;
-  const leftSidebarSelector = getPageLayoutSlotCSSSelector('left-sidebar');
-  const transitionEventHandler = useCallback(event => {
-    if (event.propertyName === 'width' && event.target && event.target.matches(leftSidebarSelector)) {
-      const $leftSidebarResizeController = document.querySelector(`[${GRAB_AREA_SELECTOR}]`);
-      const isCollapsed = !!$leftSidebarResizeController && $leftSidebarResizeController.hasAttribute('disabled');
-      handleDataAttributesAndCb(isCollapsed ? onCollapse : onExpand, isCollapsed, leftSidebarState);
 
-      // Make sure multiple event handlers do not get attached
-      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
-      document.querySelector(leftSidebarSelector).removeEventListener('transitionend', transitionEventHandler);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  // We put the latest callbacks into a ref so we can always have the latest
+  // functions in our transitionend listeners
+  const stableRef = useRef({
+    onExpand,
+    onCollapse
+  });
   useEffect(() => {
-    const $leftSidebar = document.querySelector(leftSidebarSelector);
-    if ($leftSidebar && !isReducedMotion()) {
-      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
-      $leftSidebar.addEventListener('transitionend', transitionEventHandler);
-    }
-  }, [isLeftSidebarCollapsed, leftSidebarSelector, leftSidebarState, onCollapse, onExpand, transitionEventHandler]);
+    stableRef.current = {
+      onExpand,
+      onCollapse
+    };
+  });
+  const transition = useRef(null);
   const expandLeftSidebar = useCallback(() => {
+    var _transition$current, _transition$current2;
     const {
       lastLeftSidebarWidth,
       isResizing,
       flyoutLockCount,
-      isFixed
+      isFixed,
+      isLeftSidebarCollapsed
     } = leftSidebarState;
-    if (isResizing) {
+    if (isResizing || !isLeftSidebarCollapsed ||
+    // already expanding
+    ((_transition$current = transition.current) === null || _transition$current === void 0 ? void 0 : _transition$current.action) === 'expand') {
       return;
     }
+
+    // flush existing transition
+    (_transition$current2 = transition.current) === null || _transition$current2 === void 0 ? void 0 : _transition$current2.complete();
     const width = Math.max(lastLeftSidebarWidth, DEFAULT_LEFT_SIDEBAR_WIDTH);
     const updatedLeftSidebarState = {
       isLeftSidebarCollapsed: false,
@@ -68,13 +70,41 @@ export const SidebarResizeController = ({
       isFixed
     };
     setLeftSidebarState(updatedLeftSidebarState);
-
+    function finish() {
+      handleDataAttributesAndCb(stableRef.current.onExpand, false,
+      // isCollapsed
+      updatedLeftSidebarState);
+    }
+    const sidebar = document.querySelector(leftSidebarSelector);
     // onTransitionEnd isn't triggered when a user prefers reduced motion
-    if (isReducedMotion()) {
-      handleDataAttributesAndCb(onExpand, false, updatedLeftSidebarState);
+    if (isReducedMotion() || !sidebar) {
+      finish();
+      return;
     }
-  }, [leftSidebarState, onExpand]);
+    const unbindEvent = bind(sidebar, {
+      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();
+        }
+      }
+    });
+    const value = {
+      action: 'expand',
+      complete: () => {
+        value.abort();
+        finish();
+      },
+      abort: () => {
+        unbindEvent();
+        transition.current = null;
+      }
+    };
+    transition.current = value;
+  }, [leftSidebarState]);
   const collapseLeftSidebar = useCallback((event, collapseWithoutTransition) => {
+    var _transition$current4, _transition$current5;
     const {
       leftSidebarWidth,
       isResizing,
@@ -82,10 +112,15 @@ export const SidebarResizeController = ({
       isFixed,
       isLeftSidebarCollapsed
     } = leftSidebarState;
-    if (isResizing || isLeftSidebarCollapsed) {
+    if (isResizing || isLeftSidebarCollapsed ||
+    // already collapsing
+    ((_transition$current4 = transition.current) === null || _transition$current4 === void 0 ? void 0 : _transition$current4.action) === 'collapse') {
       return;
     }
 
+    // flush existing transition
+    (_transition$current5 = transition.current) === null || _transition$current5 === void 0 ? void 0 : _transition$current5.complete();
+
     // data-attribute is used as a CSS selector to sync the hiding/showing
     // of the nav contents with expand/collapse animation
     document.documentElement.setAttribute(IS_SIDEBAR_COLLAPSING, 'true');
@@ -99,12 +134,46 @@ export const SidebarResizeController = ({
       isFixed
     };
     setLeftSidebarState(updatedLeftSidebarState);
+    function finish() {
+      handleDataAttributesAndCb(stableRef.current.onCollapse, true, updatedLeftSidebarState);
+    }
+    const sidebar = document.querySelector(leftSidebarSelector);
 
     // onTransitionEnd isn't triggered when a user prefers reduced motion
-    if (collapseWithoutTransition || isReducedMotion()) {
-      handleDataAttributesAndCb(onCollapse, true, updatedLeftSidebarState);
+    if (collapseWithoutTransition || isReducedMotion() || !sidebar) {
+      finish();
+      return;
     }
-  }, [leftSidebarState, onCollapse]);
+    const unbindEvent = bind(sidebar, {
+      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();
+        }
+      }
+    });
+    const value = {
+      action: 'collapse',
+      complete: () => {
+        value.abort();
+        finish();
+      },
+      abort: () => {
+        unbindEvent();
+        transition.current = null;
+      }
+    };
+    transition.current = value;
+  }, [leftSidebarState]);
+
+  // 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();
+    };
+  }, []);
   const context = useMemo(() => ({
     isLeftSidebarCollapsed,
     expandLeftSidebar,

package/dist/es2019/version.json

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

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

@@ -43,7 +43,7 @@ var ResizeControl = function ResizeControl(_ref) {
     setLeftSidebarState = _useContext.setLeftSidebarState;
   var isLeftSidebarCollapsed = leftSidebarState.isLeftSidebarCollapsed,
     isResizing = leftSidebarState.isResizing;
-  var x = useRef(leftSidebarState[VAR_LEFT_SIDEBAR_WIDTH]);
+  var sidebarWidth = useRef(leftSidebarState[VAR_LEFT_SIDEBAR_WIDTH]);
   // Distance of mouse from left sidebar onMouseDown
   var offset = useRef(0);
   var keyboardEventTimeout = useRef();
@@ -73,13 +73,67 @@ var ResizeControl = function ResizeControl(_ref) {
     if (isLeftSidebarCollapsed) {
       return;
     }
+
+    // TODO: should only a primary pointer be able to start a resize?
+    // Keeping as is for now, but worth considering
+
+    // It is possible for a mousedown to fire during a resize
+    // Example: the user presses another pointer button while dragging
+    if (leftSidebarState.isResizing) {
+      // the resize will be cancelled by our global event listeners
+      return;
+    }
     offset.current = event.clientX - leftSidebarState[VAR_LEFT_SIDEBAR_WIDTH] - getLeftPanelWidth();
-    unbindEvents.current = bindAll(document, [{
+    unbindEvents.current = bindAll(window, [{
       type: 'mousemove',
-      listener: onMouseMove
+      listener: onUpdateResize
     }, {
       type: 'mouseup',
-      listener: onMouseUp
+      listener: onFinishResizing
+    }, {
+      type: 'mousedown',
+      // this mousedown event listener is being added in the bubble phase
+      // on a higher event target than the resize handle.
+      // This means that the original mousedown event that triggers a resize
+      // can hit this mousedown handler. To get around that, we only call
+      // `onFinishResizing` after an animation frame so we don't pick up the original event
+      // Alternatives:
+      // 1. Add the window 'mousedown' event listener in the capture phase
+      // 👎 A 'mousedown' during a resize would trigger a new resize to start
+      // 2. Do 1. and call `event.preventDefault()`, then check for `event.defaultPrevented` inside
+      // the grab handle `onMouseDown`
+      // 👎 Not ideal to cancel events if we don't have to
+      listener: function () {
+        var hasFramePassed = false;
+        requestAnimationFrame(function () {
+          hasFramePassed = true;
+        });
+        return function listener() {
+          if (hasFramePassed) {
+            onFinishResizing();
+          }
+        };
+      }()
+    }, {
+      type: 'visibilitychange',
+      listener: onFinishResizing
+    },
+    // A 'click' event should never be hit as the 'mouseup' will come first and cause
+    // these event listeners to be unbound. I just added 'click' for extreme safety (paranoia)
+    {
+      type: 'click',
+      listener: onFinishResizing
+    }, {
+      type: 'keydown',
+      listener: function listener(event) {
+        // Can cancel resizing by pressing "Escape"
+        // Will return sidebar to the same size it was before the resizing started
+        if (event.key === 'Escape') {
+          sidebarWidth.current = Math.max(leftSidebarState.lastLeftSidebarWidth, COLLAPSED_LEFT_SIDEBAR_WIDTH);
+          document.documentElement.style.setProperty("--".concat(VAR_LEFT_SIDEBAR_WIDTH), "".concat(sidebarWidth.current, "px"));
+          onFinishResizing();
+        }
+      }
     }]);
     document.documentElement.setAttribute(IS_SIDEBAR_DRAGGING, 'true');
     var newLeftbarState = _objectSpread(_objectSpread({}, leftSidebarState), {}, {
@@ -88,37 +142,38 @@ var ResizeControl = function ResizeControl(_ref) {
     setLeftSidebarState(newLeftbarState);
     onResizeStart && onResizeStart(newLeftbarState);
   };
-  var cancelDrag = function cancelDrag(shouldCollapse) {
+  var onResizeOffLeftOfScreen = function onResizeOffLeftOfScreen() {
     var _unbindEvents$current;
-    onMouseMove.cancel();
+    onUpdateResize.cancel();
     (_unbindEvents$current = unbindEvents.current) === null || _unbindEvents$current === void 0 ? void 0 : _unbindEvents$current.call(unbindEvents);
     unbindEvents.current = null;
     document.documentElement.removeAttribute(IS_SIDEBAR_DRAGGING);
     offset.current = 0;
     collapseLeftSidebar(undefined, true);
   };
-  var onMouseMove = rafSchd(function (event) {
+  var onUpdateResize = rafSchd(function (event) {
     // Allow the sidebar to be 50% of the available page width
     var maxWidth = Math.round(window.innerWidth / 2);
     var leftPanelWidth = getLeftPanelWidth();
     var leftSidebarWidth = leftSidebarState.leftSidebarWidth;
-    var invalidDrag = event.clientX < 0;
-    if (invalidDrag) {
-      cancelDrag();
+    var hasResizedOffLeftOfScreen = event.clientX < 0;
+    if (hasResizedOffLeftOfScreen) {
+      onResizeOffLeftOfScreen();
+      return;
     }
     var delta = Math.max(Math.min(event.clientX - leftSidebarWidth - leftPanelWidth, maxWidth - leftSidebarWidth - leftPanelWidth), COLLAPSED_LEFT_SIDEBAR_WIDTH - leftSidebarWidth - leftPanelWidth);
-    x.current = Math.max(leftSidebarWidth + delta - offset.current, COLLAPSED_LEFT_SIDEBAR_WIDTH);
-    document.documentElement.style.setProperty("--".concat(VAR_LEFT_SIDEBAR_WIDTH), "".concat(x.current, "px"));
+    sidebarWidth.current = Math.max(leftSidebarWidth + delta - offset.current, COLLAPSED_LEFT_SIDEBAR_WIDTH);
+    document.documentElement.style.setProperty("--".concat(VAR_LEFT_SIDEBAR_WIDTH), "".concat(sidebarWidth.current, "px"));
   });
   var cleanupAfterResize = function cleanupAfterResize() {
     var _unbindEvents$current2;
-    x.current = 0;
+    sidebarWidth.current = 0;
     offset.current = 0;
     (_unbindEvents$current2 = unbindEvents.current) === null || _unbindEvents$current2 === void 0 ? void 0 : _unbindEvents$current2.call(unbindEvents);
     unbindEvents.current = null;
   };
   var updatedLeftSidebarState = {};
-  var onMouseUp = function onMouseUp(event) {
+  var onFinishResizing = function onFinishResizing() {
     if (isLeftSidebarCollapsed) {
       return;
     }
@@ -126,14 +181,14 @@ var ResizeControl = function ResizeControl(_ref) {
 
     // If it is dragged to below the threshold,
     // collapse the navigation
-    if (x.current < MIN_LEFT_SIDEBAR_DRAG_THRESHOLD) {
+    if (sidebarWidth.current < MIN_LEFT_SIDEBAR_DRAG_THRESHOLD) {
       document.documentElement.style.setProperty("--".concat(VAR_LEFT_SIDEBAR_WIDTH), "".concat(COLLAPSED_LEFT_SIDEBAR_WIDTH, "px"));
       collapseLeftSidebar(undefined, true);
     }
     // If it is dragged to position in between the
     // min threshold and default width
     // expand the nav to the default width
-    else if (x.current > MIN_LEFT_SIDEBAR_DRAG_THRESHOLD && x.current < DEFAULT_LEFT_SIDEBAR_WIDTH) {
+    else if (sidebarWidth.current > MIN_LEFT_SIDEBAR_DRAG_THRESHOLD && sidebarWidth.current < DEFAULT_LEFT_SIDEBAR_WIDTH) {
       var _objectSpread2;
       document.documentElement.style.setProperty("--".concat(VAR_LEFT_SIDEBAR_WIDTH), "".concat(DEFAULT_LEFT_SIDEBAR_WIDTH, "px"));
       updatedLeftSidebarState = _objectSpread(_objectSpread({}, leftSidebarState), {}, (_objectSpread2 = {
@@ -145,11 +200,11 @@ var ResizeControl = function ResizeControl(_ref) {
       // otherwise resize it to the desired width
       updatedLeftSidebarState = _objectSpread(_objectSpread({}, leftSidebarState), {}, (_objectSpread3 = {
         isResizing: false
-      }, _defineProperty(_objectSpread3, VAR_LEFT_SIDEBAR_WIDTH, x.current), _defineProperty(_objectSpread3, "lastLeftSidebarWidth", x.current), _objectSpread3));
+      }, _defineProperty(_objectSpread3, VAR_LEFT_SIDEBAR_WIDTH, sidebarWidth.current), _defineProperty(_objectSpread3, "lastLeftSidebarWidth", sidebarWidth.current), _objectSpread3));
       setLeftSidebarState(updatedLeftSidebarState);
     }
     requestAnimationFrame(function () {
-      onMouseMove.cancel();
+      onUpdateResize.cancel();
       setIsGrabAreaFocused(false);
       onResizeEnd && onResizeEnd(updatedLeftSidebarState);
       cleanupAfterResize();

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

@@ -1,8 +1,9 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+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 { COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_WIDTH, GRAB_AREA_SELECTOR, IS_SIDEBAR_COLLAPSING } from '../common/constants';
+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';
 var handleDataAttributesAndCb = function handleDataAttributesAndCb() {
@@ -12,7 +13,7 @@ var handleDataAttributesAndCb = function handleDataAttributesAndCb() {
   document.documentElement.removeAttribute(IS_SIDEBAR_COLLAPSING);
   callback(leftSidebarState);
 };
-
+var leftSidebarSelector = getPageLayoutSlotCSSSelector('left-sidebar');
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export var SidebarResizeController = function SidebarResizeController(_ref) {
   var children = _ref.children,
@@ -31,34 +32,35 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
     leftSidebarState = _useState2[0],
     setLeftSidebarState = _useState2[1];
   var isLeftSidebarCollapsed = leftSidebarState.isLeftSidebarCollapsed;
-  var leftSidebarSelector = getPageLayoutSlotCSSSelector('left-sidebar');
-  var transitionEventHandler = useCallback(function (event) {
-    if (event.propertyName === 'width' && event.target && event.target.matches(leftSidebarSelector)) {
-      var $leftSidebarResizeController = document.querySelector("[".concat(GRAB_AREA_SELECTOR, "]"));
-      var isCollapsed = !!$leftSidebarResizeController && $leftSidebarResizeController.hasAttribute('disabled');
-      handleDataAttributesAndCb(isCollapsed ? onCollapse : onExpand, isCollapsed, leftSidebarState);
 
-      // Make sure multiple event handlers do not get attached
-      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
-      document.querySelector(leftSidebarSelector).removeEventListener('transitionend', transitionEventHandler);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  // We put the latest callbacks into a ref so we can always have the latest
+  // functions in our transitionend listeners
+  var stableRef = useRef({
+    onExpand: onExpand,
+    onCollapse: onCollapse
+  });
   useEffect(function () {
-    var $leftSidebar = document.querySelector(leftSidebarSelector);
-    if ($leftSidebar && !isReducedMotion()) {
-      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
-      $leftSidebar.addEventListener('transitionend', transitionEventHandler);
-    }
-  }, [isLeftSidebarCollapsed, leftSidebarSelector, leftSidebarState, onCollapse, onExpand, transitionEventHandler]);
+    stableRef.current = {
+      onExpand: onExpand,
+      onCollapse: onCollapse
+    };
+  });
+  var transition = useRef(null);
   var expandLeftSidebar = useCallback(function () {
+    var _transition$current, _transition$current2;
     var lastLeftSidebarWidth = leftSidebarState.lastLeftSidebarWidth,
       isResizing = leftSidebarState.isResizing,
       flyoutLockCount = leftSidebarState.flyoutLockCount,
-      isFixed = leftSidebarState.isFixed;
-    if (isResizing) {
+      isFixed = leftSidebarState.isFixed,
+      isLeftSidebarCollapsed = leftSidebarState.isLeftSidebarCollapsed;
+    if (isResizing || !isLeftSidebarCollapsed ||
+    // already expanding
+    ((_transition$current = transition.current) === null || _transition$current === void 0 ? void 0 : _transition$current.action) === 'expand') {
       return;
     }
+
+    // flush existing transition
+    (_transition$current2 = transition.current) === null || _transition$current2 === void 0 ? void 0 : _transition$current2.complete();
     var width = Math.max(lastLeftSidebarWidth, DEFAULT_LEFT_SIDEBAR_WIDTH);
     var updatedLeftSidebarState = {
       isLeftSidebarCollapsed: false,
@@ -70,22 +72,55 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
       isFixed: isFixed
     };
     setLeftSidebarState(updatedLeftSidebarState);
-
+    function finish() {
+      handleDataAttributesAndCb(stableRef.current.onExpand, false,
+      // isCollapsed
+      updatedLeftSidebarState);
+    }
+    var sidebar = document.querySelector(leftSidebarSelector);
     // onTransitionEnd isn't triggered when a user prefers reduced motion
-    if (isReducedMotion()) {
-      handleDataAttributesAndCb(onExpand, false, updatedLeftSidebarState);
+    if (isReducedMotion() || !sidebar) {
+      finish();
+      return;
     }
-  }, [leftSidebarState, onExpand]);
+    var unbindEvent = bind(sidebar, {
+      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 value = {
+      action: 'expand',
+      complete: function complete() {
+        value.abort();
+        finish();
+      },
+      abort: function abort() {
+        unbindEvent();
+        transition.current = null;
+      }
+    };
+    transition.current = value;
+  }, [leftSidebarState]);
   var collapseLeftSidebar = 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;
-    if (isResizing || isLeftSidebarCollapsed) {
+    if (isResizing || isLeftSidebarCollapsed ||
+    // already collapsing
+    ((_transition$current4 = transition.current) === null || _transition$current4 === void 0 ? void 0 : _transition$current4.action) === 'collapse') {
       return;
     }
 
+    // flush existing transition
+    (_transition$current5 = transition.current) === null || _transition$current5 === void 0 ? void 0 : _transition$current5.complete();
+
     // data-attribute is used as a CSS selector to sync the hiding/showing
     // of the nav contents with expand/collapse animation
     document.documentElement.setAttribute(IS_SIDEBAR_COLLAPSING, 'true');
@@ -99,12 +134,46 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
       isFixed: isFixed
     };
     setLeftSidebarState(updatedLeftSidebarState);
+    function finish() {
+      handleDataAttributesAndCb(stableRef.current.onCollapse, true, updatedLeftSidebarState);
+    }
+    var sidebar = document.querySelector(leftSidebarSelector);
 
     // onTransitionEnd isn't triggered when a user prefers reduced motion
-    if (collapseWithoutTransition || isReducedMotion()) {
-      handleDataAttributesAndCb(onCollapse, true, updatedLeftSidebarState);
+    if (collapseWithoutTransition || isReducedMotion() || !sidebar) {
+      finish();
+      return;
     }
-  }, [leftSidebarState, onCollapse]);
+    var unbindEvent = bind(sidebar, {
+      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 value = {
+      action: 'collapse',
+      complete: function complete() {
+        value.abort();
+        finish();
+      },
+      abort: function abort() {
+        unbindEvent();
+        transition.current = null;
+      }
+    };
+    transition.current = value;
+  }, [leftSidebarState]);
+
+  // 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 context = useMemo(function () {
     return {
       isLeftSidebarCollapsed: isLeftSidebarCollapsed,

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/page-layout",
-  "version": "1.3.10",
+  "version": "1.5.0",
   "description": "A collection of components which let you compose an application's page layout.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,7 +28,7 @@
     "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/icon": "^21.11.0",
     "@atlaskit/motion": "^1.3.0",
-    "@atlaskit/theme": "^12.3.0",
+    "@atlaskit/theme": "^12.4.0",
     "@atlaskit/tokens": "^1.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -40,17 +40,17 @@
     "react-dom": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/atlassian-navigation": "^2.3.0",
+    "@atlaskit/atlassian-navigation": "^2.4.0",
     "@atlaskit/atlassian-notifications": "^0.3.0",
-    "@atlaskit/button": "^16.5.0",
+    "@atlaskit/button": "^16.6.0",
     "@atlaskit/docs": "*",
     "@atlaskit/drawer": "^7.4.0",
     "@atlaskit/icon": "*",
-    "@atlaskit/logo": "^13.11.0",
+    "@atlaskit/logo": "^13.13.0",
     "@atlaskit/menu": "^1.5.0",
     "@atlaskit/notification-indicator": "^9.0.0",
     "@atlaskit/notification-log-client": "^6.0.0",
-    "@atlaskit/onboarding": "^10.6.0",
+    "@atlaskit/onboarding": "^10.7.0",
     "@atlaskit/popup": "^1.5.0",
     "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/side-navigation": "^1.6.0",