@atlaskit/navigation-system 11.2.2 → 11.3.0

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

@@ -10,15 +10,8 @@ import { useLayoutId } from './use-layout-id';
 var localSlotLayersStatic = {
   chatPanelOverlay: 5,
   ribbon: 4,
-  // The side nav panel splitter is layered above the top nav when FHS is enabled.
-  // It has the same z-index value, but is rendered after the top nav in the DOM so is stacked above.
-  sideNavPanelSplitterFHS: 4,
   topBar: 4,
   banner: 4,
-  // When FHS is enabled, the side nav is layered below the top nav,
-  // but above the panel
-  bannerFHS: 3,
-  topNavFHS: 3,
   sideNav: 2,
   panelSmallViewports: 1
 };

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

@@ -1,10 +1,7 @@
 /* side-nav-content.tsx generated by @compiled/babel-plugin v3.0.2 */
 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 { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
-
+import React, { forwardRef } from 'react';
 /**
  * The main content of the side nav, filling up the middle section. It acts as a scroll container.
  *
@@ -21,13 +18,8 @@ var styles = {
 function _SideNavContent(_ref, forwardedRef) {
   var children = _ref.children,
     testId = _ref.testId;
-  var isFhsEnabled = useIsFhsEnabled();
-  var internalRef = useRef(null);
-  var mergedRef = useMemo(function () {
-    return mergeRefs([internalRef, forwardedRef]);
-  }, [forwardedRef]);
   return /*#__PURE__*/React.createElement("div", {
-    ref: isFhsEnabled ? mergedRef : forwardedRef,
+    ref: forwardedRef,
     "data-testid": testId,
     className: ax([styles.scrollContainer])
   }, /*#__PURE__*/React.createElement("div", {

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

@@ -1,6 +1,5 @@
 ._191wglyw{border-inline-start:none}
 ._t51zglyw{border-inline-end:none}._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}
-._15yekb7n{--animation-direction:1}
 ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._1bah1yb4{justify-content:space-between}
 ._1bsb1ego{width:min(90%,20pc)}
@@ -9,24 +8,18 @@
 ._1e0cglyw{display:none}
 ._1p2s1vfh{--exit-animation:var(--ds-sidenav-exit-left,200ms cubic-bezier(0,0.4,0,1) SlideOut100PercentLeft)}
 ._1pbycs5v{z-index:2}
-._1pbyegat{z-index:4}
 ._2lx21bp4{flex-direction:column}
 ._4t3i1osq{height:100%}
 ._4t3ieqxy{height:calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
 ._cjprp6j8{--enter-animation:var(--ds-sidenav-enter-left,250ms cubic-bezier(0,0.4,0,1) SlideIn100PercentLeft)}
 ._kqsw1if8{position:sticky}
-._kqsw1n9t{position:fixed}
-._t9ectl5p{transform:translateX(calc(var(--n_snvRsz, var(--n_snvW, 0px))))}
-._u7coidpf{inset-block-end:0}
 ._vchhusvi{box-sizing:border-box}
 [dir=rtl] ._1jq41dy6{--enter-animation:var(--ds-sidenav-enter-right,250ms cubic-bezier(0,0.4,0,1) SlideIn100PercentRight)}
 [dir=rtl] ._2qe0jwwr{--exit-animation:var(--ds-sidenav-exit-right,200ms cubic-bezier(0,0.4,0,1) SlideOut100PercentRight)}
-[dir=rtl] ._65m41mrw{--animation-direction:-1}
-@media (prefers-reduced-motion:no-preference){._10t81t0s{transition-property:display}._1vrh1a5r{transition-behavior:allow-discrete}._xrrpi9qs{transition-duration:var(--ds-duration-medium,.2s)}._10t88iot{transition-property:transform,display}._xrrpfnf5{transition-duration:.2s}._1lh81gzg{grid-area:main}._1xq51mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._k1affm5y{animation:var(--exit-animation)}@starting-style{._1nu51p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1xq51ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._k1af10ed{animation:var(--enter-animation)}}
+@media (prefers-reduced-motion:no-preference){._10t81t0s{transition-property:display}._1vrh1a5r{transition-behavior:allow-discrete}._xrrpi9qs{transition-duration:var(--ds-duration-medium,.2s)}._1lh81gzg{grid-area:main}._k1affm5y{animation:var(--exit-animation)}._k1af10ed{animation:var(--enter-animation)}}
 @media (min-width:48rem){._14b5hc79{width:var(--n_snvRsz,var(--n_sNvw))}}
-@media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._p0az1elq{transform:translateX(calc(var(--n_snvRsz, var(--n_snvW, 0px)) - var(--ds-border-width, 1px)))}._cpcf1gzg._cpcf1gzg{grid-area:main}._6kttglyw._6kttglyw{border-inline-end:none}._w8v11bhr._w8v11bhr{background-color:var(--ds-surface-overlay,#fff)}._1jug130s._1jug130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}._dm2518uv{display:initial}._dm25glyw{display:none}._qiln1gzg{grid-area:main}._p5clglyw{border-inline-end:none}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}._qilnk0mc{grid-area:side-nav}._p5clia51{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
-@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._17ly8iot{transition-property:transform,display}._177m1a5r{transition-behavior:allow-discrete}._1sg81gzg{grid-area:main}._n2infm5y{animation:var(--exit-animation)}._17ly1wzp{transition-property:grid-area,display}._hjoi1wsm{transition-duration:var(--ds-duration-instant,0ms),var(--ds-duration-medium,.2s)}._1wxo1cio{transition-delay:19ms,var(--ds-duration-instant,0ms)}._vgub1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._hh1u1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}@starting-style{._1xpz1gzg{grid-area:main}}._1sg8k0mc{grid-area:side-nav}._n2in10ed{animation:var(--enter-animation)}._17ly1q8v{transition-property:grid-area}._hjoi147i{transition-duration:var(--ds-duration-instant,0ms)}._1wxo4so3{transition-delay:24ms}@starting-style{._s2eg1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoifnf5{transition-duration:.2s}._hjoi1mzy{transition-duration:var(--ds-duration-long,.25s)}._hjoii9qs{transition-duration:var(--ds-duration-medium,.2s)}}
-@media (prefers-reduced-motion:no-preference) and (not (min-width:64rem)){._aadi1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}
+@media (min-width:64rem){._cpcf1gzg._cpcf1gzg{grid-area:main}._6kttglyw._6kttglyw{border-inline-end:none}._w8v11bhr._w8v11bhr{background-color:var(--ds-surface-overlay,#fff)}._1jug130s._1jug130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}._dm2518uv{display:initial}._dm25glyw{display:none}._qiln1gzg{grid-area:main}._p5clglyw{border-inline-end:none}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}._qilnk0mc{grid-area:side-nav}._p5clia51{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
+@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._1sg81gzg{grid-area:main}._n2infm5y{animation:var(--exit-animation)}._17ly1wzp{transition-property:grid-area,display}._hjoi1wsm{transition-duration:var(--ds-duration-instant,0ms),var(--ds-duration-medium,.2s)}._1wxo1cio{transition-delay:19ms,var(--ds-duration-instant,0ms)}@starting-style{._1xpz1gzg{grid-area:main}}._1sg8k0mc{grid-area:side-nav}._n2in10ed{animation:var(--enter-animation)}._17ly1q8v{transition-property:grid-area}._hjoi147i{transition-duration:var(--ds-duration-instant,0ms)}._1wxo4so3{transition-delay:24ms}}
 @media not (min-width:64rem){._89fi1b6c{grid-area:main/aside/aside/aside}}
 @supports not (-moz-appearance:none){@media (prefers-reduced-motion:no-preference){._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}._1uwsjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference){@starting-style{._oyeijq3t{transform:translateX(-100%)}}._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}}@media (prefers-reduced-motion:no-preference){._4xci10ed{animation:var(--enter-animation)}._1tpv1mzy{transition-duration:var(--ds-duration-long,.25s)}._sylc1a5r{transition-behavior:allow-discrete}}@media (prefers-reduced-motion:no-preference){._4xcifm5y{animation:var(--exit-animation)}._1tpvi9qs{transition-duration:var(--ds-duration-medium,.2s)}._sylc1a5r{transition-behavior:allow-discrete}}}

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

@@ -20,8 +20,7 @@ import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/el
 
 import { useSkipLinkInternal } from '../../../context/skip-links/use-skip-link-internal';
 import { TopNavStartElement } from '../../../context/top-nav-start/top-nav-start-element';
-import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
-import { UNSAFE_sideNavLayoutVar, mainMinimumWidthVar, openLayerObserverSideNavNamespace, openLayerObserverTopNavStartNamespace, sideNavLiveWidthVar, sideNavPanelSplitterId, sideNavVar } from '../constants';
+import { UNSAFE_sideNavLayoutVar, mainMinimumWidthVar, openLayerObserverSideNavNamespace, sideNavLiveWidthVar, sideNavPanelSplitterId, sideNavVar } from '../constants';
 import { DangerouslyHoistCssVarToDocumentRoot } from '../dangerously-hoist-css-var-to-document-root';
 import { DangerouslyHoistSlotSizes } from '../hoist-slot-sizes-context';
 import { convertResizeBoundToPixels } from '../panel-splitter/convert-resize-bound-to-pixels';
@@ -44,9 +43,6 @@ import { useSideNavVisibility } from './use-side-nav-visibility';
 import { useSideNavVisibilityCallbacks } from './use-side-nav-visibility-callbacks';
 import { useToggleSideNav } from './use-toggle-side-nav';
 var panelSplitterResizingVar = '--n_snvRsz';
-// Used to share the side nav width with the panel splitter, which is rendered outside the side nav element
-// but positioned to stay at its right edge.
-var sideNavClampedWidthVar = '--n_snvW';
 var fallbackMinWidth = '240px';
 function getPixelCustomProperty(element, propertyName, fallback) {
   var raw = getComputedStyle(element).getPropertyValue(propertyName).trim();
@@ -60,28 +56,16 @@ function getPixelCustomProperty(element, propertyName, fallback) {
  * Avoiding nesting the `@supports` at-rule inside of `@media` means Compiled can remove duplicate styles from the generated CSS.
  */
 var isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
-var panelSplitterPortalTargetStyles = {
-  root: "_kqsw1n9t _1pbyegat _u7coidpf _t9ectl5p _4t3ieqxy _165t56xv _p0az1elq"
-};
 var styles = {
   root: "_191wglyw _t51zglyw _bfhk1bhr _16qs130s _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _p5clia51 _4ap3vuon _scbpglyw _89fi1b6c",
   chatPanelSizing: "_1bsbhc79",
   managedOverlay: "_cpcf1gzg _6kttglyw _w8v11bhr _1jug130s",
   flyoutOpen: "_qiln1gzg _p5clglyw _4ap31bhr _scbp130s _139f8iot _1tpvfnf5 _sylc1a5r _oyeijq3t",
   flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _139f8iot _1tpvfnf5 _sylc1a5r _1uwsjq3t",
-  animationRTLSupport: "_15yekb7n _65m41mrw",
-  flyoutBaseStylesFullHeightSidebar: "_qiln1gzg _p5clglyw _4ap31bhr _scbp130s _17ly8iot _177m1a5r",
-  flyoutOpenFullHeightSidebar: "_hjoifnf5 _vgub1ku9 _s2eg1p9u",
-  flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _hjoifnf5 _vgub1mm8 _hh1u1p9u",
   flexContainer: "_4t3i1osq _1e0c1txw _2lx21bp4 _1bah1yb4",
   hiddenMobileAndDesktop: "_1e0cglyw",
   hiddenMobileOnly: "_1e0cglyw _dm2518uv",
-  hiddenDesktopOnly: "_dm25glyw",
-  animationBaseStyles: "_10t88iot _1vrh1a5r _xrrpfnf5",
-  expandAnimationMobile: "_1xq51ku9 _1nu51p9u",
-  collapseAnimationMobile: "_1lh81gzg _1xq51mm8 _aadi1p9u",
-  expandAnimationDesktop: "_1sg8k0mc _vgub1ku9 _s2eg1p9u",
-  collapseAnimationDesktop: "_1sg81gzg _vgub1mm8 _hh1u1p9u"
+  hiddenDesktopOnly: "_dm25glyw"
 };
 
 /**
@@ -103,8 +87,6 @@ var motionUpliftStyles = {
   collapseAnimationMobile: "_1lh81gzg _k1affm5y",
   flyoutOpen: "_qiln1gzg _p5clglyw _4ap31bhr _scbp130s _4xci10ed _1tpv1mzy _sylc1a5r",
   flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _4xcifm5y _1tpvi9qs _sylc1a5r",
-  flyoutOpenFullHeightSidebar: "_n2in10ed _hjoi1mzy",
-  flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _n2infm5y _hjoii9qs",
   expandAnimationDesktop: "_1sg8k0mc _n2in10ed _1xpz1gzg _17ly1q8v _hjoi147i _1wxo4so3",
   collapseAnimationDesktop: "_1sg81gzg _n2infm5y _17ly1wzp _hjoi1wsm _1wxo1cio"
 };
@@ -136,7 +118,6 @@ function SideNavInternal(_ref) {
     providedId = _ref.id,
     canToggleWithShortcut = _ref.canToggleWithShortcut;
   var isChatPanelLayoutEnabled = fg('platform-dst-chat-panel-layout');
-  var isFhsEnabled = useIsFhsEnabled();
   var id = useLayoutId({
     providedId: providedId
   });
@@ -277,7 +258,6 @@ function SideNavInternal(_ref) {
   var clampedWidth = !isChatPanelLayoutEnabled ? "clamp(240px, ".concat(inlineWidth, "px, 50vw)") : managedSizing ? "".concat(renderedWidth, "px") : "clamp(".concat(minWidth, ", ").concat(renderedWidth, "px, ").concat(configuredMaxWidth, ")");
   var dangerouslyHoistSlotSizes = useContext(DangerouslyHoistSlotSizes);
   var navRef = useRef(null);
-  var panelSplitterPortalTargetRef = useRef(null);
   var getResizeBounds = useCallback(function () {
     if (!isChatPanelLayoutEnabled) {
       return {
@@ -382,13 +362,6 @@ function SideNavInternal(_ref) {
       }
     }
     function open() {
-      // Prevent the flyout from being opened if there are any open layers in the top nav start
-      if (openLayerObserver && openLayerObserver.getCount({
-        namespace: openLayerObserverTopNavStartNamespace,
-        type: 'popup'
-      }) > 0) {
-        return;
-      }
       var prevFlyoutState = flyoutStateRef.current;
       tryAbortPendingClose();
       flyoutStateRef.current = {
@@ -879,7 +852,7 @@ function SideNavInternal(_ref) {
   var isMotionUpliftEnabled = fg('platform-dst-motion-uplift-sidenav');
 
   // This is only used for the regular expand and collapse animations, not the flyout animations.
-  var shouldShowSidebarToggleAnimation = (isMotionUpliftEnabled || isFhsEnabled) &&
+  var shouldShowSidebarToggleAnimation = isMotionUpliftEnabled &&
   // We do not apply the animation styles on the initial render, as the `@starting-style` rule will cause the sidebar to
   // slide in initially.
   hasExpandedStateChanged &&
@@ -910,7 +883,7 @@ function SideNavInternal(_ref) {
     style: _defineProperty({}, sideNavVar, clampedWidth),
     ref: mergedRef,
     "data-testid": testId,
-    className: ax([styles.root, isChatPanelLayoutEnabled && styles.chatPanelSizing, isChatPanelLayoutEnabled && (managedSizing === null || managedSizing === void 0 ? void 0 : managedSizing.mode) === 'overlay' && styles.managedOverlay, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, isMotionUpliftEnabled && motionUpliftStyles.animationRTLSupport, !isMotionUpliftEnabled && isFhsEnabled && styles.animationRTLSupport, shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.animationBaseStyles, shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.expandAnimationMobile, isExpandedOnMobile && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.collapseAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.expandAnimationDesktop, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.collapseAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutAnimateClosed, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutAnimateClosed, ((sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close') && !isFirefox && isFhsEnabled && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutAnimateClosedFullHeightSidebar])
+    className: ax([styles.root, isChatPanelLayoutEnabled && styles.chatPanelSizing, isChatPanelLayoutEnabled && (managedSizing === null || managedSizing === void 0 ? void 0 : managedSizing.mode) === 'overlay' && styles.managedOverlay, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, isMotionUpliftEnabled && motionUpliftStyles.animationRTLSupport, shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && isMotionUpliftEnabled && motionUpliftStyles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isMotionUpliftEnabled && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && isMotionUpliftEnabled && motionUpliftStyles.flyoutAnimateClosed, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isMotionUpliftEnabled && styles.flyoutAnimateClosed])
   }), /*#__PURE__*/React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
     variableName: sideNavLiveWidthVar,
     value: "0px",
@@ -929,7 +902,6 @@ function SideNavInternal(_ref) {
   , /*#__PURE__*/React.createElement(PanelSplitterProvider, {
     panelId: sideNavPanelSplitterId,
     panelRef: navRef,
-    portalRef: isFhsEnabled ? panelSplitterPortalTargetRef : undefined,
     panelWidth: renderedWidth,
     onCompleteResize: onCompleteResize,
     onResizeStartInternal: isChatPanelLayoutEnabled && managedSizing ? onResizeStartInternal : undefined,
@@ -942,12 +914,7 @@ function SideNavInternal(_ref) {
     shortcut: isShortcutEnabled ? sideNavToggleTooltipKeyboardShortcut : undefined
   }, /*#__PURE__*/React.createElement("div", {
     className: ax([styles.flexContainer])
-  }, children))), isFhsEnabled && /*#__PURE__*/React.createElement("div", {
-    ref: panelSplitterPortalTargetRef,
-    "data-layout-slot": true,
-    style: _defineProperty({}, sideNavClampedWidthVar, clampedWidth),
-    className: ax([panelSplitterPortalTargetStyles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop])
-  }));
+  }, children))));
 }
 
 /**
@@ -958,23 +925,23 @@ function SideNavInternal(_ref) {
  *
  * You can optionally render a `PanelSplitter` as a child to make the side navigation slot resizable.
  */
-export function SideNav(_ref9) {
-  var children = _ref9.children,
-    defaultCollapsed = _ref9.defaultCollapsed,
-    _ref9$defaultWidth = _ref9.defaultWidth,
-    defaultWidth = _ref9$defaultWidth === void 0 ? 320 : _ref9$defaultWidth,
-    minWidth = _ref9.minWidth,
-    maxWidth = _ref9.maxWidth,
-    testId = _ref9.testId,
-    label = _ref9.label,
-    _ref9$skipLinkLabel = _ref9.skipLinkLabel,
-    skipLinkLabel = _ref9$skipLinkLabel === void 0 ? label : _ref9$skipLinkLabel,
-    onExpand = _ref9.onExpand,
-    onCollapse = _ref9.onCollapse,
-    onPeekStart = _ref9.onPeekStart,
-    onPeekEnd = _ref9.onPeekEnd,
-    canToggleWithShortcut = _ref9.canToggleWithShortcut,
-    id = _ref9.id;
+export function SideNav(_ref8) {
+  var children = _ref8.children,
+    defaultCollapsed = _ref8.defaultCollapsed,
+    _ref8$defaultWidth = _ref8.defaultWidth,
+    defaultWidth = _ref8$defaultWidth === void 0 ? 320 : _ref8$defaultWidth,
+    minWidth = _ref8.minWidth,
+    maxWidth = _ref8.maxWidth,
+    testId = _ref8.testId,
+    label = _ref8.label,
+    _ref8$skipLinkLabel = _ref8.skipLinkLabel,
+    skipLinkLabel = _ref8$skipLinkLabel === void 0 ? label : _ref8$skipLinkLabel,
+    onExpand = _ref8.onExpand,
+    onCollapse = _ref8.onCollapse,
+    onPeekStart = _ref8.onPeekStart,
+    onPeekEnd = _ref8.onPeekEnd,
+    canToggleWithShortcut = _ref8.canToggleWithShortcut,
+    id = _ref8.id;
   return /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
     namespace: openLayerObserverSideNavNamespace
   }, /*#__PURE__*/React.createElement(SideNavInternal, {

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

@@ -5,6 +5,5 @@
 ._1e0cglyw{display:none}
 ._1ul9zwfg{min-width:2pc}
 ._4cvr1h6o{align-items:center}
-._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
 @media (min-width:48rem){._181n1txw{display:flex}._1d2y1ris{min-width:max-content}}
 @media (min-width:64rem){._glte1ris{width:max-content}._15rip2n4{min-width:330px}._1gs5usvi{box-sizing:border-box}._ndwch9n0{justify-self:end}}

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

@@ -10,16 +10,14 @@ import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
 import { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/open-layer-observer-namespace-provider';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { Popup } from '@atlaskit/popup/popup';
-import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/compiled/responsive/index';
+import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/compiled/use-media-query';
 import { List } from '../../../components/list';
-import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { HasCustomThemeContext } from '../../top-nav-items/themed/has-custom-theme-context';
 import { IconButton } from '../../top-nav-items/themed/icon-button';
 import { openLayerObserverTopNavEndNamespace } from '../constants';
 var containerStyles = {
   root: "_yyhy11wp _1e0c1txw _1bahh9n0 _1ul9zwfg _1d2y1ris _glte1ris _15rip2n4 _1gs5usvi _ndwch9n0",
-  withPersistentItems: "_zulp1b66 _4cvr1h6o",
-  fullHeightSidebar: "_y4tiutpp"
+  withPersistentItems: "_zulp1b66 _4cvr1h6o"
 };
 var listStyles = {
   root: "_zulp1b66 _4cvr1h6o _1e0c1txw",
@@ -43,7 +41,6 @@ export function TopNavEnd(_ref) {
     _ref$showMoreButtonLa = _ref.showMoreButtonLabel,
     showMoreButtonLabel = _ref$showMoreButtonLa === void 0 ? 'Show more' : _ref$showMoreButtonLa;
   var hasPersistentItems = fg('platform-dst-chat-panel-layout') && persistentItems != null;
-  var isFhsEnabled = useIsFhsEnabled();
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
@@ -74,7 +71,7 @@ export function TopNavEnd(_ref) {
   }, children);
   var content = /*#__PURE__*/React.createElement("nav", {
     "aria-label": label,
-    className: ax([containerStyles.root, hasPersistentItems && containerStyles.withPersistentItems, isFhsEnabled && containerStyles.fullHeightSidebar])
+    className: ax([containerStyles.root, hasPersistentItems && containerStyles.withPersistentItems])
   }, isMobile ? /*#__PURE__*/React.createElement(Popup, {
     isOpen: isOpen,
     onClose: function onClose() {

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

@@ -1,15 +1,5 @@
 ._zulp1b66{gap:var(--ds-space-050,4px)}
-._zulp1kw7{gap:inherit}
-._yyhykb7n{grid-column:1}._15yekb7n{--animation-direction:1}
-._1e0c1kw7{display:inherit}
-._1e0c1txw{display:flex}
-._1ul9idpf{min-width:0}
+._yyhykb7n{grid-column:1}._1e0c1txw{display:flex}
 ._4cvr1h6o{align-items:center}
 ._4t3i1osq{height:100%}
-._ahbq1wug{margin-inline-start:auto}
-._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
-._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%}._4ap319ly{background-color:revert}._1m5lglyw:after{display:none}._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}}
+@media (min-width:64rem){._glte1ris{width:max-content}._15rip2n4{min-width:330px}._1gs5usvi{box-sizing:border-box}}

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

@@ -1,157 +1,24 @@
 /* top-nav-start.tsx generated by @compiled/babel-plugin v3.0.2 */
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./top-nav-start.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { forwardRef, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
-import { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/open-layer-observer-namespace-provider';
-import { fg } from '@atlaskit/platform-feature-flags/fg';
-import { UNSAFE_useMediaQuery } from '@atlaskit/primitives/compiled';
+import React, { useContext, useEffect, useRef } from 'react';
 import { TopNavStartAttachRef } from '../../../context/top-nav-start/top-nav-start-attach-ref';
-import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
-import { useHasCustomTheme } from '../../top-nav-items/themed/has-custom-theme-context';
-import { HasDefaultBackgroundColorContext } from '../../top-nav-items/themed/has-default-background-color-context';
-import { openLayerObserverTopNavStartNamespace } from '../constants';
-import { SideNavVisibilityState } from '../side-nav/side-nav-visibility-state';
-import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
-
-/**
- * Firefox does support these reorder animations, but only partially enabling layout animations would look odd.
- *
- * We are using JS to detect Firefox and disable animations, instead of using CSS, as Compiled currently does not merge duplicate
- * CSS at-rules when at-rules are nested: https://github.com/atlassian-labs/compiled/blob/e04a325915e1d13010205089e4915de0e53bc2d4/packages/css/src/plugins/merge-duplicate-at-rules.ts#L5
- * Avoiding nesting the `@supports` at-rule inside of `@media` means Compiled can remove duplicate styles from the generated CSS.
- */
-var isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
-
-// Placed in a variable, as the value is used in the translateX value for the children wrapper animation.
-var flexGap = "var(--ds-space-050, 4px)";
 
 /**
  * Styles for the TopNavStart element.
- *
- * When `useIsFhsEnabled` is true this is the styling for the inner element,
- * which re-enables pointer events.
  */
 var innerStyles = {
-  root: "_zulp1b66 _yyhykb7n _4t3i1osq _4cvr1h6o _1e0c1txw _glte1ris _15rip2n4 _1gs5usvi",
-  fullHeightSidebarExpanded: "_15rin7od _glte1osq"
-};
-
-/**
- * Styles for the outer element, that does not have re-enabled pointer events and spans the entire
- * width of the TopNavStart area.
- *
- * This wrapper element is only rendered when `useIsFhsEnabled` is true.
- */
-var wrapperStyles = {
-  root: "_vchhusvi _bozgutpp _4t3i1osq _13wnh2mm _1l3vb3bt _juxdstnw _1vinidpf _1719idpf _e6znidpf _1kyhe4h9 _4cwynqa1 _435s1l7x _m7c3idpf",
-  fullHeightSidebarExpanded: "_glte93mn _exxmutpp _4ap3vuon _m7c3kb7n",
-  fullHeightSidebarBorderTransition: "_n8qabrmi _wc72fnf5 _j3mr1v42",
-  fullHeightSidebarCustomTheming: "_4ap319ly _1m5lglyw"
-};
-
-/**
- * We use a fixed translateX offset for the slide animation (used when the TopNavStart children elements are reordered).
- * This fixed offset makes the elements appear to animate smoothly from the old to the new position.
- * This offset is calculated based on:
- * - 32px (2rem) width of the side nav toggle button (IconButton)
- * - 4px gap ('space.050' token) of the flex container
- *
- * The benefit of hardcoding this offset is that we don't need to calculate it using JS each time the sidebar is toggled.
- * However, it could become out of sync if the width of IconButton changes.
- *
- * The alternative is using JS to store the previous position of the children wrapper element, and calculate the offset based on
- * the new position, and then transforming using that offset. This would prevent the animation from going out of sync.
- */
-var childrenWrapperAnimationOffset = "calc(2rem + ".concat(flexGap, ")");
-var childrenWrapperStyles = {
-  root: "_zulp1kw7 _1e0c1kw7 _4cvr1h6o _1ul9idpf _15yekb7n _65m41mrw",
-  animationBaseStyles: "_10t81e03",
-  finalPosition: "_mjvcz12g _xrrpfnf5",
-  expandAnimationStartPosition: "_mjvcyrjp",
-  collapseAnimationStartPosition: "_mjvco0k7"
-};
-
-/**
- * We use a fixed translateX offset for the toggle button slide animation (used when the TopNavStart children elements are reordered).
- * The specific value doesn't matter too much for the toggle button animation, so we are using `100%`, which will match the toggle button width.
- *
- * By combining the `translateX` animation with an `opacity` fade, the feel and experience is actually quite similar to animating the
- * element from the exact old position (offset), and it avoids the additional complexity of needing to track and calculate the exact offset.
- */
-var toggleButtonWrapperStyles = {
-  root: "_15yekb7n _65m41mrw _10t81rjc",
-  finalPosition: "_mjvcz12g _xrrpfnf5 _bgpzkb7n",
-  expandAnimationStartPosition: "_mjvc1p9u _bgpzidpf",
-  collapseAnimationStartPosition: "_mjvc1efy _bgpzidpf",
-  expandAnimationTimingFunction: "_1xq51ytf",
-  collapseAnimationTimingFunction: "_1xq55ucs",
-  alignEnd: "_ahbq1wug"
+  root: "_zulp1b66 _yyhykb7n _4t3i1osq _4cvr1h6o _1e0c1txw _glte1ris _15rip2n4 _1gs5usvi"
 };
-
-/**
- * The consistent key used for the side nav toggle button to ensure it does not get remounted
- * when it is reordered.
- *
- * This ensures we get focus restoration for free.
- */
-var sideNavToggleButtonKey = 'side-nav-toggle-button';
-var TopNavStartInnerOld = /*#__PURE__*/forwardRef(function TopNavStartInner(_ref, ref) {
-  var children = _ref.children,
-    testId = _ref.testId;
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref,
-    "data-testid": testId,
-    className: ax([innerStyles.root])
-  }, children);
-});
-var TopNavStartInnerFHS = /*#__PURE__*/forwardRef(function TopNavStartInnerFHS(_ref2, ref) {
-  var children = _ref2.children,
-    testId = _ref2.testId;
-  // This needs the real `defaultCollapsed` state or will not SSR properly
-  // TODO: lift `defaultCollapsed` state to `Root` (DSP-23683)
-  // then context value will be correct in SSR / from initial render
-  var _useSideNavVisibility = useSideNavVisibility({
-      defaultCollapsed: true
-    }),
-    isExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop;
-  var sideNavState = useContext(SideNavVisibilityState);
-  var isFirstRenderRef = useRef(true);
-  useEffect(function () {
-    // 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]);
-  var hasCustomTheme = useHasCustomTheme();
-  var hasDefaultBackgroundColor = useContext(HasDefaultBackgroundColorContext);
-  return /*#__PURE__*/React.createElement("div", {
-    className: ax([wrapperStyles.root, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded, !isFirstRenderRef.current && isExpandedOnDesktop && wrapperStyles.fullHeightSidebarBorderTransition, hasCustomTheme && !hasDefaultBackgroundColor && fg('platform_dst_nav4_custom_theming_fhs_1') && wrapperStyles.fullHeightSidebarCustomTheming])
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: ref,
-    "data-testid": testId,
-    className: ax([innerStyles.root, isExpandedOnDesktop && innerStyles.fullHeightSidebarExpanded])
-  }, /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
-    namespace: openLayerObserverTopNavStartNamespace
-  }, children)));
-});
-
 /**
  * __TopNavStart__
  *
  * Wrapper for the top navigation actions on the inline-start (left) side of the top navigation.
  */
-export function TopNavStart(_ref3) {
-  var children = _ref3.children,
-    testId = _ref3.testId,
-    sideNavToggleButton = _ref3.sideNavToggleButton;
-  var isFhsEnabled = useIsFhsEnabled();
+export function TopNavStart(_ref) {
+  var children = _ref.children,
+    testId = _ref.testId,
+    sideNavToggleButton = _ref.sideNavToggleButton;
   var ref = useContext(TopNavStartAttachRef);
   var elementRef = useRef(null);
 
@@ -160,116 +27,9 @@ export function TopNavStart(_ref3) {
   useEffect(function () {
     ref(elementRef.current);
   }, [elementRef, ref]);
-
-  // This needs the real `defaultCollapsed` state or will not SSR properly
-  // TODO: lift `defaultCollapsed` state to `Root` (DSP-23683)
-  // then context value will be correct in SSR / from initial render
-  var _useSideNavVisibility2 = useSideNavVisibility({
-      defaultCollapsed: true
-    }),
-    isExpandedOnDesktop = _useSideNavVisibility2.isExpandedOnDesktop;
-
-  // For SSR assume desktop
-  var _useState = useState(true),
-    _useState2 = _slicedToArray(_useState, 2),
-    isDesktop = _useState2[0],
-    setIsDesktop = _useState2[1];
-  // Set state to real value on client
-  // This could result in some visible shift on mobile when hydrating SSR
-  // TODO: review and improve SSR behavior as necessary (DSP-23817)
-  useLayoutEffect(function () {
-    // Checking this to avoid breaking tests when `matchMedia` is not mocked
-    // Ideally we wouldn't cater to test environments, but this avoids introducing unnecessary friction
-    if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
-      setIsDesktop(window.matchMedia('(min-width: 64rem)').matches);
-    }
-  }, []);
-  UNSAFE_useMediaQuery('above.md', function (event) {
-    setIsDesktop(event.matches);
-  });
-  var _useState3 = useState({
-      type: 'idle'
-    }),
-    _useState4 = _slicedToArray(_useState3, 2),
-    animationState = _useState4[0],
-    setAnimationState = _useState4[1];
-
-  // Used to prevent the reorder animations from running on the initial render.
-  var isFirstRenderRef = useRef(true);
-  var sideNavState = useContext(SideNavVisibilityState);
-  useEffect(function () {
-    if (!isFhsEnabled) {
-      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;
-    }
-  }, [isFhsEnabled, sideNavState]);
-
-  // Using a stable ref to avoid re-running the animation layout effect when the toggle button prop value changes, which
-  // can happen a lot (e.g. if the parent re-renders)
-  var sideNavToggleButtonStableRef = useStableRef(sideNavToggleButton);
-  useLayoutEffect(function () {
-    if (!isFhsEnabled) {
-      return;
-    }
-
-    /**
-     * This layout effect is used to animate the TopNavStart children elements to their new position after being reordered.
-     * It is called when the sidebar's desktop expansion state changes.
-     *
-     * It works by first setting a translateX offset on the elements, used as the start position of the slide animation.
-     * - For the toggle button, it's a fixed offset. It's combined with an opacity, so the exact offset doesn't matter too much.
-     * - For the children wrapper (wrapping everything except the toggle button), an offset was chosen to make the animation
-     * start position the exact same as the element's old position. See comments for `childrenWrapperStyles` for more details.
-     *
-     * On the next frame, the translateX offset is cleared, triggering the animation to the new position.
-     */
-
-    if (isFirstRenderRef.current) {
-      // No animations on initial render.
-      return;
-    }
-    if (!sideNavToggleButtonStableRef.current) {
-      // If there is no toggle button, there should be no re-order animations.
-      return;
-    }
-
-    // Set the translateX offsets so elements are ready to animate to their actual new position after being reordered
-    setAnimationState({
-      type: isExpandedOnDesktop ? 'expand' : 'collapse'
-    });
-    requestAnimationFrame(function () {
-      // Clear translateX offsets on next frame to trigger animation to new position in a re-render
-      setAnimationState({
-        type: 'idle'
-      });
-    });
-
-    // This layout effect is called when the sidebar's desktop expansion state changes.
-  }, [isExpandedOnDesktop, isFhsEnabled, sideNavToggleButtonStableRef]);
-  var TopNavStartInner = isFhsEnabled ? TopNavStartInnerFHS : TopNavStartInnerOld;
-  return /*#__PURE__*/React.createElement(TopNavStartInner, {
+  return /*#__PURE__*/React.createElement("div", {
     ref: elementRef,
-    testId: testId
-  }, !isFhsEnabled && sideNavToggleButton, sideNavToggleButton && (!isDesktop || !isExpandedOnDesktop) && isFhsEnabled && /*#__PURE__*/React.createElement("div", {
-    key: sideNavToggleButtonKey,
-    className: ax([!isFirefox && toggleButtonWrapperStyles.root, !isFirefox && animationState.type === 'idle' && toggleButtonWrapperStyles.finalPosition, !isFirefox &&
-    // Timing function is applied when the browser animates to the idle position.
-    animationState.type === 'idle' && toggleButtonWrapperStyles.collapseAnimationTimingFunction, !isFirefox && animationState.type === 'collapse' && toggleButtonWrapperStyles.collapseAnimationStartPosition])
-  }, sideNavToggleButton), isFhsEnabled ? /*#__PURE__*/React.createElement("div", {
-    className: ax([childrenWrapperStyles.root, !isFirefox && childrenWrapperStyles.animationBaseStyles, !isFirefox && animationState.type === 'idle' && childrenWrapperStyles.finalPosition, !isFirefox && animationState.type === 'expand' && childrenWrapperStyles.expandAnimationStartPosition, !isFirefox && animationState.type === 'collapse' && childrenWrapperStyles.collapseAnimationStartPosition])
-  }, children) : children, sideNavToggleButton && isDesktop && isExpandedOnDesktop && isFhsEnabled && /*#__PURE__*/React.createElement("div", {
-    key: sideNavToggleButtonKey,
-    className: ax([!isFirefox && toggleButtonWrapperStyles.root, toggleButtonWrapperStyles.alignEnd, !isFirefox && animationState.type === 'idle' && toggleButtonWrapperStyles.finalPosition, !isFirefox &&
-    // Timing function is applied when the browser animates to the idle position.
-    animationState.type === 'idle' && toggleButtonWrapperStyles.expandAnimationTimingFunction, !isFirefox && animationState.type === 'expand' && toggleButtonWrapperStyles.expandAnimationStartPosition])
-  }, sideNavToggleButton));
+    "data-testid": testId,
+    className: ax([innerStyles.root])
+  }, sideNavToggleButton, children);
 }

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

@@ -1,28 +1,14 @@
 ._nd5l8cbt{grid-area:top-bar}
 ._zulpu2gc{gap:var(--ds-space-100,8px)}
 ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
-._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)}
-._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}
 ._1pbyegat{z-index:4}
 ._4cvr1h6o{align-items:center}
 ._4t3i1dgc{height:var(--n_tNvM)}
-._aetrb3bt:after{content:""}
 ._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}
-._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}}
-@media (min-width:64rem){._1m5lglyw:after{display:none}._1rqt16a9{grid-template-columns:0fr minmax(min-content,max-content) 1fr}._pdlmutpp{gap:var(--ds-space-150,9pt)}}
-@media (min-width:110.5rem){._jh1g18ax{grid-template-columns:1fr minmax(min-content,max-content) 1fr}}
+@media (min-width:48rem){._1j8b18ax{grid-template-columns:1fr minmax(min-content,max-content) 1fr}}