@atlaskit/page-layout 1.6.1 → 1.6.3

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/page-layout
 
+## 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
+
+- [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
+
 ## 1.6.1
 
 ### Patch Changes

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

@@ -31,6 +31,33 @@ var resizeControlStyles = (0, _react2.css)({
 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 +83,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 +124,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 +193,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 +253,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 +334,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 +357,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/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'
 });

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/page-layout",
-	"version": "1.6.1",
+	"version": "1.6.3",
 	"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';
@@ -25,6 +25,33 @@ const resizeControlStyles = css({
 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 +76,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 +117,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 +187,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 +248,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 +335,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 +358,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/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'
 });

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/page-layout",
-	"version": "1.6.1",
+	"version": "1.6.3",
 	"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';
@@ -27,6 +27,33 @@ var resizeControlStyles = css({
 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 +79,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 +120,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 +189,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 +249,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 +330,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 +353,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/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'
 });

package/dist/esm/version.json

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