@atlaskit/navigation-system 5.38.0 → 5.39.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlassian/navigation-system
 
+## 5.39.0
+
+### Minor Changes
+
+- [`c987f6814195b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c987f6814195b) -
+  Fixes a bug where the panel splitter would not be resizable when some browser extensions were
+  installed. This change was previousuly behind the feature flag
+  `platform-dst-panel-splitter-drag-start-client-x`, which has now been cleaned up.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 5.38.1
+
+### Patch Changes
+
+- [`ceba2f0da51d4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ceba2f0da51d4) -
+  Add @starting-style to ESLint ignoredAtRules to allow usage without eslint-disable comments
+
 ## 5.38.0
 
 ### Minor Changes

package/constellation/layout/usage.mdx

@@ -96,28 +96,29 @@ The main difference between Aside, Panel and Modal dialog is their behaviours:
 
 ### Design using grid in the Main area
 
-<DoDont
-	type="do"
-	image={{
-		url: layoutDo,
-		alt: 'A layout with a grid overlay on the Main area.',
-	}}
-	isFullWidth
->
-	When designing, use <a href="/foundations/grid-beta">Grid</a> to position content within the Main
-	area only.
-</DoDont>
-
-<DoDont
-	type="dont"
-	image={{
-		url: layoutDont,
-		alt: 'A layout with a grid overlay on the Main area, but also on the Side nav, Aside and Panel areas.',
-	}}
-	isFullWidth
->
-	Don't include Side nav, Aside or Panel areas as part of your Grid.
-</DoDont>
+<DoDontGrid>
+	<DoDont
+		type="do"
+		image={{
+			url: layoutDo,
+			alt: 'A layout with a grid overlay on the Main area.',
+		}}
+		isFullWidth
+	>
+		When designing, use <a href="/foundations/grid-beta">Grid</a> to position content within the
+		Main area only.
+	</DoDont>
+	<DoDont
+		type="dont"
+		image={{
+			url: layoutDont,
+			alt: 'A layout with a grid overlay on the Main area, but also on the Side nav, Aside and Panel areas.',
+		}}
+		isFullWidth
+	>
+		Don't include Side nav, Aside or Panel areas as part of your Grid.
+	</DoDont>
+</DoDontGrid>
 
 ## Related
 

package/constellation/side-nav-items/usage.mdx

@@ -96,25 +96,26 @@ Side nav menus are reserved for use directly within the
 Menus anywhere else in the app, including those triggered from the top navigation, should also use
 regular [menu](/components/menu) or [dropdown menu](/components/dropdown-menu).
 
-<DoDont
-	type="do"
-	image={{
-		url: sideNavDo1,
-		alt: 'A side nav with side nav items only.',
-	}}
->
-	Use side nav menus directly in the side nav or flyout menu content.
-</DoDont>
-
-<DoDont
-	type="dont"
-	image={{
-		url: sideNavDont1,
-		alt: 'Side nav items incorrectly used in the top nav.',
-	}}
->
-	Don’t use side nav menus in other parts of the app.
-</DoDont>
+<DoDontGrid>
+	<DoDont
+		type="do"
+		image={{
+			url: sideNavDo1,
+			alt: 'A side nav with side nav items only.',
+		}}
+	>
+		Use side nav menus directly in the side nav or flyout menu content.
+	</DoDont>
+	<DoDont
+		type="dont"
+		image={{
+			url: sideNavDont1,
+			alt: 'Side nav items incorrectly used in the top nav.',
+		}}
+	>
+		Don’t use side nav menus in other parts of the app.
+	</DoDont>
+</DoDontGrid>
 
 ### Use dropdown menu for menus triggered from the side nav
 
@@ -124,56 +125,54 @@ Ensure you follow the general usage guidance for dropdown menu and use the follo
 - default density (cozy)
 - default placement (bottom-start; adjusts accordingly when space is limited)
 
-<DoDont
-	type="do"
-	image={{
-		url: sideNavDo2,
-		alt: 'An open dropdown menu with a list of items.',
-	}}
-	isFullWidth
->
-	Use dropdown menu for menus triggered by actions or actionsOnHover.
-</DoDont>
-
-<DoDont
-	type="dont"
-	image={{
-		url: sideNavDont2,
-		alt: 'A dropdown menu with a list of items.',
-	}}
->
-	Don’t use side nav menu in dropdown menus.
-</DoDont>
-
-<DoDont
-	type="dont"
-	image={{
-		url: sideNavDont3,
-		alt: 'A dropdown menu with menu item that uses compact density.',
-	}}
->
-	Don’t use compact density for dropdown menus.
-</DoDont>
-
-<DoDont
-	type="dont"
-	image={{
-		url: sideNavDont4,
-		alt: 'A dropdown menu with menu item that does not have a selected state.',
-	}}
->
-	Don’t omit the selected state on the dropdown trigger when open.
-</DoDont>
-
-<DoDont
-	type="dont"
-	image={{
-		url: sideNavDont5,
-		alt: 'A dropdown menu with a disabled menu item.',
-	}}
->
-	Don’t use disabled menu items, see [menu](/components/menu/usage) guidance.
-</DoDont>
+<DoDontGrid>
+	<DoDont
+		type="do"
+		image={{
+			url: sideNavDo2,
+			alt: 'An open dropdown menu with a list of items.',
+		}}
+		isFullWidth
+	>
+		Use dropdown menu for menus triggered by actions or actionsOnHover.
+	</DoDont>
+	<DoDont
+		type="dont"
+		image={{
+			url: sideNavDont2,
+			alt: 'A dropdown menu with a list of items.',
+		}}
+	>
+		Don’t use side nav menu in dropdown menus.
+	</DoDont>
+	<DoDont
+		type="dont"
+		image={{
+			url: sideNavDont3,
+			alt: 'A dropdown menu with menu item that uses compact density.',
+		}}
+	>
+		Don’t use compact density for dropdown menus.
+	</DoDont>
+	<DoDont
+		type="dont"
+		image={{
+			url: sideNavDont4,
+			alt: 'A dropdown menu with menu item that does not have a selected state.',
+		}}
+	>
+		Don’t omit the selected state on the dropdown trigger when open.
+	</DoDont>
+	<DoDont
+		type="dont"
+		image={{
+			url: sideNavDont5,
+			alt: 'A dropdown menu with a disabled menu item.',
+		}}
+	>
+		Don’t use disabled menu items, see [menu](/components/menu/usage) guidance.
+	</DoDont>
+</DoDontGrid>
 
 ## Best practices
 
@@ -185,25 +184,26 @@ Use [`elemBefore`](/components/navigation-system/side-nav-items/examples#elembef
 [`actionsOnHover`](/components/navigation-system/side-nav-items/examples#actions-and-actionsonhover)
 slots for configuring menu items.
 
-<DoDont
-	type="do"
-	image={{
-		url: sideNavDo3,
-		alt: 'A menu item with "Templates" label and "TRY" text properly placed in a designated slot on the right.',
-	}}
->
-	Use the slots in side nav menus as intended.
-</DoDont>
-
-<DoDont
-	type="dont"
-	image={{
-		url: sideNavDont6,
-		alt: 'A menu item with "Templates" label and "TRY" text incorrectly placed within the same text area.',
-	}}
->
-	Don't add custom elements where they're not intended, such as within the label.
-</DoDont>
+<DoDontGrid>
+	<DoDont
+		type="do"
+		image={{
+			url: sideNavDo3,
+			alt: 'A menu item with "Templates" label and "TRY" text properly placed in a designated slot on the right.',
+		}}
+	>
+		Use the slots in side nav menus as intended.
+	</DoDont>
+	<DoDont
+		type="dont"
+		image={{
+			url: sideNavDont6,
+			alt: 'A menu item with "Templates" label and "TRY" text incorrectly placed within the same text area.',
+		}}
+	>
+		Don't add custom elements where they're not intended, such as within the label.
+	</DoDont>
+</DoDontGrid>
 
 ### Apply icon sizes correctly
 
@@ -215,26 +215,27 @@ Consider the following when applying icon sizes:
 - Chevrons always use small (12px) icons, regardless of where they're being applied.
 - All icons in side nav menu items use [spacious padding](/components/icon/examples#spacing-props).
 
-<DoDont
-	type="do"
-	image={{
-		url: sideNavDo4,
-		alt: 'A menu item with "Projects" label, 16px rocket icon on the left, and 12px plus and ellipsis icons on the right.',
-	}}
->
-	Use small (12px) icons for actions, actionOnHover, and elemAfter. Use default (medium 16px) icons
-	for elemBefore.
-</DoDont>
-
-<DoDont
-	type="dont"
-	image={{
-		url: sideNavDont7,
-		alt: 'A menu item with "Projects" label, rocket icon, and incorrectly sized plus and ellipsis icons on the right.',
-	}}
->
-	Don't use incorrect icons sizes in menu items, which can feel unbalanced.
-</DoDont>
+<DoDontGrid>
+	<DoDont
+		type="do"
+		image={{
+			url: sideNavDo4,
+			alt: 'A menu item with "Projects" label, 16px rocket icon on the left, and 12px plus and ellipsis icons on the right.',
+		}}
+	>
+		Use small (12px) icons for actions, actionOnHover, and elemAfter. Use default (medium 16px)
+		icons for elemBefore.
+	</DoDont>
+	<DoDont
+		type="dont"
+		image={{
+			url: sideNavDont7,
+			alt: 'A menu item with "Projects" label, rocket icon, and incorrectly sized plus and ellipsis icons on the right.',
+		}}
+	>
+		Don't use incorrect icons sizes in menu items, which can feel unbalanced.
+	</DoDont>
+</DoDontGrid>
 
 ### Apply icon button correctly
 
@@ -243,49 +244,51 @@ such as in `actions` and `actionsOnHover`, or `elemBefore` in expandable menu it
 
 For `actions` and `actionsOnHover`, when there is more than one icon button, use 4px spacing.
 
-<DoDont
-	type="do"
-	image={{
-		url: sideNavDo5,
-		alt: 'A menu item with "Projects" label, rocket icon, and subtle compact plus and ellipsis icon buttons with hover tooltip.',
-	}}
->
-	Use subtle compact icon buttons in side nav menu items.
-</DoDont>
-
-<DoDont
-	type="dont"
-	image={{
-		url: sideNavDont8,
-		alt: 'A menu item with "Projects" label, rocket icon, and default icon buttons instead of subtle compact ones.',
-	}}
->
-	Don't use default icon buttons in side nav menu items.
-</DoDont>
+<DoDontGrid>
+	<DoDont
+		type="do"
+		image={{
+			url: sideNavDo5,
+			alt: 'A menu item with "Projects" label, rocket icon, and subtle compact plus and ellipsis icon buttons with hover tooltip.',
+		}}
+	>
+		Use subtle compact icon buttons in side nav menu items.
+	</DoDont>
+	<DoDont
+		type="dont"
+		image={{
+			url: sideNavDont8,
+			alt: 'A menu item with "Projects" label, rocket icon, and default icon buttons instead of subtle compact ones.',
+		}}
+	>
+		Don't use default icon buttons in side nav menu items.
+	</DoDont>
+</DoDontGrid>
 
 ### Use ContainerAvatar
 
-<DoDont
-	type="do"
-	image={{
-		url: sideNavDo6,
-		alt: 'A menu item with "Mobile app" label and ContainerAvatar icon on the left.',
-	}}
->
-	Use{' '}
-	<a href="/components/navigation-system/side-nav-items/code#containeravatar">ContainerAvatar</a> in
-	side nav menu items, which are designed with the correct size and spacing.
-</DoDont>
-
-<DoDont
-	type="dont"
-	image={{
-		url: sideNavDont9,
-		alt: 'A menu item with "Mobile app" label and regular avatar icon instead of ContainerAvatar.',
-	}}
->
-	Don't use <a href="/components/avatar">regular avatar</a> in side nav menu items.
-</DoDont>
+<DoDontGrid>
+	<DoDont
+		type="do"
+		image={{
+			url: sideNavDo6,
+			alt: 'A menu item with "Mobile app" label and ContainerAvatar icon on the left.',
+		}}
+	>
+		Use{' '}
+		<a href="/components/navigation-system/side-nav-items/code#containeravatar">ContainerAvatar</a>{' '}
+		in side nav menu items, which are designed with the correct size and spacing.
+	</DoDont>
+	<DoDont
+		type="dont"
+		image={{
+			url: sideNavDont9,
+			alt: 'A menu item with "Mobile app" label and regular avatar icon instead of ContainerAvatar.',
+		}}
+	>
+		Don't use <a href="/components/avatar">regular avatar</a> in side nav menu items.
+	</DoDont>
+</DoDontGrid>
 
 ## Content guidelines
 
@@ -296,26 +299,27 @@ or feature name that has been approved by legal.
 
 If the menu name is user generated, display as is.
 
-<DoDont
-	type="do"
-	image={{
-		url: sideNavDo7,
-		alt: 'A menu item with "For you" label using sentence case.',
-	}}
->
-	Only capitalize the first letter of the first word of the label.
-</DoDont>
-
-<DoDont
-	type="dont"
-	image={{
-		url: sideNavDont10,
-		alt: 'A menu item with "For You" label using title case.',
-	}}
->
-	Don't capitalize other parts of the label unless it is a trademarked app or feature name (not all
-	features are capitalized).
-</DoDont>
+<DoDontGrid>
+	<DoDont
+		type="do"
+		image={{
+			url: sideNavDo7,
+			alt: 'A menu item with "For you" label using sentence case.',
+		}}
+	>
+		Only capitalize the first letter of the first word of the label.
+	</DoDont>
+	<DoDont
+		type="dont"
+		image={{
+			url: sideNavDont10,
+			alt: 'A menu item with "For You" label using title case.',
+		}}
+	>
+		Don't capitalize other parts of the label unless it is a trademarked app or feature name (not
+		all features are capitalized).
+	</DoDont>
+</DoDontGrid>
 
 ## Related
 

package/constellation/top-nav-items/usage.mdx

@@ -30,47 +30,49 @@ navigation follows Atlassian patterns consistently,
 
 ### Use the top nav items provided
 
-<DoDont
-	type="do"
-	image={{
-		url: topNavDo1,
-		alt: 'Two buttons, one outlined and one solid purple, both labeled "Button".',
-	}}
->
-	Use the top nav items provided.
-</DoDont>
-
-<DoDont
-	type="dont"
-	image={{
-		url: topNavDont1,
-		alt: 'Two buttons, one outlined and one solid purple, both labeled "Button".',
-	}}
->
-	Don't use regular button in the top nav, as it won't respect custom theming.
-</DoDont>
+<DoDontGrid>
+	<DoDont
+		type="do"
+		image={{
+			url: topNavDo1,
+			alt: 'Two buttons, one outlined and one solid purple, both labeled "Button".',
+		}}
+	>
+		Use the top nav items provided.
+	</DoDont>
+	<DoDont
+		type="dont"
+		image={{
+			url: topNavDont1,
+			alt: 'Two buttons, one outlined and one solid purple, both labeled "Button".',
+		}}
+	>
+		Don't use regular button in the top nav, as it won't respect custom theming.
+	</DoDont>
+</DoDontGrid>
 
 ### Don't add elements to the top nav area
 
-<DoDont
-	type="do"
-	image={{
-		url: topNavDo2,
-		alt: 'A segment of a top navigation bar showing standard Atlassian icons and a highlighted "ate" item.',
-	}}
->
-	Use the top nav items as intended.
-</DoDont>
-
-<DoDont
-	type="dont"
-	image={{
-		url: topNavDont2,
-		alt: 'A segment of a top navigation bar showing standard Atlassian icons with an additional "Logout" button and a diamond icon.',
-	}}
->
-	Don't add elements to the top nav, which may negatively impact consistency across apps.
-</DoDont>
+<DoDontGrid>
+	<DoDont
+		type="do"
+		image={{
+			url: topNavDo2,
+			alt: 'A segment of a top navigation bar showing standard Atlassian icons and a highlighted "ate" item.',
+		}}
+	>
+		Use the top nav items as intended.
+	</DoDont>
+	<DoDont
+		type="dont"
+		image={{
+			url: topNavDont2,
+			alt: 'A segment of a top navigation bar showing standard Atlassian icons with an additional "Logout" button and a diamond icon.',
+		}}
+	>
+		Don't add elements to the top nav, which may negatively impact consistency across apps.
+	</DoDont>
+</DoDontGrid>
 
 ## Related
 

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

@@ -4,10 +4,9 @@ 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.
+ * ⚠️ Note: We are using the initial client location captured from the mousedown event, not from the dragstart event.
+ * 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,
@@ -15,7 +14,7 @@ var getWidthFromDragLocation = exports.getWidthFromDragLocation = function getWi
     initialClientX = _ref.initialClientX,
     direction = _ref.direction,
     position = _ref.position;
-  var diffX = location.current.input.clientX - ((0, _platformFeatureFlags.fg)('platform-dst-panel-splitter-drag-start-client-x') ? initialClientX : location.initial.input.clientX);
+  var diffX = location.current.input.clientX - initialClientX;
 
   // 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.

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

@@ -19,7 +19,6 @@ 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");
@@ -210,12 +209,12 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
      * 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, {
+    (0, _bindEventListener.bind)(splitter, {
       type: 'mousedown',
       listener: function listener(event) {
         initialClientXRef.current = event.clientX;
       }
-    }) : _noop.default, (0, _adapter.draggable)({
+    }), (0, _adapter.draggable)({
       element: splitter,
       onGenerateDragPreview: function onGenerateDragPreview(_ref4) {
         var nativeSetDragImage = _ref4.nativeSetDragImage;
@@ -272,9 +271,7 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
           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');
-        }
+        (0, _tinyInvariant.default)(initialClientXRef.current !== null, 'initialClientX must be set');
 
         /**
          * How wide the element would be if there were no width constraints,

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

@@ -1,7 +1,6 @@
-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.
+ * ⚠️ Note: We are using the initial client location captured from the mousedown event, not from the dragstart event.
+ * Some browser extensions can cause the client locations (e.g. clientX) in the `dragstart` event to incorrectly return 0.
  */
 export const getWidthFromDragLocation = ({
   initialWidth,
@@ -10,7 +9,7 @@ export const getWidthFromDragLocation = ({
   direction,
   position
 }) => {
-  const diffX = location.current.input.clientX - (fg('platform-dst-panel-splitter-drag-start-client-x') ? initialClientX : location.initial.input.clientX);
+  const diffX = location.current.input.clientX - initialClientX;
 
   // 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.

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

@@ -7,7 +7,6 @@ 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';
@@ -193,12 +192,12 @@ const PortaledPanelSplitter = ({
      * 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, {
+    bind(splitter, {
       type: 'mousedown',
       listener: event => {
         initialClientXRef.current = event.clientX;
       }
-    }) : noop, draggable({
+    }), draggable({
       element: splitter,
       onGenerateDragPreview: ({
         nativeSetDragImage
@@ -259,9 +258,7 @@ const PortaledPanelSplitter = ({
           resizeBounds,
           direction
         } = source.data;
-        if (fg('platform-dst-panel-splitter-drag-start-client-x')) {
-          invariant(initialClientXRef.current !== null, 'initialClientX must be set');
-        }
+        invariant(initialClientXRef.current !== null, 'initialClientX must be set');
 
         /**
          * How wide the element would be if there were no width constraints,

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

@@ -1,7 +1,6 @@
-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.
+ * ⚠️ Note: We are using the initial client location captured from the mousedown event, not from the dragstart event.
+ * 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,
@@ -9,7 +8,7 @@ export var getWidthFromDragLocation = function getWidthFromDragLocation(_ref) {
     initialClientX = _ref.initialClientX,
     direction = _ref.direction,
     position = _ref.position;
-  var diffX = location.current.input.clientX - (fg('platform-dst-panel-splitter-drag-start-client-x') ? initialClientX : location.initial.input.clientX);
+  var diffX = location.current.input.clientX - initialClientX;
 
   // 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.

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

@@ -13,7 +13,6 @@ 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';
@@ -200,12 +199,12 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
      * 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, {
+    bind(splitter, {
       type: 'mousedown',
       listener: function listener(event) {
         initialClientXRef.current = event.clientX;
       }
-    }) : noop, draggable({
+    }), draggable({
       element: splitter,
       onGenerateDragPreview: function onGenerateDragPreview(_ref4) {
         var nativeSetDragImage = _ref4.nativeSetDragImage;
@@ -262,9 +261,7 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
           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');
-        }
+        invariant(initialClientXRef.current !== null, 'initialClientX must be set');
 
         /**
          * How wide the element would be if there were no width constraints,

package/dist/types/components/skip-links/skip-link.d.ts

@@ -12,5 +12,5 @@ import type { SkipLinkData } from '../../context/skip-links/types';
 export declare const SkipLink: ({ id, children, onBeforeNavigate, }: {
     id: string;
     children: ReactNode;
-    onBeforeNavigate?: SkipLinkData["onBeforeNavigate"];
+    onBeforeNavigate?: SkipLinkData['onBeforeNavigate'];
 }) => JSX.Element;

package/dist/types/context/skip-links/skip-links-context.d.ts

@@ -6,7 +6,7 @@ export type SkipLinksContextData = {
 /**
  * Provides a way to register and unregister skip links
  */
-export declare const SkipLinksContext: import("react").Context<SkipLinksContextData>;
+export declare const SkipLinksContext: import('react').Context<SkipLinksContextData>;
 /**
  * Internal-only hook for registering skip links.
  *

package/dist/types/context/top-nav-start/top-nav-start-context.d.ts

@@ -3,7 +3,7 @@
  * Used to power the side nav flyout by allowing the side nav to bind event listeners to the element, so we can
  * keep the flyout open while the user mouses from the top bar to the side nav.
  */
-export declare const TopNavStartElement: import("react").Context<HTMLDivElement | null>;
+export declare const TopNavStartElement: import('react').Context<HTMLDivElement | null>;
 /**
  * Context for the callback ref used to respond to the TopNavStart element ref being attached. It is used to update the
  * `TopNavStartElement` state so consumers can react to the ref being attached.
@@ -13,4 +13,4 @@ export declare const TopNavStartElement: import("react").Context<HTMLDivElement
  * A callback ref is needed because the side nav can be mounted before elements in the top bar (e.g. if the element is lazy loaded),
  * which happens in Jira and Confluence), which would prevent the event listeners from being set up.
  */
-export declare const TopNavStartAttachRef: import("react").Context<(newVal: HTMLDivElement | null) => void>;
+export declare const TopNavStartAttachRef: import('react').Context<(newVal: HTMLDivElement | null) => void>;

package/dist/types/entry-points/side-nav-items/flyout-menu-item.d.ts

@@ -1 +1 @@
-export { FlyoutMenuItem, type FlyoutMenuItemProps, FlyoutBody, type FlyoutBodyProps, FlyoutMenuItemContent, type FlyoutMenuItemContentProps, FlyoutFooter, type FlyoutFooterProps, FlyoutHeader, type FlyoutHeaderProps, FlyoutMenuItemTrigger, type FlyoutMenuItemTriggerProps, COLLAPSE_ELEM_BEFORE } from '@atlaskit/side-nav-items/flyout-menu-item';
+export { FlyoutMenuItem, type FlyoutMenuItemProps, FlyoutBody, type FlyoutBodyProps, FlyoutMenuItemContent, type FlyoutMenuItemContentProps, FlyoutFooter, type FlyoutFooterProps, FlyoutHeader, type FlyoutHeaderProps, FlyoutMenuItemTrigger, type FlyoutMenuItemTriggerProps, COLLAPSE_ELEM_BEFORE, } from '@atlaskit/side-nav-items/flyout-menu-item';

package/dist/types/ui/fhs-rollout/is-custom-is-fhs-enabled-context.d.ts

@@ -4,4 +4,4 @@
  * Tracks if a custom value has been provided for `IsFhsEnabledContext`.
  * Used to prevent nesting of the `IsFhsEnabledProvider`.
  */
-export declare const IsCustomIsFhsEnabledContext: import("react").Context<boolean>;
+export declare const IsCustomIsFhsEnabledContext: import('react').Context<boolean>;

package/dist/types/ui/fhs-rollout/is-fhs-enabled-context.d.ts

@@ -5,4 +5,4 @@ import type { Get } from './types';
  * Tracks is FHS enabled.
  * Defaults to feature gate 'navx-full-height-sidebar'.
  */
-export declare const IsFhsEnabledContext: import("react").Context<boolean | Get<boolean>>;
+export declare const IsFhsEnabledContext: import('react').Context<boolean | Get<boolean>>;

package/dist/types/ui/page-layout/hoist-slot-sizes-context.d.ts

@@ -2,4 +2,4 @@
  * Context for whether the slot sizes are to be hoisted to the document root.
  * It is set by consumers using a prop on the page layout `Root` element.
  */
-export declare const DangerouslyHoistSlotSizes: import("react").Context<boolean>;
+export declare const DangerouslyHoistSlotSizes: import('react').Context<boolean>;

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

@@ -63,7 +63,7 @@ export type PanelSplitterContextType = {
 /**
  * Context for the panel splitter. Only internally exported.
  */
-export declare const PanelSplitterContext: import("react").Context<PanelSplitterContextType | null>;
+export declare const PanelSplitterContext: import('react').Context<PanelSplitterContextType | null>;
 /**
  * Context for the panel splitter's double click handler. Only internally exported.
  *
@@ -71,4 +71,4 @@ export declare const PanelSplitterContext: import("react").Context<PanelSplitter
  * to collapse the side nav on double click, without exposing the `onDoubleClick` prop on `PanelSplitter`.
  * Once `PanelSplitter` supports an `onDoubleClick` prop directly, this context should be removed.
  */
-export declare const OnDoubleClickContext: import("react").Context<(() => void) | undefined>;
+export declare const OnDoubleClickContext: import('react').Context<(() => void) | undefined>;

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

@@ -1,7 +1,7 @@
 import type { DragLocationHistory } from '@atlaskit/pragmatic-drag-and-drop/types';
 /**
- * ⚠️ 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.
+ * ⚠️ Note: We are using the initial client location captured from the mousedown event, not from the dragstart event.
+ * 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;

package/dist/types/ui/page-layout/side-nav/toggle-button-context.d.ts

@@ -2,7 +2,7 @@
  * Context for the side nav toggle button element.
  * Used to power the side nav flyout by allowing the side nav to bind event listeners to the button element.
  */
-export declare const SideNavToggleButtonElement: import("react").Context<HTMLButtonElement | null>;
+export declare const SideNavToggleButtonElement: import('react').Context<HTMLButtonElement | null>;
 /**
  * Context for the callback ref used to respond to toggle button ref being attached. It is used to update the
  * `SideNavToggleButtonRef` state so consumers can react to the ref being attached.
@@ -13,4 +13,4 @@ export declare const SideNavToggleButtonElement: import("react").Context<HTMLBut
  * A callback ref is needed because the side nav can be mounted before the elements in the top bar (e.g. if the element
  *  is lazy loaded, which happens in Jira and Confluence), which would prevent the event listeners from being set up.
  */
-export declare const SideNavToggleButtonAttachRef: import("react").Context<(newVal: HTMLButtonElement | null) => void>;
+export declare const SideNavToggleButtonAttachRef: import('react').Context<(newVal: HTMLButtonElement | null) => void>;

package/dist/types/ui/page-layout/side-nav/visibility-context.d.ts

@@ -4,8 +4,8 @@ import type { SideNavState } from './types';
  * Context for the visibility of the side nav.
  * State is initialised as null. This is used when the value has not been set yet - which is important to know for SSR.
  */
-export declare const SideNavVisibilityState: import("react").Context<SideNavState | null>;
+export declare const SideNavVisibilityState: import('react').Context<SideNavState | null>;
 /**
  * Sets the visibility of the side nav.
  */
-export declare const SetSideNavVisibilityState: import("react").Context<Dispatch<SetStateAction<SideNavState | null>>>;
+export declare const SetSideNavVisibilityState: import('react').Context<Dispatch<SetStateAction<SideNavState | null>>>;

package/dist/types/ui/top-nav-items/themed/has-custom-theme-context.d.ts

@@ -1,7 +1,7 @@
 /**
  * Context to let components know if a custom theme is being applied.
  */
-export declare const HasCustomThemeContext: import("react").Context<boolean>;
+export declare const HasCustomThemeContext: import('react').Context<boolean>;
 /**
  * Returns whether a custom theme is being applied.
  */

package/dist/types-ts4.5/components/skip-links/skip-link.d.ts

@@ -12,5 +12,5 @@ import type { SkipLinkData } from '../../context/skip-links/types';
 export declare const SkipLink: ({ id, children, onBeforeNavigate, }: {
     id: string;
     children: ReactNode;
-    onBeforeNavigate?: SkipLinkData["onBeforeNavigate"];
+    onBeforeNavigate?: SkipLinkData['onBeforeNavigate'];
 }) => JSX.Element;

package/dist/types-ts4.5/context/skip-links/skip-links-context.d.ts

@@ -6,7 +6,7 @@ export type SkipLinksContextData = {
 /**
  * Provides a way to register and unregister skip links
  */
-export declare const SkipLinksContext: import("react").Context<SkipLinksContextData>;
+export declare const SkipLinksContext: import('react').Context<SkipLinksContextData>;
 /**
  * Internal-only hook for registering skip links.
  *

package/dist/types-ts4.5/context/top-nav-start/top-nav-start-context.d.ts

@@ -3,7 +3,7 @@
  * Used to power the side nav flyout by allowing the side nav to bind event listeners to the element, so we can
  * keep the flyout open while the user mouses from the top bar to the side nav.
  */
-export declare const TopNavStartElement: import("react").Context<HTMLDivElement | null>;
+export declare const TopNavStartElement: import('react').Context<HTMLDivElement | null>;
 /**
  * Context for the callback ref used to respond to the TopNavStart element ref being attached. It is used to update the
  * `TopNavStartElement` state so consumers can react to the ref being attached.
@@ -13,4 +13,4 @@ export declare const TopNavStartElement: import("react").Context<HTMLDivElement
  * A callback ref is needed because the side nav can be mounted before elements in the top bar (e.g. if the element is lazy loaded),
  * which happens in Jira and Confluence), which would prevent the event listeners from being set up.
  */
-export declare const TopNavStartAttachRef: import("react").Context<(newVal: HTMLDivElement | null) => void>;
+export declare const TopNavStartAttachRef: import('react').Context<(newVal: HTMLDivElement | null) => void>;

package/dist/types-ts4.5/entry-points/side-nav-items/flyout-menu-item.d.ts

@@ -1 +1 @@
-export { FlyoutMenuItem, type FlyoutMenuItemProps, FlyoutBody, type FlyoutBodyProps, FlyoutMenuItemContent, type FlyoutMenuItemContentProps, FlyoutFooter, type FlyoutFooterProps, FlyoutHeader, type FlyoutHeaderProps, FlyoutMenuItemTrigger, type FlyoutMenuItemTriggerProps, COLLAPSE_ELEM_BEFORE } from '@atlaskit/side-nav-items/flyout-menu-item';
+export { FlyoutMenuItem, type FlyoutMenuItemProps, FlyoutBody, type FlyoutBodyProps, FlyoutMenuItemContent, type FlyoutMenuItemContentProps, FlyoutFooter, type FlyoutFooterProps, FlyoutHeader, type FlyoutHeaderProps, FlyoutMenuItemTrigger, type FlyoutMenuItemTriggerProps, COLLAPSE_ELEM_BEFORE, } from '@atlaskit/side-nav-items/flyout-menu-item';

package/dist/types-ts4.5/ui/fhs-rollout/is-custom-is-fhs-enabled-context.d.ts

@@ -4,4 +4,4 @@
  * Tracks if a custom value has been provided for `IsFhsEnabledContext`.
  * Used to prevent nesting of the `IsFhsEnabledProvider`.
  */
-export declare const IsCustomIsFhsEnabledContext: import("react").Context<boolean>;
+export declare const IsCustomIsFhsEnabledContext: import('react').Context<boolean>;

package/dist/types-ts4.5/ui/fhs-rollout/is-fhs-enabled-context.d.ts

@@ -5,4 +5,4 @@ import type { Get } from './types';
  * Tracks is FHS enabled.
  * Defaults to feature gate 'navx-full-height-sidebar'.
  */
-export declare const IsFhsEnabledContext: import("react").Context<boolean | Get<boolean>>;
+export declare const IsFhsEnabledContext: import('react').Context<boolean | Get<boolean>>;

package/dist/types-ts4.5/ui/page-layout/hoist-slot-sizes-context.d.ts

@@ -2,4 +2,4 @@
  * Context for whether the slot sizes are to be hoisted to the document root.
  * It is set by consumers using a prop on the page layout `Root` element.
  */
-export declare const DangerouslyHoistSlotSizes: import("react").Context<boolean>;
+export declare const DangerouslyHoistSlotSizes: import('react').Context<boolean>;

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

@@ -63,7 +63,7 @@ export type PanelSplitterContextType = {
 /**
  * Context for the panel splitter. Only internally exported.
  */
-export declare const PanelSplitterContext: import("react").Context<PanelSplitterContextType | null>;
+export declare const PanelSplitterContext: import('react').Context<PanelSplitterContextType | null>;
 /**
  * Context for the panel splitter's double click handler. Only internally exported.
  *
@@ -71,4 +71,4 @@ export declare const PanelSplitterContext: import("react").Context<PanelSplitter
  * to collapse the side nav on double click, without exposing the `onDoubleClick` prop on `PanelSplitter`.
  * Once `PanelSplitter` supports an `onDoubleClick` prop directly, this context should be removed.
  */
-export declare const OnDoubleClickContext: import("react").Context<(() => void) | undefined>;
+export declare const OnDoubleClickContext: import('react').Context<(() => void) | undefined>;

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

@@ -1,7 +1,7 @@
 import type { DragLocationHistory } from '@atlaskit/pragmatic-drag-and-drop/types';
 /**
- * ⚠️ 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.
+ * ⚠️ Note: We are using the initial client location captured from the mousedown event, not from the dragstart event.
+ * 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;

package/dist/types-ts4.5/ui/page-layout/side-nav/toggle-button-context.d.ts

@@ -2,7 +2,7 @@
  * Context for the side nav toggle button element.
  * Used to power the side nav flyout by allowing the side nav to bind event listeners to the button element.
  */
-export declare const SideNavToggleButtonElement: import("react").Context<HTMLButtonElement | null>;
+export declare const SideNavToggleButtonElement: import('react').Context<HTMLButtonElement | null>;
 /**
  * Context for the callback ref used to respond to toggle button ref being attached. It is used to update the
  * `SideNavToggleButtonRef` state so consumers can react to the ref being attached.
@@ -13,4 +13,4 @@ export declare const SideNavToggleButtonElement: import("react").Context<HTMLBut
  * A callback ref is needed because the side nav can be mounted before the elements in the top bar (e.g. if the element
  *  is lazy loaded, which happens in Jira and Confluence), which would prevent the event listeners from being set up.
  */
-export declare const SideNavToggleButtonAttachRef: import("react").Context<(newVal: HTMLButtonElement | null) => void>;
+export declare const SideNavToggleButtonAttachRef: import('react').Context<(newVal: HTMLButtonElement | null) => void>;

package/dist/types-ts4.5/ui/page-layout/side-nav/visibility-context.d.ts

@@ -4,8 +4,8 @@ import type { SideNavState } from './types';
  * Context for the visibility of the side nav.
  * State is initialised as null. This is used when the value has not been set yet - which is important to know for SSR.
  */
-export declare const SideNavVisibilityState: import("react").Context<SideNavState | null>;
+export declare const SideNavVisibilityState: import('react').Context<SideNavState | null>;
 /**
  * Sets the visibility of the side nav.
  */
-export declare const SetSideNavVisibilityState: import("react").Context<Dispatch<SetStateAction<SideNavState | null>>>;
+export declare const SetSideNavVisibilityState: import('react').Context<Dispatch<SetStateAction<SideNavState | null>>>;

package/dist/types-ts4.5/ui/top-nav-items/themed/has-custom-theme-context.d.ts

@@ -1,7 +1,7 @@
 /**
  * Context to let components know if a custom theme is being applied.
  */
-export declare const HasCustomThemeContext: import("react").Context<boolean>;
+export declare const HasCustomThemeContext: import('react').Context<boolean>;
 /**
  * Returns whether a custom theme is being applied.
  */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "5.38.0",
+	"version": "5.39.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -67,7 +67,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.1.0",
-		"@atlaskit/avatar": "^25.7.0",
+		"@atlaskit/avatar": "^25.8.0",
 		"@atlaskit/button": "^23.9.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/ds-lib": "^5.3.0",
@@ -106,7 +106,7 @@
 		"@atlaskit/link": "^3.3.0",
 		"@atlaskit/lozenge": "^13.4.0",
 		"@atlaskit/menu": "^8.4.0",
-		"@atlaskit/modal-dialog": "^14.10.0",
+		"@atlaskit/modal-dialog": "^14.11.0",
 		"@atlaskit/onboarding": "^14.5.0",
 		"@atlaskit/page-header": "^12.1.0",
 		"@atlaskit/page-layout": "^4.2.0",
@@ -116,8 +116,8 @@
 		"@atlaskit/skeleton": "^2.1.0",
 		"@atlaskit/textfield": "^8.2.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",
-		"@atlassian/gemini": "^1.33.0",
-		"@atlassian/search-dialog": "^9.14.0",
+		"@atlassian/gemini": "^1.34.0",
+		"@atlassian/search-dialog": "^9.15.0",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/test-utils": "^1.0.0",
 		"@atlassian/testing-library": "^0.4.0",
@@ -189,9 +189,6 @@
 		},
 		"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"