@atlaskit/navigation-system 5.15.0 → 5.17.0

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

@@ -9,6 +9,7 @@ exports.TopNavMiddle = TopNavMiddle;
 require("./top-nav-middle.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
 var styles = {
   root: "_zulpu2gc _yyhycs5v _1bsb1osq _4cvr1h6o _1e0c1txw _1bahh9n0 _181n11p5 _1j8b15b0 _lagd1bp4 _1t4c1ris _12e8h9n0",
@@ -27,6 +28,6 @@ function TopNavMiddle(_ref) {
   var children = _ref.children;
   var isFhsEnabled = (0, _useIsFhsEnabled.useIsFhsEnabled)();
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _runtime.ax)([styles.root, isFhsEnabled && styles.fullHeightSidebar])
+    className: (0, _runtime.ax)([styles.root, isFhsEnabled && !(0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && styles.fullHeightSidebar])
   }, children);
 }

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

@@ -16,6 +16,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _topNavStartContext = require("../../../context/top-nav-start/top-nav-start-context");
 var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
+var _constants = require("../constants");
 var _useSideNavVisibility3 = require("../side-nav/use-side-nav-visibility");
 var _visibilityContext = require("../side-nav/visibility-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); }
@@ -44,6 +45,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.
@@ -52,7 +59,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"
 };
 
 /**
@@ -120,12 +130,29 @@ var TopNavStartInnerFHS = /*#__PURE__*/(0, _react.forwardRef)(function TopNavSta
       defaultCollapsed: true
     }),
     isExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop;
+  var sideNavState = (0, _react.useContext)(_visibilityContext.SideNavVisibilityState);
+  var isFirstRenderRef = (0, _react.useRef)(true);
+  (0, _react.useEffect)(function () {
+    if (!(0, _platformFeatureFlags.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.default.createElement("div", {
-    className: (0, _runtime.ax)([wrapperStyles.root, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded])
+    className: (0, _runtime.ax)([wrapperStyles.root, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded, (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && wrapperStyles.fullHeightSidebarWithLayeringFixes, !isFirstRenderRef.current && isExpandedOnDesktop && (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && wrapperStyles.fullHeightSidebarBorderTransition, isExpandedOnDesktop && (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && wrapperStyles.fullHeightSidebarExpandedWithLayeringFixes])
   }, /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
     "data-testid": testId,
-    className: (0, _runtime.ax)([innerStyles.root, innerStyles.fullHeightSidebar, (0, _platformFeatureFlags.fg)('team25-eu-jira-logo-updates-csm-jsm') && innerStyles.jiraProductLogoUpdate, isExpandedOnDesktop && innerStyles.fullHeightSidebarExpanded])
+    className: (0, _runtime.ax)([innerStyles.root, !(0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && innerStyles.fullHeightSidebar, (0, _platformFeatureFlags.fg)('team25-eu-jira-logo-updates-csm-jsm') && innerStyles.jiraProductLogoUpdate, isExpandedOnDesktop && innerStyles.fullHeightSidebarExpanded])
   }, children));
 });
 

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

@@ -11,7 +11,10 @@ require("./top-nav.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
+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 _hasCustomThemeContext = require("../../top-nav-items/themed/has-custom-theme-context");
@@ -34,7 +37,9 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 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"
 };
 
 /**
@@ -69,6 +74,8 @@ function TopNav(_ref) {
   var customTheme = (0, _useCustomTheme.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.
    *
@@ -96,9 +103,37 @@ function TopNav(_ref) {
     foregroundStyle = _useMemo.foregroundStyle;
   var _useSideNavVisibility = (0, _useSideNavVisibility2.useSideNavVisibility)(),
     isExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop;
+  var openLayerObserver = (0, _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 = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    hasOpenPopup = _useState2[0],
+    setHasOpenPopup = _useState2[1];
+  (0, _react.useLayoutEffect)(function () {
+    if (!openLayerObserver || !isFhsEnabled || !(0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes')) {
+      return;
+    }
+    function checkAndSetState() {
+      if (!openLayerObserver) {
+        return;
+      }
+      setHasOpenPopup(openLayerObserver.getCount({
+        namespace: _constants.openLayerObserverTopNavNamespace,
+        type: 'popup'
+      }) > 0);
+    }
+
+    // Initial check
+    checkAndSetState();
+
+    // Check again whenever number of layers in the top nav change
+    return openLayerObserver.onChange(checkAndSetState, {
+      namespace: _constants.openLayerObserverTopNavNamespace
+    });
+  }, [isFhsEnabled, openLayerObserver]);
   return /*#__PURE__*/React.createElement(_hasCustomThemeContext.HasCustomThemeContext.Provider, {
     value: customTheme.isEnabled
-  }, isFhsEnabled && /*#__PURE__*/React.createElement("div", {
+  }, isFhsEnabled && !(0, _platformFeatureFlags.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
@@ -108,11 +143,13 @@ function TopNav(_ref) {
   }), /*#__PURE__*/React.createElement("header", {
     id: id,
     "data-layout-slot": true,
-    className: (0, _runtime.ax)([styles.root, isFhsEnabled && styles.fullHeightSidebar, isExpandedOnDesktop && isFhsEnabled && styles.fullHeightSidebarExpanded, xcss]),
+    className: (0, _runtime.ax)([styles.root, isFhsEnabled && styles.fullHeightSidebar, isFhsEnabled && (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && styles.fullHeightSidebarWithLayeringFixes, hasOpenPopup && isFhsEnabled && (0, _platformFeatureFlags.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 && !(0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') ? foregroundStyle : customTheme.isEnabled ? customTheme.style : undefined
   }, /*#__PURE__*/React.createElement(_hoistUtils.HoistCssVarToLocalGrid, {
     variableName: _constants.topNavMountedVar,
     value: height
@@ -126,5 +163,7 @@ function TopNav(_ref) {
     value: height
   })
   // ------ END UNSAFE STYLES ------
-  , children));
+  , (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') ? /*#__PURE__*/React.createElement(_openLayerObserver.OpenLayerObserverNamespaceProvider, {
+    namespace: _constants.openLayerObserverTopNavNamespace
+  }, children) : children));
 }

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

@@ -5,7 +5,7 @@ import React, { useCallback, useContext } from 'react';
 import Heading from '@atlaskit/heading';
 import { Flex } from '@atlaskit/primitives/compiled';
 import { CloseButton } from './close-button';
-import { OnCloseContext, SetIsOpenContext } from './flyout-menu-item-context';
+import { OnCloseContext, SetIsOpenContext, useTitleId } from './flyout-menu-item-context';
 const headerStyles = {
   root: "_zulp12x7 _bozg1b66 _85i512x7 _1e0c1txw _2lx21bp4",
   flex: "_zulppxbi _1bah1yb4 _2lx21sbv _4cvr1h6o _1bsb1osq _bozgv77o"
@@ -24,6 +24,7 @@ export const FlyoutHeader = props => {
     title,
     closeButtonLabel
   } = props;
+  const id = useTitleId();
   const setIsOpen = useContext(SetIsOpenContext);
   const onClose = useContext(OnCloseContext);
   const handleClose = useCallback(() => {
@@ -41,6 +42,7 @@ export const FlyoutHeader = props => {
     testId: testId && `${testId}--close-button`
   }), /*#__PURE__*/React.createElement(Heading, {
     size: "xsmall",
-    as: "span"
+    as: "span",
+    id: id
   }, title)), children);
 };

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

@@ -1,11 +1,11 @@
 /* flyout-menu-item-content.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./flyout-menu-item-content.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from 'react';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { PopupContent } from '@atlaskit/popup/experimental';
-import { OnCloseProvider, SetIsOpenContext } from './flyout-menu-item-context';
+import { OnCloseProvider, SetIsOpenContext, TitleIdContextProvider } from './flyout-menu-item-context';
 
 /**
  * The vertical offset in px to ensure the flyout container does not exceed the bounds of
@@ -42,6 +42,7 @@ export const FlyoutMenuItemContent = /*#__PURE__*/forwardRef(({
     onClose === null || onClose === void 0 ? void 0 : onClose();
     setIsOpen(false);
   }, [setIsOpen, onClose]);
+  const titleId = useId();
   return /*#__PURE__*/React.createElement(PopupContent, {
     appearance: "UNSAFE_modal-below-sm",
     onClose: handleClose,
@@ -54,7 +55,9 @@ export const FlyoutMenuItemContent = /*#__PURE__*/forwardRef(({
     shouldFitViewport: true,
     testId: containerTestId,
     xcss: flyoutMenuItemContentStyles.root,
-    autoFocus: autoFocus
+    autoFocus: autoFocus,
+    role: fg("platform_dst_nav4_flyout_menu_slots_close_button") ? "dialog" : undefined,
+    titleId: 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.
      *
@@ -75,11 +78,13 @@ export const FlyoutMenuItemContent = /*#__PURE__*/forwardRef(({
   }) => /*#__PURE__*/React.createElement(UpdatePopperOnContentResize, {
     ref: forwardedRef,
     update: update
-  }, fg("platform_dst_nav4_flyout_menu_slots_close_button") ? /*#__PURE__*/React.createElement(OnCloseProvider, {
+  }, fg("platform_dst_nav4_flyout_menu_slots_close_button") ? /*#__PURE__*/React.createElement(TitleIdContextProvider, {
+    value: titleId
+  }, /*#__PURE__*/React.createElement(OnCloseProvider, {
     value: () => onClose
   }, /*#__PURE__*/React.createElement("div", {
     className: ax([flyoutMenuItemContentContainerStyles.container])
-  }, children)) : children));
+  }, children))) : children));
 });
 function createResizeObserver(update) {
   return new ResizeObserver(update);

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

@@ -29,4 +29,21 @@ export const OnCloseContext = /*#__PURE__*/createContext(null);
  * 
  * A context provider for supplying the onClose function to the FlyoutHeader.
  */
-export const OnCloseProvider = OnCloseContext.Provider;
+export const 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.
+ */
+export const TitleIdContext = /*#__PURE__*/createContext(undefined);
+export const useTitleId = () => useContext(TitleIdContext);
+
+/**
+ * __Title id provider__
+ * 
+ * A context provider for supplying the title id to the FlyoutHeader.
+ */
+export const TitleIdContextProvider = TitleIdContext.Provider;

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

@@ -1,6 +1,7 @@
 import React, { forwardRef, useEffect } from 'react';
 import useControlled from '@atlaskit/ds-lib/use-controlled';
 import usePreviousValue from '@atlaskit/ds-lib/use-previous-value';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Popup } from '@atlaskit/popup/experimental';
 import { MenuListItem } from '../menu-list-item';
 import { IsOpenContext, SetIsOpenContext } from './flyout-menu-item-context';
@@ -54,6 +55,7 @@ export const FlyoutMenuItem = /*#__PURE__*/forwardRef(({
     ref: forwardedRef
   }, /*#__PURE__*/React.createElement(Popup, {
     id: id,
-    isOpen: isOpen
+    isOpen: isOpen,
+    role: fg('platform_dst_nav4_flyout_menu_slots_close_button') ? 'dialog' : undefined
   }, children))));
 });

package/dist/es2019/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/es2019/ui/page-layout/banner.js

@@ -3,13 +3,16 @@ import "./banner.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useContext } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useSkipLinkInternal } from '../../context/skip-links/skip-links-context';
+import { useIsFhsEnabled } from '../fhs-rollout/use-is-fhs-enabled';
 import { bannerMountedVar, localSlotLayers, UNSAFE_bannerVar } from './constants';
 import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';
 import { DangerouslyHoistCssVarToDocumentRoot, HoistCssVarToLocalGrid } from './hoist-utils';
 import { useLayoutId } from './id-utils';
 const styles = {
-  root: "_nd5ldkfm _1reo15vq _18m915vq _4t3iutvi _152tidpf _kqsw1if8 _1pbyegat"
+  root: "_nd5ldkfm _1reo15vq _18m915vq _4t3iutvi _152tidpf _kqsw1if8 _1pbyegat",
+  fullHeightSidebarWithLayeringFixes: "_1pbycs5v"
 };
 
 /**
@@ -30,6 +33,7 @@ export function Banner({
   const id = useLayoutId({
     providedId
   });
+  const isFhsEnabled = useIsFhsEnabled();
 
   /**
    * Don't show the skip link if the slot has 0 height.
@@ -42,7 +46,7 @@ export function Banner({
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     "data-layout-slot": true,
-    className: ax([styles.root, xcss]),
+    className: ax([styles.root, isFhsEnabled && fg('platform-dst-side-nav-layering-fixes') && styles.fullHeightSidebarWithLayeringFixes, xcss]),
     "data-testid": testId
   }, /*#__PURE__*/React.createElement(HoistCssVarToLocalGrid, {
     variableName: bannerMountedVar,

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

@@ -50,6 +50,20 @@ export const UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY = `calc(var(${UNSAFE_a
 export const 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
-};
+};
+export const openLayerObserverSideNavNamespace = 'side-nav';
+export 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 const sideNavContentScrollTimelineVar = '--sNcst';

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

@@ -1,4 +1,5 @@
 import React, { Fragment, useMemo, useRef } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { PanelSplitterContext } from './context';
 /**
  * Provides the context required for the panel splitter to work within a page layout slot.
@@ -12,6 +13,7 @@ export const PanelSplitterProvider = ({
   getResizeBounds,
   resizingCssVar,
   panelRef,
+  portalRef: providedPortalRef,
   position = 'end',
   isEnabled = true,
   shortcut,
@@ -27,12 +29,12 @@ export const PanelSplitterProvider = ({
     position,
     panelRef,
     isEnabled,
-    portalRef,
+    portalRef: typeof providedPortalRef !== 'undefined' && fg('platform-dst-side-nav-layering-fixes') ? providedPortalRef : portalRef,
     shortcut
-  }), [panelId, panelWidth, onCompleteResize, getResizeBounds, resizingCssVar, position, portalRef, panelRef, isEnabled, shortcut]);
+  }), [panelId, panelWidth, onCompleteResize, getResizeBounds, resizingCssVar, position, panelRef, isEnabled, providedPortalRef, shortcut]);
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(PanelSplitterContext.Provider, {
     value: context
-  }, children), /*#__PURE__*/React.createElement("div", {
+  }, children), typeof providedPortalRef !== 'undefined' && fg('platform-dst-side-nav-layering-fixes') ? null : /*#__PURE__*/React.createElement("div", {
     ref: portalRef
   }));
 };

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

@@ -1,6 +1,9 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import invariant from 'tiny-invariant';
-import { sideNavPanelSplitterId } from '../constants';
+import { useOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
+import { openLayerObserverSideNavNamespace, openLayerObserverTopNavNamespace, sideNavPanelSplitterId } from '../constants';
 import { useToggleSideNav } from '../side-nav/use-toggle-side-nav';
 import { OnDoubleClickContext, PanelSplitterContext } from './context';
 import { PanelSplitter } from './panel-splitter';
@@ -30,6 +33,58 @@ export const SideNavPanelSplitter = ({
   const toggleSideNav = useToggleSideNav({
     trigger: 'double-click'
   });
+  const isFhsEnabled = 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.
+  const [isEnabled, setIsEnabled] = useState(true);
+  const openLayerObserver = useOpenLayerObserver();
+  useEffect(() => {
+    if (!openLayerObserver || !isFhsEnabled || !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.
+      const openPopupsInSideNav = openLayerObserver.getCount({
+        namespace: 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.
+      const openPopupsInTopNav = openLayerObserver.getCount({
+        namespace: 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.
+    const cleanupSideNavListener = openLayerObserver.onChange(checkAndSetState, {
+      namespace: openLayerObserverSideNavNamespace
+    });
+    const cleanupTopNavListener = openLayerObserver.onChange(checkAndSetState, {
+      namespace: openLayerObserverTopNavNamespace
+    });
+    return function cleanup() {
+      cleanupSideNavListener();
+      cleanupTopNavListener();
+    };
+  }, [isFhsEnabled, openLayerObserver]);
+  if (!isEnabled && isFhsEnabled && fg('platform-dst-side-nav-layering-fixes')) {
+    return null;
+  }
   return /*#__PURE__*/React.createElement(OnDoubleClickContext.Provider, {
     value: shouldCollapseOnDoubleClick ? toggleSideNav : undefined
   }, /*#__PURE__*/React.createElement(PanelSplitter, {

package/dist/es2019/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/es2019/ui/page-layout/root.js

@@ -3,8 +3,11 @@ import "./root.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useEffect, useRef } from 'react';
 import { OpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SkipLinksProvider } from '../../context/skip-links/skip-links-provider';
 import { TopNavStartProvider } from '../../context/top-nav-start/top-nav-start-context-provider';
+import { useIsFhsEnabled } from '../fhs-rollout/use-is-fhs-enabled';
+import { sideNavContentScrollTimelineVar } from './constants';
 import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';
 import { SideNavElementProvider } from './side-nav/element-context';
 import { IsSideNavShortcutEnabledProvider } from './side-nav/is-side-nav-shortcut-enabled-context';
@@ -14,7 +17,8 @@ import { SideNavVisibilityProvider } from './side-nav/visibility-provider';
 // ID of the root element that the banner and top bar slots hoist their sizes to. Only internally exported.
 export const gridRootId = 'unsafe-design-system-page-layout-root';
 const 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"
 };
 
 /**
@@ -31,6 +35,7 @@ export function Root({
   isSideNavShortcutEnabled = false
 }) {
   const ref = useRef(null);
+  const isFhsEnabled = useIsFhsEnabled();
   useEffect(() => {
     if (process.env.NODE_ENV !== 'production') {
       const IGNORED_ELEMENTS = ['SCRIPT', 'STYLE'];
@@ -64,7 +69,7 @@ This message will not be displayed in production.
     testId: testId
   }, /*#__PURE__*/React.createElement("div", {
     ref: ref,
-    className: ax([styles.root, xcss]),
+    className: ax([styles.root, isFhsEnabled && fg('platform-dst-side-nav-layering-fixes') && styles.sideNavScrollTimeline, xcss]),
     id: gridRootId,
     "data-testid": testId
   }, children)))))))));

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

@@ -10,4 +10,5 @@
 ._i0dlf1ug{flex-basis:0%}
 ._j7hq13ly{animation-name:k1ywrstg}
 ._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
-@keyframes k1ywrstg{0%{box-shadow:none}0.1%{box-shadow:0 -1px var(--ds-border,#0b120e24)}to{box-shadow:0 -1px var(--ds-border,#0b120e24)}}
+@keyframes k1ywrstg{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]) ._1gd913ly{animation-name:k1ywrstg}}@supports (scroll-timeline-axis:block){@keyframes k1ywrstg{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/es2019/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 @@ const styles = {
 const scrolledBorder = null;
 const scrollTimelineVar = '--sNcst';
 const fullHeightSidebarStyles = {
-  scrollContainer: "_1un9baqb _21o1gc9s _j7hq13ly"
+  scrollContainer: "_1un9baqb _21o1gc9s _j7hq13ly",
+  scrollContainerWithLayeringFixes: "_1sfqgc9s _1q1x1ule _8pm2gc9s _1gd913ly"
 };
 function _SideNavContent({
   children,
@@ -40,10 +44,13 @@ function _SideNavContent({
   const isFhsEnabled = useIsFhsEnabled();
   const internalRef = useRef(null);
   const mergedRef = useMemo(() => mergeRefs([internalRef, forwardedRef]), [forwardedRef]);
+  const {
+    isExpandedOnDesktop
+  } = useSideNavVisibility();
   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/es2019/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';
 const styles = {
   root: "_18zrutpp _1q51utpp _85i51b66"
 };
@@ -13,6 +14,22 @@ export const SideNavHeader = ({
   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/es2019/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)}}