@atlaskit/page-layout 1.3.10 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/page-layout
 
+## 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

@@ -42,12 +42,29 @@ var SidebarResizeController = function SidebarResizeController(_ref) {
     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(isCollapsed ? onCollapse : onExpand, isCollapsed, leftSidebarState);
+      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);
@@ -57,6 +74,11 @@ var SidebarResizeController = function SidebarResizeController(_ref) {
   (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);
     }

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/page-layout",
-	"version": "1.3.10",
+	"version": "1.4.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

@@ -28,12 +28,29 @@ export const SidebarResizeController = ({
     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(isCollapsed ? onCollapse : onExpand, isCollapsed, leftSidebarState);
+      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);
@@ -43,6 +60,11 @@ export const SidebarResizeController = ({
   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);
     }

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/page-layout",
-	"version": "1.3.10",
+	"version": "1.4.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

@@ -32,12 +32,29 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
     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(isCollapsed ? onCollapse : onExpand, isCollapsed, leftSidebarState);
+      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);
@@ -47,6 +64,11 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
   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);
     }

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/page-layout",
-  "version": "1.3.10",
+  "version": "1.4.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",