@atlaskit/navigation-system 5.20.0 → 5.21.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @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

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.js

@@ -19,6 +19,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 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");
@@ -147,12 +148,35 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
    * 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(_ref4) {
         var nativeSetDragImage = _ref4.nativeSetDragImage;
@@ -184,6 +208,10 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
       },
       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
@@ -193,13 +221,21 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
         openLayerObserver === null || openLayerObserver === void 0 || openLayerObserver.closeLayers();
       },
       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,
@@ -208,6 +244,8 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
         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
         });

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.js

@@ -7,6 +7,7 @@ import { forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useSta
 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';
@@ -132,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
@@ -171,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
@@ -183,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,
@@ -197,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.js

@@ -13,6 +13,7 @@ import { forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useSta
 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';
@@ -137,12 +138,35 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
    * 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(_ref4) {
         var nativeSetDragImage = _ref4.nativeSetDragImage;
@@ -174,6 +198,10 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
       },
       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
@@ -183,13 +211,21 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
         openLayerObserver === null || openLayerObserver === void 0 || openLayerObserver.closeLayers();
       },
       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,
@@ -198,6 +234,8 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
         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
         });

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.20.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",
@@ -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"