@atlaskit/navigation-system 5.14.0 → 5.16.0

package/dist/esm/ui/page-layout/side-nav/side-nav-content.js

@@ -3,7 +3,10 @@ import "./side-nav-content.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useMemo, useRef } from 'react';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
+import { sideNavContentScrollTimelineVar } from '../constants';
+import { useSideNavVisibility } from './use-side-nav-visibility';
 
 /**
  * The main content of the side nav, filling up the middle section. It acts as a scroll container.
@@ -31,7 +34,8 @@ var styles = {
 var scrolledBorder = null;
 var scrollTimelineVar = '--sNcst';
 var fullHeightSidebarStyles = {
-  scrollContainer: "_1un9baqb _21o1gc9s _j7hq4n8p"
+  scrollContainer: "_1un9baqb _21o1gc9s _j7hq4n8p",
+  scrollContainerWithLayeringFixes: "_1sfqgc9s _1q1x1ule _8pm2gc9s _1gd94n8p"
 };
 function _SideNavContent(_ref, forwardedRef) {
   var children = _ref.children,
@@ -41,10 +45,12 @@ function _SideNavContent(_ref, forwardedRef) {
   var mergedRef = useMemo(function () {
     return mergeRefs([internalRef, forwardedRef]);
   }, [forwardedRef]);
+  var _useSideNavVisibility = useSideNavVisibility(),
+    isExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop;
   return /*#__PURE__*/React.createElement("div", {
     ref: isFhsEnabled ? mergedRef : forwardedRef,
     "data-testid": testId,
-    className: ax([styles.scrollContainer, isFhsEnabled && fullHeightSidebarStyles.scrollContainer])
+    className: ax([styles.scrollContainer, isFhsEnabled && !fg('platform-dst-side-nav-layering-fixes') && fullHeightSidebarStyles.scrollContainer, isFhsEnabled && isExpandedOnDesktop && fg('platform-dst-side-nav-layering-fixes') && fullHeightSidebarStyles.scrollContainerWithLayeringFixes])
   }, /*#__PURE__*/React.createElement("div", {
     className: ax([styles.paddingContainer])
   }, children));

package/dist/esm/ui/page-layout/side-nav/side-nav-header.js

@@ -2,6 +2,7 @@
 import "./side-nav-header.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import { fg } from '@atlaskit/platform-feature-flags';
 var styles = {
   root: "_18zrutpp _1q51utpp _85i51b66"
 };
@@ -12,6 +13,22 @@ var styles = {
 export var SideNavHeader = function SideNavHeader(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/React.createElement("div", {
+    /**
+     * This attribute is used to identify whether the SideNavHeader is mounted, to determine where the
+     * SideNavContent's scroll indicator line should be applied. This is for layering reasons -
+     * if the scroll indicator line intersects with the top nav, it could incorrectly be hidden beneath
+     * the top nav (depending on if a layer is open, which raises the top nav'z z-index).
+     *
+     * We are using a data attribute and CSS for this logic to ensure it is SSR safe.
+     *
+     * - If SideNavHeader exists, the scroll indicator line is applied to the SideNavContent. This is safe
+     * because the SideNavHeader is between the SideNavContent and TopNavStart, so the scroll indicator line
+     * will not intersect with the top nav.
+     *
+     * - If SideNavHeader does not exist, the scroll indicator line is applied to TopNavStart. This ensures
+     * the scroll indicator line is visible even when the top nav has a z-index higher than the side nav.
+     */
+    "data-private-side-nav-header": fg('platform-dst-side-nav-layering-fixes') ? 'true' : undefined,
     className: ax([styles.root])
   }, children);
 };

package/dist/esm/ui/page-layout/side-nav/side-nav.compiled.css

@@ -14,6 +14,9 @@
 ._4t3ieqxy{height:calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
 ._kqsw1if8{position:sticky}
+._kqswstnw{position:absolute}
+._rjxpidpf{inset-inline-end:0}
+._u7coidpf{inset-block-end:0}
 ._vchhusvi{box-sizing:border-box}
 [dir=rtl] ._65m41mrw{--animation-direction:-1}
 @media (prefers-reduced-motion:no-preference){._10t88iot{transition-property:transform,display}._1vrh1a5r{transition-behavior:allow-discrete}._xrrpfnf5{transition-duration:.2s}._1lh81gzg{grid-area:main}._1xq51mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}@starting-style{._1nu51p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1xq51ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}}

package/dist/esm/ui/page-layout/side-nav/side-nav.js

@@ -3,11 +3,10 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./side-nav.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, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import { flushSync } from 'react-dom';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
@@ -20,7 +19,7 @@ import { media } from '@atlaskit/primitives/responsive';
 import { useSkipLinkInternal } from '../../../context/skip-links/skip-links-context';
 import { TopNavStartElement } from '../../../context/top-nav-start/top-nav-start-context';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
-import { bannerMountedVar, contentHeightWhenFixed, contentInsetBlockStart, localSlotLayers, sideNavLiveWidthVar, sideNavPanelSplitterId, sideNavVar, topNavMountedVar, UNSAFE_sideNavLayoutVar } from '../constants';
+import { bannerMountedVar, contentHeightWhenFixed, contentInsetBlockStart, localSlotLayers, openLayerObserverSideNavNamespace, sideNavLiveWidthVar, sideNavPanelSplitterId, sideNavVar, topNavMountedVar, UNSAFE_sideNavLayoutVar } from '../constants';
 import { DangerouslyHoistSlotSizes } from '../hoist-slot-sizes-context';
 import { DangerouslyHoistCssVarToDocumentRoot } from '../hoist-utils';
 import { useLayoutId } from '../id-utils';
@@ -53,7 +52,9 @@ function getResizeBounds() {
  * Avoiding nesting the `@supports` at-rule inside of `@media` means Compiled can remove duplicate styles from the generated CSS.
  */
 var isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
-var openLayerObserverSideNavNamespace = 'side-nav';
+var panelSplitterPortalTargetStyles = {
+  root: "_kqswstnw _rjxpidpf _u7coidpf _4t3i1osq _165t56xv"
+};
 var styles = {
   root: "_nd5l1b6c _191wglyw _t51zglyw _bfhk1bhr _16qs130s _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _p5clia51 _4ap3vuon _scbpglyw",
   flyoutOpen: "_qiln1gzg _p5clglyw _4ap31bhr _scbp130s _139f8iot _1tpvfnf5 _sylc1a5r _oyeijq3t",
@@ -177,6 +178,7 @@ function SideNavInternal(_ref) {
   var clampedWidth = "clamp(".concat(widthResizeBounds.min, ", ").concat(width, "px, ").concat(widthResizeBounds.max, ")");
   var dangerouslyHoistSlotSizes = useContext(DangerouslyHoistSlotSizes);
   var navRef = useRef(null);
+  var panelSplitterPortalTargetRef = useRef(null);
   /**
    * Used to share the side nav element with the `Panel`,
    * which observes the side nav to determine its maximum width.
@@ -758,7 +760,7 @@ function SideNavInternal(_ref) {
     style: _defineProperty({}, sideNavVar, clampedWidth),
     ref: mergedRef,
     "data-testid": testId,
-    className: ax([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, isFhsEnabled && styles.animationRTLSupport, shouldShowSidebarToggleAnimation && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFhsEnabled && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFhsEnabled && styles.flyoutAnimateClosed, ((sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close') && !isFirefox && isFhsEnabled && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && styles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && isFhsEnabled && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && styles.flyoutAnimateClosedFullHeightSidebar, isFlyoutClosed && isFhsEnabled && styles.fullHeightSidebar])
+    className: ax([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, isFhsEnabled && styles.animationRTLSupport, shouldShowSidebarToggleAnimation && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFhsEnabled && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFhsEnabled && styles.flyoutAnimateClosed, ((sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close') && !isFirefox && isFhsEnabled && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && styles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && isFhsEnabled && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && styles.flyoutAnimateClosedFullHeightSidebar, isFlyoutClosed && isFhsEnabled && !fg('platform-dst-side-nav-layering-fixes') && styles.fullHeightSidebar])
   }), /*#__PURE__*/React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
     variableName: sideNavLiveWidthVar,
     value: "0px",
@@ -777,15 +779,24 @@ function SideNavInternal(_ref) {
   , /*#__PURE__*/React.createElement(PanelSplitterProvider, {
     panelId: sideNavPanelSplitterId,
     panelRef: navRef,
+    portalRef: isFhsEnabled && fg('platform-dst-side-nav-layering-fixes') ? panelSplitterPortalTargetRef : undefined,
     panelWidth: width,
     onCompleteResize: setWidth,
     getResizeBounds: getResizeBounds,
-    resizingCssVar: panelSplitterResizingVar,
-    isEnabled: isExpandedOnDesktop && !isFlyoutVisible,
+    resizingCssVar: panelSplitterResizingVar
+    // Not resizable when in peek (flyout) mode.
+    ,
+    isEnabled: fg('platform-dst-side-nav-layering-fixes') ? !isFlyoutVisible :
+    // Old behaviour has a bug: the panel splitter would only be visible on sm screens (between 48rem and 64rem)
+    // if the side nav was expanded on desktop.
+    isExpandedOnDesktop && !isFlyoutVisible,
     shortcut: isShortcutEnabled ? sideNavToggleTooltipKeyboardShortcut : undefined
   }, /*#__PURE__*/React.createElement("div", {
     className: ax([styles.flexContainer])
-  }, children)));
+  }, children)), isFhsEnabled && fg('platform-dst-side-nav-layering-fixes') && /*#__PURE__*/React.createElement("div", {
+    ref: panelSplitterPortalTargetRef,
+    className: ax([panelSplitterPortalTargetStyles.root])
+  }));
 }
 
 /**

package/dist/esm/ui/page-layout/top-nav/top-nav-end.js

@@ -17,7 +17,8 @@ import { IconButton } from '../../top-nav-items/themed/migration';
 var containerStyles = {
   root: "_yyhy11wp _1e0c1txw _1bahh9n0 _1ul9zwfg _1d2y1ris _glte1ris _15ri1mjv _1gs5usvi _ndwch9n0",
   jiraProductLogoUpdate: "_15rip2n4",
-  fullHeightSidebar: "_lcxv1wug _y4tiutpp"
+  fullHeightSidebar: "_y4tiutpp _lcxv1wug",
+  fullHeightSidebarWithLayeringFixes: "_y4tiutpp"
 };
 var listStyles = {
   root: "_zulp1b66 _4cvr1h6o _1e0c1txw",
@@ -64,7 +65,7 @@ export function TopNavEnd(_ref) {
   }, [query]);
   return /*#__PURE__*/React.createElement("nav", {
     "aria-label": label,
-    className: ax([containerStyles.root, isFhsEnabled && containerStyles.fullHeightSidebar, fg('team25-eu-jira-logo-updates-csm-jsm') && containerStyles.jiraProductLogoUpdate])
+    className: ax([containerStyles.root, isFhsEnabled && !fg('platform-dst-side-nav-layering-fixes') && containerStyles.fullHeightSidebar, isFhsEnabled && fg('platform-dst-side-nav-layering-fixes') && containerStyles.fullHeightSidebarWithLayeringFixes, fg('team25-eu-jira-logo-updates-csm-jsm') && containerStyles.jiraProductLogoUpdate])
   }, isMobile ? /*#__PURE__*/React.createElement(Popup, {
     isOpen: isOpen,
     onClose: function onClose() {

package/dist/esm/ui/page-layout/top-nav/top-nav-middle.js

@@ -2,6 +2,7 @@
 import "./top-nav-middle.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 var styles = {
   root: "_zulpu2gc _yyhycs5v _1bsb1osq _4cvr1h6o _1e0c1txw _1bahh9n0 _181n11p5 _1j8b15b0 _lagd1bp4 _1t4c1ris _12e8h9n0",
@@ -20,6 +21,6 @@ export function TopNavMiddle(_ref) {
   var children = _ref.children;
   var isFhsEnabled = useIsFhsEnabled();
   return /*#__PURE__*/React.createElement("div", {
-    className: ax([styles.root, isFhsEnabled && styles.fullHeightSidebar])
+    className: ax([styles.root, isFhsEnabled && !fg('platform-dst-side-nav-layering-fixes') && styles.fullHeightSidebar])
   }, children);
 }

package/dist/esm/ui/page-layout/top-nav/top-nav-start.compiled.css

@@ -13,4 +13,5 @@
 ._vchhusvi{box-sizing:border-box}
 [dir=rtl] ._65m41mrw{--animation-direction:-1}
 @media (prefers-reduced-motion:no-preference){._10t81e03{transition-property:transform}._10t81rjc{transition-property:transform,opacity}._1xq51ytf{transition-timing-function:ease-in-out}._1xq55ucs{transition-timing-function:ease}._mjvc1efy{transform:translateX(calc(100%*var(--animation-direction)))}._bgpzidpf{opacity:0}._mjvc1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}._mjvco0k7{transform:translateX(calc((-2rem + var(--ds-space-050, 4px)*-1)*var(--animation-direction)))}._mjvcyrjp{transform:translateX(calc((2rem + var(--ds-space-050, 4px))*var(--animation-direction)))}._mjvcz12g{transform:translateX(0)}._xrrpfnf5{transition-duration:.2s}._bgpzkb7n{opacity:1}}
-@media (min-width:64rem){._15rin7od{min-width:unset}._glte1osq{width:100%}._15rip2n4{min-width:330px}._glte1ris{width:max-content}._15ri1mjv{min-width:300px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmpxbi{padding-inline-end:var(--ds-space-200,1pc)}}
+@media (min-width:64rem){._13wnh2mm{position:relative}._1l3vb3bt:after{content:""}._juxdstnw:after{position:absolute}._1vinidpf:after{inset-block-start:0}._1719idpf:after{inset-block-end:0}._e6znidpf:after{inset-inline-end:0}._1kyhe4h9:after{border-inline-end-width:var(--ds-border-width,1px)}._4cwynqa1:after{border-inline-end-style:solid}._435s1l7x:after{border-inline-end-color:var(--ds-border,#0b120e24)}._m7c3idpf:after{opacity:0}._15rin7od{min-width:unset}._glte1osq{width:100%}._15rip2n4{min-width:330px}@supports (scroll-timeline-axis:block){html:not(:has([data-private-side-nav-header])) ._1kilgc9s{animation-timeline:--sNcst}html:not(:has([data-private-side-nav-header])) ._1m3l1ybg{animation-name:khj1qz3}html:not(:has([data-private-side-nav-header])) ._12g81hrf{animation-fill-mode:both}}._4ap3vuon{background-color:var(--ds-surface,#fff)}._m7c3kb7n:after{opacity:1}._glte1ris{width:max-content}._15ri1mjv{min-width:300px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmpxbi{padding-inline-end:var(--ds-space-200,1pc)}@supports (scroll-timeline-axis:block){@keyframes khj1qz3{0%{box-shadow:inset 0 -1px 0 0 transparent}0.1%{box-shadow:inset 0 -1px 0 0 var(--ds-border,#0b120e24)}to{box-shadow:inset 0 -1px 0 0 var(--ds-border,#0b120e24)}}}}
+@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._n8qabrmi:after{transition-property:opacity}._wc72fnf5:after{transition-duration:.2s}._j3mr1v42:after{transition-timing-function:ease-in}}

package/dist/esm/ui/page-layout/top-nav/top-nav-start.js

@@ -8,6 +8,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { UNSAFE_useMediaQuery } from '@atlaskit/primitives/compiled';
 import { TopNavStartAttachRef } from '../../../context/top-nav-start/top-nav-start-context';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
+import { sideNavContentScrollTimelineVar } from '../constants';
 import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
 import { SideNavVisibilityState } from '../side-nav/visibility-context';
 
@@ -36,6 +37,12 @@ var innerStyles = {
   fullHeightSidebarExpanded: "_15rin7od _glte1osq"
 };
 
+/**
+ * The scroll indicator is usually applied in SideNavContent, but if there is no SideNavHeader it is
+ * applied in TopNavStart instead for layering reasons. See the comment in SideNavHeader for more details.
+ */
+var scrolledShadow = null;
+
 /**
  * Styles for the outer element, that does not have re-enabled pointer events and spans the entire
  * width of the TopNavStart area.
@@ -44,7 +51,10 @@ var innerStyles = {
  */
 var wrapperStyles = {
   root: "_vchhusvi _bozgutpp _4t3i1osq",
-  fullHeightSidebarExpanded: "_glte93mn _exxmpxbi"
+  fullHeightSidebarExpanded: "_glte93mn _exxmpxbi",
+  fullHeightSidebarWithLayeringFixes: "_13wnh2mm _1l3vb3bt _juxdstnw _1vinidpf _1719idpf _e6znidpf _1kyhe4h9 _4cwynqa1 _435s1l7x _m7c3idpf",
+  fullHeightSidebarExpandedWithLayeringFixes: "_4ap3vuon _1kilgc9s _1m3l1ybg _12g81hrf _m7c3kb7n",
+  fullHeightSidebarBorderTransition: "_n8qabrmi _wc72fnf5 _j3mr1v42"
 };
 
 /**
@@ -112,12 +122,29 @@ var TopNavStartInnerFHS = /*#__PURE__*/forwardRef(function TopNavStartInnerFHS(_
       defaultCollapsed: true
     }),
     isExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop;
+  var sideNavState = useContext(SideNavVisibilityState);
+  var isFirstRenderRef = useRef(true);
+  useEffect(function () {
+    if (!fg('platform-dst-side-nav-layering-fixes')) {
+      return;
+    }
+
+    // Ignore renders until the side nav state is initialized
+    // So that apps using the legacy API for setting side nav default state do not see
+    // animations when they shouldn't
+    if (sideNavState === null) {
+      return;
+    }
+    if (isFirstRenderRef.current) {
+      isFirstRenderRef.current = false;
+    }
+  }, [sideNavState]);
   return /*#__PURE__*/React.createElement("div", {
-    className: ax([wrapperStyles.root, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded])
+    className: ax([wrapperStyles.root, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded, fg('platform-dst-side-nav-layering-fixes') && wrapperStyles.fullHeightSidebarWithLayeringFixes, !isFirstRenderRef.current && isExpandedOnDesktop && fg('platform-dst-side-nav-layering-fixes') && wrapperStyles.fullHeightSidebarBorderTransition, isExpandedOnDesktop && fg('platform-dst-side-nav-layering-fixes') && wrapperStyles.fullHeightSidebarExpandedWithLayeringFixes])
   }, /*#__PURE__*/React.createElement("div", {
     ref: ref,
     "data-testid": testId,
-    className: ax([innerStyles.root, innerStyles.fullHeightSidebar, fg('team25-eu-jira-logo-updates-csm-jsm') && innerStyles.jiraProductLogoUpdate, isExpandedOnDesktop && innerStyles.fullHeightSidebarExpanded])
+    className: ax([innerStyles.root, !fg('platform-dst-side-nav-layering-fixes') && innerStyles.fullHeightSidebar, fg('team25-eu-jira-logo-updates-csm-jsm') && innerStyles.jiraProductLogoUpdate, isExpandedOnDesktop && innerStyles.fullHeightSidebarExpanded])
   }, children));
 });
 

package/dist/esm/ui/page-layout/top-nav/top-nav.compiled.css

@@ -5,17 +5,28 @@
 ._18zrze3t{padding-inline:var(--ds-space-0,0)}
 ._179rglyw{border-block-end:none}
 ._179ria51{border-block-end:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._152t1nws{inset-block-start:var(--n_bnrM,0)}
+._18postnw:after{position:absolute}
+._1beue4h9:after{border-block-end-width:var(--ds-border-width,1px)}
 ._1bsb1osq{width:100%}
+._1cte1l7x:after{border-block-end-color:var(--ds-border,#0b120e24)}
+._1czdidpf:after{inset-inline-end:0}
 ._1e0c11p5{display:grid}
+._1gufidpf:after{inset-block-end:0}
+._1pby11wp{z-index:3}
+._1pbycs5v{z-index:2}
 ._1pbyegat{z-index:4}
 ._4cvr1h6o{align-items:center}
 ._4t3i1dgc{height:var(--n_tNvM)}
 ._4t3i1osq{height:100%}
+._aetrb3bt:after{content:""}
 ._bfhkglyw{background-color:none}
 ._bfhkvuon{background-color:var(--ds-surface,#fff)}
 ._d6vu1bgi >span[data-ep-placeholder-id=top_navigation_skeleton]{display:contents}
+._g0nf3tht:after{inset-inline-start:var(--n_sNvlw,0)}
 ._kqsw1if8{position:sticky}
+._lcxv1wug{pointer-events:auto}
 ._lcxvglyw{pointer-events:none}
+._uaeunqa1:after{border-block-end-style:solid}
 ._vchhusvi{box-sizing:border-box}
 ._yv0e1mfv{grid-template-columns:auto 1fr auto}
 @media (min-width:48rem){._1j8b18ax{grid-template-columns:1fr minmax(min-content,max-content) 1fr}}

package/dist/esm/ui/page-layout/top-nav/top-nav.js

@@ -1,15 +1,18 @@
 /* top-nav.tsx generated by @compiled/babel-plugin v0.38.1 */
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["backgroundColor"];
 import "./top-nav.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { useContext, useMemo } from 'react';
+import { useContext, useLayoutEffect, useMemo, useState } from 'react';
+import { OpenLayerObserverNamespaceProvider, useOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useSkipLink } from '../../../context/skip-links/skip-links-context';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { HasCustomThemeContext } from '../../top-nav-items/themed/has-custom-theme-context';
 import { useCustomTheme } from '../../top-nav-items/themed/use-custom-theme';
-import { bannerMountedVar, localSlotLayers, topNavMountedVar, UNSAFE_topNavVar } from '../constants';
+import { bannerMountedVar, localSlotLayers, openLayerObserverTopNavNamespace, sideNavLiveWidthVar, topNavMountedVar, UNSAFE_topNavVar } from '../constants';
 import { DangerouslyHoistSlotSizes } from '../hoist-slot-sizes-context';
 import { DangerouslyHoistCssVarToDocumentRoot, HoistCssVarToLocalGrid } from '../hoist-utils';
 import { useLayoutId } from '../id-utils';
@@ -25,7 +28,9 @@ import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
 var styles = {
   root: "_nd5l8cbt _zulpu2gc _18zrutpp _179ria51 _1e0c11p5 _yv0e1mfv _4cvr1h6o _bfhkvuon _vchhusvi _4t3i1dgc _152t1nws _kqsw1if8 _1pbyegat _d6vu1bgi _1j8b18ax",
   fullHeightSidebar: "_18zrze3t _179rglyw _bfhkglyw _lcxvglyw _pdlmutpp",
-  fullHeightSidebarExpanded: "_1rqt16a9 _jh1g18ax"
+  fullHeightSidebarExpanded: "_1rqt16a9 _jh1g18ax",
+  fullHeightSidebarWithLayeringFixes: "_1pbycs5v _lcxv1wug _bfhkvuon _aetrb3bt _18postnw _1gufidpf _1czdidpf _g0nf3tht _1beue4h9 _uaeunqa1 _1cte1l7x",
+  fullHeightSidebarWithLayeringFixesAndOpenLayer: "_1pby11wp"
 };
 
 /**
@@ -60,6 +65,8 @@ export function TopNav(_ref) {
   var customTheme = useCustomTheme(UNSAFE_theme);
 
   /**
+   * Note: this is no longer the case when fg('platform-dst-side-nav-layering-fixes') is enabled.
+   *
    * With the full height sidebar we have a foreground and background element,
    * so we need to apply the custom theme styles to the correct element.
    *
@@ -87,9 +94,37 @@ export function TopNav(_ref) {
     foregroundStyle = _useMemo.foregroundStyle;
   var _useSideNavVisibility = useSideNavVisibility(),
     isExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop;
+  var openLayerObserver = useOpenLayerObserver();
+  // Setting the initial state to false, as it is unlikely that the top nav would have an open popup when the app starts.
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    hasOpenPopup = _useState2[0],
+    setHasOpenPopup = _useState2[1];
+  useLayoutEffect(function () {
+    if (!openLayerObserver || !isFhsEnabled || !fg('platform-dst-side-nav-layering-fixes')) {
+      return;
+    }
+    function checkAndSetState() {
+      if (!openLayerObserver) {
+        return;
+      }
+      setHasOpenPopup(openLayerObserver.getCount({
+        namespace: openLayerObserverTopNavNamespace,
+        type: 'popup'
+      }) > 0);
+    }
+
+    // Initial check
+    checkAndSetState();
+
+    // Check again whenever number of layers in the top nav change
+    return openLayerObserver.onChange(checkAndSetState, {
+      namespace: openLayerObserverTopNavNamespace
+    });
+  }, [isFhsEnabled, openLayerObserver]);
   return /*#__PURE__*/React.createElement(HasCustomThemeContext.Provider, {
     value: customTheme.isEnabled
-  }, isFhsEnabled && /*#__PURE__*/React.createElement("div", {
+  }, isFhsEnabled && !fg('platform-dst-side-nav-layering-fixes') && /*#__PURE__*/React.createElement("div", {
     "data-layout-slot": true,
     "aria-hidden": true
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
@@ -99,11 +134,13 @@ export function TopNav(_ref) {
   }), /*#__PURE__*/React.createElement("header", {
     id: id,
     "data-layout-slot": true,
-    className: ax([styles.root, isFhsEnabled && styles.fullHeightSidebar, isExpandedOnDesktop && isFhsEnabled && styles.fullHeightSidebarExpanded, xcss]),
+    className: ax([styles.root, isFhsEnabled && styles.fullHeightSidebar, isFhsEnabled && fg('platform-dst-side-nav-layering-fixes') && styles.fullHeightSidebarWithLayeringFixes, hasOpenPopup && isFhsEnabled && fg('platform-dst-side-nav-layering-fixes') && styles.fullHeightSidebarWithLayeringFixesAndOpenLayer, isExpandedOnDesktop && isFhsEnabled && styles.fullHeightSidebarExpanded, xcss]),
     "data-testid": testId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
-    style: isFhsEnabled ? foregroundStyle : customTheme.isEnabled ? customTheme.style : undefined
+    style:
+    // When the layering fixes are enabled, we no longer have separate elements for the foreground and background.
+    isFhsEnabled && !fg('platform-dst-side-nav-layering-fixes') ? foregroundStyle : customTheme.isEnabled ? customTheme.style : undefined
   }, /*#__PURE__*/React.createElement(HoistCssVarToLocalGrid, {
     variableName: topNavMountedVar,
     value: height
@@ -117,5 +154,7 @@ export function TopNav(_ref) {
     value: height
   })
   // ------ END UNSAFE STYLES ------
-  , children));
+  , fg('platform-dst-side-nav-layering-fixes') ? /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
+    namespace: openLayerObserverTopNavNamespace
+  }, children) : children));
 }

package/dist/types/ui/menu-item/flyout-menu-item/flyout-menu-item-context.d.ts

@@ -21,6 +21,6 @@ export declare const OnCloseContext: import("react").Context<(() => void) | null
 /**
  * __On close provider__
  *
- * A context provider for supplying the testId to the FlyoutHeader.
+ * A context provider for supplying the onClose function to the FlyoutHeader.
  */
 export declare const OnCloseProvider: import("react").Provider<(() => void) | null | undefined>;

package/dist/types/ui/page-layout/constants.d.ts

@@ -35,6 +35,16 @@ export declare const UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY = "calc(var(--
 export declare const localSlotLayers: {
     topBar: number;
     banner: number;
+    topNavFHSWithOpenLayer: number;
+    bannerFHS: number;
+    topNavFHS: number;
     sideNav: number;
     panelSmallViewports: number;
 };
+export declare const openLayerObserverSideNavNamespace = "side-nav";
+export declare const openLayerObserverTopNavNamespace = "top-nav";
+/**
+ * CSS scroll timeline variable for the side nav content scroll indicator.
+ * The scroll timeline is created in SideNavContent, and then used by TopNavStart to apply the scroll indicator line.
+ */
+export declare const sideNavContentScrollTimelineVar = "--sNcst";

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

@@ -25,8 +25,13 @@ export type PanelSplitterContextType = {
     getResizeBounds: () => ResizeBounds;
     /**
      * A ref to the portal element where the panel splitter will be rendered.
-     * Internally set by the PanelSplitterProvider.
-     * Used to render the panel splitter outside of an overflow container.
+     * It can optionally be provided by consumers of <PanelSplitterProvider> (when the feature gate
+     * `platform-dst-side-nav-layering-fixes` is enabled).
+     * If not provided, it will be internally set by the PanelSplitterProvider.
+     *
+     * This prop is useful for:
+     * - Rendering the panel splitter outside of an overflow container.
+     * - Positioning the panel splitter outside the resizing panel.
      */
     portalRef: MutableRefObject<HTMLDivElement | null>;
     /**

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

@@ -1,12 +1,30 @@
-import React from 'react';
+import React, { type MutableRefObject } from 'react';
 import { type PanelSplitterContextType } from './context';
 export type PanelSplitterProviderProps = Omit<PanelSplitterContextType, 'portalRef' | 'position'> & {
     children: React.ReactNode;
+    /**
+     * The side of the panel/element that the splitter element is positioned on. Uses logical values to support right-to-left languages.
+     *
+     * Defaults to `start`.
+     *
+     * For left-to-right languages, `start` is the left side and `end` is the right side.
+     */
     position?: 'start' | 'end';
+    /**
+     * A ref to the portal element where the panel splitter will be rendered.
+     * It can optionally be provided by consumers of <PanelSplitterProvider> (when the feature gate
+     * `platform-dst-side-nav-layering-fixes` is enabled).
+     * If not provided, it will be internally set by the PanelSplitterProvider.
+     *
+     * This prop is useful for:
+     * - Rendering the panel splitter outside of an overflow container.
+     * - Positioning the panel splitter outside the resizing panel.
+     */
+    portalRef?: MutableRefObject<HTMLDivElement | null>;
 };
 /**
  * Provides the context required for the panel splitter to work within a page layout slot.
  *
  * Should be used in the layout area components, e.g. SideNav, Aside etc, as opposed to products.
  */
-export declare const PanelSplitterProvider: ({ panelId, panelWidth, onCompleteResize, getResizeBounds, resizingCssVar, panelRef, position, isEnabled, shortcut, children, }: PanelSplitterProviderProps) => React.JSX.Element;
+export declare const PanelSplitterProvider: ({ panelId, panelWidth, onCompleteResize, getResizeBounds, resizingCssVar, panelRef, portalRef: providedPortalRef, position, isEnabled, shortcut, children, }: PanelSplitterProviderProps) => React.JSX.Element;

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

@@ -1,3 +1,9 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ * @jsxFrag
+ */
+import React from 'react';
 import type { CommonSlotProps } from '../types';
 import { type VisibilityCallback } from './use-side-nav-visibility-callbacks';
 type SideNavProps = CommonSlotProps & {

package/dist/types-ts4.5/ui/menu-item/flyout-menu-item/flyout-menu-item-context.d.ts

@@ -21,6 +21,6 @@ export declare const OnCloseContext: import("react").Context<(() => void) | null
 /**
  * __On close provider__
  *
- * A context provider for supplying the testId to the FlyoutHeader.
+ * A context provider for supplying the onClose function to the FlyoutHeader.
  */
 export declare const OnCloseProvider: import("react").Provider<(() => void) | null | undefined>;

package/dist/types-ts4.5/ui/page-layout/constants.d.ts

@@ -35,6 +35,16 @@ export declare const UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY = "calc(var(--
 export declare const localSlotLayers: {
     topBar: number;
     banner: number;
+    topNavFHSWithOpenLayer: number;
+    bannerFHS: number;
+    topNavFHS: number;
     sideNav: number;
     panelSmallViewports: number;
 };
+export declare const openLayerObserverSideNavNamespace = "side-nav";
+export declare const openLayerObserverTopNavNamespace = "top-nav";
+/**
+ * CSS scroll timeline variable for the side nav content scroll indicator.
+ * The scroll timeline is created in SideNavContent, and then used by TopNavStart to apply the scroll indicator line.
+ */
+export declare const sideNavContentScrollTimelineVar = "--sNcst";

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

@@ -25,8 +25,13 @@ export type PanelSplitterContextType = {
     getResizeBounds: () => ResizeBounds;
     /**
      * A ref to the portal element where the panel splitter will be rendered.
-     * Internally set by the PanelSplitterProvider.
-     * Used to render the panel splitter outside of an overflow container.
+     * It can optionally be provided by consumers of <PanelSplitterProvider> (when the feature gate
+     * `platform-dst-side-nav-layering-fixes` is enabled).
+     * If not provided, it will be internally set by the PanelSplitterProvider.
+     *
+     * This prop is useful for:
+     * - Rendering the panel splitter outside of an overflow container.
+     * - Positioning the panel splitter outside the resizing panel.
      */
     portalRef: MutableRefObject<HTMLDivElement | null>;
     /**

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

@@ -1,12 +1,30 @@
-import React from 'react';
+import React, { type MutableRefObject } from 'react';
 import { type PanelSplitterContextType } from './context';
 export type PanelSplitterProviderProps = Omit<PanelSplitterContextType, 'portalRef' | 'position'> & {
     children: React.ReactNode;
+    /**
+     * The side of the panel/element that the splitter element is positioned on. Uses logical values to support right-to-left languages.
+     *
+     * Defaults to `start`.
+     *
+     * For left-to-right languages, `start` is the left side and `end` is the right side.
+     */
     position?: 'start' | 'end';
+    /**
+     * A ref to the portal element where the panel splitter will be rendered.
+     * It can optionally be provided by consumers of <PanelSplitterProvider> (when the feature gate
+     * `platform-dst-side-nav-layering-fixes` is enabled).
+     * If not provided, it will be internally set by the PanelSplitterProvider.
+     *
+     * This prop is useful for:
+     * - Rendering the panel splitter outside of an overflow container.
+     * - Positioning the panel splitter outside the resizing panel.
+     */
+    portalRef?: MutableRefObject<HTMLDivElement | null>;
 };
 /**
  * Provides the context required for the panel splitter to work within a page layout slot.
  *
  * Should be used in the layout area components, e.g. SideNav, Aside etc, as opposed to products.
  */
-export declare const PanelSplitterProvider: ({ panelId, panelWidth, onCompleteResize, getResizeBounds, resizingCssVar, panelRef, position, isEnabled, shortcut, children, }: PanelSplitterProviderProps) => React.JSX.Element;
+export declare const PanelSplitterProvider: ({ panelId, panelWidth, onCompleteResize, getResizeBounds, resizingCssVar, panelRef, portalRef: providedPortalRef, position, isEnabled, shortcut, children, }: PanelSplitterProviderProps) => React.JSX.Element;

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

@@ -1,3 +1,9 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ * @jsxFrag
+ */
+import React from 'react';
 import type { CommonSlotProps } from '../types';
 import { type VisibilityCallback } from './use-side-nav-visibility-callbacks';
 type SideNavProps = CommonSlotProps & {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "5.14.0",
+	"version": "5.16.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -73,10 +73,10 @@
 		"@atlaskit/ds-lib": "^5.3.0",
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/icon": "^29.3.0",
-		"@atlaskit/layering": "^3.4.0",
+		"@atlaskit/layering": "^3.5.0",
 		"@atlaskit/logo": "^19.9.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/popup": "^4.9.0",
+		"@atlaskit/popup": "^4.10.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
@@ -108,7 +108,7 @@
 		"@atlaskit/lozenge": "^13.3.0",
 		"@atlaskit/menu": "^8.4.0",
 		"@atlaskit/modal-dialog": "^14.9.0",
-		"@atlaskit/onboarding": "^14.4.0",
+		"@atlaskit/onboarding": "^14.5.0",
 		"@atlaskit/page-header": "^12.1.0",
 		"@atlaskit/page-layout": "^4.2.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
@@ -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.26.0",
+		"@atlassian/gemini": "^1.27.0",
 		"@atlassian/search-dialog": "^9.10.0",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/test-utils": "^1.0.0",
@@ -188,6 +188,9 @@
 		"platform-dst-nav-app-icon-height-fix": {
 			"type": "boolean"
 		},
+		"platform-dst-side-nav-layering-fixes": {
+			"type": "boolean"
+		},
 		"platform-dst-shape-theme-default": {
 			"type": "boolean"
 		},