@atlaskit/page-layout 1.4.0 → 1.6.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @atlaskit/page-layout
 
+## 1.6.0
+
+### Minor Changes
+
+- [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
+
+### Patch Changes
+
+- Updated dependencies
+
+## 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

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,56 +42,35 @@ var SidebarResizeController = function SidebarResizeController(_ref) {
     leftSidebarState = _useState2[0],
     setLeftSidebarState = _useState2[1];
   var isLeftSidebarCollapsed = leftSidebarState.isLeftSidebarCollapsed;
-  var leftSidebarSelector = (0, _utils.getPageLayoutSlotCSSSelector)('left-sidebar');
-
-  /**
-   * Bug: this function will cause `onExpand` / `onCollapse` when any
-   * `width` transition occurs (eg when cancelling a resizing)
-   * This
-   */
-  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(
-      /**
-       * Bug: `onCollapse` and `onExpand` are stale after the first render
-       */
-      isCollapsed ? onCollapse : onExpand, isCollapsed,
-      /**
-       * Bug: `leftSidebarState` is stale after the first render
-       */
-      leftSidebarState);
 
-      /**
-       * TODO: this appears smelly. Let's do better
-       */
-      // 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)()) {
-      /**
-       * Note: This pattern relies on `transitionEventHandler` keeping a stable
-       * reference to continually adding event listeners.
-       * I think there should be a better way
-       */
-      // 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,
@@ -102,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');
@@ -131,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.4.0",
+	"version": "1.6.0",
 	"sideEffects": false
 }

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,58 +28,37 @@ export const SidebarResizeController = ({
   const {
     isLeftSidebarCollapsed
   } = leftSidebarState;
-  const leftSidebarSelector = getPageLayoutSlotCSSSelector('left-sidebar');
-
-  /**
-   * Bug: this function will cause `onExpand` / `onCollapse` when any
-   * `width` transition occurs (eg when cancelling a resizing)
-   * This
-   */
-  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(
-      /**
-       * Bug: `onCollapse` and `onExpand` are stale after the first render
-       */
-      isCollapsed ? onCollapse : onExpand, isCollapsed,
-      /**
-       * Bug: `leftSidebarState` is stale after the first render
-       */
-      leftSidebarState);
 
-      /**
-       * TODO: this appears smelly. Let's do better
-       */
-      // 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()) {
-      /**
-       * Note: This pattern relies on `transitionEventHandler` keeping a stable
-       * reference to continually adding event listeners.
-       * I think there should be a better way
-       */
-      // 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,
@@ -90,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,
@@ -104,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');
@@ -121,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.4.0",
+	"version": "1.6.0",
 	"sideEffects": false
 }

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,56 +32,35 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
     leftSidebarState = _useState2[0],
     setLeftSidebarState = _useState2[1];
   var isLeftSidebarCollapsed = leftSidebarState.isLeftSidebarCollapsed;
-  var leftSidebarSelector = getPageLayoutSlotCSSSelector('left-sidebar');
-
-  /**
-   * Bug: this function will cause `onExpand` / `onCollapse` when any
-   * `width` transition occurs (eg when cancelling a resizing)
-   * This
-   */
-  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(
-      /**
-       * Bug: `onCollapse` and `onExpand` are stale after the first render
-       */
-      isCollapsed ? onCollapse : onExpand, isCollapsed,
-      /**
-       * Bug: `leftSidebarState` is stale after the first render
-       */
-      leftSidebarState);
 
-      /**
-       * TODO: this appears smelly. Let's do better
-       */
-      // 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()) {
-      /**
-       * Note: This pattern relies on `transitionEventHandler` keeping a stable
-       * reference to continually adding event listeners.
-       * I think there should be a better way
-       */
-      // 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,
@@ -92,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');
@@ -121,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.4.0",
+	"version": "1.6.0",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/page-layout",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "description": "A collection of components which let you compose an application's page layout.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -25,11 +25,11 @@
   },
   "homepage": "https://atlassian.design/components/page-layout/",
   "dependencies": {
-    "@atlaskit/ds-lib": "^2.1.0",
-    "@atlaskit/icon": "^21.11.0",
-    "@atlaskit/motion": "^1.3.0",
-    "@atlaskit/theme": "^12.4.0",
-    "@atlaskit/tokens": "^1.2.0",
+    "@atlaskit/ds-lib": "^2.2.0",
+    "@atlaskit/icon": "^21.12.0",
+    "@atlaskit/motion": "^1.4.0",
+    "@atlaskit/theme": "^12.5.0",
+    "@atlaskit/tokens": "^1.3.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
@@ -40,20 +40,20 @@
     "react-dom": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/atlassian-navigation": "^2.4.0",
-    "@atlaskit/atlassian-notifications": "^0.3.0",
-    "@atlaskit/button": "^16.6.0",
+    "@atlaskit/atlassian-navigation": "^2.5.0",
+    "@atlaskit/atlassian-notifications": "^0.4.0",
+    "@atlaskit/button": "^16.7.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/drawer": "^7.4.0",
+    "@atlaskit/drawer": "^7.5.0",
     "@atlaskit/icon": "*",
-    "@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.7.0",
-    "@atlaskit/popup": "^1.5.0",
-    "@atlaskit/section-message": "^6.3.0",
-    "@atlaskit/side-navigation": "^1.6.0",
+    "@atlaskit/logo": "^13.14.0",
+    "@atlaskit/menu": "^1.6.0",
+    "@atlaskit/notification-indicator": "^9.1.0",
+    "@atlaskit/notification-log-client": "^6.1.0",
+    "@atlaskit/onboarding": "^10.8.0",
+    "@atlaskit/popup": "^1.6.0",
+    "@atlaskit/section-message": "^6.4.0",
+    "@atlaskit/side-navigation": "^1.7.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/tooltip": "*",
     "@atlaskit/visual-regression": "*",