@atlaskit/navigation-system 5.19.0 → 5.21.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlassian/navigation-system
 
+## 5.21.0
+
+### Minor Changes
+
+- [`67075d80cdd6b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/67075d80cdd6b) -
+  Fixes a bug where the panel splitter would not be resizable when some browser extensions were
+  installed. This was caused by the `dragstart` event incorrectly returning `0` for the client's
+  cursor position (`clientX`).
+
+  This fix is behind the feature gate `platform-dst-panel-splitter-drag-start-client-x`.
+
+## 5.20.0
+
+### Minor Changes
+
+- [`2e7328e8eff65`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2e7328e8eff65) -
+  Modifies the side nav resize tooltip to remain locked on the x-axis relative to the resizer,
+  behind the `platform_dst_nav4_side_nav_resize_tooltip_feedback` feature gate.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 5.19.0
 
 ### Minor Changes

package/dist/cjs/ui/page-layout/panel-splitter/get-width.js

@@ -4,12 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getWidthFromDragLocation = exports.getPixelWidth = void 0;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+/**
+ * ⚠️ Note: We are not using the location.initial.input client locations because some browser extensions
+ * can cause the client locations (e.g. clientX) in the `dragstart` event to incorrectly return 0.
+ */
 var getWidthFromDragLocation = exports.getWidthFromDragLocation = function getWidthFromDragLocation(_ref) {
   var initialWidth = _ref.initialWidth,
     location = _ref.location,
+    initialClientX = _ref.initialClientX,
     direction = _ref.direction,
     position = _ref.position;
-  var diffX = location.current.input.clientX - location.initial.input.clientX;
+  var diffX = location.current.input.clientX - ((0, _platformFeatureFlags.fg)('platform-dst-panel-splitter-drag-start-client-x') ? initialClientX : location.initial.input.clientX);
+
   // Resize line is positioned at the inline-end (right) of the element.
   // If the direction is left-to-right, the width will increase when the mouse is moved to the right, and vice versa.
   if (position === 'end') {
@@ -20,7 +27,6 @@ var getWidthFromDragLocation = exports.getWidthFromDragLocation = function getWi
   // If the direction is left-to-right, the width will decrease when the mouse is moved to the right, and vice versa.
   return direction === 'ltr' ? initialWidth - diffX : initialWidth + diffX;
 };
-
 /**
  * Returns the computed width of an element in pixels.
  */

package/dist/cjs/ui/page-layout/panel-splitter/panel-splitter.compiled.css

@@ -14,6 +14,7 @@
 ._1qu2glyw{outline-style:none}
 ._4t3i1osq{height:100%}
 ._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
+._ahbq196n{margin-inline-start:var(--ds-space-negative-075,-6px)}
 ._bfhk1j28{background-color:transparent}
 ._bfhk1r31{background-color:currentColor}
 ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}

package/dist/cjs/ui/page-layout/panel-splitter/panel-splitter.js

@@ -13,19 +13,24 @@ var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _bindEventListener = require("bind-event-listener");
 var _reactDom = require("react-dom");
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _useId = require("@atlaskit/ds-lib/use-id");
 var _useStableRef = _interopRequireDefault(require("@atlaskit/ds-lib/use-stable-ref"));
 var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _blockDraggingToIframes = require("@atlaskit/pragmatic-drag-and-drop/element/block-dragging-to-iframes");
 var _disableNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview");
 var _preventUnhandled = require("@atlaskit/pragmatic-drag-and-drop/prevent-unhandled");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _TooltipContainer = _interopRequireDefault(require("@atlaskit/tooltip/TooltipContainer"));
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
 var _context = require("./context");
@@ -33,6 +38,7 @@ var _convertResizeBoundToPixels = require("./convert-resize-bound-to-pixels");
 var _getPercentageWithinPixelBounds = require("./get-percentage-within-pixel-bounds");
 var _getWidth = require("./get-width");
 var _keyboardResizeManager = require("./keyboard-resize-manager");
+var _excluded = ["children", "className"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -48,25 +54,43 @@ var grabAreaStyles = {
 var lineStyles = {
   root: "_kqswstnw _1e0c1ule _1bsb1l7b _4t3i1osq _syaz1kw7 _bfhk1r31 _1e021v6z"
 };
+var tooltipStyles = {
+  root: "_ahbq196n"
+};
 var panelSplitterDragDataSymbol = Symbol('panel-splitter-drag-data');
 function signPanelSplitterDragData(data) {
   return _objectSpread(_objectSpread({}, data), {}, (0, _defineProperty2.default)({}, panelSplitterDragDataSymbol, true));
 }
+var PanelSplitterTooltip = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(_TooltipContainer.default, (0, _extends2.default)({}, props, {
+    ref: ref
+    // Must be statically passed
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/no-unsafe-style-overrides
+    ,
+    className: (0, _runtime.ax)([tooltipStyles.root, className])
+    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
+  }), children);
+});
+
 /**
  * A wrapper component that renders a tooltip if the tooltipContent or shortcut is provided.
  */
-var MaybeTooltip = function MaybeTooltip(_ref) {
-  var tooltipContent = _ref.tooltipContent,
-    shortcut = _ref.shortcut,
-    children = _ref.children;
+var MaybeTooltip = function MaybeTooltip(_ref2) {
+  var tooltipContent = _ref2.tooltipContent,
+    shortcut = _ref2.shortcut,
+    children = _ref2.children;
   var isFhsEnabled = (0, _useIsFhsEnabled.useIsFhsEnabled)();
   if (tooltipContent && isFhsEnabled) {
     return /*#__PURE__*/React.createElement(_tooltip.default, {
       content: tooltipContent,
       shortcut: shortcut,
-      position: "mouse",
+      position: (0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? 'mouse-y' : 'mouse',
       mousePosition: "right",
-      isScreenReaderAnnouncementDisabled: true
+      isScreenReaderAnnouncementDisabled: true,
+      component: (0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? PanelSplitterTooltip : undefined
     }, children);
   }
   return children;
@@ -79,21 +103,21 @@ function getTextDirection(element) {
     direction = _window$getComputedSt.direction;
   return direction === 'rtl' ? 'rtl' : 'ltr';
 }
-var PortaledPanelSplitter = function PortaledPanelSplitter(_ref2) {
-  var label = _ref2.label,
-    onResizeStart = _ref2.onResizeStart,
-    onResizeEnd = _ref2.onResizeEnd,
-    testId = _ref2.testId,
-    panelId = _ref2.panelId,
-    panelWidth = _ref2.panelWidth,
-    onCompleteResize = _ref2.onCompleteResize,
-    getResizeBounds = _ref2.getResizeBounds,
-    panel = _ref2.panel,
-    portal = _ref2.portal,
-    resizingCssVar = _ref2.resizingCssVar,
-    position = _ref2.position,
-    tooltipContent = _ref2.tooltipContent,
-    shortcut = _ref2.shortcut;
+var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
+  var label = _ref3.label,
+    onResizeStart = _ref3.onResizeStart,
+    onResizeEnd = _ref3.onResizeEnd,
+    testId = _ref3.testId,
+    panelId = _ref3.panelId,
+    panelWidth = _ref3.panelWidth,
+    onCompleteResize = _ref3.onCompleteResize,
+    getResizeBounds = _ref3.getResizeBounds,
+    panel = _ref3.panel,
+    portal = _ref3.portal,
+    resizingCssVar = _ref3.resizingCssVar,
+    position = _ref3.position,
+    tooltipContent = _ref3.tooltipContent,
+    shortcut = _ref3.shortcut;
   var isFhsEnabled = (0, _useIsFhsEnabled.useIsFhsEnabled)();
   var splitterRef = (0, _react.useRef)(null);
   var labelId = (0, _useId.useId)();
@@ -124,15 +148,38 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref2) {
    * Once `PanelSplitter` supports an `onDoubleClick` prop directly, this context can be removed.
    */
   var onDoubleClick = (0, _react.useContext)(_context.OnDoubleClickContext);
+
+  // Storing the initial `clientX` on `mousedown` events, to workaround a bug caused by some browser extensions
+  // where the `dragstart` event incorrectly returns `0` for the `clientX` location.
+  var initialClientXRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
     var splitter = splitterRef.current;
     (0, _tinyInvariant.default)(splitter, 'Splitter ref must be set');
     return (0, _combine.combine)((0, _blockDraggingToIframes.blockDraggingToIFrames)({
       element: splitter
-    }), (0, _adapter.draggable)({
+    }),
+    /**
+     * Capturing the initial `clientX` from the mousedown, before the drag starts.
+     *
+     * ⚠️ Note: We are not using pragmatic-drag-and-drop's `onDragStart` for this as some browser
+     * extensions can cause the client location (e.g. clientX) to incorrectly return 0 during the `dragstart` event.
+     *
+     * We are also not using pragmatic-drag-and-drop's `onDrag` here as it is throttled, which means
+     * fast mouse movements can cause the real first drag event to be missed, causing a different clientX
+     * to be captured.
+     *
+     * I also tried only binding an event listener inside pragmatic-drag-and-drop's `onDragStart`, which seemd to work
+     * but did not feel as robust, and might have timing issues as it happens slightly later.
+     */
+    (0, _platformFeatureFlags.fg)('platform-dst-panel-splitter-drag-start-client-x') ? (0, _bindEventListener.bind)(splitter, {
+      type: 'mousedown',
+      listener: function listener(event) {
+        initialClientXRef.current = event.clientX;
+      }
+    }) : _noop.default, (0, _adapter.draggable)({
       element: splitter,
-      onGenerateDragPreview: function onGenerateDragPreview(_ref3) {
-        var nativeSetDragImage = _ref3.nativeSetDragImage;
+      onGenerateDragPreview: function onGenerateDragPreview(_ref4) {
+        var nativeSetDragImage = _ref4.nativeSetDragImage;
         // We will be moving the line to indicate a drag. We can disable the native drag preview
         (0, _disableNativeDragPreview.disableNativeDragPreview)({
           nativeSetDragImage: nativeSetDragImage
@@ -159,8 +206,12 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref2) {
           direction: getTextDirection(panel)
         });
       },
-      onDragStart: function onDragStart(_ref4) {
-        var source = _ref4.source;
+      onDragStart: function onDragStart(_ref5) {
+        var source = _ref5.source;
+        /**
+         * ⚠️ Note: We are not using the client locations (e.g. clientX) during `onDragStart`
+         * because some browser extensions can cause the event properties to incorrectly return 0.
+         */
         (0, _tinyInvariant.default)(isPanelSplitterDragData(source.data));
         onResizeStart === null || onResizeStart === void 0 || onResizeStart({
           initialWidth: source.data.initialWidth
@@ -169,14 +220,22 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref2) {
         // Close any open layers when the user starts resizing
         openLayerObserver === null || openLayerObserver === void 0 || openLayerObserver.closeLayers();
       },
-      onDrag: function onDrag(_ref5) {
-        var location = _ref5.location,
-          source = _ref5.source;
+      onDrag: function onDrag(_ref6) {
+        var _initialClientXRef$cu;
+        var location = _ref6.location,
+          source = _ref6.source;
+        /**
+         * ⚠️ Note: We are not using the location.initial.input client locations because some browser extensions
+         * can cause the client locations (e.g. clientX) in the `dragstart` event to incorrectly return 0.
+         */
         (0, _tinyInvariant.default)(isPanelSplitterDragData(source.data));
         var _source$data = source.data,
           initialWidth = _source$data.initialWidth,
           resizeBounds = _source$data.resizeBounds,
           direction = _source$data.direction;
+        if ((0, _platformFeatureFlags.fg)('platform-dst-panel-splitter-drag-start-client-x')) {
+          (0, _tinyInvariant.default)(initialClientXRef.current !== null, 'initialClientX must be set');
+        }
 
         /**
          * How wide the element would be if there were no width constraints,
@@ -185,6 +244,8 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref2) {
         var targetWidth = (0, _getWidth.getWidthFromDragLocation)({
           initialWidth: initialWidth,
           location: location,
+          // The fallback of 0 won't be used due to the invariant, however we require one to satisfy the type.
+          initialClientX: (_initialClientXRef$cu = initialClientXRef.current) !== null && _initialClientXRef$cu !== void 0 ? _initialClientXRef$cu : 0,
           direction: direction,
           position: position
         });
@@ -192,8 +253,8 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref2) {
         panel.style.setProperty(resizingCssVar, resizingWidth);
         source.data.resizingWidth = resizingWidth;
       },
-      onDrop: function onDrop(_ref6) {
-        var source = _ref6.source;
+      onDrop: function onDrop(_ref7) {
+        var source = _ref7.source;
         (0, _tinyInvariant.default)(isPanelSplitterDragData(source.data));
         _preventUnhandled.preventUnhandled.stop();
         var finalWidth = (0, _getWidth.getPixelWidth)(panel);
@@ -346,12 +407,12 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref2) {
  * </Aside>
  * ```
  */
-var PanelSplitter = exports.PanelSplitter = function PanelSplitter(_ref7) {
-  var label = _ref7.label,
-    onResizeStart = _ref7.onResizeStart,
-    onResizeEnd = _ref7.onResizeEnd,
-    testId = _ref7.testId,
-    tooltipContent = _ref7.tooltipContent;
+var PanelSplitter = exports.PanelSplitter = function PanelSplitter(_ref8) {
+  var label = _ref8.label,
+    onResizeStart = _ref8.onResizeStart,
+    onResizeEnd = _ref8.onResizeEnd,
+    testId = _ref8.testId,
+    tooltipContent = _ref8.tooltipContent;
   var _useState7 = (0, _react.useState)(null),
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
     panel = _useState8[0],

package/dist/es2019/ui/page-layout/panel-splitter/get-width.js

@@ -1,10 +1,17 @@
+import { fg } from '@atlaskit/platform-feature-flags';
+/**
+ * ⚠️ Note: We are not using the location.initial.input client locations because some browser extensions
+ * can cause the client locations (e.g. clientX) in the `dragstart` event to incorrectly return 0.
+ */
 export const getWidthFromDragLocation = ({
   initialWidth,
   location,
+  initialClientX,
   direction,
   position
 }) => {
-  const diffX = location.current.input.clientX - location.initial.input.clientX;
+  const diffX = location.current.input.clientX - (fg('platform-dst-panel-splitter-drag-start-client-x') ? initialClientX : location.initial.input.clientX);
+
   // Resize line is positioned at the inline-end (right) of the element.
   // If the direction is left-to-right, the width will increase when the mouse is moved to the right, and vice versa.
   if (position === 'end') {
@@ -15,7 +22,6 @@ export const getWidthFromDragLocation = ({
   // If the direction is left-to-right, the width will decrease when the mouse is moved to the right, and vice versa.
   return direction === 'ltr' ? initialWidth - diffX : initialWidth + diffX;
 };
-
 /**
  * Returns the computed width of an element in pixels.
  */

package/dist/es2019/ui/page-layout/panel-splitter/panel-splitter.compiled.css

@@ -14,6 +14,7 @@
 ._1qu2glyw{outline-style:none}
 ._4t3i1osq{height:100%}
 ._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
+._ahbq196n{margin-inline-start:var(--ds-space-negative-075,-6px)}
 ._bfhk1j28{background-color:transparent}
 ._bfhk1r31{background-color:currentColor}
 ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}

package/dist/es2019/ui/page-layout/panel-splitter/panel-splitter.js

@@ -1,20 +1,24 @@
 /* panel-splitter.tsx generated by @compiled/babel-plugin v0.38.1 */
+import _extends from "@babel/runtime/helpers/extends";
 import "./panel-splitter.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import { createPortal } from 'react-dom';
 import invariant from 'tiny-invariant';
+import noop from '@atlaskit/ds-lib/noop';
 import { useId } from '@atlaskit/ds-lib/use-id';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
 import { useOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { blockDraggingToIFrames } from '@atlaskit/pragmatic-drag-and-drop/element/block-dragging-to-iframes';
 import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
 import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
 import Tooltip from '@atlaskit/tooltip';
+import TooltipContainer from '@atlaskit/tooltip/TooltipContainer';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { OnDoubleClickContext, PanelSplitterContext } from './context';
@@ -34,6 +38,9 @@ const grabAreaStyles = {
 const lineStyles = {
   root: "_kqswstnw _1e0c1ule _1bsb1l7b _4t3i1osq _syaz1kw7 _bfhk1r31 _1e021v6z"
 };
+const tooltipStyles = {
+  root: "_ahbq196n"
+};
 const panelSplitterDragDataSymbol = Symbol('panel-splitter-drag-data');
 function signPanelSplitterDragData(data) {
   return {
@@ -41,6 +48,21 @@ function signPanelSplitterDragData(data) {
     [panelSplitterDragDataSymbol]: true
   };
 }
+const PanelSplitterTooltip = /*#__PURE__*/forwardRef(({
+  children,
+  className,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/React.createElement(TooltipContainer, _extends({}, props, {
+    ref: ref
+    // Must be statically passed
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/no-unsafe-style-overrides
+    ,
+    className: ax([tooltipStyles.root, className])
+    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
+  }), children);
+});
+
 /**
  * A wrapper component that renders a tooltip if the tooltipContent or shortcut is provided.
  */
@@ -54,9 +76,10 @@ const MaybeTooltip = ({
     return /*#__PURE__*/React.createElement(Tooltip, {
       content: tooltipContent,
       shortcut: shortcut,
-      position: "mouse",
+      position: fg('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? 'mouse-y' : 'mouse',
       mousePosition: "right",
-      isScreenReaderAnnouncementDisabled: true
+      isScreenReaderAnnouncementDisabled: true,
+      component: fg('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? PanelSplitterTooltip : undefined
     }, children);
   }
   return children;
@@ -110,12 +133,35 @@ const PortaledPanelSplitter = ({
    * Once `PanelSplitter` supports an `onDoubleClick` prop directly, this context can be removed.
    */
   const onDoubleClick = useContext(OnDoubleClickContext);
+
+  // Storing the initial `clientX` on `mousedown` events, to workaround a bug caused by some browser extensions
+  // where the `dragstart` event incorrectly returns `0` for the `clientX` location.
+  const initialClientXRef = useRef(null);
   useEffect(() => {
     const splitter = splitterRef.current;
     invariant(splitter, 'Splitter ref must be set');
     return combine(blockDraggingToIFrames({
       element: splitter
-    }), draggable({
+    }),
+    /**
+     * Capturing the initial `clientX` from the mousedown, before the drag starts.
+     *
+     * ⚠️ Note: We are not using pragmatic-drag-and-drop's `onDragStart` for this as some browser
+     * extensions can cause the client location (e.g. clientX) to incorrectly return 0 during the `dragstart` event.
+     *
+     * We are also not using pragmatic-drag-and-drop's `onDrag` here as it is throttled, which means
+     * fast mouse movements can cause the real first drag event to be missed, causing a different clientX
+     * to be captured.
+     *
+     * I also tried only binding an event listener inside pragmatic-drag-and-drop's `onDragStart`, which seemd to work
+     * but did not feel as robust, and might have timing issues as it happens slightly later.
+     */
+    fg('platform-dst-panel-splitter-drag-start-client-x') ? bind(splitter, {
+      type: 'mousedown',
+      listener: event => {
+        initialClientXRef.current = event.clientX;
+      }
+    }) : noop, draggable({
       element: splitter,
       onGenerateDragPreview: ({
         nativeSetDragImage
@@ -149,6 +195,10 @@ const PortaledPanelSplitter = ({
       onDragStart({
         source
       }) {
+        /**
+         * ⚠️ Note: We are not using the client locations (e.g. clientX) during `onDragStart`
+         * because some browser extensions can cause the event properties to incorrectly return 0.
+         */
         invariant(isPanelSplitterDragData(source.data));
         onResizeStart === null || onResizeStart === void 0 ? void 0 : onResizeStart({
           initialWidth: source.data.initialWidth
@@ -161,12 +211,20 @@ const PortaledPanelSplitter = ({
         location,
         source
       }) {
+        var _initialClientXRef$cu;
+        /**
+         * ⚠️ Note: We are not using the location.initial.input client locations because some browser extensions
+         * can cause the client locations (e.g. clientX) in the `dragstart` event to incorrectly return 0.
+         */
         invariant(isPanelSplitterDragData(source.data));
         const {
           initialWidth,
           resizeBounds,
           direction
         } = source.data;
+        if (fg('platform-dst-panel-splitter-drag-start-client-x')) {
+          invariant(initialClientXRef.current !== null, 'initialClientX must be set');
+        }
 
         /**
          * How wide the element would be if there were no width constraints,
@@ -175,6 +233,8 @@ const PortaledPanelSplitter = ({
         const targetWidth = getWidthFromDragLocation({
           initialWidth,
           location,
+          // The fallback of 0 won't be used due to the invariant, however we require one to satisfy the type.
+          initialClientX: (_initialClientXRef$cu = initialClientXRef.current) !== null && _initialClientXRef$cu !== void 0 ? _initialClientXRef$cu : 0,
           direction,
           position
         });

package/dist/esm/ui/page-layout/panel-splitter/get-width.js

@@ -1,9 +1,16 @@
+import { fg } from '@atlaskit/platform-feature-flags';
+/**
+ * ⚠️ Note: We are not using the location.initial.input client locations because some browser extensions
+ * can cause the client locations (e.g. clientX) in the `dragstart` event to incorrectly return 0.
+ */
 export var getWidthFromDragLocation = function getWidthFromDragLocation(_ref) {
   var initialWidth = _ref.initialWidth,
     location = _ref.location,
+    initialClientX = _ref.initialClientX,
     direction = _ref.direction,
     position = _ref.position;
-  var diffX = location.current.input.clientX - location.initial.input.clientX;
+  var diffX = location.current.input.clientX - (fg('platform-dst-panel-splitter-drag-start-client-x') ? initialClientX : location.initial.input.clientX);
+
   // Resize line is positioned at the inline-end (right) of the element.
   // If the direction is left-to-right, the width will increase when the mouse is moved to the right, and vice versa.
   if (position === 'end') {
@@ -14,7 +21,6 @@ export var getWidthFromDragLocation = function getWidthFromDragLocation(_ref) {
   // If the direction is left-to-right, the width will decrease when the mouse is moved to the right, and vice versa.
   return direction === 'ltr' ? initialWidth - diffX : initialWidth + diffX;
 };
-
 /**
  * Returns the computed width of an element in pixels.
  */

package/dist/esm/ui/page-layout/panel-splitter/panel-splitter.compiled.css

@@ -14,6 +14,7 @@
 ._1qu2glyw{outline-style:none}
 ._4t3i1osq{height:100%}
 ._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
+._ahbq196n{margin-inline-start:var(--ds-space-negative-075,-6px)}
 ._bfhk1j28{background-color:transparent}
 ._bfhk1r31{background-color:currentColor}
 ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}

package/dist/esm/ui/page-layout/panel-splitter/panel-splitter.js

@@ -1,24 +1,30 @@
 /* panel-splitter.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["children", "className"];
 import "./panel-splitter.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import { createPortal } from 'react-dom';
 import invariant from 'tiny-invariant';
+import noop from '@atlaskit/ds-lib/noop';
 import { useId } from '@atlaskit/ds-lib/use-id';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
 import { useOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { blockDraggingToIFrames } from '@atlaskit/pragmatic-drag-and-drop/element/block-dragging-to-iframes';
 import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
 import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
 import Tooltip from '@atlaskit/tooltip';
+import TooltipContainer from '@atlaskit/tooltip/TooltipContainer';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { OnDoubleClickContext, PanelSplitterContext } from './context';
@@ -38,25 +44,43 @@ var grabAreaStyles = {
 var lineStyles = {
   root: "_kqswstnw _1e0c1ule _1bsb1l7b _4t3i1osq _syaz1kw7 _bfhk1r31 _1e021v6z"
 };
+var tooltipStyles = {
+  root: "_ahbq196n"
+};
 var panelSplitterDragDataSymbol = Symbol('panel-splitter-drag-data');
 function signPanelSplitterDragData(data) {
   return _objectSpread(_objectSpread({}, data), {}, _defineProperty({}, panelSplitterDragDataSymbol, true));
 }
+var PanelSplitterTooltip = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(TooltipContainer, _extends({}, props, {
+    ref: ref
+    // Must be statically passed
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/no-unsafe-style-overrides
+    ,
+    className: ax([tooltipStyles.root, className])
+    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
+  }), children);
+});
+
 /**
  * A wrapper component that renders a tooltip if the tooltipContent or shortcut is provided.
  */
-var MaybeTooltip = function MaybeTooltip(_ref) {
-  var tooltipContent = _ref.tooltipContent,
-    shortcut = _ref.shortcut,
-    children = _ref.children;
+var MaybeTooltip = function MaybeTooltip(_ref2) {
+  var tooltipContent = _ref2.tooltipContent,
+    shortcut = _ref2.shortcut,
+    children = _ref2.children;
   var isFhsEnabled = useIsFhsEnabled();
   if (tooltipContent && isFhsEnabled) {
     return /*#__PURE__*/React.createElement(Tooltip, {
       content: tooltipContent,
       shortcut: shortcut,
-      position: "mouse",
+      position: fg('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? 'mouse-y' : 'mouse',
       mousePosition: "right",
-      isScreenReaderAnnouncementDisabled: true
+      isScreenReaderAnnouncementDisabled: true,
+      component: fg('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? PanelSplitterTooltip : undefined
     }, children);
   }
   return children;
@@ -69,21 +93,21 @@ function getTextDirection(element) {
     direction = _window$getComputedSt.direction;
   return direction === 'rtl' ? 'rtl' : 'ltr';
 }
-var PortaledPanelSplitter = function PortaledPanelSplitter(_ref2) {
-  var label = _ref2.label,
-    onResizeStart = _ref2.onResizeStart,
-    onResizeEnd = _ref2.onResizeEnd,
-    testId = _ref2.testId,
-    panelId = _ref2.panelId,
-    panelWidth = _ref2.panelWidth,
-    onCompleteResize = _ref2.onCompleteResize,
-    getResizeBounds = _ref2.getResizeBounds,
-    panel = _ref2.panel,
-    portal = _ref2.portal,
-    resizingCssVar = _ref2.resizingCssVar,
-    position = _ref2.position,
-    tooltipContent = _ref2.tooltipContent,
-    shortcut = _ref2.shortcut;
+var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
+  var label = _ref3.label,
+    onResizeStart = _ref3.onResizeStart,
+    onResizeEnd = _ref3.onResizeEnd,
+    testId = _ref3.testId,
+    panelId = _ref3.panelId,
+    panelWidth = _ref3.panelWidth,
+    onCompleteResize = _ref3.onCompleteResize,
+    getResizeBounds = _ref3.getResizeBounds,
+    panel = _ref3.panel,
+    portal = _ref3.portal,
+    resizingCssVar = _ref3.resizingCssVar,
+    position = _ref3.position,
+    tooltipContent = _ref3.tooltipContent,
+    shortcut = _ref3.shortcut;
   var isFhsEnabled = useIsFhsEnabled();
   var splitterRef = useRef(null);
   var labelId = useId();
@@ -114,15 +138,38 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref2) {
    * Once `PanelSplitter` supports an `onDoubleClick` prop directly, this context can be removed.
    */
   var onDoubleClick = useContext(OnDoubleClickContext);
+
+  // Storing the initial `clientX` on `mousedown` events, to workaround a bug caused by some browser extensions
+  // where the `dragstart` event incorrectly returns `0` for the `clientX` location.
+  var initialClientXRef = useRef(null);
   useEffect(function () {
     var splitter = splitterRef.current;
     invariant(splitter, 'Splitter ref must be set');
     return combine(blockDraggingToIFrames({
       element: splitter
-    }), draggable({
+    }),
+    /**
+     * Capturing the initial `clientX` from the mousedown, before the drag starts.
+     *
+     * ⚠️ Note: We are not using pragmatic-drag-and-drop's `onDragStart` for this as some browser
+     * extensions can cause the client location (e.g. clientX) to incorrectly return 0 during the `dragstart` event.
+     *
+     * We are also not using pragmatic-drag-and-drop's `onDrag` here as it is throttled, which means
+     * fast mouse movements can cause the real first drag event to be missed, causing a different clientX
+     * to be captured.
+     *
+     * I also tried only binding an event listener inside pragmatic-drag-and-drop's `onDragStart`, which seemd to work
+     * but did not feel as robust, and might have timing issues as it happens slightly later.
+     */
+    fg('platform-dst-panel-splitter-drag-start-client-x') ? bind(splitter, {
+      type: 'mousedown',
+      listener: function listener(event) {
+        initialClientXRef.current = event.clientX;
+      }
+    }) : noop, draggable({
       element: splitter,
-      onGenerateDragPreview: function onGenerateDragPreview(_ref3) {
-        var nativeSetDragImage = _ref3.nativeSetDragImage;
+      onGenerateDragPreview: function onGenerateDragPreview(_ref4) {
+        var nativeSetDragImage = _ref4.nativeSetDragImage;
         // We will be moving the line to indicate a drag. We can disable the native drag preview
         disableNativeDragPreview({
           nativeSetDragImage: nativeSetDragImage
@@ -149,8 +196,12 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref2) {
           direction: getTextDirection(panel)
         });
       },
-      onDragStart: function onDragStart(_ref4) {
-        var source = _ref4.source;
+      onDragStart: function onDragStart(_ref5) {
+        var source = _ref5.source;
+        /**
+         * ⚠️ Note: We are not using the client locations (e.g. clientX) during `onDragStart`
+         * because some browser extensions can cause the event properties to incorrectly return 0.
+         */
         invariant(isPanelSplitterDragData(source.data));
         onResizeStart === null || onResizeStart === void 0 || onResizeStart({
           initialWidth: source.data.initialWidth
@@ -159,14 +210,22 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref2) {
         // Close any open layers when the user starts resizing
         openLayerObserver === null || openLayerObserver === void 0 || openLayerObserver.closeLayers();
       },
-      onDrag: function onDrag(_ref5) {
-        var location = _ref5.location,
-          source = _ref5.source;
+      onDrag: function onDrag(_ref6) {
+        var _initialClientXRef$cu;
+        var location = _ref6.location,
+          source = _ref6.source;
+        /**
+         * ⚠️ Note: We are not using the location.initial.input client locations because some browser extensions
+         * can cause the client locations (e.g. clientX) in the `dragstart` event to incorrectly return 0.
+         */
         invariant(isPanelSplitterDragData(source.data));
         var _source$data = source.data,
           initialWidth = _source$data.initialWidth,
           resizeBounds = _source$data.resizeBounds,
           direction = _source$data.direction;
+        if (fg('platform-dst-panel-splitter-drag-start-client-x')) {
+          invariant(initialClientXRef.current !== null, 'initialClientX must be set');
+        }
 
         /**
          * How wide the element would be if there were no width constraints,
@@ -175,6 +234,8 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref2) {
         var targetWidth = getWidthFromDragLocation({
           initialWidth: initialWidth,
           location: location,
+          // The fallback of 0 won't be used due to the invariant, however we require one to satisfy the type.
+          initialClientX: (_initialClientXRef$cu = initialClientXRef.current) !== null && _initialClientXRef$cu !== void 0 ? _initialClientXRef$cu : 0,
           direction: direction,
           position: position
         });
@@ -182,8 +243,8 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref2) {
         panel.style.setProperty(resizingCssVar, resizingWidth);
         source.data.resizingWidth = resizingWidth;
       },
-      onDrop: function onDrop(_ref6) {
-        var source = _ref6.source;
+      onDrop: function onDrop(_ref7) {
+        var source = _ref7.source;
         invariant(isPanelSplitterDragData(source.data));
         preventUnhandled.stop();
         var finalWidth = getPixelWidth(panel);
@@ -336,12 +397,12 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref2) {
  * </Aside>
  * ```
  */
-export var PanelSplitter = function PanelSplitter(_ref7) {
-  var label = _ref7.label,
-    onResizeStart = _ref7.onResizeStart,
-    onResizeEnd = _ref7.onResizeEnd,
-    testId = _ref7.testId,
-    tooltipContent = _ref7.tooltipContent;
+export var PanelSplitter = function PanelSplitter(_ref8) {
+  var label = _ref8.label,
+    onResizeStart = _ref8.onResizeStart,
+    onResizeEnd = _ref8.onResizeEnd,
+    testId = _ref8.testId,
+    tooltipContent = _ref8.tooltipContent;
   var _useState7 = useState(null),
     _useState8 = _slicedToArray(_useState7, 2),
     panel = _useState8[0],

package/dist/types/ui/page-layout/panel-splitter/get-width.d.ts

@@ -1,7 +1,12 @@
 import type { DragLocationHistory } from '@atlaskit/pragmatic-drag-and-drop/types';
-export declare const getWidthFromDragLocation: ({ initialWidth, location, direction, position, }: {
+/**
+ * ⚠️ Note: We are not using the location.initial.input client locations because some browser extensions
+ * can cause the client locations (e.g. clientX) in the `dragstart` event to incorrectly return 0.
+ */
+export declare const getWidthFromDragLocation: ({ initialWidth, location, initialClientX, direction, position, }: {
     initialWidth: number;
     location: DragLocationHistory;
+    initialClientX: number;
     direction: "ltr" | "rtl";
     position: "start" | "end";
 }) => number;

package/dist/types-ts4.5/ui/page-layout/panel-splitter/get-width.d.ts

@@ -1,7 +1,12 @@
 import type { DragLocationHistory } from '@atlaskit/pragmatic-drag-and-drop/types';
-export declare const getWidthFromDragLocation: ({ initialWidth, location, direction, position, }: {
+/**
+ * ⚠️ Note: We are not using the location.initial.input client locations because some browser extensions
+ * can cause the client locations (e.g. clientX) in the `dragstart` event to incorrectly return 0.
+ */
+export declare const getWidthFromDragLocation: ({ initialWidth, location, initialClientX, direction, position, }: {
     initialWidth: number;
     location: DragLocationHistory;
+    initialClientX: number;
     direction: "ltr" | "rtl";
     position: "start" | "end";
 }) => number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "5.19.0",
+	"version": "5.21.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -72,7 +72,7 @@
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/ds-lib": "^5.3.0",
 		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/icon": "^29.3.0",
+		"@atlaskit/icon": "^29.4.0",
 		"@atlaskit/layering": "^3.6.0",
 		"@atlaskit/logo": "^19.9.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
@@ -82,7 +82,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^17.0.0",
 		"@atlaskit/tokens": "^9.1.0",
-		"@atlaskit/tooltip": "^20.11.0",
+		"@atlaskit/tooltip": "^20.12.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.6",
@@ -193,6 +193,9 @@
 		},
 		"platform_dst_nav4_flyout_menu_slots_close_button": {
 			"type": "boolean"
+		},
+		"platform-dst-panel-splitter-drag-start-client-x": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/navigation-system"