@atlaskit/navigation-system 5.15.0 → 5.17.0

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # @atlassian/navigation-system
 
+## 5.17.0
+
+### Minor Changes
+
+- [`6f95ec25daa67`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6f95ec25daa67) -
+  Fixes to accessibility issues for the flyout menu.
+
+  This includes changing the `aria-haspopup` value from `"true"` to `"dialog"`, setting the `role`
+  of the popup container to `"dialog"`, adding an `aria-labelledby` to the popup container to
+  reference the `id` of the title in the header slot, and ensuring that escape dismisses the dialog
+  and places focus back on the trigger.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 5.16.0
+
+### Minor Changes
+
+- [`e1393235a54cb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e1393235a54cb) -
+  Layering improvements have been made to the top nav and full height sidebar:
+  - Layers inside the side nav that are rendered to parent (`shouldRenderToParent`) will now
+    correctly be layered above the top nav and banner. This includes some z-index changes to top nav
+    and banner, and changes to where the side nav panel splitter is rendered (portalled) to.
+  - The side nav panel splitter will be disabled when there the side nav or top nav contains any
+    open popups.
+  - The `portalRef` prop has also been added to `PanelSplitterProvider` to support these
+    improvements.
+
+  These changes are behind the `platform-dst-side-nav-layering-fixes` feature flag, when full height
+  sidebar is enabled.
+
+- [`e1393235a54cb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e1393235a54cb) -
+  Fixes a bug where the side nav would not be resizable on screen widths between 48rem and 64rem
+  (768px and 1024px) if the desktop side nav was collapsed.
+
+  This change is behind the feature flag `platform-dst-side-nav-layering-fixes`.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 5.15.0
 
 ### Minor Changes

package/dist/cjs/ui/menu-item/flyout-menu-item/flyout-header.js

@@ -31,6 +31,7 @@ var FlyoutHeader = exports.FlyoutHeader = function FlyoutHeader(props) {
     testId = props.testId,
     title = props.title,
     closeButtonLabel = props.closeButtonLabel;
+  var id = (0, _flyoutMenuItemContext.useTitleId)();
   var setIsOpen = (0, _react.useContext)(_flyoutMenuItemContext.SetIsOpenContext);
   var onClose = (0, _react.useContext)(_flyoutMenuItemContext.OnCloseContext);
   var handleClose = (0, _react.useCallback)(function () {
@@ -48,6 +49,7 @@ var FlyoutHeader = exports.FlyoutHeader = function FlyoutHeader(props) {
     testId: testId && "".concat(testId, "--close-button")
   }), /*#__PURE__*/_react.default.createElement(_heading.default, {
     size: "xsmall",
-    as: "span"
+    as: "span",
+    id: id
   }, title)), children);
 };

package/dist/cjs/ui/menu-item/flyout-menu-item/flyout-menu-item-content.js

@@ -50,6 +50,7 @@ var FlyoutMenuItemContent = exports.FlyoutMenuItemContent = /*#__PURE__*/(0, _re
     onClose === null || onClose === void 0 || onClose();
     setIsOpen(false);
   }, [setIsOpen, onClose]);
+  var titleId = (0, _react.useId)();
   return /*#__PURE__*/_react.default.createElement(_experimental.PopupContent, {
     appearance: "UNSAFE_modal-below-sm",
     onClose: handleClose,
@@ -62,7 +63,9 @@ var FlyoutMenuItemContent = exports.FlyoutMenuItemContent = /*#__PURE__*/(0, _re
     shouldFitViewport: true,
     testId: containerTestId,
     xcss: flyoutMenuItemContentStyles.root,
-    autoFocus: autoFocus
+    autoFocus: autoFocus,
+    role: (0, _platformFeatureFlags.fg)("platform_dst_nav4_flyout_menu_slots_close_button") ? "dialog" : undefined,
+    titleId: (0, _platformFeatureFlags.fg)("platform_dst_nav4_flyout_menu_slots_close_button") ? titleId : undefined
     /**
      * Disabling GPU acceleration removes the use of `transform` by popper.js for this popup.
      *
@@ -83,13 +86,15 @@ var FlyoutMenuItemContent = exports.FlyoutMenuItemContent = /*#__PURE__*/(0, _re
     return /*#__PURE__*/_react.default.createElement(UpdatePopperOnContentResize, {
       ref: forwardedRef,
       update: update
-    }, (0, _platformFeatureFlags.fg)("platform_dst_nav4_flyout_menu_slots_close_button") ? /*#__PURE__*/_react.default.createElement(_flyoutMenuItemContext.OnCloseProvider, {
+    }, (0, _platformFeatureFlags.fg)("platform_dst_nav4_flyout_menu_slots_close_button") ? /*#__PURE__*/_react.default.createElement(_flyoutMenuItemContext.TitleIdContextProvider, {
+      value: titleId
+    }, /*#__PURE__*/_react.default.createElement(_flyoutMenuItemContext.OnCloseProvider, {
       value: function value() {
         return onClose;
       }
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _runtime.ax)([flyoutMenuItemContentContainerStyles.container])
-    }, children)) : children);
+    }, children))) : children);
   });
 });
 function createResizeObserver(update) {

package/dist/cjs/ui/menu-item/flyout-menu-item/flyout-menu-item-context.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useSetFlyoutMenuOpen = exports.useFlyoutMenuOpen = exports.SetIsOpenContext = exports.OnCloseProvider = exports.OnCloseContext = exports.IsOpenContext = void 0;
+exports.useTitleId = exports.useSetFlyoutMenuOpen = exports.useFlyoutMenuOpen = exports.TitleIdContextProvider = exports.TitleIdContext = exports.SetIsOpenContext = exports.OnCloseProvider = exports.OnCloseContext = exports.IsOpenContext = void 0;
 var _react = require("react");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 /**
@@ -39,4 +39,23 @@ var OnCloseContext = exports.OnCloseContext = /*#__PURE__*/(0, _react.createCont
  * 
  * A context provider for supplying the onClose function to the FlyoutHeader.
  */
-var OnCloseProvider = exports.OnCloseProvider = OnCloseContext.Provider;
+var OnCloseProvider = exports.OnCloseProvider = OnCloseContext.Provider;
+
+/**
+ * __Title id context__
+ * 
+ * A context for storing the title id of the FlyoutMenuItem that is displayed in
+ * FlyoutHeader, and used as the aria-labelledby on the FlyoutMenuItemContent
+ * container.
+ */
+var TitleIdContext = exports.TitleIdContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+var useTitleId = exports.useTitleId = function useTitleId() {
+  return (0, _react.useContext)(TitleIdContext);
+};
+
+/**
+ * __Title id provider__
+ * 
+ * A context provider for supplying the title id to the FlyoutHeader.
+ */
+var TitleIdContextProvider = exports.TitleIdContextProvider = TitleIdContext.Provider;

package/dist/cjs/ui/menu-item/flyout-menu-item/flyout-menu-item.js

@@ -10,6 +10,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _useControlled3 = _interopRequireDefault(require("@atlaskit/ds-lib/use-controlled"));
 var _usePreviousValue = _interopRequireDefault(require("@atlaskit/ds-lib/use-previous-value"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experimental = require("@atlaskit/popup/experimental");
 var _menuListItem = require("../menu-list-item");
 var _flyoutMenuItemContext = require("./flyout-menu-item-context");
@@ -69,6 +70,7 @@ var FlyoutMenuItem = exports.FlyoutMenuItem = /*#__PURE__*/(0, _react.forwardRef
     ref: forwardedRef
   }, /*#__PURE__*/_react.default.createElement(_experimental.Popup, {
     id: id,
-    isOpen: isOpen
+    isOpen: isOpen,
+    role: (0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button') ? 'dialog' : undefined
   }, children))));
 });

package/dist/cjs/ui/page-layout/banner.compiled.css

@@ -1,6 +1,7 @@
 
 ._nd5ldkfm{grid-area:banner}._152tidpf{inset-block-start:0}
 ._18m915vq{overflow-y:hidden}
+._1pbycs5v{z-index:2}
 ._1pbyegat{z-index:4}
 ._1reo15vq{overflow-x:hidden}
 ._4t3iutvi{height:var(--n_bnrM)}

package/dist/cjs/ui/page-layout/banner.js

@@ -10,14 +10,17 @@ require("./banner.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _skipLinksContext = require("../../context/skip-links/skip-links-context");
+var _useIsFhsEnabled = require("../fhs-rollout/use-is-fhs-enabled");
 var _constants = require("./constants");
 var _hoistSlotSizesContext = require("./hoist-slot-sizes-context");
 var _hoistUtils = require("./hoist-utils");
 var _idUtils = require("./id-utils");
 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); }
 var styles = {
-  root: "_nd5ldkfm _1reo15vq _18m915vq _4t3iutvi _152tidpf _kqsw1if8 _1pbyegat"
+  root: "_nd5ldkfm _1reo15vq _18m915vq _4t3iutvi _152tidpf _kqsw1if8 _1pbyegat",
+  fullHeightSidebarWithLayeringFixes: "_1pbycs5v"
 };
 
 /**
@@ -38,6 +41,7 @@ function Banner(_ref) {
   var id = (0, _idUtils.useLayoutId)({
     providedId: providedId
   });
+  var isFhsEnabled = (0, _useIsFhsEnabled.useIsFhsEnabled)();
 
   /**
    * Don't show the skip link if the slot has 0 height.
@@ -50,7 +54,7 @@ function Banner(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     "data-layout-slot": true,
-    className: (0, _runtime.ax)([styles.root, xcss]),
+    className: (0, _runtime.ax)([styles.root, isFhsEnabled && (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && styles.fullHeightSidebarWithLayeringFixes, xcss]),
     "data-testid": testId
   }, /*#__PURE__*/React.createElement(_hoistUtils.HoistCssVarToLocalGrid, {
     variableName: _constants.bannerMountedVar,

package/dist/cjs/ui/page-layout/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.topNavMountedVar = exports.sideNavVar = exports.sideNavPanelSplitterId = exports.sideNavLiveWidthVar = exports.panelVar = exports.panelPanelSplitterId = exports.localSlotLayers = exports.contentInsetBlockStart = exports.contentHeightWhenFixed = exports.bannerMountedVar = exports.asideVar = exports.asidePanelSplitterId = exports.UNSAFE_topNavVar = exports.UNSAFE_sideNavLayoutVar = exports.UNSAFE_panelLayoutVar = exports.UNSAFE_bannerVar = exports.UNSAFE_asideLayoutVar = exports.UNSAFE_MAIN_INLINE_START_FOR_LEGACY_PAGES_ONLY = exports.UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY = exports.UNSAFE_MAIN_BLOCK_START_FOR_LEGACY_PAGES_ONLY = void 0;
+exports.topNavMountedVar = exports.sideNavVar = exports.sideNavPanelSplitterId = exports.sideNavLiveWidthVar = exports.sideNavContentScrollTimelineVar = exports.panelVar = exports.panelPanelSplitterId = exports.openLayerObserverTopNavNamespace = exports.openLayerObserverSideNavNamespace = exports.localSlotLayers = exports.contentInsetBlockStart = exports.contentHeightWhenFixed = exports.bannerMountedVar = exports.asideVar = exports.asidePanelSplitterId = exports.UNSAFE_topNavVar = exports.UNSAFE_sideNavLayoutVar = exports.UNSAFE_panelLayoutVar = exports.UNSAFE_bannerVar = exports.UNSAFE_asideLayoutVar = exports.UNSAFE_MAIN_INLINE_START_FOR_LEGACY_PAGES_ONLY = exports.UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY = exports.UNSAFE_MAIN_BLOCK_START_FOR_LEGACY_PAGES_ONLY = void 0;
 /**
  * These variables are shared across the different page layout slots.
  * This violates the [UI styling standard](https://atlassian.design/components/eslint-plugin-ui-styling-standard/no-imported-style-values/usage).
@@ -56,6 +56,20 @@ var UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY = exports.UNSAFE_MAIN_INLINE_EN
 var localSlotLayers = exports.localSlotLayers = {
   topBar: 4,
   banner: 4,
+  // With the FHS layering refactors, the banner and top nav have a lower z-index to allow layers from the side nav to overlay them.
+  // When they all have equal z-index values, the DOM order determines the layering - meaning the side nav will be layered above the rest.
+  // But, when the top bar contains an open layer, it needs to be layered above the side nav, so has a higher value.
+  topNavFHSWithOpenLayer: 3,
+  bannerFHS: 2,
+  topNavFHS: 2,
   sideNav: 2,
   panelSmallViewports: 1
-};
+};
+var openLayerObserverSideNavNamespace = exports.openLayerObserverSideNavNamespace = 'side-nav';
+var openLayerObserverTopNavNamespace = exports.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.
+ */
+var sideNavContentScrollTimelineVar = exports.sideNavContentScrollTimelineVar = '--sNcst';

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PanelSplitterProvider = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _context = require("./context");
 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); }
 /**
@@ -20,6 +21,7 @@ var PanelSplitterProvider = exports.PanelSplitterProvider = function PanelSplitt
     getResizeBounds = _ref.getResizeBounds,
     resizingCssVar = _ref.resizingCssVar,
     panelRef = _ref.panelRef,
+    providedPortalRef = _ref.portalRef,
     _ref$position = _ref.position,
     position = _ref$position === void 0 ? 'end' : _ref$position,
     _ref$isEnabled = _ref.isEnabled,
@@ -37,13 +39,13 @@ var PanelSplitterProvider = exports.PanelSplitterProvider = function PanelSplitt
       position: position,
       panelRef: panelRef,
       isEnabled: isEnabled,
-      portalRef: portalRef,
+      portalRef: typeof providedPortalRef !== 'undefined' && (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') ? providedPortalRef : portalRef,
       shortcut: shortcut
     };
-  }, [panelId, panelWidth, onCompleteResize, getResizeBounds, resizingCssVar, position, portalRef, panelRef, isEnabled, shortcut]);
+  }, [panelId, panelWidth, onCompleteResize, getResizeBounds, resizingCssVar, position, panelRef, isEnabled, providedPortalRef, shortcut]);
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_context.PanelSplitterContext.Provider, {
     value: context
-  }, children), /*#__PURE__*/_react.default.createElement("div", {
+  }, children), typeof providedPortalRef !== 'undefined' && (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') ? null : /*#__PURE__*/_react.default.createElement("div", {
     ref: portalRef
   }));
 };

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

@@ -6,8 +6,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SideNavPanelSplitter = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
+var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
 var _constants = require("../constants");
 var _useToggleSideNav = require("../side-nav/use-toggle-side-nav");
 var _context = require("./context");
@@ -39,6 +43,61 @@ var SideNavPanelSplitter = exports.SideNavPanelSplitter = function SideNavPanelS
   var toggleSideNav = (0, _useToggleSideNav.useToggleSideNav)({
     trigger: 'double-click'
   });
+  var isFhsEnabled = (0, _useIsFhsEnabled.useIsFhsEnabled)();
+
+  // The logic and state for disabling the panel splitter when there are open popups
+  // in the side nav or top nav is being placed here, instead of in `SideNav`, to prevent
+  // re-rendering the side nav anytime the number of open popups changes.
+  var _useState = (0, _react.useState)(true),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isEnabled = _useState2[0],
+    setIsEnabled = _useState2[1];
+  var openLayerObserver = (0, _openLayerObserver.useOpenLayerObserver)();
+  (0, _react.useEffect)(function () {
+    if (!openLayerObserver || !isFhsEnabled || !(0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes')) {
+      return;
+    }
+    function checkAndSetState() {
+      if (!openLayerObserver) {
+        return;
+      }
+
+      // We don't technically need to check the side nav for open layers, as they wouldn't overlay the
+      // panel splitter, as it sits within the same stacking context as the side nav. For consistency however,
+      // we check it as well.
+      var openPopupsInSideNav = openLayerObserver.getCount({
+        namespace: _constants.openLayerObserverSideNavNamespace,
+        type: 'popup'
+      });
+
+      // When there is an open layer in the top nav, the top nav is given a higher z-index than the side nav.
+      // This means the part of the side nav panel splitter that was sitting above the top nav will no longer
+      // be interactive (as it is now behind the top nav). So, we need to disable the entire panel splitter.
+      var openPopupsInTopNav = openLayerObserver.getCount({
+        namespace: _constants.openLayerObserverTopNavNamespace,
+        type: 'popup'
+      });
+      setIsEnabled(openPopupsInSideNav + openPopupsInTopNav === 0);
+    }
+
+    // Initial check, in case the app has loaded with an open popup.
+    checkAndSetState();
+
+    // Creating separate listeners for each namespace, to avoid running them when layers in other parts of the app change.
+    var cleanupSideNavListener = openLayerObserver.onChange(checkAndSetState, {
+      namespace: _constants.openLayerObserverSideNavNamespace
+    });
+    var cleanupTopNavListener = openLayerObserver.onChange(checkAndSetState, {
+      namespace: _constants.openLayerObserverTopNavNamespace
+    });
+    return function cleanup() {
+      cleanupSideNavListener();
+      cleanupTopNavListener();
+    };
+  }, [isFhsEnabled, openLayerObserver]);
+  if (!isEnabled && isFhsEnabled && (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes')) {
+    return null;
+  }
   return /*#__PURE__*/_react.default.createElement(_context.OnDoubleClickContext.Provider, {
     value: shouldCollapseOnDoubleClick ? toggleSideNav : undefined
   }, /*#__PURE__*/_react.default.createElement(_panelSplitter.PanelSplitter, {

package/dist/cjs/ui/page-layout/root.compiled.css

@@ -1,3 +1,4 @@
+._10iwgc9s{timeline-scope:--sNcst}
 ._1ciragmp >:not([data-layout-slot]){display:none!important}
 ._1e0c11p5{display:grid}
 ._1lmcq9em{grid-template-areas:"banner" "top-bar" "main" "aside"}

package/dist/cjs/ui/page-layout/root.js

@@ -11,8 +11,11 @@ require("./root.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
 var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _skipLinksProvider = require("../../context/skip-links/skip-links-provider");
 var _topNavStartContextProvider = require("../../context/top-nav-start/top-nav-start-context-provider");
+var _useIsFhsEnabled = require("../fhs-rollout/use-is-fhs-enabled");
+var _constants = require("./constants");
 var _hoistSlotSizesContext = require("./hoist-slot-sizes-context");
 var _elementContext = require("./side-nav/element-context");
 var _isSideNavShortcutEnabledContext = require("./side-nav/is-side-nav-shortcut-enabled-context");
@@ -22,7 +25,8 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 // ID of the root element that the banner and top bar slots hoist their sizes to. Only internally exported.
 var gridRootId = exports.gridRootId = 'unsafe-design-system-page-layout-root';
 var styles = {
-  root: "_1e0c11p5 _1tke1kxc _1lmcq9em _yv0ei47z _2z0516ab _1ciragmp _12fkuz0r _12qzrxre _1rqt70if _xkmgbaui _jbc7rxre _tyve1jg8"
+  root: "_1e0c11p5 _1tke1kxc _1lmcq9em _yv0ei47z _2z0516ab _1ciragmp _12fkuz0r _12qzrxre _1rqt70if _xkmgbaui _jbc7rxre _tyve1jg8",
+  sideNavScrollTimeline: "_10iwgc9s"
 };
 
 /**
@@ -41,6 +45,7 @@ function Root(_ref) {
     _ref$isSideNavShortcu = _ref.isSideNavShortcutEnabled,
     isSideNavShortcutEnabled = _ref$isSideNavShortcu === void 0 ? false : _ref$isSideNavShortcu;
   var ref = (0, _react.useRef)(null);
+  var isFhsEnabled = (0, _useIsFhsEnabled.useIsFhsEnabled)();
   (0, _react.useEffect)(function () {
     if (process.env.NODE_ENV !== 'production') {
       var IGNORED_ELEMENTS = ['SCRIPT', 'STYLE'];
@@ -65,7 +70,7 @@ function Root(_ref) {
     testId: testId
   }, /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
-    className: (0, _runtime.ax)([styles.root, xcss]),
+    className: (0, _runtime.ax)([styles.root, isFhsEnabled && (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && styles.sideNavScrollTimeline, xcss]),
     id: gridRootId,
     "data-testid": testId
   }, children)))))))));

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

@@ -10,4 +10,5 @@
 ._i0dlf1ug{flex-basis:0%}
 ._j7hq4n8p{animation-name:k1gwhnxc}
 ._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
-@keyframes k1gwhnxc{0%{box-shadow:none}0.1%{box-shadow:0 -1px var(--ds-border,#0b120e24)}to{box-shadow:0 -1px var(--ds-border,#0b120e24)}}
+@keyframes k1gwhnxc{0%{box-shadow:none}0.1%{box-shadow:0 -1px var(--ds-border,#0b120e24)}to{box-shadow:0 -1px var(--ds-border,#0b120e24)}}
+@media (min-width:64rem){@supports (scroll-timeline-axis:block){._1sfqgc9s{scroll-timeline-name:--sNcst}._1q1x1ule{scroll-timeline-axis:block}html:has([data-private-side-nav-header]) ._8pm2gc9s{animation-timeline:--sNcst}html:has([data-private-side-nav-header]) ._1gd94n8p{animation-name:k1gwhnxc}}@supports (scroll-timeline-axis:block){@keyframes k1gwhnxc{0%{box-shadow:none}0.1%{box-shadow:0 -1px var(--ds-border,#0b120e24)}to{box-shadow:0 -1px var(--ds-border,#0b120e24)}}}}

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

@@ -11,7 +11,10 @@ require("./side-nav-content.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
+var _constants = require("../constants");
+var _useSideNavVisibility2 = require("./use-side-nav-visibility");
 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); }
 /**
  * The main content of the side nav, filling up the middle section. It acts as a scroll container.
@@ -39,7 +42,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,
@@ -49,10 +53,12 @@ function _SideNavContent(_ref, forwardedRef) {
   var mergedRef = (0, _react.useMemo)(function () {
     return (0, _mergeRefs.default)([internalRef, forwardedRef]);
   }, [forwardedRef]);
+  var _useSideNavVisibility = (0, _useSideNavVisibility2.useSideNavVisibility)(),
+    isExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop;
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: isFhsEnabled ? mergedRef : forwardedRef,
     "data-testid": testId,
-    className: (0, _runtime.ax)([styles.scrollContainer, isFhsEnabled && fullHeightSidebarStyles.scrollContainer])
+    className: (0, _runtime.ax)([styles.scrollContainer, isFhsEnabled && !(0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && fullHeightSidebarStyles.scrollContainer, isFhsEnabled && isExpandedOnDesktop && (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && fullHeightSidebarStyles.scrollContainerWithLayeringFixes])
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _runtime.ax)([styles.paddingContainer])
   }, children));

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

@@ -9,6 +9,7 @@ exports.SideNavHeader = void 0;
 require("./side-nav-header.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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); }
 var styles = {
   root: "_18zrutpp _1q51utpp _85i51b66"
@@ -20,6 +21,22 @@ var styles = {
 var SideNavHeader = exports.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": (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') ? 'true' : undefined,
     className: (0, _runtime.ax)([styles.root])
   }, children);
 };

package/dist/cjs/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/cjs/ui/page-layout/side-nav/side-nav.js

@@ -9,12 +9,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.SideNav = SideNav;
 exports.onPeekStartDelayMs = void 0;
 require("./side-nav.compiled.css");
-var _react = _interopRequireWildcard(require("react"));
-var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
 var _bindEventListener = require("bind-event-listener");
 var _reactDom = require("react-dom");
 var _analyticsNext = require("@atlaskit/analytics-next");
@@ -63,7 +62,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",
@@ -187,6 +188,7 @@ function SideNavInternal(_ref) {
   var clampedWidth = "clamp(".concat(widthResizeBounds.min, ", ").concat(width, "px, ").concat(widthResizeBounds.max, ")");
   var dangerouslyHoistSlotSizes = (0, _react.useContext)(_hoistSlotSizesContext.DangerouslyHoistSlotSizes);
   var navRef = (0, _react.useRef)(null);
+  var panelSplitterPortalTargetRef = (0, _react.useRef)(null);
   /**
    * Used to share the side nav element with the `Panel`,
    * which observes the side nav to determine its maximum width.
@@ -313,7 +315,7 @@ function SideNavInternal(_ref) {
       if (action === 'ready-to-close') {
         // If there are no open layers, we can close the flyout.
         if ((openLayerObserver === null || openLayerObserver === void 0 ? void 0 : openLayerObserver.getCount({
-          namespace: openLayerObserverSideNavNamespace
+          namespace: _constants.openLayerObserverSideNavNamespace
         })) === 0) {
           close();
           return;
@@ -676,7 +678,7 @@ function SideNavInternal(_ref) {
         updateFlyoutState('force-close');
       }
     }, {
-      namespace: openLayerObserverSideNavNamespace
+      namespace: _constants.openLayerObserverSideNavNamespace
     });
   }, [openLayerObserver, updateFlyoutState]);
   (0, _react.useEffect)(function () {
@@ -760,7 +762,7 @@ function SideNavInternal(_ref) {
    * Avoiding nesting the `@supports` at-rule inside of `@media` means Compiled can remove duplicate styles from the generated CSS.
    */
   !isFirefox;
-  return /*#__PURE__*/React.createElement("nav", (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement("nav", (0, _extends2.default)({
     id: id
   }, devTimeOnlyAttributes, {
     "data-layout-slot": true,
@@ -768,8 +770,8 @@ function SideNavInternal(_ref) {
     style: (0, _defineProperty2.default)({}, _constants.sideNavVar, clampedWidth),
     ref: mergedRef,
     "data-testid": testId,
-    className: (0, _runtime.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])
-  }), /*#__PURE__*/React.createElement(_hoistUtils.DangerouslyHoistCssVarToDocumentRoot, {
+    className: (0, _runtime.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 && !(0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && styles.fullHeightSidebar])
+  }), /*#__PURE__*/_react.default.createElement(_hoistUtils.DangerouslyHoistCssVarToDocumentRoot, {
     variableName: _constants.sideNavLiveWidthVar,
     value: "0px",
     mediaQuery: _responsive.media.above.md,
@@ -779,23 +781,32 @@ function SideNavInternal(_ref) {
   // ------ START UNSAFE STYLES ------
   // These styles are only needed for the UNSAFE legacy use case for Jira + Confluence.
   // When they aren't needed anymore we can delete them wholesale.
-  React.createElement(_hoistUtils.DangerouslyHoistCssVarToDocumentRoot, {
+  _react.default.createElement(_hoistUtils.DangerouslyHoistCssVarToDocumentRoot, {
     variableName: _constants.UNSAFE_sideNavLayoutVar,
     value: "var(".concat(_constants.sideNavLiveWidthVar, ")")
   })
   // ------ END UNSAFE STYLES ------
-  , /*#__PURE__*/React.createElement(_provider.PanelSplitterProvider, {
+  , /*#__PURE__*/_react.default.createElement(_provider.PanelSplitterProvider, {
     panelId: _constants.sideNavPanelSplitterId,
     panelRef: navRef,
+    portalRef: isFhsEnabled && (0, _platformFeatureFlags.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: (0, _platformFeatureFlags.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.sideNavToggleTooltipKeyboardShortcut : undefined
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _runtime.ax)([styles.flexContainer])
-  }, children)));
+  }, children)), isFhsEnabled && (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && /*#__PURE__*/_react.default.createElement("div", {
+    ref: panelSplitterPortalTargetRef,
+    className: (0, _runtime.ax)([panelSplitterPortalTargetStyles.root])
+  }));
 }
 
 /**
@@ -821,9 +832,9 @@ function SideNav(_ref8) {
     onPeekEnd = _ref8.onPeekEnd,
     canToggleWithShortcut = _ref8.canToggleWithShortcut,
     id = _ref8.id;
-  return /*#__PURE__*/React.createElement(_openLayerObserver.OpenLayerObserverNamespaceProvider, {
-    namespace: openLayerObserverSideNavNamespace
-  }, /*#__PURE__*/React.createElement(SideNavInternal, {
+  return /*#__PURE__*/_react.default.createElement(_openLayerObserver.OpenLayerObserverNamespaceProvider, {
+    namespace: _constants.openLayerObserverSideNavNamespace
+  }, /*#__PURE__*/_react.default.createElement(SideNavInternal, {
     defaultCollapsed: defaultCollapsed,
     defaultWidth: defaultWidth,
     testId: testId,

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

@@ -26,7 +26,8 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 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",
@@ -73,7 +74,7 @@ function TopNavEnd(_ref) {
   }, [query]);
   return /*#__PURE__*/_react.default.createElement("nav", {
     "aria-label": label,
-    className: (0, _runtime.ax)([containerStyles.root, isFhsEnabled && containerStyles.fullHeightSidebar, (0, _platformFeatureFlags.fg)('team25-eu-jira-logo-updates-csm-jsm') && containerStyles.jiraProductLogoUpdate])
+    className: (0, _runtime.ax)([containerStyles.root, isFhsEnabled && !(0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && containerStyles.fullHeightSidebar, isFhsEnabled && (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && containerStyles.fullHeightSidebarWithLayeringFixes, (0, _platformFeatureFlags.fg)('team25-eu-jira-logo-updates-csm-jsm') && containerStyles.jiraProductLogoUpdate])
   }, isMobile ? /*#__PURE__*/_react.default.createElement(_popup.default, {
     isOpen: isOpen,
     onClose: function onClose() {