@atlaskit/page-layout 1.6.2 → 1.6.4

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/page-layout
 
+## 1.6.4
+
+### Patch Changes
+
+- [`b1bdec7cce2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b1bdec7cce2) - Internal change to enforce token usage for spacing properties. There is no expected visual or behaviour change.
+
+## 1.6.3
+
+### Patch Changes
+
+- [`4bbc131de00`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4bbc131de00) - #### Fix: Resizing pages with `<iframe>`s
+
+  Pages that contain `<iframe>` elements will now have a smoother resizing experience. `<iframe>` elements consume user events (eg `mousemove`) when the user is over the top of them. This is problematic for resizing as we need to have the latest user pointer movements to resize the sidebar. Now, while a resize is happening, `pointer-events` are blocked on `<iframe>` elements to prevent the `<iframe>` consuming user events.
+
+  #### Fix: User cursor while resizing
+
+  While resizing the users cursor will now always be `ew-resize`. Previously the cursor could change depending on what element the users pointer was over
+
+  #### Fix: Resizing will no longer change user selection
+
+  A user can select parts of a page (eg select a paragraph of text). Previously, in some cases, a user's selection could change due to a resizing operation. This has been fixed so that a resizing operation will no longer change a user's selection
+
+  #### Fix: `onResizeEnd`
+
+  `onResizeEnd` will no longer incorrectly get an empty object `{}` if the user resized into the collapsed state
+
 ## 1.6.2
 
 ### Patch Changes

package/__perf__/utils/perf-example.tsx

@@ -18,7 +18,7 @@ import Sidebar from './product-integration/side-navigation';
 const wrapperStyles = css({
   boxSizing: 'border-box',
   height: '100%',
-  padding: 8,
+  padding: token('space.100', '8px'),
   backgroundColor: token('color.background.neutral.subtle', 'white'),
   outlineOffset: -4,
   overflowY: 'auto',

package/__perf__/utils/product-integration/notifications-popup.tsx

@@ -13,7 +13,9 @@ const wrapperStyles = css({
   display: 'flex',
   width: 540,
   height: 'calc(100vh - 200px)',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   paddingTop: 18,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   paddingLeft: 18,
 });
 

package/dist/cjs/common/hooks/use-is-sidebar-dragging.js

@@ -15,6 +15,9 @@ var getIsDragging = function getIsDragging() {
   }
   return document.documentElement.getAttribute(_constants.IS_SIDEBAR_DRAGGING) === 'true';
 };
+
+// TODO: I think this should be derived from the sidebar state,
+// and not indirectly from observing an attribute change
 var useIsSidebarDragging = function useIsSidebarDragging() {
   var _useState = (0, _react.useState)(getIsDragging),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),

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

@@ -25,12 +25,40 @@ var resizeControlStyles = (0, _react2.css)({
   position: 'absolute',
   top: 0,
   bottom: 0,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   left: '100%',
   outline: 'none'
 });
 var showResizeButtonStyles = (0, _react2.css)({
   '--ds--resize-button--opacity': 1
 });
+
+// @ts-expect-error adding `!important` to style rules is currently a type error
+var globalResizingStyles = (0, _react2.css)({
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '*': {
+    // Setting the cursor to be `ew-resize` on all elements so that even if the user
+    // pointer slips off the resize handle, the cursor will still be the resize cursor
+    cursor: 'ew-resize !important',
+    // Blocking selection while resizing
+    // Notes:
+    // - This prevents a user selection being caused by resizing
+    // - Safari + Firefox → all good
+    // - Chrome → This will undo the current selection while resizing (not ideal)
+    //   - The current selection will resume after resizing
+    userSelect: 'none !important'
+  },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  iframe: {
+    // Disabling pointer events on iframes when resizing
+    // as iframes will swallower user events when the user is over them
+    pointerEvents: 'none !important'
+  }
+  // Note: We _could_ also disable `pointer-events` on all elements during resizing.
+  // However, to minimize risk we are just disabling `pointer-events` on iframes
+  // as that change is actually needed to fix resizing with iframes
+});
+
 var ResizeControl = function ResizeControl(_ref) {
   var testId = _ref.testId,
     overrides = _ref.overrides,
@@ -56,6 +84,13 @@ var ResizeControl = function ResizeControl(_ref) {
     isGrabAreaFocused = _useState2[0],
     setIsGrabAreaFocused = _useState2[1];
   var unbindEvents = (0, _react.useRef)(null);
+
+  // Used in some cases to ensure function references don't have to change
+  // TODO: more functions could use `stableSidebarState` rather than `leftSidebarState`
+  var stableSidebarState = (0, _react.useRef)(leftSidebarState);
+  (0, _react.useEffect)(function () {
+    stableSidebarState.current = leftSidebarState;
+  }, [leftSidebarState]);
   var toggleSideBar = function toggleSideBar(e) {
     if (isResizing) {
       return;
@@ -90,7 +125,11 @@ var ResizeControl = function ResizeControl(_ref) {
     offset.current = event.clientX - leftSidebarState[_constants.VAR_LEFT_SIDEBAR_WIDTH] - (0, _utils.getLeftPanelWidth)();
     unbindEvents.current = (0, _bindEventListener.bindAll)(window, [{
       type: 'mousemove',
-      listener: onUpdateResize
+      listener: function listener(event) {
+        onUpdateResize({
+          clientX: event.clientX
+        });
+      }
     }, {
       type: 'mouseup',
       listener: onFinishResizing
@@ -155,37 +194,45 @@ var ResizeControl = function ResizeControl(_ref) {
     offset.current = 0;
     collapseLeftSidebar(undefined, true);
   };
-  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 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);
-    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;
-    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 = {};
+
+  // It is important that `onUpdateResize` is a stable function reference, so that:
+  // 1. we ensure we are correctly throttling with `requestAnimationFrame`
+  // 2. that a `onUpdateResize` will cancel the one and only pending frame
+  // To help ensure `onUpdateResize` is stable, we are putting the last state into a ref
+  var _useState3 = (0, _react.useState)(function () {
+      return (0, _rafSchd.default)(function (_ref2) {
+        var clientX = _ref2.clientX;
+        // 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 = stableSidebarState.current.leftSidebarWidth;
+        var hasResizedOffLeftOfScreen = clientX < 0;
+        if (hasResizedOffLeftOfScreen) {
+          onResizeOffLeftOfScreen();
+          return;
+        }
+        var delta = Math.max(Math.min(clientX - leftSidebarWidth - leftPanelWidth, maxWidth - leftSidebarWidth - leftPanelWidth), _constants.COLLAPSED_LEFT_SIDEBAR_WIDTH - leftSidebarWidth - leftPanelWidth);
+        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"));
+      });
+    }),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 1),
+    onUpdateResize = _useState4[0];
   var onFinishResizing = function onFinishResizing() {
+    var _unbindEvents$current2;
     if (isLeftSidebarCollapsed) {
       return;
     }
     document.documentElement.removeAttribute(_constants.IS_SIDEBAR_DRAGGING);
 
+    // TODO: the control flow is pretty strange as the first codepath which calls `collapseLeftSidebar()`
+    // does not return an updated state snapshot.
+    var updatedLeftSidebarState = null;
+
     // If it is dragged to below the threshold,
     // collapse the navigation
     if (sidebarWidth.current < _constants.MIN_LEFT_SIDEBAR_DRAG_THRESHOLD) {
+      // TODO: for this codepath, `onCollapse` occurs before `onResizeEnd` which seems wrong
       document.documentElement.style.setProperty("--".concat(_constants.VAR_LEFT_SIDEBAR_WIDTH), "".concat(_constants.COLLAPSED_LEFT_SIDEBAR_WIDTH, "px"));
       collapseLeftSidebar(undefined, true);
     }
@@ -207,11 +254,18 @@ var ResizeControl = function ResizeControl(_ref) {
       }, (0, _defineProperty2.default)(_objectSpread3, _constants.VAR_LEFT_SIDEBAR_WIDTH, sidebarWidth.current), (0, _defineProperty2.default)(_objectSpread3, "lastLeftSidebarWidth", sidebarWidth.current), _objectSpread3));
       setLeftSidebarState(updatedLeftSidebarState);
     }
+    (_unbindEvents$current2 = unbindEvents.current) === null || _unbindEvents$current2 === void 0 ? void 0 : _unbindEvents$current2.call(unbindEvents);
+    unbindEvents.current = null;
+    onUpdateResize.cancel();
+    sidebarWidth.current = 0;
+    offset.current = 0;
+
+    // TODO: no idea why this is in an animation frame
     requestAnimationFrame(function () {
-      onUpdateResize.cancel();
+      var _updatedLeftSidebarSt;
       setIsGrabAreaFocused(false);
-      onResizeEnd && onResizeEnd(updatedLeftSidebarState);
-      cleanupAfterResize();
+      // Note: the `collapseSidebar` codepath does not return state, so we need to pull it from the ref
+      onResizeEnd === null || onResizeEnd === void 0 ? void 0 : onResizeEnd((_updatedLeftSidebarSt = updatedLeftSidebarState) !== null && _updatedLeftSidebarSt !== void 0 ? _updatedLeftSidebarSt : stableSidebarState.current);
     });
   };
   var onKeyDown = function onKeyDown(event) {
@@ -281,7 +335,7 @@ var ResizeControl = function ResizeControl(_ref) {
   var leftSidebarPercentageExpanded = (0, _utils.getLeftSidebarPercentage)(leftSidebarState.leftSidebarWidth, maxAriaWidth);
 
   /* eslint-disable jsx-a11y/role-supports-aria-props */
-  return (0, _react2.jsx)("div", (0, _extends2.default)({}, cssSelector, {
+  return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("div", (0, _extends2.default)({}, cssSelector, {
     css: [resizeControlStyles, (isGrabAreaFocused || isLeftSidebarCollapsed) && showResizeButtonStyles]
   }), (0, _react2.jsx)(_shadow.default, {
     testId: testId && "".concat(testId, "-shadow")
@@ -304,7 +358,9 @@ var ResizeControl = function ResizeControl(_ref) {
     label: resizeButtonLabel,
     onClick: toggleSideBar,
     testId: testId && "".concat(testId, "-resize-button")
-  }));
+  })), leftSidebarState.isResizing ? (0, _react2.jsx)(_react2.Global, {
+    styles: globalResizingStyles
+  }) : null);
   /* eslint-enable jsx-a11y/role-supports-aria-props */
 };
 

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

@@ -18,17 +18,17 @@ var _excluded = ["isLeftSidebarCollapsed", "label", "testId"];
 /** @jsx jsx */
 var increaseHitAreaStyles = (0, _react.css)({
   position: 'absolute',
-  top: -8,
-  right: -12,
-  bottom: -8,
-  left: -8
+  top: "calc(-1 * ".concat("var(--ds-space-100, 8px)", ")"),
+  right: "calc(-1 * ".concat("var(--ds-space-150, 12px)", ")"),
+  bottom: "calc(-1 * ".concat("var(--ds-space-100, 8px)", ")"),
+  left: "calc(-1 * ".concat("var(--ds-space-100, 8px)", ")")
 });
 var resizeIconButtonStyles = (0, _react.css)({
   width: 24,
   height: 24,
   padding: 0,
   position: 'absolute',
-  top: 32,
+  top: "var(--ds-space-400, 32px)",
   left: 0,
   backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
   border: 0,

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

@@ -17,6 +17,7 @@ var shadowStyles = (0, _react.css)({
   position: 'absolute',
   top: 0,
   bottom: 0,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   left: -1,
   background: "var(--ds-border, ".concat("linear-gradient(".concat(direction, ", ").concat(colorStops, ")"), ")"),
   opacity: 0.5,
@@ -27,6 +28,7 @@ var shadowStyles = (0, _react.css)({
 });
 var draggingStyles = (0, _react.css)({
   width: 6,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   left: -6,
   background: "var(--ds-background-neutral-subtle, ".concat("linear-gradient(".concat(direction, ", ").concat(colorStops, ")"), ")"),
   opacity: 0.8

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

@@ -17,10 +17,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 var prefersReducedMotionStyles = (0, _react.css)((0, _motion.prefersReducedMotion)());
 var skipLinkStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   margin: 10,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   padding: '0.8rem 1rem',
   position: 'fixed',
   zIndex: -1,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   left: -999999,
   background: "var(--ds-surface-overlay, white)",
   border: 'none',
@@ -45,7 +48,7 @@ var skipLinkHeadingStyles = (0, _react.css)({
   fontWeight: 600
 });
 var skipLinkListStyles = (0, _react.css)({
-  marginTop: 4,
+  marginTop: "var(--ds-space-050, 4px)",
   paddingLeft: 0,
   listStylePosition: 'outside',
   listStyleType: 'none'

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

@@ -24,7 +24,9 @@ var bannerFixedStyles = (0, _react2.css)({
   position: 'fixed',
   zIndex: 2,
   top: 0,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   right: _constants.RIGHT_PANEL_WIDTH,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   left: _constants.LEFT_PANEL_WIDTH
 });
 

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

@@ -22,8 +22,10 @@ var prefersReducedMotionStyles = (0, _react.css)((0, _motion.prefersReducedMotio
 var fixedInnerStyles = (0, _react.css)({
   width: "".concat(_constants.LEFT_SIDEBAR_WIDTH),
   position: 'fixed',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   top: "calc(".concat(_constants.BANNER_HEIGHT, " + ").concat(_constants.TOP_NAVIGATION_HEIGHT, ")"),
   bottom: 0,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   left: "".concat(_constants.LEFT_PANEL_WIDTH),
   transition: "width ".concat(_constants.TRANSITION_DURATION, "ms ").concat(_motion.easeOut, " 0s")
 });

package/dist/cjs/components/slots/main.js

@@ -28,7 +28,6 @@ var mainStyles = (0, _react2.css)({
   transition: "margin-left ".concat(_constants.TRANSITION_DURATION, "ms ").concat(_curves.easeOut, " 0s")
 });
 var draggingStyles = (0, _react2.css)({
-  cursor: 'ew-resize',
   // Make sure drag to resize remains snappy.
   transition: 'none'
 });
@@ -40,6 +39,7 @@ var draggingStyles = (0, _react2.css)({
  * while main remains in place.
  */
 var flyoutStyles = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   marginLeft: "calc(-1 * var(--".concat(_constants.VAR_LEFT_SIDEBAR_FLYOUT, ", ").concat(_constants.DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH, "px) + ").concat(_constants.COLLAPSED_LEFT_SIDEBAR_WIDTH, "px)")
 });
 

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

@@ -29,7 +29,9 @@ var fixedInnerStyles = (0, _react2.css)({
    */
   width: _constants.RIGHT_SIDEBAR_WIDTH,
   position: 'fixed',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   top: "calc(".concat(_constants.BANNER_HEIGHT, " + ").concat(_constants.TOP_NAVIGATION_HEIGHT, ")"),
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   right: "calc(".concat(_constants.RIGHT_PANEL_WIDTH, ")"),
   bottom: 0
 });

package/dist/cjs/components/slots/top-navigation.js

@@ -23,8 +23,11 @@ var topNavigationStyles = (0, _react2.css)({
 var fixedStyles = (0, _react2.css)({
   position: 'fixed',
   zIndex: 2,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   top: _constants.BANNER_HEIGHT,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   right: _constants.RIGHT_PANEL_WIDTH,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   left: _constants.LEFT_PANEL_WIDTH
 });
 

package/dist/cjs/version.json

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

package/dist/es2019/common/hooks/use-is-sidebar-dragging.js

@@ -7,6 +7,9 @@ const getIsDragging = () => {
   }
   return document.documentElement.getAttribute(IS_SIDEBAR_DRAGGING) === 'true';
 };
+
+// TODO: I think this should be derived from the sidebar state,
+// and not indirectly from observing an attribute change
 const useIsSidebarDragging = () => {
   const [isDragging, setIsDragging] = useState(getIsDragging);
   useEffect(() => {

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
-import { useCallback, useContext, useMemo, useRef, useState } from 'react';
-import { css, jsx } from '@emotion/react';
+import { Fragment, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { css, Global, jsx } from '@emotion/react';
 import { bindAll } from 'bind-event-listener';
 import rafSchd from 'raf-schd';
 import { COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_WIDTH, IS_SIDEBAR_DRAGGING, MIN_LEFT_SIDEBAR_DRAG_THRESHOLD, RESIZE_BUTTON_SELECTOR, RESIZE_CONTROL_SELECTOR, VAR_LEFT_SIDEBAR_WIDTH } from '../../common/constants';
@@ -19,12 +19,40 @@ const resizeControlStyles = css({
   position: 'absolute',
   top: 0,
   bottom: 0,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   left: '100%',
   outline: 'none'
 });
 const showResizeButtonStyles = css({
   '--ds--resize-button--opacity': 1
 });
+
+// @ts-expect-error adding `!important` to style rules is currently a type error
+const globalResizingStyles = css({
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '*': {
+    // Setting the cursor to be `ew-resize` on all elements so that even if the user
+    // pointer slips off the resize handle, the cursor will still be the resize cursor
+    cursor: 'ew-resize !important',
+    // Blocking selection while resizing
+    // Notes:
+    // - This prevents a user selection being caused by resizing
+    // - Safari + Firefox → all good
+    // - Chrome → This will undo the current selection while resizing (not ideal)
+    //   - The current selection will resume after resizing
+    userSelect: 'none !important'
+  },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  iframe: {
+    // Disabling pointer events on iframes when resizing
+    // as iframes will swallower user events when the user is over them
+    pointerEvents: 'none !important'
+  }
+  // Note: We _could_ also disable `pointer-events` on all elements during resizing.
+  // However, to minimize risk we are just disabling `pointer-events` on iframes
+  // as that change is actually needed to fix resizing with iframes
+});
+
 const ResizeControl = ({
   testId,
   overrides,
@@ -49,6 +77,13 @@ const ResizeControl = ({
   const keyboardEventTimeout = useRef();
   const [isGrabAreaFocused, setIsGrabAreaFocused] = useState(false);
   const unbindEvents = useRef(null);
+
+  // Used in some cases to ensure function references don't have to change
+  // TODO: more functions could use `stableSidebarState` rather than `leftSidebarState`
+  const stableSidebarState = useRef(leftSidebarState);
+  useEffect(() => {
+    stableSidebarState.current = leftSidebarState;
+  }, [leftSidebarState]);
   const toggleSideBar = e => {
     if (isResizing) {
       return;
@@ -83,7 +118,11 @@ const ResizeControl = ({
     offset.current = event.clientX - leftSidebarState[VAR_LEFT_SIDEBAR_WIDTH] - getLeftPanelWidth();
     unbindEvents.current = bindAll(window, [{
       type: 'mousemove',
-      listener: onUpdateResize
+      listener: function (event) {
+        onUpdateResize({
+          clientX: event.clientX
+        });
+      }
     }, {
       type: 'mouseup',
       listener: onFinishResizing
@@ -149,39 +188,42 @@ const ResizeControl = ({
     offset.current = 0;
     collapseLeftSidebar(undefined, true);
   };
-  const onUpdateResize = rafSchd(event => {
+
+  // It is important that `onUpdateResize` is a stable function reference, so that:
+  // 1. we ensure we are correctly throttling with `requestAnimationFrame`
+  // 2. that a `onUpdateResize` will cancel the one and only pending frame
+  // To help ensure `onUpdateResize` is stable, we are putting the last state into a ref
+  const [onUpdateResize] = useState(() => rafSchd(({
+    clientX
+  }) => {
     // 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 hasResizedOffLeftOfScreen = event.clientX < 0;
+    const leftSidebarWidth = stableSidebarState.current.leftSidebarWidth;
+    const hasResizedOffLeftOfScreen = 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);
+    const delta = Math.max(Math.min(clientX - leftSidebarWidth - leftPanelWidth, maxWidth - leftSidebarWidth - leftPanelWidth), COLLAPSED_LEFT_SIDEBAR_WIDTH - leftSidebarWidth - leftPanelWidth);
     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;
-    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 onFinishResizing = () => {
+    var _unbindEvents$current2;
     if (isLeftSidebarCollapsed) {
       return;
     }
     document.documentElement.removeAttribute(IS_SIDEBAR_DRAGGING);
 
+    // TODO: the control flow is pretty strange as the first codepath which calls `collapseLeftSidebar()`
+    // does not return an updated state snapshot.
+    let updatedLeftSidebarState = null;
+
     // If it is dragged to below the threshold,
     // collapse the navigation
     if (sidebarWidth.current < MIN_LEFT_SIDEBAR_DRAG_THRESHOLD) {
+      // TODO: for this codepath, `onCollapse` occurs before `onResizeEnd` which seems wrong
       document.documentElement.style.setProperty(`--${VAR_LEFT_SIDEBAR_WIDTH}`, `${COLLAPSED_LEFT_SIDEBAR_WIDTH}px`);
       collapseLeftSidebar(undefined, true);
     }
@@ -207,11 +249,18 @@ const ResizeControl = ({
       };
       setLeftSidebarState(updatedLeftSidebarState);
     }
+    (_unbindEvents$current2 = unbindEvents.current) === null || _unbindEvents$current2 === void 0 ? void 0 : _unbindEvents$current2.call(unbindEvents);
+    unbindEvents.current = null;
+    onUpdateResize.cancel();
+    sidebarWidth.current = 0;
+    offset.current = 0;
+
+    // TODO: no idea why this is in an animation frame
     requestAnimationFrame(() => {
-      onUpdateResize.cancel();
+      var _updatedLeftSidebarSt;
       setIsGrabAreaFocused(false);
-      onResizeEnd && onResizeEnd(updatedLeftSidebarState);
-      cleanupAfterResize();
+      // Note: the `collapseSidebar` codepath does not return state, so we need to pull it from the ref
+      onResizeEnd === null || onResizeEnd === void 0 ? void 0 : onResizeEnd((_updatedLeftSidebarSt = updatedLeftSidebarState) !== null && _updatedLeftSidebarSt !== void 0 ? _updatedLeftSidebarSt : stableSidebarState.current);
     });
   };
   const onKeyDown = event => {
@@ -287,7 +336,7 @@ const ResizeControl = ({
   const leftSidebarPercentageExpanded = getLeftSidebarPercentage(leftSidebarState.leftSidebarWidth, maxAriaWidth);
 
   /* eslint-disable jsx-a11y/role-supports-aria-props */
-  return jsx("div", _extends({}, cssSelector, {
+  return jsx(Fragment, null, jsx("div", _extends({}, cssSelector, {
     css: [resizeControlStyles, (isGrabAreaFocused || isLeftSidebarCollapsed) && showResizeButtonStyles]
   }), jsx(Shadow, {
     testId: testId && `${testId}-shadow`
@@ -310,7 +359,9 @@ const ResizeControl = ({
     label: resizeButtonLabel,
     onClick: toggleSideBar,
     testId: testId && `${testId}-resize-button`
-  }));
+  })), leftSidebarState.isResizing ? jsx(Global, {
+    styles: globalResizingStyles
+  }) : null);
   /* eslint-enable jsx-a11y/role-supports-aria-props */
 };
 

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

@@ -9,17 +9,17 @@ import { B100, B200, N0, N200, N30A } from '@atlaskit/theme/colors';
 import { RESIZE_BUTTON_SELECTOR } from '../../common/constants';
 const increaseHitAreaStyles = css({
   position: 'absolute',
-  top: -8,
-  right: -12,
-  bottom: -8,
-  left: -8
+  top: `calc(-1 * ${"var(--ds-space-100, 8px)"})`,
+  right: `calc(-1 * ${"var(--ds-space-150, 12px)"})`,
+  bottom: `calc(-1 * ${"var(--ds-space-100, 8px)"})`,
+  left: `calc(-1 * ${"var(--ds-space-100, 8px)"})`
 });
 const resizeIconButtonStyles = css({
   width: 24,
   height: 24,
   padding: 0,
   position: 'absolute',
-  top: 32,
+  top: "var(--ds-space-400, 32px)",
   left: 0,
   backgroundColor: `var(--ds-surface-overlay, ${N0})`,
   border: 0,

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

@@ -16,6 +16,7 @@ const shadowStyles = css({
   position: 'absolute',
   top: 0,
   bottom: 0,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   left: -1,
   background: `var(--ds-border, ${`linear-gradient(${direction}, ${colorStops})`})`,
   opacity: 0.5,
@@ -26,6 +27,7 @@ const shadowStyles = css({
 });
 const draggingStyles = css({
   width: 6,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   left: -6,
   background: `var(--ds-background-neutral-subtle, ${`linear-gradient(${direction}, ${colorStops})`})`,
   opacity: 0.8

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

@@ -9,10 +9,13 @@ import { useSkipLinks } from '../../controllers';
 // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 const prefersReducedMotionStyles = css(prefersReducedMotion());
 const skipLinkStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   margin: 10,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   padding: '0.8rem 1rem',
   position: 'fixed',
   zIndex: -1,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   left: -999999,
   background: "var(--ds-surface-overlay, white)",
   border: 'none',
@@ -37,7 +40,7 @@ const skipLinkHeadingStyles = css({
   fontWeight: 600
 });
 const skipLinkListStyles = css({
-  marginTop: 4,
+  marginTop: "var(--ds-space-050, 4px)",
   paddingLeft: 0,
   listStylePosition: 'outside',
   listStyleType: 'none'

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

@@ -15,7 +15,9 @@ const bannerFixedStyles = css({
   position: 'fixed',
   zIndex: 2,
   top: 0,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   right: RIGHT_PANEL_WIDTH,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   left: LEFT_PANEL_WIDTH
 });
 

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

@@ -16,8 +16,10 @@ const prefersReducedMotionStyles = css(prefersReducedMotion());
 const fixedInnerStyles = css({
   width: `${LEFT_SIDEBAR_WIDTH}`,
   position: 'fixed',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   top: `calc(${BANNER_HEIGHT} + ${TOP_NAVIGATION_HEIGHT})`,
   bottom: 0,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   left: `${LEFT_PANEL_WIDTH}`,
   transition: `width ${TRANSITION_DURATION}ms ${easeOut} 0s`
 });

package/dist/es2019/components/slots/main.js

@@ -21,7 +21,6 @@ const mainStyles = css({
   transition: `margin-left ${TRANSITION_DURATION}ms ${easeOut} 0s`
 });
 const draggingStyles = css({
-  cursor: 'ew-resize',
   // Make sure drag to resize remains snappy.
   transition: 'none'
 });
@@ -33,6 +32,7 @@ const draggingStyles = css({
  * while main remains in place.
  */
 const flyoutStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   marginLeft: `calc(-1 * var(--${VAR_LEFT_SIDEBAR_FLYOUT}, ${DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH}px) + ${COLLAPSED_LEFT_SIDEBAR_WIDTH}px)`
 });
 

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

@@ -21,7 +21,9 @@ const fixedInnerStyles = css({
    */
   width: RIGHT_SIDEBAR_WIDTH,
   position: 'fixed',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   top: `calc(${BANNER_HEIGHT} + ${TOP_NAVIGATION_HEIGHT})`,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   right: `calc(${RIGHT_PANEL_WIDTH})`,
   bottom: 0
 });

package/dist/es2019/components/slots/top-navigation.js

@@ -14,8 +14,11 @@ const topNavigationStyles = css({
 const fixedStyles = css({
   position: 'fixed',
   zIndex: 2,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   top: BANNER_HEIGHT,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   right: RIGHT_PANEL_WIDTH,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   left: LEFT_PANEL_WIDTH
 });
 

package/dist/es2019/version.json

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

package/dist/esm/common/hooks/use-is-sidebar-dragging.js

@@ -8,6 +8,9 @@ var getIsDragging = function getIsDragging() {
   }
   return document.documentElement.getAttribute(IS_SIDEBAR_DRAGGING) === 'true';
 };
+
+// TODO: I think this should be derived from the sidebar state,
+// and not indirectly from observing an attribute change
 var useIsSidebarDragging = function useIsSidebarDragging() {
   var _useState = useState(getIsDragging),
     _useState2 = _slicedToArray(_useState, 2),

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

@@ -4,8 +4,8 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _defineProperty(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 { useCallback, useContext, useMemo, useRef, useState } from 'react';
-import { css, jsx } from '@emotion/react';
+import { Fragment, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { css, Global, jsx } from '@emotion/react';
 import { bindAll } from 'bind-event-listener';
 import rafSchd from 'raf-schd';
 import { COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_WIDTH, IS_SIDEBAR_DRAGGING, MIN_LEFT_SIDEBAR_DRAG_THRESHOLD, RESIZE_BUTTON_SELECTOR, RESIZE_CONTROL_SELECTOR, VAR_LEFT_SIDEBAR_WIDTH } from '../../common/constants';
@@ -21,12 +21,40 @@ var resizeControlStyles = css({
   position: 'absolute',
   top: 0,
   bottom: 0,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   left: '100%',
   outline: 'none'
 });
 var showResizeButtonStyles = css({
   '--ds--resize-button--opacity': 1
 });
+
+// @ts-expect-error adding `!important` to style rules is currently a type error
+var globalResizingStyles = css({
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '*': {
+    // Setting the cursor to be `ew-resize` on all elements so that even if the user
+    // pointer slips off the resize handle, the cursor will still be the resize cursor
+    cursor: 'ew-resize !important',
+    // Blocking selection while resizing
+    // Notes:
+    // - This prevents a user selection being caused by resizing
+    // - Safari + Firefox → all good
+    // - Chrome → This will undo the current selection while resizing (not ideal)
+    //   - The current selection will resume after resizing
+    userSelect: 'none !important'
+  },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  iframe: {
+    // Disabling pointer events on iframes when resizing
+    // as iframes will swallower user events when the user is over them
+    pointerEvents: 'none !important'
+  }
+  // Note: We _could_ also disable `pointer-events` on all elements during resizing.
+  // However, to minimize risk we are just disabling `pointer-events` on iframes
+  // as that change is actually needed to fix resizing with iframes
+});
+
 var ResizeControl = function ResizeControl(_ref) {
   var testId = _ref.testId,
     overrides = _ref.overrides,
@@ -52,6 +80,13 @@ var ResizeControl = function ResizeControl(_ref) {
     isGrabAreaFocused = _useState2[0],
     setIsGrabAreaFocused = _useState2[1];
   var unbindEvents = useRef(null);
+
+  // Used in some cases to ensure function references don't have to change
+  // TODO: more functions could use `stableSidebarState` rather than `leftSidebarState`
+  var stableSidebarState = useRef(leftSidebarState);
+  useEffect(function () {
+    stableSidebarState.current = leftSidebarState;
+  }, [leftSidebarState]);
   var toggleSideBar = function toggleSideBar(e) {
     if (isResizing) {
       return;
@@ -86,7 +121,11 @@ var ResizeControl = function ResizeControl(_ref) {
     offset.current = event.clientX - leftSidebarState[VAR_LEFT_SIDEBAR_WIDTH] - getLeftPanelWidth();
     unbindEvents.current = bindAll(window, [{
       type: 'mousemove',
-      listener: onUpdateResize
+      listener: function listener(event) {
+        onUpdateResize({
+          clientX: event.clientX
+        });
+      }
     }, {
       type: 'mouseup',
       listener: onFinishResizing
@@ -151,37 +190,45 @@ var ResizeControl = function ResizeControl(_ref) {
     offset.current = 0;
     collapseLeftSidebar(undefined, true);
   };
-  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 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);
-    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;
-    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 = {};
+
+  // It is important that `onUpdateResize` is a stable function reference, so that:
+  // 1. we ensure we are correctly throttling with `requestAnimationFrame`
+  // 2. that a `onUpdateResize` will cancel the one and only pending frame
+  // To help ensure `onUpdateResize` is stable, we are putting the last state into a ref
+  var _useState3 = useState(function () {
+      return rafSchd(function (_ref2) {
+        var clientX = _ref2.clientX;
+        // Allow the sidebar to be 50% of the available page width
+        var maxWidth = Math.round(window.innerWidth / 2);
+        var leftPanelWidth = getLeftPanelWidth();
+        var leftSidebarWidth = stableSidebarState.current.leftSidebarWidth;
+        var hasResizedOffLeftOfScreen = clientX < 0;
+        if (hasResizedOffLeftOfScreen) {
+          onResizeOffLeftOfScreen();
+          return;
+        }
+        var delta = Math.max(Math.min(clientX - leftSidebarWidth - leftPanelWidth, maxWidth - leftSidebarWidth - leftPanelWidth), COLLAPSED_LEFT_SIDEBAR_WIDTH - leftSidebarWidth - leftPanelWidth);
+        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"));
+      });
+    }),
+    _useState4 = _slicedToArray(_useState3, 1),
+    onUpdateResize = _useState4[0];
   var onFinishResizing = function onFinishResizing() {
+    var _unbindEvents$current2;
     if (isLeftSidebarCollapsed) {
       return;
     }
     document.documentElement.removeAttribute(IS_SIDEBAR_DRAGGING);
 
+    // TODO: the control flow is pretty strange as the first codepath which calls `collapseLeftSidebar()`
+    // does not return an updated state snapshot.
+    var updatedLeftSidebarState = null;
+
     // If it is dragged to below the threshold,
     // collapse the navigation
     if (sidebarWidth.current < MIN_LEFT_SIDEBAR_DRAG_THRESHOLD) {
+      // TODO: for this codepath, `onCollapse` occurs before `onResizeEnd` which seems wrong
       document.documentElement.style.setProperty("--".concat(VAR_LEFT_SIDEBAR_WIDTH), "".concat(COLLAPSED_LEFT_SIDEBAR_WIDTH, "px"));
       collapseLeftSidebar(undefined, true);
     }
@@ -203,11 +250,18 @@ var ResizeControl = function ResizeControl(_ref) {
       }, _defineProperty(_objectSpread3, VAR_LEFT_SIDEBAR_WIDTH, sidebarWidth.current), _defineProperty(_objectSpread3, "lastLeftSidebarWidth", sidebarWidth.current), _objectSpread3));
       setLeftSidebarState(updatedLeftSidebarState);
     }
+    (_unbindEvents$current2 = unbindEvents.current) === null || _unbindEvents$current2 === void 0 ? void 0 : _unbindEvents$current2.call(unbindEvents);
+    unbindEvents.current = null;
+    onUpdateResize.cancel();
+    sidebarWidth.current = 0;
+    offset.current = 0;
+
+    // TODO: no idea why this is in an animation frame
     requestAnimationFrame(function () {
-      onUpdateResize.cancel();
+      var _updatedLeftSidebarSt;
       setIsGrabAreaFocused(false);
-      onResizeEnd && onResizeEnd(updatedLeftSidebarState);
-      cleanupAfterResize();
+      // Note: the `collapseSidebar` codepath does not return state, so we need to pull it from the ref
+      onResizeEnd === null || onResizeEnd === void 0 ? void 0 : onResizeEnd((_updatedLeftSidebarSt = updatedLeftSidebarState) !== null && _updatedLeftSidebarSt !== void 0 ? _updatedLeftSidebarSt : stableSidebarState.current);
     });
   };
   var onKeyDown = function onKeyDown(event) {
@@ -277,7 +331,7 @@ var ResizeControl = function ResizeControl(_ref) {
   var leftSidebarPercentageExpanded = getLeftSidebarPercentage(leftSidebarState.leftSidebarWidth, maxAriaWidth);
 
   /* eslint-disable jsx-a11y/role-supports-aria-props */
-  return jsx("div", _extends({}, cssSelector, {
+  return jsx(Fragment, null, jsx("div", _extends({}, cssSelector, {
     css: [resizeControlStyles, (isGrabAreaFocused || isLeftSidebarCollapsed) && showResizeButtonStyles]
   }), jsx(Shadow, {
     testId: testId && "".concat(testId, "-shadow")
@@ -300,7 +354,9 @@ var ResizeControl = function ResizeControl(_ref) {
     label: resizeButtonLabel,
     onClick: toggleSideBar,
     testId: testId && "".concat(testId, "-resize-button")
-  }));
+  })), leftSidebarState.isResizing ? jsx(Global, {
+    styles: globalResizingStyles
+  }) : null);
   /* eslint-enable jsx-a11y/role-supports-aria-props */
 };
 

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

@@ -12,17 +12,17 @@ import { B100, B200, N0, N200, N30A } from '@atlaskit/theme/colors';
 import { RESIZE_BUTTON_SELECTOR } from '../../common/constants';
 var increaseHitAreaStyles = css({
   position: 'absolute',
-  top: -8,
-  right: -12,
-  bottom: -8,
-  left: -8
+  top: "calc(-1 * ".concat("var(--ds-space-100, 8px)", ")"),
+  right: "calc(-1 * ".concat("var(--ds-space-150, 12px)", ")"),
+  bottom: "calc(-1 * ".concat("var(--ds-space-100, 8px)", ")"),
+  left: "calc(-1 * ".concat("var(--ds-space-100, 8px)", ")")
 });
 var resizeIconButtonStyles = css({
   width: 24,
   height: 24,
   padding: 0,
   position: 'absolute',
-  top: 32,
+  top: "var(--ds-space-400, 32px)",
   left: 0,
   backgroundColor: "var(--ds-surface-overlay, ".concat(N0, ")"),
   border: 0,

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

@@ -11,6 +11,7 @@ var shadowStyles = css({
   position: 'absolute',
   top: 0,
   bottom: 0,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   left: -1,
   background: "var(--ds-border, ".concat("linear-gradient(".concat(direction, ", ").concat(colorStops, ")"), ")"),
   opacity: 0.5,
@@ -21,6 +22,7 @@ var shadowStyles = css({
 });
 var draggingStyles = css({
   width: 6,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   left: -6,
   background: "var(--ds-background-neutral-subtle, ".concat("linear-gradient(".concat(direction, ", ").concat(colorStops, ")"), ")"),
   opacity: 0.8

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

@@ -13,10 +13,13 @@ import { useSkipLinks } from '../../controllers';
 // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 var prefersReducedMotionStyles = css(prefersReducedMotion());
 var skipLinkStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   margin: 10,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   padding: '0.8rem 1rem',
   position: 'fixed',
   zIndex: -1,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   left: -999999,
   background: "var(--ds-surface-overlay, white)",
   border: 'none',
@@ -41,7 +44,7 @@ var skipLinkHeadingStyles = css({
   fontWeight: 600
 });
 var skipLinkListStyles = css({
-  marginTop: 4,
+  marginTop: "var(--ds-space-050, 4px)",
   paddingLeft: 0,
   listStylePosition: 'outside',
   listStyleType: 'none'

package/dist/esm/components/slots/banner-slot.js

@@ -16,7 +16,9 @@ var bannerFixedStyles = css({
   position: 'fixed',
   zIndex: 2,
   top: 0,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   right: RIGHT_PANEL_WIDTH,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   left: LEFT_PANEL_WIDTH
 });
 

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

@@ -16,8 +16,10 @@ var prefersReducedMotionStyles = css(prefersReducedMotion());
 var fixedInnerStyles = css({
   width: "".concat(LEFT_SIDEBAR_WIDTH),
   position: 'fixed',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   top: "calc(".concat(BANNER_HEIGHT, " + ").concat(TOP_NAVIGATION_HEIGHT, ")"),
   bottom: 0,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   left: "".concat(LEFT_PANEL_WIDTH),
   transition: "width ".concat(TRANSITION_DURATION, "ms ").concat(easeOut, " 0s")
 });

package/dist/esm/components/slots/main.js

@@ -21,7 +21,6 @@ var mainStyles = css({
   transition: "margin-left ".concat(TRANSITION_DURATION, "ms ").concat(easeOut, " 0s")
 });
 var draggingStyles = css({
-  cursor: 'ew-resize',
   // Make sure drag to resize remains snappy.
   transition: 'none'
 });
@@ -33,6 +32,7 @@ var draggingStyles = css({
  * while main remains in place.
  */
 var flyoutStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   marginLeft: "calc(-1 * var(--".concat(VAR_LEFT_SIDEBAR_FLYOUT, ", ").concat(DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH, "px) + ").concat(COLLAPSED_LEFT_SIDEBAR_WIDTH, "px)")
 });
 

package/dist/esm/components/slots/right-sidebar.js

@@ -22,7 +22,9 @@ var fixedInnerStyles = css({
    */
   width: RIGHT_SIDEBAR_WIDTH,
   position: 'fixed',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   top: "calc(".concat(BANNER_HEIGHT, " + ").concat(TOP_NAVIGATION_HEIGHT, ")"),
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   right: "calc(".concat(RIGHT_PANEL_WIDTH, ")"),
   bottom: 0
 });

package/dist/esm/components/slots/top-navigation.js

@@ -15,8 +15,11 @@ var topNavigationStyles = css({
 var fixedStyles = css({
   position: 'fixed',
   zIndex: 2,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   top: BANNER_HEIGHT,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   right: RIGHT_PANEL_WIDTH,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   left: LEFT_PANEL_WIDTH
 });
 

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/page-layout",
-  "version": "1.6.2",
+  "version": "1.6.4",
   "description": "A collection of components which let you compose an application's page layout.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -48,7 +48,7 @@
     "react-dom": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/atlassian-navigation": "^2.5.0",
+    "@atlaskit/atlassian-navigation": "^2.6.0",
     "@atlaskit/atlassian-notifications": "^0.4.0",
     "@atlaskit/button": "^16.7.0",
     "@atlaskit/docs": "*",
@@ -95,7 +95,8 @@
         "analytics-next"
       ],
       "design-tokens": [
-        "color"
+        "color",
+        "spacing"
       ],
       "theming": [
         "react-context"