@atlaskit/navigation-system 5.18.1 → 5.20.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlassian/navigation-system
 
+## 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
+
+- [`819adcd884291`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/819adcd884291) -
+  Tidy `platform_dst_nav4_side_nav_toggle_ref_fix` feature gate. This addresses a potential issue
+  with refs becoming stale.
+
 ## 5.18.1
 
 ### Patch Changes

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,6 +13,8 @@ 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");
@@ -20,12 +22,14 @@ var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
 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 +37,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 +53,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 +102,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)();
@@ -131,8 +154,8 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref2) {
       element: splitter
     }), (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 +182,8 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref2) {
           direction: getTextDirection(panel)
         });
       },
-      onDragStart: function onDragStart(_ref4) {
-        var source = _ref4.source;
+      onDragStart: function onDragStart(_ref5) {
+        var source = _ref5.source;
         (0, _tinyInvariant.default)(isPanelSplitterDragData(source.data));
         onResizeStart === null || onResizeStart === void 0 || onResizeStart({
           initialWidth: source.data.initialWidth
@@ -169,9 +192,9 @@ 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 location = _ref6.location,
+          source = _ref6.source;
         (0, _tinyInvariant.default)(isPanelSplitterDragData(source.data));
         var _source$data = source.data,
           initialWidth = _source$data.initialWidth,
@@ -192,8 +215,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 +369,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/cjs/ui/page-layout/side-nav/toggle-button.js

@@ -66,11 +66,9 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
     isSideNavExpanded = _useState2[0],
     setIsSideNavExpanded = _useState2[1];
   var ref = (0, _react.useContext)(_toggleButtonContext.SideNavToggleButtonAttachRef);
-  var elementRef = (0, _react.useRef)(null);
 
   /**
-   * Attempts to address HOT-121458 by ensuring that the toggle button element
-   * in context is always up to date.
+   * Addresses HOT-121458 by ensuring that the toggle button element in context is always up to date.
    *
    * My theory is that something to do with SSR, hydration and suspense was causing the
    * underlying HTML element to change but without causing the toggle button to remount.
@@ -82,15 +80,8 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
     element = _useState4[0],
     setElement = _useState4[1];
   (0, _react.useEffect)(function () {
-    if ((0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_toggle_ref_fix')) {
-      ref(element);
-    }
+    ref(element);
   }, [element, ref]);
-  (0, _react.useEffect)(function () {
-    if (!(0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_toggle_ref_fix')) {
-      ref(elementRef.current);
-    }
-  }, [elementRef, ref]);
   (0, _react.useEffect)(function () {
     var _window$matchMedia = window.matchMedia('(min-width: 64rem)'),
       matches = _window$matchMedia.matches;
@@ -181,7 +172,7 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
     testId: testId,
     isTooltipDisabled: false,
     interactionName: interactionName,
-    ref: (0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_toggle_ref_fix') ? setElement : elementRef,
+    ref: setElement,
     tooltip: tooltipProps
   });
 };

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,23 @@
 /* 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 { 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 +37,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 +47,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 +75,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;

package/dist/es2019/ui/page-layout/side-nav/toggle-button.js

@@ -1,7 +1,7 @@
 /* toggle-button.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./toggle-button.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import SidebarCollapseIcon from '@atlaskit/icon/core/sidebar-collapse';
@@ -51,11 +51,9 @@ export const SideNavToggleButton = ({
   // initialized in SSR
   const [isSideNavExpanded, setIsSideNavExpanded] = useState(sideNavState === null || !fg('platform_dst_nav4_side_nav_default_collapsed_api') ? !defaultCollapsed : isSideNavExpandedOnDesktop);
   const ref = useContext(SideNavToggleButtonAttachRef);
-  const elementRef = useRef(null);
 
   /**
-   * Attempts to address HOT-121458 by ensuring that the toggle button element
-   * in context is always up to date.
+   * Addresses HOT-121458 by ensuring that the toggle button element in context is always up to date.
    *
    * My theory is that something to do with SSR, hydration and suspense was causing the
    * underlying HTML element to change but without causing the toggle button to remount.
@@ -64,15 +62,8 @@ export const SideNavToggleButton = ({
    */
   const [element, setElement] = useState(null);
   useEffect(() => {
-    if (fg('platform_dst_nav4_side_nav_toggle_ref_fix')) {
-      ref(element);
-    }
+    ref(element);
   }, [element, ref]);
-  useEffect(() => {
-    if (!fg('platform_dst_nav4_side_nav_toggle_ref_fix')) {
-      ref(elementRef.current);
-    }
-  }, [elementRef, ref]);
   useEffect(() => {
     const {
       matches
@@ -164,7 +155,7 @@ export const SideNavToggleButton = ({
     testId: testId,
     isTooltipDisabled: false,
     interactionName: interactionName,
-    ref: fg('platform_dst_nav4_side_nav_toggle_ref_fix') ? setElement : elementRef,
+    ref: setElement,
     tooltip: tooltipProps
   });
 };

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,29 @@
 /* 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 { 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 +43,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 +92,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();
@@ -121,8 +144,8 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref2) {
       element: splitter
     }), 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 +172,8 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref2) {
           direction: getTextDirection(panel)
         });
       },
-      onDragStart: function onDragStart(_ref4) {
-        var source = _ref4.source;
+      onDragStart: function onDragStart(_ref5) {
+        var source = _ref5.source;
         invariant(isPanelSplitterDragData(source.data));
         onResizeStart === null || onResizeStart === void 0 || onResizeStart({
           initialWidth: source.data.initialWidth
@@ -159,9 +182,9 @@ 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 location = _ref6.location,
+          source = _ref6.source;
         invariant(isPanelSplitterDragData(source.data));
         var _source$data = source.data,
           initialWidth = _source$data.initialWidth,
@@ -182,8 +205,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 +359,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/esm/ui/page-layout/side-nav/toggle-button.js

@@ -5,7 +5,7 @@ import "./toggle-button.compiled.css";
 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 React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import SidebarCollapseIcon from '@atlaskit/icon/core/sidebar-collapse';
@@ -57,11 +57,9 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
     isSideNavExpanded = _useState2[0],
     setIsSideNavExpanded = _useState2[1];
   var ref = useContext(SideNavToggleButtonAttachRef);
-  var elementRef = useRef(null);
 
   /**
-   * Attempts to address HOT-121458 by ensuring that the toggle button element
-   * in context is always up to date.
+   * Addresses HOT-121458 by ensuring that the toggle button element in context is always up to date.
    *
    * My theory is that something to do with SSR, hydration and suspense was causing the
    * underlying HTML element to change but without causing the toggle button to remount.
@@ -73,15 +71,8 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
     element = _useState4[0],
     setElement = _useState4[1];
   useEffect(function () {
-    if (fg('platform_dst_nav4_side_nav_toggle_ref_fix')) {
-      ref(element);
-    }
+    ref(element);
   }, [element, ref]);
-  useEffect(function () {
-    if (!fg('platform_dst_nav4_side_nav_toggle_ref_fix')) {
-      ref(elementRef.current);
-    }
-  }, [elementRef, ref]);
   useEffect(function () {
     var _window$matchMedia = window.matchMedia('(min-width: 64rem)'),
       matches = _window$matchMedia.matches;
@@ -172,7 +163,7 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
     testId: testId,
     isTooltipDisabled: false,
     interactionName: interactionName,
-    ref: fg('platform_dst_nav4_side_nav_toggle_ref_fix') ? setElement : elementRef,
+    ref: setElement,
     tooltip: tooltipProps
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "5.18.1",
+	"version": "5.20.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -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",
@@ -116,7 +116,7 @@
 		"@atlaskit/skeleton": "^2.1.0",
 		"@atlaskit/textfield": "^8.2.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",
-		"@atlassian/gemini": "^1.27.0",
+		"@atlassian/gemini": "^1.28.0",
 		"@atlassian/search-dialog": "^9.10.0",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/test-utils": "^1.0.0",
@@ -157,9 +157,6 @@
 		"platform_dst_nav4_side_nav_default_collapsed_api": {
 			"type": "boolean"
 		},
-		"platform_dst_nav4_side_nav_toggle_ref_fix": {
-			"type": "boolean"
-		},
 		"platform-component-visual-refresh": {
 			"type": "boolean",
 			"referenceOnly": true