@atlaskit/navigation-system 6.4.0 → 7.1.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlassian/navigation-system
 
+## 7.1.0
+
+### Minor Changes
+
+- [`15acec25cc47f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/15acec25cc47f) -
+  Cleans up the `platform_dst_nav4_fhs_feedback_1` feature gate. Scroll lines are now removed, as
+  well as other minor visual changes.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 7.0.0
+
+### Major Changes
+
+- [`f48c03e011b92`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f48c03e011b92) -
+  Renamed `SideNavContent` to `SideNavBody` to align with other slot component naming.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 6.4.0
 
 ### Minor Changes

package/constellation/layout/code.mdx

@@ -13,7 +13,7 @@ props:
     - TopNavEnd
     - SideNav
     - SideNavHeader
-    - SideNavContent
+    - SideNavBody
     - SideNavFooter
     - Main
     - MainStickyHeader
@@ -79,11 +79,11 @@ The top part of the side nav.
 
 <TSMorphProps exportName="SideNavHeader" packageName="@atlaskit/navigation-system" />
 
-### SideNavContent
+### SideNavBody
 
 The main content of the side nav, filling up the middle section. It acts as a scroll container.
 
-<TSMorphProps exportName="SideNavContent" packageName="@atlaskit/navigation-system" />
+<TSMorphProps exportName="SideNavBody" packageName="@atlaskit/navigation-system" />
 
 ### SideNavFooter
 

package/constellation/layout/examples.mdx

@@ -72,12 +72,12 @@ The `SideNav` has three layout components that you can use to position component
 nav flexbox.
 
 - `SideNavHeader`. The top part of the side nav.
-- `SideNavContent`. The middle part of the side nav. It acts as a scroll container. It will grow to
+- `SideNavBody`. The middle part of the side nav. It acts as a scroll container. It will grow to
   take up the available space — this is used to push the footer to the bottom of the side nav.
 - `SideNavFooter`. The bottom part of the side nav.
 
-Note: make sure to render `SideNavContent` to ensure that the footer is positioned at the bottom of
-the side nav, simulating a sticky footer.
+Note: make sure to render `SideNavBody` to ensure that the footer is positioned at the bottom of the
+side nav, simulating a sticky footer.
 
 #### Side nav collapse/expand
 

package/dist/cjs/entry-points/layout/side-nav.js

@@ -9,10 +9,10 @@ Object.defineProperty(exports, "SideNav", {
     return _sideNav.SideNav;
   }
 });
-Object.defineProperty(exports, "SideNavContent", {
+Object.defineProperty(exports, "SideNavBody", {
   enumerable: true,
   get: function get() {
-    return _sideNavContent.SideNavContent;
+    return _sideNavContent.SideNavBody;
   }
 });
 Object.defineProperty(exports, "SideNavFooter", {

package/dist/cjs/index.js

@@ -141,10 +141,10 @@ Object.defineProperty(exports, "SideNav", {
     return _sideNav.SideNav;
   }
 });
-Object.defineProperty(exports, "SideNavContent", {
+Object.defineProperty(exports, "SideNavBody", {
   enumerable: true,
   get: function get() {
-    return _sideNavContent.SideNavContent;
+    return _sideNavContent.SideNavBody;
   }
 });
 Object.defineProperty(exports, "SideNavFooter", {

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.sideNavContentScrollTimelineVar = exports.ribbonVar = exports.panelVar = exports.panelPanelSplitterId = exports.openLayerObserverTopNavStartNamespace = exports.openLayerObserverTopNavMiddleNamespace = exports.openLayerObserverTopNavEndNamespace = exports.openLayerObserverSideNavNamespace = exports.localSlotLayers = exports.contentInsetBlockStart = exports.contentHeightWhenFixed = exports.bannerMountedVar = exports.asideVar = exports.asidePanelSplitterId = exports.UNSAFE_topNavVar = exports.UNSAFE_sideNavLayoutVar = exports.UNSAFE_ribbonVar = 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.ribbonVar = exports.panelVar = exports.panelPanelSplitterId = exports.openLayerObserverTopNavStartNamespace = exports.openLayerObserverTopNavMiddleNamespace = exports.openLayerObserverTopNavEndNamespace = exports.openLayerObserverSideNavNamespace = exports.localSlotLayers = exports.contentInsetBlockStart = exports.contentHeightWhenFixed = exports.bannerMountedVar = exports.asideVar = exports.asidePanelSplitterId = exports.UNSAFE_topNavVar = exports.UNSAFE_sideNavLayoutVar = exports.UNSAFE_ribbonVar = 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).
@@ -76,10 +76,4 @@ var openLayerObserverSideNavNamespace = exports.openLayerObserverSideNavNamespac
 // namespaces.
 var openLayerObserverTopNavStartNamespace = exports.openLayerObserverTopNavStartNamespace = 'top-nav-start';
 var openLayerObserverTopNavMiddleNamespace = exports.openLayerObserverTopNavMiddleNamespace = 'top-nav-middle';
-var openLayerObserverTopNavEndNamespace = exports.openLayerObserverTopNavEndNamespace = 'top-nav-end';
-
-/**
- * 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';
+var openLayerObserverTopNavEndNamespace = exports.openLayerObserverTopNavEndNamespace = 'top-nav-end';

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

@@ -1,4 +1,3 @@
-._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

@@ -14,8 +14,6 @@ var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-obs
 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");
@@ -26,7 +24,6 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 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",
-  sideNavScrollTimeline: "_10iwgc9s",
   ribbon: "_12fk1aio _12qzrxre _1rqteala _xkmgks3h _jbc7rxre _tyve1nco"
 };
 
@@ -46,7 +43,6 @@ 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'];
@@ -71,7 +67,7 @@ function Root(_ref) {
     testId: testId
   }, /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
-    className: (0, _runtime.ax)([styles.root, isFhsEnabled && !(0, _platformFeatureFlags.fg)('platform_dst_nav4_fhs_feedback_1') && styles.sideNavScrollTimeline, (0, _platformFeatureFlags.fg)('platform_dst_nav4_ribbon_slot') && styles.ribbon, xcss]),
+    className: (0, _runtime.ax)([styles.root, (0, _platformFeatureFlags.fg)('platform_dst_nav4_ribbon_slot') && styles.ribbon, xcss]),
     id: gridRootId,
     "data-testid": testId
   }, children)))))))));

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

@@ -6,5 +6,4 @@
 ._85i5utpp{padding-block-end:var(--ds-space-150,9pt)}
 ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
 ._i0dlf1ug{flex-basis:0%}
-._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
-@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)}}}}
+._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}

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

@@ -6,15 +6,12 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SideNavContent = void 0;
+exports.SideNavBody = void 0;
 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.
@@ -22,27 +19,13 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * It will grow to take up the available space in the side nav — this is used to push the footer to the
  * bottom of the side nav.
  */
-var SideNavContent = exports.SideNavContent = /*#__PURE__*/(0, _react.forwardRef)(_SideNavContent);
+var SideNavBody = exports.SideNavBody = /*#__PURE__*/(0, _react.forwardRef)(_SideNavContent);
 
 // Placing this const below the function breaks Compiled!
 var styles = {
   scrollContainer: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo1wug _18m91wug",
   paddingContainer: "_1q51utpp _y4tiutpp _85i5utpp _bozgutpp"
 };
-
-/**
- * Using CSS scroll-driven animations to apply a scrolled indicator border.
- *
- * This approach is better for SSR, as some apps like Confluence will apply the
- * initial scroll position of the side nav content using JS before hydration.
- *
- * If we applied the border through React state it would only appear after hydration,
- * whereas this CSS approach should show even before hydration.
- */
-var scrolledBorder = null;
-var fullHeightSidebarStyles = {
-  scrollContainer: "_1sfqgc9s _1q1x1ule _8pm2gc9s _1gd94n8p"
-};
 function _SideNavContent(_ref, forwardedRef) {
   var children = _ref.children,
     testId = _ref.testId;
@@ -51,12 +34,10 @@ 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 && isExpandedOnDesktop && !(0, _platformFeatureFlags.fg)('platform_dst_nav4_fhs_feedback_1') && fullHeightSidebarStyles.scrollContainer])
+    className: (0, _runtime.ax)([styles.scrollContainer])
   }, /*#__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,7 +9,6 @@ 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"
@@ -21,22 +20,6 @@ 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_nav4_fhs_feedback_1') ? undefined : 'true',
     className: (0, _runtime.ax)([styles.root])
   }, children);
 };

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

@@ -788,7 +788,7 @@ function SideNavInternal(_ref) {
 /**
  * The side navigation layout area. It will show on the left (inline start) of the screen.
  *
- * Use the side nav area components (`SideNavHeader`, `SideNavContent`, `SideNavFooter`) to position
+ * Use the side nav area components (`SideNavHeader`, `SideNavBody`, `SideNavFooter`) to position
  * content within areas of the side nav.
  *
  * You can optionally render a `PanelSplitter` as a child to make the side navigation slot resizable.

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

@@ -12,6 +12,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){._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%}._exxmutpp{padding-inline-end:var(--ds-space-150,9pt)}._glte1ris{width:max-content}._15rip2n4{min-width:330px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmpxbi{padding-inline-end:var(--ds-space-200,1pc)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._m7c3kb7n:after{opacity:1}}
-@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}}
-@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)}}html:not(:has([data-private-side-nav-header])) ._5gdsgc9s{animation-timeline:--sNcst}html:not(:has([data-private-side-nav-header])) ._53fr1ybg{animation-name:khj1qz3}html:not(:has([data-private-side-nav-header])) ._bt1c1hrf{animation-fill-mode:both}}
+@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%}._glte1ris{width:max-content}._15rip2n4{min-width:330px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmutpp{padding-inline-end:var(--ds-space-150,9pt)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._m7c3kb7n:after{opacity:1}}
+@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

@@ -44,12 +44,6 @@ 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.
@@ -58,10 +52,8 @@ var scrolledShadow = null;
  */
 var wrapperStyles = {
   root: "_vchhusvi _bozgutpp _4t3i1osq _13wnh2mm _1l3vb3bt _juxdstnw _1vinidpf _1719idpf _e6znidpf _1kyhe4h9 _4cwynqa1 _435s1l7x _m7c3idpf",
-  fullHeightSidebarExpanded: "_glte93mn _exxmpxbi _4ap3vuon _m7c3kb7n",
-  fullHeightSidebarExpandedScrollTimeline: "_5gdsgc9s _53fr1ybg _bt1c1hrf",
-  fullHeightSidebarBorderTransition: "_n8qabrmi _wc72fnf5 _j3mr1v42",
-  fullHeightSidebarExpandedWithFeedback: "_exxmutpp"
+  fullHeightSidebarExpanded: "_glte93mn _exxmutpp _4ap3vuon _m7c3kb7n",
+  fullHeightSidebarBorderTransition: "_n8qabrmi _wc72fnf5 _j3mr1v42"
 };
 
 /**
@@ -143,7 +135,7 @@ var TopNavStartInnerFHS = /*#__PURE__*/(0, _react.forwardRef)(function TopNavSta
     }
   }, [sideNavState]);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _runtime.ax)([wrapperStyles.root, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded, isExpandedOnDesktop && (0, _platformFeatureFlags.fg)('platform_dst_nav4_fhs_feedback_1') && wrapperStyles.fullHeightSidebarExpandedWithFeedback, !isFirstRenderRef.current && isExpandedOnDesktop && wrapperStyles.fullHeightSidebarBorderTransition, isExpandedOnDesktop && !(0, _platformFeatureFlags.fg)('platform_dst_nav4_fhs_feedback_1') && wrapperStyles.fullHeightSidebarExpandedScrollTimeline])
+    className: (0, _runtime.ax)([wrapperStyles.root, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded, !isFirstRenderRef.current && isExpandedOnDesktop && wrapperStyles.fullHeightSidebarBorderTransition])
   }, /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
     "data-testid": testId,

package/dist/es2019/entry-points/layout/side-nav.js

@@ -1,6 +1,6 @@
 export { SideNav } from '../../ui/page-layout/side-nav/side-nav';
 export { SideNavHeader } from '../../ui/page-layout/side-nav/side-nav-header';
-export { SideNavContent } from '../../ui/page-layout/side-nav/side-nav-content';
+export { SideNavBody } from '../../ui/page-layout/side-nav/side-nav-content';
 export { SideNavFooter } from '../../ui/page-layout/side-nav/side-nav-footer';
 export { SideNavToggleButton } from '../../ui/page-layout/side-nav/toggle-button';
 export { useToggleSideNav } from '../../ui/page-layout/side-nav/use-toggle-side-nav';

package/dist/es2019/index.js

@@ -12,7 +12,7 @@ export { MainStickyHeader } from './ui/page-layout/main/main-sticky-header';
 export { SideNavToggleButton } from './ui/page-layout/side-nav/toggle-button';
 export { useToggleSideNav } from './ui/page-layout/side-nav/use-toggle-side-nav';
 export { SideNavHeader } from './ui/page-layout/side-nav/side-nav-header';
-export { SideNavContent } from './ui/page-layout/side-nav/side-nav-content';
+export { SideNavBody } from './ui/page-layout/side-nav/side-nav-content';
 export { SideNavFooter } from './ui/page-layout/side-nav/side-nav-footer';
 export { PanelSplitter } from './ui/page-layout/panel-splitter/panel-splitter';
 export { PanelSplitterProvider } from './ui/page-layout/panel-splitter/provider';

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

@@ -70,10 +70,4 @@ export const openLayerObserverSideNavNamespace = 'side-nav';
 // namespaces.
 export const openLayerObserverTopNavStartNamespace = 'top-nav-start';
 export const openLayerObserverTopNavMiddleNamespace = 'top-nav-middle';
-export const openLayerObserverTopNavEndNamespace = 'top-nav-end';
-
-/**
- * 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';
+export const openLayerObserverTopNavEndNamespace = 'top-nav-end';

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

@@ -1,4 +1,3 @@
-._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

@@ -6,8 +6,6 @@ import { OpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-ob
 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';
@@ -18,7 +16,6 @@ import { SideNavVisibilityProvider } from './side-nav/visibility-provider';
 export const gridRootId = 'unsafe-design-system-page-layout-root';
 const styles = {
   root: "_1e0c11p5 _1tke1kxc _1lmcq9em _yv0ei47z _2z0516ab _1ciragmp _12fkuz0r _12qzrxre _1rqt70if _xkmgbaui _jbc7rxre _tyve1jg8",
-  sideNavScrollTimeline: "_10iwgc9s",
   ribbon: "_12fk1aio _12qzrxre _1rqteala _xkmgks3h _jbc7rxre _tyve1nco"
 };
 
@@ -36,7 +33,6 @@ export function Root({
   isSideNavShortcutEnabled = false
 }) {
   const ref = useRef(null);
-  const isFhsEnabled = useIsFhsEnabled();
   useEffect(() => {
     if (process.env.NODE_ENV !== 'production') {
       const IGNORED_ELEMENTS = ['SCRIPT', 'STYLE'];
@@ -70,7 +66,7 @@ This message will not be displayed in production.
     testId: testId
   }, /*#__PURE__*/React.createElement("div", {
     ref: ref,
-    className: ax([styles.root, isFhsEnabled && !fg('platform_dst_nav4_fhs_feedback_1') && styles.sideNavScrollTimeline, fg('platform_dst_nav4_ribbon_slot') && styles.ribbon, xcss]),
+    className: ax([styles.root, fg('platform_dst_nav4_ribbon_slot') && styles.ribbon, xcss]),
     id: gridRootId,
     "data-testid": testId
   }, children)))))))));

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

@@ -6,5 +6,4 @@
 ._85i5utpp{padding-block-end:var(--ds-space-150,9pt)}
 ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
 ._i0dlf1ug{flex-basis:0%}
-._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
-@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)}}}}
+._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}

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

@@ -3,10 +3,7 @@ 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.
@@ -14,27 +11,13 @@ import { useSideNavVisibility } from './use-side-nav-visibility';
  * It will grow to take up the available space in the side nav — this is used to push the footer to the
  * bottom of the side nav.
  */
-export const SideNavContent = /*#__PURE__*/forwardRef(_SideNavContent);
+export const SideNavBody = /*#__PURE__*/forwardRef(_SideNavContent);
 
 // Placing this const below the function breaks Compiled!
 const styles = {
   scrollContainer: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo1wug _18m91wug",
   paddingContainer: "_1q51utpp _y4tiutpp _85i5utpp _bozgutpp"
 };
-
-/**
- * Using CSS scroll-driven animations to apply a scrolled indicator border.
- *
- * This approach is better for SSR, as some apps like Confluence will apply the
- * initial scroll position of the side nav content using JS before hydration.
- *
- * If we applied the border through React state it would only appear after hydration,
- * whereas this CSS approach should show even before hydration.
- */
-const scrolledBorder = null;
-const fullHeightSidebarStyles = {
-  scrollContainer: "_1sfqgc9s _1q1x1ule _8pm2gc9s _1gd913ly"
-};
 function _SideNavContent({
   children,
   testId
@@ -42,13 +25,10 @@ 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 && isExpandedOnDesktop && !fg('platform_dst_nav4_fhs_feedback_1') && fullHeightSidebarStyles.scrollContainer])
+    className: ax([styles.scrollContainer])
   }, /*#__PURE__*/React.createElement("div", {
     className: ax([styles.paddingContainer])
   }, children));

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

@@ -2,7 +2,6 @@
 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"
 };
@@ -14,22 +13,6 @@ 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_nav4_fhs_feedback_1') ? undefined : 'true',
     className: ax([styles.root])
   }, children);
 };

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

@@ -784,7 +784,7 @@ function SideNavInternal({
 /**
  * The side navigation layout area. It will show on the left (inline start) of the screen.
  *
- * Use the side nav area components (`SideNavHeader`, `SideNavContent`, `SideNavFooter`) to position
+ * Use the side nav area components (`SideNavHeader`, `SideNavBody`, `SideNavFooter`) to position
  * content within areas of the side nav.
  *
  * You can optionally render a `PanelSplitter` as a child to make the side navigation slot resizable.

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

@@ -12,6 +12,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){._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%}._exxmutpp{padding-inline-end:var(--ds-space-150,9pt)}._glte1ris{width:max-content}._15rip2n4{min-width:330px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmpxbi{padding-inline-end:var(--ds-space-200,1pc)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._m7c3kb7n:after{opacity:1}}
-@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}}
-@supports (scroll-timeline-axis:block){@keyframes k1rswljm{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)}}html:not(:has([data-private-side-nav-header])) ._5gdsgc9s{animation-timeline:--sNcst}html:not(:has([data-private-side-nav-header])) ._53frsjnm{animation-name:k1rswljm}html:not(:has([data-private-side-nav-header])) ._bt1c1hrf{animation-fill-mode:both}}
+@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%}._glte1ris{width:max-content}._15rip2n4{min-width:330px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmutpp{padding-inline-end:var(--ds-space-150,9pt)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._m7c3kb7n:after{opacity:1}}
+@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/es2019/ui/page-layout/top-nav/top-nav-start.js

@@ -8,7 +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 { openLayerObserverTopNavStartNamespace, sideNavContentScrollTimelineVar } from '../constants';
+import { openLayerObserverTopNavStartNamespace } from '../constants';
 import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
 import { SideNavVisibilityState } from '../side-nav/visibility-context';
 
@@ -35,12 +35,6 @@ const 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.
- */
-const scrolledShadow = null;
-
 /**
  * Styles for the outer element, that does not have re-enabled pointer events and spans the entire
  * width of the TopNavStart area.
@@ -49,10 +43,8 @@ const scrolledShadow = null;
  */
 const wrapperStyles = {
   root: "_vchhusvi _bozgutpp _4t3i1osq _13wnh2mm _1l3vb3bt _juxdstnw _1vinidpf _1719idpf _e6znidpf _1kyhe4h9 _4cwynqa1 _435s1l7x _m7c3idpf",
-  fullHeightSidebarExpanded: "_glte93mn _exxmpxbi _4ap3vuon _m7c3kb7n",
-  fullHeightSidebarExpandedScrollTimeline: "_5gdsgc9s _53frsjnm _bt1c1hrf",
-  fullHeightSidebarBorderTransition: "_n8qabrmi _wc72fnf5 _j3mr1v42",
-  fullHeightSidebarExpandedWithFeedback: "_exxmutpp"
+  fullHeightSidebarExpanded: "_glte93mn _exxmutpp _4ap3vuon _m7c3kb7n",
+  fullHeightSidebarBorderTransition: "_n8qabrmi _wc72fnf5 _j3mr1v42"
 };
 
 /**
@@ -137,7 +129,7 @@ const TopNavStartInnerFHS = /*#__PURE__*/forwardRef(function TopNavStartInnerFHS
     }
   }, [sideNavState]);
   return /*#__PURE__*/React.createElement("div", {
-    className: ax([wrapperStyles.root, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded, isExpandedOnDesktop && fg('platform_dst_nav4_fhs_feedback_1') && wrapperStyles.fullHeightSidebarExpandedWithFeedback, !isFirstRenderRef.current && isExpandedOnDesktop && wrapperStyles.fullHeightSidebarBorderTransition, isExpandedOnDesktop && !fg('platform_dst_nav4_fhs_feedback_1') && wrapperStyles.fullHeightSidebarExpandedScrollTimeline])
+    className: ax([wrapperStyles.root, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded, !isFirstRenderRef.current && isExpandedOnDesktop && wrapperStyles.fullHeightSidebarBorderTransition])
   }, /*#__PURE__*/React.createElement("div", {
     ref: ref,
     "data-testid": testId,

package/dist/esm/entry-points/layout/side-nav.js

@@ -1,6 +1,6 @@
 export { SideNav } from '../../ui/page-layout/side-nav/side-nav';
 export { SideNavHeader } from '../../ui/page-layout/side-nav/side-nav-header';
-export { SideNavContent } from '../../ui/page-layout/side-nav/side-nav-content';
+export { SideNavBody } from '../../ui/page-layout/side-nav/side-nav-content';
 export { SideNavFooter } from '../../ui/page-layout/side-nav/side-nav-footer';
 export { SideNavToggleButton } from '../../ui/page-layout/side-nav/toggle-button';
 export { useToggleSideNav } from '../../ui/page-layout/side-nav/use-toggle-side-nav';

package/dist/esm/index.js

@@ -12,7 +12,7 @@ export { MainStickyHeader } from './ui/page-layout/main/main-sticky-header';
 export { SideNavToggleButton } from './ui/page-layout/side-nav/toggle-button';
 export { useToggleSideNav } from './ui/page-layout/side-nav/use-toggle-side-nav';
 export { SideNavHeader } from './ui/page-layout/side-nav/side-nav-header';
-export { SideNavContent } from './ui/page-layout/side-nav/side-nav-content';
+export { SideNavBody } from './ui/page-layout/side-nav/side-nav-content';
 export { SideNavFooter } from './ui/page-layout/side-nav/side-nav-footer';
 export { PanelSplitter } from './ui/page-layout/panel-splitter/panel-splitter';
 export { PanelSplitterProvider } from './ui/page-layout/panel-splitter/provider';

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

@@ -70,10 +70,4 @@ export var openLayerObserverSideNavNamespace = 'side-nav';
 // namespaces.
 export var openLayerObserverTopNavStartNamespace = 'top-nav-start';
 export var openLayerObserverTopNavMiddleNamespace = 'top-nav-middle';
-export var openLayerObserverTopNavEndNamespace = 'top-nav-end';
-
-/**
- * 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 var sideNavContentScrollTimelineVar = '--sNcst';
+export var openLayerObserverTopNavEndNamespace = 'top-nav-end';

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

@@ -1,4 +1,3 @@
-._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/esm/ui/page-layout/root.js

@@ -6,8 +6,6 @@ import { OpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-ob
 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';
@@ -18,7 +16,6 @@ import { SideNavVisibilityProvider } from './side-nav/visibility-provider';
 export var gridRootId = 'unsafe-design-system-page-layout-root';
 var styles = {
   root: "_1e0c11p5 _1tke1kxc _1lmcq9em _yv0ei47z _2z0516ab _1ciragmp _12fkuz0r _12qzrxre _1rqt70if _xkmgbaui _jbc7rxre _tyve1jg8",
-  sideNavScrollTimeline: "_10iwgc9s",
   ribbon: "_12fk1aio _12qzrxre _1rqteala _xkmgks3h _jbc7rxre _tyve1nco"
 };
 
@@ -38,7 +35,6 @@ export function Root(_ref) {
     _ref$isSideNavShortcu = _ref.isSideNavShortcutEnabled,
     isSideNavShortcutEnabled = _ref$isSideNavShortcu === void 0 ? false : _ref$isSideNavShortcu;
   var ref = useRef(null);
-  var isFhsEnabled = useIsFhsEnabled();
   useEffect(function () {
     if (process.env.NODE_ENV !== 'production') {
       var IGNORED_ELEMENTS = ['SCRIPT', 'STYLE'];
@@ -63,7 +59,7 @@ export function Root(_ref) {
     testId: testId
   }, /*#__PURE__*/React.createElement("div", {
     ref: ref,
-    className: ax([styles.root, isFhsEnabled && !fg('platform_dst_nav4_fhs_feedback_1') && styles.sideNavScrollTimeline, fg('platform_dst_nav4_ribbon_slot') && styles.ribbon, xcss]),
+    className: ax([styles.root, fg('platform_dst_nav4_ribbon_slot') && styles.ribbon, xcss]),
     id: gridRootId,
     "data-testid": testId
   }, children)))))))));

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

@@ -6,5 +6,4 @@
 ._85i5utpp{padding-block-end:var(--ds-space-150,9pt)}
 ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
 ._i0dlf1ug{flex-basis:0%}
-._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
-@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)}}}}
+._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}

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

@@ -3,10 +3,7 @@ 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.
@@ -14,27 +11,13 @@ import { useSideNavVisibility } from './use-side-nav-visibility';
  * It will grow to take up the available space in the side nav — this is used to push the footer to the
  * bottom of the side nav.
  */
-export var SideNavContent = /*#__PURE__*/forwardRef(_SideNavContent);
+export var SideNavBody = /*#__PURE__*/forwardRef(_SideNavContent);
 
 // Placing this const below the function breaks Compiled!
 var styles = {
   scrollContainer: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo1wug _18m91wug",
   paddingContainer: "_1q51utpp _y4tiutpp _85i5utpp _bozgutpp"
 };
-
-/**
- * Using CSS scroll-driven animations to apply a scrolled indicator border.
- *
- * This approach is better for SSR, as some apps like Confluence will apply the
- * initial scroll position of the side nav content using JS before hydration.
- *
- * If we applied the border through React state it would only appear after hydration,
- * whereas this CSS approach should show even before hydration.
- */
-var scrolledBorder = null;
-var fullHeightSidebarStyles = {
-  scrollContainer: "_1sfqgc9s _1q1x1ule _8pm2gc9s _1gd94n8p"
-};
 function _SideNavContent(_ref, forwardedRef) {
   var children = _ref.children,
     testId = _ref.testId;
@@ -43,12 +26,10 @@ 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 && isExpandedOnDesktop && !fg('platform_dst_nav4_fhs_feedback_1') && fullHeightSidebarStyles.scrollContainer])
+    className: ax([styles.scrollContainer])
   }, /*#__PURE__*/React.createElement("div", {
     className: ax([styles.paddingContainer])
   }, children));

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

@@ -2,7 +2,6 @@
 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"
 };
@@ -13,22 +12,6 @@ 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_nav4_fhs_feedback_1') ? undefined : 'true',
     className: ax([styles.root])
   }, children);
 };

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

@@ -778,7 +778,7 @@ function SideNavInternal(_ref) {
 /**
  * The side navigation layout area. It will show on the left (inline start) of the screen.
  *
- * Use the side nav area components (`SideNavHeader`, `SideNavContent`, `SideNavFooter`) to position
+ * Use the side nav area components (`SideNavHeader`, `SideNavBody`, `SideNavFooter`) to position
  * content within areas of the side nav.
  *
  * You can optionally render a `PanelSplitter` as a child to make the side navigation slot resizable.

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

@@ -12,6 +12,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){._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%}._exxmutpp{padding-inline-end:var(--ds-space-150,9pt)}._glte1ris{width:max-content}._15rip2n4{min-width:330px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmpxbi{padding-inline-end:var(--ds-space-200,1pc)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._m7c3kb7n:after{opacity:1}}
-@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}}
-@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)}}html:not(:has([data-private-side-nav-header])) ._5gdsgc9s{animation-timeline:--sNcst}html:not(:has([data-private-side-nav-header])) ._53fr1ybg{animation-name:khj1qz3}html:not(:has([data-private-side-nav-header])) ._bt1c1hrf{animation-fill-mode:both}}
+@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%}._glte1ris{width:max-content}._15rip2n4{min-width:330px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmutpp{padding-inline-end:var(--ds-space-150,9pt)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._m7c3kb7n:after{opacity:1}}
+@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

@@ -9,7 +9,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 { openLayerObserverTopNavStartNamespace, sideNavContentScrollTimelineVar } from '../constants';
+import { openLayerObserverTopNavStartNamespace } from '../constants';
 import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
 import { SideNavVisibilityState } from '../side-nav/visibility-context';
 
@@ -36,12 +36,6 @@ 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.
@@ -50,10 +44,8 @@ var scrolledShadow = null;
  */
 var wrapperStyles = {
   root: "_vchhusvi _bozgutpp _4t3i1osq _13wnh2mm _1l3vb3bt _juxdstnw _1vinidpf _1719idpf _e6znidpf _1kyhe4h9 _4cwynqa1 _435s1l7x _m7c3idpf",
-  fullHeightSidebarExpanded: "_glte93mn _exxmpxbi _4ap3vuon _m7c3kb7n",
-  fullHeightSidebarExpandedScrollTimeline: "_5gdsgc9s _53fr1ybg _bt1c1hrf",
-  fullHeightSidebarBorderTransition: "_n8qabrmi _wc72fnf5 _j3mr1v42",
-  fullHeightSidebarExpandedWithFeedback: "_exxmutpp"
+  fullHeightSidebarExpanded: "_glte93mn _exxmutpp _4ap3vuon _m7c3kb7n",
+  fullHeightSidebarBorderTransition: "_n8qabrmi _wc72fnf5 _j3mr1v42"
 };
 
 /**
@@ -135,7 +127,7 @@ var TopNavStartInnerFHS = /*#__PURE__*/forwardRef(function TopNavStartInnerFHS(_
     }
   }, [sideNavState]);
   return /*#__PURE__*/React.createElement("div", {
-    className: ax([wrapperStyles.root, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded, isExpandedOnDesktop && fg('platform_dst_nav4_fhs_feedback_1') && wrapperStyles.fullHeightSidebarExpandedWithFeedback, !isFirstRenderRef.current && isExpandedOnDesktop && wrapperStyles.fullHeightSidebarBorderTransition, isExpandedOnDesktop && !fg('platform_dst_nav4_fhs_feedback_1') && wrapperStyles.fullHeightSidebarExpandedScrollTimeline])
+    className: ax([wrapperStyles.root, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded, !isFirstRenderRef.current && isExpandedOnDesktop && wrapperStyles.fullHeightSidebarBorderTransition])
   }, /*#__PURE__*/React.createElement("div", {
     ref: ref,
     "data-testid": testId,

package/dist/types/entry-points/layout/side-nav.d.ts

@@ -1,6 +1,6 @@
 export { SideNav } from '../../ui/page-layout/side-nav/side-nav';
 export { SideNavHeader } from '../../ui/page-layout/side-nav/side-nav-header';
-export { SideNavContent } from '../../ui/page-layout/side-nav/side-nav-content';
+export { SideNavBody } from '../../ui/page-layout/side-nav/side-nav-content';
 export { SideNavFooter } from '../../ui/page-layout/side-nav/side-nav-footer';
 export { SideNavToggleButton } from '../../ui/page-layout/side-nav/toggle-button';
 export { useToggleSideNav } from '../../ui/page-layout/side-nav/use-toggle-side-nav';

package/dist/types/index.d.ts

@@ -12,7 +12,7 @@ export { MainStickyHeader } from './ui/page-layout/main/main-sticky-header';
 export { SideNavToggleButton, type SideNavVisibilityChangeAnalyticsAttributes, } from './ui/page-layout/side-nav/toggle-button';
 export { useToggleSideNav } from './ui/page-layout/side-nav/use-toggle-side-nav';
 export { SideNavHeader } from './ui/page-layout/side-nav/side-nav-header';
-export { SideNavContent } from './ui/page-layout/side-nav/side-nav-content';
+export { SideNavBody } from './ui/page-layout/side-nav/side-nav-content';
 export { SideNavFooter } from './ui/page-layout/side-nav/side-nav-footer';
 export { PanelSplitter } from './ui/page-layout/panel-splitter/panel-splitter';
 export { PanelSplitterProvider } from './ui/page-layout/panel-splitter/provider';

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

@@ -48,8 +48,3 @@ export declare const openLayerObserverSideNavNamespace = "side-nav";
 export declare const openLayerObserverTopNavStartNamespace = "top-nav-start";
 export declare const openLayerObserverTopNavMiddleNamespace = "top-nav-middle";
 export declare const openLayerObserverTopNavEndNamespace = "top-nav-end";
-/**
- * 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/side-nav/side-nav-content.d.ts

@@ -9,7 +9,7 @@ import React, { type ReactNode } from 'react';
  * It will grow to take up the available space in the side nav — this is used to push the footer to the
  * bottom of the side nav.
  */
-export declare const SideNavContent: React.ForwardRefExoticComponent<React.PropsWithoutRef<SideNavContentProps> & React.RefAttributes<HTMLDivElement>>;
+export declare const SideNavBody: React.ForwardRefExoticComponent<React.PropsWithoutRef<SideNavContentProps> & React.RefAttributes<HTMLDivElement>>;
 type SideNavContentProps = {
     /**
      * The content of the layout area.

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

@@ -9,7 +9,7 @@ import { type VisibilityCallback } from './use-side-nav-visibility-callbacks';
 type SideNavProps = CommonSlotProps & {
     /**
      * The content of the layout area.
-     * Should include side nav layout areas as required: `SideNavHeader`, `SideNavContent`, `SideNavFooter`.
+     * Should include side nav layout areas as required: `SideNavHeader`, `SideNavBody`, `SideNavFooter`.
      * Within these, you can use side nav menu items.
      */
     children: React.ReactNode;
@@ -82,7 +82,7 @@ export declare const onPeekStartDelayMs = 500;
 /**
  * The side navigation layout area. It will show on the left (inline start) of the screen.
  *
- * Use the side nav area components (`SideNavHeader`, `SideNavContent`, `SideNavFooter`) to position
+ * Use the side nav area components (`SideNavHeader`, `SideNavBody`, `SideNavFooter`) to position
  * content within areas of the side nav.
  *
  * You can optionally render a `PanelSplitter` as a child to make the side navigation slot resizable.

package/dist/types-ts4.5/entry-points/layout/side-nav.d.ts

@@ -1,6 +1,6 @@
 export { SideNav } from '../../ui/page-layout/side-nav/side-nav';
 export { SideNavHeader } from '../../ui/page-layout/side-nav/side-nav-header';
-export { SideNavContent } from '../../ui/page-layout/side-nav/side-nav-content';
+export { SideNavBody } from '../../ui/page-layout/side-nav/side-nav-content';
 export { SideNavFooter } from '../../ui/page-layout/side-nav/side-nav-footer';
 export { SideNavToggleButton } from '../../ui/page-layout/side-nav/toggle-button';
 export { useToggleSideNav } from '../../ui/page-layout/side-nav/use-toggle-side-nav';

package/dist/types-ts4.5/index.d.ts

@@ -12,7 +12,7 @@ export { MainStickyHeader } from './ui/page-layout/main/main-sticky-header';
 export { SideNavToggleButton, type SideNavVisibilityChangeAnalyticsAttributes, } from './ui/page-layout/side-nav/toggle-button';
 export { useToggleSideNav } from './ui/page-layout/side-nav/use-toggle-side-nav';
 export { SideNavHeader } from './ui/page-layout/side-nav/side-nav-header';
-export { SideNavContent } from './ui/page-layout/side-nav/side-nav-content';
+export { SideNavBody } from './ui/page-layout/side-nav/side-nav-content';
 export { SideNavFooter } from './ui/page-layout/side-nav/side-nav-footer';
 export { PanelSplitter } from './ui/page-layout/panel-splitter/panel-splitter';
 export { PanelSplitterProvider } from './ui/page-layout/panel-splitter/provider';

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

@@ -48,8 +48,3 @@ export declare const openLayerObserverSideNavNamespace = "side-nav";
 export declare const openLayerObserverTopNavStartNamespace = "top-nav-start";
 export declare const openLayerObserverTopNavMiddleNamespace = "top-nav-middle";
 export declare const openLayerObserverTopNavEndNamespace = "top-nav-end";
-/**
- * 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/side-nav/side-nav-content.d.ts

@@ -9,7 +9,7 @@ import React, { type ReactNode } from 'react';
  * It will grow to take up the available space in the side nav — this is used to push the footer to the
  * bottom of the side nav.
  */
-export declare const SideNavContent: React.ForwardRefExoticComponent<React.PropsWithoutRef<SideNavContentProps> & React.RefAttributes<HTMLDivElement>>;
+export declare const SideNavBody: React.ForwardRefExoticComponent<React.PropsWithoutRef<SideNavContentProps> & React.RefAttributes<HTMLDivElement>>;
 type SideNavContentProps = {
     /**
      * The content of the layout area.

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

@@ -9,7 +9,7 @@ import { type VisibilityCallback } from './use-side-nav-visibility-callbacks';
 type SideNavProps = CommonSlotProps & {
     /**
      * The content of the layout area.
-     * Should include side nav layout areas as required: `SideNavHeader`, `SideNavContent`, `SideNavFooter`.
+     * Should include side nav layout areas as required: `SideNavHeader`, `SideNavBody`, `SideNavFooter`.
      * Within these, you can use side nav menu items.
      */
     children: React.ReactNode;
@@ -82,7 +82,7 @@ export declare const onPeekStartDelayMs = 500;
 /**
  * The side navigation layout area. It will show on the left (inline start) of the screen.
  *
- * Use the side nav area components (`SideNavHeader`, `SideNavContent`, `SideNavFooter`) to position
+ * Use the side nav area components (`SideNavHeader`, `SideNavBody`, `SideNavFooter`) to position
  * content within areas of the side nav.
  *
  * You can optionally render a `PanelSplitter` as a child to make the side navigation slot resizable.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "6.4.0",
+	"version": "7.1.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -63,7 +63,7 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/analytics-next": "^11.1.0",
+		"@atlaskit/analytics-next": "^11.2.0",
 		"@atlaskit/avatar": "^25.10.0",
 		"@atlaskit/button": "^23.10.0",
 		"@atlaskit/css": "^0.19.0",
@@ -75,8 +75,8 @@
 		"@atlaskit/popup": "^4.14.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
 		"@atlaskit/primitives": "^18.0.0",
-		"@atlaskit/side-nav-items": "^1.11.0",
-		"@atlaskit/tokens": "^11.1.0",
+		"@atlaskit/side-nav-items": "^1.12.0",
+		"@atlaskit/tokens": "^11.2.0",
 		"@atlaskit/tooltip": "^21.0.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
@@ -97,13 +97,13 @@
 		"@atlaskit/badge": "^18.4.0",
 		"@atlaskit/banner": "^14.0.0",
 		"@atlaskit/breadcrumbs": "^15.3.0",
-		"@atlaskit/dropdown-menu": "^16.7.0",
-		"@atlaskit/form": "^15.4.0",
+		"@atlaskit/dropdown-menu": "^16.8.0",
+		"@atlaskit/form": "^15.5.0",
 		"@atlaskit/heading": "^5.3.0",
 		"@atlaskit/link": "^3.3.0",
 		"@atlaskit/lozenge": "^13.5.0",
 		"@atlaskit/menu": "^8.4.0",
-		"@atlaskit/modal-dialog": "^14.11.0",
+		"@atlaskit/modal-dialog": "^14.12.0",
 		"@atlaskit/onboarding": "^14.5.0",
 		"@atlaskit/page-header": "^12.1.0",
 		"@atlaskit/page-layout": "^4.2.0",
@@ -147,9 +147,6 @@
 		"platform_dst_nav4_ribbon_slot": {
 			"type": "boolean"
 		},
-		"platform_dst_nav4_fhs_feedback_1": {
-			"type": "boolean"
-		},
 		"platform_dst_nav4_top_nav_increase_height": {
 			"type": "boolean"
 		},